diff --git a/frontend/src/modules/knowledge-library/header.jsx b/frontend/src/modules/knowledge-library/header.jsx
index acb009814..1a6fb555b 100644
--- a/frontend/src/modules/knowledge-library/header.jsx
+++ b/frontend/src/modules/knowledge-library/header.jsx
@@ -1,12 +1,13 @@
 import React, { useState } from "react";
-import { Row, Col, Button, Input, Space, Select } from "antd";
+import { Row, Col, Button, Input, Select } from "antd";
 import { SearchOutlined } from "@ant-design/icons";
 import styles from "./header.module.scss";
-import { useHistory } from "react-router-dom";
 import { KNOWLEDGE_LIBRARY } from "../map/map";
 import { eventTrack } from "../../utils/misc";
-import DownArrow from "../../images/knowledge-library/chevron-down.svg";
 import { useRouter } from "next/router";
+import { ChevronDown } from "../../components/icons";
+import TopicViewIcon from '../../images/knowledge-library/topic-view-icon.svg'
+import GlobeIcon from '../../images/knowledge-library/globe-outline.svg'
 
 const KnowledgeLibrarySearch = ({
   router,
@@ -156,10 +157,10 @@ const Header = ({
       <div className="selection-value">
         <button className="select-button">
           <div className="selection-arrow">
-            <DownArrow />
+            <ChevronDown />
           </div>
         </button>
-        <span className="label text-white">{`${view} view`}</span>
+        <span className="label">{`${view} view`}</span>
         {view === "map" ? (
           <img
             src="/knowledge-library/globe-outline.svg"
@@ -188,7 +189,7 @@ const Header = ({
           className="header-filter-option"
         >
           {/* Search input & filtered by list */}
-          <Col lg={22} md={20} sm={18}>
+          <Col lg={21} md={20} sm={18}>
             <Row type="flex" justify="space-between" align="middle">
               <div className="search-box search-box-mobile">
                 {/* <Search updateQuery={updateQuery} /> */}
@@ -208,17 +209,17 @@ const Header = ({
                       ? eventTrack("Knowledge library", "Filter", "Button")
                       : eventTrack("Communities", "Filter", "Button");
                   }}
-                  className="filter-icon-button"
+                  // className="filter-icon-button"
                   type="link"
                 >
                   {filterTagValue.length > 0 && (
                     <div className="filter-status">{filterTagValue.length}</div>
                   )}
-                  <img
+                  {/* <img
                     src="/knowledge-library/filter-icon.svg"
                     className="filter-icon"
                     alt="config-icon"
-                  />
+                  /> */}
                   Filter
                 </Button>
               </div>
@@ -230,29 +231,24 @@ const Header = ({
             </Row>
           </Col>
           {/* Map/Topic view dropdown */}
-          <Col lg={2} md={4} sm={6} className="select-wrapper">
+          <Col lg={3} md={4} sm={6} className="select-wrapper">
             <Select
               dropdownClassName={styles.overlayDropdown}
               className="view-selection"
               value={view}
               onChange={(val) => setView(val)}
+              showArrow={false}
             >
               <Select.Option value="map">
                 {/* Map View */}
 
                 <>
                   <div className="selection-value">
-                    <button className="select-button">
-                      <div className="selection-arrow">
-                        <DownArrow />
-                      </div>
-                    </button>
-                    <span className="label text-white">{`${view} view`}</span>
-                    <img
-                      src="/knowledge-library/globe-outline.svg"
-                      alt="globe-icon"
-                      className="filter-img"
-                    />
+                    <GlobeIcon />
+                    <span className="label">{`${view} view`}</span>
+                    <span className="selection-arrow">
+                      <ChevronDown />
+                    </span>
                   </div>
                   <span className="dropdown-label">Map View</span>
                 </>
@@ -262,17 +258,11 @@ const Header = ({
               >
                 <>
                   <div className="selection-value">
-                    <button className="select-button">
-                      <div className="selection-arrow">
-                        <DownArrow />
-                      </div>
-                    </button>
-                    <span className="label text-white">{`${view} view`}</span>
-                    <img
-                      src="/knowledge-library/topic-view-icon.svg"
-                      alt="topic-icon"
-                      className="filter-img"
-                    />
+                    <TopicViewIcon className="fill" />
+                    <span className="label">{`${view} view`}</span>
+                    <span className="selection-arrow">
+                      <ChevronDown />
+                    </span>
                   </div>
                   <span className="dropdown-label">
                     {path === KNOWLEDGE_LIBRARY ? "Topic" : "Grid"} View
diff --git a/frontend/src/modules/knowledge-library/header.module.scss b/frontend/src/modules/knowledge-library/header.module.scss
index 18404019d..8a0a36524 100644
--- a/frontend/src/modules/knowledge-library/header.module.scss
+++ b/frontend/src/modules/knowledge-library/header.module.scss
@@ -1,4 +1,5 @@
-@import "../../vars.scss";
+@import '../../vars.scss';
+@import '../../styles/vars.scss';
 
 .overlayDropdown {
   :global {
@@ -10,7 +11,7 @@
 
 .uiHeader {
   // background-color: rgba(0, 91, 112, 0.8);
-  background-color: #004a6f;
+  background-color: $primaryGrey;
   padding: 5px 10px 5px;
   min-height: 70px;
   display: flex;
@@ -32,19 +33,6 @@
       padding-left: 0;
     }
 
-    .filter-icon-button {
-      border: none;
-      display: flex;
-      color: white !important;
-      font-size: 16px;
-      font-weight: 600;
-      padding: 4px 15px;
-      span {
-        margin-left: 5px;
-        display: inline-block;
-        transform: translateY(2px);
-      }
-    }
 
     .sort-btn {
       border: none;
@@ -95,7 +83,7 @@
           display: block;
           margin-left: 0;
           margin-right: 8px;
-          background-image: url("/knowledge-library/outlined-close-icon.svg");
+          background-image: url('/knowledge-library/outlined-close-icon.svg');
           background-repeat: no-repeat;
           background-position: left center;
         }
@@ -145,8 +133,8 @@
         font-weight: 700;
         height: 15px;
         border-radius: 8px;
-        top: 0;
-        left: 32px;
+        top: 8px;
+        right: -12px;
         font-size: 10px;
         line-height: 15px;
         padding: 0 2px;
@@ -192,142 +180,67 @@
       }
     }
 
-    @media (max-width: 400px) {
-      .search-box-mobile {
-        .ant-space-item:nth-of-type(1) {
-          width: unset;
-        }
-      }
-    }
-
     .select-wrapper {
-      padding: 0 !important;
+      padding: 0;
       width: 100%;
-      max-width: 194px;
-      .selection-arrow {
-        margin: auto;
-        display: flex;
-        height: 30px;
-        align-items: center;
-        svg {
-          width: 15px;
-        }
-      }
-      .ant-select-open .selection-arrow {
-        transform: rotate(180deg);
-      }
-
-      .select-button,
-      .select-button:hover .ant-select-open .selection-arrow,
-      .view-selection .selection-arrow {
-        -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-        width: 15px;
-      }
-      .dropdown-label {
-        display: none;
-      }
       .view-selection {
-        width: 100%;
-        padding-right: 0;
-        border-radius: 10px;
-        border: 0;
-        &:hover {
-          background-color: $yellow-highlight;
-          .select-button {
-            opacity: 0.5 !important;
-          }
-        }
-
-        .selection-value,
-        .ant-select-selection-item {
-          display: flex;
-        }
-
-        .selection-value,
-        .select-button,
-        .ant-select-selector {
-          width: 100%;
-        }
-
-        .ant-select-selection-item {
-          align-self: center;
-          padding-right: 0;
-        }
-
         .selection-value {
-          height: 100%;
+          width: 100%;
           align-items: center;
-          justify-content: space-between;
-
-          .label::first-letter {
-            text-transform: uppercase;
-          }
-
-          .filter-img {
-            width: 32px;
+          justify-content: center;
+          gap: 12px;
+          .selection-arrow {
+            width: 15px;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+            svg {
+              width: 15px;
+              path {
+                stroke: $primaryDarkBlue;
+              }
+            }
           }
-
-          .select-button {
-            max-width: 37px;
-            border: 0;
-            opacity: 0.2;
-            background-color: #fff;
-            cursor: pointer;
-            border-radius: 10px 0px 0px 10px;
-
-            &:hover {
-              opacity: 0.5;
+          .label {
+            color: $primaryDarkBlue;
+            &::first-letter {
+              text-transform: uppercase;
             }
           }
-        }
-
-        .ant-select-selector {
-          border: 0;
-          background: rgba(255, 255, 255, 0.1);
-          border-radius: 10px;
-          max-width: 100%;
-          padding: 4px 5px;
-          height: auto;
-          &:hover {
-            background: $yellow-highlight;
-            color: #fff;
+          svg {
+            width: 32px;
+            height: 32px;
+            path {
+              stroke: $primaryDarkBlue;
+            }
+            &.fill {
+              path {
+                stroke: none;
+                fill: $primaryDarkBlue;
+              }
+            }
           }
         }
-
-        .anticon.anticon-down {
+        .dropdown-label {
           display: none;
         }
-      }
-      @media (max-width: 500px) {
-        .select-button {
-          border-radius: 4px 0px 0px 4px !important;
-          background-color: #6da0ac !important;
-          opacity: 1 !important;
-        }
-        .ant-select-selector {
-          padding: 0 !important;
-          border-radius: 4px !important;
-          .selection-value {
-            padding-right: 6px;
-          }
-        }
-
-        .selection-arrow svg {
-          width: 12px;
-          path {
-            stroke: #fff;
-            stroke-width: 2px;
-          }
-        }
-
-        max-width: 80px;
-        .label {
-          display: none;
+        &.ant-select-open .selection-arrow {
+          transform: rotate(180deg);
         }
       }
+      .selection-value,
+      .ant-select-selection-item {
+        display: flex;
+      }
     }
     @media (max-width: 400px) {
+      .search-box-mobile {
+        .ant-space-item:nth-of-type(1) {
+          width: unset;
+        }
+      }
       .mobile-src {
         display: block;
         max-width: fit-content;