diff --git a/packages/web/components/elements/icons/ArchiveSectionIcon.tsx b/packages/web/components/elements/icons/ArchiveSectionIcon.tsx
new file mode 100644
index 000000000..b37c0447b
--- /dev/null
+++ b/packages/web/components/elements/icons/ArchiveSectionIcon.tsx
@@ -0,0 +1,32 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export class ArchiveSectionIcon extends React.Component<IconProps> {
+  render() {
+    const color = (this.props.color || '#2A2A2A').toString()
+
+    return (
+      <svg
+        width="23"
+        height="23"
+        viewBox="0 0 23 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g>
+          <path
+            d="M19.1667 3.18359H3.83341C2.77487 3.18359 1.91675 4.04171 1.91675 5.10026C1.91675 6.15881 2.77487 7.01693 3.83341 7.01693H19.1667C20.2253 7.01693 21.0834 6.15881 21.0834 5.10026C21.0834 4.04171 20.2253 3.18359 19.1667 3.18359Z"
+            fill={color}
+          />
+          <path
+            d="M18.2083 8.93359C18.6999 8.93359 19.1053 9.3773 19.1599 9.94943L19.1666 10.0836V16.9836C19.1666 18.8207 17.9696 20.3224 16.4603 20.4278L16.2916 20.4336H6.70825C5.17684 20.4336 3.92525 18.9971 3.83804 17.1868L3.83325 16.9836V10.0836C3.83325 9.44822 4.26259 8.93359 4.79159 8.93359H18.2083ZM13.4166 10.8503H9.58325L9.47113 10.857C9.2382 10.8847 9.02353 10.9968 8.86777 11.1722C8.71201 11.3476 8.62599 11.574 8.62599 11.8086C8.62599 12.0432 8.71201 12.2696 8.86777 12.445C9.02353 12.6203 9.2382 12.7325 9.47113 12.7602L9.58325 12.7669H13.4166L13.5287 12.7602C13.7616 12.7325 13.9763 12.6203 14.1321 12.445C14.2878 12.2696 14.3739 12.0432 14.3739 11.8086C14.3739 11.574 14.2878 11.3476 14.1321 11.1722C13.9763 10.9968 13.7616 10.8847 13.5287 10.857L13.4166 10.8503Z"
+            fill={color}
+          />
+        </g>
+      </svg>
+    )
+  }
+}
diff --git a/packages/web/components/elements/icons/HomeIcon.tsx b/packages/web/components/elements/icons/HomeIcon.tsx
index 0f9e7ce0d..2bba94f9f 100644
--- a/packages/web/components/elements/icons/HomeIcon.tsx
+++ b/packages/web/components/elements/icons/HomeIcon.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'
@@ -19,7 +20,7 @@ export class HomeIcon extends React.Component<IconProps> {
       >
         <g>
           <path
-            d="M19.9329 12.3418L12.7458 6.07813C12.3924 5.77033 11.8662 5.77093 11.514 6.07933L4.35753 12.3433C3.70713 12.9127 4.11003 13.984 4.97433 13.984C5.49123 13.984 5.91033 14.4031 5.91033 14.9203V20.3893C5.91033 20.9065 6.32973 21.3253 6.84663 21.3253H10.1271V16.5322C10.1271 16.2397 10.3638 16.003 10.656 16.003H13.6359C13.9281 16.003 14.1651 16.2397 14.1651 16.5322V21.3256H17.2806C17.7978 21.3256 18.2169 20.9068 18.2169 20.3896V14.9206C18.2169 14.4034 18.636 13.9843 19.1529 13.9843H19.3179C20.1831 13.9837 20.5854 12.9103 19.9329 12.3418Z"
+            d="M19.9329 11.8028L12.7458 5.53907C12.3924 5.23127 11.8662 5.23187 11.514 5.54027L4.35753 11.8043C3.70713 12.3737 4.11003 13.445 4.97433 13.445C5.49123 13.445 5.91033 13.8641 5.91033 14.3813V19.8503C5.91033 20.3675 6.32973 20.7863 6.84663 20.7863H10.1271V15.9932C10.1271 15.7007 10.3638 15.464 10.656 15.464H13.6359C13.9281 15.464 14.1651 15.7007 14.1651 15.9932V20.7866H17.2806C17.7978 20.7866 18.2169 20.3678 18.2169 19.8506V14.3816C18.2169 13.8644 18.636 13.4453 19.1529 13.4453H19.3179C20.1831 13.4447 20.5854 12.3713 19.9329 11.8028Z"
             fill={color}
           />
         </g>
diff --git a/packages/web/components/elements/icons/NavMoreButtonDown.tsx b/packages/web/components/elements/icons/NavMoreButtonDown.tsx
new file mode 100644
index 000000000..4d76c4c0a
--- /dev/null
+++ b/packages/web/components/elements/icons/NavMoreButtonDown.tsx
@@ -0,0 +1,31 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export class NavMoreButtonDownIcon extends React.Component<IconProps> {
+  render() {
+    const color = (this.props.color || '#2A2A2A').toString()
+
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g>
+          <path
+            d="M6.25 9.43359L12 15.1836L17.75 9.43359"
+            stroke={color}
+            strokeWidth="1.75"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+      </svg>
+    )
+  }
+}
diff --git a/packages/web/components/elements/icons/NavMoreButtonUp.tsx b/packages/web/components/elements/icons/NavMoreButtonUp.tsx
new file mode 100644
index 000000000..4270cad1e
--- /dev/null
+++ b/packages/web/components/elements/icons/NavMoreButtonUp.tsx
@@ -0,0 +1,29 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export class NavMoreButtonUpIcon extends React.Component<IconProps> {
+  render() {
+    const color = (this.props.color || '#2A2A2A').toString()
+
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M17.75 15.1836L12 9.43359L6.25 15.1836"
+          stroke={color}
+          strokeWidth="1.75"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    )
+  }
+}
diff --git a/packages/web/components/elements/icons/ShortcutFolderClosed.tsx b/packages/web/components/elements/icons/ShortcutFolderClosed.tsx
new file mode 100644
index 000000000..558cd8acf
--- /dev/null
+++ b/packages/web/components/elements/icons/ShortcutFolderClosed.tsx
@@ -0,0 +1,29 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export class ShortcutFolderClosed extends React.Component<IconProps> {
+  render() {
+    const size = (this.props.size || 26).toString()
+    const color = (this.props.color || '#2A2A2A').toString()
+
+    return (
+      <svg
+        width="26"
+        height="26"
+        viewBox="0 0 26 26"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g>
+          <path
+            d="M9.48478 3.43359C9.71374 3.43357 9.93632 3.50899 10.1181 3.64818L10.2223 3.7388L13.041 6.55859H19.9014C20.6985 6.55855 21.4655 6.8631 22.0455 7.40993C22.6254 7.95676 22.9745 8.70454 23.0212 9.50026L23.0265 9.68359V18.0169C23.0265 18.814 22.7219 19.581 22.1751 20.1609C21.6283 20.7409 20.8805 21.09 20.0848 21.1367L19.9014 21.1419H5.31812C4.52102 21.142 3.75404 20.8374 3.17409 20.2906C2.59415 19.7438 2.24509 18.996 2.19832 18.2003L2.19312 18.0169V6.55859C2.19307 5.7615 2.49762 4.99452 3.04445 4.41457C3.59128 3.83463 4.33906 3.48557 5.13478 3.4388L5.31812 3.43359H9.48478Z"
+            fill={color}
+          />
+        </g>
+      </svg>
+    )
+  }
+}
diff --git a/packages/web/components/templates/PrimaryDropdown.tsx b/packages/web/components/templates/PrimaryDropdown.tsx
index e2510ea7c..2785f8a57 100644
--- a/packages/web/components/templates/PrimaryDropdown.tsx
+++ b/packages/web/components/templates/PrimaryDropdown.tsx
@@ -20,8 +20,6 @@ import { ThemeSelector } from './article/ReaderSettingsControl'
 
 type PrimaryDropdownProps = {
   children?: ReactNode
-  showThemeSection: boolean
-  showFullThemeSection: boolean
 
   layout?: LayoutType
   updateLayout?: (layout: LayoutType) => void
@@ -194,8 +192,7 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
         </VStack>
       </HStack>
       <DropdownSeparator />
-      {props.showThemeSection && <LegacyMenuThemeSection {...props} />}
-      {props.showFullThemeSection && <ThemeSection {...props} />}
+      <ThemeSection {...props} />
       <DropdownOption
         onSelect={() => headerDropdownActionHandler('navigate-to-install')}
         title="Install"
diff --git a/packages/web/components/templates/navMenu/Footer.tsx b/packages/web/components/templates/navMenu/Footer.tsx
index 273514a6c..4a1c4f754 100644
--- a/packages/web/components/templates/navMenu/Footer.tsx
+++ b/packages/web/components/templates/navMenu/Footer.tsx
@@ -29,10 +29,7 @@ export const NavMenuFooter = (props: NavMenuFooterProps): JSX.Element => {
         },
       }}
     >
