diff --git a/packages/web/components/elements/SuggestionBox.tsx b/packages/web/components/elements/SuggestionBox.tsx
index 5118708af..5ffaeb822 100644
--- a/packages/web/components/elements/SuggestionBox.tsx
+++ b/packages/web/components/elements/SuggestionBox.tsx
@@ -40,14 +40,16 @@ const InternalOrExternalLink = (props: InternalOrExternalLinkProps) => {
       }}
     >
       {!isExternal ? (
-        <Link href={props.link} legacyBehavior>{props.children}</Link>
+        <Link href={props.link} legacyBehavior>
+          {props.children}
+        </Link>
       ) : (
         <a href={props.link} target="_blank" rel="noreferrer">
           {props.children}
         </a>
       )}
     </SpanBox>
-  );
+  )
 }
 
 export const SuggestionBox = (props: SuggestionBoxProps) => {
@@ -59,7 +61,7 @@ export const SuggestionBox = (props: SuggestionBoxProps) => {
         flexDirection: props.size == 'large' ? 'column' : 'row',
         width: 'fit-content',
         borderRadius: '5px',
-        background: props.background ?? '$thBackground3',
+        background: props.background ?? 'unset',
         fontSize: '15px',
         fontFamily: '$inter',
         fontWeight: '500',
diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx
index a117e0ede..24e96ec9e 100644
--- a/packages/web/components/templates/article/HighlightsLayer.tsx
+++ b/packages/web/components/templates/article/HighlightsLayer.tsx
@@ -80,13 +80,15 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
   const focusedHighlightMousePos = useRef({ pageX: 0, pageY: 0 })
 
   const [currentHighlightIdx, setCurrentHighlightIdx] = useState(0)
-  const [focusedHighlight, setFocusedHighlight] =
-    useState<Highlight | undefined>(undefined)
+  const [focusedHighlight, setFocusedHighlight] = useState<
+    Highlight | undefined
+  >(undefined)
 
   const [selectionData, setSelectionData] = useSelection(highlightLocations)
 
-  const [labelsTarget, setLabelsTarget] =
-    useState<Highlight | undefined>(undefined)
+  const [labelsTarget, setLabelsTarget] = useState<Highlight | undefined>(
+    undefined
+  )
 
   const [
     confirmDeleteHighlightWithNoteId,
@@ -363,13 +365,15 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
           // highlight, so the app can display a native menu
           const rect = (target as Element).getBoundingClientRect()
 
-          window?.webkit?.messageHandlers.viewerAction?.postMessage({
-            actionID: 'showMenu',
-            rectX: rect.x,
-            rectY: rect.y,
-            rectWidth: rect.width,
-            rectHeight: rect.height,
-          })
+          if (window?.webkit?.messageHandlers) {
+            window?.webkit?.messageHandlers.viewerAction?.postMessage({
+              actionID: 'showMenu',
+              rectX: rect.x,
+              rectY: rect.y,
+              rectWidth: rect.width,
+              rectHeight: rect.height,
+            })
+          }
 
           window?.AndroidWebKitMessenger?.handleIdentifiableMessage(
             'existingHighlightTap',
@@ -394,7 +398,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
         const highlight = highlights.find(($0) => $0.id === id)
         setFocusedHighlight(highlight)
         setLabelsTarget(highlight)
-      } else {
+      } else if (window?.webkit?.messageHandlers) {
         window?.webkit?.messageHandlers.viewerAction?.postMessage({
           actionID: 'pageTapped',
         })
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index b8636a80f..99412b1df 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -88,7 +88,6 @@ export function LegacyLibraryHeader(props: LibraryHeaderProps): JSX.Element {
           right: '0',
           zIndex: 5,
           px: '70px',
-          bg: '$thLibraryBackground',
           position: 'fixed',
           left: LIBRARY_LEFT_MENU_WIDTH,
           height: small ? '60px' : DEFAULT_HEADER_HEIGHT,
diff --git a/packages/web/components/templates/library/LibraryHeader.tsx b/packages/web/components/templates/library/LibraryHeader.tsx
index ecb4eef59..8995e7ebb 100644
--- a/packages/web/components/templates/library/LibraryHeader.tsx
+++ b/packages/web/components/templates/library/LibraryHeader.tsx
@@ -86,8 +86,6 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
         css={{
           width: '100%',
           px: '70px',
-          bg: '$thLibraryBackground',
-          //          position: 'sticky',
           left: LIBRARY_LEFT_MENU_WIDTH,
           height: small ? '60px' : DEFAULT_HEADER_HEIGHT,
           transition: 'height 0.5s',
diff --git a/packages/web/components/templates/navMenu/Footer.tsx b/packages/web/components/templates/navMenu/Footer.tsx
index fa1e5b611..273514a6c 100644
--- a/packages/web/components/templates/navMenu/Footer.tsx
+++ b/packages/web/components/templates/navMenu/Footer.tsx
@@ -17,7 +17,7 @@ export const NavMenuFooter = (props: NavMenuFooterProps): JSX.Element => {
         position: 'fixed',
         bottom: '0%',
         alignItems: 'center',
-        backgroundColor: '$thBackground2',
+        backgroundColor: '$thNavMenuFooter',
         width: LIBRARY_LEFT_MENU_WIDTH,
         overflowY: 'auto',
         overflowX: 'hidden',
diff --git a/packages/web/components/templates/navMenu/NavigationMenu.tsx b/packages/web/components/templates/navMenu/NavigationMenu.tsx
index 64d921a39..b9ae4d1b9 100644
--- a/packages/web/components/templates/navMenu/NavigationMenu.tsx
+++ b/packages/web/components/templates/navMenu/NavigationMenu.tsx
@@ -750,6 +750,7 @@ const NodeItemContents = (props: NodeItemContentsProps): JSX.Element => {
         {props.node.isClosed ? (
           <Folder
             size={20}
+            weight="fill"
             color={theme.colors.thLibraryMenuPrimary.toString()}
           />
         ) : (
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 97edb8660..f69f0fd27 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -181,6 +181,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         thBackgroundActive: '#FFEA9F',
         thBackgroundContrast: '#FFFFFF',
         thLeftMenuBackground: '#FCFCFC',
+        thNavMenuFooter: '#DFDFDF',
         thLibraryBackground: '#FFFFFF',
         thLibrarySearchbox: '#FCFCFC',
         thLibraryMenuPrimary: '#3D3D3D',
@@ -324,6 +325,7 @@ const darkThemeSpec = {
     thBackgroundActive: '#3D3D3D',
     thBackgroundContrast: '#000000',
     thLeftMenuBackground: '#343434',
+    thNavMenuFooter: '#515151',
     thLibraryBackground: '#2A2A2A',
     thLibrarySearchbox: '#3D3D3D',
     thLibraryMenuPrimary: '#EBEBEB',
@@ -397,11 +399,21 @@ const sepiaThemeSpec = {
     colorScheme: 'light',
   },
   colors: {
-    readerBg: '#FBF0D9',
+    readerBg: '#FDF6E3',
     readerFont: '#5F4B32',
     readerMargin: '#F3F3F3',
     readerFontHighContrast: '#0A0806',
     readerTableHeader: '#FFFFFF',
+
+    thLeftMenuBackground: '#EEE8D5',
+    thNavMenuFooter: '#DDD6C1',
+
+    thLibrarySelectionColor: '#DDD6C1',
+    thBorderColor: '#DDD6C1',
+
+    thBackground: '#FDF6E3',
+
+    thLibraryMultiselectHover: '#EEE8D5',
   },
 }
 
@@ -412,6 +424,16 @@ const apolloThemeSpec = {
     readerMargin: '#474747',
     readerFontHighContrast: 'white',
     readerTableHeader: '#FFFFFF',
+
+    thLeftMenuBackground: '#3D3D3D',
+    thNavMenuFooter: '#515151',
+
+    thLibrarySelectionColor: '#515151',
+    thBorderColor: '#6A6968',
+
+    thBackground: '#474747',
+    thBackground2: '#515151',
+    thLibraryMultiselectHover: '#EEE8D5',
   },
 }
 
diff --git a/packages/web/pages/highlights/index.tsx b/packages/web/pages/highlights/index.tsx
index 2a8adf898..8b6f86e5d 100644
--- a/packages/web/pages/highlights/index.tsx
+++ b/packages/web/pages/highlights/index.tsx
@@ -235,9 +235,6 @@ function HighlightCard(props: HighlightCardProps): JSX.Element {
         bg: '$thBackground2',
         borderRadius: '8px',
         cursor: 'pointer',
-        '&:hover': {
-          backgroundColor: '$thBackground3',
-        },
       }}
     >
       <Box