diff --git a/packages/web/components/elements/DropdownElements.tsx b/packages/web/components/elements/DropdownElements.tsx
index b2d581ebf..d468ca4d7 100644
--- a/packages/web/components/elements/DropdownElements.tsx
+++ b/packages/web/components/elements/DropdownElements.tsx
@@ -173,7 +173,11 @@ export function Dropdown(
     <Root modal={modal} onOpenChange={props.onOpenChange}>
       <DropdownTrigger
         disabled={disabled}
-        css={{ height: '100%', cursor: 'pointer' }}
+        css={{
+          height: '100%',
+          cursor: 'pointer',
+          '&:hover': { opacity: '1.0' },
+        }}
       >
         {triggerElement}
       </DropdownTrigger>
diff --git a/packages/web/components/elements/SplitButton.tsx b/packages/web/components/elements/SplitButton.tsx
index 952966937..995aec229 100644
--- a/packages/web/components/elements/SplitButton.tsx
+++ b/packages/web/components/elements/SplitButton.tsx
@@ -2,8 +2,6 @@ import { ReactNode, useEffect, useMemo, useRef } from 'react'
 import { styled } from '../tokens/stitches.config'
 import { Box, HStack, VStack } from './LayoutPrimitives'
 import { Button } from './Button'
-import { DropdownMenu } from '@radix-ui/react-dropdown-menu'
-import { ArrowDown } from 'phosphor-react'
 import { Dropdown, DropdownOption } from './DropdownElements'
 import { CaretDownIcon } from './icons/CaretDownIcon'
 
@@ -24,9 +22,19 @@ const CaretButton = (): JSX.Element => {
         borderBottomRightRadius: '5px',
         borderTopLeftRadius: '0px',
         borderBottomLeftRadius: '0px',
+        '--caret-color': '#EDEDED',
+        '&:hover': {
+          opacity: 1.0,
+          color: 'white',
+          '--caret-color': 'white',
+        },
+        '&:focus': {
+          outline: 'none',
+          border: '0px solid transparent',
+        },
       }}
     >
-      <CaretDownIcon size={8} color="#EDEDED" />
+      <CaretDownIcon size={8} color="var(--caret-color)" />
     </VStack>
   )
 }
