diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx
index ff3d21f9a..67092c383 100644
--- a/packages/web/components/elements/LabelChip.tsx
+++ b/packages/web/components/elements/LabelChip.tsx
@@ -42,7 +42,7 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
           display: 'inline-table',
           margin: '2px',
           borderRadius: '4px',
-          color: isDarkMode ? darkThemeTextColor : lightThemeTextColor,
+          color: lightThemeTextColor,
           fontSize: '13px',
           fontWeight: '500',
           padding: '3px 6px',
diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx
index 503be93dd..0a9c5f14e 100644
--- a/packages/web/components/elements/StyledText.tsx
+++ b/packages/web/components/elements/StyledText.tsx
@@ -184,7 +184,7 @@ const textVariants = {
       fontWeight: '500',
       fontSize: '12px',
       lineHeight: '20px',
-      color: '#6A6968',
+      color: '$thTextSubtle2',
     },
     error: {
       color: '$error',
diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 9b4ece533..931acae19 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -95,7 +95,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
         borderRadius: '5px',
         borderWidth: '1px',
         borderStyle: 'solid',
-        borderColor: '#E1E1E1',
+        borderColor: '$thBorderColor',
         cursor: 'pointer',
       }}
       alignment="start"
@@ -118,7 +118,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
           <HStack
             css={{
               width: '100%',
-              color: '#6A6968',
+              color: '$thTextSubtle2',
               fontSize: '13px',
               fontWeight: '400',
               fontFamily: 'SF Pro',
@@ -172,7 +172,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
           >
             <Box
               css={{
-                color: 'rgba(61, 61, 61, 1)',
+                color: '$thTextContrast2',
                 fontSize: '20px',
                 fontWeight: '700',
                 lineHeight: '1.25',
@@ -190,7 +190,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
             </Box>
             <Box
               css={{
-                color: '#3D3D3D',
+                color: '$thTextSubtle',
                 pt: '10px',
                 fontSize: '13px',
                 fontWeight: '400',
@@ -210,7 +210,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
             <HStack
               css={{
                 pt: '10px',
-                color: '#898989',
+                color: '$thTextSubtle3',
                 fontSize: '13px',
                 fontWeight: '400',
                 fontFamily: 'SF Pro',
@@ -246,7 +246,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
               <ProgressBar
                 fillPercentage={props.item.readingProgressPercent}
                 fillColor="#FFD234"
-                backgroundColor="#EEEEEE"
+                backgroundColor="$thBorderSubtle"
                 borderRadius="5px"
               />
             </SpanBox>
diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
index 7f0d3d526..fe2711bd0 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
@@ -101,7 +101,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
           <HStack
             css={{
               width: '100%',
-              color: '#6A6968',
+              color: '$thTextSubtle2',
               fontSize: '10px',
               fontWeight: '500',
               fontFamily: 'SF Pro',
@@ -162,7 +162,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
           >
             <Box
               css={{
-                color: 'rgba(61, 61, 61, 1)',
+                color: '$thTextContrast2',
                 fontSize: '16px',
                 fontWeight: '700',
                 lineHeight: '1.25',
@@ -180,7 +180,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
             </Box>
             <HStack
               css={{
-                color: '#898989',
+                color: '$thTextSubtle3',
                 fontSize: '11px',
                 fontWeight: '400',
                 fontFamily: 'SF Pro',
diff --git a/packages/web/components/templates/PrimaryLayout.tsx b/packages/web/components/templates/PrimaryLayout.tsx
index efca89e68..6ec9e7067 100644
--- a/packages/web/components/templates/PrimaryLayout.tsx
+++ b/packages/web/components/templates/PrimaryLayout.tsx
@@ -86,7 +86,7 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
           height: '100vh',
           bg: 'transparent',
           '@smDown': {
-            bg: '$grayBase',
+            bg: '$thBackground2',
           },
         }}
       >
@@ -94,7 +94,7 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
           css={{
             height: '100%',
             width: '100vw',
-            bg: '$grayBase',
+            bg: '$thBackground2',
           }}
         >
           {props.children}
diff --git a/packages/web/components/templates/article/ReaderSettingsControl.tsx b/packages/web/components/templates/article/ReaderSettingsControl.tsx
index b86c5078a..5a659a684 100644
--- a/packages/web/components/templates/article/ReaderSettingsControl.tsx
+++ b/packages/web/components/templates/article/ReaderSettingsControl.tsx
@@ -94,7 +94,7 @@ function FontControls(props: FontControlsProps): JSX.Element {
     alignItems: 'center',
     fontSize: '12px',
     background: '#FFFFFF',
-    border: '1px sold #E1E1E1',
+    border: '1px sold $thBorderColor',
     fontFamily: props.readerSettings.fontFamily,
     textTransform: 'capitalize',
     borderRadius: '4px',
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index d34a4186e..49f46d804 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -770,24 +770,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
           <Toaster />
 
           {props.isValidating && props.items.length == 0 && <TopBarProgress />}
-          {/* 
-          <SpanBox
-            css={{
-              width: '100%',
-              '@md': {
-                display: 'none',
-              },
-            }}
-          >
-            <LegacyMobileTopNav
-              viewer={viewerData?.me}
-              searchTerm={props.searchTerm}
-              applySearchQuery={props.applySearchQuery}
-              layout={layout}
-              updateLayout={updateLayout}
-              setShowAddLinkModal={props.setShowAddLinkModal}
-            />
-          </SpanBox> */}
 
           <Dropzone
             onDrop={handleDrop}
@@ -921,7 +903,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
                         css={{
                           width: '100%',
                           '&> div': {
-                            bg: '$grayBg',
+                            bg: '$thBackground3',
                           },
                           '&:focus': {
                             '> div': {
diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
index 2ace65f8f..d80e7e2c6 100644
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -7,6 +7,8 @@ import { CaretRight, Circle, DotsThree, Plus } from 'phosphor-react'
 import { useGetSubscriptionsQuery } from '../../../lib/networking/queries/useGetSubscriptionsQuery'
 import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
+import { theme } from '../../tokens/stitches.config'
+import { currentThemeName } from '../../../lib/themeUpdater'
 
 export const LIBRARY_LEFT_MENU_WIDTH = '300px'
 
@@ -28,10 +30,10 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
           left: '0px',
           top: '105px',
           position: 'fixed',
-          bg: 'white',
+          bg: '$thBackground',
           height: '100%',
           width: LIBRARY_LEFT_MENU_WIDTH,
-          borderRight: '1px solid #E1E1E1',
+          borderRight: '1px solid $thBorderColor',
           overflowY: 'auto',
           overflowX: 'hidden',
           '&::-webkit-scrollbar': {
@@ -75,7 +77,7 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
         css={{
           minWidth: LIBRARY_LEFT_MENU_WIDTH,
           height: '100%',
-          bg: '$grayBase',
+          bg: '$thBackground',
           '@mdDown': {
             display: 'none',
           },
@@ -163,7 +165,7 @@ function MenuPanel(props: MenuPanelProps): JSX.Element {
       css={{
         m: '0px',
         width: '100%',
-        borderBottom: '1px solid #E1E1E1',
+        borderBottom: '1px solid $thBorderColor',
         px: '15px',
       }}
       alignment="start"
@@ -176,7 +178,7 @@ function MenuPanel(props: MenuPanelProps): JSX.Element {
             fontWeight: '600',
             fontSize: '16px',
             lineHeight: '125%',
-            color: '#1E1E1E',
+            color: '$thTextContrast',
             pl: '10px',
             my: '20px',
           }}
@@ -207,7 +209,11 @@ function MenuPanel(props: MenuPanelProps): JSX.Element {
                     },
                   }}
                 >
-                  <DotsThree size={25} weight="bold" color="#BEBEBE" />
+                  <DotsThree
+                    size={25}
+                    weight="bold"
+                    color={theme.colors.thTextSubtle.toString()}
+                  />
                 </Box>
               }
             >
@@ -258,11 +264,11 @@ function FilterButton(props: FilterButtonProps): JSX.Element {
         width: '100%',
         maxWidth: '100%',
         height: '32px',
-        backgroundColor: selected ? '#FFEA9F' : 'unset',
+        backgroundColor: selected ? '$thBackground2' : 'unset',
         fontSize: '14px',
         fontWeight: 'regular',
         fontFamily: 'SF Pro Text',
-        color: '#3D3D3D',
+        color: '$thTextSubtle',
         verticalAlign: 'middle',
         borderRadius: '3px',
         cursor: 'pointer',
@@ -314,7 +320,7 @@ function LabelButton(props: LabelButtonProps): JSX.Element {
         height: '30px',
         fontSize: '16px',
         fontWeight: 'regular',
-        color: '#3D3D3D',
+        color: '$thTextSubtle',
         verticalAlign: 'middle',
         borderRadius: '3px',
         m: '0px',
@@ -358,6 +364,10 @@ type AddLinkButtonProps = {
 }
 
 function AddLinkButton(props: AddLinkButtonProps): JSX.Element {
+  const currentTheme = currentThemeName()
+  const isDark = currentTheme == 'Dark'
+  console.log('current theme: ', isDark)
+
   return (
     <>
       <VStack
@@ -376,10 +386,16 @@ function AddLinkButton(props: AddLinkButtonProps): JSX.Element {
             pr: '20px',
             fontSize: '14px',
             verticalAlign: 'center',
-            color: '#3D3D3D',
+            color: isDark
+              ? theme.colors.thHighContrast.toString()
+              : theme.colors.thTextContrast2.toString(),
             display: 'flex',
             alignItems: 'center',
             fontWeight: '600',
+            bg: isDark ? 'transparent' : theme.colors.thBackground2.toString(),
+            border: `1px solid ${
+              isDark ? theme.colors.thHighContrast.toString() : 'transparent'
+            }`,
           }}
           onClick={(e) => {
             props.showAddLinkModal()
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index 997cee47a..53c7bae89 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -43,9 +43,9 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
           position: 'fixed',
           width: '100%',
           height: HEADER_HEIGHT,
-          bg: 'white',
+          bg: '$thBackground',
           pt: '35px',
-          borderBottom: '1px solid #E1E1E1',
+          borderBottom: '1px solid $thBorderColor',
           '@mdDown': {
             height: MOBILE_HEIGHT,
             pt: '0px',
@@ -178,9 +178,11 @@ export function SearchBox(props: SearchBoxProps): JSX.Element {
         width: '100%',
         maxWidth: '521px',
         mr: '15px',
-        bg: '#F3F3F3',
+        bg: '$thBackground2',
         borderRadius: '6px',
-        border: focused ? '1px solid $omnivoreCtaYellow' : '1px solid #D9D9D9',
+        border: focused
+          ? '1px solid $omnivoreCtaYellow'
+          : '1px solid $thBorderColor',
       }}
     >
       <HStack
diff --git a/packages/web/components/templates/reader/ReaderHeader.tsx b/packages/web/components/templates/reader/ReaderHeader.tsx
index 77fdb2863..950b267e9 100644
--- a/packages/web/components/templates/reader/ReaderHeader.tsx
+++ b/packages/web/components/templates/reader/ReaderHeader.tsx
@@ -33,8 +33,8 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
           '@lgDown': {
             height: MOBILE_HEIGHT,
             pt: '0px',
-            bg: '$grayBg',
-            borderBottom: '1px solid #E1E1E1',
+            bg: '$thBackground',
+            borderBottom: '1px solid $thBorderColor',
           },
         }}
       >
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 0ea7d698f..5d00ca853 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -169,6 +169,24 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         //utility
         textNonEssential: 'rgba(10, 8, 6, 0.4)',
         overlay: 'rgba(63, 62, 60, 0.2)',
+
+        // New theme, special naming to keep things straigh
+        // once all switch over, we will rename
+        thBackground: '#FFFFFF',
+        thBackground2: '#F3F3F3',
+        thBackground3: '#FFFFFF',
+
+        thTextContrast: '#1E1E1E',
+        thTextContrast2: '#3D3D3D',
+
+        thTextSubtle: '#1E1E1E',
+        thTextSubtle2: '#6A6968',
+        thTextSubtle3: '#ADADAD',
+
+        thBorderColor: '#E1E1E1',
+        thBorderSubtle: '#EEEEEE',
+
+        thHighContrast: '#D9D9D9',
       },
     },
     media: {
@@ -232,6 +250,24 @@ const darkThemeSpec = {
     overlay: 'rgba(10, 8, 6, 0.65)',
 
     labelButtonsBg: '#5F5E58',
+
+    // New theme, special naming to keep things straigh
+    // once all switch over, we will rename
+    // DARK
+    thBackground: '#2A2A2A',
+    thBackground2: '#3D3D3D',
+    thBackground3: '#242424',
+    thTextContrast: '#FFFFFF',
+    thTextContrast2: '#EBEBEB',
+
+    thTextSubtle: '#D9D9D9',
+    thTextSubtle2: '#D9D9D9',
+    thTextSubtle3: '#ADADAD',
+
+    thBorderColor: '#4F4F4F',
+    thBorderSubtle: '#6A6968',
+
+    thHighContrast: '#D9D9D9',
   },
   shadows: {
     cardBoxShadow:
@@ -281,7 +317,7 @@ export const lighterTheme = createTheme(ThemeId.Lighter, {})
 // Apply global styles in here
 export const globalStyles = globalCss({
   body: {
-    backgroundColor: '$grayBase',
+    backgroundColor: '$thBackground2',
   },
   '*': {
     '&:focus': {