diff --git a/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx b/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx
index 158744ab4..d98c6639f 100644
--- a/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx
+++ b/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx
@@ -6,6 +6,7 @@ import React from 'react'
 import { MultiSelectMode } from '../../templates/homeFeed/LibraryHeader'
 
 type HeaderCheckboxIconProps = {
+  color: string
   multiSelectMode: MultiSelectMode
 }
 
@@ -15,18 +16,20 @@ export const HeaderCheckboxIcon = (
   switch (props.multiSelectMode) {
     case 'search':
     case 'visible':
-      return <HeaderCheckboxCheckedIcon size={17} />
+      return <HeaderCheckboxCheckedIcon size={17} color={props.color} />
     case 'none':
     case 'off':
-      return <HeaderCheckboxUncheckedIcon size={17} />
+      return <HeaderCheckboxUncheckedIcon size={17} color={props.color} />
     case 'some':
-      return <HeaderCheckboxHalfCheckedIcon size={17} />
+      return <HeaderCheckboxHalfCheckedIcon size={17} color={props.color} />
   }
 }
 
 export class HeaderCheckboxUncheckedIcon extends React.Component<IconProps> {
   render() {
     const size = (this.props.size || 26).toString()
+    const color = this.props.color || 'white'
+
     return (
       <svg
         width={size}
@@ -38,10 +41,12 @@ export class HeaderCheckboxUncheckedIcon extends React.Component<IconProps> {
         <g>
           <path
             d="M3.479 4.16667C3.479 3.72464 3.6546 3.30072 3.96716 2.98816C4.27972 2.67559 4.70364 2.5 5.14567 2.5H16.8123C17.2544 2.5 17.6783 2.67559 17.9908 2.98816C18.3034 3.30072 18.479 3.72464 18.479 4.16667V15.8333C18.479 16.2754 18.3034 16.6993 17.9908 17.0118C17.6783 17.3244 17.2544 17.5 16.8123 17.5H5.14567C4.70364 17.5 4.27972 17.3244 3.96716 17.0118C3.6546 16.6993 3.479 16.2754 3.479 15.8333V4.16667Z"
-            stroke="white"
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
+            style={{
+              stroke: 'var(--checkbox-color)',
+            }}
           />
         </g>
       </svg>
@@ -52,6 +57,7 @@ export class HeaderCheckboxUncheckedIcon extends React.Component<IconProps> {
 export class HeaderCheckboxCheckedIcon extends React.Component<IconProps> {
   render() {
     const size = (this.props.size || 26).toString()
+    const color = this.props.color || 'white'
 
     return (
       <svg
@@ -64,15 +70,19 @@ export class HeaderCheckboxCheckedIcon extends React.Component<IconProps> {
         <g>
           <path
             d="M3.479 4.16667C3.479 3.72464 3.6546 3.30072 3.96716 2.98816C4.27972 2.67559 4.70364 2.5 5.14567 2.5H16.8123C17.2544 2.5 17.6783 2.67559 17.9908 2.98816C18.3034 3.30072 18.479 3.72464 18.479 4.16667V15.8333C18.479 16.2754 18.3034 16.6993 17.9908 17.0118C17.6783 17.3244 17.2544 17.5 16.8123 17.5H5.14567C4.70364 17.5 4.27972 17.3244 3.96716 17.0118C3.6546 16.6993 3.479 16.2754 3.479 15.8333V4.16667Z"
-            stroke="white"
+            style={{
+              stroke: 'white',
+            }}
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
-          <g>
+          <g clip-path="url(#clip2_8938_4128)">
             <path
               d="M7.73877 10.0004L10.0536 12.3152L14.6832 7.68555"
-              stroke="white"
+              style={{
+                stroke: 'white',
+              }}
               strokeWidth="1.5"
               strokeLinecap="round"
               strokeLinejoin="round"
@@ -87,6 +97,7 @@ export class HeaderCheckboxCheckedIcon extends React.Component<IconProps> {
 export class HeaderCheckboxHalfCheckedIcon extends React.Component<IconProps> {
   render() {
     const size = (this.props.size || 26).toString()
+    const color = this.props.color || 'white'
 
     return (
       <svg
@@ -96,17 +107,21 @@ export class HeaderCheckboxHalfCheckedIcon extends React.Component<IconProps> {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <g>
+        <g clip-path="url(#clip0_8962_5484)">
           <path
             d="M3.479 4.16667C3.479 3.72464 3.6546 3.30072 3.96716 2.98816C4.27972 2.67559 4.70364 2.5 5.14567 2.5H16.8123C17.2544 2.5 17.6783 2.67559 17.9908 2.98816C18.3034 3.30072 18.479 3.72464 18.479 4.16667V15.8333C18.479 16.2754 18.3034 16.6993 17.9908 17.0118C17.6783 17.3244 17.2544 17.5 16.8123 17.5H5.14567C4.70364 17.5 4.27972 17.3244 3.96716 17.0118C3.6546 16.6993 3.479 16.2754 3.479 15.8333V4.16667Z"
-            stroke="white"
+            style={{
+              stroke: 'var(--checkbox-color)',
+            }}
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
             d="M6.979 10L14.979 10"
-            stroke="white"
+            style={{
+              stroke: 'var(--checkbox-color)',
+            }}
             strokeWidth="1.5"
             strokeLinecap="round"
             strokeLinejoin="round"
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index d05bd5ce8..ad6fb102a 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -140,6 +140,7 @@ function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
 }
 
 const CheckBoxButton = (props: LibraryHeaderProps): JSX.Element => {
+  const color = theme.colors.thLibraryMenuUnselected.toString()
   return (
     <Button
       title="Select multiple"
@@ -159,7 +160,10 @@ const CheckBoxButton = (props: LibraryHeaderProps): JSX.Element => {
         e.preventDefault()
       }}
     >
-      <HeaderCheckboxIcon multiSelectMode={props.multiSelectMode} />
+      <HeaderCheckboxIcon
+        multiSelectMode={props.multiSelectMode}
+        color={color}
+      />
     </Button>
   )
 }
@@ -322,8 +326,11 @@ export function SearchBox(props: LibraryHeaderProps): JSX.Element {
             bg: props.multiSelectMode !== 'off' ? '$ctaBlue' : 'transparent',
             borderTopLeftRadius: '6px',
             borderBottomLeftRadius: '6px',
+            '--checkbox-color': 'var(--colors-thLibraryMultiselectCheckbox)',
             '&:hover': {
-              bg: '#6A6968',
+              bg: '$thLibraryMultiselectHover',
+              '--checkbox-color':
+                'var(--colors-thLibraryMultiselectCheckboxHover)',
             },
           }}
         >
@@ -435,14 +442,17 @@ function MultiSelectControls(props: LibraryHeaderProps): JSX.Element {
           alignment="center"
           distribution="center"
           css={{
-            width: '54px',
+            width: '53px',
             height: '100%',
             display: 'flex',
             bg: props.multiSelectMode !== 'off' ? '$ctaBlue' : 'transparent',
             borderTopLeftRadius: '6px',
             borderBottomLeftRadius: '6px',
+            '--checkbox-color': 'var(--colors-thLibraryMultiselectCheckbox)',
             '&:hover': {
-              bg: '#6A6968',
+              bg: '$thLibraryMultiselectHover',
+              '--checkbox-color':
+                'var(--colors-thLibraryMultiselectCheckboxHover)',
             },
           }}
         >
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index bfa60aaa7..dbe31d23a 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -185,10 +185,14 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         thLibrarySelectionColor: '#FFEA9F',
         thLibraryNavigationMenuFooter: '#EFEADE',
         thLibraryMenuFooterHover: '#FFFFFF',
+        thLibraryMultiselectHover: '#D9D9D9',
+        thLibraryMultiselectCheckbox: '#3D3D3D',
+        thLibraryMultiselectCheckboxHover: '#3D3D3D',
+
         thFormInput: '#EBEBEB',
         thHomeIcon: '#2A2A2A',
 
-        thLabelChipForeground: '#2A2A2A', // : '#2A2A2A'
+        thLabelChipForeground: '#2A2A2A',
         thLabelChipBackground: '#F5F5F5',
         thLabelChipSelectedBorder: 'black',
         thLabelChipUnselectedBorder: '#F5F5F5',
@@ -319,6 +323,10 @@ const darkThemeSpec = {
     thLibrarySelectionColor: '#6A6968',
     thLibraryNavigationMenuFooter: '#3D3D3D',
     thLibraryMenuFooterHover: '#6A6968',
+    thLibraryMultiselectHover: '#6A6968',
+    thLibraryMultiselectCheckbox: 'white',
+    thLibraryMultiselectCheckboxHover: 'white',
+
     searchActiveOutline: '#866D15',
     thFormInput: '#3D3D3D',
     thHomeIcon: '#FFFFFF',