@@ -48,8 +56,8 @@ export const SplitButton = (props: SplitButtonProps): JSX.Element => {
           borderTopRightRadius: '0px',
           borderBottomRightRadius: '0px',
           '&:hover': {
-            opacity: 0.7,
-            border: '0px solid transparent',
+            opacity: 1.0,
+            color: 'white',
           },
           '&:focus': {
             outline: 'none',
@@ -59,7 +67,6 @@ export const SplitButton = (props: SplitButtonProps): JSX.Element => {
       >
         {props.title}
       </Button>
-      {/* <Divider></Divider> */}
       <Dropdown triggerElement={<CaretButton />}>
         <DropdownOption onSelect={() => console.log()} title="Archive (e)" />
       </Dropdown>
diff --git a/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx b/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx
index 28620284f..eff153839 100644
--- a/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx
+++ b/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx
@@ -1,40 +1,55 @@
 /* eslint-disable functional/no-class */
 /* eslint-disable functional/no-this-expression */
 import { IconProps } from './IconProps'
+import { SpanBox } from '../LayoutPrimitives'
 
 import React from 'react'
 
 export class HeaderCheckboxIcon extends React.Component<IconProps> {
   render() {
-    const size = (this.props.size || 26).toString()
-    const color = (this.props.color || '#2A2A2A').toString()
-
     return (
-      <svg
-        width="40"
-        height="40"
-        viewBox="0 0 40 40"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
+      <SpanBox
+        css={{
+          display: 'flex',
+          '--inner-color': 'white',
+          '--ring-color': 'var(--colors-thHeaderIconRing)',
+          '&:hover': {
+            '--ring-fill': '#007AFF',
+            '--ring-color': '#007AFF',
+          },
+        }}
       >
-        <rect
-          x="0.5"
-          y="0.5"
-          width="39"
-          height="39"
-          rx="19.5"
-          stroke="#3D3D3D"
-        />
-        <g>
-          <path
-            d="M12.5 14.1667C12.5 13.7246 12.6756 13.3007 12.9882 12.9882C13.3007 12.6756 13.7246 12.5 14.1667 12.5H25.8333C26.2754 12.5 26.6993 12.6756 27.0118 12.9882C27.3244 13.3007 27.5 13.7246 27.5 14.1667V25.8333C27.5 26.2754 27.3244 26.6993 27.0118 27.0118C26.6993 27.3244 26.2754 27.5 25.8333 27.5H14.1667C13.7246 27.5 13.3007 27.3244 12.9882 27.0118C12.6756 26.6993 12.5 26.2754 12.5 25.8333V14.1667Z"
-            stroke="#D9D9D9"
-            strokeWidth="1.25"
-            strokeLinecap="round"
-            strokeLinejoin="round"
+        <svg
+          width="40"
+          height="40"
+          viewBox="0 0 40 40"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            x="0.5"
+            y="0.5"
+            width="39"
+            height="39"
+            rx="19.5"
+            style={{
+              fill: 'var(--ring-fill)',
+              stroke: 'var(--ring-color)',
+            }}
           />
-        </g>
-      </svg>
+          <g>
+            <path
+              d="M12.5 14.1667C12.5 13.7246 12.6756 13.3007 12.9882 12.9882C13.3007 12.6756 13.7246 12.5 14.1667 12.5H25.8333C26.2754 12.5 26.6993 12.6756 27.0118 12.9882C27.3244 13.3007 27.5 13.7246 27.5 14.1667V25.8333C27.5 26.2754 27.3244 26.6993 27.0118 27.0118C26.6993 27.3244 26.2754 27.5 25.8333 27.5H14.1667C13.7246 27.5 13.3007 27.3244 12.9882 27.0118C12.6756 26.6993 12.5 26.2754 12.5 25.8333V14.1667Z"
+              style={{
+                stroke: 'var(--inner-color)',
+              }}
+              strokeWidth="1.25"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </g>
+        </svg>
+      </SpanBox>
     )
   }
 }
diff --git a/packages/web/components/elements/icons/HeaderSearchIcon.tsx b/packages/web/components/elements/icons/HeaderSearchIcon.tsx
index e26a1811e..9444c1d6b 100644
--- a/packages/web/components/elements/icons/HeaderSearchIcon.tsx
+++ b/packages/web/components/elements/icons/HeaderSearchIcon.tsx
@@ -1,47 +1,65 @@
 /* eslint-disable functional/no-class */
 /* eslint-disable functional/no-this-expression */
+import { SpanBox } from '../LayoutPrimitives'
 import { IconProps } from './IconProps'
 
 import React from 'react'
 
 export class HeaderSearchIcon extends React.Component<IconProps> {
   render() {
-    const size = (this.props.size || 26).toString()
-    const color = (this.props.color || '#2A2A2A').toString()
-
     return (
-      <svg
-        width="40"
-        height="40"
-        viewBox="0 0 40 40"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
+      <SpanBox
+        css={{
+          display: 'flex',
+          '--inner-color': 'var(--colors-thHeaderIconInner)',
+          '--ring-color': 'var(--colors-thHeaderIconRing)',
+          '&:hover': {
+            '--inner-color': 'white',
+            '--ring-fill': '#007AFF',
+            '--ring-color': '#007AFF',
+          },
+        }}
       >
-        <rect
-          x="0.5"
-          y="0.5"
-          width="39"
-          height="39"
-          rx="19.5"
-          stroke="#3D3D3D"
-        />
-        <g>
-          <path
-            d="M12.5 18.3333C12.5 19.0994 12.6509 19.8579 12.944 20.5657C13.2372 21.2734 13.6669 21.9164 14.2085 22.4581C14.7502 22.9998 15.3933 23.4295 16.101 23.7226C16.8087 24.0158 17.5673 24.1667 18.3333 24.1667C19.0994 24.1667 19.8579 24.0158 20.5657 23.7226C21.2734 23.4295 21.9164 22.9998 22.4581 22.4581C22.9998 21.9164 23.4295 21.2734 23.7226 20.5657C24.0158 19.8579 24.1667 19.0994 24.1667 18.3333C24.1667 17.5673 24.0158 16.8087 23.7226 16.101C23.4295 15.3933 22.9998 14.7502 22.4581 14.2085C21.9164 13.6669 21.2734 13.2372 20.5657 12.944C19.8579 12.6509 19.0994 12.5 18.3333 12.5C17.5673 12.5 16.8087 12.6509 16.101 12.944C15.3933 13.2372 14.7502 13.6669 14.2085 14.2085C13.6669 14.7502 13.2372 15.3933 12.944 16.101C12.6509 16.8087 12.5 17.5673 12.5 18.3333Z"
-            stroke="#D9D9D9"
-            strokeWidth="1.25"
-            strokeLinecap="round"
-            strokeLinejoin="round"
+        <svg
+          width="40"
+          height="40"
+          viewBox="0 0 40 40"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            x="0.5"
+            y="0.5"
+            width="39"
+            height="39"
+            rx="19.5"
+            style={{
+              fill: 'var(--ring-fill)',
+              stroke: 'var(--ring-color)',
+            }}
           />
-          <path
-            d="M27.5 27.5L22.5 22.5"
-            stroke="#D9D9D9"
-            strokeWidth="1.25"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </g>
-      </svg>
+          <g>
+            <path
+              d="M12.5 18.3333C12.5 19.0994 12.6509 19.8579 12.944 20.5657C13.2372 21.2734 13.6669 21.9164 14.2085 22.4581C14.7502 22.9998 15.3933 23.4295 16.101 23.7226C16.8087 24.0158 17.5673 24.1667 18.3333 24.1667C19.0994 24.1667 19.8579 24.0158 20.5657 23.7226C21.2734 23.4295 21.9164 22.9998 22.4581 22.4581C22.9998 21.9164 23.4295 21.2734 23.7226 20.5657C24.0158 19.8579 24.1667 19.0994 24.1667 18.3333C24.1667 17.5673 24.0158 16.8087 23.7226 16.101C23.4295 15.3933 22.9998 14.7502 22.4581 14.2085C21.9164 13.6669 21.2734 13.2372 20.5657 12.944C19.8579 12.6509 19.0994 12.5 18.3333 12.5C17.5673 12.5 16.8087 12.6509 16.101 12.944C15.3933 13.2372 14.7502 13.6669 14.2085 14.2085C13.6669 14.7502 13.2372 15.3933 12.944 16.101C12.6509 16.8087 12.5 17.5673 12.5 18.3333Z"
+              style={{
+                stroke: 'var(--inner-color)',
+              }}
+              strokeWidth="1.25"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M27.5 27.5L22.5 22.5"
+              style={{
+                stroke: 'var(--inner-color)',
+              }}
+              strokeWidth="1.25"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </g>
+        </svg>
+      </SpanBox>
     )
   }
 }
diff --git a/packages/web/components/elements/icons/HeaderToggleGridIcon.tsx b/packages/web/components/elements/icons/HeaderToggleGridIcon.tsx
index 636a0e6fc..16e878737 100644
--- a/packages/web/components/elements/icons/HeaderToggleGridIcon.tsx
+++ b/packages/web/components/elements/icons/HeaderToggleGridIcon.tsx
@@ -1,61 +1,82 @@
 /* eslint-disable functional/no-class */
 /* eslint-disable functional/no-this-expression */
+import { SpanBox } from '../LayoutPrimitives'
 import { IconProps } from './IconProps'
 
 import React from 'react'
 
 export class HeaderToggleGridIcon extends React.Component<IconProps> {
   render() {
-    const size = (this.props.size || 26).toString()
-    const color = (this.props.color || '#2A2A2A').toString()
-
     return (
-      <svg
-        width="40"
-        height="40"
-        viewBox="0 0 40 40"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
+      <SpanBox
+        css={{
+          display: 'flex',
+          '--inner-color': 'white',
+          '--ring-color': 'var(--colors-thHeaderIconRing)',
+          '&:hover': {
+            '--ring-fill': '#007AFF',
+            '--ring-color': '#007AFF',
+          },
+        }}
       >
-        <rect
-          x="0.5"
-          y="0.5"
-          width="39"
-          height="39"
-          rx="19.5"
-          stroke="#3D3D3D"
-        />
-        <g>
-          <path
-            d="M13.3333 14.1654C13.3333 13.9444 13.4211 13.7324 13.5774 13.5761C13.7337 13.4198 13.9457 13.332 14.1667 13.332H17.5C17.721 13.332 17.933 13.4198 18.0893 13.5761C18.2455 13.7324 18.3333 13.9444 18.3333 14.1654V17.4987C18.3333 17.7197 18.2455 17.9317 18.0893 18.088C17.933 18.2442 17.721 18.332 17.5 18.332H14.1667C13.9457 18.332 13.7337 18.2442 13.5774 18.088C13.4211 17.9317 13.3333 17.7197 13.3333 17.4987V14.1654Z"
-            stroke="#D9D9D9"
-            strokeWidth="1.25"
-            strokeLinecap="round"
-            strokeLinejoin="round"
+        <svg
+          width="40"
+          height="40"
+          viewBox="0 0 40 40"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            x="0.5"
+            y="0.5"
+            width="39"
+            height="39"
+            rx="19.5"
+            style={{
+              fill: 'var(--ring-fill)',
+              stroke: 'var(--ring-color)',
+            }}
           />
-          <path
-            d="M21.6667 14.1654C21.6667 13.9444 21.7545 13.7324 21.9107 13.5761C22.067 13.4198 22.279 13.332 22.5 13.332H25.8333C26.0543 13.332 26.2663 13.4198 26.4226 13.5761C26.5789 13.7324 26.6667 13.9444 26.6667 14.1654V17.4987C26.6667 17.7197 26.5789 17.9317 26.4226 18.088C26.2663 18.2442 26.0543 18.332 25.8333 18.332H22.5C22.279 18.332 22.067 18.2442 21.9107 18.088C21.7545 17.9317 21.6667 17.7197 21.6667 17.4987V14.1654Z"
-            stroke="#D9D9D9"
-            strokeWidth="1.25"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          <path
-            d="M13.3333 22.5013C13.3333 22.2803 13.4211 22.0683 13.5774 21.912C13.7337 21.7558 13.9457 21.668 14.1667 21.668H17.5C17.721 21.668 17.933 21.7558 18.0893 21.912C18.2455 22.0683 18.3333 22.2803 18.3333 22.5013V25.8346C18.3333 26.0556 18.2455 26.2676 18.0893 26.4239C17.933 26.5802 17.721 26.668 17.5 26.668H14.1667C13.9457 26.668 13.7337 26.5802 13.5774 26.4239C13.4211 26.2676 13.3333 26.0556 13.3333 25.8346V22.5013Z"
-            stroke="#D9D9D9"
-            strokeWidth="1.25"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          <path
-            d="M21.6667 22.5013C21.6667 22.2803 21.7545 22.0683 21.9107 21.912C22.067 21.7558 22.279 21.668 22.5 21.668H25.8333C26.0543 21.668 26.2663 21.7558 26.4226 21.912C26.5789 22.0683 26.6667 22.2803 26.6667 22.5013V25.8346C26.6667 26.0556 26.5789 26.2676 26.4226 26.4239C26.2663 26.5802 26.0543 26.668 25.8333 26.668H22.5C22.279 26.668 22.067 26.5802 21.9107 26.4239C21.7545 26.2676 21.6667 26.0556 21.6667 25.8346V22.5013Z"
-            stroke="#D9D9D9"
-            strokeWidth="1.25"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </g>
-      </svg>
+          <g>
+            <path
+              d="M13.3333 14.1654C13.3333 13.9444 13.4211 13.7324 13.5774 13.5761C13.7337 13.4198 13.9457 13.332 14.1667 13.332H17.5C17.721 13.332 17.933 13.4198 18.0893 13.5761C18.2455 13.7324 18.3333 13.9444 18.3333 14.1654V17.4987C18.3333 17.7197 18.2455 17.9317 18.0893 18.088C17.933 18.2442 17.721 18.332 17.5 18.332H14.1667C13.9457 18.332 13.7337 18.2442 13.5774 18.088C13.4211 17.9317 13.3333 17.7197 13.3333 17.4987V14.1654Z"
+              style={{
+                stroke: 'var(--inner-color)',
+              }}
+              strokeWidth="1.25"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M21.6667 14.1654C21.6667 13.9444 21.7545 13.7324 21.9107 13.5761C22.067 13.4198 22.279 13.332 22.5 13.332H25.8333C26.0543 13.332 26.2663 13.4198 26.4226 13.5761C26.5789 13.7324 26.6667 13.9444 26.6667 14.1654V17.4987C26.6667 17.7197 26.5789 17.9317 26.4226 18.088C26.2663 18.2442 26.0543 18.332 25.8333 18.332H22.5C22.279 18.332 22.067 18.2442 21.9107 18.088C21.7545 17.9317 21.6667 17.7197 21.6667 17.4987V14.1654Z"
+              style={{
+                stroke: 'var(--inner-color)',
+              }}
+              strokeWidth="1.25"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M13.3333 22.5013C13.3333 22.2803 13.4211 22.0683 13.5774 21.912C13.7337 21.7558 13.9457 21.668 14.1667 21.668H17.5C17.721 21.668 17.933 21.7558 18.0893 21.912C18.2455 22.0683 18.3333 22.2803 18.3333 22.5013V25.8346C18.3333 26.0556 18.2455 26.2676 18.0893 26.4239C17.933 26.5802 17.721 26.668 17.5 26.668H14.1667C13.9457 26.668 13.7337 26.5802 13.5774 26.4239C13.4211 26.2676 13.3333 26.0556 13.3333 25.8346V22.5013Z"
+              style={{
+                stroke: 'var(--inner-color)',
+              }}
+              strokeWidth="1.25"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M21.6667 22.5013C21.6667 22.2803 21.7545 22.0683 21.9107 21.912C22.067 21.7558 22.279 21.668 22.5 21.668H25.8333C26.0543 21.668 26.2663 21.7558 26.4226 21.912C26.5789 22.0683 26.6667 22.2803 26.6667 22.5013V25.8346C26.6667 26.0556 26.5789 26.2676 26.4226 26.4239C26.2663 26.5802 26.0543 26.668 25.8333 26.668H22.5C22.279 26.668 22.067 26.5802 21.9107 26.4239C21.7545 26.2676 21.6667 26.0556 21.6667 25.8346V22.5013Z"
+              style={{
+                stroke: 'var(--inner-color)',
+              }}
+              strokeWidth="1.25"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </g>
+        </svg>
+      </SpanBox>
     )
   }
 }
diff --git a/packages/web/components/elements/icons/HeaderToggleListIcon.tsx b/packages/web/components/elements/icons/HeaderToggleListIcon.tsx
index 44ac56613..63cf27655 100644
--- a/packages/web/components/elements/icons/HeaderToggleListIcon.tsx
+++ b/packages/web/components/elements/icons/HeaderToggleListIcon.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable functional/no-class */
 /* eslint-disable functional/no-this-expression */
+import { SpanBox } from '../LayoutPrimitives'
 import { IconProps } from './IconProps'
 
 import React from 'react'
@@ -10,38 +11,57 @@ export class HeaderToggleListIcon extends React.Component<IconProps> {
     const color = (this.props.color || '#2A2A2A').toString()
 
     return (
-      <svg
-        width="40"
-        height="40"
-        viewBox="0 0 40 40"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
+      <SpanBox
+        css={{
+          display: 'flex',
+          '--inner-color': 'white',
+          '--ring-color': 'var(--colors-thHeaderIconRing)',
+          '&:hover': {
+            '--ring-fill': '#007AFF',
+            '--ring-color': '#007AFF',
+          },
+        }}
       >
-        <rect
-          x="0.5"
-          y="0.5"
-          width="39"
-          height="39"
-          rx="19.5"
-          stroke="#3D3D3D"
-        />
-        <g>
-          <path
-            d="M13.3334 14.9987C13.3334 14.5567 13.509 14.1327 13.8215 13.8202C14.1341 13.5076 14.558 13.332 15 13.332H25C25.4421 13.332 25.866 13.5076 26.1786 13.8202C26.4911 14.1327 26.6667 14.5567 26.6667 14.9987V16.6654C26.6667 17.1074 26.4911 17.5313 26.1786 17.8439C25.866 18.1564 25.4421 18.332 25 18.332H15C14.558 18.332 14.1341 18.1564 13.8215 17.8439C13.509 17.5313 13.3334 17.1074 13.3334 16.6654V14.9987Z"
-            stroke="#D9D9D9"
-            strokeWidth="1.25"
-            strokeLinecap="round"
-            strokeLinejoin="round"
+        <svg
+          width="40"
+          height="40"
+          viewBox="0 0 40 40"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            x="0.5"
+            y="0.5"
+            width="39"
+            height="39"
+            rx="19.5"
+            style={{
+              fill: 'var(--ring-fill)',
+              stroke: 'var(--ring-color)',
+            }}
           />
-          <path
-            d="M13.3334 23.3346C13.3334 22.8926 13.509 22.4687 13.8215 22.1561C14.1341 21.8436 14.558 21.668 15 21.668H25C25.4421 21.668 25.866 21.8436 26.1786 22.1561C26.4911 22.4687 26.6667 22.8926 26.6667 23.3346V25.0013C26.6667 25.4433 26.4911 25.8673 26.1786 26.1798C25.866 26.4924 25.4421 26.668 25 26.668H15C14.558 26.668 14.1341 26.4924 13.8215 26.1798C13.509 25.8673 13.3334 25.4433 13.3334 25.0013V23.3346Z"
-            stroke="#D9D9D9"
-            strokeWidth="1.25"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </g>
-      </svg>
+          <g>
+            <path
+              d="M13.3334 14.9987C13.3334 14.5567 13.509 14.1327 13.8215 13.8202C14.1341 13.5076 14.558 13.332 15 13.332H25C25.4421 13.332 25.866 13.5076 26.1786 13.8202C26.4911 14.1327 26.6667 14.5567 26.6667 14.9987V16.6654C26.6667 17.1074 26.4911 17.5313 26.1786 17.8439C25.866 18.1564 25.4421 18.332 25 18.332H15C14.558 18.332 14.1341 18.1564 13.8215 17.8439C13.509 17.5313 13.3334 17.1074 13.3334 16.6654V14.9987Z"
+              style={{
+                stroke: 'var(--inner-color)',
+              }}
+              strokeWidth="1.25"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M13.3334 23.3346C13.3334 22.8926 13.509 22.4687 13.8215 22.1561C14.1341 21.8436 14.558 21.668 15 21.668H25C25.4421 21.668 25.866 21.8436 26.1786 22.1561C26.4911 22.4687 26.6667 22.8926 26.6667 23.3346V25.0013C26.6667 25.4433 26.4911 25.8673 26.1786 26.1798C25.866 26.4924 25.4421 26.668 25 26.668H15C14.558 26.668 14.1341 26.4924 13.8215 26.1798C13.509 25.8673 13.3334 25.4433 13.3334 25.0013V23.3346Z"
+              style={{
+                stroke: 'var(--inner-color)',
+              }}
+              strokeWidth="1.25"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </g>
+        </svg>
+      </SpanBox>
     )
   }
 }
diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
index 12043cb47..b9a5a8be8 100644
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -634,7 +634,13 @@ const Footer = (): JSX.Element => {
       }}
     >
       <PrimaryDropdown showThemeSection={true} />
-      <SpanBox css={{ marginLeft: 'auto', marginRight: '5px' }}>
+      <SpanBox
+        css={{
+          marginLeft: 'auto',
+          marginRight: '5px',
+          '&:hover': { opacity: 1.0, color: 'white' },
+        }}
+      >
         <SplitButton title="Add Link" />
       </SpanBox>
     </HStack>
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index 8b49cf953..de58f6276 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -48,11 +48,7 @@ type LibraryHeaderProps = {
   layout: LayoutType
   updateLayout: (layout: LayoutType) => void
 
-  searchTerm: string | undefined
-  applySearchQuery: (searchQuery: string) => void
-
-  alwaysShowHeader: boolean
-  allowSelectMultiple: boolean
+  showSearchModal: () => void
 
   showFilterMenu: boolean
   setShowFilterMenu: (show: boolean) => void
@@ -62,12 +58,6 @@ type LibraryHeaderProps = {
   setMultiSelectMode: (mode: MultiSelectMode) => void
 
   performMultiSelectAction: (action: BulkAction, labelIds?: string[]) => void
-
-  handleLinkSubmission: (
-    link: string,
-    timezone: string,
-    locale: string
-  ) => Promise<void>
 }
 
 const controlWidths = (
@@ -165,7 +155,9 @@ function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
             <MenuHeaderButton {...props} />
           </SpanBox>
           <Button
+            title="Select multiple"
             style="plainIcon"
+            css={{ display: 'flex', '&:hover': { opacity: '1.0' } }}
             onClick={(e) => {
               props.setMultiSelectMode('visible')
               e.preventDefault()
@@ -173,10 +165,30 @@ function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
           >
             <HeaderCheckboxIcon />
           </Button>
-          <HeaderSearchIcon />
+
           <Button
+            title="search"
             style="plainIcon"
-            css={{ display: 'flex', marginLeft: 'auto' }}
+            css={{ display: 'flex', '&:hover': { opacity: '1.0' } }}
+            onClick={(e) => {
+              props.showSearchModal()
+              e.preventDefault()
+            }}
+          >
+            <HeaderSearchIcon />
+          </Button>
+          <Button
+            title={
+              props.layout == 'GRID_LAYOUT'
+                ? 'Switch to list layout'
+                : 'Switch to grid layout'
+            }
+            style="plainIcon"
+            css={{
+              display: 'flex',
+              marginLeft: 'auto',
+              '&:hover': { opacity: '1.0' },
+            }}
             onClick={(e) => {
               props.updateLayout(
                 props.layout == 'GRID_LAYOUT' ? 'LIST_LAYOUT' : 'GRID_LAYOUT'
@@ -433,9 +445,6 @@ type ControlButtonBoxProps = {
 
   performMultiSelectAction: (action: BulkAction, labelIds?: string[]) => void
 
-  searchTerm: string | undefined
-  applySearchQuery: (searchQuery: string) => void
-
   handleLinkSubmission: (
     link: string,
     timezone: string,
@@ -530,7 +539,6 @@ function SearchControlButtonBox(
 ): JSX.Element {
   return (
     <>
-      <SearchBox {...props} />
       <Button
         style="plainIcon"
         css={{ display: 'flex', marginLeft: 'auto' }}
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 911e73a6c..9dd4e5b46 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -167,7 +167,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         // once all switch over, we will rename
         thBackground: '#FFFFFF',
         thBackground2: '#F3F3F3',
-        thBackground3: '#FFFFFF',
+        thBackground3: '#FCFCFC',
         thBackground4: '#EBEBEB',
         thBackground5: '#F5F5F5',
         thBackgroundActive: '#FFEA9F',
@@ -180,6 +180,8 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         thLibraryMenuUnselected: '#898989',
         thLibrarySelectionColor: '#FFEA9F',
         thLibraryNavigationMenuFooter: '#EFEADE',
+        thHeaderIconRing: '#D9D9D9',
+        thHeaderIconInner: '#898989',
 
         thNotebookSubtle: '#6A6968',
         thNotebookBorder: '#D9D9D9',
@@ -293,6 +295,8 @@ const darkThemeSpec = {
     thLibraryMenuUnselected: '#898989',
     thLibrarySelectionColor: '#3D3D3D',
     thLibraryNavigationMenuFooter: '#3D3D3D',
+    thHeaderIconRing: '#3D3D3D',
+    thHeaderIconInner: '#D9D9D9',
 
     thNotebookSubtle: '#898989',
     thNotebookBorder: '#3D3D3D',