diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx
index 69eb8ac72..e0a999ce3 100644
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@@ -428,6 +428,16 @@ export const Button = styled('button', {
           opacity: 0.8,
         },
       },
+      homeAction: {
+        display: 'flex',
+        color: 'transparent',
+        border: 'none',
+        bg: 'transparent',
+        cursor: 'pointer',
+        p: '5px',
+        borderRadius: '5px',
+        '&:hover': { bg: '$readerHoverBg', opacity: '1' },
+      },
       themeSwitch: {
         p: '0px',
         m: '0px',
diff --git a/packages/web/components/elements/Pagination.tsx b/packages/web/components/elements/Pagination.tsx
index 595f130ec..2d36cdb59 100644
--- a/packages/web/components/elements/Pagination.tsx
+++ b/packages/web/components/elements/Pagination.tsx
@@ -1,45 +1,60 @@
-import React, { useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { Button } from './Button'
 import { HStack, VStack } from './LayoutPrimitives'
 
 type PaginationProps<T> = {
   items: T[]
   itemsPerPage: number
+  loadMoreButtonText?: string
   render: (item: T) => React.ReactNode
 }
 
 const Pagination = <T,>({
   items,
   itemsPerPage,
+  loadMoreButtonText,
   render,
 }: PaginationProps<T>) => {
   const [currentPage, setCurrentPage] = useState(1)
   const maxPage = Math.ceil(items.length / itemsPerPage)
 
-  function createChangePageHandler(page: number) {
-    return function handlePageChange() {
-      setCurrentPage(page)
-    }
-  }
+  const incrementCurrentPage = useCallback(() => {
+    setCurrentPage(currentPage + 1)
+  }, [currentPage, setCurrentPage])
 
-  const itemsToShow = items.slice(
-    (currentPage - 1) * itemsPerPage,
-    currentPage * itemsPerPage
-  )
+  const itemsToShow = useMemo(() => {
+    const count = currentPage * itemsPerPage
+    return items.slice(0, count)
+  }, [items, currentPage, itemsPerPage])
 
   return (
-    <VStack>
+    <VStack css={{ width: '100%' }}>
       {itemsToShow.map(render)}
-      <HStack>
-        {Array.from({ length: maxPage }, (_, i) => i + 1).map((pageNum) => (
+      <HStack
+        alignment="center"
+        distribution="center"
+        css={{ p: '30px', width: '100%' }}
+      >
+        {currentPage < maxPage && (
           <Button
-            key={pageNum}
-            onClick={createChangePageHandler(pageNum)}
-            disabled={pageNum === currentPage}
+            onClick={(event) => {
+              incrementCurrentPage()
+              event.preventDefault()
+            }}
+            style="homeAction"
+            css={{
+              fontFamily: '$inter',
+              fontSize: '15px',
+              fontWeight: '500',
+              color: '$thTextSubtle4',
+              bg: '#3D3D3D',
+              py: '10px',
+              px: '25px',
+            }}
           >
-            {pageNum}
+            {loadMoreButtonText ?? 'Load More'}
           </Button>
-        ))}
+        )}
       </HStack>
     </VStack>
   )
diff --git a/packages/web/components/elements/icons/home/AddToLibraryActionIcon.tsx b/packages/web/components/elements/icons/home/AddToLibraryActionIcon.tsx
index e42a1bb8a..b2db19fe2 100644
--- a/packages/web/components/elements/icons/home/AddToLibraryActionIcon.tsx
+++ b/packages/web/components/elements/icons/home/AddToLibraryActionIcon.tsx
@@ -11,16 +11,15 @@ export class AddToLibraryActionIcon extends React.Component<IconProps> {
 
     return (
       <svg
-        width="50"
-        height="32"
-        viewBox="0 0 50 32"
+        width="19"
+        height="19"
+        viewBox="0 0 19 19"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <rect width="50" height="32" rx="4" fill={backgroundColor} />
         <g>
           <path
-            d="M30 11.8333V23.5L25 20.1667L20 23.5V11.8333C20 10.9493 20.3512 10.1014 20.9763 9.47631C21.6014 8.85119 22.4493 8.5 23.3333 8.5H26.6667C27.5507 8.5 28.3986 8.85119 29.0237 9.47631C29.6488 10.1014 30 10.9493 30 11.8333Z"
+            d="M14.25 5.54167V16.625L9.5 13.4583L4.75 16.625V5.54167C4.75 4.70181 5.08363 3.89636 5.6775 3.3025C6.27136 2.70863 7.07681 2.375 7.91667 2.375H11.0833C11.9232 2.375 12.7286 2.70863 13.3225 3.3025C13.9164 3.89636 14.25 4.70181 14.25 5.54167Z"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
diff --git a/packages/web/components/elements/icons/home/ArchiveActionIcon.tsx b/packages/web/components/elements/icons/home/ArchiveActionIcon.tsx
index d97f49e5d..6f3aa65ae 100644
--- a/packages/web/components/elements/icons/home/ArchiveActionIcon.tsx
+++ b/packages/web/components/elements/icons/home/ArchiveActionIcon.tsx
@@ -7,34 +7,32 @@ import React from 'react'
 export class ArchiveActionIcon extends React.Component<IconProps> {
   render() {
     const strokeColor = (this.props.color || '#D9D9D9').toString()
-    const backgroundColor = (this.props.color || '#3D3D3D').toString()
 
     return (
       <svg
-        width="50"
-        height="32"
-        viewBox="0 0 50 32"
+        width="19"
+        height="19"
+        viewBox="0 0 19 19"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <rect width="50" height="32" rx="4" fill={backgroundColor} />
         <g>
           <path
-            d="M17.5 11.0002C17.5 10.5581 17.6756 10.1342 17.9882 9.82165C18.3007 9.50909 18.7246 9.3335 19.1667 9.3335H30.8333C31.2754 9.3335 31.6993 9.50909 32.0118 9.82165C32.3244 10.1342 32.5 10.5581 32.5 11.0002C32.5 11.4422 32.3244 11.8661 32.0118 12.1787C31.6993 12.4912 31.2754 12.6668 30.8333 12.6668H19.1667C18.7246 12.6668 18.3007 12.4912 17.9882 12.1787C17.6756 11.8661 17.5 11.4422 17.5 11.0002Z"
+            d="M2.375 4.74984C2.375 4.32991 2.54181 3.92718 2.83875 3.63025C3.13568 3.33332 3.53841 3.1665 3.95833 3.1665H15.0417C15.4616 3.1665 15.8643 3.33332 16.1613 3.63025C16.4582 3.92718 16.625 4.32991 16.625 4.74984C16.625 5.16976 16.4582 5.57249 16.1613 5.86942C15.8643 6.16636 15.4616 6.33317 15.0417 6.33317H3.95833C3.53841 6.33317 3.13568 6.16636 2.83875 5.86942C2.54181 5.57249 2.375 5.16976 2.375 4.74984Z"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M19.1666 12.6665V20.9998C19.1666 21.4419 19.3422 21.8658 19.6548 22.1783C19.9673 22.4909 20.3913 22.6665 20.8333 22.6665H29.1666C29.6087 22.6665 30.0326 22.4909 30.3451 22.1783C30.6577 21.8658 30.8333 21.4419 30.8333 20.9998V12.6665"
+            d="M3.95801 6.3335V14.2502C3.95801 14.6701 4.12482 15.0728 4.42176 15.3697C4.71869 15.6667 5.12141 15.8335 5.54134 15.8335H13.458C13.8779 15.8335 14.2807 15.6667 14.5776 15.3697C14.8745 15.0728 15.0413 14.6701 15.0413 14.2502V6.3335"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M23.3334 16H26.6667"
+            d="M7.91699 9.5H11.0837"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
diff --git a/packages/web/components/elements/icons/home/CommentActionIcon.tsx b/packages/web/components/elements/icons/home/CommentActionIcon.tsx
index d0d704821..4222b2ac4 100644
--- a/packages/web/components/elements/icons/home/CommentActionIcon.tsx
+++ b/packages/web/components/elements/icons/home/CommentActionIcon.tsx
@@ -11,16 +11,15 @@ export class CommentActionIcon extends React.Component<IconProps> {
 
     return (
       <svg
-        width="50"
-        height="32"
-        viewBox="0 0 50 32"
+        width="20"
+        height="21"
+        viewBox="0 0 20 21"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <rect width="50" height="32" rx="4" fill={backgroundColor} />
         <g>
           <path
-            d="M17.5 22.6668L18.5833 19.4168C17.647 18.032 17.3083 16.3922 17.6302 14.8021C17.952 13.212 18.9126 11.7799 20.3331 10.772C21.7537 9.76421 23.5377 9.24923 25.3534 9.32285C27.1691 9.39647 28.8929 10.0537 30.2044 11.1723C31.5159 12.2909 32.3257 13.7948 32.4834 15.4043C32.6411 17.0138 32.1358 18.6195 31.0616 19.9228C29.9873 21.226 28.4172 22.1382 26.6432 22.4896C24.8691 22.8411 23.0118 22.6079 21.4167 21.8335L17.5 22.6668Z"
+            d="M2.5 17.1668L3.58333 13.9168C2.64704 12.532 2.30833 10.8922 2.63018 9.30207C2.95204 7.71197 3.91255 6.27987 5.33314 5.27204C6.75373 4.26421 8.53772 3.74923 10.3534 3.82285C12.1691 3.89647 13.8929 4.55368 15.2044 5.67228C16.5159 6.79089 17.3257 8.29477 17.4834 9.9043C17.6411 11.5138 17.1358 13.1195 16.0616 14.4228C14.9873 15.726 13.4172 16.6382 11.6432 16.9896C9.86911 17.3411 8.01184 17.1079 6.41667 16.3335L2.5 17.1668Z"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
diff --git a/packages/web/components/elements/icons/home/RemoveActionIcon.tsx b/packages/web/components/elements/icons/home/RemoveActionIcon.tsx
index ab55125b1..4af3c0d2e 100644
--- a/packages/web/components/elements/icons/home/RemoveActionIcon.tsx
+++ b/packages/web/components/elements/icons/home/RemoveActionIcon.tsx
@@ -7,48 +7,46 @@ import React from 'react'
 export class RemoveActionIcon extends React.Component<IconProps> {
   render() {
     const strokeColor = (this.props.color || '#D9D9D9').toString()
-    const backgroundColor = (this.props.color || '#3D3D3D').toString()
 
     return (
       <svg
-        width="50"
-        height="32"
-        viewBox="0 0 50 32"
+        width="19"
+        height="19"
+        viewBox="0 0 19 19"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <rect width="50" height="32" rx="4" fill={backgroundColor} />
         <g>
           <path
-            d="M18.3334 11.8335H31.6667"
+            d="M3.16699 5.5415H15.8337"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M23.3334 15.1665V20.1665"
+            d="M7.91699 8.7085V13.4585"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M26.6666 15.1665V20.1665"
+            d="M11.083 8.7085V13.4585"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M19.1666 11.8335L20 21.8335C20 22.2755 20.1756 22.6994 20.4881 23.012C20.8007 23.3246 21.2246 23.5002 21.6666 23.5002H28.3333C28.7753 23.5002 29.1992 23.3246 29.5118 23.012C29.8244 22.6994 30 22.2755 30 21.8335L30.8333 11.8335"
+            d="M3.95801 5.5415L4.74967 15.0415C4.74967 15.4614 4.91649 15.8642 5.21342 16.1611C5.51035 16.458 5.91308 16.6248 6.33301 16.6248H12.6663C13.0863 16.6248 13.489 16.458 13.7859 16.1611C14.0829 15.8642 14.2497 15.4614 14.2497 15.0415L15.0413 5.5415"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M22.5 11.8333V9.33333C22.5 9.11232 22.5878 8.90036 22.7441 8.74408C22.9004 8.5878 23.1123 8.5 23.3333 8.5H26.6667C26.8877 8.5 27.0996 8.5878 27.2559 8.74408C27.4122 8.90036 27.5 9.11232 27.5 9.33333V11.8333"
+            d="M7.125 5.54167V3.16667C7.125 2.9567 7.20841 2.75534 7.35687 2.60687C7.50534 2.45841 7.7067 2.375 7.91667 2.375H11.0833C11.2933 2.375 11.4947 2.45841 11.6431 2.60687C11.7916 2.75534 11.875 2.9567 11.875 3.16667V5.54167"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
diff --git a/packages/web/components/elements/icons/home/ShareActionIcon.tsx b/packages/web/components/elements/icons/home/ShareActionIcon.tsx
index 75648581d..fbc063da2 100644
--- a/packages/web/components/elements/icons/home/ShareActionIcon.tsx
+++ b/packages/web/components/elements/icons/home/ShareActionIcon.tsx
@@ -7,20 +7,18 @@ import React from 'react'
 export class ShareActionIcon extends React.Component<IconProps> {
   render() {
     const strokeColor = (this.props.color || '#D9D9D9').toString()
-    const backgroundColor = (this.props.color || '#3D3D3D').toString()
 
     return (
       <svg
-        width="49"
-        height="32"
-        viewBox="0 0 49 32"
+        width="19"
+        height="19"
+        viewBox="0 0 19 19"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <rect y="0.5" width="49" height="31" rx="4" fill={backgroundColor} />
         <g>
           <path
-            d="M25.2917 9.6665V12.8332C20.0865 13.647 18.1509 18.207 17.375 22.3332C17.3457 22.4963 21.6374 17.6133 25.2917 17.5832V20.7498L31.625 15.2082L25.2917 9.6665Z"
+            d="M10.2918 3.1665V6.33317C5.08661 7.147 3.15098 11.707 2.37515 15.8332C2.34586 15.9963 6.63748 11.1133 10.2918 11.0832V14.2498L16.6251 8.70817L10.2918 3.1665Z"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
diff --git a/packages/web/components/templates/navMenu/LibraryMenu.tsx b/packages/web/components/templates/navMenu/LibraryMenu.tsx
index e39923bca..367480623 100644
--- a/packages/web/components/templates/navMenu/LibraryMenu.tsx
+++ b/packages/web/components/templates/navMenu/LibraryMenu.tsx
@@ -2,7 +2,7 @@ import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 import { StyledText } from '../../elements/StyledText'
 import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
-import { Circle, DotsThree, MagnifyingGlass, X } from 'phosphor-react'
+import { Circle, DotsThree, List, MagnifyingGlass, X } from 'phosphor-react'
 import {
   Subscription,
   SubscriptionType,
@@ -122,9 +122,9 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
         <Box
           css={{
             width: '100%',
-            px: '25px',
+            px: '15px',
             pb: '17px',
-            pt: '4.5px',
+            pt: '15px',
             lineHeight: '1',
             '@mdDown': {
               pb: '0px',
@@ -133,8 +133,19 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
             },
           }}
         >
-          <SpanBox css={{ '@mdDown': { display: 'none' } }}>
-            <LogoBox />
+          <SpanBox css={{ mr: 'auto', '@mdDown': { display: 'none' } }}>
+            <Button
+              style="plainIcon"
+              onClick={(event) => {
+                props.setShowFilterMenu(false)
+                event.preventDefault()
+              }}
+            >
+              <List
+                size="25"
+                color={theme.colors.readerTextSubtle.toString()}
+              />
+            </Button>
           </SpanBox>
 
           <Button
diff --git a/packages/web/components/templates/navMenu/NavigationMenu.tsx b/packages/web/components/templates/navMenu/NavigationMenu.tsx
new file mode 100644
index 000000000..788891b6d
--- /dev/null
+++ b/packages/web/components/templates/navMenu/NavigationMenu.tsx
@@ -0,0 +1,1074 @@
+import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import { StyledText } from '../../elements/StyledText'
+import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { Button } from '../../elements/Button'
+import { Circle, DotsThree, List, MagnifyingGlass, X } from 'phosphor-react'
+import {
+  Subscription,
+  SubscriptionType,
+  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 { useRegisterActions } from 'kbar'
+import { LogoBox } from '../../elements/LogoBox'
+import { usePersistedState } from '../../../lib/hooks/usePersistedState'
+import { useGetSavedSearchQuery } from '../../../lib/networking/queries/useGetSavedSearchQuery'
+import { SavedSearch } from '../../../lib/networking/fragments/savedSearchFragment'
+import { ToggleCaretDownIcon } from '../../elements/icons/ToggleCaretDownIcon'
+import Link from 'next/link'
+import { ToggleCaretRightIcon } from '../../elements/icons/ToggleCaretRightIcon'
+import { NavMenuFooter } from './Footer'
+import { FollowingIcon } from '../../elements/icons/FollowingIcon'
+import { HomeIcon } from '../../elements/icons/HomeIcon'
+import { LibraryIcon } from '../../elements/icons/LibraryIcon'
+import { HighlightsIcon } from '../../elements/icons/HighlightsIcon'
+import { CoverImage } from '../../elements/CoverImage'
+import { Shortcut } from '../../../pages/settings/shortcuts'
+import { OutlinedLabelChip } from '../../elements/OutlinedLabelChip'
+import { NewsletterIcon } from '../../elements/icons/NewsletterIcon'
+import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
+import { useRouter } from 'next/router'
+import { DiscoverIcon } from '../../elements/icons/DiscoverIcon'
+import { escapeQuotes } from '../../../utils/helper'
+
+export const LIBRARY_LEFT_MENU_WIDTH = '275px'
+
+type LibraryFilterMenuProps = {
+  setShowAddLinkModal: (show: boolean) => void
+
+  searchTerm: string | undefined
+  applySearchQuery: (searchTerm: string) => void
+
+  showFilterMenu: boolean
+  setShowFilterMenu: (show: boolean) => void
+}
+
+export function NavigationMenu(props: LibraryFilterMenuProps): JSX.Element {
+  const [labels, setLabels] = usePersistedState<Label[]>({
+    key: 'menu-labels',
+    isSessionStorage: false,
+    initialValue: [],
+  })
+  const [savedSearches, setSavedSearches] = usePersistedState<SavedSearch[]>({
+    key: 'menu-searches',
+    isSessionStorage: false,
+    initialValue: [],
+  })
+  const [subscriptions, setSubscriptions] = usePersistedState<Subscription[]>({
+    key: 'menu-subscriptions',
+    isSessionStorage: false,
+    initialValue: [],
+  })
+  const labelsResponse = useGetLabelsQuery()
+  const searchesResponse = useGetSavedSearchQuery()
+  const subscriptionsResponse = useGetSubscriptionsQuery()
+
+  useEffect(() => {
+    if (
+      !labelsResponse.error &&
+      !labelsResponse.isLoading &&
+      labelsResponse.labels
+    ) {
+      setLabels(labelsResponse.labels)
+    }
+  }, [setLabels, labelsResponse])
+
+  useEffect(() => {
+    if (
+      !subscriptionsResponse.error &&
+      !subscriptionsResponse.isLoading &&
+      subscriptionsResponse.subscriptions
+    ) {
+      setSubscriptions(subscriptionsResponse.subscriptions)
+    }
+  }, [setSubscriptions, subscriptionsResponse])
+
+  useEffect(() => {
+    if (
+      !searchesResponse.error &&
+      !searchesResponse.isLoading &&
+      searchesResponse.savedSearches
+    ) {
+      setSavedSearches(searchesResponse.savedSearches)
+    }
+  }, [setSavedSearches, searchesResponse])
+
+  return (
+    <>
+      <Box
+        css={{
+          left: '0px',
+          top: '0px',
+          position: 'fixed',
+          bg: '$thLeftMenuBackground',
+          height: '100%',
+          width: LIBRARY_LEFT_MENU_WIDTH,
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          '&::-webkit-scrollbar': {
+            display: 'none',
+          },
+          '@mdDown': {
+            width: '100%',
+            transition: 'top 100ms, visibility 100ms',
+            top: props.showFilterMenu ? '0' : '100%',
+            visibility: props.showFilterMenu ? 'visible' : 'hidden',
+          },
+          zIndex: 10,
+        }}
+      >
+        <Box
+          css={{
+            width: '100%',
+            px: '15px',
+            pb: '17px',
+            pt: '15px',
+            lineHeight: '1',
+            '@mdDown': {
+              pb: '0px',
+              pt: '5px',
+              px: '15px',
+            },
+          }}
+        >
+          <SpanBox css={{ mr: 'auto', '@mdDown': { display: 'none' } }}>
+            <Button
+              style="plainIcon"
+              onClick={(event) => {
+                props.setShowFilterMenu(false)
+                event.preventDefault()
+              }}
+            >
+              <List
+                size="25"
+                color={theme.colors.readerTextSubtle.toString()}
+              />
+            </Button>
+          </SpanBox>
+
+          <Button
+            style="plainIcon"
+            css={{
+              display: 'none',
+              '@mdDown': {
+                display: 'flex',
+                ml: 'auto',
+                pt: '10px',
+                pb: '0px',
+              },
+            }}
+            onClick={(event) => {
+              props.setShowFilterMenu(false)
+              event.preventDefault()
+            }}
+          >
+            <X size={30} />
+          </Button>
+        </Box>
+        <LibraryNav {...props} />
+        <Shortcuts {...props} />
+        <NavMenuFooter {...props} />
+        <Box css={{ height: '250px ' }} />
+      </Box>
+      {/* This spacer pushes library content to the right of 
+      the fixed left side menu. */}
+      <Box
+        css={{
+          minWidth: LIBRARY_LEFT_MENU_WIDTH,
+          height: '100%',
+          bg: '$thBackground',
+          '@mdDown': {
+            display: 'none',
+          },
+        }}
+      ></Box>
+    </>
+  )
+}
+
+const LibraryNav = (props: LibraryFilterMenuProps): JSX.Element => {
+  return (
+    <VStack
+      css={{
+        m: '0px',
+        mt: '10px',
+        gap: '5px',
+        width: '100%',
+        borderBottom: '1px solid $thBorderColor',
+        px: '15px',
+        pb: '25px',
+      }}
+      alignment="start"
+      distribution="start"
+    >
+      <NavButton
+        {...props}
+        text="Home"
+        filterTerm="in:library OR in:following use:folders"
+        icon={<HomeIcon color={theme.colors.thHomeIcon.toString()} />}
+      />
+      <NavButton
+        {...props}
+        text="Following"
+        filterTerm="in:following use:folders"
+        icon={<FollowingIcon color="#F59932" />}
+      />
+      <NavButton
+        {...props}
+        text="Library"
+        filterTerm="in:library use:folders"
+        icon={<LibraryIcon color={theme.colors.ctaBlue.toString()} />}
+      />
+      <NavButton
+        {...props}
+        text="Highlights"
+        filterTerm="in:all has:highlights mode:highlights"
+        icon={<HighlightsIcon color={theme.colors.highlight.toString()} />}
+      />
+      <NavRedirectButton
+        {...props}
+        text="Discover"
+        redirectLocation={'/discover'}
+        icon={<DiscoverIcon color={theme.colors.discover.toString()} />}
+      />
+    </VStack>
+  )
+}
+
+const Shortcuts = (props: LibraryFilterMenuProps): JSX.Element => {
+  const router = useRouter()
+  const [shortcuts] = usePersistedState<Shortcut[]>({
+    key: 'library-shortcuts',
+    isSessionStorage: false,
+    initialValue: [],
+  })
+
+  // const shortcuts: Shortcut[] = [
+  //   {
+  //     id: '12asdfasdf',
+  //     name: 'Omnivore Blog',
+  //     icon: 'https://substackcdn.com/image/fetch/w_256,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F052c15c4-ecfd-4d32-87db-13bcac9afad5_512x512.png',
+  //     filter: 'subscription:"Money Talk"',
+  //     type: 'feed',
+  //   },
+  //   {
+  //     id: 'sdfsdfgdsfg',
+  //     name: 'Follow the Money | Arne & Harr',
+  //     filter: 'subscription:"Money Talk"',
+  //     type: 'feed',
+  //   },
+  //   {
+  //     id: 'sdfasdfasdfsdfsdfsgasdfg',
+  //     name: 'Andrew Kenneson from Center for the Study of Partisanship and Ideology',
+  //     // icon: 'https://substackcdn.com/image/fetch/w_256,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F052c15c4-ecfd-4d32-87db-13bcac9afad5_512x512.png',
+  //     filter: 'in:all label:"Hockey"',
+  //     type: 'newsletter',
+  //   },
+  //   {
+  //     id: 'sdfasdfasdfsdfsdfsgasdfg',
+  //     name: 'Robert的博客',
+  //     // icon: 'https://substackcdn.com/image/fetch/w_256,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F052c15c4-ecfd-4d32-87db-13bcac9afad5_512x512.png',
+  //     filter: 'in:all label:"Hockey"',
+  //     type: 'feed',
+  //   },
+  //   {
+  //     id: 'sdfasdfasdfasdfasf',
+  //     name: 'Oldest First',
+  //     // icon: 'https://substackcdn.com/image/fetch/w_256,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F052c15c4-ecfd-4d32-87db-13bcac9afad5_512x512.png',
+  //     filter: 'in:all label:"Hockey"',
+  //     type: 'search',
+  //   },
+  //   {
+  //     id: 'sdfasdfasdfgasdfg',
+  //     name: 'Hockey',
+  //     // icon: 'https://substackcdn.com/image/fetch/w_256,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F052c15c4-ecfd-4d32-87db-13bcac9afad5_512x512.png',
+  //     filter: 'in:all label:"Hockey"',
+  //     type: 'label',
+  //     label: {
+  //       id: 'sdfsdfsdf',
+  //       name: 'Hockey',
+  //       color: '#E98B8B',
+  //       createdAt: new Date(),
+  //     },
+  //   },
+  // ]
+  //
+
+  return (
+    <VStack
+      css={{
+        m: '0px',
+        gap: '8px',
+        width: '100%',
+        px: '15px',
+        pb: '25px',
+      }}
+      alignment="start"
+      distribution="start"
+    >
+      <HStack
+        alignment="center"
+        distribution="start"
+        css={{ width: '100%', pr: '0px' }}
+      >
+        <StyledText
+          css={{
+            fontFamily: '$display',
+            fontSize: '14px',
+            lineHeight: '125%',
+            color: '$thLibraryMenuPrimary',
+            pl: '10px',
+            // mt: '20px',
+            mb: '10px',
+          }}
+        >
+          SHORTCUTS
+        </StyledText>
+        <SpanBox css={{ display: 'flex', ml: 'auto' }}>
+          <Dropdown
+            side="bottom"
+            triggerElement={<DotsThree size={20} />}
+            css={{ ml: 'auto' }}
+          >
+            <DropdownOption
+              onSelect={() => {
+                router.push(`/settings/shortcuts`)
+              }}
+              title="Edit shortcuts"
+            />
+          </Dropdown>
+        </SpanBox>
+      </HStack>
+      {shortcuts.map((shortcut) => {
+        const selected = props.searchTerm === shortcut.filter
+        return (
+          <Box
+            key={`shortcut-${shortcut.id}`}
+            css={{
+              display: 'flex',
+              width: '100%',
+              maxWidth: '100%',
+              height: '32px',
+
+              backgroundColor: selected ? '$thLibrarySelectionColor' : 'unset',
+              color: selected
+                ? '$thLibraryMenuSecondary'
+                : '$thLibraryMenuUnselected',
+              verticalAlign: 'middle',
+              borderRadius: '3px',
+              cursor: 'pointer',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              '&:hover': {
+                backgroundColor: selected
+                  ? '$thLibrarySelectionColor'
+                  : '$thBackground4',
+              },
+              '&:active': {
+                backgroundColor: selected
+                  ? '$thLibrarySelectionColor'
+                  : '$thBackground4',
+              },
+            }}
+            title={shortcut.name}
+            onClick={(e) => {
+              props.applySearchQuery(shortcut.filter)
+              props.setShowFilterMenu(false)
+              e.preventDefault()
+            }}
+          >
+            {(shortcut.type == 'feed' || shortcut.type == 'newsletter') && (
+              <FeedOrNewsletterShortcut shortcut={shortcut} />
+            )}
+            {shortcut.type == 'search' && (
+              <SearchShortcut shortcut={shortcut} />
+            )}
+            {shortcut.type == 'label' && <LabelShortcut shortcut={shortcut} />}
+          </Box>
+        )
+      })}
+    </VStack>
+  )
+}
+
+type ShortcutItemProps = {
+  shortcut: Shortcut
+}
+
+const FeedOrNewsletterShortcut = (props: ShortcutItemProps): JSX.Element => {
+  return (
+    <HStack
+      alignment="center"
+      distribution="start"
+      css={{ pl: '10px', width: '100%', gap: '10px' }}
+      key={`search-${props.shortcut.id}`}
+    >
+      <HStack
+        distribution="start"
+        alignment="center"
+        css={{ minWidth: '20px' }}
+      >
+        {props.shortcut.icon ? (
+          <CoverImage
+            src={props.shortcut.icon}
+            width={20}
+            height={20}
+            css={{ borderRadius: '20px' }}
+          />
+        ) : props.shortcut.type == 'newsletter' ? (
+          <NewsletterIcon color="#F59932" size={18} />
+        ) : (
+          <FollowingIcon color="#F59932" size={21} />
+        )}
+      </HStack>
+      <StyledText style="settingsItem">{props.shortcut.name}</StyledText>
+    </HStack>
+  )
+}
+
+const SearchShortcut = (props: ShortcutItemProps): JSX.Element => {
+  return (
+    <HStack
+      alignment="center"
+      distribution="start"
+      css={{ pl: '10px', width: '100%', gap: '10px' }}
+      key={`search-${props.shortcut.id}`}
+    >
+      <HStack
+        distribution="start"
+        alignment="center"
+        css={{ minWidth: '20px' }}
+      >
+        <MagnifyingGlass size={18} />
+      </HStack>
+      <StyledText style="settingsItem">{props.shortcut.name}</StyledText>
+    </HStack>
+  )
+}
+
+const LabelShortcut = (props: ShortcutItemProps): JSX.Element => {
+  return (
+    <HStack
+      alignment="center"
+      distribution="start"
+      css={{ pl: '5px', width: '100%' }}
+      key={`search-${props.shortcut.id}`}
+    >
+      <OutlinedLabelChip
+        text={props.shortcut.name}
+        color={props.shortcut.label?.color ?? 'gray'}
+      />
+    </HStack>
+  )
+}
+
+function SavedSearches(
+  props: LibraryFilterMenuProps & { savedSearches: SavedSearch[] | undefined }
+): JSX.Element {
+  const sortedSearches = useMemo(() => {
+    return props.savedSearches
+      ?.filter((it) => it.visible)
+      ?.sort(
+        (left: SavedSearch, right: SavedSearch) =>
+          left.position - right.position
+      )
+  }, [props.savedSearches])
+
+  useRegisterActions(
+    (sortedSearches ?? []).map((item, idx) => {
+      const key = String(idx + 1)
+      return {
+        id: `saved_search_${key}`,
+        name: item.name,
+        shortcut: [key],
+        section: 'Saved Searches',
+        keywords: '?' + item.name,
+        perform: () => {
+          props.applySearchQuery(item.filter)
+        },
+      }
+    }),
+    [props.savedSearches]
+  )
+
+  const [collapsed, setCollapsed] = usePersistedState<boolean>({
+    key: `--saved-searches-collapsed`,
+    initialValue: false,
+  })
+
+  return (
+    <MenuPanel
+      title="SHORTCUTS"
+      collapsed={collapsed}
+      setCollapsed={setCollapsed}
+    >
+      {!collapsed &&
+        sortedSearches &&
+        sortedSearches?.map((item) => (
+          <FilterButton
+            key={item.name}
+            text={item.name}
+            filterTerm={item.filter}
+            {...props}
+          />
+        ))}
+      {!collapsed && sortedSearches !== undefined && (
+        <EditButton
+          title="Edit Saved Searches"
+          destination="/settings/saved-searches"
+        />
+      )}
+
+      <Box css={{ height: '10px' }}></Box>
+    </MenuPanel>
+  )
+}
+
+function Subscriptions(
+  props: LibraryFilterMenuProps & { subscriptions: Subscription[] | undefined }
+): JSX.Element {
+  const [collapsed, setCollapsed] = usePersistedState<boolean>({
+    key: `--subscriptions-collapsed`,
+    initialValue: false,
+  })
+
+  const sortedSubscriptions = useMemo(() => {
+    if (!props.subscriptions) {
+      return []
+    }
+    return props.subscriptions
+      .filter((s) => s.status == 'ACTIVE')
+      .sort((a, b) => a.name.localeCompare(b.name))
+  }, [props.subscriptions])
+
+  useRegisterActions(
+    (sortedSubscriptions ?? []).map((subscription, idx) => {
+      const key = String(idx + 1)
+      const name = subscription.name
+      return {
+        id: `subscription_${key}`,
+        section: 'Subscriptions',
+        name: name,
+        keywords: '*' + name,
+        perform: () => {
+          props.applySearchQuery(`subscription:\"${escapeQuotes(name)}\"`)
+        },
+      }
+    }),
+    [sortedSubscriptions]
+  )
+
+  return (
+    <MenuPanel
+      title="Subscriptions"
+      collapsed={collapsed}
+      setCollapsed={setCollapsed}
+    >
+      {!collapsed ? (
+        <>
+          <FilterButton
+            filterTerm="in:inbox has:subscriptions"
+            text="All"
+            {...props}
+          />
+          <FilterButton
+            filterTerm={`in:inbox label:RSS`}
+            text="Feeds"
+            {...props}
+          />
+          <FilterButton
+            filterTerm={`in:inbox label:Newsletter`}
+            text="Newsletters"
+            {...props}
+          />
+          {(sortedSubscriptions ?? []).map((item) => {
+            switch (item.type) {
+              case SubscriptionType.NEWSLETTER:
+                return (
+                  <FilterButton
+                    key={item.id}
+                    filterTerm={`in:inbox subscription:\"${escapeQuotes(
+                      item.name
+                    )}\"`}
+                    text={item.name}
+                    {...props}
+                  />
+                )
+              case SubscriptionType.RSS:
+                return (
+                  <FilterButton
+                    key={item.id}
+                    filterTerm={`in:inbox rss:\"${item.url}\"`}
+                    text={item.name}
+                    {...props}
+                  />
+                )
+            }
+          })}
+          <EditButton
+            title="Edit Subscriptions"
+            destination="/settings/subscriptions"
+          />
+        </>
+      ) : (
+        <SpanBox css={{ mb: '10px' }} />
+      )}
+    </MenuPanel>
+  )
+}
+
+function Labels(
+  props: LibraryFilterMenuProps & { labels: Label[] }
+): JSX.Element {
+  const [collapsed, setCollapsed] = usePersistedState<boolean>({
+    key: `--labels-collapsed`,
+    initialValue: false,
+  })
+
+  const sortedLabels = useMemo(() => {
+    return props.labels.sort((left: Label, right: Label) =>
+      left.name.localeCompare(right.name)
+    )
+  }, [props.labels])
+
+  return (
+    <MenuPanel
+      title="Labels"
+      editTitle="Edit Labels"
+      hideBottomBorder={true}
+      collapsed={collapsed}
+      setCollapsed={setCollapsed}
+    >
+      {!collapsed && (
+        <>
+          {sortedLabels.map((item) => {
+            return <LabelButton key={item.id} label={item} {...props} />
+          })}
+          <EditButton title="Edit Labels" destination="/settings/labels" />
+        </>
+      )}
+    </MenuPanel>
+  )
+}
+
+type MenuPanelProps = {
+  title: string
+  children: ReactNode
+  editFunc?: () => void
+  editTitle?: string
+  hideBottomBorder?: boolean
+  collapsed: boolean
+  setCollapsed: (collapsed: boolean) => void
+}
+
+function MenuPanel(props: MenuPanelProps): JSX.Element {
+  return (
+    <VStack
+      css={{
+        m: '0px',
+        width: '100%',
+        borderBottom: props.hideBottomBorder
+          ? '1px solid transparent'
+          : '1px solid $thBorderColor',
+        px: '15px',
+      }}
+      alignment="start"
+      distribution="start"
+    >
+      <HStack css={{ width: '100%' }} distribution="start" alignment="center">
+        <StyledText
+          css={{
+            fontFamily: '$display',
+            fontSize: '14px',
+            lineHeight: '125%',
+            color: '$thLibraryMenuPrimary',
+            pl: '10px',
+            mt: '20px',
+            mb: '10px',
+          }}
+        >
+          {props.title}
+        </StyledText>
+        <SpanBox
+          css={{
+            display: 'flex',
+            height: '100%',
+            mt: '10px',
+            marginLeft: 'auto',
+            verticalAlign: 'middle',
+          }}
+        >
+          <Button
+            style="articleActionIcon"
+            onClick={(event) => {
+              props.setCollapsed(!props.collapsed)
+              event.preventDefault()
+            }}
+          >
+            {props.collapsed ? (
+              <ToggleCaretRightIcon
+                size={15}
+                color={theme.colors.thLibraryMenuPrimary.toString()}
+              />
+            ) : (
+              <ToggleCaretDownIcon
+                size={15}
+                color={theme.colors.thLibraryMenuPrimary.toString()}
+              />
+            )}
+          </Button>
+        </SpanBox>
+      </HStack>
+      {props.children}
+    </VStack>
+  )
+}
+
+type NavButtonProps = {
+  text: string
+  icon: ReactNode
+
+  filterTerm: string
+  searchTerm: string | undefined
+
+  applySearchQuery: (searchTerm: string) => void
+  setShowFilterMenu: (show: boolean) => void
+}
+
+type NavButtonRedirectProps = {
+  text: string
+  icon: ReactNode
+
+  redirectLocation: string
+}
+
+function NavRedirectButton(props: NavButtonRedirectProps): JSX.Element {
+  const [selected, setSelected] = useState(false)
+  const router = useRouter()
+
+  useEffect(() => {
+    setSelected(window.location.pathname.includes(props.redirectLocation))
+  }, [])
+
+  return (
+    <HStack
+      alignment="center"
+      distribution="start"
+      css={{
+        pl: '10px',
+        mb: '2px',
+        gap: '10px',
+        display: 'flex',
+        width: '100%',
+        maxWidth: '100%',
+        height: '34px',
+
+        backgroundColor: selected ? '$thLibrarySelectionColor' : 'unset',
+        fontSize: '15px',
+        fontWeight: 'regular',
+        fontFamily: '$display',
+        color: selected
+          ? '$thLibraryMenuSecondary'
+          : '$thLibraryMenuUnselected',
+        verticalAlign: 'middle',
+        borderRadius: '3px',
+        cursor: 'pointer',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        '&:hover': {
+          backgroundColor: selected
+            ? '$thLibrarySelectionColor'
+            : '$thBackground4',
+        },
+        '&:active': {
+          backgroundColor: selected
+            ? '$thLibrarySelectionColor'
+            : '$thBackground4',
+        },
+      }}
+      title={props.text}
+      onClick={(e) => {
+        router.push(props.redirectLocation)
+        e.preventDefault()
+      }}
+    >
+      {props.icon}
+      {props.text}
+    </HStack>
+  )
+}
+
+function NavButton(props: NavButtonProps): JSX.Element {
+  const isInboxFilter = (filter: string) => {
+    return filter === '' || filter === 'in:inbox'
+  }
+  const selected = useMemo(() => {
+    if (isInboxFilter(props.filterTerm) && !props.searchTerm) {
+      return true
+    }
+    return props.searchTerm === props.filterTerm
+  }, [props.searchTerm, props.filterTerm])
+
+  return (
+    <HStack
+      alignment="center"
+      distribution="start"
+      css={{
+        pl: '10px',
+        mb: '2px',
+        gap: '10px',
+        display: 'flex',
+        width: '100%',
+        maxWidth: '100%',
+        height: '34px',
+
+        backgroundColor: selected ? '$thLibrarySelectionColor' : 'unset',
+        fontSize: '15px',
+        fontWeight: 'regular',
+        fontFamily: '$display',
+        color: selected
+          ? '$thLibraryMenuSecondary'
+          : '$thLibraryMenuUnselected',
+        verticalAlign: 'middle',
+        borderRadius: '3px',
+        cursor: 'pointer',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        '&:hover': {
+          backgroundColor: selected
+            ? '$thLibrarySelectionColor'
+            : '$thBackground4',
+        },
+        '&:active': {
+          backgroundColor: selected
+            ? '$thLibrarySelectionColor'
+            : '$thBackground4',
+        },
+      }}
+      title={props.text}
+      onClick={(e) => {
+        props.applySearchQuery(props.filterTerm)
+        props.setShowFilterMenu(false)
+        e.preventDefault()
+      }}
+    >
+      {props.icon}
+      {props.text}
+    </HStack>
+  )
+}
+
+type FilterButtonProps = {
+  text: string
+
+  filterTerm: string
+  searchTerm: string | undefined
+
+  applySearchQuery: (searchTerm: string) => void
+
+  setShowFilterMenu: (show: boolean) => void
+}
+
+function FilterButton(props: FilterButtonProps): JSX.Element {
+  const isInboxFilter = (filter: string) => {
+    return filter === '' || filter === 'in:inbox'
+  }
+  const selected = useMemo(() => {
+    if (isInboxFilter(props.filterTerm) && !props.searchTerm) {
+      return true
+    }
+    return props.searchTerm === props.filterTerm
+  }, [props.searchTerm, props.filterTerm])
+
+  return (
+    <Box
+      css={{
+        pl: '10px',
+        mb: '2px',
+        display: 'flex',
+        width: '100%',
+        maxWidth: '100%',
+        height: '32px',
+
+        backgroundColor: selected ? '$thLibrarySelectionColor' : 'unset',
+        fontSize: '14px',
+        fontWeight: 'regular',
+        fontFamily: '$display',
+        color: selected
+          ? '$thLibraryMenuSecondary'
+          : '$thLibraryMenuUnselected',
+        verticalAlign: 'middle',
+        borderRadius: '3px',
+        cursor: 'pointer',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        alignItems: 'center',
+        '&:hover': {
+          backgroundColor: selected
+            ? '$thLibrarySelectionColor'
+            : '$thBackground4',
+        },
+        '&:active': {
+          backgroundColor: selected
+            ? '$thLibrarySelectionColor'
+            : '$thBackground4',
+        },
+      }}
+      title={props.text}
+      onClick={(e) => {
+        props.applySearchQuery(props.filterTerm)
+        props.setShowFilterMenu(false)
+        e.preventDefault()
+      }}
+    >
+      {props.text}
+    </Box>
+  )
+}
+
+type LabelButtonProps = {
+  label: Label
+  searchTerm: string | undefined
+  applySearchQuery: (searchTerm: string) => void
+}
+
+function LabelButton(props: LabelButtonProps): JSX.Element {
+  const labelId = `checkbox-label-${props.label.id}`
+  const checkboxRef = useRef<HTMLInputElement | null>(null)
+  const state = useMemo(() => {
+    const term = props.searchTerm ?? ''
+    if (term.indexOf(`label:\"${escapeQuotes(props.label.name)}\"`) >= 0) {
+      return 'on'
+    }
+    return 'off'
+  }, [props.searchTerm, props.label])
+
+  return (
+    <HStack
+      css={{
+        pl: '10px',
+        pt: '2px', // TODO: hack to middle align
+        width: '100%',
+        height: '30px',
+
+        fontSize: '14px',
+        fontWeight: 'regular',
+        fontFamily: '$display',
+        color:
+          state == 'on'
+            ? '$thLibraryMenuSecondary'
+            : '$thLibraryMenuUnselected',
+
+        verticalAlign: 'middle',
+        borderRadius: '3px',
+        cursor: 'pointer',
+
+        m: '0px',
+        '&:hover': {
+          backgroundColor: '$thBackground4',
+        },
+      }}
+      title={props.label.name}
+      alignment="center"
+      distribution="start"
+    >
+      <label
+        style={{
+          cursor: 'pointer',
+          width: '100%',
+          maxWidth: '170px',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+        onClick={() => {
+          const query = props.searchTerm?.replace(/label:\"(.*)\"/, '') ?? ''
+          if (checkboxRef.current?.checked) {
+            props.applySearchQuery(query.trim())
+          } else {
+            props.applySearchQuery(
+              `${query.trim()} label:\"${escapeQuotes(props.label.name)}\"`
+            )
+          }
+        }}
+      >
+        <Circle size={9} color={props.label.color} weight="fill" />
+        <SpanBox css={{ pl: '10px' }}>{props.label.name}</SpanBox>
+      </label>
+      <SpanBox
+        css={{
+          ml: 'auto',
+        }}
+      >
+        <input
+          id={labelId}
+          ref={checkboxRef}
+          type="checkbox"
+          checked={state === 'on'}
+          onChange={(e) => {
+            const escapedLabelName = escapeQuotes(props.label.name)
+            if (e.target.checked) {
+              props.applySearchQuery(
+                `${props.searchTerm ?? ''} label:\"${escapedLabelName}\"`
+              )
+            } else {
+              const query =
+                props.searchTerm?.replace(
+                  `label:\"${escapedLabelName}\"`,
+                  ''
+                ) ?? ''
+              props.applySearchQuery(query)
+            }
+          }}
+        />
+      </SpanBox>
+    </HStack>
+  )
+}
+
+type EditButtonProps = {
+  title: string
+  destination: string
+}
+
+function EditButton(props: EditButtonProps): JSX.Element {
+  return (
+    <Link href={props.destination} passHref legacyBehavior>
+      <SpanBox
+        css={{
+          ml: '10px',
+          mb: '10px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '2px',
+          '&:hover': {
+            textDecoration: 'underline',
+          },
+
+          width: '100%',
+          maxWidth: '100%',
+          height: '32px',
+
+          fontSize: '14px',
+          fontWeight: 'regular',
+          fontFamily: '$display',
+          color: '$thLibraryMenuUnselected',
+          verticalAlign: 'middle',
+          borderRadius: '3px',
+          cursor: 'pointer',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {props.title}
+      </SpanBox>
+    </Link>
+  )
+}
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 5a1908fbf..e4a575337 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -157,6 +157,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         readerTableHeader: '#FFFFFF',
         readerMargin: 'white',
         readerTextSubtle: '#898989',
+        readerHoverBg: '#1E1E1E',
 
         // Avatar Fallback color
         avatarBg: '#FFEA9F',
@@ -296,6 +297,8 @@ const darkThemeSpec = {
     readerFontHighContrast: 'white',
     readerTableHeader: '#FFFFFF',
     readerMargin: '#2A2A2A',
+    readerHoverBg: '#1E1E1E',
+    readerTextSubtle: '#EDEDED',
 
     avatarBg: '#7B5C3E',
     avatarFont: '#D9D9D9',
diff --git a/packages/web/pages/justread/index.tsx b/packages/web/pages/justread/index.tsx
index 936484476..877707db0 100644
--- a/packages/web/pages/justread/index.tsx
+++ b/packages/web/pages/justread/index.tsx
@@ -1,7 +1,7 @@
 import * as HoverCard from '@radix-ui/react-hover-card'
 import { styled } from '@stitches/react'
 import { useRouter } from 'next/router'
-import { useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { Button } from '../../components/elements/Button'
 import { AddToLibraryActionIcon } from '../../components/elements/icons/home/AddToLibraryActionIcon'
 import { ArchiveActionIcon } from '../../components/elements/icons/home/ArchiveActionIcon'
@@ -25,14 +25,20 @@ import {
   useGetSubscriptionsQuery,
 } from '../../lib/networking/queries/useGetSubscriptionsQuery'
 import {
+  Box,
   HStack,
   SpanBox,
   VStack,
 } from './../../components/elements/LayoutPrimitives'
+import { Hamburger, List, ThumbsDown, ThumbsUp } from 'phosphor-react'
+import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
+import { Toaster } from 'react-hot-toast'
+import { DEFAULT_HEADER_HEIGHT } from '../../components/templates/homeFeed/HeaderSpacer'
+import { NavigationMenu } from '../../components/templates/navMenu/NavigationMenu'
 
 export default function Home(): JSX.Element {
+  const [showLeftMenu, setShowLeftMenu] = useState(false)
   const homeData = useGetHomeItems()
-  console.log('home sections: ', homeData.sections)
   useApplyLocalTheme()
 
   return (
@@ -41,11 +47,29 @@ export default function Home(): JSX.Element {
       alignment="center"
       css={{
         width: '100%',
-        bg: '$readerBg',
+        // bg: '$readerBg',
+        bg: '#2A2A2A',
         pt: '45px',
         minHeight: '100vh',
       }}
     >
+      <Toaster />
+      <Header
+        toggleMenu={() => {
+          setShowLeftMenu(!showLeftMenu)
+        }}
+      />
+      {showLeftMenu && (
+        <NavigationMenu
+          setShowAddLinkModal={() => {}}
+          searchTerm={''}
+          applySearchQuery={(searchQuery: string) => {}}
+          showFilterMenu={showLeftMenu}
+          setShowFilterMenu={(show) => {
+            setShowLeftMenu(show)
+          }}
+        />
+      )}
       <VStack
         distribution="start"
         css={{
@@ -58,6 +82,9 @@ export default function Home(): JSX.Element {
         }}
       >
         {homeData.sections?.map((homeSection, idx) => {
+          if (homeSection.items.length < 1) {
+            return <></>
+          }
           switch (homeSection.layout) {
             case 'just_added':
               return (
@@ -150,6 +177,7 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => {
       <Pagination
         items={props.homeSection.items}
         itemsPerPage={4}
+        loadMoreButtonText="Load more Top Picks"
         render={(homeItem) => (
           <TopicPickHomeItemView key={homeItem.id} homeItem={homeItem} />
         )}
@@ -165,14 +193,23 @@ const QuickLinksHomeSection = (props: HomeSectionProps): JSX.Element => {
       css={{
         width: '100%',
         gap: '20px',
+        bg: '#3D3D3D',
+        py: '30px',
+        px: '20px',
+        borderRadius: '5px',
       }}
     >
       <SpanBox
         css={{
           fontFamily: '$inter',
-          fontSize: '16px',
+          fontSize: '12px',
           fontWeight: '600',
-          color: '$readerText',
+          textTransform: 'uppercase',
+          color: '$ctaBlue',
+          bg: '#007AFF10',
+          px: '10px',
+          py: '5px',
+          borderRadius: '5px',
         }}
       >
         {props.homeSection.title}
@@ -279,9 +316,9 @@ const TimeAgo = (props: HomeItemViewProps): JSX.Element => {
       alignment="center"
       css={{
         fontSize: '12px',
-        fontWeight: 'normal',
+        fontWeight: 'medium',
         fontFamily: '$inter',
-        color: '$readerContrast',
+        color: '$readerTextSubtle',
       }}
     >
       {timeAgo(props.homeItem.date)}
@@ -299,7 +336,13 @@ const Title = (props: HomeItemViewProps): JSX.Element => {
         lineHeight: '20px',
         fontWeight: '600',
         fontFamily: '$inter',
-        color: '$readerText',
+        color: 'white',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        wordBreak: 'break-word',
+        display: '-webkit-box',
+        '-webkit-line-clamp': '3',
+        '-webkit-box-orient': 'vertical',
       }}
     >
       {props.homeItem.title}
@@ -307,6 +350,31 @@ const Title = (props: HomeItemViewProps): JSX.Element => {
   )
 }
 
+type PreviewContentProps = {
+  previewContent?: string
+  maxLines?: string
+}
+
+const PreviewContent = (props: PreviewContentProps): JSX.Element => {
+  return (
+    <SpanBox
+      css={{
+        fontFamily: '$inter',
+        fontSize: '14px',
+        lineHeight: '28px',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        wordBreak: 'break-word',
+        display: '-webkit-box',
+        '-webkit-line-clamp': props.maxLines ?? '3',
+        '-webkit-box-orient': 'vertical',
+      }}
+    >
+      {props.previewContent ?? ''}
+    </SpanBox>
+  )
+}
+
 const JustAddedItemView = (props: HomeItemViewProps): JSX.Element => {
   const router = useRouter()
 
@@ -349,10 +417,12 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => {
     <VStack
       css={{
         width: '100%',
-        padding: '20px',
+        p: '0px',
+        pt: '35px',
+
         borderRadius: '5px',
         '&:hover': {
-          bg: '$thBackground',
+          bg: '#3D3D3D',
           borderRadius: '0px',
         },
       }}
@@ -363,8 +433,9 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => {
           router.push(props.homeItem.url)
         }
       }}
+      alignment="start"
     >
-      <HStack css={{ width: '100%', gap: '5px' }}>
+      <HStack css={{ width: '100%', gap: '5px', px: '20px' }}>
         <VStack css={{ gap: '15px' }}>
           <HStack
             distribution="start"
@@ -390,28 +461,30 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => {
           )}
         </SpanBox>
       </HStack>
-      <SpanBox
-        css={{ fontFamily: '$inter', fontSize: '13px', lineHeight: '23px' }}
-      >
-        {props.homeItem.previewContent}
+      <SpanBox css={{ px: '20px' }}>
+        <PreviewContent
+          previewContent={props.homeItem.previewContent}
+          maxLines="6"
+        />
       </SpanBox>
-      <HStack css={{ gap: '6px', mt: '20px' }}>
-        <Button style="ghost">
+      <HStack css={{ gap: '10px', my: '15px', px: '20px' }}>
+        <Button style="homeAction">
           <AddToLibraryActionIcon />
         </Button>
-        <Button style="ghost">
+        <Button style="homeAction">
           <CommentActionIcon />
         </Button>
-        <Button style="ghost">
+        <Button style="homeAction">
           <ShareActionIcon />
         </Button>
-        <Button style="ghost">
+        <Button style="homeAction">
           <ArchiveActionIcon />
         </Button>
-        <Button style="ghost">
+        <Button style="homeAction">
           <RemoveActionIcon />
         </Button>
       </HStack>
+      <Box css={{ mt: '15px', width: '100%', height: '1px', bg: '#3D3D3D' }} />
     </VStack>
   )
 }
@@ -423,11 +496,13 @@ const QuickLinkHomeItemView = (props: HomeItemViewProps): JSX.Element => {
     <VStack
       css={{
         width: '100%',
-        padding: '10px',
+        px: '10px',
+        py: '10px',
+        gap: '2px',
         borderRadius: '5px',
         '&:hover': {
-          bg: '$thBackground',
-          borderRadius: '0px',
+          bg: '$readerBg',
+          cursor: 'pointer',
         },
       }}
       onClick={(event) => {
@@ -440,6 +515,10 @@ const QuickLinkHomeItemView = (props: HomeItemViewProps): JSX.Element => {
     >
       <TimeAgo homeItem={props.homeItem} />
       <Title homeItem={props.homeItem} />
+      <PreviewContent
+        previewContent={props.homeItem.previewContent}
+        maxLines="2"
+      />
     </VStack>
   )
 }
@@ -573,3 +652,144 @@ const SubscriptionSourceHoverContent = (
     </VStack>
   )
 }
+
+// const SiteSourceHoverContent = (
+//   props: SourceHoverContentProps
+// ): JSX.Element => {
+//   const sendHomeFeedback = useCallback(
+//     async (feedbackType: SendHomeFeedbackType) => {
+//       const feedback: SendHomeFeedbackInput = {
+//         feedbackType,
+//       }
+//       feedback.site = props.source.name
+//       const result = await sendHomeFeedbackMutation(feedback)
+//       if (result) {
+//         showSuccessToast('Feedback sent')
+//       } else {
+//         showErrorToast('Error sending feedback')
+//       }
+//     },
+//     [props]
+//   )
+
+//   return (
+//     <VStack
+//       alignment="start"
+//       distribution="start"
+//       css={{
+//         width: '240px',
+//         height: '100px',
+//         bg: '$thBackground2',
+//         borderRadius: '10px',
+//         padding: '15px',
+//         gap: '10px',
+//         boxShadow: theme.shadows.cardBoxShadow.toString(),
+//       }}
+//     >
+//       <HStack
+//         distribution="start"
+//         alignment="center"
+//         css={{ width: '100%', gap: '10px' }}
+//       >
+//         {props.source.icon && (
+//           <SiteIcon
+//             src={props.source.icon}
+//             alt={props.source.name}
+//             size="large"
+//           />
+//         )}
+//         <SpanBox
+//           css={{
+//             fontFamily: '$inter',
+//             fontWeight: '500',
+//             fontSize: '14px',
+//           }}
+//         >
+//           {props.source.name}
+//         </SpanBox>
+//       </HStack>
+//       {/* <SpanBox
+//         css={{
+//           fontFamily: '$inter',
+//           fontSize: '13px',
+//           color: '$thTextSubtle4',
+//         }}
+//       >
+//         {subscription ? <>{subscription.description}</> : <></>}
+//       </SpanBox> */}
+//       <FeedbackView sendFeedback={sendHomeFeedback} />
+//     </VStack>
+//   )
+// }
+
+type FeedbackViewProps = {
+  sendFeedback: (type: SendHomeFeedbackType) => void
+}
+
+const FeedbackView = (props: FeedbackViewProps): JSX.Element => {
+  return (
+    <HStack css={{ ml: 'auto', mt: 'auto', gap: '5px' }}>
+      <Button
+        style="plainIcon"
+        onClick={(event) => {
+          props.sendFeedback('MORE')
+          event.preventDefault()
+          event.stopPropagation()
+        }}
+      >
+        <ThumbsUp weight="fill" />
+      </Button>
+      <Button
+        style="plainIcon"
+        onClick={(event) => {
+          props.sendFeedback('LESS')
+          event.preventDefault()
+          event.stopPropagation()
+        }}
+      >
+        <ThumbsDown weight="fill" />
+      </Button>
+    </HStack>
+  )
+}
+
+type HeaderProps = {
+  toggleMenu: () => void
+}
+
+const Header = (props: HeaderProps): JSX.Element => {
+  const small = false
+
+  return (
+    <VStack
+      alignment="start"
+      distribution="start"
+      css={{
+        zIndex: 5,
+        position: 'fixed',
+        left: '15px',
+        top: '15px',
+        height: small ? '60px' : DEFAULT_HEADER_HEIGHT,
+        transition: 'height 0.5s',
+        '@lgDown': { px: '20px' },
+        '@mdDown': {
+          px: '10px',
+          left: '0px',
+          right: '0',
+        },
+      }}
+    >
+      <VStack alignment="center" distribution="center">
+        <Button
+          style="plainIcon"
+          onClick={(event) => {
+            props.toggleMenu()
+            event.preventDefault()
+          }}
+        >
+          <List size="25" color={theme.colors.readerTextSubtle.toString()} />
+        </Button>
+      </VStack>
+    </VStack>
+  )
+}