diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
index fd8895a4b..f836895c4 100644
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -243,7 +243,7 @@ function MenuPanel(props: MenuPanelProps): JSX.Element {
             fontWeight: '600',
             fontSize: '16px',
             lineHeight: '125%',
-            color: '$thTextContrast',
+            color: '$thLibraryMenuPrimary',
             pl: '10px',
             my: '20px',
           }}
@@ -331,11 +331,14 @@ function FilterButton(props: FilterButtonProps): JSX.Element {
         width: '100%',
         maxWidth: '100%',
         height: '32px',
-        backgroundColor: selected ? '#FFEA9F' : 'unset',
+
+        backgroundColor: selected ? '$thLibrarySelectionColor' : 'unset',
         fontSize: '14px',
         fontWeight: 'regular',
         fontFamily: '$display',
-        color: selected ? '#3D3D3D' : '$thTextSubtle',
+        color: selected
+          ? '$thLibraryMenuSecondary'
+          : '$thLibraryMenuUnselected',
         verticalAlign: 'middle',
         borderRadius: '3px',
         cursor: 'pointer',
@@ -344,10 +347,14 @@ function FilterButton(props: FilterButtonProps): JSX.Element {
         whiteSpace: 'nowrap',
         alignItems: 'center',
         '&:hover': {
-          backgroundColor: selected ? '#FFEA9F' : '$thBackground4',
+          backgroundColor: selected
+            ? '$thLibrarySelectionColor'
+            : '$thBackground4',
         },
         '&:active': {
-          backgroundColor: selected ? '#FFEA9F' : '$thBackground4',
+          backgroundColor: selected
+            ? '$thLibrarySelectionColor'
+            : '$thBackground4',
         },
       }}
       onClick={(e) => {
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index 28a3e98a4..24fe0999b 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -258,7 +258,7 @@ export function SearchBox(props: SearchBoxProps): JSX.Element {
         height: '38px',
         width: '100%',
         maxWidth: '521px',
-        bg: props.compact ? 'white' : '$thBackground2',
+        bg: '$thLibrarySearchbox',
         borderRadius: '6px',
         border: border,
       }}
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index e544e190b..d37381370 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -174,6 +174,11 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         thBackgroundContrast: '#FFFFFF',
         thLeftMenuBackground: '#FCFCFC',
         thLibraryBackground: '#F3F3F3',
+        thLibrarySearchbox: '#FCFCFC',
+        thLibraryMenuPrimary: '#3D3D3D',
+        thLibraryMenuSecondary: '#3D3D3D',
+        thLibraryMenuUnselected: '#898989',
+        thLibrarySelectionColor: '#FFEA9F',
 
         thTextContrast: '#1E1E1E',
         thTextContrast2: '#3D3D3D',
@@ -263,6 +268,11 @@ const darkThemeSpec = {
     thBackgroundContrast: '#000000',
     thLeftMenuBackground: '#1D1D1D',
     thLibraryBackground: '#333333',
+    thLibrarySearchbox: '#3D3D3D',
+    thLibraryMenuPrimary: '#EBEBEB',
+    thLibraryMenuSecondary: '#EBEBEB',
+    thLibraryMenuUnselected: '#898989',
+    thLibrarySelectionColor: '#3D3D3D',
 
     thTextContrast: '#FFFFFF',
     thTextContrast2: '#EBEBEB',