-      <PrimaryDropdown
-        showThemeSection={!props.showFullThemeSection ?? true}
-        showFullThemeSection={props.showFullThemeSection ?? false}
-      />
+      <PrimaryDropdown />
       <SpanBox
         css={{
           marginLeft: 'auto',
diff --git a/packages/web/components/templates/navMenu/NavigationMenu.tsx b/packages/web/components/templates/navMenu/NavigationMenu.tsx
index 64d921a39..e686bf956 100644
--- a/packages/web/components/templates/navMenu/NavigationMenu.tsx
+++ b/packages/web/components/templates/navMenu/NavigationMenu.tsx
@@ -20,6 +20,7 @@ import {
   ArrowDown,
   CaretDown,
   CaretUp,
+  Archive,
 } from '@phosphor-icons/react'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
 import { theme } from '../../tokens/stitches.config'
@@ -49,6 +50,11 @@ import { ToggleCaretLeftIcon } from '../../elements/icons/ToggleCaretLeftIcon'
 import { ToggleCaretDownIcon } from '../../elements/icons/ToggleCaretDownIcon'
 import { TrashIcon } from '../../elements/icons/TrashIcon'
 import { ArchiveActionIcon } from '../../elements/icons/home/ArchiveActionIcon'
+import { ArchiveIcon } from '../../elements/icons/ArchiveIcon'
+import { ArchiveSectionIcon } from '../../elements/icons/ArchiveSectionIcon'
+import { NavMoreButtonDownIcon } from '../../elements/icons/NavMoreButtonDown'
+import { NavMoreButtonUpIcon } from '../../elements/icons/NavMoreButtonUp'
+import { ShortcutFolderClosed } from '../../elements/icons/ShortcutFolderClosed'
 
 export const LIBRARY_LEFT_MENU_WIDTH = '275px'
 
@@ -227,9 +233,22 @@ const LibraryNav = (props: LibraryFilterMenuProps): JSX.Element => {
         style="articleActionIcon"
         css={{
           display: 'flex',
-          ml: '15px',
           width: '100%',
+
+          gap: '10px',
+          maxWidth: '100%',
+          height: '34px',
+          px: '15px',
+
+          fontSize: '15px',
+          fontWeight: 'regular',
+          fontFamily: '$display',
+
+          color: '$thLibraryMenuUnselected',
+
           '&:hover': {
+            opacity: '1',
+            color: '$thLibraryMenuUnselected',
             backgroundColor: '$thBackground4',
           },
         }}
@@ -238,11 +257,19 @@ const LibraryNav = (props: LibraryFilterMenuProps): JSX.Element => {
           event.preventDefault()
         }}
       >
-        <HStack css={{ gap: '20px' }}>
+        <HStack
+          css={{ gap: '10px', width: '100%' }}
+          alignment="center"
+          distribution="start"
+        >
           {moreFoldersOpenState ? (
-            <CaretUp size={12} />
+            <NavMoreButtonUpIcon
+              color={theme.colors.thLibraryMenuPrimary.toString()}
+            />
           ) : (
-            <CaretDown size={12} />
+            <NavMoreButtonDownIcon
+              color={theme.colors.thLibraryMenuPrimary.toString()}
+            />
           )}
           <SpanBox>More</SpanBox>
         </HStack>
@@ -254,14 +281,20 @@ const LibraryNav = (props: LibraryFilterMenuProps): JSX.Element => {
             text="Archive"
             section="archive"
             isSelected={props.section == 'archive'}
-            icon={<ArchiveActionIcon color="#F59932" />}
+            icon={
+              <ArchiveSectionIcon
+                color={theme.colors.thLibraryMenuPrimary.toString()}
+              />
+            }
           />
           <NavButton
             {...props}
             text="Trash"
             section="trash"
             isSelected={props.section == 'trash'}
-            icon={<TrashIcon color={theme.colors.highlight.toString()} />}
+            icon={
+              <TrashIcon color={theme.colors.thLibraryMenuPrimary.toString()} />
+            }
           />
         </SpanBox>
       )}
@@ -748,8 +781,7 @@ const NodeItemContents = (props: NodeItemContentsProps): JSX.Element => {
         }}
       >
         {props.node.isClosed ? (
-          <Folder
-            size={20}
+          <ShortcutFolderClosed
             color={theme.colors.thLibraryMenuPrimary.toString()}
           />
         ) : (
diff --git a/packages/web/components/templates/reader/ReaderHeader.tsx b/packages/web/components/templates/reader/ReaderHeader.tsx
index 75c776241..99a00d533 100644
--- a/packages/web/components/templates/reader/ReaderHeader.tsx
+++ b/packages/web/components/templates/reader/ReaderHeader.tsx
@@ -144,12 +144,6 @@ function ControlButtonBox(props: ReaderHeaderProps): JSX.Element {
             color={theme.colors.thHighContrast.toString()}
           />
         </Button>
-        <PrimaryDropdown showThemeSection={false} showFullThemeSection={false}>
-          <CircleUtilityMenuIcon
-            size={25}
-            color={theme.colors.thHighContrast.toString()}
-          />
-        </PrimaryDropdown>
       </HStack>
     </>
   )