diff --git a/packages/api/src/utils/search.ts b/packages/api/src/utils/search.ts
index b98ff016c..15fd1f92c 100644
--- a/packages/api/src/utils/search.ts
+++ b/packages/api/src/utils/search.ts
@@ -334,6 +334,7 @@ export const parseSearchQuery = (query: string | undefined): SearchFilter => {
       'includes',
       'recommendedBy',
       'no',
+      'mode',
     ],
     tokenize: true,
   })
@@ -424,6 +425,9 @@ export const parseSearchQuery = (query: string | undefined): SearchFilter => {
           noFilter && result.noFilters.push(noFilter)
           break
         }
+        case 'mode':
+          // mode is ignored and used only by the frontend
+          break
       }
     }
   }
diff --git a/packages/appreader/src/index.jsx b/packages/appreader/src/index.jsx
index 18aba5c8b..3f0c815cd 100644
--- a/packages/appreader/src/index.jsx
+++ b/packages/appreader/src/index.jsx
@@ -84,7 +84,7 @@ const App = () => {
             margin={window.margin}
             maxWidthPercentage={window.maxWidthPercentage}
             lineHeight={window.lineHeight}
-            highContrastFont={window.prefersHighContrastFont ?? true}
+            highContrastText={window.prefersHighContrastFont ?? true}
             articleMutations={{
               createHighlightMutation: (input) =>
                 mutation('createHighlight', input),
diff --git a/packages/web/components/elements/Avatar.tsx b/packages/web/components/elements/Avatar.tsx
index 50c47fc12..447dbb4b2 100644
--- a/packages/web/components/elements/Avatar.tsx
+++ b/packages/web/components/elements/Avatar.tsx
@@ -6,7 +6,6 @@ type AvatarProps = {
   height: string
   fallbackText: string
   tooltip?: string
-  noFade?: boolean
 }
 
 export function Avatar(props: AvatarProps): JSX.Element {
@@ -19,10 +18,6 @@ export function Avatar(props: AvatarProps): JSX.Element {
         borderRadius: '50%',
       }}
     >
-      <StyledImage
-        src={props.imageURL}
-        css={{ opacity: props.noFade ? 'unset' : '48%' }}
-      />
       <StyledFallback>{props.fallbackText}</StyledFallback>
     </StyledAvatar>
   )
@@ -35,17 +30,6 @@ const StyledAvatar = styled(Root, {
   verticalAlign: 'middle',
   overflow: 'hidden',
   userSelect: 'none',
-  border: '1px solid $grayBorder',
-})
-
-const StyledImage = styled(Image, {
-  width: '100%',
-  height: '100%',
-  objectFit: 'cover',
-
-  '&:hover': {
-    opacity: '100%',
-  },
 })
 
 const StyledFallback = styled(Fallback, {
@@ -54,8 +38,9 @@ const StyledFallback = styled(Fallback, {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  fontSize: '$2',
-  fontWeight: 700,
-  backgroundColor: '$avatarBg',
+  fontSize: '15px',
+  fontWeight: 600,
+  fontFamily: 'Inter',
   color: '$avatarFont',
+  backgroundColor: '$avatarBg',
 })
diff --git a/packages/web/components/elements/AvatarDropdown.tsx b/packages/web/components/elements/AvatarDropdown.tsx
index f369d865a..ec24d0a1f 100644
--- a/packages/web/components/elements/AvatarDropdown.tsx
+++ b/packages/web/components/elements/AvatarDropdown.tsx
@@ -1,20 +1,14 @@
 import { Avatar } from './../elements/Avatar'
-import { AngleDownIcon } from './../tokens/icons/AngleDownIcon'
 import { HStack } from '../elements/LayoutPrimitives'
 
 type AvatarDropdownProps = {
-  profileImageURL?: string
   userInitials: string
 }
 
 export function AvatarDropdown(props: AvatarDropdownProps): JSX.Element {
   return (
     <HStack alignment="center" css={{ gap: '6px' }}>
-      <Avatar
-        imageURL={props.profileImageURL}
-        height='32px'
-        fallbackText={props.userInitials}
-      />
+      <Avatar height="32px" fallbackText={props.userInitials} />
     </HStack>
   )
 }
diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx
index 5c956ba29..43f7bc34c 100644
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@@ -19,16 +19,40 @@ export const Button = styled('button', {
         },
       },
       ctaDarkYellow: {
-        border: 0,
-        fontSize: '14px',
+        border: '1px solid transparent',
+        fontSize: '13px',
         fontWeight: 500,
-        fontStyle: 'normal',
         fontFamily: 'Inter',
-        borderRadius: '8px',
+        borderRadius: '5px',
         cursor: 'pointer',
-        color: '$omnivoreGray',
-        bg: '$omnivoreCtaYellow',
-        p: '10px 13px',
+        color: '#3D3D3D',
+        bg: '#FFEA9F',
+        p: '10px 15px',
+        '&:hover': {
+          bg: '$omnivoreCtaYellow',
+        },
+        '&:focus': {
+          outline: 'none !important',
+          border: '1px solid $omnivoreCtaYellow',
+        },
+      },
+      cancelGeneric: {
+        fontSize: '13px',
+        fontWeight: 500,
+        fontFamily: 'Inter',
+        cursor: 'pointer',
+        color: '#6A6968',
+        borderRadius: '5px',
+        border: '1px solid transparent',
+        p: '10px 15px',
+        bg: 'transparent',
+        '&:hover': {
+          bg: '#EBEBEB',
+        },
+        '&:focus': {
+          outline: 'none !important',
+          border: '1px solid $omnivoreCtaYellow',
+        },
       },
       ctaOutlineYellow: {
         boxSizing: 'border-box',
@@ -65,7 +89,7 @@ export const Button = styled('button', {
         },
         '.ctaButtonIcon': {
           visibility: 'hidden',
-        }
+        },
       },
       ctaGray: {
         border: 0,
@@ -211,7 +235,7 @@ export const Button = styled('button', {
         },
         '&[data-state="selected"]': {
           border: '2px solid #F9D354',
-        }
+        },
       },
     },
   },
@@ -235,6 +259,21 @@ export const IconButton = styled(Button, {
         width: 40,
         height: 40,
       },
+      searchButton: {
+        cursor: 'pointer',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        p: '0px',
+        mr: '5px',
+        width: '28px',
+        height: '28px',
+        color: '#898989',
+        border: 'unset',
+        background: '$thBackground',
+        boxSizing: 'border-box',
+        borderRadius: 6,
+      },
     },
   },
-})
\ No newline at end of file
+})
diff --git a/packages/web/components/elements/CloseButton.tsx b/packages/web/components/elements/CloseButton.tsx
new file mode 100644
index 000000000..439019de6
--- /dev/null
+++ b/packages/web/components/elements/CloseButton.tsx
@@ -0,0 +1,55 @@
+import { X } from 'phosphor-react'
+import { useState } from 'react'
+import { Button } from './Button'
+import { Box } from './LayoutPrimitives'
+
+type CloseButtonProps = {
+  close: () => void
+}
+
+export function CloseButton(props: CloseButtonProps): JSX.Element {
+  const [hover, setHover] = useState(false)
+
+  return (
+    <Box
+      css={{
+        display: 'flex',
+        height: '20px',
+        width: '20px',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '1000px',
+        background: '$thBackground2',
+        '&:hover': {
+          bg: '#898989',
+        },
+      }}
+      onMouseOver={() => setHover(true)}
+      onMouseOut={() => setHover(false)}
+    >
+      <Button
+        css={{
+          cursor: 'pointer',
+          marginLeft: 'auto',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+        style="ghost"
+        onClick={() => {
+          props.close()
+        }}
+      >
+        <X
+          width={10}
+          height={10}
+          weight="bold"
+          color={hover ? '#EBEBEB' : '#898989'}
+          className="xMark"
+        />
+      </Button>
+    </Box>
+  )
+}
diff --git a/packages/web/components/elements/DropdownElements.tsx b/packages/web/components/elements/DropdownElements.tsx
index a3fb5e077..66dd5aa8f 100644
--- a/packages/web/components/elements/DropdownElements.tsx
+++ b/packages/web/components/elements/DropdownElements.tsx
@@ -8,15 +8,15 @@ import {
   Arrow,
   Label,
 } from '@radix-ui/react-dropdown-menu'
-import { PopperContentProps } from '@radix-ui/react-popover';
-import { CSS } from '@stitches/react';
+import { PopperContentProps } from '@radix-ui/react-popover'
+import { CSS } from '@stitches/react'
 import { styled } from './../tokens/stitches.config'
 
-const itemStyles = {
-  fontSize: '16px',
-  fontWeight: '500',
-  py: '12px',
-  px: '24px',
+const StyledItem = styled(Item, {
+  fontSize: '14px',
+  fontWeight: '400',
+  py: '10px',
+  px: '15px',
   borderRadius: 3,
   cursor: 'default',
   color: '$utilityTextDefault',
@@ -25,9 +25,7 @@ const itemStyles = {
     outline: 'none',
     backgroundColor: '$grayBgHover',
   },
-}
-
-const StyledItem = styled(Item, itemStyles)
+})
 
 const DropdownTrigger = styled(Trigger, {
   fontSize: '100%',
@@ -44,7 +42,6 @@ const StyledTriggerItem = styled(TriggerItem, {
     outline: 'none',
     backgroundColor: '$grayBgHover',
   },
-  ...itemStyles,
 })
 
 export const DropdownContent = styled(Content, {
@@ -123,6 +120,7 @@ type DropdownProps = {
   disabled?: boolean
   css?: CSS
   modal?: boolean
+  onOpenChange?: (open: boolean) => void
 }
 
 export const DropdownSeparator = styled(Separator, {
@@ -141,14 +139,21 @@ type DropdownOptionProps = {
 export function DropdownOption(props: DropdownOptionProps): JSX.Element {
   return (
     <>
-      <StyledItem onSelect={props.onSelect}>
+      <StyledItem
+        onSelect={() => {
+          props.onSelect()
+        }}
+        onClick={(event) => event.stopPropagation()}
+      >
         {props.title ?? props.children}
       </StyledItem>
     </>
   )
 }
 
-export function Dropdown(props: DropdownProps & PopperContentProps): JSX.Element {
+export function Dropdown(
+  props: DropdownProps & PopperContentProps
+): JSX.Element {
   const {
     children,
     align,
@@ -159,14 +164,15 @@ export function Dropdown(props: DropdownProps & PopperContentProps): JSX.Element
     sideOffset = 0,
     alignOffset = 0,
     css,
-    modal
+    modal,
+    onOpenChange,
   } = props
   return (
-    <Root modal={modal}>
+    <Root modal={modal} onOpenChange={props.onOpenChange}>
       <DropdownTrigger disabled={disabled}>{triggerElement}</DropdownTrigger>
       <DropdownContent
         css={css}
-        onInteractOutside={(event) => {
+        onInteractOutside={() => {
           // remove focus from dropdown
           ;(document.activeElement as HTMLElement).blur()
         }}
diff --git a/packages/web/components/elements/ExtensionsInstallHelp.tsx b/packages/web/components/elements/ExtensionsInstallHelp.tsx
index 2b10ddd11..5fc36447a 100644
--- a/packages/web/components/elements/ExtensionsInstallHelp.tsx
+++ b/packages/web/components/elements/ExtensionsInstallHelp.tsx
@@ -9,7 +9,6 @@ import { EdgeIcon } from './images/EdgeIcon'
 import { FirefoxIcon } from './images/FirefoxIcon'
 import { SafariIcon } from './images/SafariIcon'
 import Link from 'next/link'
-import { SaveArticleIcon } from './images/SaveArticleIcon'
 
 const icons = {
   'Google Chrome': <ChromeIcon />,
diff --git a/packages/web/components/elements/HighlightNoteTextEditArea.tsx b/packages/web/components/elements/HighlightNoteTextEditArea.tsx
new file mode 100644
index 000000000..7de604a19
--- /dev/null
+++ b/packages/web/components/elements/HighlightNoteTextEditArea.tsx
@@ -0,0 +1,91 @@
+import { useCallback, useState } from 'react'
+import { Highlight } from '../../lib/networking/fragments/highlightFragment'
+import { updateHighlightMutation } from '../../lib/networking/mutations/updateHighlightMutation'
+import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
+import { Button } from './Button'
+import { HStack, VStack } from './LayoutPrimitives'
+import { StyledTextArea } from './StyledTextArea'
+
+type HighlightNoteTextEditAreaProps = {
+  setIsEditing: (editing: boolean) => void
+  highlight: Highlight
+  updateHighlight: (highlight: Highlight) => void
+}
+
+export const HighlightNoteTextEditArea = (
+  props: HighlightNoteTextEditAreaProps
+): JSX.Element => {
+  const [noteContent, setNoteContent] = useState(
+    props.highlight.annotation ?? ''
+  )
+
+  const handleNoteContentChange = useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
+      setNoteContent(event.target.value)
+    },
+    [setNoteContent]
+  )
+
+  return (
+    <VStack css={{ width: '100%' }} key="textEditor">
+      <StyledTextArea
+        css={{
+          my: '10px',
+          minHeight: '200px',
+          borderRadius: '5px',
+          p: '10px',
+          width: '100%',
+          marginTop: '16px',
+          resize: 'vertical',
+          bg: '#EBEBEB',
+          color: '#3D3D3D',
+        }}
+        autoFocus
+        maxLength={4000}
+        value={noteContent}
+        placeholder={'Add your notes...'}
+        onChange={handleNoteContentChange}
+      />
+      <HStack alignment="center" distribution="end" css={{ width: '100%' }}>
+        <Button
+          style="cancelGeneric"
+          css={{ mr: '$2' }}
+          onClick={() => {
+            props.setIsEditing(false)
+            setNoteContent(props.highlight.annotation ?? '')
+          }}
+        >
+          Cancel
+        </Button>
+        <Button
+          style="ctaDarkYellow"
+          onClick={async (e) => {
+            e.preventDefault()
+            try {
+              const result = await updateHighlightMutation({
+                highlightId: props.highlight.id,
+                annotation: noteContent,
+              })
+              console.log('result: ' + result)
+
+              if (!result) {
+                showErrorToast('There was an error updating your highlight.')
+              } else {
+                showSuccessToast('Note saved')
+                props.highlight.annotation = noteContent
+                props.updateHighlight(props.highlight)
+              }
+            } catch (err) {
+              console.log('error updating annoation', err)
+              showErrorToast('There was an error updating your highlight.')
+            }
+
+            props.setIsEditing(false)
+          }}
+        >
+          Save
+        </Button>
+      </HStack>
+    </VStack>
+  )
+}
diff --git a/packages/web/components/elements/InfoLink.tsx b/packages/web/components/elements/InfoLink.tsx
index 5146f1bcf..44c0a7bc2 100644
--- a/packages/web/components/elements/InfoLink.tsx
+++ b/packages/web/components/elements/InfoLink.tsx
@@ -1,6 +1,5 @@
-import Link from 'next/link'
 import { Info } from 'phosphor-react'
-import { Box, VStack } from '../elements/LayoutPrimitives'
+import { VStack } from '../elements/LayoutPrimitives'
 import { theme } from '../tokens/stitches.config'
 import { TooltipWrapped } from './Tooltip'
 
diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx
index c822e3eb1..67092c383 100644
--- a/packages/web/components/elements/LabelChip.tsx
+++ b/packages/web/components/elements/LabelChip.tsx
@@ -1,4 +1,4 @@
-import { getLuminance, lighten, toHsla } from 'color2k'
+import { getLuminance, lighten } from 'color2k'
 import { useRouter } from 'next/router'
 import { Button } from './Button'
 import { SpanBox } from './LayoutPrimitives'
@@ -40,21 +40,16 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
       <SpanBox
         css={{
           display: 'inline-table',
-          margin: '4px',
+          margin: '2px',
           borderRadius: '4px',
-          color: isDarkMode ? darkThemeTextColor : lightThemeTextColor,
-          fontSize: '12px',
-          fontWeight: 'bold',
-          padding: '2px 5px 2px 5px',
+          color: lightThemeTextColor,
+          fontSize: '13px',
+          fontWeight: '500',
+          padding: '3px 6px',
           whiteSpace: 'nowrap',
           cursor: 'pointer',
           backgroundClip: 'padding-box',
-          border: isDarkMode
-            ? `1px solid ${darkThemeTextColor}`
-            : `1px solid rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.7)`,
-          backgroundColor: isDarkMode
-            ? `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.08)`
-            : props.color,
+          backgroundColor: props.color,
         }}
       >
         {props.text}
diff --git a/packages/web/components/elements/LabelColorDropdown.tsx b/packages/web/components/elements/LabelColorDropdown.tsx
index 50690c247..763ee7289 100644
--- a/packages/web/components/elements/LabelColorDropdown.tsx
+++ b/packages/web/components/elements/LabelColorDropdown.tsx
@@ -77,8 +77,8 @@ const MainContainer = styled(Box, {
     border: '1px solid $grayBorderHover',
   },
   '@mdDown': {
-    width: '100%'
-  }
+    width: '100%',
+  },
 })
 
 const CustomLabelWrapper = styled(Box, {
@@ -106,8 +106,8 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
   } = props
 
   const isDarkMode = isDarkTheme()
-  const iconColor = isDarkMode ? '#FFFFFF': '#0A0806'
-  const [open, setOpen] = useState<boolean | undefined>(false);
+  const iconColor = isDarkMode ? '#FFFFFF' : '#0A0806'
+  const [open, setOpen] = useState<boolean | undefined>(false)
 
   const handleCustomColorChange = (color: string) => {
     setLabelColorHex({
@@ -118,7 +118,7 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
 
   const handleOpen = (open: boolean) => {
     if (canEdit && open) setOpen(true)
-    else if((isCreateMode && !canEdit) && open) setOpen(true)
+    else if (isCreateMode && !canEdit && open) setOpen(true)
     else setOpen(false)
   }
 
@@ -130,7 +130,7 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
           width: '100%',
           '@md': {
             minWidth: '170px',
-            width: 'auto'
+            width: 'auto',
           },
         }}
       >
diff --git a/packages/web/components/elements/LogoBox.tsx b/packages/web/components/elements/LogoBox.tsx
new file mode 100644
index 000000000..a0afa173d
--- /dev/null
+++ b/packages/web/components/elements/LogoBox.tsx
@@ -0,0 +1,39 @@
+import { LIBRARY_LEFT_MENU_WIDTH } from '../templates/homeFeed/LibraryFilterMenu'
+import { theme } from '../tokens/stitches.config'
+import { OmnivoreFullLogo } from './images/OmnivoreFullLogo'
+import { OmnivoreNameLogo } from './images/OmnivoreNameLogo'
+import { SpanBox } from './LayoutPrimitives'
+
+export function LogoBox(): JSX.Element {
+  return (
+    <>
+      <SpanBox
+        css={{
+          pl: '25px',
+          height: '24px',
+          width: LIBRARY_LEFT_MENU_WIDTH,
+          minWidth: LIBRARY_LEFT_MENU_WIDTH,
+          '@mdDown': {
+            display: 'none',
+          },
+        }}
+      >
+        <OmnivoreFullLogo
+          showTitle={true}
+          color={theme.colors.thHighContrast.toString()}
+        />
+      </SpanBox>
+      <SpanBox
+        css={{
+          ml: '15px',
+          mr: '15px',
+          '@md': {
+            display: 'none',
+          },
+        }}
+      >
+        <OmnivoreNameLogo />
+      </SpanBox>
+    </>
+  )
+}
diff --git a/packages/web/components/elements/MenuTriggerButton.tsx b/packages/web/components/elements/MenuTriggerButton.tsx
new file mode 100644
index 000000000..29a1700c9
--- /dev/null
+++ b/packages/web/components/elements/MenuTriggerButton.tsx
@@ -0,0 +1,57 @@
+import { DotsThreeVertical, X } from 'phosphor-react'
+import { useState } from 'react'
+import { Button } from './Button'
+import { Box, SpanBox } from './LayoutPrimitives'
+
+export function MenuTrigger(): JSX.Element {
+  const [hover, setHover] = useState(false)
+
+  return (
+    <SpanBox
+      css={{
+        display: 'flex',
+        height: '20px',
+        width: '20px',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '1000px',
+        background: '$thBackground2',
+        '&:hover': {
+          bg: '#898989',
+        },
+      }}
+      onMouseOver={() => setHover(true)}
+      onMouseOut={() => setHover(false)}
+    >
+      <DotsThreeVertical
+        size={25}
+        weight="bold"
+        color={hover ? '#EBEBEB' : '#898989'}
+      />
+      {/* color="#ADADAD" />
+      <Button
+        css={{
+          cursor: 'pointer',
+          marginLeft: 'auto',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+        style="ghost"
+        onClick={() => {
+          props.close()
+        }}
+      >
+        <X
+          width={10}
+          height={10}
+          weight="bold"
+          color={hover ? '#EBEBEB' : '#898989'}
+          className="xMark"
+        />
+      </Button> */}
+    </SpanBox>
+  )
+}
diff --git a/packages/web/components/elements/MobileInstallHelp.tsx b/packages/web/components/elements/MobileInstallHelp.tsx
index b57ec2e05..926e6c287 100644
--- a/packages/web/components/elements/MobileInstallHelp.tsx
+++ b/packages/web/components/elements/MobileInstallHelp.tsx
@@ -5,10 +5,9 @@ import {
   DeviceMobileCamera,
 } from 'phosphor-react'
 import { Box, HStack } from '../elements/LayoutPrimitives'
-import { StyledText, StyledImg, StyledAnchor } from '../elements/StyledText'
+import { StyledText, StyledAnchor } from '../elements/StyledText'
 import { TooltipWrapped } from './Tooltip'
 import Link from 'next/link'
-import { InstallationIcon } from './images/InstallationIcon'
 
 const TooltipStyle = {
   backgroundColor: '#F9D354',
diff --git a/packages/web/components/elements/ModalPrimitives.tsx b/packages/web/components/elements/ModalPrimitives.tsx
index a9c0975c3..ad929112a 100644
--- a/packages/web/components/elements/ModalPrimitives.tsx
+++ b/packages/web/components/elements/ModalPrimitives.tsx
@@ -2,7 +2,8 @@ import { Root, Overlay, Content } from '@radix-ui/react-dialog'
 import { X } from 'phosphor-react'
 import { styled, keyframes, theme } from '../tokens/stitches.config'
 import { Button } from './Button'
-import { HStack } from './LayoutPrimitives'
+import { CloseButton } from './CloseButton'
+import { HStack, SpanBox } from './LayoutPrimitives'
 import { StyledText } from './StyledText'
 
 export const ModalRoot = styled(Root, {})
@@ -17,6 +18,7 @@ export const ModalOverlay = styled(Overlay, {
   width: '100vw',
   height: '100vh',
   position: 'fixed',
+  zIndex: 10,
   inset: 0,
   '@media (prefers-reduced-motion: no-preference)': {
     animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
@@ -29,7 +31,6 @@ const Modal = styled(Content, {
   boxShadow: theme.shadows.cardBoxShadow.toString(),
   position: 'fixed',
   '&:focus': { outline: 'none' },
-  zIndex: '1',
 })
 
 export const ModalContent = styled(Modal, {
@@ -56,18 +57,12 @@ export const ModalTitleBar = (props: ModalTitleBarProps) => {
     <HStack
       distribution="between"
       alignment="center"
-      css={{ height: '68px', width: '100%' }}
+      css={{ height: '50px', width: '100%' }}
     >
       <StyledText style="modalHeadline">{props.title}</StyledText>
-      <Button
-        css={{ ml: 'auto' }}
-        style="ghost"
-        onClick={() => {
-          props.onOpenChange(false)
-        }}
-      >
-        <X size={24} color={theme.colors.textNonessential.toString()} />
-      </Button>
+      <SpanBox css={{ ml: 'auto' }}>
+        <CloseButton close={() => props.onOpenChange(false)} />
+      </SpanBox>
     </HStack>
   )
 }
@@ -95,7 +90,7 @@ export const ModalButtonBar = (props: ModalButtonBarProps) => {
       }}
     >
       <Button
-        style={'ctaOutlineYellow'}
+        style={'cancelGeneric'}
         type="button"
         onClick={(event) => {
           event.preventDefault()
diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx
index d8ec66950..69858fe21 100644
--- a/packages/web/components/elements/StyledText.tsx
+++ b/packages/web/components/elements/StyledText.tsx
@@ -67,9 +67,10 @@ const textVariants = {
       margin: 0,
     },
     modalHeadline: {
-      fontWeight: '500',
-      fontSize: '24px',
-      lineHeight: '1',
+      fontWeight: '600',
+      fontFamily: '$display',
+      fontSize: '20px',
+      lineHeight: '20px',
       color: '$grayText',
       margin: 0,
     },
@@ -178,6 +179,13 @@ const textVariants = {
       fontWeight: 'bold',
       color: 'white',
     },
+    displaySettingsLabel: {
+      fontFamily: '$display',
+      fontWeight: '500',
+      fontSize: '12px',
+      lineHeight: '20px',
+      color: '$thTextSubtle2',
+    },
     error: {
       color: '$error',
       fontSize: '$2',
diff --git a/packages/web/components/elements/TickedRangeSlider.tsx b/packages/web/components/elements/TickedRangeSlider.tsx
index c112d8d73..0b1bafe7a 100644
--- a/packages/web/components/elements/TickedRangeSlider.tsx
+++ b/packages/web/components/elements/TickedRangeSlider.tsx
@@ -1,39 +1,73 @@
-
-
-import { Box, HStack } from './LayoutPrimitives'
-import { styled, theme } from '../tokens/stitches.config'
+import { Box, HStack, SpanBox } from './LayoutPrimitives'
+import { styled } from '../tokens/stitches.config'
+import { Root as Slider, Thumb, Track } from '@radix-ui/react-slider'
+import { DropdownSeparator } from './DropdownElements'
 
 type TickedRangeSliderProps = {
-  ticks?: number,
-  value: number,
-  onChange: (value: number) => void,
-  min?: number,
-  max?: number,
-  step?: number,
+  ticks?: number
+  value: number
+  onChange: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
 }
 
-const Tick = styled(Box, {
-  background: theme.colors.grayBorderHover,
-  width: 2,
-  height: 8,
+const StyledSlider = styled(Slider, {
+  display: 'flex',
+  alignItems: 'center',
+
+  '.SliderTrack': {
+    display: 'flex',
+    justifyContent: 'center',
+    margin: '0px',
+    height: '8px',
+    width: '225px',
+    borderRadius: '10px',
+    backgroundColor: '#F2F2F2',
+  },
+  '.SliderThumb': {
+    display: 'block',
+    width: '20px',
+    height: '20px',
+    borderRadius: '50%',
+    border: '4px solid white',
+    backgroundColor: '#FFD234',
+    boxShadow: '0px 0px 20px rgba(19, 56, 77, 0.2)',
+  },
 })
 
 export function TickedRangeSlider({
-    ticks = 8,
-    min = 10,
-    max = 28,
-    step = 1,
-    value,
-    onChange,
-  } : TickedRangeSliderProps
-): JSX.Element {
-
+  min = 10,
+  max = 28,
+  step = 1,
+  value,
+  onChange,
+}: TickedRangeSliderProps): JSX.Element {
   return (
-    <Box css={{zIndex: 2}}>
-      <input onChange={(e) => onChange(e.target.value as any)} value={value} type="range" min={min} max={max} step={step} className='slider'/>
-      <HStack distribution='between' css={{position: 'relative', bottom: 12.2, left: 2, zIndex: -1}}>
-        {[...Array(ticks)].map((val, idx) => <Tick key={`ticks-${idx}`} />)}
-      </HStack>
-    </Box>
+    <HStack
+      alignment="center"
+      css={{
+        width: '225px',
+        height: '20px',
+        position: 'relative',
+      }}
+    >
+      <StyledSlider
+        max={max}
+        min={min}
+        step={step}
+        value={[value]}
+        onValueChange={(value) => {
+          if (value.length) {
+            onChange(value[0])
+          }
+        }}
+      >
+        <Track className="SliderTrack">
+          <Box css={{ bg: '#CECECE', width: '2.5px', height: '100%' }} />
+        </Track>
+        <Thumb className="SliderThumb" />
+      </StyledSlider>
+    </HStack>
   )
-}
\ No newline at end of file
+}
diff --git a/packages/web/components/elements/images/GridSelectorIcon.tsx b/packages/web/components/elements/images/GridSelectorIcon.tsx
new file mode 100644
index 000000000..65eb8a1d1
--- /dev/null
+++ b/packages/web/components/elements/images/GridSelectorIcon.tsx
@@ -0,0 +1,38 @@
+import { config } from '../../tokens/stitches.config'
+
+export type GridSelectorIconProps = {
+  color?: string
+}
+
+export function GridSelectorIcon(props: GridSelectorIconProps): JSX.Element {
+  const fillColor = props.color || config.theme.colors.graySolid
+
+  return (
+    <svg
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g>
+        <path
+          d="M8.32487 0.170105H1.6582C0.967847 0.170105 0.408203 0.729749 0.408203 1.4201V8.08677C0.408203 8.77713 0.967847 9.33677 1.6582 9.33677H8.32487C9.01523 9.33677 9.57487 8.77713 9.57487 8.08677V1.4201C9.57487 0.729749 9.01523 0.170105 8.32487 0.170105Z"
+          fill={fillColor}
+        />
+        <path
+          d="M19.1582 0.170105H12.4915C11.8012 0.170105 11.2415 0.729749 11.2415 1.4201V8.08677C11.2415 8.77713 11.8012 9.33677 12.4915 9.33677H19.1582C19.8486 9.33677 20.4082 8.77713 20.4082 8.08677V1.4201C20.4082 0.729749 19.8486 0.170105 19.1582 0.170105Z"
+          fill={fillColor}
+        />
+        <path
+          d="M8.32487 11.0034H1.6582C0.967847 11.0034 0.408203 11.5631 0.408203 12.2534V18.9201C0.408203 19.6105 0.967847 20.1701 1.6582 20.1701H8.32487C9.01523 20.1701 9.57487 19.6105 9.57487 18.9201V12.2534C9.57487 11.5631 9.01523 11.0034 8.32487 11.0034Z"
+          fill={fillColor}
+        />
+        <path
+          d="M19.1582 11.0034H12.4915C11.8012 11.0034 11.2415 11.5631 11.2415 12.2534V18.9201C11.2415 19.6105 11.8012 20.1701 12.4915 20.1701H19.1582C19.8486 20.1701 20.4082 19.6105 20.4082 18.9201V12.2534C20.4082 11.5631 19.8486 11.0034 19.1582 11.0034Z"
+          fill={fillColor}
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/packages/web/components/elements/images/LineHeightDecreaseIcon.tsx b/packages/web/components/elements/images/LineHeightDecreaseIcon.tsx
new file mode 100644
index 000000000..ee13ad7f6
--- /dev/null
+++ b/packages/web/components/elements/images/LineHeightDecreaseIcon.tsx
@@ -0,0 +1,60 @@
+type LineHeightDecreaseIconProps = {
+  strokeColor: string
+}
+
+export function LineHeightDecreaseIcon(
+  props: LineHeightDecreaseIconProps
+): JSX.Element {
+  return (
+    <svg
+      width="23"
+      height="14"
+      viewBox="0 0 23 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.2728 4.04077L21.8195 4.04077"
+        stroke="#969696"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.2728 6.92456L21.8195 6.92456"
+        stroke="#969696"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.2728 9.80811L21.8195 9.80811"
+        stroke="#969696"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.20044 2.69069L3.27599 1.15112L1.35153 2.69069"
+        stroke="#969696"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.20044 11.1582L3.27599 12.6978L1.35153 11.1582"
+        stroke="#969696"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.276 1.15112L3.276 12.6978"
+        stroke="#969696"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
diff --git a/packages/web/components/elements/images/LineHeightIncreaseIconProps.tsx b/packages/web/components/elements/images/LineHeightIncreaseIconProps.tsx
new file mode 100644
index 000000000..3cd42ca24
--- /dev/null
+++ b/packages/web/components/elements/images/LineHeightIncreaseIconProps.tsx
@@ -0,0 +1,60 @@
+type LineHeightIncreaseIconProps = {
+  strokeColor: string
+}
+
+export function LineHeightIncreaseIcon(
+  props: LineHeightIncreaseIconProps
+): JSX.Element {
+  return (
+    <svg
+      width="23"
+      height="14"
+      viewBox="0 0 23 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.2728 2.04089L21.8195 2.04089"
+        stroke="#969696"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.2728 6.92468L21.8195 6.92468"
+        stroke="#969696"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.2728 11.8081L21.8195 11.8081"
+        stroke="#969696"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.20044 2.69069L3.27599 1.15112L1.35153 2.69069"
+        stroke="#969696"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.20044 11.1583L3.27599 12.6979L1.35153 11.1583"
+        stroke="#969696"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.276 1.15112L3.276 12.6978"
+        stroke="#969696"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
diff --git a/packages/web/components/elements/images/ListSelectorIcon.tsx b/packages/web/components/elements/images/ListSelectorIcon.tsx
new file mode 100644
index 000000000..5702b29f2
--- /dev/null
+++ b/packages/web/components/elements/images/ListSelectorIcon.tsx
@@ -0,0 +1,34 @@
+import { config } from '../../tokens/stitches.config'
+
+export type ListSelectorIconProps = {
+  color?: string
+}
+
+export function ListSelectorIcon(props: ListSelectorIconProps): JSX.Element {
+  const fillColor = props.color || config.theme.colors.graySolid
+
+  return (
+    <svg
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g>
+        <path
+          d="M19.1582 0.795105H1.6582C0.967847 0.795105 0.408203 1.35475 0.408203 2.0451V4.12844C0.408203 4.81879 0.967847 5.37844 1.6582 5.37844H19.1582C19.8486 5.37844 20.4082 4.81879 20.4082 4.12844V2.0451C20.4082 1.35475 19.8486 0.795105 19.1582 0.795105Z"
+          fill={fillColor}
+        />
+        <path
+          d="M19.1582 7.87845H1.6582C0.967847 7.87845 0.408203 8.43809 0.408203 9.12845V11.2118C0.408203 11.9021 0.967847 12.4618 1.6582 12.4618H19.1582C19.8486 12.4618 20.4082 11.9021 20.4082 11.2118V9.12845C20.4082 8.43809 19.8486 7.87845 19.1582 7.87845Z"
+          fill={fillColor}
+        />
+        <path
+          d="M19.1582 14.9618H1.6582C0.967847 14.9618 0.408203 15.5214 0.408203 16.2118V18.2951C0.408203 18.9855 0.967847 19.5451 1.6582 19.5451H19.1582C19.8486 19.5451 20.4082 18.9855 20.4082 18.2951V16.2118C20.4082 15.5214 19.8486 14.9618 19.1582 14.9618Z"
+          fill={fillColor}
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/packages/web/components/elements/images/OmnivoreFullLogo.tsx b/packages/web/components/elements/images/OmnivoreFullLogo.tsx
new file mode 100644
index 000000000..7dc9d805a
--- /dev/null
+++ b/packages/web/components/elements/images/OmnivoreFullLogo.tsx
@@ -0,0 +1,72 @@
+import Link from 'next/link'
+import { config } from '../../tokens/stitches.config'
+
+export type OmnivoreFullLogoProps = {
+  color?: string
+  href?: string
+  showTitle?: boolean
+}
+
+export function OmnivoreFullLogo(props: OmnivoreFullLogoProps): JSX.Element {
+  const fillColor = props.color || config.theme.colors.graySolid
+  const href = props.href || '/home'
+
+  return (
+    <Link passHref href={href}>
+      <a
+        style={{
+          textDecoration: 'none',
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <svg
+          width="129"
+          height="26"
+          viewBox="0 0 129 26"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M43.4131 13.2862C43.4131 9.75626 41.2214 7.74365 38.3606 7.74365C35.4839 7.74365 33.308 9.75626 33.308 13.2862C33.308 16.8004 35.4839 18.8288 38.3606 18.8288C41.2214 18.8288 43.4131 16.8162 43.4131 13.2862ZM41.1002 13.2862C41.1002 15.5728 40.0149 16.8109 38.3606 16.8109C36.701 16.8109 35.6209 15.5728 35.6209 13.2862C35.6209 10.9996 36.701 9.76153 38.3606 9.76153C40.0149 9.76153 41.1002 10.9996 41.1002 13.2862Z"
+            fill={fillColor}
+          />
+          <path
+            d="M47.3285 7.89117V18.6813H49.5413V11.6319H49.6309L52.4232 18.6286H53.9301L56.7224 11.6582H56.812V18.6813H59.0248V7.89117H56.2114L53.2399 15.1408H53.1134L50.1419 7.89117H47.3285Z"
+            fill={fillColor}
+          />
+          <path
+            d="M72.1549 7.89117H69.8842V14.6771H69.7893L65.1319 7.89117H63.1298V18.6813H65.4111V11.89H65.4901L70.1845 18.6813H72.1549V7.89117Z"
+            fill={fillColor}
+          />
+          <path
+            d="M78.5465 7.89117H76.2652V18.6813H78.5465V7.89117Z"
+            fill={fillColor}
+          />
+          <path
+            d="M84.5983 7.89117H82.0641L85.789 18.6813H88.7289L92.4485 7.89117H89.9196L87.3063 16.0891H87.2062L84.5983 7.89117Z"
+            fill={fillColor}
+          />
+          <path
+            d="M105.28 13.2862C105.28 9.75626 103.088 7.74365 100.227 7.74365C97.3504 7.74365 95.1745 9.75626 95.1745 13.2862C95.1745 16.8004 97.3504 18.8288 100.227 18.8288C103.088 18.8288 105.28 16.8162 105.28 13.2862ZM102.967 13.2862C102.967 15.5728 101.881 16.8109 100.227 16.8109C98.5675 16.8109 97.4874 15.5728 97.4874 13.2862C97.4874 10.9996 98.5675 9.76153 100.227 9.76153C101.881 9.76153 102.967 10.9996 102.967 13.2862Z"
+            fill={fillColor}
+          />
+          <path
+            d="M109.195 18.6813H111.476V14.8563H113.141L115.185 18.6813H117.704L115.412 14.4875C116.64 13.9606 117.319 12.8911 117.319 11.4159C117.319 9.27155 115.902 7.89117 113.452 7.89117H109.195V18.6813ZM111.476 13.0228V9.75626H113.015C114.332 9.75626 114.969 10.3411 114.969 11.4159C114.969 12.4854 114.332 13.0228 113.025 13.0228H111.476Z"
+            fill={fillColor}
+          />
+          <path
+            d="M121.157 18.6813H128.449V16.8004H123.438V14.224H128.053V12.3431H123.438V9.77206H128.427V7.89117H121.157V18.6813Z"
+            fill={fillColor}
+          />
+          <path
+            d="M8.42285 17.9061V10.5447C8.42285 9.91527 9.16173 9.55951 9.65432 9.99737L11.9257 13.3087C12.3909 13.6918 13.0477 13.6918 13.5129 13.3087L15.7296 10.0247C16.2222 9.61424 16.961 9.94263 16.961 10.5721V14.458C16.961 16.3463 18.2199 17.8788 20.1081 17.8788H20.1629C21.7775 17.8788 23.1731 16.7841 23.5563 15.2243C23.7478 14.4033 23.912 13.5549 23.912 12.8982C23.8847 6.46715 18.4388 1.596 11.9257 2.03385C6.39776 2.41698 1.9371 6.87764 1.55397 12.4056C1.11612 18.9187 6.26093 24.3645 12.7193 24.3645"
+            stroke={fillColor}
+            strokeWidth="2.18182"
+            strokeMiterlimit="10"
+          />
+        </svg>
+      </a>
+    </Link>
+  )
+}
diff --git a/packages/web/components/elements/images/OmnivoreNameLogo.tsx b/packages/web/components/elements/images/OmnivoreNameLogo.tsx
index 0f3e25328..06e371390 100644
--- a/packages/web/components/elements/images/OmnivoreNameLogo.tsx
+++ b/packages/web/components/elements/images/OmnivoreNameLogo.tsx
@@ -20,6 +20,25 @@ type OmnivoreLogoProps = {
   strokeColor: string
 }
 
+export function OmnivoreSmallLogo(props: OmnivoreLogoProps): JSX.Element {
+  return (
+    <svg
+      width="18"
+      height="19"
+      viewBox="0 0 18 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.82329 12.9213V7.47867C5.82329 7.01332 6.36957 6.75029 6.73377 7.07402L8.4131 9.5222C8.75706 9.80546 9.24265 9.80546 9.58661 9.5222L11.2255 7.09425C11.5897 6.79075 12.136 7.03355 12.136 7.49891V10.372C12.136 11.768 13.0667 12.9011 14.4627 12.9011H14.5032C15.6969 12.9011 16.7288 12.0918 17.0121 10.9385C17.1537 10.3315 17.2751 9.70429 17.2751 9.2187C17.2549 4.46397 13.2285 0.862512 8.4131 1.18624C4.32605 1.4695 1.02808 4.76746 0.744823 8.85451C0.421097 13.6699 4.22489 17.6963 8.99985 17.6963"
+        stroke={props.strokeColor}
+        strokeWidth="1.4"
+        strokeMiterlimit="10"
+      />
+    </svg>
+  )
+}
+
 export function OmnivoreLogoIcon(props: OmnivoreLogoProps): JSX.Element {
   return (
     <svg
@@ -42,6 +61,7 @@ export function OmnivoreLogoIcon(props: OmnivoreLogoProps): JSX.Element {
 export type OmnivoreNameLogoProps = {
   color?: string
   href?: string
+  showTitle?: boolean
 }
 
 export function OmnivoreNameLogo(props: OmnivoreNameLogoProps): JSX.Element {
@@ -50,9 +70,22 @@ export function OmnivoreNameLogo(props: OmnivoreNameLogoProps): JSX.Element {
 
   return (
     <Link passHref href={href}>
-      <a style={{ textDecoration: 'none', display: 'flex', alignItems: 'center' }}>
+      <a
+        style={{
+          textDecoration: 'none',
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
         <OmnivoreLogoIcon size={27} strokeColor={fillColor}></OmnivoreLogoIcon>
-        {/* <StyledText style="logoTitle" css={{ color: fillColor, paddingLeft: '12px' }}>Omnivore</StyledText> */}
+        {props.showTitle && (
+          <StyledText
+            style="logoTitle"
+            css={{ color: fillColor, paddingLeft: '12px' }}
+          >
+            Omnivore
+          </StyledText>
+        )}
       </a>
     </Link>
   )
diff --git a/packages/web/components/elements/images/PenWithColorIcon.tsx b/packages/web/components/elements/images/PenWithColorIcon.tsx
index b3c8a75d1..6d7158908 100644
--- a/packages/web/components/elements/images/PenWithColorIcon.tsx
+++ b/packages/web/components/elements/images/PenWithColorIcon.tsx
@@ -1,16 +1,4 @@
-import { config } from '../../tokens/stitches.config'
-
-type PenWithColorProps = {
-  color?: string
-  width?: number
-  height?: number
-}
-
-export function PenWithColorIcon({
-  color,
-  height,
-  width,
-}: PenWithColorProps): JSX.Element {
+export function PenWithColorIcon(): JSX.Element {
   return (
     <svg
       width="24"
diff --git a/packages/web/components/elements/images/SideBarIcon.tsx b/packages/web/components/elements/images/SideBarIcon.tsx
new file mode 100644
index 000000000..908b3d740
--- /dev/null
+++ b/packages/web/components/elements/images/SideBarIcon.tsx
@@ -0,0 +1,20 @@
+type SideBarProps = {
+  strokeColor: string
+}
+
+export function SideBarIcon(props: SideBarProps): JSX.Element {
+  return (
+    <svg
+      width="19"
+      height="14"
+      viewBox="0 0 19 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.10293 12.2383H7.3014V1.08129H6.10293V12.2383ZM4.62964 3.9129C4.74669 3.9129 4.84847 3.87289 4.93499 3.79286C5.0215 3.70812 5.06476 3.61633 5.06476 3.51747C5.06476 3.40919 5.0215 3.31739 4.93499 3.24207C4.84847 3.16204 4.74669 3.12203 4.62964 3.12203H2.99606C2.87901 3.12203 2.77723 3.16204 2.69071 3.24207C2.6042 3.31739 2.56094 3.40919 2.56094 3.51747C2.56094 3.61633 2.6042 3.70812 2.69071 3.79286C2.77723 3.87289 2.87901 3.9129 2.99606 3.9129H4.62964ZM4.62964 5.7418C4.74669 5.7418 4.84847 5.70179 4.93499 5.62176C5.0215 5.54173 5.06476 5.44758 5.06476 5.3393C5.06476 5.23574 5.0215 5.14629 4.93499 5.07097C4.84847 4.99094 4.74669 4.95093 4.62964 4.95093H2.99606C2.87901 4.95093 2.77723 4.99094 2.69071 5.07097C2.6042 5.14629 2.56094 5.23574 2.56094 5.3393C2.56094 5.44758 2.6042 5.54173 2.69071 5.62176C2.77723 5.70179 2.87901 5.7418 2.99606 5.7418H4.62964ZM4.62964 7.56364C4.74669 7.56364 4.84847 7.52598 4.93499 7.45066C5.0215 7.37063 5.06476 7.27883 5.06476 7.17526C5.06476 7.06699 5.0215 6.97519 4.93499 6.89987C4.84847 6.81984 4.74669 6.77982 4.62964 6.77982H2.99606C2.87901 6.77982 2.77723 6.81984 2.69071 6.89987C2.6042 6.97519 2.56094 7.06699 2.56094 7.17526C2.56094 7.27883 2.6042 7.37063 2.69071 7.45066C2.77723 7.52598 2.87901 7.56364 2.99606 7.56364H4.62964ZM2.68308 13.1562H15.8892C16.6933 13.1562 17.2938 12.9727 17.6907 12.6055C18.0877 12.243 18.2861 11.6969 18.2861 10.9672V2.34528C18.2861 1.6156 18.0877 1.06952 17.6907 0.707038C17.2938 0.339846 16.6933 0.15625 15.8892 0.15625H2.68308C1.8841 0.15625 1.28359 0.339846 0.881553 0.707038C0.484606 1.06952 0.286133 1.6156 0.286133 2.34528V10.9672C0.286133 11.6969 0.484606 12.243 0.881553 12.6055C1.28359 12.9727 1.8841 13.1562 2.68308 13.1562ZM2.69835 12.0194C2.31667 12.0194 2.02405 11.9276 1.82048 11.744C1.61692 11.5557 1.51514 11.2779 1.51514 10.9107V2.40177C1.51514 2.03458 1.61692 1.75918 1.82048 1.57559C2.02405 1.38728 2.31667 1.29313 2.69835 1.29313H15.8739C16.2505 1.29313 16.5406 1.38728 16.7441 1.57559C16.9528 1.75918 17.0571 2.03458 17.0571 2.40177V10.9107C17.0571 11.2779 16.9528 11.5557 16.7441 11.744C16.5406 11.9276 16.2505 12.0194 15.8739 12.0194H2.69835Z"
+        fill="#898989"
+      />
+    </svg>
+  )
+}
diff --git a/packages/web/components/patterns/AnchoredPopover.tsx b/packages/web/components/patterns/AnchoredPopover.tsx
deleted file mode 100644
index ba0fb316e..000000000
--- a/packages/web/components/patterns/AnchoredPopover.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Root, Content, Anchor, Arrow } from '@radix-ui/react-popover'
-import type { ReactNode } from 'react'
-import { styled } from '../tokens/stitches.config'
-
-type AnchoredPopoverProps = {
-  children: ReactNode
-  xAnchorCoordinate: number
-  yAnchorCoordinate: number
-  preventAutoFocus: boolean
-}
-
-export function AnchoredPopover(props: AnchoredPopoverProps): JSX.Element {
-  const StyledAnchor = styled(Anchor, {
-    position: 'absolute',
-    left: props.xAnchorCoordinate,
-    top: props.yAnchorCoordinate,
-  })
-
-  const StyledArrow = styled(Arrow, {
-    fill: '$grayBase',
-  })
-
-  return (
-    <Root defaultOpen modal>
-      <StyledAnchor />
-      <Content
-        onOpenAutoFocus={(event) => {
-          if (props.preventAutoFocus) {
-            event.preventDefault()
-          }
-        }}
-      >
-        {props.children}
-        <StyledArrow />
-      </Content>
-    </Root>
-  )
-}
diff --git a/packages/web/components/patterns/ArticleSubtitle.tsx b/packages/web/components/patterns/ArticleSubtitle.tsx
index c789dd68f..f0933cabe 100644
--- a/packages/web/components/patterns/ArticleSubtitle.tsx
+++ b/packages/web/components/patterns/ArticleSubtitle.tsx
@@ -5,14 +5,13 @@ import { formattedLongDate } from './../../lib/dateFormatting'
 type SubtitleStyle = 'footnote' | 'shareSubtitle'
 
 type ArticleSubtitleProps = {
-  rawDisplayDate: string
   href: string
   author?: string
   style?: SubtitleStyle
   hideButton?: boolean
 }
 
-export function ArticleSubtitle(props: ArticleSubtitleProps): JSX.Element {  
+export function ArticleSubtitle(props: ArticleSubtitleProps): JSX.Element {
   const textStyle = props.style || 'footnote'
   const subtitle = articleSubtitle(props.href, props.author)
 
@@ -20,11 +19,11 @@ export function ArticleSubtitle(props: ArticleSubtitleProps): JSX.Element {
     <Box>
       <StyledText style={textStyle} css={{ wordBreak: 'break-word' }}>
         {subtitle}{' '}
-        {subtitle && (<span style={{ position: 'relative', bottom: 1 }}>• </span>)}{' '}
-        {formattedLongDate(props.rawDisplayDate)}{' '}
+        {subtitle && (
+          <span style={{ position: 'relative', bottom: 1 }}>• </span>
+        )}{' '}
         {!props.hideButton && !shouldHideUrl(props.href) && (
           <>
-            <span style={{ position: 'relative', bottom: 1 }}>• </span>{' '}
             <StyledLink
               href={props.href}
               target="_blank"
@@ -43,6 +42,20 @@ export function ArticleSubtitle(props: ArticleSubtitleProps): JSX.Element {
   )
 }
 
+type ReaderSavedInfoProps = {
+  rawDisplayDate: string
+}
+
+export function ReaderSavedInfo(props: ReaderSavedInfoProps): JSX.Element {
+  return (
+    <Box>
+      <StyledText css={{ wordBreak: 'break-word', fontSize: '15' }}>
+        {formattedLongDate(props.rawDisplayDate)}{' '}
+      </StyledText>
+    </Box>
+  )
+}
+
 function shouldHideUrl(url: string): boolean {
   const origin = new URL(url).origin
   const hideHosts = ['https://storage.googleapis.com', 'https://omnivore.app']
diff --git a/packages/web/components/patterns/CardMenu.tsx b/packages/web/components/patterns/CardMenu.tsx
index 394419baf..d4adea69d 100644
--- a/packages/web/components/patterns/CardMenu.tsx
+++ b/packages/web/components/patterns/CardMenu.tsx
@@ -10,8 +10,6 @@ export type CardMenuDropdownAction =
   | 'archive'
   | 'unarchive'
   | 'delete'
-  | 'share'
-  | 'snooze'
   | 'set-labels'
   | 'showOriginal'
   | 'unsubscribe'
@@ -22,11 +20,15 @@ type CardMenuProps = {
   viewer: UserBasicData
   triggerElement: ReactNode
   actionHandler: (action: CardMenuDropdownAction) => void
+  onOpenChange?: (open: boolean) => void
 }
 
 export function CardMenu(props: CardMenuProps): JSX.Element {
   return (
-    <Dropdown triggerElement={props.triggerElement}>
+    <Dropdown
+      triggerElement={props.triggerElement}
+      onOpenChange={props.onOpenChange}
+    >
       {!props.item.isArchived ? (
         <DropdownOption
           onSelect={() => props.actionHandler('archive')}
@@ -52,20 +54,6 @@ export function CardMenu(props: CardMenuProps): JSX.Element {
         onSelect={() => props.actionHandler('editTitle')}
         title="Edit Metadata"
       />
-      {isVipUser(props.viewer) && (
-        <DropdownOption
-          onSelect={() => {
-            props.actionHandler('snooze')
-          }}
-          title="Snooze"
-        />
-      )}
-      {/* <DropdownOption
-        onSelect={() => {
-          props.actionHandler('share')
-        }}
-        title="Share"
-      /> */}
       {props.item.readingProgressPercent < 98 ? (
         <DropdownOption
           onSelect={() => {
diff --git a/packages/web/components/patterns/DeleteItemConfirmationModal.tsx b/packages/web/components/patterns/DeleteItemConfirmationModal.tsx
index 3a321255c..a5efe5664 100644
--- a/packages/web/components/patterns/DeleteItemConfirmationModal.tsx
+++ b/packages/web/components/patterns/DeleteItemConfirmationModal.tsx
@@ -6,8 +6,6 @@ import {
 import { VStack, HStack } from '../elements/LayoutPrimitives'
 import { Button } from '../elements/Button'
 import { StyledText } from '../elements/StyledText'
-import { useConfirmListener } from '../../lib/keyboardShortcuts/useKeyboardShortcuts'
-import { useEffect, useRef } from 'react'
 
 type ConfirmationModalProps = {
   message?: string
diff --git a/packages/web/components/patterns/HighlightBar.tsx b/packages/web/components/patterns/HighlightBar.tsx
index d06aba400..ee1b16414 100644
--- a/packages/web/components/patterns/HighlightBar.tsx
+++ b/packages/web/components/patterns/HighlightBar.tsx
@@ -1,7 +1,6 @@
 import { isAndroid } from '../../lib/deviceType'
 
 import { styled, theme } from '../tokens/stitches.config'
-import { AnchoredPopover } from '../patterns/AnchoredPopover'
 
 import { StyledText } from '../elements/StyledText'
 import { Button } from '../elements/Button'
diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx
index bd8650781..6141e6962 100644
--- a/packages/web/components/patterns/HighlightView.tsx
+++ b/packages/web/components/patterns/HighlightView.tsx
@@ -12,21 +12,21 @@ type HighlightViewProps = {
   scrollToHighlight?: (arg: string) => void
 }
 
+const StyledQuote = styled(Blockquote, {
+  margin: '0px 0px 0px 0px',
+  fontSize: '18px',
+  lineHeight: '27px',
+  color: '$grayText',
+  padding: '0px 16px',
+  borderLeft: '2px solid $omnivoreCtaYellow',
+})
+
 export function HighlightView(props: HighlightViewProps): JSX.Element {
   const lines = useMemo(
     () => props.highlight.quote.split('\n'),
     [props.highlight.quote]
   )
 
-  const StyledQuote = styled(Blockquote, {
-    margin: '0px 0px 0px 0px',
-    fontSize: '18px',
-    lineHeight: '27px',
-    color: '$grayText',
-    padding: '0px 16px',
-    borderLeft: '2px solid $omnivoreCtaYellow',
-  })
-
   return (
     <VStack css={{ width: '100%', boxSizing: 'border-box' }}>
       <StyledQuote
@@ -49,111 +49,12 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
             </Fragment>
           ))}
         </SpanBox>
-        <Box css={{ display: 'block', pt: '16px' }}>
-          {props.highlight.labels?.map(({ name, color }, index) => (
-            <LabelChip key={index} text={name || ''} color={color} />
-          ))}
-        </Box>
       </StyledQuote>
-    </VStack>
-  )
-}
-
-export function PublicHighlightView(props: HighlightViewProps): JSX.Element {
-  const lines = useMemo(
-    () => props.highlight.quote.split('\n'),
-    [props.highlight.quote]
-  )
-
-  const StyledQuote = styled(Blockquote, {
-    margin: '16px 0px 0px 0px',
-    fontSize: '18px',
-    lineHeight: '1.5',
-    fontFamily: 'Inter',
-    color: '$readerFont',
-  })
-
-  return (
-    <VStack css={{ width: '100%', bg: '$grayBackground', pt: '0px' }}>
-      <StyledQuote>
-        {props.highlight.prefix}
-        <SpanBox
-          css={{
-            bg: '$omnivoreYellow',
-            p: '1px',
-            borderRadius: '2px',
-            color: '#3d3d3d',
-          }}
-        >
-          {lines.map((line: string, index: number) => (
-            <Fragment key={index}>
-              {line}
-              {index !== lines.length - 1 && (
-                <>
-                  <br />
-                  <br />
-                </>
-              )}
-            </Fragment>
-          ))}
-        </SpanBox>
-        {props.highlight.suffix}
-      </StyledQuote>
-    </VStack>
-  )
-}
-
-type HighlightFooterProps = {
-  site: string
-  author?: string
-  title?: string
-  fontSize?: string
-}
-
-export function HighlightFooter(props: HighlightFooterProps): JSX.Element {
-  const fontSize = props.fontSize || '12px'
-
-  return (
-    <VStack
-      alignment="start"
-      css={{ width: '100%', bg: '$grayBackground', pt: '0px', pb: '8px' }}
-    >
-      <StyledText
-        css={{
-          fontSize: fontSize,
-          fontFamily: 'Inter',
-          color: '$omnivoreGray',
-          fontWeight: '400',
-          mb: '0px',
-          p: '0px',
-        }}
-      >
-        From{' '}
-        <SpanBox
-          css={{
-            fontSize: fontSize,
-            color: '$omnivoreOrange',
-            p: '0px',
-            fontWeight: '400',
-            mb: '0px',
-          }}
-        >
-          {props.title}
-          {props.author ? ` — ${props.author}` : null}
-        </SpanBox>
-      </StyledText>
-      <StyledText
-        css={{
-          pt: '0px',
-          mt: '0px',
-          fontSize: '10px',
-          fontFamily: 'Inter',
-          color: '$omnivoreGray',
-          fontWeight: '400',
-        }}
-      >
-        {props.site}
-      </StyledText>
+      <Box css={{ display: 'block', pt: '16px' }}>
+        {props.highlight.labels?.map(({ name, color }, index) => (
+          <LabelChip key={index} text={name || ''} color={color} />
+        ))}
+      </Box>
     </VStack>
   )
 }
diff --git a/packages/web/components/patterns/LibraryCards/CardTypes.tsx b/packages/web/components/patterns/LibraryCards/CardTypes.tsx
index cb45a6119..cf19502e1 100644
--- a/packages/web/components/patterns/LibraryCards/CardTypes.tsx
+++ b/packages/web/components/patterns/LibraryCards/CardTypes.tsx
@@ -11,8 +11,6 @@ export type LinkedItemCardAction =
   | 'delete'
   | 'mark-read'
   | 'mark-unread'
-  | 'share'
-  | 'snooze'
   | 'set-labels'
   | 'unsubscribe'
   | 'update-item'
@@ -21,6 +19,5 @@ export type LinkedItemCardProps = {
   item: LibraryItemNode
   layout: LayoutType
   viewer: UserBasicData
-  originText?: string
   handleAction: (action: LinkedItemCardAction) => void
 }
diff --git a/packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx
deleted file mode 100644
index bb4e73431..000000000
--- a/packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
-import { CoverImage } from '../../elements/CoverImage'
-import { StyledText } from '../../elements/StyledText'
-import { authoredByText } from '../ArticleSubtitle'
-import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
-import { theme } from '../../tokens/stitches.config'
-import { CardMenu } from '../CardMenu'
-import { LabelChip } from '../../elements/LabelChip'
-import { ProgressBar } from '../../elements/ProgressBar'
-import type { LinkedItemCardProps } from './CardTypes'
-
-export function GridLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
-  return (
-    <VStack
-      css={{
-        p: '$2',
-        pr: '8px',
-        height: '100%',
-        width: '100%',
-        maxWidth: '100%',
-        borderRadius: '6px',
-        cursor: 'pointer',
-        wordBreak: 'break-word',
-        overflow: 'clip',
-        border: '1px solid $grayBorder',
-        boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
-        position: 'relative',
-      }}
-      alignment="start"
-      distribution="start"
-      onClick={() => {
-        props.handleAction('showDetail')
-      }}
-    >
-      <Box
-        css={{
-          position: 'absolute',
-          top: '1px',
-          left: '1px',
-          width: 'calc(100% - 2px)',
-          '& > div': {
-            borderRadius: '100vmax 100vmax 0 0',
-          },
-        }}
-      >
-        <ProgressBar
-          fillPercentage={props.item.readingProgressPercent}
-          fillColor={theme.colors.highlight.toString()}
-          backgroundColor="transparent"
-          borderRadius={
-            props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
-          }
-        />
-      </Box>
-      <VStack
-        distribution="start"
-        alignment="start"
-        css={{
-          px: '0px',
-          width: '100%',
-          pl: '$1',
-        }}
-      >
-        <HStack
-          alignment="start"
-          distribution="between"
-          css={{
-            width: '100%',
-            p: '0px',
-            mr: '-12px',
-            mt: '15px',
-            display: 'grid',
-            gridTemplateColumns: '1fr 24px',
-            gridTemplateRows: '1fr',
-          }}
-        >
-          <CardTitle title={props.item.title} />
-          <Box
-            css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
-            onClick={(e) => {
-              // This is here to prevent menu click events from bubbling
-              // up and causing us to "click" on the link item.
-              e.stopPropagation()
-            }}
-          >
-            <CardMenu
-              item={props.item}
-              viewer={props.viewer}
-              triggerElement={
-                <MoreOptionsIcon
-                  size={24}
-                  strokeColor={theme.colors.grayTextContrast.toString()}
-                  orientation="horizontal"
-                />
-              }
-              actionHandler={props.handleAction}
-            />
-          </Box>
-        </HStack>
-        <HStack alignment="start" distribution="between">
-          <StyledText style="caption" css={{ my: '0', mt: '-$2' }}>
-            {props.item.author && (
-              <SpanBox css={{ mr: '8px' }}>
-                {authoredByText(props.item.author)}
-              </SpanBox>
-            )}
-            <SpanBox css={{ textDecorationLine: 'underline' }}>
-              {props.originText}
-            </SpanBox>
-          </StyledText>
-        </HStack>
-      </VStack>
-      <HStack
-        alignment="start"
-        distribution="between"
-        css={{
-          width: '100%',
-          pt: '$2',
-          px: '$1',
-          pr: '12px',
-          mt: '7px',
-          flexGrow: '1',
-        }}
-      >
-        <StyledText
-          css={{
-            m: 0,
-            py: '0px',
-            mr: '$2',
-            fontStyle: 'normal',
-            fontWeight: '400',
-            fontSize: '14px',
-            lineHeight: '125%',
-            color: '$grayTextContrast',
-            flexGrow: '4',
-            overflow: 'hidden',
-            display: '-webkit-box',
-            WebkitLineClamp: 5,
-            WebkitBoxOrient: 'vertical',
-          }}
-          data-testid="listDesc"
-        >
-          {props.item.description}
-        </StyledText>
-        {props.item.image && (
-          <CoverImage
-            src={props.item.image}
-            alt="Link Preview Image"
-            width={135}
-            height={90}
-            css={{ ml: '10px', mb: '8px', borderRadius: '3px' }}
-            onError={(e) => {
-              ;(e.target as HTMLElement).style.display = 'none'
-            }}
-          />
-        )}
-      </HStack>
-      <Box css={{ display: 'block', mt: '8px' }}>
-        {props.item.labels?.map(({ name, color }, index) => (
-          <LabelChip key={index} text={name || ''} color={color} />
-        ))}
-      </Box>
-    </VStack>
-  )
-}
-
-type CardTitleProps = {
-  title: string
-}
-
-function CardTitle(props: CardTitleProps): JSX.Element {
-  return (
-    <StyledText
-      style="listTitle"
-      data-testid="listTitle"
-      css={{
-        mt: '0',
-        mb: '0',
-        fontWeight: '700',
-        textAlign: 'left',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-        width: '100%',
-        overflow: 'hidden',
-      }}
-    >
-      {props.title}
-    </StyledText>
-  )
-}
diff --git a/packages/web/components/patterns/LibraryCards/HighlightItemCard.tsx b/packages/web/components/patterns/LibraryCards/HighlightItemCard.tsx
deleted file mode 100644
index b290a68dd..000000000
--- a/packages/web/components/patterns/LibraryCards/HighlightItemCard.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { styled } from '@stitches/react'
-import { VStack, HStack } from '../../elements/LayoutPrimitives'
-import { StyledMark, StyledText } from '../../elements/StyledText'
-import { LinkedItemCardAction, LinkedItemCardProps } from './CardTypes'
-
-export interface HighlightItemCardProps
-  extends Pick<LinkedItemCardProps, 'item'> {
-  handleAction: (action: LinkedItemCardAction) => void
-}
-
-export const PreviewImage = styled('img', {
-  objectFit: 'cover',
-  cursor: 'pointer',
-})
-
-export function HighlightItemCard(props: HighlightItemCardProps): JSX.Element {
-  return (
-    <VStack
-      css={{
-        p: '$2',
-        height: '100%',
-        width: '100%',
-        borderRadius: '0px',
-        cursor: 'pointer',
-        wordBreak: 'break-word',
-        overflow: 'clip',
-        border: '1px solid $grayBorder',
-        borderBottom: 'none',
-        boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
-        bg: '$grayBg',
-        '&:focus': {
-          bg: '$grayBgActive',
-        },
-        '&:hover': {
-          bg: '$grayBgActive',
-        },
-      }}
-      alignment="start"
-      distribution="start"
-      onClick={() => {
-        props.handleAction('showDetail')
-      }}
-    >
-      <StyledText
-        css={{
-          lineHeight: '20px',
-        }}
-      >
-        <StyledMark
-          css={{
-            background: 'rgb($highlightBackground)',
-            color: '$highlightText',
-            fontSize: '14px',
-          }}
-        >
-          {props.item.quote}
-        </StyledMark>
-      </StyledText>
-      <HStack
-        css={{
-          marginTop: 'auto',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
-        {props.item.image && (
-          <PreviewImage
-            src={props.item.image}
-            alt="Preview Image"
-            width={16}
-            height={16}
-            css={{ borderRadius: '50%' }}
-            onError={(e) => {
-              ;(e.target as HTMLElement).style.display = 'none'
-            }}
-          />
-        )}
-        <StyledText
-          css={{
-            fontWeight: '700',
-          }}
-        >
-          {props.item.title}
-        </StyledText>
-      </HStack>
-    </VStack>
-  )
-}
diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
new file mode 100644
index 000000000..23a13dfc0
--- /dev/null
+++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
@@ -0,0 +1,107 @@
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+
+dayjs.extend(relativeTime)
+
+export const MetaStyle = {
+  width: '100%',
+  color: '$thTextSubtle3',
+  fontSize: '13px',
+  fontWeight: '400',
+  fontFamily: '$display',
+}
+
+export const MenuStyle = {
+  display: 'flex',
+  marginLeft: 'auto',
+  height: '30px',
+  width: '30px',
+  mt: '-5px',
+  mr: '-5px',
+  pt: '2px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '1000px',
+  '&:hover': {
+    bg: '$thBackground4',
+  },
+}
+
+export const TitleStyle = {
+  color: '$thTextContrast2',
+  fontSize: '16px',
+  fontWeight: '700',
+  lineHeight: '1.25',
+  fontFamily: '$display',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  wordBreak: 'break-word',
+  display: '-webkit-box',
+  '-webkit-line-clamp': '2',
+  '-webkit-box-orient': 'vertical',
+}
+
+export const DescriptionStyle = {
+  color: '$thTextSubtle',
+  pt: '10px',
+  fontSize: '13px',
+  fontWeight: '400',
+  lineHeight: '140%',
+  fontFamily: '$display',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  display: '-webkit-box',
+  '-webkit-line-clamp': '2',
+  '-webkit-box-orient': 'vertical',
+  height: '45px',
+  alignItems: 'start',
+}
+
+export const AuthorInfoStyle = {
+  maxLines: '1',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: '240px',
+  overflow: 'hidden',
+  height: '21px',
+  color: '$thTextSubtle3',
+  fontSize: '13px',
+  fontWeight: '400',
+  fontFamily: '$display',
+}
+
+export const timeAgo = (date: string | undefined): string => {
+  if (!date) {
+    return ''
+  }
+  return dayjs(date).fromNow()
+}
+
+const shouldHideUrl = (url: string): boolean => {
+  try {
+    const origin = new URL(url).origin
+    const hideHosts = ['https://storage.googleapis.com', 'https://omnivore.app']
+    if (hideHosts.indexOf(origin) != -1) {
+      return true
+    }
+  } catch {
+    console.log('invalid url item', url)
+  }
+  return false
+}
+
+export const siteName = (
+  originalArticleUrl: string,
+  itemUrl: string
+): string => {
+  if (shouldHideUrl(originalArticleUrl)) {
+    return ''
+  }
+  try {
+    return new URL(originalArticleUrl).hostname.replace(/^www\./, '')
+  } catch {}
+  try {
+    return new URL(itemUrl).hostname.replace(/^www\./, '')
+  } catch {}
+  return ''
+}
diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 1d7962527..ebeb189e8 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -1,229 +1,225 @@
 import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
-import { StyledText } from '../../elements/StyledText'
-import { removeHTMLTags } from '../ArticleSubtitle'
-import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
-import { theme } from '../../tokens/stitches.config'
-import { CardMenu } from '../CardMenu'
 import { LabelChip } from '../../elements/LabelChip'
-import { ProgressBar } from '../../elements/ProgressBar'
 import type { LinkedItemCardProps } from './CardTypes'
-import { ProgressBarVertical } from '../../elements/ProgressBarVertical'
+import { CoverImage } from '../../elements/CoverImage'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { useState } from 'react'
+import { DotsThreeVertical } from 'phosphor-react'
+import Link from 'next/link'
+import { CardMenu } from '../CardMenu'
+import {
+  AuthorInfoStyle,
+  DescriptionStyle,
+  MenuStyle,
+  MetaStyle,
+  siteName,
+  timeAgo,
+  TitleStyle,
+} from './LibraryCardStyles'
 
-//Styles
-const ellipsisText = {
-  overflow: 'hidden',
-  display: '-webkit-box',
-  WebkitLineClamp: 1,
-  WebkitBoxOrient: 'vertical',
-  margin: 'auto 0',
-  pr:'10px',
+dayjs.extend(relativeTime)
+
+type ProgressBarProps = {
+  fillPercentage: number
+  fillColor: string
+  backgroundColor: string
+  borderRadius: string
 }
 
-const cardTitleStyle = {
-  ...ellipsisText,
-  width:'100%',
-  fontSize: '14px',
-  fontWeight: '600',
-  textAlign: 'left',
-}
-
-// Props
-type CardTitleProps = {
-  title: string
-}
-
-// Functions
-function CardTitle(
-  props: CardTitleProps,
-): JSX.Element {
+export function ProgressBar(props: ProgressBarProps): JSX.Element {
   return (
-    <StyledText style="listTitle" data-testid="listTitle" css={cardTitleStyle}>
-      {props.title}
-    </StyledText>
+    <Box
+      css={{
+        height: '4px',
+        width: '100%',
+        borderRadius: '$1',
+        overflow: 'hidden',
+        backgroundColor: props.backgroundColor,
+      }}
+    >
+      <Box
+        css={{
+          height: '100%',
+          width: `${props.fillPercentage}%`,
+          backgroundColor: props.fillColor,
+          borderRadius: props.borderRadius,
+        }}
+      />
+    </Box>
   )
 }
 
 // Component
 export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
+  const [isHovered, setIsHovered] = useState(false)
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  const originText =
+    props.item.siteName ||
+    siteName(props.item.originalArticleUrl, props.item.url)
+
   return (
-    <>
-      {props.layout === 'GRID_LAYOUT' ? (
-        <VStack
-          css={{
-            p: '12px',
-            height: '100%',
-            borderRadius: '8px',
-            cursor: 'pointer',
-            border: '1px solid $libraryActiveMenuItem',
-            mb: '15px',
-          }}
-          alignment="start"
-          distribution="start"
-          onClick={() => {
-            props.handleAction('showDetail')
-          }}
+    <VStack
+      css={{
+        pl: '20px',
+        padding: '15px',
+        width: '320px',
+        height: '100%',
+        minHeight: '270px',
+        background: 'white',
+        borderRadius: '5px',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: '$thBorderColor',
+        cursor: 'pointer',
+        '@smDown': {
+          m: '15px',
+          width: 'calc(100% - 30px)',
+        },
+      }}
+      alignment="start"
+      distribution="start"
+      onMouseEnter={() => {
+        setIsHovered(true)
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false)
+      }}
+    >
+      <Link
+        href={`${props.viewer.profile.username}/${props.item.slug}`}
+        passHref
+      >
+        <a
+          href={`${props.viewer.profile.username}/${props.item.slug}`}
+          style={{ textDecoration: 'unset', width: '100%', height: '100%' }}
         >
-          <VStack
-            distribution="start"
-            alignment="start"
+          <HStack
             css={{
-              width: '100%'
+              ...MetaStyle,
+              minHeight: '35px',
             }}
+            distribution="start"
           >
-            <HStack
-              alignment="start"
-              distribution="between"
+            <Box>
+              {timeAgo(props.item.savedAt)}
+              {` `}
+              {props.item.wordsCount ?? 0 > 0
+                ? `  • ${Math.max(
+                    1,
+                    Math.round((props.item.wordsCount ?? 0) / 235)
+                  )} min read`
+                : null}
+              {props.item.highlights?.length ?? 0 > 0
+                ? `  • ${props.item.highlights?.length} highlights`
+                : null}
+            </Box>
+            <Box
               css={{
-                display: 'grid',
-                gridTemplateColumns: '1fr 24px',
-                gridTemplateRows: '1fr',
-                width:'100%',
+                ...MenuStyle,
+                visibility: isHovered || menuOpen ? 'unset' : 'hidden',
+                '@media (hover: none)': {
+                  visibility: 'unset',
+                },
               }}
             >
-              <CardTitle title={props.item.title} />
-              <Box
-                css={{ alignSelf: 'end', alignItems: 'end', height: '100%' }}
-                onClick={(e) => {
-                  // This is here to prevent menu click events from bubbling
-                  // up and causing us to "click" on the link item.
-                  e.stopPropagation()
+              <CardMenu
+                item={props.item}
+                viewer={props.viewer}
+                onOpenChange={(open) => setMenuOpen(open)}
+                actionHandler={props.handleAction}
+                triggerElement={
+                  <DotsThreeVertical size={25} weight="bold" color="#ADADAD" />
+                }
+              />
+            </Box>
+          </HStack>
+          <VStack
+            alignment="start"
+            distribution="start"
+            css={{ height: '100%', width: '100%' }}
+          >
+            <Box
+              css={{
+                ...TitleStyle,
+                height: '42px',
+              }}
+            >
+              {props.item.title}
+            </Box>
+            <Box css={DescriptionStyle}>{props.item.description}</Box>
+            <SpanBox
+              css={{
+                ...AuthorInfoStyle,
+                m: '0px',
+              }}
+            >
+              {props.item.author}
+              {props.item.author && originText && ' | '}
+              <SpanBox css={{ textDecoration: 'underline' }}>
+                {originText}
+              </SpanBox>
+            </SpanBox>
+            <SpanBox
+              css={{
+                pt: '20px',
+                pr: '10px',
+                pb: '20px',
+                width: '100%',
+                m: '0px',
+              }}
+            >
+              <ProgressBar
+                fillPercentage={props.item.readingProgressPercent}
+                fillColor="$thProgressFg"
+                backgroundColor="$thBorderSubtle"
+                borderRadius="5px"
+              />
+            </SpanBox>
+
+            <HStack
+              distribution="start"
+              alignment="start"
+              css={{ width: '100%', minHeight: '50px' }}
+            >
+              <HStack
+                css={{
+                  display: 'block',
+                  minHeight: '35px',
                 }}
               >
-                <CardMenu
-                  item={props.item}
-                  viewer={props.viewer}
-                  triggerElement={
-                    <MoreOptionsIcon
-                      size={24}
-                      strokeColor={theme.colors.grayTextContrast.toString()}
-                      orientation="horizontal"
-                    />
-                  }
-                  actionHandler={props.handleAction}
-                />
-              </Box>
-            </HStack>
-            <HStack alignment="start" distribution="between">
-              <StyledText
-                style="caption"
-                css={{ fontWeight: '600'}}
+                {props.item.labels?.map(({ name, color }, index) => (
+                  <LabelChip key={index} text={name || ''} color={color} />
+                ))}
+              </HStack>
+              <VStack
+                css={{
+                  width: '80px',
+                  height: '100%',
+                  marginLeft: 'auto',
+                  flexGrow: '1',
+                }}
+                alignment="end"
+                distribution="end"
               >
-                {props.item.author && (
-                  <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
+                {props.item.image && (
+                  <CoverImage
+                    src={props.item.image}
+                    alt="Link Preview Image"
+                    width={50}
+                    height={50}
+                    css={{ borderRadius: '8px' }}
+                    onError={(e) => {
+                      ;(e.target as HTMLElement).style.display = 'none'
+                    }}
+                  />
                 )}
-                {props.originText && (
-                  <>
-                    <Box
-                      css={{
-                        height: '4px',
-                        width: '4px',
-                        borderRadius: '50%',
-                        display: 'inline-block',
-                        background: 'var(--colors-graySolid)',
-                      }}
-                    ></Box>
-                    <SpanBox css={{ color: 'var(--colors-graySolid)' }}>
-                      {props.originText}
-                    </SpanBox>
-                  </>
-                )}
-              </StyledText>
+              </VStack>
             </HStack>
           </VStack>
-          <HStack
-            alignment="start"
-            distribution="between"
-            css={{
-              width: '100%',
-               pr: '12px',
-               flexGrow: '1',
-            }}
-          >
-            <StyledText
-              css={{
-                fontStyle: 'normal',
-                fontWeight: '400',
-                fontSize: '14px',
-              }}
-              data-testid="listDesc"
-            >
-              {props.item.description}
-            </StyledText>
-          </HStack>
-          <Box css={{ display: 'block', py: '12px' }}>
-            {props.item.labels?.map(({ name, color }, index) => (
-              <LabelChip key={index} text={name || ''} color={color} />
-            ))}
-          </Box>
-          <ProgressBar
-            fillPercentage={props.item.readingProgressPercent}
-            fillColor={theme.colors.highlight.toString()}
-            backgroundColor={theme.colors.lightBorder.toString()}
-            borderRadius={
-              props.item.readingProgressPercent === 100
-                ? '0'
-                : '0px 8px 8px 0px'
-            }
-          />
-        </VStack>
-
-      ) : (
-        //  ELSE display List Layout
-        <VStack
-          distribution="start"
-          alignment="start"
-          css={{
-            width: '100%',
-          }}
-        >
-          <HStack
-            alignment="start"
-            distribution="between"
-            css={{
-              width: '100%',
-              display: 'grid',
-              gridTemplateColumns: '0.01fr 1fr 2fr 150px',
-              gridTemplateRows: '1fr',
-              borderBottom: '1px solid $graySeparator',
-              height: '45px',
-            }}
-          >
-            <ProgressBarVertical
-              fillPercentage={props.item.readingProgressPercent}
-              fillColor={theme.colors.highlight.toString()}
-              backgroundColor={theme.colors.grayProgressBackground.toString()}
-              borderRadius={
-                props.item.readingProgressPercent === 100
-                  ? '0'
-                  : '0px 8px 8px 0px'
-              }
-              height={'45px'}
-            />
-            <CardTitle title={props.item.title} />
-            <StyledText
-              css={{
-                ...ellipsisText,
-                color: '$grayTextContrast',
-              }}
-              data-testid="listDesc"
-            >
-              {props.item.labels?.map(({ name, color }, index) => (
-                <LabelChip key={index} text={name || ''} color={color} />
-              ))}
-              {props.item.description}
-            </StyledText>
-
-            <StyledText
-              style="caption"
-              css={{ ...ellipsisText, fontWeight: '400' }}
-            >
-              {props.item.author && (
-                <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
-              )}
-            </StyledText>
-          </HStack>
-        </VStack>
-      )}
-    </>
+        </a>
+      </Link>
+    </VStack>
   )
 }
diff --git a/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx
new file mode 100644
index 000000000..c7eaa004d
--- /dev/null
+++ b/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx
@@ -0,0 +1,187 @@
+import { Box, VStack, HStack } from '../../elements/LayoutPrimitives'
+import { useMemo, useState } from 'react'
+import { CaretDown, CaretUp } from 'phosphor-react'
+import { MetaStyle, timeAgo, TitleStyle } from './LibraryCardStyles'
+import { styled } from '@stitches/react'
+import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
+import { LibraryItemNode } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
+import { Button } from '../../elements/Button'
+import { theme } from '../../tokens/stitches.config'
+import { HighlightItem } from '../../templates/homeFeed/HighlightItem'
+import { getHighlightLocation } from '../../templates/article/NotebookModal'
+import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
+
+export const GridSeparator = styled(Box, {
+  height: '1px',
+  marginTop: '15px',
+  backgroundColor: '$thBorderColor',
+})
+
+type LibraryHighlightGridCardProps = {
+  viewer: UserBasicData
+  item: LibraryItemNode
+}
+
+export function LibraryHighlightGridCard(
+  props: LibraryHighlightGridCardProps
+): JSX.Element {
+  const [expanded, setExpanded] = useState(false)
+
+  const higlightCount = props.item.highlights?.length ?? 0
+
+  const sortedHighlights = useMemo(() => {
+    const sorted = (a: number, b: number) => {
+      if (a < b) {
+        return -1
+      }
+      if (a > b) {
+        return 1
+      }
+      return 0
+    }
+
+    if (!props.item.highlights) {
+      return []
+    }
+
+    return props.item.highlights.sort((a: Highlight, b: Highlight) => {
+      if (a.highlightPositionPercent && b.highlightPositionPercent) {
+        return sorted(a.highlightPositionPercent, b.highlightPositionPercent)
+      }
+      // We do this in a try/catch because it might be an invalid diff
+      // With PDF it will definitely be an invalid diff.
+      try {
+        const aPos = getHighlightLocation(a.patch)
+        const bPos = getHighlightLocation(b.patch)
+        if (aPos && bPos) {
+          return sorted(aPos, bPos)
+        }
+      } catch {}
+      return a.createdAt.localeCompare(b.createdAt)
+    })
+  }, [props.item.highlights])
+
+  return (
+    <VStack
+      css={{
+        pl: '15px',
+        padding: '15px',
+        width: '100%',
+        height: '100%',
+        marginTop: '20px',
+        background: 'white',
+        borderRadius: '5px',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: '$thBorderColor',
+        cursor: 'pointer',
+        bg: '$thBackground3',
+      }}
+      alignment="start"
+      distribution="start"
+    >
+      {!expanded && (
+        <HStack
+          css={{
+            ...MetaStyle,
+            minHeight: '35px',
+          }}
+          distribution="start"
+        >
+          <Box>
+            {timeAgo(props.item.savedAt)}
+            {` `}
+            {props.item.wordsCount ?? 0 > 0
+              ? `  • ${Math.max(
+                  1,
+                  Math.round((props.item.wordsCount ?? 0) / 235)
+                )} min read`
+              : null}
+            {props.item.highlights?.length ?? 0 > 0
+              ? `  • ${props.item.highlights?.length} highlights`
+              : null}
+          </Box>
+        </HStack>
+      )}
+      <VStack
+        alignment="start"
+        distribution="start"
+        css={{ height: '100%', width: '100%' }}
+      >
+        <Box
+          css={{
+            ...TitleStyle,
+          }}
+        >
+          {props.item.title}
+        </Box>
+        {expanded && (
+          <>
+            <GridSeparator css={{ width: '100%' }} />
+            <VStack
+              css={{ height: '100%', width: '100%' }}
+              distribution="start"
+            >
+              {sortedHighlights.map((highlight) => (
+                <HighlightItem
+                  key={highlight.id}
+                  viewer={props.viewer}
+                  item={props.item}
+                  highlight={highlight}
+                />
+              ))}
+            </VStack>
+          </>
+        )}
+        <Box css={{ width: '100%' }}>
+          {!expanded ? (
+            <Button
+              css={{
+                mt: '30px',
+                display: 'flex',
+                gap: '5px',
+                px: '10px',
+                py: '6px',
+                fontSize: '11px',
+                fontFamily: '$inter',
+                fontWeight: '500',
+                bg: '$thBackground2',
+                color: '$thTextSubtle2',
+                alignItems: 'center',
+                border: '1px solid transparent',
+              }}
+              onClick={(event) => {
+                setExpanded(true)
+                event.preventDefault()
+              }}
+            >
+              {`View ${higlightCount} highlight${higlightCount > 1 ? 's' : ''}`}
+              <CaretDown
+                size={10}
+                weight="bold"
+                color={theme.colors.thHighContrast.toString()}
+              />
+            </Button>
+          ) : (
+            <Button
+              style="plainIcon"
+              css={{
+                width: '25px',
+                height: '25px',
+                bg: '$thBackground2',
+                pt: '2px',
+                borderRadius: '1000px',
+              }}
+              onClick={(event) => {
+                setExpanded(false)
+                event.preventDefault()
+              }}
+            >
+              <CaretUp size={15} weight="bold" color="#EC6A5E" />
+            </Button>
+          )}
+        </Box>
+      </VStack>
+    </VStack>
+  )
+}
diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
new file mode 100644
index 000000000..21f031335
--- /dev/null
+++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
@@ -0,0 +1,146 @@
+import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
+import { LabelChip } from '../../elements/LabelChip'
+import type { LinkedItemCardProps } from './CardTypes'
+import { useState } from 'react'
+import { DotsThree } from 'phosphor-react'
+import Link from 'next/link'
+import { CardMenu } from '../CardMenu'
+import {
+  AuthorInfoStyle,
+  MenuStyle,
+  MetaStyle,
+  siteName,
+  timeAgo,
+  TitleStyle,
+} from './LibraryCardStyles'
+
+export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
+  const [isHovered, setIsHovered] = useState(false)
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  const originText =
+    props.item.siteName ||
+    siteName(props.item.originalArticleUrl, props.item.url)
+
+  return (
+    <VStack
+      css={{
+        p: '20px',
+        height: '100%',
+        cursor: 'pointer',
+        gap: '10px',
+        border: '1px solid $grayBorder',
+        borderBottom: 'none',
+        width: '900px',
+
+        '@xxl': {
+          width: '1200px',
+        },
+
+        '@xlgDown': {
+          width: 'unset',
+          borderRadius: 'unset',
+          borderLeft: 'unset',
+          borderRight: 'unset',
+        },
+      }}
+      alignment="start"
+      distribution="start"
+      onMouseEnter={() => {
+        setIsHovered(true)
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false)
+      }}
+    >
+      <Link
+        href={`${props.viewer.profile.username}/${props.item.slug}`}
+        passHref
+      >
+        <a
+          href={`${props.viewer.profile.username}/${props.item.slug}`}
+          style={{ textDecoration: 'unset', width: '100%', height: '100%' }}
+        >
+          <HStack css={MetaStyle} distribution="start">
+            <Box>
+              {timeAgo(props.item.savedAt)}
+              {` `}
+              {props.item.wordsCount ?? 0 > 0
+                ? `  • ${Math.max(
+                    1,
+                    Math.round((props.item.wordsCount ?? 0) / 235)
+                  )} min read`
+                : null}
+              {props.item.readingProgressPercent ?? 0 > 0 ? (
+                <>
+                  {`  • `}
+                  <SpanBox css={{ color: '#55B938' }}>
+                    {`${Math.round(props.item.readingProgressPercent)}%`}
+                  </SpanBox>
+                </>
+              ) : null}
+              {props.item.highlights?.length ?? 0 > 0
+                ? `  • ${props.item.highlights?.length} highlights`
+                : null}
+            </Box>
+            <Box
+              css={{
+                ...MenuStyle,
+                visibility: isHovered || menuOpen ? 'unset' : 'hidden',
+                '@media (hover: none)': {
+                  visibility: 'unset',
+                },
+              }}
+            >
+              <CardMenu
+                item={props.item}
+                viewer={props.viewer}
+                onOpenChange={(open) => setMenuOpen(open)}
+                actionHandler={props.handleAction}
+                triggerElement={
+                  <DotsThree size={25} weight="bold" color="#ADADAD" />
+                }
+              />
+            </Box>
+          </HStack>
+          <VStack
+            alignment="start"
+            distribution="start"
+            css={{ height: '100%', width: '100%' }}
+          >
+            <Box css={{ ...TitleStyle, width: '80%' }}>{props.item.title}</Box>
+            <SpanBox
+              css={{
+                mt: '5px',
+                ...AuthorInfoStyle,
+              }}
+            >
+              {props.item.author}
+              {props.item.author && originText && ' | '}
+              <SpanBox css={{ textDecoration: 'underline' }}>
+                {originText}
+              </SpanBox>
+            </SpanBox>
+
+            <HStack
+              distribution="start"
+              alignment="start"
+              // The two pixels here are to account for the label margin
+              css={{ width: '100%', ml: '-2px', mt: '5px' }}
+            >
+              <HStack
+                css={{
+                  display: 'block',
+                }}
+              >
+                {props.item.labels?.map(({ name, color }, index) => (
+                  <LabelChip key={index} text={name || ''} color={color} />
+                ))}
+              </HStack>
+            </HStack>
+          </VStack>
+        </a>
+      </Link>
+    </VStack>
+  )
+}
diff --git a/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx
index 28e4daf71..19caabc98 100644
--- a/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx
@@ -1,46 +1,11 @@
-import { GridLinkedItemCard } from './GridLinkedItemCard'
-import { ListLinkedItemCard } from './ListLinkedItemCard'
 import type { LinkedItemCardProps } from './CardTypes'
-import { HighlightItemCard } from './HighlightItemCard'
-import { PageType } from '../../../lib/networking/fragments/articleFragment'
-
-const shouldHideUrl = (url: string): boolean => {
-  try {
-    const origin = new URL(url).origin
-    const hideHosts = ['https://storage.googleapis.com', 'https://omnivore.app']
-    if (hideHosts.indexOf(origin) != -1) {
-      return true
-    }
-  } catch {
-    console.log('invalid url item', url)
-  }
-  return false
-}
-
-const siteName = (originalArticleUrl: string, itemUrl: string): string => {
-  if (shouldHideUrl(originalArticleUrl)) {
-    return ''
-  }
-  try {
-    return new URL(originalArticleUrl).hostname.replace(/^www\./, '')
-  } catch {}
-  try {
-    return new URL(itemUrl).hostname.replace(/^www\./, '')
-  } catch {}
-  return ''
-}
+import { LibraryGridCard } from './LibraryGridCard'
+import { LibraryListCard } from './LibraryListCard'
 
 export function LinkedItemCard(props: LinkedItemCardProps): JSX.Element {
-  const originText =
-    props.item.siteName ||
-    siteName(props.item.originalArticleUrl, props.item.url)
-
-  if (props.item.pageType === PageType.HIGHLIGHTS) {
-    return <HighlightItemCard {...props} />
-  }
   if (props.layout == 'LIST_LAYOUT') {
-    return <ListLinkedItemCard {...props} originText={originText} />
+    return <LibraryListCard {...props} />
   } else {
-    return <GridLinkedItemCard {...props} originText={originText} />
+    return <LibraryGridCard {...props} />
   }
 }
diff --git a/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx
deleted file mode 100644
index 3fa5ddfce..000000000
--- a/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-import {
-  Box,
-  HStack,
-  VStack,
-  MediumBreakpointBox,
-} from '../../elements/LayoutPrimitives'
-import { StyledText } from '../../elements/StyledText'
-import { authoredByText } from '../ArticleSubtitle'
-import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
-import { theme } from '../../tokens/stitches.config'
-import { CardMenu } from '../CardMenu'
-import type { LinkedItemCardProps } from './CardTypes'
-import { ProgressBar } from '../../elements/ProgressBar'
-
-export function ListLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
-  return (
-    <MediumBreakpointBox
-      smallerLayoutNode={<ListLinkedItemCardNarrow {...props} />}
-      largerLayoutNode={<ListLinkedItemCardWide {...props} />}
-    />
-  )
-}
-
-export function ListLinkedItemCardNarrow(
-  props: LinkedItemCardProps
-): JSX.Element {
-  return (
-    <Box
-      css={{
-        p: '$3',
-        height: '100%',
-        width: '100%',
-        maxWidth: '100%',
-        borderRadius: 0,
-        cursor: 'pointer',
-        wordBreak: 'break-word',
-        border: '1px solid $grayBorder',
-        borderBottom: 'none',
-        alignItems: 'center',
-        display: 'grid',
-        gridTemplateColumns: '1fr 24px',
-        gridTemplateRows: '1fr',
-      }}
-      onClick={() => {
-        props.handleAction('showDetail')
-      }}
-    >
-      <HStack
-        distribution="start"
-        alignment="end"
-        css={{
-          px: '$2',
-          pl: '0px',
-        }}
-      >
-        <VStack>
-          <StyledText
-            style="listTitle"
-            data-testid="listTitle"
-            css={{
-              mt: '0px',
-              mb: '$1',
-              textAlign: 'left',
-              lineHeight: 'normal',
-            }}
-          >
-            {props.item.title}
-          </StyledText>
-          <HStack>
-            {props.item.author && (
-              <StyledText style="caption" css={{ my: '$1' }}>
-                {authoredByText(props.item.author)}
-              </StyledText>
-            )}
-            <StyledText
-              style="caption"
-              css={{
-                my: '$1',
-                ml: props.item.author ? '8px' : 0,
-                textDecorationLine: 'underline',
-              }}
-            >
-              {props.originText}
-            </StyledText>
-          </HStack>
-        </VStack>
-      </HStack>
-      <Box
-        css={{
-          alignSelf: 'end',
-          alignItems: 'center',
-          display: 'grid',
-          placeItems: 'center',
-        }}
-        onClick={(e) => {
-          // This is here to prevent menu click events from bubbling
-          // up and causing us to "click" on the link item.
-          e.stopPropagation()
-        }}
-      >
-        <CardMenu
-          item={props.item}
-          viewer={props.viewer}
-          triggerElement={
-            <MoreOptionsIcon
-              size={24}
-              strokeColor={theme.colors.grayTextContrast.toString()}
-              orientation="horizontal"
-            />
-          }
-          actionHandler={props.handleAction}
-        />
-      </Box>
-    </Box>
-  )
-}
-
-export function ListLinkedItemCardWide(
-  props: LinkedItemCardProps
-): JSX.Element {
-  return (
-    <HStack
-      css={{
-        p: '$3',
-        height: '100%',
-        width: '100%',
-        maxWidth: '100%',
-        borderRadius: 0,
-        cursor: 'pointer',
-        wordBreak: 'break-word',
-        border: '1px solid $grayBorder',
-        borderBottom: 'none',
-        alignItems: 'center',
-      }}
-      onClick={() => {
-        props.handleAction('showDetail')
-      }}
-    >
-      <HStack
-        distribution="start"
-        alignment="end"
-        css={{
-          px: '$2',
-          flexGrow: 1,
-          pl: '0px',
-        }}
-      >
-        <StyledText
-          style="listTitle"
-          data-testid="listTitle"
-          css={{ mt: '0px', mb: '$1', textAlign: 'left', lineHeight: 'normal' }}
-        >
-          {props.item.title}
-        </StyledText>
-        {props.item.author && (
-          <StyledText style="caption" css={{ my: '$1', ml: '8px' }}>
-            {authoredByText(props.item.author)}
-          </StyledText>
-        )}
-        <StyledText
-          style="caption"
-          css={{ my: '$1', ml: '8px', textDecorationLine: 'underline' }}
-        >
-          {props.originText}
-        </StyledText>
-      </HStack>
-      <Box
-        css={{
-          width: '40px',
-          height: '8px',
-          mr: '$2',
-          backgroundColor: '$grayBase',
-          display: 'grid',
-          placeItems: 'center',
-          borderRadius: '6px',
-          border: '1px solid $grayBorder',
-          px: '1px',
-        }}
-      >
-        <ProgressBar
-          fillPercentage={props.item.readingProgressPercent}
-          fillColor={theme.colors.highlight.toString()}
-          backgroundColor={theme.colors.grayTextContrast.toString()}
-          borderRadius={'8px'}
-        />
-      </Box>
-      <Box
-        css={{
-          alignSelf: 'end',
-          alignItems: 'center',
-          display: 'grid',
-          placeItems: 'center',
-        }}
-        onClick={(e) => {
-          // This is here to prevent menu click events from bubbling
-          // up and causing us to "click" on the link item.
-          e.stopPropagation()
-        }}
-      >
-        <CardMenu
-          item={props.item}
-          viewer={props.viewer}
-          triggerElement={
-            <MoreOptionsIcon
-              size={24}
-              strokeColor={theme.colors.grayTextContrast.toString()}
-              orientation="horizontal"
-            />
-          }
-          actionHandler={props.handleAction}
-        />
-      </Box>
-    </HStack>
-  )
-}
diff --git a/packages/web/components/patterns/PrimaryHeader.tsx b/packages/web/components/patterns/PrimaryHeader.tsx
index cb8f65a81..9659158ac 100644
--- a/packages/web/components/patterns/PrimaryHeader.tsx
+++ b/packages/web/components/patterns/PrimaryHeader.tsx
@@ -4,12 +4,9 @@ import { DropdownMenu, HeaderDropdownAction } from './../patterns/DropdownMenu'
 import { updateTheme } from '../../lib/themeUpdater'
 import { AvatarDropdown } from './../elements/AvatarDropdown'
 import { ThemeId } from './../tokens/stitches.config'
-import { useCallback, useEffect, useState } from 'react'
+import { useState } from 'react'
 import { useRouter } from 'next/router'
-import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardShortcuts'
-import { primaryCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
 import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery'
-import { setupAnalytics } from '../../lib/analytics'
 
 type HeaderProps = {
   user?: UserBasicData
@@ -27,34 +24,6 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element {
   const router = useRouter()
   const [isScrolled, setIsScrolled] = useState(false)
 
-  useKeyboardShortcuts(
-    primaryCommands((action) => {
-      switch (action) {
-        // case 'themeDarker':
-        //   darkenTheme()
-        //   break
-        // case 'themeLighter':
-        //   lightenTheme()
-        //   break
-        case 'toggleShortcutHelpModalDisplay':
-          props.setShowKeyboardCommandsModal(true)
-          break
-      }
-    })
-  )
-
-  const initAnalytics = useCallback(() => {
-    setupAnalytics(props.user)
-  }, [props.user])
-
-  useEffect(() => {
-    initAnalytics()
-    window.addEventListener('load', initAnalytics)
-    return () => {
-      window.removeEventListener('load', initAnalytics)
-    }
-  }, [initAnalytics])
-
   function headerDropdownActionHandler(action: HeaderDropdownAction): void {
     switch (action) {
       case 'apply-darker-theme':
@@ -108,12 +77,14 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element {
 
   return (
     <>
-      <SpanBox css={{
-        display: props.alwaysDisplayToolbar ? 'none' : 'flex',
-        '@lgDown': {
-          display: 'none',
-        }
-      }}>
+      <SpanBox
+        css={{
+          display: props.alwaysDisplayToolbar ? 'none' : 'flex',
+          '@lgDown': {
+            display: 'none',
+          },
+        }}
+      >
         <FloatingNavHeader
           {...props}
           isVisible={true}
@@ -124,11 +95,13 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element {
           alwaysDisplayToolbar={props.alwaysDisplayToolbar}
         />
       </SpanBox>
-      <SpanBox css={{
-        '@lg': {
-          display: props.alwaysDisplayToolbar ? 'flex' : 'none',
-        }
-      }}>
+      <SpanBox
+        css={{
+          '@lg': {
+            display: props.alwaysDisplayToolbar ? 'flex' : 'none',
+          },
+        }}
+      >
         <NavHeader
           {...props}
           isVisible={true}
@@ -216,10 +189,7 @@ function NavHeader(props: NavHeaderProps): JSX.Element {
             <DropdownMenu
               username={props.username}
               triggerElement={
-                <AvatarDropdown
-                  userInitials={props.userInitials}
-                  profileImageURL={props.profileImageURL}
-                />
+                <AvatarDropdown userInitials={props.userInitials} />
               }
               actionHandler={props.actionHandler}
             />
@@ -241,7 +211,7 @@ function FloatingNavHeader(props: NavHeaderProps): JSX.Element {
             position: 'fixed',
             display: 'flex',
             alignItems: 'center',
-            zIndex: 100,
+            zIndex: 5,
           }}
         >
           <OmnivoreNameLogo href={props.username ? '/home' : '/login'} />
@@ -256,16 +226,13 @@ function FloatingNavHeader(props: NavHeaderProps): JSX.Element {
             right: '18px',
             position: 'fixed',
             display: 'flex',
-            alignItems: 'center'
+            alignItems: 'center',
           }}
         >
           <DropdownMenu
             username={props.username}
             triggerElement={
-              <AvatarDropdown
-                userInitials={props.userInitials}
-                profileImageURL={props.profileImageURL}
-              />
+              <AvatarDropdown userInitials={props.userInitials} />
             }
             actionHandler={props.actionHandler}
           />
@@ -274,4 +241,3 @@ function FloatingNavHeader(props: NavHeaderProps): JSX.Element {
     </>
   )
 }
-
diff --git a/packages/web/components/patterns/ReaderDropdownMenu.tsx b/packages/web/components/patterns/ReaderDropdownMenu.tsx
new file mode 100644
index 000000000..8d75e0258
--- /dev/null
+++ b/packages/web/components/patterns/ReaderDropdownMenu.tsx
@@ -0,0 +1,39 @@
+import { ReactNode } from 'react'
+import {
+  Dropdown,
+  DropdownOption,
+  DropdownSeparator,
+} from '../elements/DropdownElements'
+
+type DropdownMenuProps = {
+  triggerElement: ReactNode
+  articleActionHandler: (action: string, arg?: unknown) => void
+}
+
+export function ReaderDropdownMenu(props: DropdownMenuProps): JSX.Element {
+  return (
+    <Dropdown triggerElement={props.triggerElement}>
+      <DropdownOption
+        onSelect={() => props.articleActionHandler('archive')}
+        title="Archive"
+      />
+      <DropdownOption
+        onSelect={() => props.articleActionHandler('editLabels')}
+        title="Edit Labels"
+      />
+      <DropdownOption
+        onSelect={() => props.articleActionHandler('showEditModal')}
+        title="Edit Info"
+      />
+      <DropdownOption
+        onSelect={() => props.articleActionHandler('delete')}
+        title="Delete"
+      />
+      <DropdownSeparator />
+      <DropdownOption
+        onSelect={() => window.Intercom('show')}
+        title="Feedback"
+      />
+    </Dropdown>
+  )
+}
diff --git a/packages/web/components/patterns/ShareArticleView.tsx b/packages/web/components/patterns/ShareArticleView.tsx
deleted file mode 100644
index c6c121492..000000000
--- a/packages/web/components/patterns/ShareArticleView.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Box, VStack, HStack } from '../elements/LayoutPrimitives'
-import { StyledText } from '../elements/StyledText'
-import { CoverImage } from '../elements/CoverImage'
-import { ArticleSubtitle } from './ArticleSubtitle'
-
-
-type ShareArticleViewProps = {
-  url: string
-  title: string
-  imageURL?: string
-  author?: string
-  description?: string
-  originalArticleUrl: string
-  publishedAt: string
-}
-
-export function ShareArticleView(props: ShareArticleViewProps): JSX.Element {
-  return (
-    <HStack 
-      alignment='start'
-      distribution='start'
-      css={{
-        background: 'white',
-        width: '100%',
-        p: '10px 0px 10px 0px',
-        
-        boxShadow: 'rgb(120 123 134 / 12%) 0px 4px 18px'
-      }}>
-      {props.imageURL && (
-        <CoverImage
-          src={props.imageURL}
-          alt='Preview Image'
-          width={120}
-          height={120}
-          onError={(e) => {
-            (e.target as HTMLElement).style.display = 'none'
-          }}
-        />
-      )}
-      <VStack >
-        <Box css={{ pl: '16px', width: '100%', color: 'black', }}>
-          <StyledText style='shareTitle'>{props.title}</StyledText>
-          <ArticleSubtitle
-            style='shareSubtitle'
-            hideButton={true}
-            author={props.author}
-            rawDisplayDate={props.publishedAt}
-            href={props.originalArticleUrl}
-          />
-        </Box>
-      </VStack>
-    </HStack>
-  )
-}
diff --git a/packages/web/components/templates/ArticleHighlights.tsx b/packages/web/components/templates/ArticleHighlights.tsx
deleted file mode 100644
index ad79c7876..000000000
--- a/packages/web/components/templates/ArticleHighlights.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import { useRouter } from 'next/router'
-import { PublicArticleAttributes } from '../../lib/networking/queries/useGetPublicArticleQuery'
-import { PrimaryLayout } from './PrimaryLayout'
-import { StyledText } from '../elements/StyledText'
-import { VStack, HStack, Box } from '../elements/LayoutPrimitives'
-import { authoredByText } from '../patterns/ArticleSubtitle'
-import Image from 'next/image'
-import { HighlightFooter, PublicHighlightView } from '../patterns/HighlightView'
-import { useMemo, useRef, useState } from 'react'
-import { Highlight } from '../../lib/networking/fragments/highlightFragment'
-import { Button } from '../elements/Button'
-
-type ArticleHighlightsProps = {
-  publicArticle: PublicArticleAttributes
-  showAllHighlights: boolean
-  selectedHighlightId?: string
-  previewImagePath?: string
-}
-
-export function ArticleHighlights(props: ArticleHighlightsProps): JSX.Element {
-  const router = useRouter()
-  return (
-    <PrimaryLayout
-      pageMetaDataProps={{
-        title: props.publicArticle.title,
-        description: props.publicArticle.description,
-        path: router.pathname,
-        ogImage: props.previewImagePath,
-        ogImageType: 'image/png',
-      }}
-      pageTestId={router.pathname}
-    >
-      <VStack alignment="center" css={{ width: '100%' }}>
-        <LoadedContent
-          publicArticle={props.publicArticle}
-          showAllHighlights={props.showAllHighlights}
-          selectedHighlightId={props.selectedHighlightId}
-        />
-      </VStack>
-    </PrimaryLayout>
-  )
-}
-
-type LoadedContentProps = {
-  publicArticle: PublicArticleAttributes
-  showAllHighlights: boolean
-  selectedHighlightId?: string
-}
-
-function LoadedContent(props: LoadedContentProps): JSX.Element {
-  const router = useRouter()
-  const container = useRef<HTMLDivElement>(null)
-
-  const [showAllHighlights, setShowAllHighlights] = useState(
-    props.showAllHighlights
-  )
-
-  const selectedHighlights =
-    props.publicArticle.highlights.filter((highlight) => {
-      return highlight.shortId === props.selectedHighlightId
-    }) ?? ([] as Highlight[])
-
-  const unselectedHighlights =
-    props.publicArticle.highlights.filter((highlight) => {
-      return highlight.shortId !== props.selectedHighlightId
-    }) ?? ([] as Highlight[])
-
-  const moreHighlightsCount = useMemo(() => {
-    return props.publicArticle.highlights.length - 1
-  }, [props.publicArticle.highlights])
-
-  // const sharedBy = useMemo(() => {
-  //   if (moreHighlightsCount < 1) return undefined
-  //   return props.publicArticle.highlights[0].user
-  // }, [moreHighlightsCount, props.publicArticle.highlights])
-
-  const articleSite = useMemo(() => {
-    try {
-      const url = new URL(props.publicArticle.url)
-      return url.hostname
-    } catch (e) {
-      console.log('error ', e)
-      return ''
-    }
-  }, [props.publicArticle.url])
-
-  return (
-    <VStack
-      alignment="center"
-      css={{
-        p: props.selectedHighlightId ? '66px $3 0px $3' : '0px $3 0px $3',
-        width: '66%',
-        maxWidth: '600px',
-        mb: '$4',
-        '@smDown': {
-          p: '32px $3 0px $3',
-          width: '100%',
-        },
-        aspectRatio: router.query.adjustAspectRatio as string,
-      }}
-      ref={container}
-    >
-      {!props.selectedHighlightId && (
-        <LinkedItem publicArticle={props.publicArticle} />
-      )}
-
-      {selectedHighlights.map((highlight) => (
-        <PublicHighlightView
-          key={highlight.id}
-          highlight={highlight}
-          title={props.publicArticle.title}
-          author={props.publicArticle.author}
-        />
-      ))}
-
-      {showAllHighlights &&
-        unselectedHighlights.map((highlight) => (
-          <PublicHighlightView key={highlight.id} highlight={highlight} />
-        ))}
-
-      <HighlightFooter
-        title={props.publicArticle.title}
-        author={props.publicArticle.author}
-        site={articleSite}
-      />
-
-      {!showAllHighlights && moreHighlightsCount > 0 && (
-        <Button onClick={() => setShowAllHighlights(true)}>
-          <Box
-            css={{ width: '8px', color: '$grayBackground', mr: '4px' }}
-            className="dropdown-arrow"
-          />
-          Read {moreHighlightsCount} more highlight
-          {moreHighlightsCount > 1 ? 's ' : ' '}
-          {/* from {sharedBy.name} */}
-        </Button>
-      )}
-
-      <Button
-        style="ctaDarkYellow"
-        css={{ m: '44px', p: '14px 16px', alignSelf: 'center' }}
-        onClick={() => {
-          if (window !== undefined) {
-            window.open(props.publicArticle.url, '_blank')
-          }
-        }}
-      >
-        Read Original
-      </Button>
-    </VStack>
-  )
-}
-
-type LinkedItemProps = {
-  publicArticle: PublicArticleAttributes
-}
-
-function LinkedItem(props: LinkedItemProps): JSX.Element {
-  const originText = new URL(props.publicArticle.url).hostname
-
-  return (
-    <VStack
-      alignment="start"
-      css={{
-        bg: '$grayBgActive',
-        borderRadius: '$2',
-        p: '$2',
-        width: '100%',
-      }}
-    >
-      <HStack distribution="start" css={{ width: '100%' }}>
-        <HStack distribution="start" alignment="start">
-          <Box>
-            <Image
-              src={
-                '/static/images/linked-item-card-placeholder.png'
-                // props.image ?? '/static/images/linked-item-card-placeholder.png'
-              }
-              alt="Link Preview Image"
-              layout="fixed"
-              width={88}
-              height={88}
-            />
-          </Box>
-
-          <VStack
-            distribution="start"
-            alignment="start"
-            css={{ px: '$2', flexGrow: 1 }}
-          >
-            <StyledText
-              style="caption"
-              css={{ my: '$1', textAlign: 'left', overflow: 'auto' }}
-            >
-              {props.publicArticle.title}
-            </StyledText>
-            {props.publicArticle.author && (
-              <StyledText style="caption" css={{ my: '$1' }}>
-                {authoredByText(props.publicArticle.author)}
-              </StyledText>
-            )}
-            <StyledText style="caption" css={{ my: '$1' }}>
-              {originText}
-            </StyledText>
-          </VStack>
-        </HStack>
-      </HStack>
-
-      <StyledText
-        style="caption"
-        css={{ m: 0, py: '$2', height: '5em', overflow: 'hidden' }}
-      >
-        {props.publicArticle.description}
-      </StyledText>
-    </VStack>
-  )
-}
diff --git a/packages/web/components/templates/KeyboardShortcutListModal.tsx b/packages/web/components/templates/KeyboardShortcutListModal.tsx
index 9ba255933..a0f083cd9 100644
--- a/packages/web/components/templates/KeyboardShortcutListModal.tsx
+++ b/packages/web/components/templates/KeyboardShortcutListModal.tsx
@@ -16,9 +16,7 @@ import {
   primaryCommands,
   libraryListCommands,
   highlightBarKeyboardCommands,
-  articleKeyboardCommands,
 } from '../../lib/keyboardShortcuts/navigationShortcuts'
-import { useRouter } from 'next/router'
 
 type KeyboardShortcutListModalProps = {
   onOpenChange: (open: boolean) => void
@@ -27,8 +25,6 @@ type KeyboardShortcutListModalProps = {
 export function KeyboardShortcutListModal(
   props: KeyboardShortcutListModalProps
 ): JSX.Element {
-  const router = useRouter()
-
   return (
     <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
       <ModalOverlay />
@@ -72,10 +68,6 @@ export function KeyboardShortcutListModal(
               libraryListCommands(() => {})
             )}
           />
-          <ShortcutListSection
-            title="Article"
-            commands={articleKeyboardCommands(router, () => {})}
-          />
           <ShortcutListSection
             title="Highlight Bar"
             commands={highlightBarKeyboardCommands(() => {})}
diff --git a/packages/web/components/templates/LoginForm.tsx b/packages/web/components/templates/LoginForm.tsx
index 2812c8428..c6f49e661 100644
--- a/packages/web/components/templates/LoginForm.tsx
+++ b/packages/web/components/templates/LoginForm.tsx
@@ -7,7 +7,6 @@ import {
   gauthRedirectURI,
   appleAuthRedirectURI,
 } from '../../lib/appConfig'
-import AppleLogin from 'react-apple-login'
 import { AppleIdButton } from './auth/AppleIdButton'
 
 export type LoginFormProps = {
diff --git a/packages/web/components/templates/LoginLayout.tsx b/packages/web/components/templates/LoginLayout.tsx
index 552317723..4c6bbe82a 100644
--- a/packages/web/components/templates/LoginLayout.tsx
+++ b/packages/web/components/templates/LoginLayout.tsx
@@ -81,16 +81,12 @@ function MediumLoginLayout(props: LoginFormProps) {
       >
         <LoginForm {...props} />
       </Box>
-      <OmnivoreIllustration isLargeLayout={true} />
+      <OmnivoreIllustration />
     </HStack>
   )
 }
 
-type OmnivoreIllustrationProps = {
-  isLargeLayout?: boolean
-}
-
-function OmnivoreIllustration({ isLargeLayout }: OmnivoreIllustrationProps) {
+function OmnivoreIllustration() {
   return (
     <Box
       css={{
diff --git a/packages/web/components/templates/PrimaryDropdown.tsx b/packages/web/components/templates/PrimaryDropdown.tsx
new file mode 100644
index 000000000..3cfa6e774
--- /dev/null
+++ b/packages/web/components/templates/PrimaryDropdown.tsx
@@ -0,0 +1,314 @@
+import { useRouter } from 'next/router'
+import { Moon, Sun } from 'phosphor-react'
+import { ReactNode, useCallback } from 'react'
+import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
+import { currentTheme, updateTheme } from '../../lib/themeUpdater'
+import { Avatar } from '../elements/Avatar'
+import { AvatarDropdown } from '../elements/AvatarDropdown'
+import {
+  Dropdown,
+  DropdownOption,
+  DropdownSeparator,
+} from '../elements/DropdownElements'
+import GridLayoutIcon from '../elements/images/GridLayoutIcon'
+import ListLayoutIcon from '../elements/images/ListLayoutIcon'
+import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
+import { StyledText } from '../elements/StyledText'
+import { styled, theme, ThemeId } from '../tokens/stitches.config'
+import { LayoutType } from './homeFeed/HomeFeedContainer'
+
+type PrimaryDropdownProps = {
+  children?: ReactNode
+  showThemeSection: boolean
+
+  layout?: LayoutType
+  updateLayout?: (layout: LayoutType) => void
+}
+
+export type HeaderDropdownAction =
+  | 'navigate-to-install'
+  | 'navigate-to-emails'
+  | 'navigate-to-labels'
+  | 'navigate-to-profile'
+  | 'navigate-to-subscriptions'
+  | 'navigate-to-api'
+  | 'navigate-to-integrations'
+  | 'increaseFontSize'
+  | 'decreaseFontSize'
+  | 'logout'
+
+export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
+  const { viewerData } = useGetViewerQuery()
+  const router = useRouter()
+
+  const headerDropdownActionHandler = useCallback(
+    (action: HeaderDropdownAction) => {
+      switch (action) {
+        case 'navigate-to-install':
+          router.push('/settings/installation')
+          break
+        case 'navigate-to-emails':
+          router.push('/settings/emails')
+          break
+        case 'navigate-to-labels':
+          router.push('/settings/labels')
+          break
+        case 'navigate-to-subscriptions':
+          router.push('/settings/subscriptions')
+          break
+        case 'navigate-to-api':
+          router.push('/settings/api')
+          break
+        case 'navigate-to-integrations':
+          router.push('/settings/integrations')
+          break
+        case 'logout':
+          document.dispatchEvent(new Event('logout'))
+          break
+        default:
+          break
+      }
+    },
+    [router]
+  )
+
+  if (!viewerData?.me) {
+    return <></>
+  }
+
+  return (
+    <Dropdown
+      triggerElement={
+        props.children ?? (
+          <AvatarDropdown userInitials={viewerData?.me?.name.charAt(0) ?? ''} />
+        )
+      }
+      css={{ width: '240px' }}
+    >
+      <HStack
+        alignment="center"
+        distribution="start"
+        css={{
+          width: '100%',
+          height: '64px',
+          p: '15px',
+          gap: '15px',
+        }}
+      >
+        <Avatar
+          imageURL={viewerData.me.profile.pictureUrl}
+          height="40px"
+          fallbackText={viewerData?.me?.name.charAt(0) ?? ''}
+        />
+        <VStack
+          css={{ height: '40px', maxWidth: '240px' }}
+          alignment="start"
+          distribution="around"
+        >
+          {viewerData.me && (
+            <>
+              <StyledText
+                css={{
+                  fontSize: '14px',
+                  fontWeight: '500',
+                  color: '$thTextContrast2',
+                  m: '0px',
+                  p: '0px',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {viewerData.me.name}
+              </StyledText>
+              <StyledText
+                css={{
+                  fontSize: '14px',
+                  fontWeight: '400',
+                  color: '#898989',
+                  m: '0px',
+                  p: '0px',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {`@${viewerData.me.profile.username}`}
+              </StyledText>
+            </>
+          )}
+        </VStack>
+      </HStack>
+      <DropdownSeparator />
+      {props.showThemeSection && <ThemeSection {...props} />}
+      <DropdownOption
+        onSelect={() => headerDropdownActionHandler('navigate-to-install')}
+        title="Install"
+      />
+      <DropdownOption
+        onSelect={() => headerDropdownActionHandler('navigate-to-emails')}
+        title="Emails"
+      />
+      <DropdownOption
+        onSelect={() => headerDropdownActionHandler('navigate-to-labels')}
+        title="Labels"
+      />
+      <DropdownOption
+        onSelect={() => headerDropdownActionHandler('navigate-to-api')}
+        title="API Keys"
+      />
+      <DropdownOption
+        onSelect={() => headerDropdownActionHandler('navigate-to-integrations')}
+        title="Integrations"
+      />
+      <DropdownOption
+        onSelect={() => window.open('https://docs.omnivore.app', '_blank')}
+        title="Documentation"
+      />
+      <DropdownOption
+        onSelect={() => window.Intercom('show')}
+        title="Feedback"
+      />
+      <DropdownSeparator />
+      <DropdownOption
+        onSelect={() => headerDropdownActionHandler('logout')}
+        title="Logout"
+      />
+    </Dropdown>
+  )
+}
+
+const StyledToggleButton = styled('button', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: '$thTextContrast2',
+  backgroundColor: 'transparent',
+  border: 'none',
+  cursor: 'pointer',
+  width: '70px',
+  height: '100%',
+  borderRadius: '5px',
+  fontSize: '12px',
+  fontFamily: '$inter',
+  gap: '5px',
+  m: '2px',
+  '&:hover': {
+    opacity: 0.8,
+  },
+  '&[data-state="on"]': {
+    bg: '$thBackground',
+  },
+})
+
+function ThemeSection(props: PrimaryDropdownProps): JSX.Element {
+  return (
+    <>
+      <VStack>
+        <HStack
+          alignment="center"
+          css={{
+            width: '100%',
+            px: '15px',
+            justifyContent: 'space-between',
+          }}
+        >
+          <StyledText
+            css={{
+              fontSize: '14px',
+              fontWeight: '400',
+              cursor: 'default',
+              color: '$utilityTextDefault',
+            }}
+          >
+            Mode
+          </StyledText>
+          <Box
+            css={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              bg: '$thBackground4',
+              borderRadius: '5px',
+              height: '34px',
+              p: '3px',
+              px: '1px',
+            }}
+          >
+            <StyledToggleButton
+              data-state={currentTheme() != ThemeId.Darker ? 'on' : 'off'}
+              onClick={() => {
+                updateTheme(ThemeId.Light)
+              }}
+            >
+              Light
+              <Sun size={15} color={theme.colors.thTextContrast2.toString()} />
+            </StyledToggleButton>
+            <StyledToggleButton
+              data-state={currentTheme() == ThemeId.Darker ? 'on' : 'off'}
+              onClick={() => {
+                updateTheme(ThemeId.Darker)
+              }}
+            >
+              Dark
+              <Moon size={15} color={theme.colors.thTextContrast2.toString()} />
+            </StyledToggleButton>
+          </Box>
+        </HStack>
+        {props.layout && (
+          <HStack
+            alignment="center"
+            css={{
+              width: '100%',
+              px: '15px',
+              justifyContent: 'space-between',
+            }}
+          >
+            <StyledText
+              css={{
+                fontSize: '14px',
+                fontWeight: '400',
+                cursor: 'default',
+                color: '$utilityTextDefault',
+              }}
+            >
+              Layout
+            </StyledText>
+            <Box
+              css={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                bg: '$thBackground4',
+                borderRadius: '5px',
+                height: '34px',
+                p: '3px',
+                px: '1px',
+              }}
+            >
+              <StyledToggleButton
+                data-state={props.layout == 'LIST_LAYOUT' ? 'on' : 'off'}
+                onClick={() => {
+                  props.updateLayout && props.updateLayout('LIST_LAYOUT')
+                }}
+              >
+                <ListLayoutIcon
+                  color={theme.colors.thTextContrast2.toString()}
+                />
+              </StyledToggleButton>
+              <StyledToggleButton
+                data-state={props.layout == 'GRID_LAYOUT' ? 'on' : 'off'}
+                onClick={() => {
+                  props.updateLayout && props.updateLayout('GRID_LAYOUT')
+                }}
+              >
+                <GridLayoutIcon
+                  color={theme.colors.thTextContrast2.toString()}
+                />
+              </StyledToggleButton>
+            </Box>
+          </HStack>
+        )}
+      </VStack>
+      <DropdownSeparator />
+    </>
+  )
+}
diff --git a/packages/web/components/templates/PrimaryLayout.tsx b/packages/web/components/templates/PrimaryLayout.tsx
index 30b652ea3..790dd7b2c 100644
--- a/packages/web/components/templates/PrimaryLayout.tsx
+++ b/packages/web/components/templates/PrimaryLayout.tsx
@@ -1,20 +1,15 @@
 import { PageMetaData, PageMetaDataProps } from '../patterns/PageMetaData'
 import { Box } from '../elements/LayoutPrimitives'
-import {
-  ReactNode,
-  MutableRefObject,
-  useEffect,
-  useState,
-} from 'react'
-import { PrimaryHeader } from './../patterns/PrimaryHeader'
+import { ReactNode, useEffect, useState, useCallback } from 'react'
 import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
 import { navigationCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
 import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardShortcuts'
 import { useRouter } from 'next/router'
-import { Analytics } from '@segment/analytics-next'
 import { ConfirmationModal } from '../patterns/ConfirmationModal'
 import { KeyboardShortcutListModal } from './KeyboardShortcutListModal'
 import { logoutMutation } from '../../lib/networking/mutations/logoutMutation'
+import { setupAnalytics } from '../../lib/analytics'
+import { primaryCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
 
 type PrimaryLayoutProps = {
   children: ReactNode
@@ -34,13 +29,25 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
 
   useKeyboardShortcuts(navigationCommands(router))
 
+  useKeyboardShortcuts(
+    primaryCommands((action) => {
+      switch (action) {
+        case 'toggleShortcutHelpModalDisplay':
+          setShowKeyboardCommandsModal(true)
+          break
+      }
+    })
+  )
+
   // Attempt to identify the user if they are logged in.
   useEffect(() => {
+    setupAnalytics(viewerData?.me)
+
     const user = window.analytics?.user().id()
     if (!user && viewerData?.me?.id) {
       window.analytics?.identify({ userId: viewerData?.me?.id })
     }
-  }, [viewerData?.me?.id])
+  }, [viewerData?.me])
 
   async function logout(): Promise<void> {
     await logoutMutation()
@@ -56,43 +63,37 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
     }
   }
 
+  const showLogout = useCallback(() => {
+    setShowLogoutConfirmation(true)
+  }, [setShowLogoutConfirmation])
+
+  useEffect(() => {
+    document.addEventListener('logout', showLogout)
+
+    return () => {
+      document.removeEventListener('logout', showLogout)
+    }
+  }, [showLogout])
+
   return (
     <>
       {props.pageMetaDataProps ? (
         <PageMetaData {...props.pageMetaDataProps} />
       ) : null}
-      <Box css={{
-        width: '100vw',
-        height: '100vh',
-        bg: 'transparent',
-        '@smDown': {
-          bg: '$grayBase',
-        }
-      }}>
-        <PrimaryHeader
-          user={viewerData?.me}
-          hideHeader={props.hideHeader}
-          userInitials={viewerData?.me?.name.charAt(0) ?? ''}
-          profileImageURL={viewerData?.me?.profile.pictureUrl}
-          isTransparent={true}
-          toolbarControl={props.headerToolbarControl}
-          alwaysDisplayToolbar={props.alwaysDisplayToolbar}
-          setShowLogoutConfirmation={setShowLogoutConfirmation}
-          setShowKeyboardCommandsModal={setShowKeyboardCommandsModal}
-        />
+      <Box
+        css={{
+          width: '100vw',
+          height: '100vh',
+          bg: 'transparent',
+        }}
+      >
         <Box
           css={{
             height: '100%',
             width: '100vw',
-            bg: '$grayBase',
+            bg: '$thBackground2',
           }}
         >
-          <Box
-          css={{
-            height: '48px',
-            bg: '$grayBase',
-          }}
-        ></Box>
           {props.children}
           {showLogoutConfirmation ? (
             <ConfirmationModal
diff --git a/packages/web/components/templates/article/Article.tsx b/packages/web/components/templates/article/Article.tsx
index a9e17f885..c2fed68ca 100644
--- a/packages/web/components/templates/article/Article.tsx
+++ b/packages/web/components/templates/article/Article.tsx
@@ -4,14 +4,7 @@ import {
   ScrollOffsetChangeset,
   useScrollWatcher,
 } from '../../../lib/hooks/useScrollWatcher'
-import {
-  MutableRefObject,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react'
 import { Tweet } from 'react-twitter-widgets'
 import { render } from 'react-dom'
 import { isDarkTheme } from '../../../lib/themeUpdater'
@@ -97,28 +90,6 @@ export function Article(props: ArticleProps): JSX.Element {
     }
   }, 1000)
 
-  const layoutImages = useCallback(
-    (image: HTMLImageElement, container: HTMLDivElement | null) => {
-      if (!container) return
-      const containerWidth = container.clientWidth + 140
-
-      if (!image.closest('blockquote, table')) {
-        let imageWidth = parseFloat(image.getAttribute('width') || '')
-        imageWidth = isNaN(imageWidth) ? image.naturalWidth : imageWidth
-
-        if (imageWidth > containerWidth) {
-          image.style.setProperty(
-            'width',
-            `${Math.min(imageWidth, containerWidth)}px`
-          )
-          image.style.setProperty('max-width', 'unset')
-          image.style.setProperty('margin-left', `-${Math.round(140 / 2)}px`)
-        }
-      }
-    },
-    []
-  )
-
   // Scroll to initial anchor position
   useEffect(() => {
     if (typeof window === 'undefined') {
@@ -193,22 +164,6 @@ export function Article(props: ArticleProps): JSX.Element {
     })
   }, [])
 
-  const onLoadImageHandler = useCallback(() => {
-    const images = articleContentRef.current?.querySelectorAll('img')
-
-    images?.forEach((image) => {
-      layoutImages(image, articleContentRef.current)
-    })
-  }, [layoutImages])
-
-  useEffect(() => {
-    window.addEventListener('load', onLoadImageHandler)
-
-    return () => {
-      window.removeEventListener('load', onLoadImageHandler)
-    }
-  }, [onLoadImageHandler])
-
   return (
     <>
       <link
diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx
index 21ca539e9..2e1b6d133 100644
--- a/packages/web/components/templates/article/ArticleActionsMenu.tsx
+++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx
@@ -1,21 +1,17 @@
 import { Separator } from '@radix-ui/react-separator'
 import {
   ArchiveBox,
-  DotsThree,
   HighlighterCircle,
+  Info,
   TagSimple,
-  TextAa,
   Trash,
   Tray,
 } from 'phosphor-react'
 import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
 import { Button } from '../../elements/Button'
-import { Dropdown } from '../../elements/DropdownElements'
 import { Box, SpanBox } from '../../elements/LayoutPrimitives'
 import { TooltipWrapped } from '../../elements/Tooltip'
 import { styled, theme } from '../../tokens/stitches.config'
-import { SetLabelsControl } from './SetLabelsControl'
-import { DisplaySettingsModal } from './DisplaySettingsModal'
 import { useReaderSettings } from '../../../lib/hooks/useReaderSettings'
 import { useRef } from 'react'
 import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation'
@@ -39,40 +35,12 @@ const MenuSeparator = (props: MenuSeparatorProps): JSX.Element => {
   const LineSeparator = styled(Separator, {
     width: '100%',
     margin: 0,
-    borderBottom: `1px solid ${theme.colors.grayLine.toString()}`,
+    borderBottom: `1px solid ${theme.colors.thHighContrast.toString()}`,
     my: '8px',
   })
   return props.layout == 'side' ? <LineSeparator /> : <></>
 }
 
-type ActionDropdownProps = {
-  layout: ArticleActionsMenuLayout
-  triggerElement: JSX.Element
-  children: JSX.Element
-}
-
-const ActionDropdown = (props: ActionDropdownProps): JSX.Element => {
-  return (
-    <Dropdown
-      css={{
-        m: '0px',
-        p: '0px',
-        overflow: 'hidden',
-        width: '265px',
-        maxWidth: '265px',
-        '@smDown': { width: '230px' },
-      }}
-      side={props.layout == 'side' ? 'right' : 'bottom'}
-      sideOffset={props.layout == 'side' ? 8 : 0}
-      align={props.layout == 'side' ? 'start' : 'center'}
-      alignOffset={props.layout == 'side' ? -18 : undefined}
-      triggerElement={props.triggerElement}
-    >
-      {props.children}
-    </Dropdown>
-  )
-}
-
 export function ArticleActionsMenu(
   props: ArticleActionsMenuProps
 ): JSX.Element {
@@ -87,32 +55,15 @@ export function ArticleActionsMenu(
           alignItems: 'center',
           flexDirection: props.layout == 'side' ? 'column' : 'row',
           justifyContent: props.layout == 'side' ? 'center' : 'flex-end',
-          gap: props.layout == 'side' ? '8px' : '24px',
+          gap: props.layout == 'side' ? '15px' : '25px',
           paddingTop: '6px',
         }}
       >
-        {props.showReaderDisplaySettings && (
-          <>
-            <Button
-              style="articleActionIcon"
-              onClick={() =>
-                readerSettings.setShowEditDisplaySettingsModal(true)
-              }
-            >
-              <TooltipWrapped
-                tooltipContent="Adjust Display Settings"
-                tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
-              >
-                <TextAa size={24} color={theme.colors.readerFont.toString()} />
-              </TooltipWrapped>
-            </Button>
-            <MenuSeparator layout={props.layout} />
-          </>
-        )}
         <SpanBox
           css={{
             display: 'flex',
-            '@smDown': {
+            alignItems: 'center',
+            '@mdDown': {
               display: 'none',
             },
           }}
@@ -130,7 +81,7 @@ export function ArticleActionsMenu(
                   <SpanBox ref={displaySettingsButtonRef}>
                     <TagSimple
                       size={24}
-                      color={theme.colors.readerFont.toString()}
+                      color={theme.colors.thHighContrast.toString()}
                     />
                   </SpanBox>
                 </TooltipWrapped>
@@ -138,36 +89,6 @@ export function ArticleActionsMenu(
               <MenuSeparator layout={props.layout} />
             </>
           ) : (
-            // <ActionDropdown
-            //   layout={props.layout}
-            //   triggerElement={
-            //     <TooltipWrapped
-            //       tooltipContent="Edit labels"
-            //       tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
-            //     >
-            //       <TagSimple
-            //         size={24}
-            //         color={theme.colors.readerFont.toString()}
-            //       />
-            //     </TooltipWrapped>
-            //   }
-            // >
-            //   <SetLabelsControl
-            //     provider={props.article}
-            //     save={(labels: Label[]) => {
-            //       if (props.article?.id) {
-            //         return setLabelsMutation(
-            //           props.article?.id,
-            //           labels.map((label) => label.id)
-            //         )
-            //       }
-            //       return Promise.resolve(undefined)
-            //     }}
-            //     onLabelsChanged={(labels) => {
-            //       props.articleActionHandler('refreshLabels', labels)
-            //     }}
-            //   />
-            // </ActionDropdown>
             <Button
               style="articleActionIcon"
               css={{
@@ -176,7 +97,10 @@ export function ArticleActionsMenu(
                 },
               }}
             >
-              <TagSimple size={24} color={theme.colors.readerFont.toString()} />
+              <TagSimple
+                size={24}
+                color={theme.colors.thHighContrast.toString()}
+              />
             </Button>
           )}
         </SpanBox>
@@ -186,17 +110,22 @@ export function ArticleActionsMenu(
           onClick={() => props.articleActionHandler('setLabels')}
           css={{
             display: 'none',
-            '@smDown': {
+            '@mdDown': {
               display: 'flex',
+              alignItems: 'center',
             },
           }}
         >
-          <TagSimple size={24} color={theme.colors.readerFont.toString()} />
+          <TagSimple size={24} color={theme.colors.thHighContrast.toString()} />
         </Button>
 
         <Button
           style="articleActionIcon"
           onClick={() => props.articleActionHandler('showHighlights')}
+          css={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
         >
           <TooltipWrapped
             tooltipContent="View Highlights"
@@ -204,11 +133,30 @@ export function ArticleActionsMenu(
           >
             <HighlighterCircle
               size={24}
-              color={theme.colors.readerFont.toString()}
+              color={theme.colors.thHighContrast.toString()}
             />
           </TooltipWrapped>
         </Button>
 
+        <Button
+          style="articleActionIcon"
+          onClick={() => props.articleActionHandler('showEditModal')}
+          css={{
+            display: 'flex',
+            alignItems: 'center',
+            '@mdDown': {
+              display: 'none',
+            },
+          }}
+        >
+          <TooltipWrapped
+            tooltipContent="Edit title & description"
+            tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
+          >
+            <Info size={24} color={theme.colors.thHighContrast.toString()} />
+          </TooltipWrapped>
+        </Button>
+
         <MenuSeparator layout={props.layout} />
 
         <Button
@@ -216,12 +164,19 @@ export function ArticleActionsMenu(
           onClick={() => {
             props.articleActionHandler('delete')
           }}
+          css={{
+            display: 'flex',
+            alignItems: 'center',
+            '@mdDown': {
+              display: 'none',
+            },
+          }}
         >
           <TooltipWrapped
             tooltipContent="Delete"
             tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
           >
-            <Trash size={24} color={theme.colors.readerFont.toString()} />
+            <Trash size={24} color={theme.colors.thHighContrast.toString()} />
           </TooltipWrapped>
         </Button>
 
@@ -229,6 +184,10 @@ export function ArticleActionsMenu(
           <Button
             style="articleActionIcon"
             onClick={() => props.articleActionHandler('archive')}
+            css={{
+              display: 'flex',
+              alignItems: 'center',
+            }}
           >
             <TooltipWrapped
               tooltipContent="Archive"
@@ -236,7 +195,7 @@ export function ArticleActionsMenu(
             >
               <ArchiveBox
                 size={24}
-                color={theme.colors.readerFont.toString()}
+                color={theme.colors.thHighContrast.toString()}
               />
             </TooltipWrapped>
           </Button>
@@ -249,7 +208,7 @@ export function ArticleActionsMenu(
               tooltipContent="Unarchive"
               tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
             >
-              <Tray size={24} color={theme.colors.readerFont.toString()} />
+              <Tray size={24} color={theme.colors.thHighContrast.toString()} />
             </TooltipWrapped>
           </Button>
         )}
@@ -259,16 +218,6 @@ export function ArticleActionsMenu(
         <DotsThree size={24} color={theme.colors.readerFont.toString()} />
       </Button> */}
       </Box>
-      {readerSettings.showEditDisplaySettingsModal && (
-        <DisplaySettingsModal
-          centerX={props.layout != 'side'}
-          triggerElementRef={displaySettingsButtonRef}
-          articleActionHandler={props.articleActionHandler}
-          onOpenChange={() =>
-            readerSettings.setShowEditDisplaySettingsModal(false)
-          }
-        />
-      )}
 
       {props.article && readerSettings.showSetLabelsModal && (
         <SetLabelsModal
diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx
index 33d488b72..93f427d7e 100644
--- a/packages/web/components/templates/article/ArticleContainer.tsx
+++ b/packages/web/components/templates/article/ArticleContainer.tsx
@@ -2,7 +2,10 @@ import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticle
 import { Article } from './../../../components/templates/article/Article'
 import { Box, HStack, SpanBox, VStack } from './../../elements/LayoutPrimitives'
 import { StyledText } from './../../elements/StyledText'
-import { ArticleSubtitle } from './../../patterns/ArticleSubtitle'
+import {
+  ArticleSubtitle,
+  ReaderSavedInfo,
+} from './../../patterns/ArticleSubtitle'
 import { theme, ThemeId } from './../../tokens/stitches.config'
 import { HighlightsLayer } from '../../templates/article/HighlightsLayer'
 import { Button } from '../../elements/Button'
@@ -16,6 +19,7 @@ import { LabelChip } from '../../elements/LabelChip'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
 import { Recommendation } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { Avatar } from '../../elements/Avatar'
+import { usePersistedState } from '../../../lib/hooks/usePersistedState'
 
 type ArticleContainerProps = {
   article: ArticleAttributes
@@ -29,8 +33,9 @@ type ArticleContainerProps = {
   fontFamily?: string
   lineHeight?: number
   maxWidthPercentage?: number
-  highContrastFont?: boolean
+  highContrastText?: boolean
   showHighlightsModal: boolean
+  justifyText?: boolean
   setShowHighlightsModal: React.Dispatch<React.SetStateAction<boolean>>
 }
 
@@ -68,7 +73,7 @@ const RecommendationComments = (
         </StyledText>
       </HStack>
 
-      {props.recommendationsWithNotes.map((item, idx) => (
+      {props.recommendationsWithNotes.map((item) => (
         <VStack
           key={item.id}
           alignment="start"
@@ -86,7 +91,6 @@ const RecommendationComments = (
               <Avatar
                 imageURL={item.user?.profileImageURL}
                 height="28px"
-                noFade={true}
                 tooltip={item.user?.name}
                 fallbackText={item.user?.username[0] ?? 'U'}
               />
@@ -114,8 +118,8 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
   const [fontFamilyOverride, setFontFamilyOverride] = useState<string | null>(
     null
   )
-  const [highContrastFont, setHighContrastFont] = useState(
-    props.highContrastFont ?? false
+  const [highContrastText, setHighContrastText] = useState(
+    props.highContrastText ?? false
   )
   const highlightHref = useRef(
     window.location.hash ? window.location.hash.split('#')[1] : null
@@ -164,7 +168,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
     const updateFontFamily = (event: UpdateFontFamilyEvent) => {
       const newFontFamily =
         event.fontFamily ?? fontFamilyOverride ?? props.fontFamily ?? 'inter'
-      console.log('setting font fam to', event.fontFamily)
       setFontFamilyOverride(newFontFamily)
     }
 
@@ -174,7 +177,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
 
     const handleFontContrastChange = async (event: UpdateFontContrastEvent) => {
       const highContrast = event.fontContrast == 'high'
-      setHighContrastFont(highContrast)
+      setHighContrastText(highContrast)
     }
 
     interface UpdateFontSizeEvent extends Event {
@@ -256,7 +259,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
     maxWidthPercentage: maxWidthPercentageOverride ?? props.maxWidthPercentage,
     lineHeight: lineHeightOverride ?? props.lineHeight ?? 150,
     fontFamily: fontFamilyOverride ?? props.fontFamily ?? 'inter',
-    readerFontColor: highContrastFont
+    readerFontColor: highContrastText
       ? theme.colors.readerFontHighContrast.toString()
       : theme.colors.readerFont.toString(),
     readerTableHeaderColor: theme.colors.readerTableHeader.toString(),
@@ -277,10 +280,14 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
         id="article-container"
         css={{
           padding: '16px',
+          paddingTop: '80px',
           maxWidth: `${styles.maxWidthPercentage ?? 100}%`,
           background: props.isAppleAppEmbed
             ? 'unset'
             : theme.colors.readerBg.toString(),
+          '.article-inner-css': {
+            textAlign: props.justifyText ? 'justify' : 'start',
+          },
           '--text-font-family': styles.fontFamily,
           '--text-font-size': `${styles.fontSize}px`,
           '--line-height': `${styles.lineHeight}%`,
@@ -296,7 +303,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
             '--blockquote-icon-font-size': '1.7rem',
             '--figure-margin': '2.6875rem auto',
             '--hr-margin': '2em',
-            margin: `30px 0px`,
+            margin: `0px 0px`,
           },
           '@md': {
             maxWidth: styles.maxWidthPercentage
@@ -306,6 +313,11 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
         }}
       >
         <VStack alignment="start" distribution="start">
+          <ReaderSavedInfo
+            rawDisplayDate={
+              props.article.publishedAt ?? props.article.createdAt
+            }
+          />
           <StyledText
             style="boldHeadline"
             data-testid="article-headline"
@@ -318,9 +330,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
             {props.article.title}
           </StyledText>
           <ArticleSubtitle
-            rawDisplayDate={
-              props.article.publishedAt ?? props.article.createdAt
-            }
             author={props.article.author}
             href={props.article.url}
           />
@@ -397,18 +406,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
           onOpenChange={(open: boolean) => setShowReportIssuesModal(open)}
         />
       ) : null}
-      {/* {showShareModal && (
-        <ShareArticleModal
-          url={`${webBaseURL}/${props.viewerUsername}/${props.article.slug}/highlights?r=true`}
-          title={props.article.title}
-          imageURL={props.article.image}
-          author={props.article.author}
-          publishedAt={props.article.publishedAt ?? props.article.createdAt}
-          description={props.article.description}
-          originalArticleUrl={props.article.originalArticleUrl}
-          onOpenChange={(open: boolean) => setShowShareModal(open)}
-        />
-      )} */}
     </>
   )
 }
diff --git a/packages/web/components/templates/article/ArticleHeaderToolbar.tsx b/packages/web/components/templates/article/ArticleHeaderToolbar.tsx
deleted file mode 100644
index f7ca4cf51..000000000
--- a/packages/web/components/templates/article/ArticleHeaderToolbar.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { useCallback } from 'react'
-import { CommentIcon } from '../../elements/images/CommentIcon'
-import { CopyLinkIcon } from '../../elements/images/CopyLinkIcon'
-import { PostIcon } from '../../elements/images/PostIcon'
-import { ShareIcon } from '../../elements/images/ShareIcon'
-import { HStack } from './../../elements/LayoutPrimitives'
-import { useCopyLink } from '../../../lib/hooks/useCopyLink'
-import { Button } from '../../elements/Button'
-import { theme } from './../../tokens/stitches.config'
-import { StyledText } from './../../elements/StyledText'
-import { useCanShareNative } from '../../../lib/hooks/useCanShareNative'
-
-type ArticleHeaderToolbarProps = {
-  articleTitle: string
-  articleShareURL: string
-  hasHighlights: boolean
-  setShowHighlightsModal: React.Dispatch<React.SetStateAction<boolean>>
-  setShowShareArticleModal: (showShareModal: boolean) => void
-}
-
-export function ArticleHeaderToolbar(
-  props: ArticleHeaderToolbarProps
-): JSX.Element {
-  const enablePostAction = false // disable for now
-  const { copyLink, isLinkCopied } = useCopyLink(props.articleShareURL, 'link')
-  const canShareNative = useCanShareNative()
-
-  const shareAction = useCallback(() => {
-    if (canShareNative) {
-      navigator
-        ?.share({
-          title: props.articleTitle,
-          url: props.articleShareURL,
-        })
-        .then(() => {
-          return
-        })
-        .catch(() => {
-          return
-        })
-    } else {
-      props.setShowShareArticleModal(true)
-    }
-  }, [props, canShareNative])
-
-  return (
-    <HStack distribution="between" alignment="center" css={{ gap: '$2' }}>
-      {props.hasHighlights && (
-        <Button
-          style="plainIcon"
-          onClick={() => {
-            if (props.setShowHighlightsModal) {
-              props.setShowHighlightsModal(true)
-            }
-          }}
-          title="Notebook"
-        >
-          <CommentIcon
-            size={24}
-            strokeColor={theme.colors.grayTextContrast.toString()}
-          />
-        </Button>
-      )}
-      {/* <Button style="plainIcon" onClick={copyLink} title="Copy Link">
-        <CopyLinkIcon
-          isCompleted={isLinkCopied}
-          strokeColor={theme.colors.grayTextContrast.toString()}
-        />
-      </Button>
-      {enablePostAction ? (
-        <Button style="plainIcon" onClick={() => console.log('post action')} title="Post to Profile">
-          <PostIcon
-            isCompleted={false}
-            size={24}
-            strokeColor={theme.colors.grayTextContrast.toString()}
-          />
-        </Button>
-      ) : null}
-      <Button style="plainIcon" onClick={() => shareAction()} title="Share">
-        <ShareIcon
-          isCompleted={false}
-          size={24}
-          strokeColor={theme.colors.grayTextContrast.toString()}
-        />
-      </Button>
-      {isLinkCopied ? (
-        <StyledText style="caption" css={{ m: 0, p: 0 }}>
-          Link Copied
-        </StyledText>
-      ) : null} */}
-    </HStack>
-  )
-}
diff --git a/packages/web/components/templates/article/DisplaySettingsModal.tsx b/packages/web/components/templates/article/DisplaySettingsModal.tsx
index 80d506624..b0a3177d0 100644
--- a/packages/web/components/templates/article/DisplaySettingsModal.tsx
+++ b/packages/web/components/templates/article/DisplaySettingsModal.tsx
@@ -1,31 +1,35 @@
+import { ReaderSettings } from '../../../lib/hooks/useReaderSettings'
 import { VStack } from '../../elements/LayoutPrimitives'
 import {
   ModalRoot,
-  ModalOverlay,
   ModalContent,
+  ModalOverlay,
 } from '../../elements/ModalPrimitives'
 import { ReaderSettingsControl } from './ReaderSettingsControl'
 
-
 type DisplaySettingsModalProps = {
   centerX: boolean
   onOpenChange: (open: boolean) => void
   triggerElementRef?: React.RefObject<HTMLElement>
-  articleActionHandler: (action: string, arg?: number | string) => void
+  readerSettings: ReaderSettings
 }
 
-export function DisplaySettingsModal(props: DisplaySettingsModalProps): JSX.Element {
-  const top = props.triggerElementRef?.current?.getBoundingClientRect().bottom ?? 0
-  const left = props.triggerElementRef?.current?.getBoundingClientRect().left ?? 0
-
+export function DisplaySettingsModal(
+  props: DisplaySettingsModalProps
+): JSX.Element {
   return (
     <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
+      <ModalOverlay />
       <ModalContent
         css={{
-          width: '245px',
-          top: props.triggerElementRef?.current ? top : '50%',
-          left: props.triggerElementRef?.current ? (left - (props.centerX ? 265 / 2 : 0)) : '50%',
-          transform: props.triggerElementRef?.current ? 'unset' : 'translate(-50%, -50%)',
+          width: '345px',
+          padding: '0px',
+          top: '300px',
+          left: 'calc(100% - 250px)',
+          '@lgDown': {
+            top: '300px',
+            left: '50%',
+          },
         }}
         onPointerDownOutside={(event) => {
           event.preventDefault()
@@ -33,9 +37,7 @@ export function DisplaySettingsModal(props: DisplaySettingsModalProps): JSX.Elem
         }}
       >
         <VStack css={{ width: '100%' }}>
-          <ReaderSettingsControl
-            articleActionHandler={props.articleActionHandler}
-          />
+          <ReaderSettingsControl readerSettings={props.readerSettings} />
         </VStack>
       </ModalContent>
     </ModalRoot>
diff --git a/packages/web/components/templates/article/FontFamiliesOptions.tsx b/packages/web/components/templates/article/FontFamiliesOptions.tsx
index ab0070916..c119d219c 100644
--- a/packages/web/components/templates/article/FontFamiliesOptions.tsx
+++ b/packages/web/components/templates/article/FontFamiliesOptions.tsx
@@ -1,7 +1,7 @@
 import { HStack, Box } from '../../elements/LayoutPrimitives'
 import { StyledText } from '../../elements/StyledText'
 import { theme } from '../../tokens/stitches.config'
-import { CaretLeft, Check, CheckCircle } from 'phosphor-react'
+import { CaretLeft, Check } from 'phosphor-react'
 
 const FONT_FAMILIES = [
   'Inter',
@@ -12,7 +12,7 @@ const FONT_FAMILIES = [
   'Roboto',
   'Crimson Text',
   'OpenDyslexic',
-  'Source Serif Pro'
+  'Source Serif Pro',
 ]
 
 type FontFamiliesListProps = {
@@ -27,18 +27,28 @@ type FontOptionProps = {
   onSelect: (value: string) => void
 }
 
-function FontOption(props: FontOptionProps):JSX.Element {
+function FontOption(props: FontOptionProps): JSX.Element {
   const isSelected = props.selected === props.family
   return (
-    <HStack distribution='between' alignment='start' css={{ width: '100%', pt: '14px' }}>
+    <HStack
+      distribution="between"
+      alignment="start"
+      css={{ width: '100%', pt: '14px' }}
+    >
       <StyledText
-        css={{ m: '0px', fontSize: 16, fontFamily: props.family, textTransform: 'capitalize', cursor: 'pointer' }}
+        css={{
+          m: '0px',
+          fontSize: 16,
+          fontFamily: props.family,
+          textTransform: 'capitalize',
+          cursor: 'pointer',
+        }}
         onClick={() => props.onSelect(props.family)}
       >
         {props.family}
       </StyledText>
       {isSelected && (
-        <Check color={theme.colors.grayTextContrast.toString()} weight='bold' />
+        <Check color={theme.colors.grayTextContrast.toString()} weight="bold" />
       )}
     </HStack>
   )
@@ -47,22 +57,50 @@ function FontOption(props: FontOptionProps):JSX.Element {
 export function FontFamiliesOptions(props: FontFamiliesListProps): JSX.Element {
   return (
     <>
-      <Box css={{borderBottom: `1px solid ${theme.colors.grayLine.toString()}`, width: '100%'}}>
-        <HStack alignment='center' distribution='between' css={{width: '100%', py: 10, px: 15}}>
+      <Box
+        css={{
+          borderBottom: `1px solid ${theme.colors.grayLine.toString()}`,
+          width: '100%',
+        }}
+      >
+        <HStack
+          alignment="center"
+          distribution="between"
+          css={{ width: '100%', py: 10, px: 15 }}
+        >
           <HStack
-            alignment='center'
-            distribution='start'
+            alignment="center"
+            distribution="start"
             css={{ cursor: 'pointer', py: '4px', width: '100%' }}
             onClick={() => props.setShowFontFamilies(false)}
           >
-            <CaretLeft color={theme.colors.utilityTextSubtle.toString()} size={15} />
-            <StyledText css={{ textAlign: 'center', m: 0, fontSize: 14, fontWeight: 'bold', width: '100%', wordWrap: 'revert' }}>Choose Font</StyledText>
+            <CaretLeft
+              color={theme.colors.utilityTextSubtle.toString()}
+              size={15}
+            />
+            <StyledText
+              css={{
+                textAlign: 'center',
+                m: 0,
+                fontSize: 14,
+                fontWeight: 'bold',
+                width: '100%',
+                wordWrap: 'revert',
+              }}
+            >
+              Choose Font
+            </StyledText>
           </HStack>
         </HStack>
       </Box>
       <Box css={{ px: 15, pb: 15, width: '100%' }}>
         {FONT_FAMILIES.map((family) => (
-          <FontOption selected={props.selected} family={family} onSelect={props.onSelect} key={`font-${family}`} />
+          <FontOption
+            selected={props.selected}
+            family={family}
+            onSelect={props.onSelect}
+            key={`font-${family}`}
+          />
         ))}
       </Box>
     </>
diff --git a/packages/web/components/templates/article/HighlightHoverCard.tsx b/packages/web/components/templates/article/HighlightHoverCard.tsx
new file mode 100644
index 000000000..ccaa5a3cd
--- /dev/null
+++ b/packages/web/components/templates/article/HighlightHoverCard.tsx
@@ -0,0 +1,37 @@
+import { Box } from '../../elements/LayoutPrimitives'
+import { theme } from '../../tokens/stitches.config'
+import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
+import { HighlightView } from '../../patterns/HighlightView'
+
+type PageCoordinates = {
+  pageX: number
+  pageY: number
+}
+
+type HighlightHoverCardProps = {
+  highlight: Highlight
+  anchorCoordinates: PageCoordinates
+}
+
+export function HighlightHoverCard(
+  props: HighlightHoverCardProps
+): JSX.Element {
+  return (
+    <Box
+      css={{
+        width: '100%',
+        maxWidth: '330px',
+        // height: '48px',
+        position: 'absolute',
+        background: '$grayBg',
+        borderRadius: '4px',
+        border: '1px solid $grayBorder',
+        boxShadow: theme.shadows.cardBoxShadow.toString(),
+        left: props.anchorCoordinates.pageX,
+        top: props.anchorCoordinates.pageY,
+      }}
+    >
+      <HighlightView highlight={props.highlight} />
+    </Box>
+  )
+}
diff --git a/packages/web/components/templates/article/HighlightNoteModal.tsx b/packages/web/components/templates/article/HighlightNoteModal.tsx
index 9c36fecf7..a2049506e 100644
--- a/packages/web/components/templates/article/HighlightNoteModal.tsx
+++ b/packages/web/components/templates/article/HighlightNoteModal.tsx
@@ -5,19 +5,12 @@ import {
   ModalTitleBar,
   ModalButtonBar,
 } from './../../elements/ModalPrimitives'
-import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
-import { Button } from '../../elements/Button'
-import { StyledText } from '../../elements/StyledText'
-import { CommentIcon } from '../../elements/images/CommentIcon'
-import { theme } from '../../tokens/stitches.config'
+import { VStack } from '../../elements/LayoutPrimitives'
 import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
 import { useCallback, useState } from 'react'
 import { StyledTextArea } from '../../elements/StyledTextArea'
 import { updateHighlightMutation } from '../../../lib/networking/mutations/updateHighlightMutation'
-import { readableUpdatedAtMessage } from './../../../lib/dateFormatting'
-import { useConfirmListener } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
 import { showErrorToast } from '../../../lib/toastHelpers'
-import { CrossIcon } from '../../elements/images/CrossIcon'
 
 type HighlightNoteModalProps = {
   author: string
@@ -35,18 +28,6 @@ export function HighlightNoteModal(
     props.highlight?.annotation ?? ''
   )
 
-  useConfirmListener(
-    () => {
-      saveNoteChanges()
-    },
-    undefined,
-    true
-  )
-
-  const updatedAtMessage = props.highlight
-    ? readableUpdatedAtMessage(props.highlight?.updatedAt)
-    : undefined
-
   const handleNoteContentChange = useCallback(
     (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
       setNoteContent(event.target.value)
diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx
index b88a2af4a..6ee2145eb 100644
--- a/packages/web/components/templates/article/HighlightsLayer.tsx
+++ b/packages/web/components/templates/article/HighlightsLayer.tsx
@@ -18,7 +18,6 @@ import { HighlightBar, HighlightAction } from '../../patterns/HighlightBar'
 import { removeHighlights } from '../../../lib/highlights/deleteHighlight'
 import { createHighlight } from '../../../lib/highlights/createHighlight'
 import { HighlightNoteModal } from './HighlightNoteModal'
-import { ShareHighlightModal } from './ShareHighlightModal'
 import { NotebookModal } from './NotebookModal'
 import { useCanShareNative } from '../../../lib/hooks/useCanShareNative'
 import { showErrorToast } from '../../../lib/toastHelpers'
@@ -69,18 +68,54 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
   >([])
   const focusedHighlightMousePos = useRef({ pageX: 0, pageY: 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 canShareNative = useCanShareNative()
 
+  const createHighlightFromSelection = async (
+    selection: SelectionAttributes,
+    note?: string
+  ): Promise<Highlight | undefined> => {
+    const result = await createHighlight(
+      {
+        selection: selection,
+        articleId: props.articleId,
+        existingHighlights: highlights,
+        highlightStartEndOffsets: highlightLocations,
+        annotation: note,
+        highlightPositionPercent: selectionPercentPos(selection.selection),
+        highlightPositionAnchorIndex: selectionAnchorIndex(selection.selection),
+      },
+      props.articleMutations
+    )
+
+    if (result.errorMessage) {
+      throw 'Failed to create highlight: ' + result.errorMessage
+    }
+
+    if (!result.highlights || result.highlights.length == 0) {
+      // TODO: show an error message
+      console.error('Failed to create highlight')
+      return undefined
+    }
+
+    setSelectionData(null)
+    setHighlights(result.highlights)
+
+    if (result.newHighlightIndex === undefined) {
+      setHighlightModalAction({ highlightModalAction: 'none' })
+      return undefined
+    }
+
+    return result.highlights[result.newHighlightIndex]
+  }
+
   // Load the highlights
   useEffect(() => {
     const res: HighlightLocation[] = []
@@ -105,7 +140,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
         anchorElement.scrollIntoView({ behavior: 'auto' })
       }
     }
-  }, [highlights, setHighlightLocations])
+  }, [highlights, setHighlightLocations, props.scrollToHighlight])
 
   const removeHighlightCallback = useCallback(
     async (id?: string) => {
@@ -130,7 +165,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
         console.error('Failed to delete highlight')
       }
     },
-    [focusedHighlight, highlights, highlightLocations]
+    [focusedHighlight, highlights, highlightLocations, props.articleMutations]
   )
 
   const updateHighlightsCallback = useCallback(
@@ -224,44 +259,6 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
     return undefined
   }
 
-  const createHighlightFromSelection = async (
-    selection: SelectionAttributes,
-    note?: string
-  ): Promise<Highlight | undefined> => {
-    const result = await createHighlight(
-      {
-        selection: selection,
-        articleId: props.articleId,
-        existingHighlights: highlights,
-        highlightStartEndOffsets: highlightLocations,
-        annotation: note,
-        highlightPositionPercent: selectionPercentPos(selection.selection),
-        highlightPositionAnchorIndex: selectionAnchorIndex(selection.selection),
-      },
-      props.articleMutations
-    )
-
-    if (result.errorMessage) {
-      throw 'Failed to create highlight: ' + result.errorMessage
-    }
-
-    if (!result.highlights || result.highlights.length == 0) {
-      // TODO: show an error message
-      console.error('Failed to create highlight')
-      return undefined
-    }
-
-    setSelectionData(null)
-    setHighlights(result.highlights)
-
-    if (result.newHighlightIndex === undefined) {
-      setHighlightModalAction({ highlightModalAction: 'none' })
-      return undefined
-    }
-
-    return result.highlights[result.newHighlightIndex]
-  }
-
   const createHighlightCallback = useCallback(
     async (successAction: HighlightModalAction, annotation?: string) => {
       if (!selectionData) {
@@ -354,7 +351,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
         setFocusedHighlight(undefined)
       }
     },
-    [highlights, highlightLocations]
+    [highlights, highlightLocations, openNoteModal]
   )
 
   useEffect(() => {
@@ -441,6 +438,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
       props.isAppleAppEmbed,
       removeHighlightCallback,
       canShareNative,
+      selectionData,
     ]
   )
 
@@ -601,7 +599,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
     return (
       <SetLabelsModal
         provider={labelsTarget}
-        onOpenChange={function (open: boolean): void {
+        onOpenChange={function (): void {
           setLabelsTarget(undefined)
         }}
         save={function (labels: Label[]): Promise<Label[] | undefined> {
@@ -615,23 +613,6 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
     )
   }
 
-  if (
-    highlightModalAction?.highlightModalAction == 'share' &&
-    highlightModalAction.highlight
-  ) {
-    return (
-      <ShareHighlightModal
-        url={`${props.highlightsBaseURL}/${highlightModalAction.highlight.shortId}`}
-        title={props.articleTitle}
-        author={props.articleAuthor}
-        highlight={highlightModalAction.highlight}
-        onOpenChange={() => {
-          setHighlightModalAction({ highlightModalAction: 'none' })
-        }}
-      />
-    )
-  }
-
   // Display the button bar if we are not in the native app and there
   // is a focused highlight or selection data
   if (!props.highlightBarDisabled && (focusedHighlight || selectionData)) {
diff --git a/packages/web/components/templates/article/NotebookModal.tsx b/packages/web/components/templates/article/NotebookModal.tsx
index 52a6c19eb..6dadb8030 100644
--- a/packages/web/components/templates/article/NotebookModal.tsx
+++ b/packages/web/components/templates/article/NotebookModal.tsx
@@ -4,20 +4,14 @@ import {
   ModalContent,
   ModalTitleBar,
 } from '../../elements/ModalPrimitives'
-import {
-  Box,
-  HStack,
-  VStack,
-  Separator,
-  SpanBox,
-} from '../../elements/LayoutPrimitives'
+import { Box, HStack, VStack, SpanBox } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { StyledText } from '../../elements/StyledText'
 import { TrashIcon } from '../../elements/images/TrashIcon'
 import { theme } from '../../tokens/stitches.config'
 import type { Highlight } from '../../../lib/networking/fragments/highlightFragment'
 import { HighlightView } from '../../patterns/HighlightView'
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { StyledTextArea } from '../../elements/StyledTextArea'
 import { ConfirmationModal } from '../../patterns/ConfirmationModal'
 import { DotsThree } from 'phosphor-react'
@@ -28,6 +22,7 @@ import { setLabelsForHighlight } from '../../../lib/networking/mutations/setLabe
 import { updateHighlightMutation } from '../../../lib/networking/mutations/updateHighlightMutation'
 import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 import { diff_match_patch } from 'diff-match-patch'
+import { HighlightNoteTextEditArea } from '../../elements/HighlightNoteTextEditArea'
 
 type NotebookModalProps = {
   highlights: Highlight[]
@@ -215,12 +210,12 @@ function ModalHighlightView(props: ModalHighlightViewProps): JSX.Element {
         {!isEditing ? (
           <StyledText
             css={{
-              borderRadius: '6px',
-              bg: '$grayBase',
+              borderRadius: '5px',
               p: '16px',
               width: '100%',
               marginTop: '24px',
-              color: '$grayText',
+              bg: '#EBEBEB',
+              color: '#3D3D3D',
             }}
             onClick={() => setIsEditing(true)}
           >
@@ -230,7 +225,7 @@ function ModalHighlightView(props: ModalHighlightViewProps): JSX.Element {
           </StyledText>
         ) : null}
         {isEditing && (
-          <TextEditArea
+          <HighlightNoteTextEditArea
             setIsEditing={setIsEditing}
             highlight={props.highlight}
             updateHighlight={props.updateHighlight}
@@ -241,86 +236,3 @@ function ModalHighlightView(props: ModalHighlightViewProps): JSX.Element {
     </>
   )
 }
-
-type TextEditAreaProps = {
-  setIsEditing: (editing: boolean) => void
-  highlight: Highlight
-  updateHighlight: (highlight: Highlight) => void
-}
-
-const TextEditArea = (props: TextEditAreaProps): JSX.Element => {
-  const [noteContent, setNoteContent] = useState(
-    props.highlight.annotation ?? ''
-  )
-
-  const handleNoteContentChange = useCallback(
-    (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
-      setNoteContent(event.target.value)
-    },
-    [setNoteContent]
-  )
-
-  return (
-    <VStack css={{ width: '100%' }} key="textEditor">
-      <StyledTextArea
-        css={{
-          my: '$3',
-          minHeight: '$6',
-          borderRadius: '6px',
-          bg: '$grayBase',
-          p: '16px',
-          width: '100%',
-          marginTop: '16px',
-          resize: 'vertical',
-        }}
-        autoFocus
-        maxLength={4000}
-        value={noteContent}
-        placeholder={'Add your notes...'}
-        onChange={handleNoteContentChange}
-      />
-      <HStack alignment="center" distribution="end" css={{ width: '100%' }}>
-        <Button
-          style="ctaPill"
-          css={{ mr: '$2' }}
-          onClick={() => {
-            props.setIsEditing(false)
-            setNoteContent(props.highlight.annotation ?? '')
-          }}
-        >
-          Cancel
-        </Button>
-        <Button
-          style="ctaDarkYellow"
-          onClick={async (e) => {
-            e.preventDefault()
-
-            console.log('updating highlight')
-            try {
-              const result = await updateHighlightMutation({
-                highlightId: props.highlight.id,
-                annotation: noteContent,
-              })
-              console.log('result: ' + result)
-
-              if (!result) {
-                showErrorToast('There was an error updating your highlight.')
-              } else {
-                showSuccessToast('Note saved')
-                props.highlight.annotation = noteContent
-                props.updateHighlight(props.highlight)
-              }
-            } catch (err) {
-              console.log('error updating annoation', err)
-              showErrorToast('There was an error updating your highlight.')
-            }
-
-            props.setIsEditing(false)
-          }}
-        >
-          Save
-        </Button>
-      </HStack>
-    </VStack>
-  )
-}
diff --git a/packages/web/components/templates/article/PdfArticleContainer.tsx b/packages/web/components/templates/article/PdfArticleContainer.tsx
index 2449a0d7a..e297c1ded 100644
--- a/packages/web/components/templates/article/PdfArticleContainer.tsx
+++ b/packages/web/components/templates/article/PdfArticleContainer.tsx
@@ -2,13 +2,7 @@ import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticle
 import { Box } from '../../elements/LayoutPrimitives'
 import { v4 as uuidv4 } from 'uuid'
 import { nanoid } from 'nanoid'
-import {
-  useState,
-  useEffect,
-  useCallback,
-  useRef,
-  ReactComponentElement,
-} from 'react'
+import { useState, useEffect, useCallback, useRef } from 'react'
 import { isDarkTheme } from '../../../lib/themeUpdater'
 import PSPDFKit from 'pspdfkit'
 import { Instance, HighlightAnnotation, List, Annotation, Rect } from 'pspdfkit'
@@ -17,7 +11,6 @@ import { createHighlightMutation } from '../../../lib/networking/mutations/creat
 import { deleteHighlightMutation } from '../../../lib/networking/mutations/deleteHighlightMutation'
 import { articleReadingProgressMutation } from '../../../lib/networking/mutations/articleReadingProgressMutation'
 import { mergeHighlightMutation } from '../../../lib/networking/mutations/mergeHighlightMutation'
-import { ShareHighlightModal } from './ShareHighlightModal'
 import { useCanShareNative } from '../../../lib/hooks/useCanShareNative'
 import { webBaseURL } from '../../../lib/appConfig'
 import { pspdfKitKey } from '../../../lib/appConfig'
@@ -36,14 +29,12 @@ export default function PdfArticleContainer(
   props: PdfArticleContainerProps
 ): JSX.Element {
   const containerRef = useRef<HTMLDivElement | null>(null)
-  const [shareTarget, setShareTarget] = useState<Highlight | undefined>(
-    undefined
-  )
+  const [shareTarget, setShareTarget] =
+    useState<Highlight | undefined>(undefined)
   const [notebookKey, setNotebookKey] = useState<string>(uuidv4())
   const [noteTarget, setNoteTarget] = useState<Highlight | undefined>(undefined)
-  const [noteTargetPageIndex, setNoteTargetPageIndex] = useState<
-    number | undefined
-  >(undefined)
+  const [noteTargetPageIndex, setNoteTargetPageIndex] =
+    useState<number | undefined>(undefined)
   const highlightsRef = useRef<Highlight[]>([])
   const canShareNative = useCanShareNative()
 
@@ -465,17 +456,6 @@ export default function PdfArticleContainer(
   return (
     <Box css={{ width: '100%', height: '100%' }}>
       <div ref={containerRef} style={{ width: '100%', height: '100%' }} />
-      {shareTarget && (
-        <ShareHighlightModal
-          url={getHighlightURL(shareTarget.shortId)}
-          title={props.article.title}
-          author={props.article.author}
-          highlight={shareTarget}
-          onOpenChange={() => {
-            setShareTarget(undefined)
-          }}
-        />
-      )}
       {noteTarget && (
         <HighlightNoteModal
           highlight={noteTarget}
diff --git a/packages/web/components/templates/article/ReaderSettingsControl.tsx b/packages/web/components/templates/article/ReaderSettingsControl.tsx
index 7ac275079..8670503ff 100644
--- a/packages/web/components/templates/article/ReaderSettingsControl.tsx
+++ b/packages/web/components/templates/article/ReaderSettingsControl.tsx
@@ -1,284 +1,605 @@
-import { HStack, VStack, SpanBox, Box } from '../../elements/LayoutPrimitives'
+import { HStack, VStack, SpanBox } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { StyledText } from '../../elements/StyledText'
-import { styled, theme } from '../../tokens/stitches.config'
-import { useEffect, useState } from 'react'
+import { styled, theme, ThemeId } from '../../tokens/stitches.config'
 import {
-  AlignCenterHorizontalSimple,
+  ArrowsHorizontal,
   ArrowsInLineHorizontal,
-  ArrowsOutLineHorizontal,
+  CaretLeft,
   CaretRight,
-  Cursor,
+  Check,
 } from 'phosphor-react'
 import { TickedRangeSlider } from '../../elements/TickedRangeSlider'
 import { showSuccessToast } from '../../../lib/toastHelpers'
-import { FontFamiliesOptions } from './FontFamiliesOptions'
-import { useReaderSettings } from '../../../lib/hooks/useReaderSettings'
+import { ReaderSettings } from '../../../lib/hooks/useReaderSettings'
+import { useCallback, useMemo, useState } from 'react'
+import { currentThemeName, updateTheme } from '../../../lib/themeUpdater'
+import { LineHeightIncreaseIcon } from '../../elements/images/LineHeightIncreaseIconProps'
+import { LineHeightDecreaseIcon } from '../../elements/images/LineHeightDecreaseIcon'
+import * as Switch from '@radix-ui/react-switch'
 
 type ReaderSettingsProps = {
-  articleActionHandler: (action: string, arg?: number | string) => void
+  readerSettings: ReaderSettings
 }
 
-const VerticalDivider = styled(SpanBox, {
-  width: '1px',
-  height: '100%',
-  background: `${theme.colors.grayLine.toString()}`,
-})
-
 const HorizontalDivider = styled(SpanBox, {
   width: '100%',
   height: '1px',
   background: `${theme.colors.grayLine.toString()}`,
 })
 
+const FONT_FAMILIES = [
+  'Inter',
+  'System Default',
+  'Merriweather',
+  'Lora',
+  'Open Sans',
+  'Roboto',
+  'Crimson Text',
+  'OpenDyslexic',
+  'Source Serif Pro',
+]
+
+type SettingsProps = {
+  readerSettings: ReaderSettings
+  setShowAdvanced: (show: boolean) => void
+}
+
 export function ReaderSettingsControl(props: ReaderSettingsProps): JSX.Element {
-  const [showFontOptions, setShowFontOptions] = useState(false)
-  const readerSettings = useReaderSettings()
+  const [showAdvanced, setShowAdvanced] = useState(false)
 
   return (
-    <VStack css={{ width: '100%' }}>
-      {showFontOptions ? (
-        <FontFamiliesOptions
-          selected={readerSettings.fontFamily}
-          setShowFontFamilies={setShowFontOptions}
-          onSelect={(font: string) => {
-            readerSettings.setFontFamily(font)
-            props.articleActionHandler('setFontFamily', font)
-          }}
+    <>
+      {showAdvanced ? (
+        <AdvancedSettings
+          readerSettings={props.readerSettings}
+          setShowAdvanced={setShowAdvanced}
         />
       ) : (
-        <>
-          <HStack
-            alignment="center"
-            distribution="between"
-            css={{
-              width: '100%',
-              height: '44px',
-              verticalAlign: 'baseline',
-              borderBottom: `1px solid ${theme.colors.grayLine.toString()}`,
-            }}
-          >
-            <Button
-              style="plainIcon"
-              css={{ width: '50%', fontSize: '32px' }}
-              onClick={() => props.articleActionHandler('decrementFontSize')}
-            >
-              -
-            </Button>
-            <VerticalDivider />
-            <Button
-              style="plainIcon"
-              css={{ width: '50%', height: '100%', fontSize: '32px' }}
-              onClick={() => props.articleActionHandler('incrementFontSize')}
-            >
-              +
-            </Button>
-          </HStack>
-          <HStack
-            distribution="start"
-            alignment="center"
-            css={{
-              m: '0px',
-              px: '12px',
-              py: '12px',
-              width: '100%',
-              height: '44px',
-              verticalAlign: 'baseline',
-              cursor: 'pointer',
-            }}
-            onClick={() => setShowFontOptions(true)}
-          >
-            <StyledText css={{ m: '0px' }}>Font:</StyledText>
-            <StyledText
-              css={{
-                m: '0px',
-                marginLeft: 'auto',
-                pr: '4px',
-                fontFamily: readerSettings.fontFamily,
-                textTransform: 'capitalize',
-              }}
-            >
-              {readerSettings.fontFamily}
-            </StyledText>
-            <CaretRight
-              width={16}
-              height={16}
-              color={theme.colors.grayTextContrast.toString()}
-            />
-          </HStack>
-          <HorizontalDivider
-            css={{
-              '@smDown': {
-                display: 'none',
-              },
-            }}
-          />
-          <VStack
-            css={{
-              p: '0px',
-              m: '0px',
-              pb: '14px',
-              width: '100%',
-              height: '100%',
-              '@smDown': {
-                display: 'none',
-              },
-            }}
-          >
-            <StyledText
-              color={theme.colors.readerFont.toString()}
-              css={{ pl: '12px', m: '0px', pt: '14px' }}
-            >
-              Margin:
-            </StyledText>
-            <HStack
-              distribution="between"
-              css={{ gap: '16px', alignItems: 'center', alignSelf: 'center' }}
-            >
-              <Button
-                style="plainIcon"
-                css={{ pt: '10px', pl: '12px' }}
-                onClick={() => {
-                  const newMarginWith = Math.max(
-                    readerSettings.marginWidth - 45,
-                    200
-                  )
-                  readerSettings.setMarginWidth(newMarginWith)
-                  props.articleActionHandler('setMarginWidth', newMarginWith)
-                }}
-              >
-                <ArrowsOutLineHorizontal
-                  size={24}
-                  color={theme.colors.readerFont.toString()}
-                />
-              </Button>
-              <TickedRangeSlider
-                min={200}
-                max={560}
-                step={45}
-                value={readerSettings.marginWidth}
-                onChange={(value) => {
-                  readerSettings.setMarginWidth(value)
-                  props.articleActionHandler('setMarginWidth', value)
-                }}
-              />
-              <Button
-                style="plainIcon"
-                css={{ pt: '10px', pr: '12px' }}
-                onClick={() => {
-                  const newMarginWith = Math.min(
-                    readerSettings.marginWidth + 45,
-                    560
-                  )
-                  readerSettings.setMarginWidth(newMarginWith)
-                  props.articleActionHandler('setMarginWidth', newMarginWith)
-                }}
-              >
-                <ArrowsInLineHorizontal
-                  size={24}
-                  color={theme.colors.readerFont.toString()}
-                />
-              </Button>
-            </HStack>
-          </VStack>
-          <HorizontalDivider />
-
-          <VStack
-            css={{
-              p: '0px',
-              m: '0px',
-              pb: '14px',
-              width: '100%',
-              height: '100%',
-            }}
-          >
-            <StyledText
-              color={theme.colors.readerFont.toString()}
-              css={{ pl: '12px', m: '0px', pt: '14px' }}
-            >
-              Line Spacing:
-            </StyledText>
-            <HStack
-              distribution="between"
-              css={{ gap: '16px', alignItems: 'center', alignSelf: 'center' }}
-            >
-              <Button
-                style="plainIcon"
-                css={{ pt: '10px', pl: '12px' }}
-                onClick={() => {
-                  const newLineHeight = Math.max(
-                    readerSettings.lineHeight - 25,
-                    100
-                  )
-                  readerSettings.setLineHeight(newLineHeight)
-                  props.articleActionHandler('setLineHeight', newLineHeight)
-                }}
-              >
-                <AlignCenterHorizontalSimple
-                  size={25}
-                  color={theme.colors.readerFont.toString()}
-                />
-              </Button>
-              <TickedRangeSlider
-                min={100}
-                max={300}
-                step={25}
-                value={readerSettings.lineHeight}
-                onChange={(value) => {
-                  readerSettings.setLineHeight(value)
-                  props.articleActionHandler('setLineHeight', value)
-                }}
-              />
-              <Button
-                style="plainIcon"
-                css={{ pt: '10px', pr: '12px' }}
-                onClick={() => {
-                  const newLineHeight = Math.min(
-                    readerSettings.lineHeight + 25,
-                    300
-                  )
-                  readerSettings.setLineHeight(newLineHeight)
-                  props.articleActionHandler('setLineHeight', newLineHeight)
-                }}
-              >
-                <AlignCenterHorizontalSimple
-                  size={25}
-                  color={theme.colors.readerFont.toString()}
-                />
-              </Button>
-            </HStack>
-          </VStack>
-          <HorizontalDivider />
-
-          <Button
-            style="plainIcon"
-            css={{
-              justifyContent: 'center',
-              textDecoration: 'underline',
-              display: 'flex',
-              gap: '4px',
-              width: '100%',
-              fontSize: '12px',
-              p: '12px',
-              pb: '14px',
-              pt: '16px',
-              height: '42px',
-              alignItems: 'center',
-            }}
-            onClick={() => {
-              readerSettings.setFontFamily('Inter')
-              readerSettings.setMarginWidth(290)
-              readerSettings.setLineHeight(150)
-              props.articleActionHandler('resetReaderSettings')
-              showSuccessToast('Display settings reset', {
-                position: 'bottom-right',
-              })
-            }}
-          >
-            Reset to default
-          </Button>
-        </>
+        <BasicSettings
+          readerSettings={props.readerSettings}
+          setShowAdvanced={setShowAdvanced}
+        />
       )}
+    </>
+  )
+}
+
+function AdvancedSettings(props: SettingsProps): JSX.Element {
+  return (
+    <VStack
+      css={{ width: '100%', minHeight: '320px', p: '10px' }}
+      alignment="start"
+      distribution="start"
+    >
+      <Button
+        style="plainIcon"
+        css={{
+          m: '10px',
+          mb: '20px',
+          display: 'flex',
+          fontSize: '12px',
+          fontWeight: '400',
+          fontFamily: '$display',
+          alignItems: 'center',
+          borderRadius: '6px',
+          gap: '5px',
+          '&:hover': {
+            textDecoration: 'underline',
+          },
+        }}
+        onClick={() => {
+          props.setShowAdvanced(false)
+        }}
+      >
+        <CaretLeft size={12} color="#969696" weight="bold" />
+        Back
+      </Button>
+
+      <HStack
+        css={{
+          width: '100%',
+          pr: '30px',
+          alignItems: 'center',
+          '&:hover': {
+            opacity: 0.8,
+          },
+          '&[data-state="on"]': {
+            bg: '$thBackground',
+          },
+        }}
+        alignment="start"
+        distribution="between"
+      >
+        <Label htmlFor="justify-text" css={{ width: '100%' }}>
+          <StyledText style="displaySettingsLabel" css={{ pl: '20px' }}>
+            Justify Text
+          </StyledText>
+        </Label>
+        <SwitchRoot
+          id="justify-text"
+          checked={props.readerSettings.justifyText ?? false}
+          onCheckedChange={(checked) => {
+            props.readerSettings.setJustifyText(checked)
+          }}
+        >
+          <SwitchThumb />
+        </SwitchRoot>
+      </HStack>
+
+      <HStack
+        css={{
+          width: '100%',
+          pr: '30px',
+          alignItems: 'center',
+          '&:hover': {
+            opacity: 0.8,
+          },
+          '&[data-state="on"]': {
+            bg: '$thBackground',
+          },
+        }}
+        alignment="start"
+        distribution="between"
+      >
+        <Label htmlFor="high-contrast-text" css={{ width: '100%' }}>
+          <StyledText style="displaySettingsLabel" css={{ pl: '20px' }}>
+            High Contrast Text
+          </StyledText>
+        </Label>
+        <SwitchRoot
+          id="high-contrast-text"
+          checked={props.readerSettings.highContrastText ?? false}
+          onCheckedChange={(checked) => {
+            props.readerSettings.setHighContrastText(checked)
+          }}
+        >
+          <SwitchThumb />
+        </SwitchRoot>
+      </HStack>
+    </VStack>
+  )
+}
+
+const SwitchRoot = styled(Switch.Root, {
+  all: 'unset',
+  width: 42,
+  height: 25,
+  backgroundColor: '$thBorderColor',
+  borderRadius: '9999px',
+  position: 'relative',
+  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+  '&:focus': { boxShadow: `0 0 0 2px $thBorderColor` },
+  '&[data-state="checked"]': { backgroundColor: '$thBorderColor' },
+})
+
+const SwitchThumb = styled(Switch.Thumb, {
+  display: 'block',
+  width: 21,
+  height: 21,
+  backgroundColor: '$thTextContrast2',
+  borderRadius: '9999px',
+  transition: 'transform 100ms',
+  transform: 'translateX(2px)',
+  willChange: 'transform',
+  '&[data-state="checked"]': { transform: 'translateX(19px)' },
+})
+
+const Label = styled('label', {
+  color: 'white',
+  fontSize: 15,
+  lineHeight: 1,
+})
+
+function BasicSettings(props: SettingsProps): JSX.Element {
+  return (
+    <VStack css={{ width: '100%' }}>
+      <FontControls readerSettings={props.readerSettings} />
+
+      <HorizontalDivider />
+
+      <LayoutControls readerSettings={props.readerSettings} />
+
+      <HorizontalDivider />
+
+      <ThemeSelector {...props} />
+
+      <HorizontalDivider />
+
+      <HStack
+        distribution="start"
+        alignment="center"
+        css={{ width: '100%', p: '10px' }}
+      >
+        <Button
+          style="plainIcon"
+          css={{
+            pl: '10px',
+            display: 'flex',
+            fontSize: '12px',
+            fontWeight: '600',
+            fontFamily: '$display',
+            '&:hover': {
+              textDecoration: 'underline',
+            },
+          }}
+          onClick={() => {
+            props.readerSettings.setFontFamily('Inter')
+            props.readerSettings.setMarginWidth(290)
+            props.readerSettings.setLineHeight(150)
+            props.readerSettings.actionHandler('resetReaderSettings')
+            showSuccessToast('Display settings reset', {
+              position: 'bottom-right',
+            })
+          }}
+        >
+          Reset
+        </Button>
+        <Button
+          style="plainIcon"
+          css={{
+            p: '5px',
+            display: 'flex',
+            fontSize: '12px',
+            fontWeight: '400',
+            fontFamily: '$display',
+            marginLeft: 'auto',
+            alignItems: 'center',
+            borderRadius: '6px',
+            gap: '5px',
+            '&:hover': {
+              textDecoration: 'underline',
+            },
+          }}
+          onClick={() => {
+            props.setShowAdvanced(true)
+          }}
+        >
+          Advanced Settings
+          <CaretRight size={12} color="#969696" weight="bold" />
+        </Button>
+      </HStack>
+    </VStack>
+  )
+}
+
+type FontControlsProps = {
+  readerSettings: ReaderSettings
+}
+
+function FontControls(props: FontControlsProps): JSX.Element {
+  const FontSelect = styled('select', {
+    pl: '5px',
+    height: '30px',
+    minWidth: '100px',
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: '12px',
+    background: '$thBackground',
+    border: '1px solid $thBorderColor',
+    fontFamily: props.readerSettings.fontFamily,
+    textTransform: 'capitalize',
+    borderRadius: '4px',
+  })
+
+  const handleFontSizeChange = useCallback(
+    (value) => {
+      props.readerSettings.actionHandler('setFontSize', value)
+    },
+    [props.readerSettings.actionHandler]
+  )
+
+  return (
+    <VStack css={{ width: '100%', pb: '20px' }}>
+      <HStack
+        distribution="start"
+        alignment="start"
+        css={{ width: '100%', p: '20px', pb: '10px' }}
+      >
+        <StyledText style="displaySettingsLabel">Font</StyledText>
+        <FontSelect
+          css={{ marginLeft: 'auto' }}
+          tabIndex={-1}
+          defaultValue={props.readerSettings.fontFamily}
+          onChange={(e: React.FormEvent<HTMLSelectElement>) => {
+            const font = e.currentTarget.value
+            if (FONT_FAMILIES.indexOf(font) < 0) {
+              return
+            }
+            props.readerSettings.setFontFamily(font)
+          }}
+        >
+          {FONT_FAMILIES.map((family) => (
+            <option key={`font-${family}`} value={family}>
+              {family}
+            </option>
+          ))}
+        </FontSelect>
+      </HStack>
+      <HStack
+        css={{ px: '10px', width: '100%' }}
+        distribution="start"
+        alignment="center"
+      >
+        <Button
+          style="plainIcon"
+          css={{ py: '0px', width: '60px' }}
+          onClick={() => {
+            props.readerSettings.actionHandler('decrementFontSize')
+          }}
+        >
+          <SpanBox
+            css={{
+              fontFamily: '$display',
+              fontStyle: 'normal',
+              fontWeight: '400',
+              fontSize: '20px',
+              lineHeight: '20px',
+              textAlign: 'center',
+              color: '#969696',
+              width: '50px',
+              pr: '5px',
+              pb: '5px',
+            }}
+          >
+            a
+          </SpanBox>
+        </Button>
+        <TickedRangeSlider
+          min={10}
+          max={34}
+          step={2}
+          value={props.readerSettings.fontSize}
+          onChange={handleFontSizeChange}
+        />
+        <Button
+          style="plainIcon"
+          css={{ py: '0px', width: '60px' }}
+          onClick={() => {
+            props.readerSettings.actionHandler('incrementFontSize')
+          }}
+        >
+          <SpanBox
+            css={{
+              fontFamily: '$display',
+              fontStyle: 'normal',
+              fontWeight: '400',
+              fontSize: '20px',
+              lineHeight: '20px',
+
+              textAlign: 'center',
+
+              color: '#969696',
+              width: '60px',
+              pl: '16px',
+            }}
+          >
+            A
+          </SpanBox>
+        </Button>
+      </HStack>
+    </VStack>
+  )
+}
+
+type LayoutControlsProps = {
+  readerSettings: ReaderSettings
+}
+
+function LayoutControls(props: LayoutControlsProps): JSX.Element {
+  const handleMarginWidthChange = useCallback(
+    (value) => {
+      props.readerSettings.setMarginWidth(value)
+    },
+    [props.readerSettings.actionHandler, props.readerSettings.setMarginWidth]
+  )
+
+  return (
+    <>
+      <VStack
+        css={{
+          m: '0px',
+          px: '0px',
+          pb: '10px',
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        <StyledText style="displaySettingsLabel" css={{ pl: '20px' }}>
+          Margin
+        </StyledText>
+        <HStack
+          distribution="between"
+          css={{
+            width: '100%',
+            alignItems: 'center',
+            alignSelf: 'center',
+          }}
+        >
+          <Button
+            style="plainIcon"
+            css={{ py: '0px', width: '60px' }}
+            onClick={() => {
+              const newMarginWith = Math.max(
+                props.readerSettings.marginWidth - 45,
+                200
+              )
+              props.readerSettings.setMarginWidth(newMarginWith)
+            }}
+          >
+            <ArrowsHorizontal size={24} color="#969696" />
+          </Button>
+          <TickedRangeSlider
+            min={200}
+            max={560}
+            step={45}
+            value={props.readerSettings.marginWidth}
+            onChange={handleMarginWidthChange}
+          />
+          <Button
+            style="plainIcon"
+            css={{ py: '0px', width: '60px' }}
+            onClick={() => {
+              const newMarginWith = Math.min(
+                props.readerSettings.marginWidth + 45,
+                560
+              )
+              props.readerSettings.setMarginWidth(newMarginWith)
+            }}
+          >
+            <ArrowsInLineHorizontal size={24} color="#969696" />
+          </Button>
+        </HStack>
+      </VStack>
+
+      <VStack
+        css={{
+          m: '0px',
+          px: '0px',
+          pb: '20px',
+          width: '100%',
+          height: '100%',
+          position: 'relative',
+        }}
+      >
+        <StyledText style="displaySettingsLabel" css={{ pl: '20px' }}>
+          Line Height
+        </StyledText>
+        <HStack
+          distribution="between"
+          css={{
+            width: '100%',
+            alignItems: 'center',
+            alignSelf: 'center',
+          }}
+        >
+          <Button
+            style="plainIcon"
+            css={{ py: '0px', width: '60px' }}
+            onClick={() => {
+              const newLineHeight = Math.max(
+                props.readerSettings.lineHeight - 25,
+                100
+              )
+              props.readerSettings.setLineHeight(newLineHeight)
+            }}
+          >
+            <LineHeightDecreaseIcon
+              strokeColor={theme.colors.readerFont.toString()}
+            />
+          </Button>
+          <TickedRangeSlider
+            min={100}
+            max={300}
+            step={25}
+            value={props.readerSettings.lineHeight}
+            onChange={(value) => {
+              props.readerSettings.setLineHeight(value)
+            }}
+          />
+          <Button
+            style="plainIcon"
+            css={{ py: '0px', width: '60px' }}
+            onClick={() => {
+              const newLineHeight = Math.min(
+                props.readerSettings.lineHeight + 25,
+                300
+              )
+              props.readerSettings.setLineHeight(newLineHeight)
+            }}
+          >
+            <LineHeightIncreaseIcon
+              strokeColor={theme.colors.readerFont.toString()}
+            />
+          </Button>
+        </HStack>
+      </VStack>
+    </>
+  )
+}
+
+function ThemeSelector(props: ReaderSettingsProps): JSX.Element {
+  const [currentTheme, setCurrentTheme] = useState(currentThemeName())
+
+  const isDark = useMemo(() => {
+    return currentTheme === 'Dark' || currentTheme === 'Darker'
+  }, [currentTheme])
+
+  return (
+    <VStack
+      css={{
+        px: '20px',
+        m: '0px',
+        pb: '10px',
+        width: '100%',
+        height: '100%',
+      }}
+    >
+      <StyledText style="displaySettingsLabel">Themes</StyledText>
+      <HStack
+        distribution="start"
+        css={{
+          gap: '16px',
+          pl: '5px',
+        }}
+      >
+        <Button
+          style="themeSwitch"
+          css={{
+            display: 'flex',
+            alignItems: 'center',
+            alignContent: 'center',
+            justifyContent: 'center',
+            width: '30px',
+            height: '30px',
+            background: '#F5F5F5',
+            borderRadius: '50%',
+            border: 'unset',
+            '&:hover': {
+              transform: 'scale(1.1)',
+              border: '2px solid #6A6968',
+            },
+            '&[data-state="selected"]': {
+              border: '2px solid #6A6968',
+            },
+          }}
+          data-state={isDark ? 'unselected' : 'selected'}
+          onClick={() => {
+            updateTheme(ThemeId.Light)
+            setCurrentTheme(currentThemeName())
+          }}
+        >
+          {!isDark && <Check color="#6A6968" size={15} weight="bold" />}
+        </Button>
+        <Button
+          style="themeSwitch"
+          css={{
+            display: 'flex',
+            alignItems: 'center',
+            alignContent: 'center',
+            justifyContent: 'center',
+            width: '30px',
+            height: '30px',
+            background: '#3B3938',
+            borderRadius: '50%',
+            border: 'unset',
+            '&:hover': {
+              transform: 'scale(1.1)',
+              border: '2px solid #6A6968',
+            },
+            '&[data-state="selected"]': {
+              border: '2px solid #6A6968',
+            },
+          }}
+          data-state={isDark ? 'selected' : 'unselected'}
+          onClick={() => {
+            updateTheme(ThemeId.Dark)
+            setCurrentTheme(currentThemeName())
+          }}
+        >
+          {isDark && <Check color="#F9D354" size={20} />}
+        </Button>
+      </HStack>
     </VStack>
   )
 }
diff --git a/packages/web/components/templates/article/SetLabelsControl.tsx b/packages/web/components/templates/article/SetLabelsControl.tsx
index e8b71cb9f..4fc12ee5d 100644
--- a/packages/web/components/templates/article/SetLabelsControl.tsx
+++ b/packages/web/components/templates/article/SetLabelsControl.tsx
@@ -275,7 +275,7 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
 
       revalidate()
     },
-    [isSelected, props]
+    [isSelected, props, revalidate]
   )
 
   const filteredLabels = useMemo(() => {
@@ -295,6 +295,23 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
   const [focusedIndex, setFocusedIndex] = useState<number | undefined>(
     undefined
   )
+
+  const createLabelFromFilterText = useCallback(async () => {
+    const label = await createLabelMutation(
+      filterText,
+      randomLabelColorHex(),
+      ''
+    )
+    if (label) {
+      showSuccessToast(`Created label ${label.name}`, {
+        position: 'bottom-right',
+      })
+      toggleLabel(label)
+    } else {
+      showErrorToast('Failed to create label', { position: 'bottom-right' })
+    }
+  }, [filterText, toggleLabel])
+
   const handleKeyDown = useCallback(
     async (event: React.KeyboardEvent<HTMLInputElement>) => {
       const maxIndex = filteredLabels.length + 1
@@ -346,24 +363,15 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
         }
       }
     },
-    [filterText, filteredLabels, focusedIndex, isSelected, props]
-  )
-
-  const createLabelFromFilterText = useCallback(async () => {
-    const label = await createLabelMutation(
+    [
       filterText,
-      randomLabelColorHex(),
-      ''
-    )
-    if (label) {
-      showSuccessToast(`Created label ${label.name}`, {
-        position: 'bottom-right',
-      })
-      toggleLabel(label)
-    } else {
-      showErrorToast('Failed to create label', { position: 'bottom-right' })
-    }
-  }, [filterText, props, toggleLabel])
+      filteredLabels,
+      focusedIndex,
+      createLabelFromFilterText,
+      router,
+      toggleLabel,
+    ]
+  )
 
   return (
     <VStack
diff --git a/packages/web/components/templates/article/SetLabelsModal.tsx b/packages/web/components/templates/article/SetLabelsModal.tsx
index a59bd3f2d..2b0828aa4 100644
--- a/packages/web/components/templates/article/SetLabelsModal.tsx
+++ b/packages/web/components/templates/article/SetLabelsModal.tsx
@@ -56,7 +56,7 @@ export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
 
       props.onOpenChange(open)
     },
-    [props, selectedLabels, previousSelectedLabels, setSelectedLabels]
+    [props, selectedLabels, previousSelectedLabels]
   )
 
   useEffect(() => {
@@ -72,7 +72,7 @@ export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
       .catch((err) => {
         console.log('error saving labels: ', err)
       })
-  }, [selectedLabels, setPreviousSelectedLabels])
+  }, [props, selectedLabels, previousSelectedLabels, setPreviousSelectedLabels])
 
   return (
     <ModalRoot defaultOpen onOpenChange={onOpenChange}>
diff --git a/packages/web/components/templates/article/ShareArticleModal.tsx b/packages/web/components/templates/article/ShareArticleModal.tsx
deleted file mode 100644
index 6481540ea..000000000
--- a/packages/web/components/templates/article/ShareArticleModal.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { ShareModalLayout } from './ShareModal'
-import { ShareArticleView } from '../../patterns/ShareArticleView'
-
-type ShareArticleModalProps = {
-  url: string
-  title: string
-  imageURL?: string
-  author?: string
-  site?: string
-  description?: string
-  publishedAt: string
-  originalArticleUrl: string
-  onOpenChange: (open: boolean) => void
-}
-
-export function ShareArticleModal(
-  props: ShareArticleModalProps
-): JSX.Element {
-  return (
-    <ShareModalLayout
-      url={props.url}
-      type='link'
-      modalTitle='Share Article'
-      title={props.title}
-      description={props.description}
-      onOpenChange={props.onOpenChange}
-    >
-      <ShareArticleView
-        url={props.url}
-        title={props.title}
-        imageURL={props.imageURL}
-        author={props.author}
-        publishedAt={props.publishedAt}
-        originalArticleUrl={props.originalArticleUrl}
-        description={props.description}
-      />
-    </ShareModalLayout>      
-  )
-}
diff --git a/packages/web/components/templates/article/ShareHighlightModal.tsx b/packages/web/components/templates/article/ShareHighlightModal.tsx
deleted file mode 100644
index b07433fab..000000000
--- a/packages/web/components/templates/article/ShareHighlightModal.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
-import { HighlightView } from '../../patterns/HighlightView'
-import { ShareModalLayout } from './ShareModal'
-
-type ShareHighlightModalProps = {
-  highlight: Highlight
-  url: string
-  title: string
-  author?: string
-  description?: string
-  onOpenChange: (open: boolean) => void
-}
-
-export function ShareHighlightModal(
-  props: ShareHighlightModalProps
-): JSX.Element {
-  return (
-    <ShareModalLayout
-      url={props.url}
-      type='highlight'
-      modalTitle={`Share Highlight ${props.highlight?.annotation ? '& Note' : ''}`}
-      title={props.title}
-      description={props.description}
-      onOpenChange={props.onOpenChange}
-    >
-      <HighlightView
-        title={props.title}
-        author={props.author}
-        highlight={props.highlight}
-      />
-    </ShareModalLayout>    
-  )
-}
diff --git a/packages/web/components/templates/article/SkeletonArticleContainer.tsx b/packages/web/components/templates/article/SkeletonArticleContainer.tsx
index d7ef809e7..73ea03830 100644
--- a/packages/web/components/templates/article/SkeletonArticleContainer.tsx
+++ b/packages/web/components/templates/article/SkeletonArticleContainer.tsx
@@ -1,5 +1,4 @@
 import { Box } from '../../elements/LayoutPrimitives'
-import { StyledText } from '../../elements/StyledText'
 import { theme } from '../../tokens/stitches.config'
 
 type SkeletonArticleContainerProps = {
@@ -10,7 +9,9 @@ type SkeletonArticleContainerProps = {
   children?: React.ReactNode
 }
 
-export function SkeletonArticleContainer(props: SkeletonArticleContainerProps): JSX.Element {
+export function SkeletonArticleContainer(
+  props: SkeletonArticleContainerProps
+): JSX.Element {
   const styles = {
     margin: props.margin ?? 360,
     fontSize: props.fontSize ?? 20,
@@ -46,14 +47,14 @@ export function SkeletonArticleContainer(props: SkeletonArticleContainerProps):
             '--blockquote-icon-font-size': '1.7rem',
             '--figure-margin': '2.6875rem auto',
             '--hr-margin': '2em',
-            margin: `30px 0px`,
+            margin: `0px`,
           },
           '@md': {
-            maxWidth: 1024 - (styles.margin),
+            maxWidth: 1024 - styles.margin,
           },
           '@lg': {
-            margin: `30px 0`,
-            maxWidth: 1024 - (styles.margin),
+            margin: `0`,
+            maxWidth: 1024 - styles.margin,
           },
         }}
       >
diff --git a/packages/web/components/templates/article/SnoozeLinkModal.tsx b/packages/web/components/templates/article/SnoozeLinkModal.tsx
deleted file mode 100644
index 68167820e..000000000
--- a/packages/web/components/templates/article/SnoozeLinkModal.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import { ModalContent, ModalOverlay, ModalRoot } from '../../elements/ModalPrimitives'
-import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
-import { Button } from '../../elements/Button'
-import { StyledText } from '../../elements/StyledText'
-import { X, Check } from 'phosphor-react'
-import { useState } from 'react'
-import { showErrorToast } from '../../../lib/toastHelpers'
-
-type ShareArticleModalProps = {
-  onOpenChange: (open: boolean) => void
-  submit: (option: string, reminder: boolean, msg: string) => void
-}
-
-enum ButtonPosition {
-  Top,
-  Middle,
-  Bottom,
-  Standalone,
-}
-
-type SnoozeOptionButtonProps = {
-  title: string
-  position: ButtonPosition
-  onClick: () => void
-  selected?: boolean
-  borderRadius?: string
-}
-
-function SnoozeOptionButton(props: SnoozeOptionButtonProps): JSX.Element {
-  let borderRadius = '0px'
-  let borderWidth = '1px'
-  switch (props.position) {
-    case ButtonPosition.Top:
-      borderWidth = '1px'
-      borderRadius = '8px 8px 0px 0px'
-      break
-    case ButtonPosition.Middle:
-      borderWidth = '0px 1px 0px 1px'
-      borderRadius = '0px'
-      break
-    case ButtonPosition.Bottom:
-      borderWidth = '1px'
-      borderRadius = '0px 0px 8px 8px'
-      break
-    case ButtonPosition.Standalone:
-      borderWidth = '1px'
-      borderRadius = '8px'
-      break
-  }
-
-  return (
-    <Button style='modalOption'
-      onClick={props.onClick}
-      css={{ 
-      borderRadius,
-      borderWidth,
-      background: props.selected ? '#FDFAEC' : undefined
-    }}>
-      <HStack css={{ pl: '16px', justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>
-        <SpanBox>{props.title}</SpanBox>
-        {props.selected && (
-          <Check width={24} height={24} color='#E2B513' />
-        )}
-      </HStack>
-    </Button>)
-}
-
-export function SnoozeLinkModal(
-  props: ShareArticleModalProps
-): JSX.Element {
-  const [sendReminder, setSendReminder] = useState(false)
-  const [snoozeOption, setSnoozeOption] = useState<string | undefined>(undefined)
-
-  const setOption = (option: string) => {
-    setSnoozeOption(option)
-    setSendReminder(true)
-  };
-
-  return (
-    <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
-      <ModalOverlay />
-      <ModalContent
-        onPointerDownOutside={(event) => {
-          event.preventDefault()
-        }}
-        css={{
-          m: '0px',
-          p: '0px',
-          width: '375px',
-          height: '388px',
-          overflow: 'auto',
-          background: 'white'
-        }}
-      >
-        <VStack css={{ px: '24px', pt: '22px', m: '0px' }}>
-          <HStack alignment='start' distribution='end' css={{ pb: '16px', width: '100%' }}>
-            <StyledText css={{ fontSize: '24px', m: '0px', mr: '0px', color: '#0A0806' }}>Snooze</StyledText>
-            <Button
-              style="ghost"
-              onClick={() => {
-                props.onOpenChange(false)
-              }}
-              tabIndex={-1}
-              css={{ marginLeft: 'auto', p: '0px' }}
-            >
-              <X color='black' width={24} height={24} />
-            </Button>
-          </HStack>
-          <VStack css={{ width: '100%', background: '#F8F8F8', borderRadius: '8px' }}>
-            <SnoozeOptionButton title='Snooze until tonight' position={ButtonPosition.Top} selected={snoozeOption == 'tonight'} onClick={() => setOption('tonight')} />
-            <SnoozeOptionButton title='Snooze until tomorrow' position={ButtonPosition.Middle} selected={snoozeOption == 'tomorrow'} onClick={() => setOption('tomorrow')} />
-            <SnoozeOptionButton title='Snooze until the weekend' position={ButtonPosition.Bottom} selected={snoozeOption == 'weekend'} onClick={() => setOption('weekend')} />
-          </VStack>
-
-          <Box css={{ mt: '16px', width: '100%', background: '#F8F8F8',  }}>
-            <SnoozeOptionButton title='Send me a reminder' position={ButtonPosition.Standalone} selected={sendReminder} 
-              onClick={() => {
-                setSendReminder(!sendReminder)
-              }}
-            />
-          </Box>
-
-          <HStack css={{ mt: '16px', justifyContent: 'space-between', width: '100%' }}>
-            <Button
-              title='Cancel'
-              css={{ fontSize: '16px', width: '158px', height: '52px', background: 'unset', border: 'unset', color: '#0A0806', fontWeight: '400' }}
-              onClick={() => {
-                props.onOpenChange(false)
-              }}
-            >Cancel</Button>
-            <Button
-              style='ctaDarkYellow'
-              title='Save'
-              css={{ fontSize: '16px', width: '158px', height: '52px', marginLeft: 'auto', color: '#0A0806', fontWeight: '400' }}
-              onClick={() => {
-                if (snoozeOption) {
-                  let msg = 'Link snoozed until '
-                  switch (snoozeOption) {
-                    case 'tonight':
-                      msg += 'tonight.'
-                      break
-                    case 'tomorrow':
-                      msg += 'tomorrow.'
-                      break
-                    case 'weekend':
-                      msg += 'the weekend.'
-                      break
-                  }
-                  props.submit(snoozeOption, sendReminder, msg)
-                  props.onOpenChange(false)
-                } else {
-                  showErrorToast('No option selected', { position: 'bottom-right' })
-                }
-              }}
-            >Save</Button>
-          </HStack>
-        </VStack>
-      </ModalContent>
-    </ModalRoot>
-  )
-}
diff --git a/packages/web/components/templates/article/VerticalArticleActions.tsx b/packages/web/components/templates/article/VerticalArticleActions.tsx
new file mode 100644
index 000000000..cb04634ea
--- /dev/null
+++ b/packages/web/components/templates/article/VerticalArticleActions.tsx
@@ -0,0 +1,174 @@
+import {
+  ArchiveBox,
+  DotsThreeOutline,
+  HighlighterCircle,
+  Info,
+  TagSimple,
+  TextAa,
+  Trash,
+  Tray,
+} from 'phosphor-react'
+import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
+import { Button } from '../../elements/Button'
+import { HStack } from '../../elements/LayoutPrimitives'
+import { TooltipWrapped } from '../../elements/Tooltip'
+import { theme } from '../../tokens/stitches.config'
+import { ReaderDropdownMenu } from '../../patterns/ReaderDropdownMenu'
+
+export type ArticleActionsMenuLayout = 'top' | 'side'
+
+type ArticleActionsMenuProps = {
+  article?: ArticleAttributes
+  layout: ArticleActionsMenuLayout
+  showReaderDisplaySettings?: boolean
+  articleActionHandler: (action: string, arg?: unknown) => void
+}
+
+export function VerticalArticleActionsMenu(
+  props: ArticleActionsMenuProps
+): JSX.Element {
+  return (
+    <>
+      <HStack
+        distribution="end"
+        alignment="center"
+        css={{
+          width: '100%',
+          gap: '30px',
+        }}
+      >
+        <Button
+          style="articleActionIcon"
+          onClick={() => props.articleActionHandler('setLabels')}
+          css={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <TagSimple size={24} color={theme.colors.thHighContrast.toString()} />
+        </Button>
+
+        <Button
+          style="articleActionIcon"
+          onClick={() => props.articleActionHandler('showHighlights')}
+          css={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <TooltipWrapped
+            tooltipContent="View Highlights"
+            tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
+          >
+            <HighlighterCircle
+              size={24}
+              color={theme.colors.thHighContrast.toString()}
+            />
+          </TooltipWrapped>
+        </Button>
+
+        <Button
+          style="articleActionIcon"
+          onClick={() => props.articleActionHandler('showEditModal')}
+          css={{
+            display: 'flex',
+            alignItems: 'center',
+            '@mdDown': {
+              display: 'none',
+            },
+          }}
+        >
+          <TooltipWrapped
+            tooltipContent="Edit title & description"
+            tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
+          >
+            <Info size={24} color={theme.colors.thHighContrast.toString()} />
+          </TooltipWrapped>
+        </Button>
+
+        <Button
+          style="articleActionIcon"
+          onClick={() => {
+            props.articleActionHandler('delete')
+          }}
+          css={{
+            display: 'flex',
+            alignItems: 'center',
+            '@mdDown': {
+              display: 'none',
+            },
+          }}
+        >
+          <TooltipWrapped
+            tooltipContent="Delete"
+            tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
+          >
+            <Trash size={24} color={theme.colors.thHighContrast.toString()} />
+          </TooltipWrapped>
+        </Button>
+
+        {!props.article?.isArchived ? (
+          <Button
+            style="articleActionIcon"
+            onClick={() => props.articleActionHandler('archive')}
+            css={{
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <TooltipWrapped
+              tooltipContent="Archive"
+              tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
+            >
+              <ArchiveBox
+                size={24}
+                color={theme.colors.thHighContrast.toString()}
+              />
+            </TooltipWrapped>
+          </Button>
+        ) : (
+          <Button
+            style="articleActionIcon"
+            onClick={() => props.articleActionHandler('unarchive')}
+            css={{
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <TooltipWrapped
+              tooltipContent="Unarchive"
+              tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
+            >
+              <Tray size={24} color={theme.colors.thHighContrast.toString()} />
+            </TooltipWrapped>
+          </Button>
+        )}
+        <Button
+          style="articleActionIcon"
+          onClick={() => props.articleActionHandler('editDisplaySettings')}
+          css={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <TooltipWrapped
+            tooltipContent="Edit title & description"
+            tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
+          >
+            <TextAa size={24} color={theme.colors.thHighContrast.toString()} />
+          </TooltipWrapped>
+        </Button>
+
+        <ReaderDropdownMenu
+          triggerElement={
+            <DotsThreeOutline
+              size={24}
+              color={theme.colors.thHighContrast.toString()}
+            />
+          }
+          articleActionHandler={props.articleActionHandler}
+        />
+      </HStack>
+    </>
+  )
+}
diff --git a/packages/web/components/templates/auth/EmailLogin.tsx b/packages/web/components/templates/auth/EmailLogin.tsx
index 8175f329f..0a4218b29 100644
--- a/packages/web/components/templates/auth/EmailLogin.tsx
+++ b/packages/web/components/templates/auth/EmailLogin.tsx
@@ -5,7 +5,6 @@ import { useEffect, useState } from 'react'
 import { BorderedFormInput, FormLabel } from '../../elements/FormElements'
 import { fetchEndpoint } from '../../../lib/appConfig'
 import { logoutMutation } from '../../../lib/networking/mutations/logoutMutation'
-import { styled } from '@stitches/react'
 import { useRouter } from 'next/router'
 import { parseErrorCodes } from '../../../lib/queryParamParser'
 import { formatMessage } from '../../../locales/en/messages'
@@ -15,8 +14,9 @@ export function EmailLogin(): JSX.Element {
   const router = useRouter()
   const [email, setEmail] = useState<string | undefined>(undefined)
   const [password, setPassword] = useState<string | undefined>(undefined)
-  const [errorMessage, setErrorMessage] =
-    useState<string | undefined>(undefined)
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(
+    undefined
+  )
 
   useEffect(() => {
     if (!router.isReady) return
diff --git a/packages/web/components/templates/auth/EmailSignup.tsx b/packages/web/components/templates/auth/EmailSignup.tsx
index de55dc2c2..cdad620b8 100644
--- a/packages/web/components/templates/auth/EmailSignup.tsx
+++ b/packages/web/components/templates/auth/EmailSignup.tsx
@@ -7,7 +7,6 @@ import { TermAndConditionsFooter } from '../LoginForm'
 import { fetchEndpoint } from '../../../lib/appConfig'
 import { useValidateUsernameQuery } from '../../../lib/networking/queries/useValidateUsernameQuery'
 import { logoutMutation } from '../../../lib/networking/mutations/logoutMutation'
-import { styled } from '@stitches/react'
 import { useRouter } from 'next/router'
 import { formatMessage } from '../../../locales/en/messages'
 import { parseErrorCodes } from '../../../lib/queryParamParser'
@@ -19,10 +18,12 @@ export function EmailSignup(): JSX.Element {
   const [password, setPassword] = useState<string | undefined>(undefined)
   const [fullname, setFullname] = useState<string | undefined>(undefined)
   const [username, setUsername] = useState<string | undefined>(undefined)
-  const [debouncedUsername, setDebouncedUsername] =
-    useState<string | undefined>(undefined)
-  const [errorMessage, setErrorMessage] =
-    useState<string | undefined>(undefined)
+  const [debouncedUsername, setDebouncedUsername] = useState<
+    string | undefined
+  >(undefined)
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(
+    undefined
+  )
 
   useEffect(() => {
     if (!router.isReady) return
@@ -165,7 +166,7 @@ export function EmailSignup(): JSX.Element {
             style={'ctaOutlineYellow'}
             css={{ color: '$omnivoreGray', borderColor: 'rgba(0, 0, 0, 0.06)' }}
             type="button"
-            onClick={async (event) => {
+            onClick={async () => {
               window.localStorage.removeItem('authVerified')
               window.localStorage.removeItem('authToken')
               try {
diff --git a/packages/web/components/templates/auth/ResetSent.tsx b/packages/web/components/templates/auth/ResetSent.tsx
index 8c95ce973..3f0f2776a 100644
--- a/packages/web/components/templates/auth/ResetSent.tsx
+++ b/packages/web/components/templates/auth/ResetSent.tsx
@@ -1,7 +1,6 @@
 import { Box, HStack } from '../../elements/LayoutPrimitives'
-import type { LoginFormProps } from '../LoginForm'
 
-export function ResetSent(props: LoginFormProps): JSX.Element {
+export function ResetSent(): JSX.Element {
   return (
     <>
       <HStack
diff --git a/packages/web/components/templates/auth/VerifyEmail.tsx b/packages/web/components/templates/auth/VerifyEmail.tsx
index 31e5c1427..7eedf9b60 100644
--- a/packages/web/components/templates/auth/VerifyEmail.tsx
+++ b/packages/web/components/templates/auth/VerifyEmail.tsx
@@ -1,7 +1,6 @@
 import { Box, HStack } from '../../elements/LayoutPrimitives'
-import type { LoginFormProps } from '../LoginForm'
 
-export function VerifyEmail(props: LoginFormProps): JSX.Element {
+export function VerifyEmail(): JSX.Element {
   return (
     <>
       <HStack
diff --git a/packages/web/components/templates/homeFeed/AddLinkModal.tsx b/packages/web/components/templates/homeFeed/AddLinkModal.tsx
index a13426985..de17c92d7 100644
--- a/packages/web/components/templates/homeFeed/AddLinkModal.tsx
+++ b/packages/web/components/templates/homeFeed/AddLinkModal.tsx
@@ -5,14 +5,10 @@ import {
   ModalTitleBar,
   ModalButtonBar,
 } from '../../elements/ModalPrimitives'
-import { VStack, HStack, Box, SpanBox } from '../../elements/LayoutPrimitives'
+import { VStack, Box } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
-import { StyledText } from '../../elements/StyledText'
-import { CrossIcon } from '../../elements/images/CrossIcon'
-import { theme } from '../../tokens/stitches.config'
 import { FormInput } from '../../elements/FormElements'
 import { useState, useCallback } from 'react'
-import { createArticleFromURLMutation } from '../../../lib/networking/mutations/createArticleFromURLMutation'
 import { saveUrlMutation } from '../../../lib/networking/mutations/saveUrlMutation'
 import toast from 'react-hot-toast'
 import { showErrorToast } from '../../../lib/toastHelpers'
@@ -24,42 +20,51 @@ type AddLinkModalProps = {
 export function AddLinkModal(props: AddLinkModalProps): JSX.Element {
   const [link, setLink] = useState('')
 
-  const handleLinkSubmission = useCallback(async (link: string) => {
-    const result = await saveUrlMutation(link)
-    // const result = await saveUrlMutation(link)
-    if (result && result.jobId) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      toast((t) => (
-        <Box>
-          Link Saved
-          <span style={{ padding: '16px' }} />
-          <Button
-            style="ctaDarkYellow"
-            autoFocus
-            onClick={() => {
-              window.location.href = `/article/sr/${result.jobId}`
-            }}
-          >
-            Read Now
-          </Button>
-        </Box>
-      ), { position: 'bottom-right' })
-    } else {
-      showErrorToast('Error saving link', { position: 'bottom-right' })
-    }
-  }, [link])
+  const handleLinkSubmission = useCallback(
+    async (link: string) => {
+      const result = await saveUrlMutation(link)
+      // const result = await saveUrlMutation(link)
+      if (result && result.jobId) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        toast(
+          () => (
+            <Box>
+              Link Saved
+              <span style={{ padding: '16px' }} />
+              <Button
+                style="ctaDarkYellow"
+                autoFocus
+                onClick={() => {
+                  window.location.href = `/article/sr/${result.jobId}`
+                }}
+              >
+                Read Now
+              </Button>
+            </Box>
+          ),
+          { position: 'bottom-right' }
+        )
+      } else {
+        showErrorToast('Error saving link', { position: 'bottom-right' })
+      }
+    },
+    [link]
+  )
 
-  const validateLink = useCallback((link: string) => {
-    try {
-      const url = new URL(link)
-      if (url.protocol !== 'https:' && url.protocol !== 'http:') {
+  const validateLink = useCallback(
+    (link: string) => {
+      try {
+        const url = new URL(link)
+        if (url.protocol !== 'https:' && url.protocol !== 'http:') {
+          return false
+        }
+      } catch (e) {
         return false
       }
-    } catch (e) {
-      return false
-    }
-    return true
-  }, [link])
+      return true
+    },
+    [link]
+  )
 
   return (
     <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
@@ -110,7 +115,10 @@ export function AddLinkModal(props: AddLinkModalProps): JSX.Element {
                   fontSize: '14px',
                 }}
               />
-              <ModalButtonBar onOpenChange={props.onOpenChange} acceptButtonLabel="Add Link" />
+              <ModalButtonBar
+                onOpenChange={props.onOpenChange}
+                acceptButtonLabel="Add Link"
+              />
             </form>
           </Box>
         </VStack>
diff --git a/packages/web/components/templates/homeFeed/EditItemModals.tsx b/packages/web/components/templates/homeFeed/EditItemModals.tsx
new file mode 100644
index 000000000..2920a7944
--- /dev/null
+++ b/packages/web/components/templates/homeFeed/EditItemModals.tsx
@@ -0,0 +1,357 @@
+import {
+  ModalRoot,
+  ModalContent,
+  ModalOverlay,
+} from '../../elements/ModalPrimitives'
+import { VStack, HStack, Box, SpanBox } from '../../elements/LayoutPrimitives'
+import { Button } from '../../elements/Button'
+import { StyledText } from '../../elements/StyledText'
+
+import { FormInput } from '../../elements/FormElements'
+import { useCallback, useState } from 'react'
+import { LibraryItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
+import { StyledTextArea } from '../../elements/StyledTextArea'
+import { updatePageMutation } from '../../../lib/networking/mutations/updatePageMutation'
+import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
+import dayjs, { Dayjs } from 'dayjs'
+import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
+import { CloseButton } from '../../elements/CloseButton'
+
+type EditLibraryItemModalProps = {
+  onOpenChange: (open: boolean) => void
+  item: LibraryItem
+  updateItem: (item: LibraryItem) => Promise<void>
+}
+
+export function EditLibraryItemModal(
+  props: EditLibraryItemModalProps
+): JSX.Element {
+  const onSave = useCallback(
+    (
+      title: string,
+      author: string | undefined,
+      description: string,
+      savedAt: Dayjs,
+      publishedAt: Dayjs | undefined
+    ) => {
+      ;(async () => {
+        if (title !== '') {
+          const res = await updatePageMutation({
+            pageId: props.item.node.id,
+            title,
+            description,
+            byline: author,
+            savedAt: savedAt.toISOString(),
+            publishedAt: publishedAt ? publishedAt.toISOString() : undefined,
+          })
+
+          if (res) {
+            await props.updateItem({
+              cursor: props.item.cursor,
+              node: {
+                ...props.item.node,
+                title: title,
+                author: author,
+                description: description,
+              },
+            })
+            showSuccessToast('Link updated succesfully', {
+              position: 'bottom-right',
+            })
+            props.onOpenChange(false)
+          } else {
+            showErrorToast('There was an error updating your link', {
+              position: 'bottom-right',
+            })
+          }
+        } else {
+          showErrorToast('Title must be a non-empty value', {
+            position: 'bottom-right',
+          })
+        }
+      })()
+    },
+    [props]
+  )
+
+  return (
+    <EditItemModal
+      title={props.item.node.title}
+      author={props.item.node.author}
+      description={props.item.node.description}
+      savedAt={dayjs(props.item.node.savedAt)}
+      publishedAt={
+        props.item.node.publishedAt
+          ? dayjs(props.item.node.publishedAt)
+          : undefined
+      }
+      onOpenChange={props.onOpenChange}
+      onSave={onSave}
+    />
+  )
+}
+
+type EditArticleModalProps = {
+  onOpenChange: (open: boolean) => void
+  article: ArticleAttributes
+  updateArticle: (
+    title: string,
+    author: string | undefined,
+    description: string,
+    savedAt: string,
+    publishedAt: string | undefined
+  ) => void
+}
+
+export function EditArticleModal(props: EditArticleModalProps): JSX.Element {
+  const onSave = useCallback(
+    (
+      title: string,
+      author: string | undefined,
+      description: string,
+      savedAt: Dayjs,
+      publishedAt: Dayjs | undefined
+    ) => {
+      ;(async () => {
+        if (title !== '') {
+          const res = await updatePageMutation({
+            pageId: props.article.id,
+            title,
+            description,
+            byline: author,
+            savedAt: savedAt.toISOString(),
+            publishedAt: publishedAt ? publishedAt.toISOString() : undefined,
+          })
+          if (res) {
+            props.updateArticle(
+              title,
+              author,
+              description,
+              savedAt.toISOString(),
+              publishedAt ? publishedAt.toISOString() : undefined
+            )
+            showSuccessToast('Link updated succesfully', {
+              position: 'bottom-right',
+            })
+            props.onOpenChange(false)
+          } else {
+            showErrorToast('There was an error updating your link', {
+              position: 'bottom-right',
+            })
+          }
+        } else {
+          showErrorToast('Title must be a non-empty value', {
+            position: 'bottom-right',
+          })
+        }
+      })()
+    },
+    [props]
+  )
+
+  return (
+    <EditItemModal
+      title={props.article.title}
+      author={props.article.author}
+      description={props.article.description || ''}
+      savedAt={dayjs(props.article.savedAt)}
+      publishedAt={
+        props.article.publishedAt ? dayjs(props.article.publishedAt) : undefined
+      }
+      onOpenChange={props.onOpenChange}
+      onSave={onSave}
+    />
+  )
+}
+
+type EditItemModalProps = {
+  title: string
+  author: string | undefined
+  description: string
+
+  savedAt: Dayjs
+  publishedAt: Dayjs | undefined
+  onOpenChange: (open: boolean) => void
+
+  onSave: (
+    title: string,
+    author: string | undefined,
+    description: string,
+    savedAt: Dayjs,
+    publishedAt: Dayjs | undefined
+  ) => void
+}
+
+function EditItemModal(props: EditItemModalProps): JSX.Element {
+  const [title, setTitle] = useState(props.title)
+  const [author, setAuthor] = useState(props.author)
+  const [savedAt, setSavedAt] = useState(props.savedAt)
+  const [publishedAt, setPublishedAt] = useState(props.publishedAt)
+  const [description, setDescription] = useState(props.description)
+
+  const titleStyle = {
+    mt: '22px',
+    mb: '2px',
+    fontFamily: '$display',
+    fontWeight: '600',
+    fontSize: '11px',
+    color: '#898989',
+  }
+
+  const inputStyle = {
+    mt: '1px',
+    borderRadius: '5px',
+    border: '1px solid $thBorderColor',
+    fontFamily: 'Inter',
+    fontWeight: '500',
+    fontSize: '16px',
+    height: '38px',
+    p: '5px',
+    color: '$thTextContrast2',
+    '&:focus': {
+      outline: 'none !important',
+      border: '1px solid $omnivoreCtaYellow',
+    },
+  }
+
+  return (
+    <ModalRoot defaultOpen onOpenChange={props.onOpenChange} css={{}}>
+      <ModalOverlay />
+      <ModalContent
+        css={{ bg: '$grayBg', p: '20px', maxWidth: '420px' }}
+        onInteractOutside={() => {
+          // remove focus from modal
+          ;(document.activeElement as HTMLElement).blur()
+        }}
+      >
+        <VStack distribution="start" css={{ p: '0px' }}>
+          <Header onOpenChange={props.onOpenChange} />
+          <Box css={{ width: '100%' }}>
+            <form
+              onSubmit={(event) => {
+                event.preventDefault()
+              }}
+            >
+              <HStack distribution="start" css={{ width: '100%' }}>
+                <VStack css={{ width: '45%' }}>
+                  <StyledText css={titleStyle}>SAVED AT:</StyledText>
+                  <FormInput
+                    type="datetime-local"
+                    value={props.savedAt.format('YYYY-MM-DDThh:mm')}
+                    placeholder="Edit Date"
+                    onChange={(event) => {
+                      const dateStr = event.target.value
+                      setSavedAt(dayjs(dateStr))
+                    }}
+                    css={{
+                      ...inputStyle,
+                      fontSize: '14px',
+                    }}
+                  />
+                </VStack>
+                <VStack css={{ width: '45%', marginLeft: 'auto' }}>
+                  <StyledText css={titleStyle}>PUBLISHED AT</StyledText>
+                  <FormInput
+                    type="datetime-local"
+                    value={
+                      props.publishedAt
+                        ? props.publishedAt.format('YYYY-MM-DDThh:mm')
+                        : undefined
+                    }
+                    placeholder="Edit Published Date"
+                    onChange={(event) => {
+                      const dateStr = event.target.value
+                      setPublishedAt(dayjs(dateStr))
+                    }}
+                    css={{
+                      ...inputStyle,
+                      fontSize: '14px',
+                    }}
+                  />
+                </VStack>
+              </HStack>
+              <StyledText css={titleStyle}>TITLE</StyledText>
+              <FormInput
+                type="text"
+                value={title}
+                autoFocus
+                placeholder="Edit Title"
+                onChange={(event) => setTitle(event.target.value)}
+                onFocus={(event) => {
+                  event.target.select()
+                }}
+                css={inputStyle}
+              />
+              <StyledText css={titleStyle}>AUTHOR</StyledText>
+              <FormInput
+                type="author"
+                value={author}
+                placeholder="Edit Author"
+                onChange={(event) => setAuthor(event.target.value)}
+                onFocus={(event) => {
+                  event.target.select()
+                }}
+                css={inputStyle}
+              />
+              <StyledText css={titleStyle}>DESCRIPTION</StyledText>
+              <StyledTextArea
+                css={{
+                  ...inputStyle,
+                  mt: '2px',
+                  width: '100%',
+                  height: '120px',
+                }}
+                placeholder="Edit Description"
+                value={description}
+                onChange={(event) => setDescription(event.target.value)}
+                onFocus={(event) => {
+                  event.target.select()
+                }}
+                maxLength={4000}
+              />
+              <HStack distribution="end" css={{ mt: '12px', width: '100%' }}>
+                <Button
+                  onClick={() => props.onOpenChange(false)}
+                  style="cancelGeneric"
+                  css={{ mr: '5px' }}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  onClick={() => {
+                    props.onSave(
+                      title,
+                      author,
+                      description,
+                      savedAt,
+                      publishedAt
+                    )
+                  }}
+                  style="ctaDarkYellow"
+                  css={{ mb: '0px' }}
+                >
+                  Save Changes
+                </Button>
+              </HStack>
+            </form>
+          </Box>
+        </VStack>
+      </ModalContent>
+    </ModalRoot>
+  )
+}
+
+type HeaderProps = {
+  onOpenChange: (open: boolean) => void
+}
+
+function Header(props: HeaderProps): JSX.Element {
+  return (
+    <HStack distribution="start" alignment="center" css={{ width: '100%' }}>
+      <StyledText style="modalHeadline">Edit Title & Description</StyledText>
+      <SpanBox css={{ marginLeft: 'auto' }}>
+        <CloseButton close={() => props.onOpenChange(false)} />
+      </SpanBox>
+    </HStack>
+  )
+}
diff --git a/packages/web/components/templates/homeFeed/EditTitleModal.tsx b/packages/web/components/templates/homeFeed/EditTitleModal.tsx
deleted file mode 100644
index 6cab4a025..000000000
--- a/packages/web/components/templates/homeFeed/EditTitleModal.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import {
-  ModalRoot,
-  ModalContent,
-  ModalOverlay,
-} from '../../elements/ModalPrimitives'
-import { VStack, HStack, Box } from '../../elements/LayoutPrimitives'
-import { Button } from '../../elements/Button'
-import { StyledText } from '../../elements/StyledText'
-import { CrossIcon } from '../../elements/images/CrossIcon'
-import { theme } from '../../tokens/stitches.config'
-import { FormInput } from '../../elements/FormElements'
-import { useState } from 'react'
-import { LibraryItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
-import { StyledTextArea } from '../../elements/StyledTextArea'
-import { updatePageMutation } from '../../../lib/networking/mutations/updatePageMutation'
-import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
-
-type EditTitleModalProps = {
-  onOpenChange: (open: boolean) => void
-  item: LibraryItem
-  updateItem: (item: LibraryItem) => Promise<void>
-}
-
-export function EditTitleModal(props: EditTitleModalProps): JSX.Element {
-  const [title, setTitle] = useState(props.item.node.title)
-  const [author, setAuthor] = useState(props.item.node.author)
-  const [description, setDescription] = useState(props.item.node.description)
-
-  const handleUpdateTitle = async () => {
-    if (title !== '') {
-      const res = await updatePageMutation({
-        pageId: props.item.node.id,
-        title,
-        description,
-        byline: author,
-      })
-
-      if (res) {
-        await props.updateItem({
-          cursor: props.item.cursor,
-          node: {
-            ...props.item.node,
-            title: title,
-            author: author,
-            description: description,
-          },
-        })
-        showSuccessToast('Link updated succesfully', {
-          position: 'bottom-right',
-        })
-        props.onOpenChange(false)
-      } else {
-        showErrorToast('There was an error updating your link', {
-          position: 'bottom-right',
-        })
-      }
-    } else {
-      showErrorToast('Title must be a non-empty value', {
-        position: 'bottom-right',
-      })
-    }
-  }
-
-  return (
-    <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
-      <ModalOverlay />
-      <ModalContent
-        css={{ bg: '$grayBg', pt: '0px' }}
-        onInteractOutside={() => {
-          // remove focus from modal
-          ;(document.activeElement as HTMLElement).blur()
-        }}
-      >
-        <VStack distribution="start" css={{ p: '$2' }}>
-          <HStack
-            distribution="between"
-            alignment="center"
-            css={{ width: '100%', mt: '4px' }}
-          >
-            <StyledText style="modalHeadline">
-              Edit Title and Description
-            </StyledText>
-            <Button
-              css={{ p: '10px', cursor: 'pointer', pt: '2px' }}
-              style="ghost"
-              onClick={() => {
-                props.onOpenChange(false)
-              }}
-            >
-              <CrossIcon
-                size={11}
-                strokeColor={theme.colors.grayTextContrast.toString()}
-              />
-            </Button>
-          </HStack>
-          <StyledText css={{ mt: '22px', mb: '6px' }}>Title</StyledText>
-          <Box css={{ width: '100%' }}>
-            <form
-              onSubmit={(event) => {
-                event.preventDefault()
-              }}
-            >
-              <FormInput
-                type="text"
-                value={title}
-                autoFocus
-                placeholder="Edit Title"
-                onChange={(event) => setTitle(event.target.value)}
-                css={{
-                  borderRadius: '8px',
-                  border: '1px solid $grayTextContrast',
-                  width: '100%',
-                  p: '$2',
-                }}
-              />
-              <StyledText css={{ mt: '22px', mb: '6px' }}>Author</StyledText>
-              <FormInput
-                type="author"
-                value={author}
-                autoFocus
-                placeholder="Edit Author"
-                onChange={(event) => setAuthor(event.target.value)}
-                css={{
-                  borderRadius: '8px',
-                  border: '1px solid $grayTextContrast',
-                  width: '100%',
-                  p: '$2',
-                }}
-              />
-              <StyledText css={{ mt: '22px', mb: '6px' }}>
-                Description
-              </StyledText>
-              <Box
-                css={{
-                  border: '1px solid $grayTextContrast',
-                  borderRadius: '8px',
-                }}
-              >
-                <StyledTextArea
-                  css={{
-                    p: '14px',
-                    height: '$6',
-                    width: '100%',
-                  }}
-                  placeholder="Edit Description"
-                  value={description}
-                  onChange={(event) => setDescription(event.target.value)}
-                  maxLength={4000}
-                />
-              </Box>
-              <HStack distribution="end" css={{ mt: '12px', width: '100%' }}>
-                <Button
-                  onClick={() => props.onOpenChange(false)}
-                  style="ctaOutlineYellow"
-                  css={{ mr: '16px' }}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  onClick={handleUpdateTitle}
-                  style="ctaDarkYellow"
-                  css={{ mb: '0px' }}
-                >
-                  Save
-                </Button>
-              </HStack>
-            </form>
-          </Box>
-        </VStack>
-      </ModalContent>
-    </ModalRoot>
-  )
-}
diff --git a/packages/web/components/templates/homeFeed/EmptyLibrary.tsx b/packages/web/components/templates/homeFeed/EmptyLibrary.tsx
index e2395dac2..eadc62608 100644
--- a/packages/web/components/templates/homeFeed/EmptyLibrary.tsx
+++ b/packages/web/components/templates/homeFeed/EmptyLibrary.tsx
@@ -1,15 +1,8 @@
-
-
-// There aren't any discussions.
-// You can open a new discussion to ask questions about this repository or get help.
-
 import Link from 'next/link'
 import { Book } from 'phosphor-react'
-import { LibraryItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { Button } from '../../elements/Button'
-import { Box, VStack } from '../../elements/LayoutPrimitives'
+import { VStack } from '../../elements/LayoutPrimitives'
 import { StyledText } from '../../elements/StyledText'
-import { LinkedItemCardAction } from '../../patterns/LibraryCards/CardTypes'
 import { theme } from '../../tokens/stitches.config'
 
 type EmptyLibraryProps = {
@@ -18,19 +11,33 @@ type EmptyLibraryProps = {
 
 export function EmptyLibrary(props: EmptyLibraryProps): JSX.Element {
   return (
-    <VStack alignment="center" distribution="center" css={{ color: '$grayTextContrast', textAlign: 'center', paddingTop: '88px' }}>
+    <VStack
+      alignment="center"
+      distribution="center"
+      css={{
+        color: '$grayTextContrast',
+        textAlign: 'center',
+        paddingTop: '88px',
+      }}
+    >
       <Book size={44} color={theme.colors.grayTextContrast.toString()} />
-        <StyledText style="fixedHeadline" css={{ color: '$grayTextContrast' }}>
-          No results found.
-        </StyledText>
+      <StyledText style="fixedHeadline" css={{ color: '$grayTextContrast' }}>
+        No results found.
+      </StyledText>
 
-        <StyledText style="footnote" css={{ color: '$grayTextContrast' }}>
-          You can add a link or read more about Omnivore&apos;s <Link href="/help/search">advanced search</Link>.
-        </StyledText>
-        
-        <Button style="ctaDarkYellow" onClick={() => { props.onAddLinkClicked() }}>
-          Add Link
-        </Button>
+      <StyledText style="footnote" css={{ color: '$grayTextContrast' }}>
+        You can add a link or read more about Omnivore&apos;s{' '}
+        <Link href="/help/search">advanced search</Link>.
+      </StyledText>
+
+      <Button
+        style="ctaDarkYellow"
+        onClick={() => {
+          props.onAddLinkClicked()
+        }}
+      >
+        Add Link
+      </Button>
     </VStack>
   )
 }
diff --git a/packages/web/components/templates/homeFeed/HeaderSpacer.tsx b/packages/web/components/templates/homeFeed/HeaderSpacer.tsx
new file mode 100644
index 000000000..51d47210c
--- /dev/null
+++ b/packages/web/components/templates/homeFeed/HeaderSpacer.tsx
@@ -0,0 +1,18 @@
+import { Box } from '../../elements/LayoutPrimitives'
+
+export const HEADER_HEIGHT = '105px'
+export const MOBILE_HEADER_HEIGHT = '70px'
+
+export function HeaderSpacer(): JSX.Element {
+  return (
+    <Box
+      css={{
+        height: HEADER_HEIGHT,
+        bg: '$grayBase',
+        '@mdDown': {
+          height: MOBILE_HEADER_HEIGHT,
+        },
+      }}
+    ></Box>
+  )
+}
diff --git a/packages/web/components/templates/homeFeed/HighlightItem.tsx b/packages/web/components/templates/homeFeed/HighlightItem.tsx
new file mode 100644
index 000000000..dd2e3841d
--- /dev/null
+++ b/packages/web/components/templates/homeFeed/HighlightItem.tsx
@@ -0,0 +1,275 @@
+import { styled } from '@stitches/react'
+import { useRouter } from 'next/router'
+import { DotsThreeVertical } from 'phosphor-react'
+import { Fragment, useCallback, useMemo, useState } from 'react'
+import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
+import { Label } from '../../../lib/networking/fragments/labelFragment'
+import { deleteHighlightMutation } from '../../../lib/networking/mutations/deleteHighlightMutation'
+import { setLabelsForHighlight } from '../../../lib/networking/mutations/setLabelsForHighlight'
+import { LibraryItemNode } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
+import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
+import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
+import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
+import { HighlightNoteTextEditArea } from '../../elements/HighlightNoteTextEditArea'
+import { LabelChip } from '../../elements/LabelChip'
+import {
+  Blockquote,
+  Box,
+  HStack,
+  SpanBox,
+  VStack,
+} from '../../elements/LayoutPrimitives'
+import { StyledText } from '../../elements/StyledText'
+import { ConfirmationModal } from '../../patterns/ConfirmationModal'
+import { SetLabelsModal } from '../article/SetLabelsModal'
+
+type HighlightItemProps = {
+  highlight: Highlight
+  viewer: UserBasicData | undefined
+  item: LibraryItemNode
+}
+
+const StyledQuote = styled(Blockquote, {
+  margin: '0px',
+  fontSize: '16px',
+  fontFamily: '$inter',
+  fontWeight: '500',
+  lineHeight: '1.50',
+  color: '$thHighContrast',
+  paddingLeft: '15px',
+  borderLeft: '2px solid $omnivoreCtaYellow',
+})
+
+export function HighlightItem(props: HighlightItemProps): JSX.Element {
+  const router = useRouter()
+  const [hover, setHover] = useState(false)
+  const [isEditing, setIsEditing] = useState(false)
+
+  const lines = useMemo(
+    () => props.highlight.quote.split('\n'),
+    [props.highlight.quote]
+  )
+
+  const [showConfirmDeleteHighlightId, setShowConfirmDeleteHighlightId] =
+    useState<undefined | string>(undefined)
+  const [labelsTarget, setLabelsTarget] = useState<Highlight | undefined>(
+    undefined
+  )
+  const [, updateState] = useState({})
+
+  return (
+    <>
+      <HStack
+        css={{ width: '100%', py: '20px', cursor: 'pointer' }}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+      >
+        <VStack
+          css={{
+            gap: '10px',
+            height: '100%',
+            width: '100%',
+
+            wordBreak: 'break-word',
+            overflow: 'clip',
+          }}
+          alignment="start"
+          distribution="start"
+        >
+          <StyledQuote
+            onClick={(event) => {
+              if (router && props.viewer) {
+                const dest = `/${props.viewer}/${props.item.slug}#${props.highlight.id}`
+                router.push(dest)
+              }
+              event.preventDefault()
+            }}
+          >
+            <SpanBox css={{ p: '1px', borderRadius: '2px' }}>
+              {lines.map((line: string, index: number) => (
+                <Fragment key={index}>
+                  {line}
+                  {index !== lines.length - 1 && (
+                    <>
+                      <br />
+                      <br />
+                    </>
+                  )}
+                </Fragment>
+              ))}
+            </SpanBox>
+          </StyledQuote>
+
+          <Box css={{ display: 'block' }}>
+            {props.highlight.labels?.map((label: Label, index: number) => (
+              <LabelChip
+                key={index}
+                text={label.name || ''}
+                color={label.color}
+              />
+            ))}
+          </Box>
+
+          {!isEditing && (
+            <StyledText
+              css={{
+                borderRadius: '6px',
+                bg: '#EBEBEB',
+                p: '10px',
+                width: '100%',
+                marginTop: '5px',
+                color: '#3D3D3D',
+              }}
+              onClick={() => setIsEditing(true)}
+            >
+              {props.highlight.annotation
+                ? props.highlight.annotation
+                : 'Add your notes...'}
+            </StyledText>
+          )}
+          {isEditing && (
+            <HighlightNoteTextEditArea
+              setIsEditing={setIsEditing}
+              highlight={props.highlight}
+              // eslint-disable-next-line @typescript-eslint/no-empty-function
+              updateHighlight={() => {}}
+            />
+          )}
+        </VStack>
+        <SpanBox
+          css={{
+            marginLeft: 'auto',
+            width: '20px',
+            visibility: hover ? 'unset' : 'hidden',
+            '@media (hover: none)': {
+              visibility: 'unset',
+            },
+          }}
+        >
+          <HighlightsMenu
+            highlight={props.highlight}
+            setLabelsTarget={setLabelsTarget}
+            setShowConfirmDeleteHighlightId={setShowConfirmDeleteHighlightId}
+          />
+        </SpanBox>
+      </HStack>
+      {showConfirmDeleteHighlightId && (
+        <ConfirmationModal
+          message={'Are you sure you want to delete this highlight?'}
+          onAccept={async () => {
+            setShowConfirmDeleteHighlightId(undefined)
+            const result = await deleteHighlightMutation(
+              showConfirmDeleteHighlightId
+            )
+            if (result) {
+              showSuccessToast('Highlight deleted')
+            } else {
+              showErrorToast('Error deleting highlight')
+            }
+          }}
+          onOpenChange={() => setShowConfirmDeleteHighlightId(undefined)}
+        />
+      )}
+      {labelsTarget && (
+        <SetLabelsModal
+          provider={labelsTarget}
+          onOpenChange={function (open: boolean): void {
+            setLabelsTarget(undefined)
+          }}
+          onLabelsUpdated={function (labels: Label[]): void {
+            updateState({})
+          }}
+          save={function (labels: Label[]): Promise<Label[] | undefined> {
+            const result = setLabelsForHighlight(
+              labelsTarget.id,
+              labels.map((label) => label.id)
+            )
+            return result
+          }}
+        />
+      )}
+    </>
+  )
+}
+
+type HighlightsMenuProps = {
+  highlight: Highlight
+
+  setLabelsTarget: (target: Highlight) => void
+  setShowConfirmDeleteHighlightId: (set: string) => void
+}
+
+function HighlightsMenu(props: HighlightsMenuProps): JSX.Element {
+  const copyHighlight = useCallback(() => {
+    ;(async () => {
+      await navigator.clipboard.writeText(props.highlight.quote)
+      showSuccessToast('Highlight copied')
+    })()
+  }, [props.highlight])
+
+  const exportHighlight = useCallback(() => {
+    ;(async () => {
+      const markdown = highlightAsMarkdown(props.highlight)
+      await navigator.clipboard.writeText(markdown)
+      showSuccessToast('Highlight copied')
+    })()
+  }, [props.highlight])
+
+  return (
+    <Dropdown
+      triggerElement={
+        <Box
+          css={{
+            display: 'flex',
+            height: '20px',
+            width: '20px',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '1000px',
+            '&:hover': {
+              bg: '#898989',
+            },
+          }}
+        >
+          <DotsThreeVertical size={20} color="#EBEBEB" weight="bold" />
+        </Box>
+      }
+    >
+      <DropdownOption
+        onSelect={async () => {
+          copyHighlight()
+        }}
+        title="Copy"
+      />
+      <DropdownOption
+        onSelect={() => {
+          props.setLabelsTarget(props.highlight)
+        }}
+        title="Labels"
+      />
+      <DropdownOption
+        onSelect={() => {
+          exportHighlight()
+        }}
+        title="Delete"
+      />
+    </Dropdown>
+  )
+}
+
+export function highlightAsMarkdown(highlight: Highlight) {
+  let buffer = `> ${highlight.quote}`
+  if (highlight.annotation) {
+    buffer += `\n\n${highlight.annotation}`
+  }
+  buffer += '\n'
+  return buffer
+}
+
+export function highlightsAsMarkdown(highlights: Highlight[]) {
+  return highlights
+    .map((highlight) => {
+      return highlightAsMarkdown(highlight)
+    })
+    .join('\n\n')
+}
diff --git a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
new file mode 100644
index 000000000..0d0c72d76
--- /dev/null
+++ b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
@@ -0,0 +1,369 @@
+import { DotsThreeVertical, HighlighterCircle } from 'phosphor-react'
+import { useCallback, useEffect, useState } from 'react'
+import { Toaster } from 'react-hot-toast'
+import { LibraryItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
+import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
+import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
+import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
+
+import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { StyledText } from '../../elements/StyledText'
+import {
+  MetaStyle,
+  timeAgo,
+} from '../../patterns/LibraryCards/LibraryCardStyles'
+import { LibraryHighlightGridCard } from '../../patterns/LibraryCards/LibraryHighlightGridCard'
+import { HighlightItem, highlightsAsMarkdown } from './HighlightItem'
+
+type HighlightItemsLayoutProps = {
+  items: LibraryItem[]
+  viewer: UserBasicData | undefined
+
+  gridContainerRef: React.RefObject<HTMLDivElement>
+}
+
+export function HighlightItemsLayout(
+  props: HighlightItemsLayoutProps
+): JSX.Element {
+  const [currentItem, setCurrentItem] = useState<LibraryItem | undefined>(
+    undefined
+  )
+
+  useEffect(() => {
+    // Only set the current item on larger screens
+    if (window.innerWidth >= 992 /* lgDown */) {
+      if (!currentItem && props.items.length > 0) {
+        setCurrentItem(props.items[0])
+      }
+    }
+  }, [currentItem, setCurrentItem, props.items])
+
+  return (
+    <>
+      <HStack
+        css={{
+          width: '100%',
+          height: '100%',
+          bg: '$thBackground2',
+        }}
+        distribution="start"
+        alignment="start"
+      >
+        <Toaster />
+        <VStack
+          css={{
+            width: '430px',
+            height: '100%',
+            bg: '$thBackground',
+            '@lgDown': {
+              width: '100%',
+            },
+          }}
+          distribution="start"
+          alignment="start"
+        >
+          <HStack
+            css={{
+              width: 'calc(100% - 35px)',
+              height: '55px',
+              mx: '20px',
+              borderBottom: '1px solid $thBorderColor',
+            }}
+            alignment="center"
+            distribution="start"
+          >
+            {/* <Box
+              css={{
+                display: 'flex',
+                height: '20px',
+                width: '20px',
+                marginLeft: 'auto',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: '1000px',
+                '&:hover': {
+                  bg: '#898989',
+                },
+              }}
+            >
+              <DotsThreeVertical size={200} color="#898989" weight="bold" />
+            </Box> */}
+          </HStack>
+          {props.items.map((linkedItem) => (
+            <Box
+              className="linkedItemCard"
+              data-testid="linkedItemCard"
+              id={linkedItem.node.id}
+              tabIndex={0}
+              key={linkedItem.node.id}
+              css={{
+                width: '100%',
+                height: '100%',
+                px: '15px',
+              }}
+              onClick={(event) => {
+                setCurrentItem(linkedItem)
+                event.preventDefault()
+              }}
+            >
+              {props.viewer && (
+                <LibraryItemCard
+                  item={linkedItem}
+                  viewer={props.viewer}
+                  selected={currentItem?.node.id == linkedItem.node.id}
+                />
+              )}
+            </Box>
+          ))}
+        </VStack>
+        {currentItem && (
+          <>
+            <SpanBox
+              css={{
+                display: 'flex',
+                height: '100%',
+                flexGrow: '1',
+                '@lgDown': {
+                  display: 'none',
+                  flexGrow: 'unset',
+                },
+              }}
+            >
+              <HighlightList item={currentItem} viewer={props.viewer} />
+            </SpanBox>
+          </>
+        )}
+      </HStack>
+    </>
+  )
+}
+
+type HighlightTitleCardProps = {
+  item: LibraryItem
+  viewer: UserBasicData
+  selected: boolean
+}
+
+function LibraryItemCard(props: HighlightTitleCardProps): JSX.Element {
+  return (
+    <>
+      <SpanBox css={{ display: 'none', '@lgDown': { display: 'flex' } }}>
+        <LibraryHighlightGridCard
+          item={props.item.node}
+          viewer={props.viewer}
+        />
+      </SpanBox>
+      <SpanBox css={{ display: 'none', '@lg': { display: 'flex' } }}>
+        <HighlightTitleCard {...props} />
+      </SpanBox>
+    </>
+  )
+}
+
+function HighlightTitleCard(props: HighlightTitleCardProps): JSX.Element {
+  return (
+    <HStack
+      css={{
+        height: '100%',
+        width: '100%',
+        py: '10px',
+        borderBottom: '1px solid $thBorderColor',
+      }}
+      distribution="start"
+    >
+      <HStack
+        css={{
+          width: '100%',
+          height: '100%',
+          py: '15px',
+          px: '15px',
+          borderRadius: '10px',
+          bg: props.selected ? '$thBackground2' : 'unset',
+        }}
+      >
+        <VStack
+          css={{
+            width: '100%',
+            height: '100%',
+            borderRadius: '5px',
+          }}
+        >
+          <HStack css={MetaStyle} distribution="start">
+            <Box>
+              {timeAgo(props.item.node.savedAt)}
+              {` `}
+              {props.item.node.wordsCount ?? 0 > 0
+                ? `  • ${Math.max(
+                    1,
+                    Math.round((props.item.node.wordsCount ?? 0) / 235)
+                  )} min read`
+                : null}
+              {props.item.node.readingProgressPercent ?? 0 > 0 ? (
+                <>
+                  {`  • `}
+                  <SpanBox css={{ color: '#55B938' }}>
+                    {`${Math.round(props.item.node.readingProgressPercent)}%`}
+                  </SpanBox>
+                </>
+              ) : null}
+            </Box>
+          </HStack>
+          <Box
+            css={{
+              mt: '5px',
+              color: '$thTextContrast2',
+              fontSize: '16px',
+              fontWeight: '500',
+              lineHeight: '1.50',
+              fontFamily: '$display',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              wordBreak: 'break-word',
+            }}
+          >
+            {props.item.node.title}
+          </Box>
+        </VStack>
+
+        <HighlightCountChip
+          selected={props.selected}
+          count={props.item.node.highlights?.length ?? 0}
+        />
+      </HStack>
+    </HStack>
+  )
+}
+
+type HighlightListProps = {
+  item: LibraryItem
+  viewer: UserBasicData | undefined
+}
+
+function HighlightList(props: HighlightListProps): JSX.Element {
+  const exportHighlights = useCallback(() => {
+    ;(async () => {
+      if (!props.item.node.highlights) {
+        showErrorToast('No highlights to export')
+        return
+      }
+      const markdown = highlightsAsMarkdown(props.item.node.highlights)
+      await navigator.clipboard.writeText(markdown)
+      showSuccessToast('Highlight copied')
+    })()
+  }, [props.item.node.highlights])
+
+  return (
+    <HStack
+      css={{
+        m: '20px',
+        height: '100%',
+        flexGrow: '1',
+      }}
+      distribution="center"
+      alignment="start"
+    >
+      <VStack
+        css={{
+          width: '425px',
+          height: '100%',
+          borderRadius: '6px',
+        }}
+        alignment="start"
+        distribution="start"
+      >
+        <HStack
+          css={{
+            width: '100%',
+            height: '100%',
+            pt: '25px',
+            borderBottom: '1px solid $thBorderColor',
+          }}
+          alignment="center"
+          distribution="start"
+        >
+          <StyledText
+            css={{
+              fontWeight: '600',
+              fontSize: '15px',
+              fontFamily: '$display',
+              width: '100%',
+              color: '$thTextContrast2',
+            }}
+          >
+            HIGHLIGHTS
+          </StyledText>
+          <Dropdown
+            triggerElement={
+              <Box
+                css={{
+                  display: 'flex',
+                  height: '20px',
+                  width: '20px',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  borderRadius: '1000px',
+                  '&:hover': {
+                    bg: '#898989',
+                  },
+                }}
+              >
+                <DotsThreeVertical size={20} color="#EBEBEB" weight="bold" />
+              </Box>
+            }
+          >
+            <DropdownOption
+              onSelect={() => {
+                exportHighlights()
+              }}
+              title="Export"
+            />
+          </Dropdown>
+        </HStack>
+        <VStack css={{ height: '100%', width: '100%' }} distribution="start">
+          {(props.item.node.highlights ?? []).map((highlight) => (
+            <HighlightItem
+              key={highlight.id}
+              viewer={props.viewer}
+              item={props.item.node}
+              highlight={highlight}
+            />
+          ))}
+        </VStack>
+      </VStack>
+    </HStack>
+  )
+}
+
+type HighlightCountChipProps = {
+  count: number
+  selected: boolean
+}
+
+function HighlightCountChip(props: HighlightCountChipProps): JSX.Element {
+  return (
+    <HStack
+      css={{
+        gap: '5px',
+        borderRadius: '12px',
+        marginLeft: 'auto',
+        minWidth: '50px',
+        minHeight: '25px',
+        width: '47px',
+        color: props.selected ? '#3D3D3D' : '#898989',
+        bg: props.selected ? '#D9D9D9' : '$thBackground2',
+        fontFamily: '$inter',
+        fontSize: '14px',
+        fontWeight: '500',
+        ml: '30px',
+      }}
+      alignment="center"
+      distribution="center"
+    >
+      {props.count}
+      <HighlighterCircle
+        size={15}
+        color={props.selected ? '#3D3D3D' : '#898989'}
+      />
+    </HStack>
+  )
+}
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index cd2fb681a..480c6fcdd 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -6,34 +6,23 @@ import type {
   LibraryItemsQueryInput,
 } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { useGetLibraryItemsQuery } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
-import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery'
+import {
+  useGetViewerQuery,
+  UserBasicData,
+} from '../../../lib/networking/queries/useGetViewerQuery'
 import { LinkedItemCardAction } from '../../patterns/LibraryCards/CardTypes'
 import { LinkedItemCard } from '../../patterns/LibraryCards/LinkedItemCard'
 import { useRouter } from 'next/router'
 import { Button } from '../../elements/Button'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { LibrarySearchBar } from './LibrarySearchBar'
 import { StyledText } from '../../elements/StyledText'
 import { AddLinkModal } from './AddLinkModal'
 import { styled, theme } from '../../tokens/stitches.config'
-import { ListLayoutIcon } from '../../elements/images/ListLayoutIcon'
-import { GridLayoutIcon } from '../../elements/images/GridLayoutIcon'
-import {
-  libraryListCommands,
-  searchBarCommands,
-} from '../../../lib/keyboardShortcuts/navigationShortcuts'
+import { libraryListCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
 import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
-import { ShareArticleModal } from '../article/ShareArticleModal'
-import { webBaseURL } from '../../../lib/appConfig'
 import { Toaster } from 'react-hot-toast'
-import { SnoozeLinkModal } from '../article/SnoozeLinkModal'
-import {
-  createReminderMutation,
-  ReminderType,
-} from '../../../lib/networking/mutations/createReminderMutation'
 import { useFetchMore } from '../../../lib/hooks/useFetchMoreScroll'
 import { usePersistedState } from '../../../lib/hooks/usePersistedState'
-import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 import { ConfirmationModal } from '../../patterns/ConfirmationModal'
 import { SetLabelsModal } from '../article/SetLabelsModal'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
@@ -44,7 +33,7 @@ import {
   State,
 } from '../../../lib/networking/fragments/articleFragment'
 import { Action, createAction, useKBar, useRegisterActions } from 'kbar'
-import { EditTitleModal } from './EditTitleModal'
+import { EditLibraryItemModal } from './EditItemModals'
 import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
 import debounce from 'lodash/debounce'
 import {
@@ -55,22 +44,12 @@ import {
 import axios from 'axios'
 import { uploadFileRequestMutation } from '../../../lib/networking/mutations/uploadFileMutation'
 import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation'
+import { LibraryHeader } from './LibraryHeader'
+import { LibraryFilterMenu } from './LibraryFilterMenu'
+import { HighlightItemsLayout } from './HighlightsLayout'
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
-
-const timeZoneHourDiff = -new Date().getTimezoneOffset() / 60
-
-const SAVED_SEARCHES: Record<string, string> = {
-  Inbox: `in:inbox`,
-  'Read Later': `in:inbox -label:Newsletter`,
-  Highlights: `type:highlights`,
-  Today: `in:inbox saved:${
-    new Date(new Date().getTime() - 24 * 3600000).toISOString().split('T')[0]
-  }Z${timeZoneHourDiff.toLocaleString('en-US', {
-    signDisplay: 'always',
-  })}..*`,
-  Newsletters: `in:inbox label:Newsletter`,
-}
+export type LibraryMode = 'reads' | 'highlights'
 
 const fetchSearchResults = async (query: string, cb: any) => {
   if (!query.startsWith('#')) return
@@ -92,6 +71,7 @@ export function HomeFeedContainer(): JSX.Element {
   const router = useRouter()
   const { queryValue } = useKBar((state) => ({ queryValue: state.searchQuery }))
   const [searchResults, setSearchResults] = useState<SearchItem[]>([])
+  const [mode, setMode] = useState<LibraryMode>('reads')
 
   const defaultQuery = {
     limit: 10,
@@ -101,14 +81,6 @@ export function HomeFeedContainer(): JSX.Element {
 
   const gridContainerRef = useRef<HTMLDivElement>(null)
 
-  const [shareTarget, setShareTarget] = useState<LibraryItem | undefined>(
-    undefined
-  )
-
-  const [snoozeTarget, setSnoozeTarget] = useState<LibraryItem | undefined>(
-    undefined
-  )
-
   const [labelsTarget, setLabelsTarget] = useState<LibraryItem | undefined>(
     undefined
   )
@@ -122,14 +94,6 @@ export function HomeFeedContainer(): JSX.Element {
   const [queryInputs, setQueryInputs] =
     useState<LibraryItemsQueryInput>(defaultQuery)
 
-  useKeyboardShortcuts(
-    searchBarCommands((action) => {
-      if (action === 'clearSearch') {
-        setQueryInputs(defaultQuery)
-      }
-    })
-  )
-
   const {
     itemsPages,
     size,
@@ -150,6 +114,17 @@ export function HomeFeedContainer(): JSX.Element {
     } else setSearchResults([])
   }, [queryValue])
 
+  useEffect(() => {
+    if (
+      queryInputs.searchQuery &&
+      queryInputs.searchQuery?.indexOf('mode:highlights') > -1
+    ) {
+      setMode('highlights')
+    } else {
+      setMode('reads')
+    }
+  }, [queryInputs])
+
   useEffect(() => {
     if (!router.isReady) return
     const q = router.query['q']
@@ -161,9 +136,17 @@ export function HomeFeedContainer(): JSX.Element {
       setQueryInputs({ ...queryInputs, searchQuery: qs })
       performActionOnItem('refresh', undefined as unknown as any)
     }
+    const mode = router.query['mode']
+
     // intentionally not watching queryInputs here to prevent infinite looping
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setQueryInputs, router.isReady, router.query, performActionOnItem])
+  }, [
+    setMode,
+    setQueryInputs,
+    router.isReady,
+    router.query,
+    performActionOnItem,
+  ])
 
   const hasMore = useMemo(() => {
     if (!itemsPages) {
@@ -339,12 +322,6 @@ export function HomeFeedContainer(): JSX.Element {
       case 'mark-unread':
         performActionOnItem('mark-unread', item)
         break
-      case 'share':
-        setShareTarget(item)
-        break
-      case 'snooze':
-        setSnoozeTarget(item)
-        break
       case 'set-labels':
         setLabelsTarget(item)
         break
@@ -357,22 +334,8 @@ export function HomeFeedContainer(): JSX.Element {
   }
 
   const modalTargetItem = useMemo(() => {
-    return (
-      labelsTarget ||
-      snoozeTarget ||
-      shareTarget ||
-      linkToEdit ||
-      linkToRemove ||
-      linkToUnsubscribe
-    )
-  }, [
-    labelsTarget,
-    snoozeTarget,
-    shareTarget,
-    linkToEdit,
-    linkToRemove,
-    linkToUnsubscribe,
-  ])
+    return labelsTarget || linkToEdit || linkToRemove || linkToUnsubscribe
+  }, [labelsTarget, linkToEdit, linkToRemove, linkToUnsubscribe])
 
   useKeyboardShortcuts(
     libraryListCommands((action) => {
@@ -472,9 +435,6 @@ export function HomeFeedContainer(): JSX.Element {
         case 'showEditLabelsModal':
           handleCardAction('set-labels', activeItem)
           break
-        case 'shareItem':
-          setShareTarget(activeItem)
-          break
         case 'sortDescending':
           setQueryInputs({ ...queryInputs, sortDescending: true })
           break
@@ -572,6 +532,8 @@ export function HomeFeedContainer(): JSX.Element {
       reloadItems={mutate}
       searchTerm={queryInputs.searchQuery}
       gridContainerRef={gridContainerRef}
+      mode={mode}
+      setMode={setMode}
       applySearchQuery={(searchQuery: string) => {
         setQueryInputs({
           ...queryInputs,
@@ -583,8 +545,10 @@ export function HomeFeedContainer(): JSX.Element {
         } else {
           qp.delete('q')
         }
+
         const href = `${window.location.pathname}?${qp.toString()}`
         router.push(href, href, { shallow: true })
+        window.sessionStorage.setItem('q', qp.toString())
         performActionOnItem('refresh', undefined as unknown as any)
       }}
       loadMore={() => {
@@ -597,10 +561,6 @@ export function HomeFeedContainer(): JSX.Element {
       hasData={!!itemsPages}
       totalItems={itemsPages?.[0].search.pageInfo.totalCount || 0}
       isValidating={isValidating}
-      shareTarget={shareTarget}
-      setShareTarget={setShareTarget}
-      snoozeTarget={snoozeTarget}
-      setSnoozeTarget={setSnoozeTarget}
       labelsTarget={labelsTarget}
       setLabelsTarget={setLabelsTarget}
       showAddLinkModal={showAddLinkModal}
@@ -631,10 +591,6 @@ type HomeFeedContentProps = {
   totalItems: number
   isValidating: boolean
   loadMore: () => void
-  shareTarget: LibraryItem | undefined
-  setShareTarget: (target: LibraryItem | undefined) => void
-  snoozeTarget: LibraryItem | undefined
-  setSnoozeTarget: (target: LibraryItem | undefined) => void
   labelsTarget: LibraryItem | undefined
   setLabelsTarget: (target: LibraryItem | undefined) => void
   showAddLinkModal: boolean
@@ -650,22 +606,48 @@ type HomeFeedContentProps = {
   linkToUnsubscribe: LibraryItem | undefined
   setLinkToUnsubscribe: (set: LibraryItem | undefined) => void
 
+  mode: LibraryMode
+  setMode: (set: LibraryMode) => void
+
   actionHandler: (
     action: LinkedItemCardAction,
     item: LibraryItem | undefined
   ) => Promise<void>
 }
 
+const DragnDropContainer = styled('div', {
+  width: '100%',
+  height: '80%',
+  position: 'absolute',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  zIndex: '1',
+  alignSelf: 'center',
+  left: 0,
+})
+
+const DragnDropStyle = styled('div', {
+  border: '3px dashed gray',
+  backgroundColor: 'aliceblue',
+  borderRadius: '5px',
+  width: '100%',
+  height: '100%',
+  opacity: '0.9',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  alignSelf: 'center',
+  left: 0,
+  margin: '16px',
+})
+
 function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
   const { viewerData } = useGetViewerQuery()
   const [layout, setLayout] = usePersistedState<LayoutType>({
     key: 'libraryLayout',
     initialValue: 'GRID_LAYOUT',
   })
-  const [showRemoveLinkConfirmation, setShowRemoveLinkConfirmation] =
-    useState(false)
-  const [showUnsubscribeConfirmation, setShowUnsubscribeConfirmation] =
-    useState(false)
 
   const updateLayout = useCallback(
     async (newLayout: LayoutType) => {
@@ -675,54 +657,74 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
     [layout, setLayout]
   )
 
+  const [showFilterMenu, setShowFilterMenu] = useState(false)
+
+  return (
+    <VStack
+      css={{
+        height: '100%',
+        width: props.mode == 'highlights' ? '100%' : 'unset',
+      }}
+    >
+      <LibraryHeader
+        layout={layout}
+        updateLayout={updateLayout}
+        searchTerm={props.searchTerm}
+        applySearchQuery={(searchQuery: string) => {
+          console.log('searching with searchQuery: ', searchQuery)
+          props.applySearchQuery(searchQuery)
+        }}
+        showFilterMenu={showFilterMenu}
+        setShowFilterMenu={setShowFilterMenu}
+      />
+      <HStack css={{ width: '100%', height: '100%' }}>
+        <LibraryFilterMenu
+          setShowAddLinkModal={props.setShowAddLinkModal}
+          searchTerm={props.searchTerm}
+          applySearchQuery={(searchQuery: string) => {
+            console.log('searching with searchQuery: ', searchQuery)
+            props.applySearchQuery(searchQuery)
+          }}
+          showFilterMenu={showFilterMenu}
+          setShowFilterMenu={setShowFilterMenu}
+        />
+
+        {props.mode == 'highlights' && (
+          <HighlightItemsLayout
+            gridContainerRef={props.gridContainerRef}
+            items={props.items}
+            viewer={viewerData?.me}
+          />
+        )}
+
+        {props.mode == 'reads' && (
+          <LibraryItemsLayout
+            viewer={viewerData?.me}
+            layout={layout}
+            {...props}
+          />
+        )}
+      </HStack>
+    </VStack>
+  )
+}
+
+type LibraryItemsLayoutProps = {
+  layout: LayoutType
+  viewer?: UserBasicData
+} & HomeFeedContentProps
+
+function LibraryItemsLayout(props: LibraryItemsLayoutProps): JSX.Element {
+  const [uploadingFiles, setUploadingFiles] = useState([])
+  const [inDragOperation, setInDragOperation] = useState(false)
+  const [uploadProgress, setUploadProgress] = useState(0)
+
+  const [showRemoveLinkConfirmation, setShowRemoveLinkConfirmation] =
+    useState(false)
+  const [showUnsubscribeConfirmation, setShowUnsubscribeConfirmation] =
+    useState(false)
   const [, updateState] = useState({})
 
-  const StyledToggleButton = styled('button', {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    p: '0px',
-    backgroundColor: 'transparent',
-    border: 'none',
-    cursor: 'pointer',
-    width: '32px',
-    height: '32px',
-    borderRadius: '4px',
-    '&:hover': {
-      opacity: 0.8,
-    },
-    '&[data-state="on"]': {
-      bg: 'rgb(43, 43, 43)',
-    },
-  })
-
-  const DragnDropContainer = styled('div', {
-    width: '100%',
-    height: '80%',
-    position: 'absolute',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: '1',
-    alignSelf: 'center',
-    left: 0,
-  })
-
-  const DragnDropStyle = styled('div', {
-    border: '3px dashed gray',
-    backgroundColor: 'aliceblue',
-    borderRadius: '5px',
-    width: '100%',
-    height: '100%',
-    opacity: '0.9',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    alignSelf: 'center',
-    left: 0,
-    margin: '16px',
-  })
-
   const removeItem = () => {
     if (!props.linkToRemove) {
       return
@@ -742,10 +744,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
     setShowUnsubscribeConfirmation(false)
   }
 
-  const [uploadingFiles, setUploadingFiles] = useState([])
-  const [inDragOperation, setInDragOperation] = useState(false)
-  const [uploadProgress, setUploadProgress] = useState(0)
-
   const handleDrop = async (acceptedFiles: any) => {
     setInDragOperation(false)
     setUploadingFiles(acceptedFiles.map((file: { name: any }) => file.name))
@@ -795,116 +793,16 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
   return (
     <>
       <VStack
-        alignment="center"
+        alignment="start"
+        distribution="start"
         css={{
-          px: '$3',
-          width: '100%',
-          '@smDown': {
-            px: '$2',
-          },
+          height: '100%',
         }}
       >
         <Toaster />
 
         {props.isValidating && props.items.length == 0 && <TopBarProgress />}
-        <HStack alignment="center" distribution="start" css={{ width: '100%' }}>
-          <StyledText
-            style="subHeadline"
-            css={{
-              mr: '32px',
-              '@smDown': {
-                mr: '16px',
-              },
-            }}
-          >
-            Library
-          </StyledText>
-          <Box
-            css={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <StyledToggleButton
-              data-state={layout === 'GRID_LAYOUT' ? 'on' : 'off'}
-              onClick={() => {
-                updateLayout('GRID_LAYOUT')
-              }}
-            >
-              <GridLayoutIcon color={'rgb(211, 211, 213)'} />
-            </StyledToggleButton>
-            <StyledToggleButton
-              data-state={layout === 'LIST_LAYOUT' ? 'on' : 'off'}
-              onClick={() => {
-                updateLayout('LIST_LAYOUT')
-              }}
-            >
-              <ListLayoutIcon color={'rgb(211, 211, 213)'} />
-            </StyledToggleButton>
-          </Box>
-          <Button
-            style="ctaDarkYellow"
-            css={{ marginLeft: 'auto' }}
-            onClick={() => {
-              props.setShowAddLinkModal(true)
-            }}
-          >
-            Add Link
-          </Button>
-        </HStack>
-        <LibrarySearchBar
-          searchTerm={props.searchTerm}
-          applySearchQuery={props.applySearchQuery}
-        />
 
-        {viewerData?.me && (
-          <Box
-            css={{
-              display: 'flex',
-              width: '100%',
-              height: '44px',
-              marginTop: '16px',
-              gap: '8px',
-              flexDirection: 'row',
-              overflowY: 'scroll',
-              scrollbarWidth: 'none',
-              '&::-webkit-scrollbar': {
-                display: 'none',
-              },
-            }}
-          >
-            {Object.keys(SAVED_SEARCHES).map((key) => {
-              const isInboxTerm = (term: string) => {
-                return !term || term === 'in:inbox'
-              }
-
-              const searchQuery = SAVED_SEARCHES[key]
-              const style =
-                searchQuery === props.searchTerm ||
-                (!props.searchTerm && isInboxTerm(searchQuery))
-                  ? 'ctaDarkYellow'
-                  : 'ctaLightGray'
-              return (
-                <Button
-                  key={key}
-                  style={style}
-                  onClick={() => {
-                    props.applySearchQuery(searchQuery)
-                  }}
-                  css={{
-                    p: '10px 12px',
-                    height: '37.5px',
-                    borderRadius: '6px',
-                    whiteSpace: 'nowrap',
-                  }}
-                >
-                  {key}
-                </Button>
-              )
-            })}
-          </Box>
-        )}
         <Dropzone
           onDrop={handleDrop}
           onDragEnter={() => {
@@ -922,7 +820,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
           {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
             <div
               {...getRootProps({ className: 'dropzone' })}
-              style={{ width: '100%', height: '100%' }}
+              style={{ height: '100%', width: '100%' }}
             >
               {inDragOperation && uploadingFiles.length < 1 && (
                 <DragnDropContainer>
@@ -981,85 +879,21 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
                   }}
                 />
               ) : (
-                <Box
-                  ref={props.gridContainerRef}
-                  css={{
-                    py: '$3',
-                    display: 'grid',
-                    width: '100%',
-                    gridAutoRows: 'auto',
-                    borderRadius: '8px',
-                    gridGap: layout == 'LIST_LAYOUT' ? '0' : '$3',
-                    marginTop: layout == 'LIST_LAYOUT' ? '21px' : '0',
-                    marginBottom: '0px',
-                    paddingTop: layout == 'LIST_LAYOUT' ? '0' : '21px',
-                    paddingBottom: layout == 'LIST_LAYOUT' ? '0px' : '21px',
-                    overflow: 'hidden',
-                    '@smDown': {
-                      border: 'unset',
-                      width: layout == 'LIST_LAYOUT' ? '100vw' : undefined,
-                      margin:
-                        layout == 'LIST_LAYOUT' ? '16px -16px' : undefined,
-                      borderRadius: layout == 'LIST_LAYOUT' ? 0 : undefined,
-                    },
-                    '@md': {
-                      gridTemplateColumns:
-                        layout == 'LIST_LAYOUT' ? 'none' : '1fr 1fr',
-                    },
-                    '@lg': {
-                      gridTemplateColumns:
-                        layout == 'LIST_LAYOUT' ? 'none' : 'repeat(3, 1fr)',
-                    },
-                  }}
-                >
-                  {props.items.map((linkedItem) => (
-                    <Box
-                      className="linkedItemCard"
-                      data-testid="linkedItemCard"
-                      id={linkedItem.node.id}
-                      tabIndex={0}
-                      key={linkedItem.node.id}
-                      css={{
-                        width: '100%',
-                        '&> div': {
-                          bg: '$grayBg',
-                        },
-                        '&:focus': {
-                          '> div': {
-                            bg: '$grayBgActive',
-                          },
-                        },
-                        '&:hover': {
-                          '> div': {
-                            bg: '$grayBgActive',
-                          },
-                        },
-                      }}
-                    >
-                      {viewerData?.me && (
-                        <LinkedItemCard
-                          layout={layout}
-                          item={linkedItem.node}
-                          viewer={viewerData.me}
-                          handleAction={(action: LinkedItemCardAction) => {
-                            if (action === 'delete') {
-                              setShowRemoveLinkConfirmation(true)
-                              props.setLinkToRemove(linkedItem)
-                            } else if (action === 'editTitle') {
-                              props.setShowEditTitleModal(true)
-                              props.setLinkToEdit(linkedItem)
-                            } else if (action == 'unsubscribe') {
-                              setShowUnsubscribeConfirmation(true)
-                              props.setLinkToUnsubscribe(linkedItem)
-                            } else {
-                              props.actionHandler(action, linkedItem)
-                            }
-                          }}
-                        />
-                      )}
-                    </Box>
-                  ))}
-                </Box>
+                <LibraryItems
+                  items={props.items}
+                  layout={props.layout}
+                  viewer={props.viewer}
+                  gridContainerRef={props.gridContainerRef}
+                  setShowEditTitleModal={props.setShowEditTitleModal}
+                  setLinkToEdit={props.setLinkToEdit}
+                  setShowUnsubscribeConfirmation={
+                    setShowUnsubscribeConfirmation
+                  }
+                  setLinkToRemove={props.setLinkToRemove}
+                  setLinkToUnsubscribe={props.setLinkToUnsubscribe}
+                  setShowRemoveLinkConfirmation={setShowRemoveLinkConfirmation}
+                  actionHandler={props.actionHandler}
+                />
               )}
               <HStack
                 distribution="center"
@@ -1084,21 +918,12 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
           )}
         </Dropzone>
       </VStack>
-      {/* Temporary code */}
-      {/* <div>
-        <strong>Files:</strong>
-        <ul>
-          {uploadingFiles.map((fileName) => (
-            <li key={fileName}>{fileName}</li>
-          ))}
-        </ul>
-      </div> */}
-      {/* Temporary code */}
+
       {props.showAddLinkModal && (
         <AddLinkModal onOpenChange={() => props.setShowAddLinkModal(false)} />
       )}
       {props.showEditTitleModal && (
-        <EditTitleModal
+        <EditLibraryItemModal
           updateItem={(item: LibraryItem) =>
             props.actionHandler('update-item', item)
           }
@@ -1106,62 +931,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
           item={props.linkToEdit as LibraryItem}
         />
       )}
-      {props.shareTarget && viewerData?.me?.profile.username && (
-        <ShareArticleModal
-          url={`${webBaseURL}${viewerData?.me?.profile.username}/${props.shareTarget.node.slug}/highlights?r=true`}
-          title={props.shareTarget.node.title}
-          imageURL={props.shareTarget.node.image}
-          author={props.shareTarget.node.author}
-          publishedAt={
-            props.shareTarget.node.publishedAt ??
-            props.shareTarget.node.createdAt
-          }
-          description={props.shareTarget.node.description}
-          originalArticleUrl={props.shareTarget.node.originalArticleUrl}
-          onOpenChange={() => {
-            if (props.shareTarget) {
-              const item = document.getElementById(props.shareTarget.node.id)
-              if (item) {
-                item.focus()
-              }
-              props.setShareTarget(undefined)
-            }
-          }}
-        />
-      )}
-      {props.snoozeTarget && (
-        <SnoozeLinkModal
-          submit={(option: string, sendReminder: boolean, msg: string) => {
-            if (!props.snoozeTarget) return
-            createReminderMutation(
-              props.snoozeTarget?.node.id,
-              ReminderType.Tonight,
-              true,
-              sendReminder
-            )
-              .then(() => {
-                return props.actionHandler('archive', props.snoozeTarget)
-              })
-              .then(() => {
-                showSuccessToast(msg, { position: 'bottom-right' })
-              })
-              .catch((error) => {
-                showErrorToast('There was an error snoozing your link.', {
-                  position: 'bottom-right',
-                })
-              })
-          }}
-          onOpenChange={() => {
-            if (props.snoozeTarget) {
-              const item = document.getElementById(props.snoozeTarget.node.id)
-              if (item) {
-                item.focus()
-              }
-              props.setSnoozeTarget(undefined)
-            }
-          }}
-        />
-      )}
       {showRemoveLinkConfirmation && (
         <ConfirmationModal
           richMessage={
@@ -1170,7 +939,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
                 Are you sure you want to delete this item? All associated notes
                 and highlights will be deleted.
               </StyledText>
-              {props.linkToRemove?.node && viewerData?.me && (
+              {props.linkToRemove?.node && props.viewer && (
                 <Box
                   css={{
                     transform: 'scale(0.6)',
@@ -1181,7 +950,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
                 >
                   <LinkedItemCard
                     item={props.linkToRemove?.node}
-                    viewer={viewerData.me}
+                    viewer={props.viewer}
                     layout="GRID_LAYOUT"
                     // eslint-disable-next-line @typescript-eslint/no-empty-function
                     handleAction={() => {}}
@@ -1232,3 +1001,121 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
     </>
   )
 }
+
+type LibraryItemsProps = {
+  items: LibraryItem[]
+  layout: LayoutType
+  viewer: UserBasicData | undefined
+
+  gridContainerRef: React.RefObject<HTMLDivElement>
+
+  setShowEditTitleModal: (show: boolean) => void
+  setLinkToEdit: (set: LibraryItem | undefined) => void
+  setShowUnsubscribeConfirmation: (show: true) => void
+  setLinkToRemove: (set: LibraryItem | undefined) => void
+  setLinkToUnsubscribe: (set: LibraryItem | undefined) => void
+  setShowRemoveLinkConfirmation: (show: true) => void
+
+  actionHandler: (
+    action: LinkedItemCardAction,
+    item: LibraryItem | undefined
+  ) => Promise<void>
+}
+
+function LibraryItems(props: LibraryItemsProps): JSX.Element {
+  return (
+    <Box
+      ref={props.gridContainerRef}
+      css={{
+        py: '$3',
+        display: 'grid',
+        width: '100%',
+        gridAutoRows: 'auto',
+        borderRadius: '8px',
+        gridGap: props.layout == 'LIST_LAYOUT' ? '0' : '20px',
+        marginTop: props.layout == 'LIST_LAYOUT' ? '21px' : '0',
+        marginBottom: '0px',
+        paddingTop: props.layout == 'LIST_LAYOUT' ? '0' : '21px',
+        paddingBottom: props.layout == 'LIST_LAYOUT' ? '0px' : '21px',
+        overflow: 'hidden',
+        '@xlgDown': {
+          border: 'unset',
+          borderRadius: props.layout == 'LIST_LAYOUT' ? 0 : undefined,
+        },
+        '@smDown': {
+          border: 'unset',
+          width: props.layout == 'LIST_LAYOUT' ? '100vw' : undefined,
+          margin: props.layout == 'LIST_LAYOUT' ? '16px -16px' : undefined,
+          borderRadius: props.layout == 'LIST_LAYOUT' ? 0 : undefined,
+        },
+        '@md': {
+          gridTemplateColumns:
+            props.layout == 'LIST_LAYOUT' ? 'none' : '1fr 1fr',
+        },
+        '@lg': {
+          gridTemplateColumns:
+            props.layout == 'LIST_LAYOUT' ? 'none' : 'repeat(2, 1fr)',
+        },
+        '@xl': {
+          gridTemplateColumns:
+            props.layout == 'LIST_LAYOUT' ? 'none' : 'repeat(3, 1fr)',
+        },
+        '@xxl': {
+          gridTemplateColumns:
+            props.layout == 'LIST_LAYOUT' ? 'none' : 'repeat(4, 1fr)',
+        },
+      }}
+    >
+      {props.items.map((linkedItem) => (
+        <Box
+          className="linkedItemCard"
+          data-testid="linkedItemCard"
+          id={linkedItem.node.id}
+          tabIndex={0}
+          key={linkedItem.node.id}
+          css={{
+            width: '100%',
+            '&> div': {
+              bg: '$thBackground3',
+            },
+            '&:focus': {
+              '> div': {
+                bg: '$thBackgroundActive',
+              },
+            },
+            '&:hover': {
+              '> div': {
+                bg: '$thBackgroundActive',
+              },
+              '> a': {
+                bg: '$thBackgroundActive',
+              },
+            },
+          }}
+        >
+          {props.viewer && (
+            <LinkedItemCard
+              layout={props.layout}
+              item={linkedItem.node}
+              viewer={props.viewer}
+              handleAction={(action: LinkedItemCardAction) => {
+                if (action === 'delete') {
+                  props.setShowRemoveLinkConfirmation(true)
+                  props.setLinkToRemove(linkedItem)
+                } else if (action === 'editTitle') {
+                  props.setShowEditTitleModal(true)
+                  props.setLinkToEdit(linkedItem)
+                } else if (action == 'unsubscribe') {
+                  props.setShowUnsubscribeConfirmation(true)
+                  props.setLinkToUnsubscribe(linkedItem)
+                } else {
+                  props.actionHandler(action, linkedItem)
+                }
+              }}
+            />
+          )}
+        </Box>
+      ))}
+    </Box>
+  )
+}
diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
new file mode 100644
index 000000000..786efb148
--- /dev/null
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -0,0 +1,494 @@
+import { ReactNode, useMemo, useState } from 'react'
+import { StyledText } from '../../elements/StyledText'
+import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
+import { Button } from '../../elements/Button'
+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'
+import { MOBILE_HEADER_HEIGHT } from './HeaderSpacer'
+import { useRegisterActions } from 'kbar'
+
+export const LIBRARY_LEFT_MENU_WIDTH = '300px'
+
+type LibraryFilterMenuProps = {
+  setShowAddLinkModal: (show: boolean) => void
+
+  searchTerm: string | undefined
+  applySearchQuery: (searchTerm: string) => void
+
+  showFilterMenu: boolean
+  setShowFilterMenu: (show: boolean) => void
+}
+
+export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
+  return (
+    <>
+      <Box
+        css={{
+          left: '0px',
+          top: '105px',
+          position: 'fixed',
+          bg: '$thBackground',
+          height: '100%',
+          width: LIBRARY_LEFT_MENU_WIDTH,
+          borderRight: '1px solid $thBorderColor',
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          '&::-webkit-scrollbar': {
+            display: 'none',
+          },
+          '@mdDown': {
+            visibility: props.showFilterMenu ? 'visible' : 'hidden',
+            top: props.showFilterMenu ? MOBILE_HEADER_HEIGHT : '100%',
+            width: '100%',
+            transition: 'visibility 0s, top 150ms',
+          },
+        }}
+      >
+        <SavedSearches {...props} />
+        <Subscriptions {...props} />
+        <Labels {...props} />
+
+        <AddLinkButton
+          showAddLinkModal={() => props.setShowAddLinkModal(true)}
+        />
+      </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>
+    </>
+  )
+}
+
+function SavedSearches(props: LibraryFilterMenuProps): JSX.Element {
+  const items = [
+    {
+      name: 'Inbox',
+      term: 'in:inbox',
+    },
+    {
+      name: 'Read Later',
+      term: 'in:inbox -label:Newsletter',
+    },
+    {
+      name: 'Highlights',
+      term: 'has:highlights mode:highlights',
+    },
+    {
+      name: 'Unlabeled',
+      term: 'no:label',
+    },
+    {
+      name: 'Files',
+      term: 'type:file',
+    },
+    {
+      name: 'Archived',
+      term: 'in:archive',
+    },
+  ]
+
+  useRegisterActions(
+    items.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.term)
+        },
+      }
+    }),
+    []
+  )
+
+  return (
+    <MenuPanel title="Saved Searches">
+      {items.map((item) => (
+        <FilterButton
+          key={item.name}
+          text={item.name}
+          filterTerm={item.term}
+          {...props}
+        />
+      ))}
+
+      <Box css={{ height: '10px' }}></Box>
+    </MenuPanel>
+  )
+}
+
+function Subscriptions(props: LibraryFilterMenuProps): JSX.Element {
+  const { subscriptions } = useGetSubscriptionsQuery()
+  const [viewAll, setViewAll] = useState(false)
+
+  useRegisterActions(
+    subscriptions.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:\"${name}\"`)
+        },
+      }
+    }),
+    [subscriptions]
+  )
+
+  return (
+    <MenuPanel
+      title="Subscriptions"
+      editTitle="Edit Subscriptions"
+      editFunc={() => {
+        window.location.href = '/settings/subscriptions'
+      }}
+    >
+      {subscriptions.slice(0, viewAll ? undefined : 4).map((item) => {
+        return (
+          <FilterButton
+            key={item.id}
+            filterTerm={`subscription:\"${item.name}\"`}
+            text={item.name}
+            {...props}
+          />
+        )
+      })}
+      <ViewAllButton state={viewAll} setState={setViewAll} />
+    </MenuPanel>
+  )
+}
+
+function Labels(props: LibraryFilterMenuProps): JSX.Element {
+  const { labels } = useGetLabelsQuery()
+  const [viewAll, setViewAll] = useState(false)
+
+  return (
+    <MenuPanel
+      title="Labels"
+      editTitle="Edit Labels"
+      editFunc={() => {
+        window.location.href = '/settings/labels'
+      }}
+    >
+      {labels.slice(0, viewAll ? undefined : 4).map((item) => {
+        return <LabelButton key={item.id} label={item} {...props} />
+      })}
+      <ViewAllButton state={viewAll} setState={setViewAll} />
+    </MenuPanel>
+  )
+}
+
+type MenuPanelProps = {
+  title: string
+  children: ReactNode
+  editFunc?: () => void
+  editTitle?: string
+}
+
+function MenuPanel(props: MenuPanelProps): JSX.Element {
+  return (
+    <VStack
+      css={{
+        m: '0px',
+        width: '100%',
+        borderBottom: '1px solid $thBorderColor',
+        px: '15px',
+      }}
+      alignment="start"
+      distribution="start"
+    >
+      <HStack css={{ width: '100%' }} distribution="start" alignment="start">
+        <StyledText
+          css={{
+            fontFamily: 'Inter',
+            fontWeight: '600',
+            fontSize: '16px',
+            lineHeight: '125%',
+            color: '$thTextContrast',
+            pl: '10px',
+            my: '20px',
+          }}
+        >
+          {props.title}
+        </StyledText>
+        <SpanBox
+          css={{
+            my: '15px',
+            marginLeft: 'auto',
+            height: '100%',
+            verticalAlign: 'middle',
+          }}
+        >
+          {props.editTitle && props.editFunc && (
+            <Dropdown
+              triggerElement={
+                <Box
+                  css={{
+                    display: 'flex',
+                    height: '30px',
+                    width: '30px',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: '1000px',
+                    '&:hover': {
+                      bg: '$thBackground4',
+                    },
+                  }}
+                >
+                  <DotsThree
+                    size={25}
+                    weight="bold"
+                    color={theme.colors.thTextSubtle2.toString()}
+                  />
+                </Box>
+              }
+            >
+              <DropdownOption
+                title={props.editTitle}
+                onSelect={() => {
+                  if (props.editFunc) {
+                    props.editFunc()
+                  }
+                }}
+              />
+            </Dropdown>
+          )}
+        </SpanBox>
+      </HStack>
+      {props.children}
+    </VStack>
+  )
+}
+
+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 ? '#FFEA9F' : 'unset',
+        fontSize: '14px',
+        fontWeight: 'regular',
+        fontFamily: '$display',
+        color: selected ? '#3D3D3D' : '$thTextSubtle',
+        verticalAlign: 'middle',
+        borderRadius: '3px',
+        cursor: 'pointer',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        alignItems: 'center',
+        '&:hover': {
+          backgroundColor: selected ? '#FFEA9F' : '$thBackground4',
+        },
+        '&:active': {
+          backgroundColor: selected ? '#FFEA9F' : '$thBackground4',
+        },
+      }}
+      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 state = useMemo(() => {
+    const term = props.searchTerm ?? ''
+    if (term.indexOf(`label:\"${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: '16px',
+        fontWeight: 'regular',
+        color: '$thTextSubtle',
+        verticalAlign: 'middle',
+        borderRadius: '3px',
+        m: '0px',
+        '&:hover': {
+          backgroundColor: '$thBackground4',
+        },
+      }}
+      alignment="center"
+      distribution="start"
+    >
+      <label htmlFor={labelId} style={{ width: '100%' }}>
+        <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}
+          type="checkbox"
+          checked={state === 'on'}
+          onChange={(e) => {
+            if (e.target.checked) {
+              props.applySearchQuery(
+                `${props.searchTerm ?? ''} label:\"${props.label.name}\"`
+              )
+            } else {
+              const query =
+                props.searchTerm?.replace(
+                  `label:\"${props.label.name}\"`,
+                  ''
+                ) ?? ''
+              props.applySearchQuery(query)
+            }
+          }}
+        />
+      </SpanBox>
+    </HStack>
+  )
+}
+
+type AddLinkButtonProps = {
+  showAddLinkModal: () => void
+}
+
+function AddLinkButton(props: AddLinkButtonProps): JSX.Element {
+  const currentTheme = currentThemeName()
+  const isDark = currentTheme == 'Dark'
+
+  return (
+    <>
+      <VStack
+        css={{
+          marginTop: 'auto',
+          width: LIBRARY_LEFT_MENU_WIDTH,
+          height: '80px',
+          pl: '25px',
+        }}
+        distribution="center"
+      >
+        <Button
+          css={{
+            height: '40px',
+            p: '15px',
+            pr: '20px',
+            fontSize: '14px',
+            verticalAlign: 'center',
+            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()
+            e.preventDefault()
+          }}
+        >
+          <Plus size={16} weight="bold" />
+          <SpanBox css={{ width: '10px' }}></SpanBox>Add Link
+        </Button>
+      </VStack>
+      <Box css={{ height: '180px ' }} />
+    </>
+  )
+}
+
+type ViewAllButtonProps = {
+  state: boolean
+  setState: (state: boolean) => void
+}
+
+function ViewAllButton(props: ViewAllButtonProps): JSX.Element {
+  return (
+    <Button
+      style="ghost"
+      css={{
+        display: 'flex',
+        pl: '10px',
+        color: '#898989',
+        fontWeight: '600',
+        fontSize: '12px',
+        py: '20px',
+        gap: '2px',
+        alignItems: 'center',
+      }}
+      onClick={(e) => {
+        props.setState(!props.state)
+        e.preventDefault()
+      }}
+    >
+      {props.state ? 'Hide' : 'View All'}
+      {props.state ? null : (
+        <CaretRight size={12} color="#898989" weight="bold" />
+      )}
+    </Button>
+  )
+}
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
new file mode 100644
index 000000000..b569ab809
--- /dev/null
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -0,0 +1,414 @@
+import { useRef, useState } from 'react'
+import { Box, HStack, VStack } from '../../elements/LayoutPrimitives'
+import { theme } from '../../tokens/stitches.config'
+import { FormInput } from '../../elements/FormElements'
+import { searchBarCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
+import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
+import { Button, IconButton } from '../../elements/Button'
+import { FunnelSimple, MagnifyingGlass, X } from 'phosphor-react'
+import { ListSelectorIcon } from '../../elements/images/ListSelectorIcon'
+import { GridSelectorIcon } from '../../elements/images/GridSelectorIcon'
+import { LayoutType } from './HomeFeedContainer'
+import { PrimaryDropdown } from '../PrimaryDropdown'
+import { LogoBox } from '../../elements/LogoBox'
+import { OmnivoreSmallLogo } from '../../elements/images/OmnivoreNameLogo'
+import {
+  HeaderSpacer,
+  HEADER_HEIGHT,
+  MOBILE_HEADER_HEIGHT,
+} from './HeaderSpacer'
+
+type LibraryHeaderProps = {
+  layout: LayoutType
+  updateLayout: (layout: LayoutType) => void
+
+  searchTerm: string | undefined
+  applySearchQuery: (searchQuery: string) => void
+
+  showFilterMenu: boolean
+  setShowFilterMenu: (show: boolean) => void
+}
+
+export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
+  return (
+    <>
+      <VStack
+        alignment="center"
+        distribution="start"
+        css={{
+          top: '0',
+          left: '0',
+          zIndex: 5,
+          position: 'fixed',
+          width: '100%',
+          height: HEADER_HEIGHT,
+          bg: '$thBackground',
+          pt: '35px',
+          borderBottom: '1px solid $thBorderColor',
+          '@mdDown': {
+            height: MOBILE_HEADER_HEIGHT,
+            pt: '0px',
+          },
+        }}
+      >
+        {/* These will display/hide depending on breakpoints */}
+        <LargeHeaderLayout {...props} />
+        <SmallHeaderLayout {...props} />
+      </VStack>
+
+      {/* This spacer is put in to push library content down 
+      below the fixed header height. */}
+      <HeaderSpacer />
+    </>
+  )
+}
+
+function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
+  return (
+    <HStack
+      alignment="center"
+      distribution="start"
+      css={{
+        width: '100%',
+        height: '100%',
+        '@mdDown': {
+          display: 'none',
+        },
+      }}
+    >
+      <LogoBox />
+      <SearchBox {...props} />
+      <ControlButtonBox
+        layout={props.layout}
+        updateLayout={props.updateLayout}
+      />
+    </HStack>
+  )
+}
+
+function SmallHeaderLayout(props: LibraryHeaderProps): JSX.Element {
+  const [showInlineSearch, setShowInlineSearch] = useState(false)
+
+  return (
+    <HStack
+      alignment="center"
+      distribution="start"
+      css={{
+        width: '100%',
+        height: '100%',
+        bg: '$thBackground3',
+        '@md': {
+          display: 'none',
+        },
+      }}
+    >
+      {showInlineSearch ? (
+        <HStack css={{ pl: '10px', pr: '0px', width: '100%' }}>
+          <SearchBox {...props} compact={true} />
+          <Button
+            style="cancelGeneric"
+            onClick={(event) => {
+              setShowInlineSearch(false)
+              event.preventDefault()
+            }}
+          >
+            Close
+          </Button>
+        </HStack>
+      ) : (
+        <>
+          <MenuHeaderButton {...props} />
+          <ControlButtonBox
+            layout={props.layout}
+            updateLayout={props.updateLayout}
+            setShowInlineSearch={setShowInlineSearch}
+          />
+        </>
+      )}
+    </HStack>
+  )
+}
+
+type MenuHeaderButtonProps = {
+  showFilterMenu: boolean
+  setShowFilterMenu: (show: boolean) => void
+}
+
+export function MenuHeaderButton(props: MenuHeaderButtonProps): JSX.Element {
+  return (
+    <HStack
+      css={{
+        ml: '10px',
+        width: '67px',
+        height: '40px',
+        bg: props.showFilterMenu ? '$thTextContrast2' : '$thBackground2',
+        borderRadius: '5px',
+        px: '5px',
+        cursor: 'pointer',
+      }}
+      alignment="center"
+      distribution="around"
+      onClick={() => {
+        props.setShowFilterMenu(!props.showFilterMenu)
+      }}
+    >
+      <OmnivoreSmallLogo
+        size={20}
+        strokeColor={
+          props.showFilterMenu
+            ? theme.colors.thBackground.toString()
+            : theme.colors.thTextContrast2.toString()
+        }
+      />
+      <FunnelSimple
+        size={20}
+        color={
+          props.showFilterMenu
+            ? theme.colors.thBackground.toString()
+            : theme.colors.thTextContrast2.toString()
+        }
+      />
+    </HStack>
+  )
+}
+
+export type SearchBoxProps = {
+  searchTerm: string | undefined
+  applySearchQuery: (searchQuery: string) => void
+
+  compact?: boolean
+  onClose?: () => void
+}
+
+export function SearchBox(props: SearchBoxProps): JSX.Element {
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const [focused, setFocused] = useState(false)
+  const [searchTerm, setSearchTerm] = useState(props.searchTerm ?? '')
+
+  const border = props.compact
+    ? focused
+      ? '1px solid $omnivoreCtaYellow'
+      : '1px solid black'
+    : focused
+    ? '1px solid $omnivoreCtaYellow'
+    : '1px solid $thBorderColor'
+
+  useKeyboardShortcuts(
+    searchBarCommands((action) => {
+      if (action === 'focusSearchBar' && inputRef.current) {
+        inputRef.current.select()
+      }
+      if (action == 'clearSearch' && inputRef.current) {
+        setSearchTerm('')
+        props.applySearchQuery('')
+      }
+    })
+  )
+
+  return (
+    <Box
+      css={{
+        height: '38px',
+        width: '100%',
+        maxWidth: '521px',
+        bg: props.compact ? 'white' : '$thBackground2',
+        borderRadius: '6px',
+        border: border,
+      }}
+    >
+      <HStack
+        alignment="center"
+        distribution="start"
+        css={{ width: '100%', height: '100%' }}
+      >
+        <HStack
+          alignment="center"
+          distribution="start"
+          css={{
+            height: '100%',
+            pl: props.compact ? '10px' : '15px',
+            pr: props.compact ? '5px' : '10px',
+          }}
+          onClick={(e) => {
+            inputRef.current?.focus()
+            e.preventDefault()
+          }}
+        >
+          <MagnifyingGlass
+            size={props.compact ? 15 : 20}
+            color={theme.colors.graySolid.toString()}
+          />
+        </HStack>
+        <form
+          onSubmit={(event) => {
+            event.preventDefault()
+            props.applySearchQuery(searchTerm || '')
+            inputRef.current?.blur()
+            if (props.onClose) {
+              props.onClose()
+            }
+          }}
+          style={{ width: '100%' }}
+        >
+          <FormInput
+            ref={inputRef}
+            type="text"
+            value={searchTerm}
+            autoFocus={!!props.compact}
+            placeholder="Search keywords or labels"
+            onFocus={(event) => {
+              event.target.select()
+              setFocused(true)
+            }}
+            onBlur={() => {
+              setFocused(false)
+            }}
+            onChange={(event) => {
+              setSearchTerm(event.target.value)
+            }}
+            onKeyDown={(event) => {
+              const key = event.key.toLowerCase()
+              if (key == 'escape') {
+                event.currentTarget.blur()
+              }
+            }}
+          />
+        </form>
+        {searchTerm && searchTerm.length ? (
+          <Box
+            css={{
+              py: '15px',
+              marginLeft: 'auto',
+            }}
+          >
+            <IconButton
+              style="searchButton"
+              onClick={(event) => {
+                event.preventDefault()
+                setSearchTerm('')
+                props.applySearchQuery('')
+                inputRef.current?.blur()
+              }}
+              tabIndex={-1}
+            >
+              <X
+                width={16}
+                height={16}
+                color={theme.colors.grayTextContrast.toString()}
+              />
+            </IconButton>
+          </Box>
+        ) : (
+          <Box
+            css={{
+              py: '15px',
+              marginLeft: 'auto',
+            }}
+          >
+            <IconButton
+              style="searchButton"
+              onClick={() =>
+                requestAnimationFrame(() => inputRef?.current?.focus())
+              }
+              tabIndex={-1}
+            >
+              <kbd aria-hidden>/</kbd>
+            </IconButton>
+          </Box>
+        )}
+      </HStack>
+    </Box>
+  )
+}
+
+type ControlButtonBoxProps = {
+  layout: LayoutType
+  updateLayout: (layout: LayoutType) => void
+  setShowInlineSearch?: (show: boolean) => void
+}
+
+function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
+  return (
+    <>
+      <HStack
+        alignment="center"
+        distribution="end"
+        css={{
+          marginLeft: 'auto',
+          marginRight: '45px',
+          width: '100px',
+          height: '100%',
+          gap: '20px',
+          minWidth: '121px',
+          '@mdDown': {
+            display: 'none',
+          },
+        }}
+      >
+        <Button
+          style="plainIcon"
+          css={{ display: 'flex' }}
+          onClick={(e) => {
+            props.updateLayout('LIST_LAYOUT')
+            e.preventDefault()
+          }}
+        >
+          <ListSelectorIcon
+            color={props.layout == 'GRID_LAYOUT' ? '#6A6968' : '#FFEA9F'}
+          />
+        </Button>
+
+        <Button
+          style="plainIcon"
+          css={{ display: 'flex' }}
+          onClick={(e) => {
+            props.updateLayout('GRID_LAYOUT')
+            e.preventDefault()
+          }}
+        >
+          <GridSelectorIcon
+            color={props.layout == 'LIST_LAYOUT' ? '#6A6968' : '#FFEA9F'}
+          />
+        </Button>
+        <PrimaryDropdown showThemeSection={true} />
+      </HStack>
+
+      {props.setShowInlineSearch && (
+        <HStack
+          alignment="center"
+          distribution="end"
+          css={{
+            marginLeft: 'auto',
+            marginRight: '20px',
+            width: '100px',
+            height: '100%',
+            gap: '20px',
+            '@md': {
+              display: 'none',
+            },
+          }}
+        >
+          <Button
+            style="ghost"
+            onClick={() => {
+              props.setShowInlineSearch && props.setShowInlineSearch(true)
+            }}
+            css={{
+              display: 'flex',
+            }}
+          >
+            <MagnifyingGlass
+              size={20}
+              color={theme.colors.graySolid.toString()}
+            />
+          </Button>
+          <PrimaryDropdown
+            showThemeSection={true}
+            layout={props.layout}
+            updateLayout={props.updateLayout}
+          />
+        </HStack>
+      )}
+    </>
+  )
+}
diff --git a/packages/web/components/templates/homeFeed/LibrarySearchBar.tsx b/packages/web/components/templates/homeFeed/LibrarySearchBar.tsx
index e9127e0cd..79fd5f83f 100644
--- a/packages/web/components/templates/homeFeed/LibrarySearchBar.tsx
+++ b/packages/web/components/templates/homeFeed/LibrarySearchBar.tsx
@@ -40,14 +40,6 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element {
     setSearchTerm(props.searchTerm || '')
   }, [props.searchTerm])
 
-  useKeyboardShortcuts(
-    searchBarCommands((action) => {
-      if (action === 'focusSearchBar' && inputRef.current) {
-        inputRef.current.select()
-      }
-    })
-  )
-
   return (
     <VStack css={{ width: '100%' }}>
       <HStack
diff --git a/packages/web/components/templates/integrations/Readwise.tsx b/packages/web/components/templates/integrations/Readwise.tsx
index 7f2a591ba..a6f4de6fc 100644
--- a/packages/web/components/templates/integrations/Readwise.tsx
+++ b/packages/web/components/templates/integrations/Readwise.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useMemo, useState } from 'react'
 import { styled } from '@stitches/react'
-import Link from 'next/link'
 import Image from 'next/image'
 
 import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
@@ -9,7 +8,10 @@ import { StyledText } from '../../elements/StyledText'
 import { FormInput } from '../../elements/FormElements'
 
 import { setIntegrationMutation } from '../../../lib/networking/mutations/setIntegrationMutation'
-import { Integration, useGetIntegrationsQuery } from '../../../lib/networking/queries/useGetIntegrationsQuery'
+import {
+  Integration,
+  useGetIntegrationsQuery,
+} from '../../../lib/networking/queries/useGetIntegrationsQuery'
 import { useRouter } from 'next/router'
 import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 import { deleteIntegrationMutation } from '../../../lib/networking/mutations/deleteIntegrationMutation'
@@ -22,7 +24,7 @@ const Header = styled(Box, {
 })
 
 export function Readwise(): JSX.Element {
-  const { integrations, isValidating, revalidate } = useGetIntegrationsQuery()
+  const { integrations, revalidate } = useGetIntegrationsQuery()
   const readwiseIntegration = useMemo(() => {
     return integrations.find((i) => i.type == 'READWISE')
   }, [integrations])
@@ -57,23 +59,23 @@ export function Readwise(): JSX.Element {
       </HStack>
 
       {readwiseIntegration && (
-        <RemoveReadwiseForm integration={readwiseIntegration} revalidate={revalidate} />
-      )}
-
-      {!readwiseIntegration && (
-        <AddReadwiseForm />
+        <RemoveReadwiseForm
+          integration={readwiseIntegration}
+          revalidate={revalidate}
+        />
       )}
 
+      {!readwiseIntegration && <AddReadwiseForm />}
     </VStack>
   )
 }
 
-
 function AddReadwiseForm(): JSX.Element {
   const router = useRouter()
 
-  const [errorMessage, setErrorMessage] =
-  useState<string | undefined>(undefined)
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(
+    undefined
+  )
   const [token, setToken] = useState<string>('')
 
   const setReadwiseToken = useCallback(async () => {
@@ -94,64 +96,64 @@ function AddReadwiseForm(): JSX.Element {
     }
   }, [token, router])
 
-  return (<>
-    <HStack
-      css={{
-        fontSize: '18px',
-        color: '$utilityTextDefault',
-        my: '20px',
-        whiteSpace: 'pre-wrap'
-      }}
-    >
-      <SpanBox>Enter your API key from Readwise below. You can get your token{' '}
-      <a
-        target='_blank'
-        rel="noreferrer"
-        referrerPolicy='no-referrer'
-        style={{ color: '$utilityTextDefault' }}
-        href="https://readwise.io/access_token"
+  return (
+    <>
+      <HStack
+        css={{
+          fontSize: '18px',
+          color: '$utilityTextDefault',
+          my: '20px',
+          whiteSpace: 'pre-wrap',
+        }}
       >
-        here
-      </a>.</SpanBox>
-    </HStack>
+        <SpanBox>
+          Enter your API key from Readwise below. You can get your token{' '}
+          <a
+            target="_blank"
+            rel="noreferrer"
+            referrerPolicy="no-referrer"
+            style={{ color: '$utilityTextDefault' }}
+            href="https://readwise.io/access_token"
+          >
+            here
+          </a>
+          .
+        </SpanBox>
+      </HStack>
 
-    <FormInput
-      type="token"
-      key="token"
-      value={token}
-      placeholder={'Readwise Token'}
-      onChange={(e) => {
-        e.preventDefault()
-        setToken(e.target.value)
-      }}
-      disabled={false}
-      hidden={false}
-      required={true}
-      css={{
-        border: '1px solid $textNonessential',
-        borderRadius: '8px',
-        width: '80%',
-        bg: 'transparent',
-        fontSize: '16px',
-        textIndent: '8px',
-        my: '20px',
-        height: '38px',
-        color: '$grayTextContrast',
-        '&:focus': {
-          outline: 'none',
-          boxShadow: '0px 0px 2px 2px rgba(255, 234, 159, 0.56)',
-        },
-      }}
-      min={200}
-    />
-    {errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
-    <Button
-      style="ctaDarkYellow"
-      css={{  }}
-      onClick={setReadwiseToken}
-    >
-      Set Token
-    </Button>
+      <FormInput
+        type="token"
+        key="token"
+        value={token}
+        placeholder={'Readwise Token'}
+        onChange={(e) => {
+          e.preventDefault()
+          setToken(e.target.value)
+        }}
+        disabled={false}
+        hidden={false}
+        required={true}
+        css={{
+          border: '1px solid $textNonessential',
+          borderRadius: '8px',
+          width: '80%',
+          bg: 'transparent',
+          fontSize: '16px',
+          textIndent: '8px',
+          my: '20px',
+          height: '38px',
+          color: '$grayTextContrast',
+          '&:focus': {
+            outline: 'none',
+            boxShadow: '0px 0px 2px 2px rgba(255, 234, 159, 0.56)',
+          },
+        }}
+        min={200}
+      />
+      {errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
+      <Button style="ctaDarkYellow" css={{}} onClick={setReadwiseToken}>
+        Set Token
+      </Button>
     </>
   )
 }
@@ -179,19 +181,23 @@ function RemoveReadwiseForm(props: RemoveReadwiseFormProps): JSX.Element {
   }, [props])
 
   return (
-  <>
-    <HStack
-      css={{
-        fontSize: '18px',
-        color: '$utilityTextDefault',
-        my: '20px',
-        whiteSpace: 'pre-wrap'
-      }}
-    >
-      <SpanBox>Omnivore is configured to send all your highlights to Readwise.</SpanBox>
-    </HStack>
+    <>
+      <HStack
+        css={{
+          fontSize: '18px',
+          color: '$utilityTextDefault',
+          my: '20px',
+          whiteSpace: 'pre-wrap',
+        }}
+      >
+        <SpanBox>
+          Omnivore is configured to send all your highlights to Readwise.
+        </SpanBox>
+      </HStack>
 
-    <Button style="ctaDarkYellow" onClick={deleteIntegration}>Remove Readwise Integration</Button>
-  </>
+      <Button style="ctaDarkYellow" onClick={deleteIntegration}>
+        Remove Readwise Integration
+      </Button>
+    </>
   )
-}
\ No newline at end of file
+}
diff --git a/packages/web/components/templates/landing/LandingFooter.tsx b/packages/web/components/templates/landing/LandingFooter.tsx
index 5caea4a8a..1300ff284 100644
--- a/packages/web/components/templates/landing/LandingFooter.tsx
+++ b/packages/web/components/templates/landing/LandingFooter.tsx
@@ -1,7 +1,5 @@
-import Link from 'next/link'
-import { Box, HStack, VStack } from '../../elements/LayoutPrimitives'
-import { GithubLogo, DiscordLogo, TwitterLogo } from 'phosphor-react'
-import { styled, theme } from '../../tokens/stitches.config'
+import { HStack, VStack } from '../../elements/LayoutPrimitives'
+import { styled } from '../../tokens/stitches.config'
 import { StyledText } from '../../elements/StyledText'
 
 const containerStyles = {
diff --git a/packages/web/components/templates/library/LibraryAvatar.tsx b/packages/web/components/templates/library/LibraryAvatar.tsx
deleted file mode 100644
index f986b53df..000000000
--- a/packages/web/components/templates/library/LibraryAvatar.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { SpanBox, VStack } from '../../elements/LayoutPrimitives'
-import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
-
-import { styled } from '../../tokens/stitches.config'
-import { Root, Image, Fallback } from '@radix-ui/react-avatar'
-
-type AvatarProps = {
-  viewer?: UserBasicData
-}
-
-export function LibraryAvatar(props: AvatarProps): JSX.Element {
-  return (
-    <VStack alignment="center" distribution="start" css={{ pl: '8px', width: '100%', height: '100%' }}>
-      <VStack css={{ height: '100%' }}>
-        <StyledAvatar
-          css={{
-            width: '40px',
-            height: '40px',
-            borderRadius: '50%',
-          }}
-        >
-          {props.viewer?.profile.pictureUrl 
-            ? <StyledImage src={props.viewer.profile.pictureUrl} />
-            : <StyledFallback>{props.viewer?.name.charAt(0) ?? ''}</StyledFallback>
-          }
-        </StyledAvatar>
-      </VStack>
-      {/* This spacer is to help align with items in the search box */}
-      <SpanBox css={{ marginTop: 'auto', height: '10px', width: '100%' }} />
-    </VStack> 
-  )
-}
-
-const StyledAvatar = styled(Root, {
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  verticalAlign: 'middle',
-  overflow: 'hidden',
-  userSelect: 'none',
-})
-
-const StyledImage = styled(Image, {
-  width: '100%',
-  height: '100%',
-  objectFit: 'cover',
-
-  '&:hover': {
-    opacity: '48%',
-  },
-})
-
-const StyledFallback = styled(Fallback, {
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  fontSize: '16px',
-  fontWeight: '600',
-  color: '$utilityTextDefault',
-  backgroundColor: '$libraryActiveMenuItem',
-})
diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
deleted file mode 100644
index 6a9f1825e..000000000
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { HStack, SpanBox, VStack } from './../../elements/LayoutPrimitives'
-import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery'
-import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
-import { LibraryMenu } from './LibraryMenu'
-import { LibraryAvatar } from './LibraryAvatar'
-import { LibrarySearchBar } from './LibrarySearchBar'
-import { LibraryList } from './LibraryList'
-import { LibraryHeadline } from './LibraryHeadline'
-import { useCallback, useState } from 'react'
-import { LibraryItemsQueryInput } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
-import { usePersistedState } from '../../../lib/hooks/usePersistedState'
-
-
-
-export type SearchCoordinator = {
-  applySearch: (searchTerm: string) => void
-}
-
-const useSearchCoordinator = () => {
-  const applySearch = useCallback((searchTerm: string) => {
-    console.log('applying search')
-  }, [])
-
-  return {
-    applySearch
-  }
-}
-
-export type LibraryLayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
-
-export type LayoutCoordinator = {
-  layout: LibraryLayoutType
-  setLayout: (type: LibraryLayoutType) => void
-}
-
-const useLibraryLayoutCoordinator = () => {
-  const [layout, setLayout] = usePersistedState<LibraryLayoutType>({
-    key: 'libraryLayout',
-    initialValue: 'GRID_LAYOUT',
-  })
-
-  return {
-    layout,
-    setLayout
-  }
-}
-
-export function LibraryContainer(): JSX.Element {
-  useGetUserPreferences()
-
-  const { viewerData } = useGetViewerQuery()
-  const searchCoordinator = useSearchCoordinator()
-  const layoutCoordinator = useLibraryLayoutCoordinator()
-
-  return (
-    <>
-      <VStack alignment="start" distribution="start" css={{ width: '100vw', height: '100vh', overflow: 'hidden', bg: '$libraryBackground' }}>
-        <HStack alignment="start" distribution="start" css={{ width: '100%' }}>
-          <SpanBox css={{ width: '100%', height: '90px' }}>
-            <LibrarySearchBar coordinator={searchCoordinator} />
-          </SpanBox>
-          <SpanBox css={{ marginLeft: 'auto', width: '130px', height: '100%' }}>
-            <LibraryAvatar viewer={viewerData?.me} />
-          </SpanBox>
-        </HStack>
-        <HStack alignment="start" distribution="start" css={{ width: '100%', height: '100%' }}>
-          <LibraryMenu />
-          <VStack alignment="start" distribution="start" css={{ width: '100%', height: '100%', mr: '20px' }}>
-            <LibraryHeadline layoutCoordinator={layoutCoordinator} />
-            <LibraryList layoutCoordinator={layoutCoordinator} />
-          </VStack>
-        </HStack>
-      </VStack>
-    </>
-  )
-}
\ No newline at end of file
diff --git a/packages/web/components/templates/library/LibraryHeadline.tsx b/packages/web/components/templates/library/LibraryHeadline.tsx
deleted file mode 100644
index afeee7a62..000000000
--- a/packages/web/components/templates/library/LibraryHeadline.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { HStack, SpanBox } from '../../elements/LayoutPrimitives'
-import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
-import { StyledText } from '../../elements/StyledText'
-import { theme } from '../../tokens/stitches.config'
-import { LibraryListLayoutIcon } from '../../elements/images/LibraryListLayoutIcon'
-import { LibraryGridLayoutIcon } from '../../elements/images/LibraryGridLayoutIcon'
-import { Button } from '../../elements/Button'
-import { LayoutCoordinator, LibraryLayoutType } from './LibraryContainer'
-import { useCallback } from 'react'
-import { Plus } from 'phosphor-react'
-
-export type LibraryHeadlineProps = {
-  layoutCoordinator: LayoutCoordinator
-}
-
-export function LibraryHeadline(props: LibraryHeadlineProps): JSX.Element {
-
-  const typeColor = useCallback((type: LibraryLayoutType) => {
-    return (
-      props.layoutCoordinator.layout === type
-      ? theme.colors.omnivoreCtaYellow.toString()
-      : "#D6D6D6"
-    )
-  }, [props.layoutCoordinator.layout])
-
-  return (
-    <HStack alignment="center" distribution="start" css={{ pt: '8px', pb: '14px', width: '100%', pr: '15px' }}>
-      <StyledText style="libraryHeader">Home</StyledText>
-      <HStack alignment="center" distribution="start" css={{ marginLeft: 'auto', gap: '8px' }}>
-        <Button style="ctaDarkYellow" css={{ py: '10px', px: '14px', mr: '16px', display: 'flex', alignItems: 'center' }}>
-          <Plus size={16} weight='bold' />
-          <SpanBox css={{ pl: '10px', fontWeight: '600', fontSize: '16px' }}>Add Link</SpanBox>
-        </Button>
-        <Button style="ghost" onClick={() => props.layoutCoordinator.setLayout('LIST_LAYOUT')} css={{ display: 'flex', alignItems: 'center' }}>
-          <LibraryListLayoutIcon color={typeColor('LIST_LAYOUT')} />
-        </Button>
-        <Button style="ghost" onClick={() => props.layoutCoordinator.setLayout('GRID_LAYOUT')} css={{ display: 'flex', alignItems: 'center' }}>
-          <LibraryGridLayoutIcon color={typeColor('GRID_LAYOUT')} />
-        </Button>
-      </HStack>
-    </HStack>
-  )
-}
\ No newline at end of file
diff --git a/packages/web/components/templates/library/LibraryList.tsx b/packages/web/components/templates/library/LibraryList.tsx
deleted file mode 100644
index ebea7d71a..000000000
--- a/packages/web/components/templates/library/LibraryList.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import { useMemo, useState } from 'react'
-import Dropzone from 'react-dropzone'
-import { Box } from '../../elements/LayoutPrimitives'
-import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery'
-import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
-import { useGetLibraryItemsQuery } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
-import { LinkedItemCardAction } from '../../patterns/LibraryCards/CardTypes'
-import { LibraryGridCard } from '../../patterns/LibraryCards/LibraryGridCard'
-import { LayoutCoordinator } from './LibraryContainer'
-import { EmptyLibrary } from '../homeFeed/EmptyLibrary'
-import Masonry from 'react-masonry-css'
-
-export type LibraryListProps = {
-  layoutCoordinator: LayoutCoordinator
-}
-
-export function LibraryList(props: LibraryListProps): JSX.Element {
-  useGetUserPreferences()
-
-  const { viewerData } = useGetViewerQuery()
-
-  const defaultQuery = {
-    limit: 50,
-    sortDescending: true,
-    searchQuery: undefined,
-  }
-
-  const { itemsPages, size, setSize, isValidating, performActionOnItem } =
-    useGetLibraryItemsQuery(defaultQuery)
-
-  const [fileNames, setFileNames] = useState([])
-  const [inDragOperation, setInDragOperation] = useState(false)
-  const [uploadingFiles, setUploadingFiles] = useState([])
-
-  const handleDrop = (acceptedFiles: any) => {
-    setFileNames(acceptedFiles.map((file: { name: any }) => file.name))
-    setUploadingFiles(acceptedFiles.map((file: { name: any }) => file.name))
-  }
-
-  const libraryItems = useMemo(() => {
-    const items =
-      itemsPages?.flatMap((ad) => {
-        return ad.search.edges
-      }) || []
-    return items
-  }, [itemsPages, performActionOnItem])
-
-  if (!isValidating && libraryItems.length == 0) {
-    return (
-      <EmptyLibrary
-        onAddLinkClicked={() => {
-          console.log('onAddLinkClicked')
-        }}
-      />
-    )
-  }
-  console.log(fileNames)
-
-  return (
-    <Box css={{ overflowY: 'scroll' }}>
-      {inDragOperation && uploadingFiles.length < 1 && (
-        <Box
-          css={{
-            border: '3px dashed gray',
-            backgroundColor: 'aliceblue',
-            borderRadius: '5px',
-            width: '75%',
-            height: '70%',
-            position: 'absolute',
-            opacity: '0.8',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          <Box
-            css={{
-              color: '$utilityTextDefault',
-              fontWeight: '800',
-              fontSize: '$4',
-            }}
-          >
-            Drag n drop files here
-          </Box>
-        </Box>
-      )}
-      <Dropzone
-        onDrop={handleDrop}
-        preventDropOnDocument={true}
-        onDragEnter={() => {
-          setInDragOperation(true)
-        }}
-        onDragLeave={() => {
-          setInDragOperation(false)
-        }}
-        noClick={true}
-        noDragEventsBubbling={true}
-      >
-        {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
-          <Box
-            {...getRootProps({ className: 'dropzone' })}
-            css={{ width: '100%' }}
-          >
-            <input {...getInputProps()} />
-            <Masonry
-              breakpointCols={
-                props.layoutCoordinator.layout == 'LIST_LAYOUT'
-                  ? 1
-                  : {
-                      default: 3,
-                      1200: 2,
-                      992: 1,
-                    }
-              }
-              className="omnivore-masonry-grid"
-              columnClassName="omnivore-masonry-grid_column"
-            >
-              {libraryItems.map((linkedItem) => (
-                <Box
-                  className="linkedItemCard"
-                  data-testid="linkedItemCard"
-                  id={linkedItem.node.id}
-                  tabIndex={0}
-                  key={linkedItem.node.id}
-                  css={{
-                    width: '100%',
-                    '&> div': {
-                      bg: '$libraryBackground',
-                    },
-                    '&:focus': {
-                      '> div': {
-                        bg: '$grayBgActive',
-                      },
-                    },
-                    '&:hover': {
-                      '> div': {
-                        bg: '$grayBgActive',
-                      },
-                    },
-                  }}
-                >
-                  {viewerData?.me && (
-                    <LibraryGridCard
-                      layout={props.layoutCoordinator.layout}
-                      item={linkedItem.node}
-                      viewer={viewerData.me}
-                      handleAction={(action: LinkedItemCardAction) => {
-                        console.log('card clicked')
-                      }}
-                    />
-                  )}
-                </Box>
-              ))}
-            </Masonry>
-          </Box>
-        )}
-      </Dropzone>
-      {/* Temporary code */}
-      <div>
-        <strong>Files:</strong>
-        <ul>
-          {fileNames.map((fileName) => (
-            <li key={fileName}>{fileName}</li>
-          ))}
-        </ul>
-      </div>{' '}
-      {/* Temporary code */}
-      {/* Extra padding at bottom to give space for scrolling */}
-      <Box css={{ width: '100%', height: '200px' }} />
-    </Box>
-  )
-}
diff --git a/packages/web/components/templates/library/LibraryMenu.tsx b/packages/web/components/templates/library/LibraryMenu.tsx
deleted file mode 100644
index b1ffaa9b6..000000000
--- a/packages/web/components/templates/library/LibraryMenu.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { VStack } from '../../elements/LayoutPrimitives'
-import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
-import { Menubar } from '../Menu'
-
-export function LibraryMenu(): JSX.Element {
-  useGetUserPreferences()
-
-  return (
-    <VStack
-      alignment="start"
-      distribution="start"
-      css={{
-        width: '286px',
-        minWidth: '286px',
-        pl:'15px',
-        height: 'calc(100% - 100px)',
-        overflowY: 'auto',
-        fontWeight: '600',
-      }}
-    >
-      <Menubar />
-    </VStack>
-  )
-}
diff --git a/packages/web/components/templates/library/LibrarySearchBar.tsx b/packages/web/components/templates/library/LibrarySearchBar.tsx
deleted file mode 100644
index fb3a499dc..000000000
--- a/packages/web/components/templates/library/LibrarySearchBar.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-import { useState, useEffect } from 'react'
-import { Clock, Sliders, X } from 'phosphor-react'
-import Downshift from 'downshift'
-
-import { HStack, SpanBox, VStack } from './../../elements/LayoutPrimitives'
-import { FormInput } from '../../elements/FormElements'
-import { Button } from '../../elements/Button'
-import { styled, theme } from '../../tokens/stitches.config'
-import { SearchCoordinator } from './LibraryContainer'
-
-// Styles
-const List = styled('ul', {
-  width: '91%',
-  maxHeight: '400px',
-  overflow: 'auto',
-  top: '65px',
-  left: '-32px',
-  color: 'var(--colors-utilityTextDefault)',
-  backgroundColor: 'var(--colors-grayBase)',
-  position: 'absolute',
-  zIndex: '2',
-  '@smDown': {
-    fontSize: 16,
-  },
-})
-
-const Item = styled('li', {
-  listStyleType: 'none',
-  m: '8px',
-  borderRadius: '5px',
-  width: '100%',
-})
-
-export type LibrarySearchBarProps = {
-  coordinator: SearchCoordinator
-}
-
-export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element {
-  const [recentSearches, setRecentSearches] = useState(Array<unknown[]>())
-
-  useEffect(() => {
-    setRecentSearches(Object.values(localStorage))
-  }, [])
-
-  return (
-    <Downshift itemToString={(item) => (item ? item : '')}>
-      {({
-        getInputProps,
-        getRootProps,
-        getMenuProps,
-        getItemProps,
-        isOpen,
-        highlightedIndex,
-        inputValue,
-        clearSelection,
-        openMenu,
-      }) => (
-        <VStack
-          alignment="start"
-          distribution="start"
-          css={{ pl: '32px', width: '100%', height: '100%' }}
-        >
-          <HStack
-            alignment="start"
-            distribution="start"
-            css={{ width: '100%', borderBottom: 'solid 1px $grayBorder' }}
-            {...getRootProps({ refKey: 'ref' }, { suppressRefError: true })}
-          >
-            <form
-              style={{ width: '100%' }}
-              onSubmit={(event) => {
-                event.preventDefault()
-                // props.applySearchQuery(searchTerm || '')
-                // inputRef.current?.blur()
-              }}
-              {...getRootProps()}
-            >
-              <FormInput
-                css={{
-                  width: '77%',
-                  height: '80px',
-                  fontSize: '24px',
-                  fontFamily: 'Inter',
-                }}
-                type="text"
-                tabIndex={0}
-                value={inputValue}
-                placeholder="Search"
-                onFocus={(event: any) => {
-                  event.preventDefault()
-                  openMenu()
-                  //props.applySearchQuery('')
-                  // inputRef.current?.blur()
-                }}
-                onChange={(event: any) => {
-                  event.preventDefault()
-                }}
-                {...getInputProps()}
-              />
-
-              {/* {searchTerm && ( */}
-              <HStack
-                alignment="center"
-                distribution="start"
-                css={{
-                  height: '100%',
-                  display: 'flex',
-                  justifyContent: 'right',
-                  alignItems: 'center',
-                  margin: '-57px 0 10px',
-                }}
-              >
-                <Button
-                  style="plainIcon"
-                  onClick={(event) => {
-                    event.preventDefault()
-                    clearSelection()
-                    //props.applySearchQuery('')
-                    // inputRef.current?.blur()
-                  }}
-                  css={{
-                    mr: '15px',
-                  }}
-                >
-                  <X
-                    width={24}
-                    height={24}
-                    color={theme.colors.grayTextContrast.toString()}
-                  />
-                </Button>
-
-                <Button
-                  style="ctaDarkYellow"
-                  type="submit"
-                  css={{
-                    mr: '15px',
-                  }}
-                  onClick={(event) => {
-                    event.preventDefault()
-                    if (inputValue && inputValue.length > 0) {
-                      localStorage.setItem(inputValue, inputValue)
-                      setRecentSearches(Object.values(localStorage))
-                    }
-                    // props.applySearchQuery('')
-                    // inputRef.current?.blur()
-                  }}
-                >
-                  Search
-                </Button>
-                {/* )} */}
-                {/* {!searchTerm && ( */}
-                <Button
-                  style="plainIcon"
-                  onClick={(event) => {
-                    // Display the advanced search sheet
-                  }}
-                >
-                  <Sliders
-                    size={24}
-                    color={theme.colors.utilityTextDefault.toString()}
-                  />
-                </Button>
-                {/* )} */}
-              </HStack>
-
-              <List>
-                {isOpen &&
-                  recentSearches
-                    .filter((item) => !inputValue || item.includes(inputValue))
-                    .map((item, index) => (
-                      <SpanBox
-                        {...getMenuProps()}
-                        key={item}
-                        css={{
-                          paddingLeft: '15px',
-                          display: 'flex',
-                          alignItems: 'center',
-                          borderBottom: '1px solid $grayBorder',
-                          '& svg': {
-                            margin: '10px',
-                          },
-                          backgroundColor:
-                            index === highlightedIndex
-                              ? 'var(--colors-grayBg)'
-                              : 'transparent',
-                        }}
-                      >
-                        <Clock size={20} />
-                        <Item
-                          {...getItemProps({
-                            item,
-                            index,
-                          })}
-                        >
-                          {item}
-                        </Item>
-                        <X
-                          width={20}
-                          height={20}
-                          color={theme.colors.grayTextContrast.toString()}
-                          onClick={() => {
-                            localStorage.removeItem(`${item}`)
-                            setRecentSearches(Object.values(localStorage))
-                          }}
-                        />
-                      </SpanBox>
-                    ))}
-              </List>
-            </form>
-          </HStack>
-        </VStack>
-      )}
-    </Downshift>
-  )
-}
diff --git a/packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx b/packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx
deleted file mode 100644
index ea472bd40..000000000
--- a/packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { useState } from 'react'
-import { subscribeMutation } from '../../../lib/networking/mutations/subscribeMutation'
-import { VStack } from '../../elements/LayoutPrimitives'
-import { OnboardingLayout } from '../OnboardingLayout'
-import { SelectOption } from './SelectOption'
-
-const newsletterOptions = [
-  {
-    icon: 'AxiosDaily.png',
-    label: 'Axios Daily Essentials',
-    description: 'Start and end your day with the stories that matter in your inbox.',
-    name: 'axios_essentials',
-    isChecked: false,
-  },
-  {
-    icon: 'MilkRoad.png',
-    label: 'Milk Road',
-    description: '5 minute daily newsletter. Used by 100,000+ people to be better crypto investors 💪',
-    name: 'morning_brew',
-    isChecked: false,
-  },
-  {
-    icon: 'MoneyStuff.png',
-    label: 'Money Stuff by Matt Levine',
-    description: 'A daily take on Wall Street, finance, companies and other stuff.',
-    name: 'milk_road',
-    isChecked: false,
-  },
-  {
-    icon: 'OmnivoreBlog.png',
-    label: 'Omnivore',
-    description: 'Tips and tricks, plus updates on new features in Omnivore.',
-    name: 'omnivore_blog',
-    isChecked: false,
-  },
-]
-
-type OnboardingAddNewslettersProps = {
-  pageNumber: number
-}
-
-export type NewsLetterOption = {
-  icon: string,
-  label: string,
-  name: string,
-  description: string,
-  isChecked: boolean,
-}
-
-export const OnboardingAddNewsletters = (props: OnboardingAddNewslettersProps) => {
-
-  const [newsletters, setNewsletters] = useState<NewsLetterOption[]>(newsletterOptions);
-
-  const onCheck = (index: number) => {
-    const temp = [...newsletters]
-    temp[index].isChecked = !temp[index].isChecked
-    setNewsletters(temp)
-  }
-
-  const onNext = () => {
-    newsletters.map((newsletter) => {
-      if (newsletter.isChecked) subscribeMutation(newsletter.name)
-    })
-  }
-
-  return (
-    <OnboardingLayout
-      pageNumber={props.pageNumber}
-      subTitle="Omnivore creates an email address for you to subscribe to newsletters with."
-      description="Subscribe to some newsletters now"
-      title="Read all your Newsletters in Omnivore"
-      onNext={onNext}
-    >
-      <VStack css={{
-        marginTop: '$4',
-        width: '100%'
-      }}>
-        {newsletters.map(({ icon, label, description, isChecked }, idx) => (
-          <SelectOption
-            key={idx}
-            indexNum={idx}
-            onCheck={onCheck}
-            {...{ icon, label, description, isChecked}} />
-        ))}
-      </VStack>
-    </OnboardingLayout>
-  )
-}
-
diff --git a/packages/web/components/templates/onboarding/OnboardingHighlightInstructions.tsx b/packages/web/components/templates/onboarding/OnboardingHighlightInstructions.tsx
deleted file mode 100644
index fbf3614a9..000000000
--- a/packages/web/components/templates/onboarding/OnboardingHighlightInstructions.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react'
-import { OnboardingLayout } from '../OnboardingLayout'
-import { Box } from '../../elements/LayoutPrimitives'
-import { styled } from '../../tokens/stitches.config'
-
-const StyledImage = styled('img', {
-  position: 'relative',
-  width: '100%',
-  height: '100%',
-  '@smDown': {
-    width: '160%',
-    height: 'auto',
-  }
-})
-
-type OnboardingOrganizeInstructionsProps = {
-  pageNumber: number
-}
-
-export const OnboardingHighlightInstructions = (props: OnboardingOrganizeInstructionsProps) => {
-  return (
-    <OnboardingLayout
-      pageNumber={props.pageNumber}
-      title="Highlight and share"
-      subTitle="Information about creating and sharing highlights Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet."
-      >
-      <Box css={{
-        width: '100%',
-        height: '100%',
-        overflow: 'hidden',
-        '@smDown': {
-          width: '100%',
-          height: 'auto',
-        }
-      }}>
-        <StyledImage
-          src='/static/images/onboarding/highlight-and-share.svg'
-          alt="Highlight And Share"
-        />
-      </Box>
-    </OnboardingLayout>
-  )
-}
diff --git a/packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx b/packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx
deleted file mode 100644
index 301e4d821..000000000
--- a/packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React from 'react'
-import { OnboardingLayout } from '../OnboardingLayout'
-import MobileInstallHelp from '../../elements/MobileInstallHelp'
-import ExtensionsInstallHelp from '../../elements/ExtensionsInstallHelp'
-import { Box } from '../../elements/LayoutPrimitives'
-import { sendInstallInstructions } from '../../../lib/networking/queries/sendInstallInstructions'
-import { Button } from '../../elements/Button'
-import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
-
-type OnboardingInstallInstructionsProps = {
-  pageNumber: number
-}
-
-export const OnboardingInstallInstructions = (props: OnboardingInstallInstructionsProps) => {
-  const onEmailInstructionsClick = async () => {
-    const res = await sendInstallInstructions()
-    if (res !== undefined) {
-      showSuccessToast('Instructions Email Sent', { position: 'bottom-right' })
-    }
-    else {
-      showErrorToast('Failed to send', { position: 'bottom-right' })
-    }
-  }
-
-  return (
-    <OnboardingLayout
-      pageNumber={props.pageNumber}
-      title="Save links to read later"
-      subTitle="Save any link to your library using our apps and browser extensions"
-      description='Install our apps and browser extensions'
-      image={
-        <img
-          src='/static/images/onboarding/browser-extension.svg'
-          alt="Browser Extension"
-        />
-      }
-    >
-      <Box css={{
-        "@lgDown": {
-          marginBottom: 100,
-        }
-      }}>
-        <Box
-          css={{
-            margin: '27px 0',
-            '@lg': {
-              border: '1px solid rgba(0, 0, 0, 0.06)',
-              boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
-            },
-            backgroundColor: 'White',
-          }}
-        >
-          <Box
-            css={{
-              '@lgDown': {
-                boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
-                border: '1px solid rgba(0, 0, 0, 0.06)',
-              },
-            }}
-          >
-            <MobileInstallHelp onboarding />
-          </Box>
-          <Box
-            css={{
-              '@lgDown': {
-                boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
-                border: '1px solid rgba(0, 0, 0, 0.06)',
-                marginTop: '8px',
-              },
-            }}
-          >
-            <ExtensionsInstallHelp onboarding />
-          </Box>
-        </Box>
-        <Box
-          css={{
-            '@lg': {
-              marginBottom: '20px',
-            },
-          }}
-        >
-          <Box
-            onClick={onEmailInstructionsClick}
-            css={{
-              fontWeight: '400',
-              fontSize: '14px',
-              lineHeight: '17.5px',
-              color: 'rgba(10, 8, 6, 0.8)',
-              textDecoration: 'underline',
-              cursor: 'pointer',
-            }}
-          >
-            Email me instructions
-          </Box>
-        </Box>
-      </Box>
-    </OnboardingLayout>
-  )
-}
-
diff --git a/packages/web/components/templates/onboarding/OnboardingJoinCommunity.tsx b/packages/web/components/templates/onboarding/OnboardingJoinCommunity.tsx
deleted file mode 100644
index c85711f43..000000000
--- a/packages/web/components/templates/onboarding/OnboardingJoinCommunity.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from 'react'
-import { OnboardingLayout } from '../OnboardingLayout'
-import { Box, HStack, VStack } from '../../elements/LayoutPrimitives'
-import { styled } from '../../tokens/stitches.config'
-
-const IconContainer = styled(Box, {width: '30%', justifyContent: 'center', display: 'flex'})
-const Icon = styled('img', {width: 100})
-const Row = styled(HStack, {
-  width: '100%',
-  padding: 30,
-  borderBottom: '1px solid rgba(0, 0, 0, 0.06)',
-
-  '@smDown': {
-    padding: 20,
-  }
-})
-const Text = styled(Box, {
-  width: '65%',
-  alignSelf: 'center',
-  color: '#0A0806CC',
-  fontSize: 24,
-  fontWeight: '700',
-  '@smDown': {
-    fontSize: 16,
-  }
-})
-const Container = styled(Box, {
-  width: 523,
-  border: '1px solid #0000000F',
-  background: 'white',
-
-  '@smDown': {
-    width: '95%',
-  }
-})
-
-type OnboardingJoinCommunityProps = {
-  pageNumber: number
-}
-
-export const OnboardingJoinCommunity = (props: OnboardingJoinCommunityProps) => {
-  return (
-    <OnboardingLayout
-      pageNumber={props.pageNumber}
-      title="Join our Community"
-      subTitle='Omnivore is open source and open community, join us.'
-      nextPage='/home'
-      reduceSpace
-      >
-      <HStack distribution='center' alignment='center' css={{width: '100%', height: '100%'}}>
-        <Container>
-          <VStack>
-            <Row distribution='between'>
-              <IconContainer>
-                <Icon css={{height: 60}} src='/static/images/onboarding/github.svg' alt="Github Logo" />
-              </IconContainer>
-              <Text>Star us on Github</Text>
-            </Row>
-            <Row distribution='between'>
-              <IconContainer>
-                <Icon src='/static/images/onboarding/discord.svg' alt="Discrod Logo" />
-              </IconContainer>
-              <Text>Join us on Discord</Text>
-            </Row>
-            <Row distribution='between'>
-              <IconContainer>
-                <Icon css={{width: 74, height: 67}} src='/static/images/onboarding/producthunt.svg' alt="ProductHunt Logo" />
-              </IconContainer>
-              <Text>Like us on Product Hunt</Text>
-            </Row>
-          </VStack>
-        </Container>
-      </HStack>
-    </OnboardingLayout>
-  )
-}
-
diff --git a/packages/web/components/templates/onboarding/OnboardingOrganizeInstructions.tsx b/packages/web/components/templates/onboarding/OnboardingOrganizeInstructions.tsx
deleted file mode 100644
index 3704732c2..000000000
--- a/packages/web/components/templates/onboarding/OnboardingOrganizeInstructions.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react'
-import { OnboardingLayout } from '../OnboardingLayout'
-import { Box } from '../../elements/LayoutPrimitives'
-import { styled } from '../../tokens/stitches.config'
-
-const StyledImage = styled('img', {
-  position: 'relative',
-})
-
-type OnboardingOrganizeInstructionsProps = {
-  pageNumber: number
-}
-
-export const OnboardingOrganizeInstructions = (props: OnboardingOrganizeInstructionsProps) => {
-  return (
-    <OnboardingLayout
-      pageNumber={props.pageNumber}
-      title="Organize all your content"
-      subTitle="Information about archiving and tagging
-      Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet."
-    >
-      <Box css={{width: '100%', height: '100%'}}>
-        <StyledImage
-          src='/static/images/onboarding/organize-content.svg'
-          alt="Organize Content Desktop"
-          css={{
-            width: '100%',
-            height: '500px',
-            '@smDown': {
-              display: 'none',
-            },
-            '@lg': {
-              height: '75%',
-            },
-            '@xl': {
-              width: 'auto',
-              height: '95%',
-            }
-          }}
-        />
-        <StyledImage
-          src='/static/images/onboarding/organize-content-mobile.svg'
-          alt="Organize Content Mobile"
-          css={{
-            mt: 10,
-            right: '1.6vh',
-            objectFit: 'contain',
-            width: '100%',
-            '@sm': {
-              display: 'none',
-            }
-          }}
-        />
-      </Box>
-    </OnboardingLayout>
-  )
-}
diff --git a/packages/web/components/templates/onboarding/OnboardingReaderPreview.tsx b/packages/web/components/templates/onboarding/OnboardingReaderPreview.tsx
deleted file mode 100644
index fac558917..000000000
--- a/packages/web/components/templates/onboarding/OnboardingReaderPreview.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { SelectionOptionCard } from './SelectOption'
-import { OnboardingLayout } from '../OnboardingLayout'
-import { Box, HStack, VStack } from '../../elements/LayoutPrimitives'
-
-const articleDetails = [
-  {
-    title: 'Winnebago Electric RV Concept',
-    author: 'Omnivore',
-    originText: 'wired.com',
-    description: "An incredible number of lines from William Shakespeare's plays have becomeso ingrained in modern vernacular …",
-    image: "https://images.hgmsites.net/sml/cadillac_100789665_s.jpg",
-    labels: []
-  },
-  {
-    title: 'Winnebago Electric RV Concept',
-    author: 'Omnivore',
-    originText: 'wired.com',
-    description: "An incredible number of lines from William Shakespeare's plays have becomeso ingrained in modern vernacular …",
-    image: "https://images.hgmsites.net/sml/cadillac_100789665_s.jpg",
-    labels: []
-  },
-  {
-    title: '21 Phrases You Use Without Realizin…',
-    author: 'Omnivore',
-    originText: 'wired.com',
-    description: "An incredible number of lines from William Shakespeare's plays have becomeso ingrained in modern vernacular …",
-    image: "",
-    labels: [],
-  },
-  {
-    title: '21 Phrases You Use Without Realizin…',
-    author: 'Omnivore',
-    originText: 'wired.com',
-    description: "An incredible number of lines from William Shakespeare's plays have becomeso ingrained in modern vernacular …",
-    image: "https://images.hgmsites.net/sml/cadillac_100789665_s.jpg",
-    labels: []
-  },
-]
-
-type OnboardingReaderPreviewProps = {
-  pageNumber: number
-}
-
-export const OnboardingReaderPreview = (props: OnboardingReaderPreviewProps) => {
-  return (
-    <OnboardingLayout
-      pageNumber={props.pageNumber}
-      title="Read Distraction Free"
-      subTitle="Omnivore's distraction free reader gives you an uncluttered reading experience"
-      description='Add some great reads to your library now:'
-      image={
-        <img
-          src='/static/images/onboarding/expanded-controls.svg'
-          alt="Expanded control"
-        />
-      }
-    >
-      <VStack css={{
-        marginTop: '$4',
-        marginBottom: '$6'
-      }}>
-        <HStack>
-          <Box css={{
-            display: 'grid',
-            gridTemplateColumns: '100%',
-            gridColumnGap: '$3',
-            gridRowGap: '$2',
-            '@md': {
-              gridTemplateColumns: '50% 50%',
-            },
-          }}>
-            {articleDetails.map(({ title, author, originText, description, image, labels }, idx) => (
-            <SelectionOptionCard
-              key={idx} 
-              {...{ title, author, originText, description, image, labels }}
-            />
-        ))}
-          </Box>
-        </HStack>
-      </VStack>
-    </OnboardingLayout>
-  )
-}
diff --git a/packages/web/components/templates/onboarding/SelectOption.tsx b/packages/web/components/templates/onboarding/SelectOption.tsx
deleted file mode 100644
index 3bd794f44..000000000
--- a/packages/web/components/templates/onboarding/SelectOption.tsx
+++ /dev/null
@@ -1,244 +0,0 @@
-import React from 'react'
-import Checkbox from '../../elements/Checkbox'
-import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
-import { CoverImage } from '../../elements/CoverImage'
-import { StyledText } from '../../elements/StyledText'
-import { authoredByText } from '../../patterns/ArticleSubtitle'
-import { LabelChip } from '../../elements/LabelChip'
-import { Label } from '../../../lib/networking/fragments/labelFragment'
-import Image from 'next/image'
-
-export const SelectOption: React.FC<{
-  icon: string
-  label: string
-  description: string
-  onCheck: (idx: number) => void
-  indexNum: number
-  isChecked: boolean
-}> = ({ icon, label, description, onCheck, indexNum, isChecked}) => {
-
-  const toggleChecked = () => {
-    onCheck(indexNum)
-  }
-
-  return (
-    <HStack onClick={toggleChecked} css={{
-      border: isChecked ? '1px solid #F9D354' : '1px solid #0000000F',
-      backgroundColor: isChecked ? '#FDFAEC' : '#FFFFFF',
-      boxShadow: '0px 3px 11px 0px #201F1D0A',
-      justifyContent: 'flex-start',
-      alignItems: 'center',
-      borderRadius: '6px',
-      cursor: 'pointer',
-      padding: '$2 $3',
-      marginBottom: 7,
-      width: '100%'
-    }}>
-      <Checkbox checked={isChecked} setChecked={() => undefined} />
-      <SpanBox css={{ marginLeft: '$2', width: '32px', height: '32px' }}>
-        <Image width={32} height={32} layout="fixed"
-          src={`/static/images/newsletter/${icon}`}
-          alt={`${icon.slice(0, -4)} logo`}
-        />
-      </SpanBox>
-      <VStack css={{ border: '1', marginLeft: '$2', color: '#0A0806CC', }}>
-        <StyledText
-          css={{
-            margin: 0,
-            fontSize: 16,
-            fontWeight: 700,
-            
-          }}
-        >
-          {label}
-        </StyledText>
-        <StyledText
-          css={{
-            margin: 0,
-            fontSize: 16,
-            fontWeight: 400,
-            color: '#0A0806CC',
-          }}
-        >
-          {description}
-        </StyledText>
-      </VStack>
-    </HStack>
-  )
-}
-
-export const SelectionOptionCard: React.FC <{
-  title: string,
-  author: string,
-  originText: string,
-  description: string,
-  image: string,
-  labels: Label[]
-}> = ({title, author, originText, description, image, labels}) => {
-  const [checked, setChecked] = React.useState(false)
-  const toggleChecked = () => setChecked(!checked)
-  
-  return (
-    <VStack
-      css={{
-        p: '$2',
-        pr: '8px',
-        height: '100%',
-        width: '100%',
-        maxWidth: '100%',
-        borderRadius: '6px',
-        cursor: 'pointer',
-        wordBreak: 'break-word',
-        overflow: 'clip',
-        boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
-        position: 'relative',
-        marginRight: '$3',
-        border: checked ? '1px solid #F9D354' : '1px solid $grayBorder',
-        backgroundColor: checked ? '#FDFAEC' : '#FFFFFF',
-      }}
-      alignment="start"
-      distribution="start"
-      onClick={toggleChecked}
-    >
-      <Box
-        css={{
-          position: 'absolute',
-          top: '1px',
-          left: '1px',
-          width: 'calc(100% - 2px)',
-          '& > div': {
-            borderRadius: '100vmax 100vmax 0 0',
-          },
-        }}
-      >
-      </Box>
-      <VStack
-        distribution="start"
-        alignment="start"
-        css={{
-          px: '0px',
-          width: '100%',
-          pl: '$1',
-        }}
-      >
-        <HStack
-          alignment="start"
-          distribution="between"
-          css={{
-            width: '100%',
-            p: '0px',
-            mr: '-12px',
-            mt: '15px',
-            display: 'grid',
-            gridTemplateColumns: '1fr 24px',
-            gridTemplateRows: '1fr',
-          }}
-        >
-          <HStack css={{
-            alignItems: 'center'
-          }}>
-            <Checkbox {...{checked, setChecked}} />
-            <HStack css={{marginRight: '$2'}} />
-            <CardTitle title= {title} />
-          </HStack>
-          <Box
-            css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
-            onClick={(e) => {
-              // This is here to prevent menu click events from bubbling
-              // up and causing us to "click" on the link item.
-              e.stopPropagation()
-            }}
-          >
-          </Box>
-        </HStack>
-        <HStack alignment="start" distribution="between">
-          <StyledText style="caption" css={{ my: '0' }}>
-            {author && (
-              <SpanBox css={{ mr: '8px' }}>
-                {authoredByText(author)}
-              </SpanBox>
-            )}
-            <SpanBox css={{ textDecorationLine: 'underline' }}>
-              {originText}
-            </SpanBox>
-          </StyledText>
-        </HStack>
-      </VStack>
-      <HStack
-        alignment="start"
-        distribution="between"
-        css={{
-          width: '100%',
-          pt: '$2',
-          px: '$1',
-          pr: '12px',
-          mt: '7px',
-          flexGrow: '1',
-        }}
-      >
-        <StyledText
-          css={{
-            m: 0,
-            py: '0px',
-            mr: '$2',
-            fontStyle: 'normal',
-            fontWeight: '400',
-            fontSize: '14px',
-            lineHeight: '125%',
-            color: '$grayTextContrast',
-            flexGrow: '4',
-            overflow: 'hidden',
-            display: '-webkit-box',
-            WebkitLineClamp: 5,
-            WebkitBoxOrient: 'vertical',
-          }}
-          data-testid="listDesc"
-        >
-          {description}
-        </StyledText>
-        {image && (
-          <CoverImage
-            src={image}
-            alt="Link Preview Image"
-            width={135}
-            height={90}
-            css={{ ml: '10px', mb: '8px', borderRadius: '3px' }}
-            onError={(e) => {
-              ;(e.target as HTMLElement).style.display = 'none'
-            }}
-          />
-        )}
-      </HStack>
-      <Box css={{ display: 'block', mt: '8px' }}>
-        {labels?.map(({ name, color }, index) => (
-          <LabelChip key={index} text={name || ''} color={color} />
-        ))}
-      </Box>
-    </VStack>
-  )
-}
-
-type CardTitleProps = {
-  title: string
-}
-
-function CardTitle(props: CardTitleProps): JSX.Element {
-  return (
-    <StyledText
-      style="listTitle"
-      data-testid="listTitle"
-      css={{
-        mt: '0',
-        mb: '0',
-        fontWeight: '700',
-        textAlign: 'left',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-        width: '100%',
-        overflow: 'hidden',
-      }}
-    >
-      {props.title}
-    </StyledText>
-  )
-}
diff --git a/packages/web/components/templates/reader/ReaderHeader.tsx b/packages/web/components/templates/reader/ReaderHeader.tsx
new file mode 100644
index 000000000..e14e3a46c
--- /dev/null
+++ b/packages/web/components/templates/reader/ReaderHeader.tsx
@@ -0,0 +1,116 @@
+import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { Button } from '../../elements/Button'
+import { DotsThreeOutline, TextAa } from 'phosphor-react'
+import { PrimaryDropdown } from '../PrimaryDropdown'
+import { TooltipWrapped } from '../../elements/Tooltip'
+import { LogoBox } from '../../elements/LogoBox'
+import { ReactNode } from 'react'
+import { HEADER_HEIGHT, MOBILE_HEADER_HEIGHT } from '../homeFeed/HeaderSpacer'
+import { theme } from '../../tokens/stitches.config'
+
+type ReaderHeaderProps = {
+  alwaysDisplayToolbar: boolean
+  showDisplaySettingsModal: (show: boolean) => void
+  children?: ReactNode
+}
+
+export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
+  return (
+    <>
+      <VStack
+        alignment="center"
+        distribution="start"
+        css={{
+          top: '0',
+          left: '0',
+          zIndex: 1,
+          position: 'fixed',
+          width: '100%',
+          height: HEADER_HEIGHT,
+          display: props.alwaysDisplayToolbar ? 'flex' : 'transparent',
+          pt: '35px',
+          borderBottom: props.alwaysDisplayToolbar
+            ? '1px solid $thBorderColor'
+            : '1px solid transparent',
+          '@xlgDown': {
+            height: MOBILE_HEADER_HEIGHT,
+            pt: '0px',
+            bg: '$thBackground3',
+            borderBottom: '1px solid $thBorderColor',
+          },
+        }}
+      >
+        <HStack
+          alignment="center"
+          distribution="start"
+          css={{
+            width: '100%',
+            height: '100%',
+          }}
+        >
+          <LogoBox />
+          <SpanBox
+            css={{
+              width: '100%',
+              px: '25px',
+              '@lg': {
+                display: props.alwaysDisplayToolbar ? 'flex' : 'none',
+              },
+              '@mdDown': { px: '15px' },
+            }}
+          >
+            {props.children}
+          </SpanBox>
+          {!props.alwaysDisplayToolbar && (
+            <SpanBox
+              css={{
+                width: '100%',
+                '@lgDown': {
+                  display: 'none',
+                },
+              }}
+            >
+              <ControlButtonBox {...props} />
+            </SpanBox>
+          )}
+        </HStack>
+      </VStack>
+    </>
+  )
+}
+
+function ControlButtonBox(props: ReaderHeaderProps): JSX.Element {
+  return (
+    <>
+      <HStack
+        alignment="center"
+        distribution="end"
+        css={{
+          marginLeft: 'auto',
+          marginRight: '25px',
+          width: '100px',
+          height: '100%',
+          gap: '20px',
+          minWidth: '121px',
+        }}
+      >
+        <Button
+          style="articleActionIcon"
+          onClick={() => {
+            props.showDisplaySettingsModal(true)
+          }}
+        >
+          <TooltipWrapped tooltipContent="Adjust Display Settings">
+            <TextAa size={25} color={theme.colors.thHighContrast.toString()} />
+          </TooltipWrapped>
+        </Button>
+        <PrimaryDropdown showThemeSection={false}>
+          <DotsThreeOutline
+            size={25}
+            color={theme.colors.thHighContrast.toString()}
+          />
+        </PrimaryDropdown>
+      </HStack>
+    </>
+  )
+}
diff --git a/packages/web/components/templates/settings/SettingsTable.tsx b/packages/web/components/templates/settings/SettingsTable.tsx
index ed63058f1..d57c74955 100644
--- a/packages/web/components/templates/settings/SettingsTable.tsx
+++ b/packages/web/components/templates/settings/SettingsTable.tsx
@@ -1,5 +1,4 @@
-import Link from 'next/link'
-import { Plus, Trash } from 'phosphor-react'
+import { Trash } from 'phosphor-react'
 import { Toaster } from 'react-hot-toast'
 import { Button } from '../../elements/Button'
 import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
@@ -7,8 +6,8 @@ import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
 import { InfoLink } from '../../elements/InfoLink'
 import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import { StyledText } from '../../elements/StyledText'
-import { styled, theme } from '../../tokens/stitches.config'
-import { PrimaryLayout } from '../PrimaryLayout'
+import { theme } from '../../tokens/stitches.config'
+import { SettingsLayout } from '../SettingsLayout'
 
 type SettingsTableProps = {
   pageId: string
@@ -236,7 +235,7 @@ const CreateButton = (props: CreateButtonProps): JSX.Element => {
 
 export const SettingsTable = (props: SettingsTableProps): JSX.Element => {
   return (
-    <PrimaryLayout pageTestId={props.pageId}>
+    <SettingsLayout>
       <Toaster
         containerStyle={{
           top: '5rem',
@@ -312,6 +311,6 @@ export const SettingsTable = (props: SettingsTableProps): JSX.Element => {
         </VStack>
       </HStack>
       <Box css={{ height: '120px' }} />
-    </PrimaryLayout>
+    </SettingsLayout>
   )
 }
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index d3f42cbcc..019904201 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -66,6 +66,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
     theme: {
       fonts: {
         inter: 'Inter, sans-serif',
+        display: '-apple-system, BlinkMacSystemFont, sans-serif',
       },
       fontSizes: {
         1: '0.75em',
@@ -108,8 +109,12 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
       },
       zIndices: {},
       transitions: {},
+
+      colorScheme: {
+        colorScheme: 'light',
+      },
+
       colors: {
-        // Grayscale
         grayBase: '#F8F8F8',
         grayBg: '#FFFFFF',
         grayBgActive: '#e6e6e6',
@@ -126,7 +131,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         grayBgHover: 'hsl(0 0% 93.0%)',
         grayLine: 'hsl(0 0% 88.7%)',
         grayBorderHover: 'hsl(0 0% 78.0%)',
-        grayText: '#3B3938',
+        grayText: '#6A6968',
         graySeparator: '#DADADA',
         grayProgressBackground: '#FFFFFF',
 
@@ -155,8 +160,8 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         readerTableHeader: '#FFFFFF',
 
         // Avatar Fallback color
-        avatarBg: '#FFFFFF',
-        avatarFont: '#0A0806',
+        avatarBg: '#FFEA9F',
+        avatarFont: '#9C7C0A',
 
         labelButtonsBg: '#F5F5F4',
         tooltipIcons: '#FDFAEC',
@@ -169,6 +174,28 @@ 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',
+        thBackground4: '#EBEBEB',
+        thBackgroundContrast: '#FFFFFF',
+
+        thTextContrast: '#1E1E1E',
+        thTextContrast2: '#3D3D3D',
+
+        thTextSubtle: '#1E1E1E',
+        thTextSubtle2: '#6A6968',
+        thTextSubtle3: '#ADADAD',
+
+        thBorderColor: '#E1E1E1',
+        thBorderSubtle: '#EEEEEE',
+
+        thProgressFg: '#FFD234',
+
+        thHighContrast: '#3D3D3D',
       },
     },
     media: {
@@ -176,14 +203,19 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
       smDown: '(max-width: 575px)',
       mdDown: '(max-width: 768px)',
       lgDown: '(max-width: 992px)',
+      xlgDown: '(max-width: 1200px)',
       sm: '(min-width: 576px)',
       md: '(min-width: 768px)',
       lg: '(min-width: 992px)',
       xl: '(min-width: 1200px)',
+      xxl: '(min-width: 1700px)',
     },
   })
 
 const darkThemeSpec = {
+  colorScheme: {
+    colorScheme: 'dark',
+  },
   colors: {
     grayBase: '#252525',
     grayBg: '#3B3938',
@@ -217,8 +249,8 @@ const darkThemeSpec = {
     readerHeader: '#b9b9b9',
     readerTableHeader: '#FFFFFF',
     tooltipIcons: '#5F5E58',
-    avatarBg: '#000000',
-    avatarFont: 'rgba(255, 255, 255, 0.8)',
+    avatarBg: '#7B5C3E',
+    avatarFont: '#D9D9D9',
 
     textSubtle: '#AAAAAA',
     libraryBackground: '#252525',
@@ -231,6 +263,31 @@ 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
+    colorScheme: 'dark',
+    thBackground: '#2A2A2A',
+    thBackground2: '#3D3D3D',
+    thBackground3: '#242424',
+    thBackground4: '#3D3D3D',
+    thBackgroundActive: '#2A2A2B',
+    thBackgroundContrast: '#000000',
+
+    thTextContrast: '#FFFFFF',
+    thTextContrast2: '#EBEBEB',
+
+    thTextSubtle: '#D9D9D9',
+    thTextSubtle2: '#D9D9D9',
+    thTextSubtle3: '#ADADAD',
+
+    thBorderColor: '#4F4F4F',
+    thBorderSubtle: '#6A6968',
+
+    thProgressFg: '#FFEA9F',
+
+    thHighContrast: '#D9D9D9',
   },
   shadows: {
     cardBoxShadow:
@@ -280,7 +337,8 @@ export const lighterTheme = createTheme(ThemeId.Lighter, {})
 // Apply global styles in here
 export const globalStyles = globalCss({
   body: {
-    backgroundColor: '$grayBase',
+    colorScheme: 'var(--colorScheme-colorScheme)',
+    backgroundColor: '$thBackground',
   },
   '*': {
     '&:focus': {
diff --git a/packages/web/lib/articleActions.ts b/packages/web/lib/articleActions.ts
index f599d1bfc..8feaa4f61 100644
--- a/packages/web/lib/articleActions.ts
+++ b/packages/web/lib/articleActions.ts
@@ -1,14 +1,21 @@
-import { Highlight } from "./networking/fragments/highlightFragment"
-import { ArticleReadingProgressMutationInput } from "./networking/mutations/articleReadingProgressMutation"
-import { CreateHighlightInput } from "./networking/mutations/createHighlightMutation"
-import { MergeHighlightInput, MergeHighlightOutput } from "./networking/mutations/mergeHighlightMutation"
-import { UpdateHighlightInput } from "./networking/mutations/updateHighlightMutation"
-
+import { Highlight } from './networking/fragments/highlightFragment'
+import { ArticleReadingProgressMutationInput } from './networking/mutations/articleReadingProgressMutation'
+import { CreateHighlightInput } from './networking/mutations/createHighlightMutation'
+import { MergeHighlightInput } from './networking/mutations/mergeHighlightMutation'
+import { UpdateHighlightInput } from './networking/mutations/updateHighlightMutation'
 
 export type ArticleMutations = {
-  createHighlightMutation: (input: CreateHighlightInput) => Promise<Highlight | undefined>
+  createHighlightMutation: (
+    input: CreateHighlightInput
+  ) => Promise<Highlight | undefined>
   deleteHighlightMutation: (highlightId: string) => Promise<boolean>
-  mergeHighlightMutation: (input: MergeHighlightInput) => Promise<Highlight | undefined>
-  updateHighlightMutation: (input: UpdateHighlightInput) => Promise<string | undefined>
-  articleReadingProgressMutation: (input: ArticleReadingProgressMutationInput) => Promise<boolean>
+  mergeHighlightMutation: (
+    input: MergeHighlightInput
+  ) => Promise<Highlight | undefined>
+  updateHighlightMutation: (
+    input: UpdateHighlightInput
+  ) => Promise<string | undefined>
+  articleReadingProgressMutation: (
+    input: ArticleReadingProgressMutationInput
+  ) => Promise<boolean>
 }
diff --git a/packages/web/lib/dateFormatting.ts b/packages/web/lib/dateFormatting.ts
index 93be4d330..587db2e88 100644
--- a/packages/web/lib/dateFormatting.ts
+++ b/packages/web/lib/dateFormatting.ts
@@ -13,48 +13,3 @@ export function formattedShortDate(rawDate: string): string {
     dateStyle: 'short',
   }).format(new Date(rawDate))
 }
-
-export function readableUpdatedAtMessage(
-  rawDate: string,
-  customPrefix?: string
-): string {
-  const prefix = customPrefix || 'Updated '
-  const timeElapsed = Math.ceil(
-    new Date().valueOf() - new Date(rawDate).valueOf()
-  )
-  const secondsElapsed = timeElapsed / 1000
-
-  if (secondsElapsed < 60) {
-    return `${prefix} a few seconds ago`
-  }
-
-  if (secondsElapsed < 3600) {
-    return `${prefix} ${Math.floor(secondsElapsed / 60)} minutes ago`
-  }
-
-  if (secondsElapsed < 86400) {
-    return `${prefix} ${Math.floor(secondsElapsed / 3600)} hours ago`
-  }
-
-  if (secondsElapsed < 604800) {
-    return `${prefix} ${Math.floor(secondsElapsed / 86400)} days ago`
-  }
-
-  if (secondsElapsed < 2592000) {
-    return `${prefix} ${Math.floor(secondsElapsed / 604800)} weeks ago`
-  }
-
-  if (secondsElapsed < 31536000) {
-    return `${prefix} ${Math.floor(secondsElapsed / 2592000)} months ago`
-  }
-
-  if (secondsElapsed < 315360000) {
-    return `${prefix} ${Math.floor(secondsElapsed / 31536000)} years ago`
-  }
-
-  if (secondsElapsed < 3153600000) {
-    return `${prefix} ${Math.floor(secondsElapsed / 315360000)} decades ago`
-  }
-
-  return ''
-}
diff --git a/packages/web/lib/highlights/highlightGenerator.ts b/packages/web/lib/highlights/highlightGenerator.ts
index 0175d717b..07027d743 100644
--- a/packages/web/lib/highlights/highlightGenerator.ts
+++ b/packages/web/lib/highlights/highlightGenerator.ts
@@ -468,19 +468,6 @@ const getSurroundingText = ({
   }
 }
 
-function stringToColour(str: string): string {
-  let hash = 0
-  for (let i = 0; i < str.length; i++) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash)
-  }
-  let colour = '#'
-  for (let i = 0; i < 3; i++) {
-    const value = (hash >> (i * 8)) & 0xff
-    colour += ('00' + value.toString(16)).substr(-2)
-  }
-  return colour
-}
-
 export const isValidLength = (patch: string): boolean => {
   const { highlightTextStart, highlightTextEnd } = getPrefixAndSuffix({ patch })
   return highlightTextEnd - highlightTextStart < maxHighlightLength
diff --git a/packages/web/lib/hooks/useReaderSettings.tsx b/packages/web/lib/hooks/useReaderSettings.tsx
index 11c3c5fdf..af2293bd3 100644
--- a/packages/web/lib/hooks/useReaderSettings.tsx
+++ b/packages/web/lib/hooks/useReaderSettings.tsx
@@ -1,8 +1,11 @@
-import { useRegisterActions } from "kbar"
-import { useCallback, useState } from "react"
-import { userPersonalizationMutation } from "../networking/mutations/userPersonalizationMutation"
-import { useGetUserPreferences, UserPreferences } from "../networking/queries/useGetUserPreferences"
-import { usePersistedState } from "./usePersistedState"
+import { useRegisterActions } from 'kbar'
+import { useCallback, useState } from 'react'
+import { userPersonalizationMutation } from '../networking/mutations/userPersonalizationMutation'
+import {
+  useGetUserPreferences,
+  UserPreferences,
+} from '../networking/queries/useGetUserPreferences'
+import { usePersistedState } from './usePersistedState'
 
 const DEFAULT_FONT = 'Inter'
 
@@ -14,7 +17,7 @@ export type ReaderSettings = {
 
   setFontSize: (newFontSize: number) => void
   setLineHeight: (newLineHeight: number) => void
-  setMarginWidth: (newMarginWidth: number) => void 
+  setMarginWidth: (newMarginWidth: number) => void
 
   showSetLabelsModal: boolean
   showDeleteConfirmation: boolean
@@ -22,125 +25,207 @@ export type ReaderSettings = {
 
   setShowSetLabelsModal: (showSetLabelsModal: boolean) => void
   setShowDeleteConfirmation: (showDeleteConfirmation: boolean) => void
-  setShowEditDisplaySettingsModal: (showEditDisplaySettingsModal: boolean) => void
+  setShowEditDisplaySettingsModal: (
+    showEditDisplaySettingsModal: boolean
+  ) => void
 
   actionHandler: (action: string, arg?: unknown) => void
-  
-  fontFamily: string,
+
+  fontFamily: string
   setFontFamily: (newStyle: string) => void
+
+  justifyText: boolean | undefined
+  setJustifyText: (set: boolean) => void
+  highContrastText: boolean | undefined
+  setHighContrastText: (set: boolean) => void
 }
 
 export const useReaderSettings = (): ReaderSettings => {
   const { preferencesData } = useGetUserPreferences()
-  const [fontSize, setFontSize] = useState(preferencesData?.fontSize ?? 20)
-  const [lineHeight, setLineHeight] = usePersistedState({ key: 'lineHeight', initialValue: 150 })
-  const [marginWidth, setMarginWidth] = usePersistedState({ key: 'marginWidth', initialValue: 200 })
-  const [fontFamily, setFontFamily] = usePersistedState({ key: 'fontFamily', initialValue: DEFAULT_FONT })
+  const [, updateState] = useState({})
+
+  const [fontSize, setFontSize] = usePersistedState({
+    key: 'fontSize',
+    initialValue: preferencesData?.fontSize ?? 20,
+  })
+  const [lineHeight, setLineHeight] = usePersistedState({
+    key: 'lineHeight',
+    initialValue: 150,
+  })
+  const [marginWidth, setMarginWidth] = usePersistedState({
+    key: 'marginWidth',
+    initialValue: 200,
+  })
+  const [fontFamily, setFontFamily] = usePersistedState({
+    key: 'fontFamily',
+    initialValue: DEFAULT_FONT,
+  })
+  const [highContrastText, setHighContrastText] = usePersistedState<
+    boolean | undefined
+  >({
+    key: `--display-high-contrast-text`,
+    initialValue: false,
+  })
+
+  const [justifyText, setJustifyText] = usePersistedState<boolean | undefined>({
+    key: `--display-justify-text`,
+    initialValue: false,
+  })
   const [showSetLabelsModal, setShowSetLabelsModal] = useState(false)
-  const [showEditDisplaySettingsModal, setShowEditDisplaySettingsModal] = useState(false)
+  const [showEditDisplaySettingsModal, setShowEditDisplaySettingsModal] =
+    useState(false)
   const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false)
 
   const updateFontSize = async (newFontSize: number) => {
     setFontSize(newFontSize)
-    await userPersonalizationMutation({ fontSize: newFontSize })
+    ;(async () => {
+      await userPersonalizationMutation({ fontSize: newFontSize })
+    })()
   }
 
-  const actionHandler = useCallback(async(action: string, arg?: unknown) => {
-    switch (action) {
-      case 'incrementFontSize':
-        await updateFontSize(Math.min(fontSize + 2, 28))
-        break
-      case 'decrementFontSize':
-        await updateFontSize(Math.max(fontSize - 2, 10))
-        break
-      case 'setMarginWidth': {
-        const value = Number(arg)
-        if (value >= 200 && value <= 560) {
-          setMarginWidth(value)
+  // const [hideMargins, setHideMargins] = usePersistedState<boolean | undefined>({
+  //   key: `--display-hide-margins`,
+  //   initialValue: false,
+  //   isSessionStorage: false,
+  // })
+
+  const actionHandler = useCallback(
+    (action: string, arg?: unknown) => {
+      switch (action) {
+        case 'setFontSize':
+          const value = Number(arg)
+          if (value >= 10 && value <= 34) {
+            updateFontSize(value)
+          }
+          break
+        case 'incrementFontSize':
+          updateFontSize(Math.min(fontSize + 2, 34))
+          break
+        case 'decrementFontSize':
+          updateFontSize(Math.max(fontSize - 2, 10))
+          break
+        case 'setMarginWidth': {
+          const value = Number(arg)
+          console.log('setMarginWidth: ', value)
+          if (value >= 200 && value <= 560) {
+            setMarginWidth(value)
+          }
+          break
         }
-        break
-      }
-      case 'incrementMarginWidth':
-        setMarginWidth(Math.min(marginWidth + 45, 560))
-        break
-      case 'decrementMarginWidth':
-        setMarginWidth(Math.max(marginWidth - 45, 200))
-        break
-      case 'setLineHeight': {
-        const value = Number(arg)
-        if (value >= 100 && value <= 300) {
-          setLineHeight(arg as number)
+        case 'incrementMarginWidth':
+          setMarginWidth(Math.min(marginWidth + 45, 560))
+          break
+        case 'decrementMarginWidth':
+          setMarginWidth(Math.max(marginWidth - 45, 200))
+          break
+        case 'setLineHeight': {
+          const value = Number(arg)
+          if (value >= 100 && value <= 300) {
+            setLineHeight(arg as number)
+          }
+          break
+        }
+        case 'editDisplaySettings': {
+          setShowEditDisplaySettingsModal(true)
+          break
+        }
+        case 'setFontFamily': {
+          setFontFamily(arg as unknown as string)
+          break
+        }
+        case 'setLabels': {
+          setShowSetLabelsModal(true)
+          break
+        }
+        case 'resetReaderSettings': {
+          updateFontSize(20)
+          setMarginWidth(290)
+          setLineHeight(150)
+          setFontFamily(DEFAULT_FONT)
+          break
         }
-        break
       }
-      case 'editDisplaySettings': {
-        setShowEditDisplaySettingsModal(true)
-        break
-      }
-      case 'setFontFamily': {
-        setFontFamily(arg as unknown as string)
-        break
-      }
-      case 'setLabels': {
-        setShowSetLabelsModal(true)
-        break
-      }
-      case 'resetReaderSettings': {
-        updateFontSize(20)
-        setMarginWidth(290)
-        setLineHeight(150)
-        setFontFamily(DEFAULT_FONT)
-        break
-      }
-    }
-  }, [fontSize, setFontSize, lineHeight, fontFamily,
-      setLineHeight, marginWidth, setMarginWidth, setFontFamily])
-  
-  
-  useRegisterActions([
-    {
-      id: 'increaseFont',
-      section: 'Article',
-      name: 'Increase font size',
-      shortcut: ['+'],
-      perform: () => actionHandler('incrementFontSize'),
     },
-    {
-      id: 'decreaseFont',
-      section: 'Article',
-      name: 'Decrease font size',
-      shortcut: ['-'],
-      perform: () => actionHandler('decrementFontSize'),
-    },
-    {
-      id: 'increaseMargin',
-      section: 'Article',
-      name: 'Increase margin width',
-      shortcut: [']'],
-      perform: () => actionHandler('incrementMarginWidth'),
-    },
-    {
-      id: 'decreaseMargin',
-      section: 'Article',
-      name: 'Decrease margin width',
-      shortcut: ['['],
-      perform: () => actionHandler('decrementMarginWidth'),
-    },
-    {
-      id: 'edit_a',
-      section: 'Article',
-      name: 'Edit labels',
-      shortcut: ['l'],
-      perform: () => setShowSetLabelsModal(true),
-    },
-  ], [])
+    [
+      fontSize,
+      setFontSize,
+      lineHeight,
+      fontFamily,
+      setLineHeight,
+      marginWidth,
+      setMarginWidth,
+      setFontFamily,
+    ]
+  )
+
+  useRegisterActions(
+    [
+      {
+        id: 'increaseFont',
+        section: 'Article',
+        name: 'Increase font size',
+        shortcut: ['+'],
+        perform: () => actionHandler('incrementFontSize'),
+      },
+      {
+        id: 'decreaseFont',
+        section: 'Article',
+        name: 'Decrease font size',
+        shortcut: ['-'],
+        perform: () => actionHandler('decrementFontSize'),
+      },
+      {
+        id: 'increaseMargin',
+        section: 'Article',
+        name: 'Increase margin width',
+        shortcut: [']'],
+        perform: () => actionHandler('incrementMarginWidth'),
+      },
+      {
+        id: 'decreaseMargin',
+        section: 'Article',
+        name: 'Decrease margin width',
+        shortcut: ['['],
+        perform: () => actionHandler('decrementMarginWidth'),
+      },
+      {
+        id: 'edit_labels',
+        section: 'Article',
+        name: 'Edit labels',
+        shortcut: ['l'],
+        perform: () => setShowSetLabelsModal(true),
+      },
+      {
+        id: 'display_settings',
+        section: 'Article',
+        name: 'Display settings',
+        shortcut: ['d'],
+        perform: () => setShowEditDisplaySettingsModal(true),
+      },
+    ],
+    [actionHandler]
+  )
 
   return {
     preferencesData,
-    fontSize, lineHeight, marginWidth,
-    setFontSize,  setLineHeight, setMarginWidth,
-    showDeleteConfirmation, showSetLabelsModal, showEditDisplaySettingsModal,
-    setShowSetLabelsModal, setShowEditDisplaySettingsModal, setShowDeleteConfirmation,
-    actionHandler, setFontFamily, fontFamily,
+    fontSize,
+    lineHeight,
+    marginWidth,
+    setFontSize,
+    setLineHeight,
+    setMarginWidth,
+    showDeleteConfirmation,
+    showSetLabelsModal,
+    showEditDisplaySettingsModal,
+    setShowSetLabelsModal,
+    setShowEditDisplaySettingsModal,
+    setShowDeleteConfirmation,
+    actionHandler,
+    setFontFamily,
+    fontFamily,
+    justifyText,
+    setJustifyText,
+    highContrastText,
+    setHighContrastText,
   }
 }
diff --git a/packages/web/lib/hooks/useScrollWatcher.tsx b/packages/web/lib/hooks/useScrollWatcher.tsx
index fb65894e2..19580ed43 100644
--- a/packages/web/lib/hooks/useScrollWatcher.tsx
+++ b/packages/web/lib/hooks/useScrollWatcher.tsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState, useCallback } from 'react'
+import { useRef, useEffect, useState } from 'react'
 
 type ScrollOffset = {
   x: number
@@ -12,10 +12,7 @@ export type ScrollOffsetChangeset = {
 
 type Effect = (offset: ScrollOffsetChangeset) => void
 
-export function useScrollWatcher(
-  effect: Effect,
-  delay: number
-): void {
+export function useScrollWatcher(effect: Effect, delay: number): void {
   const throttleTimeout = useRef<NodeJS.Timeout | undefined>(undefined)
   const [currentOffset, setCurrentOffset] = useState<ScrollOffset>({
     x: 0,
@@ -40,7 +37,6 @@ export function useScrollWatcher(
     }
 
     window.addEventListener('scroll', handleScroll)
-    return () =>
-      window.removeEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
   }, [currentOffset, delay, effect])
 }
diff --git a/packages/web/lib/keyboardShortcuts/navigationShortcuts.ts b/packages/web/lib/keyboardShortcuts/navigationShortcuts.ts
index 0bc1c841f..2c4bd0bab 100644
--- a/packages/web/lib/keyboardShortcuts/navigationShortcuts.ts
+++ b/packages/web/lib/keyboardShortcuts/navigationShortcuts.ts
@@ -183,7 +183,7 @@ export function libraryListCommands(
       actionDescription: 'Move cursor to the previous row',
       shortcutKeyDescription: 'Arrow Up',
       callback: () => actionHandler('moveFocusToPreviousRowItem'),
-    }
+    },
   ]
 }
 
@@ -216,68 +216,3 @@ export function highlightBarKeyboardCommands(
     // },
   ]
 }
-
-type ArticleKeyboardAction =
-  | 'openOriginalArticle'
-  | 'incrementFontSize'
-  | 'decrementFontSize'
-  | 'incrementMarginWidth'
-  | 'decrementMarginWidth'
-  | 'editDisplaySettings'
-  | 'setLabels'
-
-export function articleKeyboardCommands(
-  router: NextRouter | undefined,
-  actionHandler: (action: ArticleKeyboardAction) => void
-): KeyboardCommand[] {
-  return [
-    // {
-    //   shortcutKeys: ['o'],
-    //   actionDescription: 'Open original article page',
-    //   shortcutKeyDescription: 'o',
-    //   callback: () => actionHandler('openOriginalArticle'),
-    // },
-    // {
-    //   shortcutKeys: ['u'],
-    //   actionDescription: 'Back to library',
-    //   shortcutKeyDescription: 'u',
-    //   callback: () => router?.push('/home'),
-    // },
-    // {
-    //   shortcutKeys: ['+'],
-    //   actionDescription: 'Increase font size',
-    //   shortcutKeyDescription: '+',
-    //   callback: () => actionHandler('incrementFontSize'),
-    // },
-    // {
-    //   shortcutKeys: ['-'],
-    //   actionDescription: 'Decrease font size',
-    //   shortcutKeyDescription: '-',
-    //   callback: () => actionHandler('decrementFontSize'),
-    // },
-    // {
-    //   shortcutKeys: [']'],
-    //   actionDescription: 'Increase margin width',
-    //   shortcutKeyDescription: ']',
-    //   callback: () => actionHandler('incrementMarginWidth'),
-    // },
-    // {
-    //   shortcutKeys: ['['],
-    //   actionDescription: 'Decrease margin width',
-    //   shortcutKeyDescription: '[',
-    //   callback: () => actionHandler('decrementMarginWidth'),
-    // },
-    {
-      shortcutKeys: ['d'],
-      actionDescription: 'Edit Display Settings',
-      shortcutKeyDescription: 'd',
-      callback: () => actionHandler('editDisplaySettings'),
-    },
-    // {
-    //   shortcutKeys: ['l'],
-    //   actionDescription: 'Edit labels',
-    //   shortcutKeyDescription: 'l',
-    //   callback: () => actionHandler('setLabels'),
-    // },
-  ]
-}
diff --git a/packages/web/lib/keyboardShortcuts/useKeyboardShortcuts.ts b/packages/web/lib/keyboardShortcuts/useKeyboardShortcuts.ts
index 1834b27c3..35af88f33 100644
--- a/packages/web/lib/keyboardShortcuts/useKeyboardShortcuts.ts
+++ b/packages/web/lib/keyboardShortcuts/useKeyboardShortcuts.ts
@@ -54,8 +54,8 @@ export const useKeyboardShortcuts = (commands: KeyboardCommand[]): void => {
         })
       })
     })
-    
-    KBAR_KEYS.map((key) => currentKeys[key.toLowerCase()] = false)
+
+    KBAR_KEYS.map((key) => (currentKeys[key.toLowerCase()] = false))
     return currentKeys
   }, [commands])
 
@@ -126,7 +126,7 @@ export const useKeyboardShortcuts = (commands: KeyboardCommand[]): void => {
         keydownEvent.preventDefault()
       }
     },
-    [applyCommands, keys]
+    [applyCommands, keys, metaPressed]
   )
 
   const keyupListener = useCallback(
diff --git a/packages/web/lib/networking/fragments/highlightFragment.ts b/packages/web/lib/networking/fragments/highlightFragment.ts
index 47a938a6c..94fdfd341 100644
--- a/packages/web/lib/networking/fragments/highlightFragment.ts
+++ b/packages/web/lib/networking/fragments/highlightFragment.ts
@@ -1,5 +1,5 @@
 import { gql } from 'graphql-request'
-import { Label, labelFragment } from './labelFragment'
+import { Label } from './labelFragment'
 
 export const highlightFragment = gql`
   fragment HighlightFields on Highlight {
diff --git a/packages/web/lib/networking/fragments/labelFragment.ts b/packages/web/lib/networking/fragments/labelFragment.ts
index e15b0dce2..1cf2f88cd 100644
--- a/packages/web/lib/networking/fragments/labelFragment.ts
+++ b/packages/web/lib/networking/fragments/labelFragment.ts
@@ -7,7 +7,7 @@ export type LabelColor =
   | '#7BE4FF'
   | '#CE88EF'
   | '#EF8C43'
-  | 'custom color'
+  | '#000000'
 
 export const labelFragment = gql`
   fragment LabelFields on Label {
diff --git a/packages/web/lib/networking/mutations/updatePageMutation.ts b/packages/web/lib/networking/mutations/updatePageMutation.ts
index 2520fe61e..ee15559c2 100644
--- a/packages/web/lib/networking/mutations/updatePageMutation.ts
+++ b/packages/web/lib/networking/mutations/updatePageMutation.ts
@@ -6,6 +6,8 @@ export type UpdatePageInput = {
   title: string
   byline?: string | undefined
   description: string
+  savedAt?: string
+  publishedAt?: string
 }
 
 export async function updatePageMutation(
@@ -23,6 +25,7 @@ export async function updatePageMutation(
             author
             image
             description
+            savedAt
             publishedAt
           }
         }
diff --git a/packages/web/lib/networking/mutations/uploadFileMutation.ts b/packages/web/lib/networking/mutations/uploadFileMutation.ts
index 17625fc9c..85ce6f020 100644
--- a/packages/web/lib/networking/mutations/uploadFileMutation.ts
+++ b/packages/web/lib/networking/mutations/uploadFileMutation.ts
@@ -1,20 +1,13 @@
 import { gqlFetcher } from '../networkHelpers'
 import { v4 as uuidv4 } from 'uuid'
 
-
 type UploadFileInput = {
   url: string
-  contentType: string 
+  contentType: string
   createPageEntry?: boolean
   clientRequestId?: string
 }
 
-type UploadFileOutput = {
-  jobId?: string
-  url?: string
-  clientRequestId?: string
-}
-
 type UploadFileResponseData = {
   uploadFileRequest?: UploadFileData
   errorCodes?: unknown[]
diff --git a/packages/web/lib/networking/mutations/uploadImportFileMutation.ts b/packages/web/lib/networking/mutations/uploadImportFileMutation.ts
index 46ac248d9..055fe9078 100644
--- a/packages/web/lib/networking/mutations/uploadImportFileMutation.ts
+++ b/packages/web/lib/networking/mutations/uploadImportFileMutation.ts
@@ -1,5 +1,4 @@
 import { gqlFetcher } from '../networkHelpers'
-import { v4 as uuidv4 } from 'uuid'
 
 export enum UploadImportFileType {
   URL_LIST = 'URL_LIST',
diff --git a/packages/web/lib/networking/queries/useGetApiKeysQuery.tsx b/packages/web/lib/networking/queries/useGetApiKeysQuery.tsx
index c1b6b0fa8..24a588fb8 100644
--- a/packages/web/lib/networking/queries/useGetApiKeysQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetApiKeysQuery.tsx
@@ -48,7 +48,7 @@ export function useGetApiKeysQuery(): ApiKeysQueryResponse {
     }
   `
 
-  const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher)
+  const { data, mutate, isValidating } = useSWR(query, publicGqlFetcher)
 
   try {
     if (data) {
diff --git a/packages/web/lib/networking/queries/useGetArticleOriginalHtmlQuery.tsx b/packages/web/lib/networking/queries/useGetArticleOriginalHtmlQuery.tsx
index bfb4c4e14..c12443eec 100644
--- a/packages/web/lib/networking/queries/useGetArticleOriginalHtmlQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetArticleOriginalHtmlQuery.tsx
@@ -1,8 +1,6 @@
 import { gql } from 'graphql-request'
-import useSWRImmutable, { Cache } from 'swr'
+import useSWRImmutable from 'swr'
 import { makeGqlFetcher, RequestContext, ssrFetcher } from '../networkHelpers'
-import { ScopedMutator } from 'swr/dist/types'
-import { LibraryItems } from './useGetLibraryItemsQuery'
 
 type ArticleQueryInput = {
   username?: string
@@ -25,10 +23,7 @@ export type ArticleAttributes = {
 }
 
 const query = gql`
-  query GetArticle(
-    $username: String!
-    $slug: String!
-  ) {
+  query GetArticle($username: String!, $slug: String!) {
     article(username: $username, slug: $slug) {
       ... on ArticleSuccess {
         article {
@@ -58,7 +53,7 @@ export function useGetArticleOriginalHtmlQuery({
   )
 
   const resultData: ArticleData | undefined = data as ArticleData
-  console.log("RESULT", JSON.stringify(data))
+  console.log('RESULT', JSON.stringify(data))
 
   return resultData?.article.article.originalHtml
 }
@@ -67,7 +62,12 @@ export async function originalHtmlQuery(
   context: RequestContext,
   input: ArticleQueryInput
 ): Promise<string | undefined> {
-  const resultData = (await ssrFetcher(context, query, input, false)) as ArticleData
+  const resultData = (await ssrFetcher(
+    context,
+    query,
+    input,
+    false
+  )) as ArticleData
   console.log(JSON.stringify(resultData))
   // if (resultData?.article.article.originalHtml) {
   //   return resultData?.article.article.originalHtml
diff --git a/packages/web/lib/networking/queries/useGetArticleQuery.tsx b/packages/web/lib/networking/queries/useGetArticleQuery.tsx
index f6a361865..6f76b05c6 100644
--- a/packages/web/lib/networking/queries/useGetArticleQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetArticleQuery.tsx
@@ -105,7 +105,7 @@ export function useGetArticleQuery({
     includeFriendsHighlights,
   }
 
-  const { data, error, mutate } = useSWRImmutable(
+  const { data, error } = useSWRImmutable(
     slug ? [query, username, slug, includeFriendsHighlights] : null,
     makeGqlFetcher(variables)
   )
@@ -159,7 +159,7 @@ export const removeItemFromCache = (
   try {
     const mappedCache = cache as Map<string, unknown>
     mappedCache.forEach((value: any, key) => {
-      if (typeof value == 'object' && 'search' in value) {
+      if (value && typeof value == 'object' && 'search' in value) {
         const search = value.search as LibraryItems
         const idx = search.edges.findIndex((edge) => edge.node.id == itemId)
         if (idx > -1) {
diff --git a/packages/web/lib/networking/queries/useGetIntegrationsQuery.tsx b/packages/web/lib/networking/queries/useGetIntegrationsQuery.tsx
index 6c0aafbae..e61ef35ae 100644
--- a/packages/web/lib/networking/queries/useGetIntegrationsQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetIntegrationsQuery.tsx
@@ -11,8 +11,7 @@ export interface Integration {
   updatedAt: Date
 }
 
-export type IntegrationType =
-  | 'READWISE'
+export type IntegrationType = 'READWISE'
 
 interface IntegrationsQueryResponse {
   isValidating: boolean
@@ -49,7 +48,7 @@ export function useGetIntegrationsQuery(): IntegrationsQueryResponse {
     }
   `
 
-  const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher)
+  const { data, mutate, isValidating } = useSWR(query, publicGqlFetcher)
   console.log('integrations data', data)
 
   try {
diff --git a/packages/web/lib/networking/queries/useGetLabelsQuery.tsx b/packages/web/lib/networking/queries/useGetLabelsQuery.tsx
index 211c53178..a4af02c2c 100644
--- a/packages/web/lib/networking/queries/useGetLabelsQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetLabelsQuery.tsx
@@ -34,7 +34,7 @@ export function useGetLabelsQuery(): LabelsQueryResponse {
     ${labelFragment}
   `
 
-  const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher)
+  const { data, mutate, isValidating } = useSWR(query, publicGqlFetcher)
 
   try {
     if (data) {
diff --git a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx
index 57d1635e9..0d4d7d686 100644
--- a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx
@@ -9,6 +9,7 @@ import { unsubscribeMutation } from '../mutations/unsubscribeMutation'
 import { articleReadingProgressMutation } from '../mutations/articleReadingProgressMutation'
 import { Label } from './../fragments/labelFragment'
 import { showErrorToast, showSuccessToast } from '../../toastHelpers'
+import { Highlight, highlightFragment } from '../fragments/highlightFragment'
 
 export type LibraryItemsQueryInput = {
   limit: number
@@ -82,7 +83,10 @@ export type LibraryItemNode = {
   siteName?: string
   subscription?: string
   readAt?: string
+  savedAt?: string
+  wordsCount?: number
   recommendations?: Recommendation[]
+  highlights?: Highlight[]
 }
 
 export type Recommendation = {
@@ -166,6 +170,8 @@ export function useGetLibraryItemsQuery({
               siteName
               subscription
               readAt
+              savedAt
+              wordsCount
               recommendations {
                 id
                 name
@@ -178,6 +184,9 @@ export function useGetLibraryItemsQuery({
                 }
                 recommendedAt
               }
+              highlights {
+                ...HighlightFields
+              }
             }
           }
           pageInfo {
@@ -193,6 +202,7 @@ export function useGetLibraryItemsQuery({
         }
       }
     }
+    ${highlightFragment}
   `
 
   const variables = {
diff --git a/packages/web/lib/networking/queries/useGetNewsletterEmailsQuery.tsx b/packages/web/lib/networking/queries/useGetNewsletterEmailsQuery.tsx
index a8c57cdd4..f15415193 100644
--- a/packages/web/lib/networking/queries/useGetNewsletterEmailsQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetNewsletterEmailsQuery.tsx
@@ -45,7 +45,7 @@ export function useGetNewsletterEmailsQuery(): NewsletterEmailsQueryResponse {
     }
   `
 
-  const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher)
+  const { data, mutate, isValidating } = useSWR(query, publicGqlFetcher)
 
   try {
     if (data) {
diff --git a/packages/web/lib/networking/queries/useGetRulesQuery.tsx b/packages/web/lib/networking/queries/useGetRulesQuery.tsx
index cb711fea1..c193196b0 100644
--- a/packages/web/lib/networking/queries/useGetRulesQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetRulesQuery.tsx
@@ -63,24 +63,13 @@ export function useGetRulesQuery(): RulesQueryResponse {
     }
   `
 
-  const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher)
+  const { data, mutate, isValidating } = useSWR(query, publicGqlFetcher)
 
   try {
     if (data) {
       const result = data as RulesQueryResponseData
       const rules = result.rules.rules as Rule[]
 
-      const actions: RuleAction[] = [
-        {
-          type: RuleActionType.SendNotification,
-          params: [] as string[],
-        },
-        {
-          type: RuleActionType.AddLabel,
-          params: ['2dfd9ce2-cc9f-11ec-b535-3be2782c2107'],
-        },
-      ]
-
       return {
         isValidating,
         rules: rules ?? [],
diff --git a/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx b/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx
index bacb0e5bb..051b20d70 100644
--- a/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx
@@ -56,7 +56,7 @@ export function useGetSubscriptionsQuery(): SubscriptionsQueryResponse {
     }
   `
 
-  const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher)
+  const { data, mutate, isValidating } = useSWR(query, publicGqlFetcher)
 
   try {
     if (data) {
diff --git a/packages/web/lib/networking/queries/useGetWebhooksQuery.tsx b/packages/web/lib/networking/queries/useGetWebhooksQuery.tsx
index dedd16ceb..0ac5c802f 100644
--- a/packages/web/lib/networking/queries/useGetWebhooksQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetWebhooksQuery.tsx
@@ -58,7 +58,7 @@ export function useGetWebhooksQuery(): WebhooksQueryResponse {
     }
   `
 
-  const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher)
+  const { data, mutate, isValidating } = useSWR(query, publicGqlFetcher)
   console.log('webhooks data', data)
 
   try {
diff --git a/packages/web/lib/themeUpdater.tsx b/packages/web/lib/themeUpdater.tsx
index 76e454946..24668b03b 100644
--- a/packages/web/lib/themeUpdater.tsx
+++ b/packages/web/lib/themeUpdater.tsx
@@ -3,8 +3,6 @@ import {
   lighterTheme,
   darkTheme,
   darkerTheme,
-  sepiaTheme,
-  charcoalTheme,
 } from '../components/tokens/stitches.config'
 import { userPersonalizationMutation } from './networking/mutations/userPersonalizationMutation'
 
@@ -57,7 +55,7 @@ export function currentThemeName(): string {
   }
 }
 
-function currentTheme(): ThemeId | undefined {
+export function currentTheme(): ThemeId | undefined {
   if (typeof window === 'undefined') {
     return undefined
   }
diff --git a/packages/web/next.config.js b/packages/web/next.config.js
index 16ae40aa3..8d3c2378a 100644
--- a/packages/web/next.config.js
+++ b/packages/web/next.config.js
@@ -1,4 +1,3 @@
-
 const moduleExports = {
   images: {
     domains: [
@@ -148,4 +147,7 @@ const moduleExports = {
   },
 }
 
-module.exports = moduleExports
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+})
+module.exports = withBundleAnalyzer(moduleExports)
diff --git a/packages/web/package.json b/packages/web/package.json
index 4b821c258..aca49392a 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -26,6 +26,8 @@
     "@radix-ui/react-popover": "^0.1.1",
     "@radix-ui/react-progress": "^1.0.1",
     "@radix-ui/react-separator": "^0.1.0",
+    "@radix-ui/react-slider": "^1.1.0",
+    "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^0.1.7",
     "@segment/analytics-next": "^1.33.5",
     "@sentry/nextjs": "^6.16.1",
@@ -34,6 +36,7 @@
     "axios": "^1.2.0",
     "color2k": "^2.0.0",
     "cookie": "^0.5.0",
+    "dayjs": "^1.11.7",
     "diff-match-patch": "^1.0.5",
     "downshift": "^6.1.9",
     "graphql-request": "^3.6.1",
@@ -43,7 +46,6 @@
     "phosphor-react": "^1.4.0",
     "pspdfkit": "^2022.2.3",
     "react": "^17.0.2",
-    "react-apple-login": "^1.1.3",
     "react-colorful": "^5.5.1",
     "react-dom": "^17.0.2",
     "react-dropzone": "^14.2.3",
@@ -59,6 +61,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
+    "@next/bundle-analyzer": "^13.2.1",
     "@storybook/addon-actions": "^6.4.22",
     "@storybook/addon-essentials": "^6.4.22",
     "@storybook/addon-interactions": "^6.4.22",
diff --git a/packages/web/pages/404.tsx b/packages/web/pages/404.tsx
index e2cc748ce..80e44ab9d 100644
--- a/packages/web/pages/404.tsx
+++ b/packages/web/pages/404.tsx
@@ -1,5 +1,4 @@
 import Head from 'next/head'
-import { useRouter } from 'next/router'
 import { ErrorLayout } from '../components/templates/ErrorLayout'
 import { SettingsLayout } from '../components/templates/SettingsLayout'
 
@@ -10,7 +9,7 @@ export default function Custom404(): JSX.Element {
         <title>Page Not Found</title>
       </Head>
       <SettingsLayout title="Page could not be found">
-       <ErrorLayout statusCode={404} message="This page could not be found." />
+        <ErrorLayout statusCode={404} message="This page could not be found." />
       </SettingsLayout>
     </>
   )
diff --git a/packages/web/pages/[username]/[slug]/highlights/[highlightId].tsx b/packages/web/pages/[username]/[slug]/highlights/[highlightId].tsx
deleted file mode 100644
index 897b5389b..000000000
--- a/packages/web/pages/[username]/[slug]/highlights/[highlightId].tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { GetServerSideProps } from 'next'
-import { captureException, flush } from '@sentry/nextjs'
-import { ArticleHighlights } from '../../../../components/templates/ArticleHighlights'
-import { highlightsBaseURL, webBaseURL } from '../../../../lib/appConfig'
-import objectToHash from '../../../../lib/highlights/objectToHash'
-import {
-  PublicArticleAttributes,
-  publicArticleQuery,
-} from '../../../../lib/networking/queries/useGetPublicArticleQuery'
-import { useEffect } from 'react'
-
-type PublicHighlightPageProps = {
-  publicArticle: PublicArticleAttributes
-  showAllHighlights: boolean
-  selectedHighlightId?: string
-  previewImagePath?: string
-}
-
-export default function PublicHighlightPage(
-  props: PublicHighlightPageProps
-): JSX.Element {
-  useEffect(() => {
-    window.analytics?.track('public_highlight_read', {
-      link: props.publicArticle.id,
-      slug: props.publicArticle.slug,
-      url: props.publicArticle.url,
-    })
-  }, [props.publicArticle.url])
-
-  return (
-    <>
-      <ArticleHighlights
-        publicArticle={props.publicArticle}
-        showAllHighlights={false}
-        selectedHighlightId={props.selectedHighlightId}
-        previewImagePath={props.previewImagePath}
-      />
-    </>
-  )
-}
-
-export const getServerSideProps: GetServerSideProps<
-  PublicHighlightPageProps
-> = async (ctx) => {
-  const slug = ctx.query.slug as string
-  const username = ctx.query.username as string
-  const selectedHighlightId = ctx.query.highlightId as string
-
-  try {
-    const publicArticle = await publicArticleQuery(ctx, { username, slug })
-
-    if (publicArticle) {
-      const selectedHighlight = await publicArticle.highlights.find(
-        (h) => h.shortId === selectedHighlightId
-      )
-
-      if (selectedHighlight) {
-        const previewImageMeta = {
-          highlightsCount: publicArticle.highlights.length,
-          annotationsCount: publicArticle.highlights.filter(
-            (h) => !!h.annotation
-          ).length,
-          quote: selectedHighlight.quote,
-          prefix: selectedHighlight.prefix,
-          suffix: selectedHighlight.suffix,
-          annotation: selectedHighlight.annotation,
-        }
-        const previewImageHash = objectToHash(previewImageMeta)
-        const previewServiceUrl = `${webBaseURL}/${username}/${slug}/highlights/${selectedHighlightId}/preview?pih=${previewImageHash}`
-        const previewImagePath = `${highlightsBaseURL}/preview?url=${encodeURIComponent(
-          previewServiceUrl
-        )}`
-
-        return {
-          props: {
-            username,
-            publicArticle,
-            selectedHighlightId,
-            previewImagePath,
-            showAllHighlights: false,
-          },
-        }
-      } else {
-        throw new Error(
-          'public article highlights query failed - no highlights'
-        )
-      }
-    } else {
-      throw new Error('public article highlights query failed - no article')
-    }
-  } catch (error) {
-    captureException(error)
-    // Flushing before returning is necessary if deploying to Vercel, see
-    // https://vercel.com/docs/platform/limits#streaming-responses
-    await flush(2000)
-    return { notFound: true }
-  }
-}
diff --git a/packages/web/pages/[username]/[slug]/highlights/[highlightId]/preview.tsx b/packages/web/pages/[username]/[slug]/highlights/[highlightId]/preview.tsx
deleted file mode 100644
index 40ab40f59..000000000
--- a/packages/web/pages/[username]/[slug]/highlights/[highlightId]/preview.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import { GetServerSideProps } from 'next'
-import Head from 'next/head'
-import { useRouter } from 'next/router'
-import { useEffect, useMemo } from 'react'
-import {
-  Box,
-  SpanBox,
-} from '../../../../../components/elements/LayoutPrimitives'
-import {
-  HighlightFooter,
-  PublicHighlightView,
-} from '../../../../../components/patterns/HighlightView'
-import objectToHash from '../../../../../lib/highlights/objectToHash'
-import {
-  PublicArticleAttributes,
-  publicArticleQuery,
-} from '../../../../../lib/networking/queries/useGetPublicArticleQuery'
-import { captureException, flush } from '@sentry/nextjs'
-
-type PublicHighlightPageProps = {
-  publicArticle: PublicArticleAttributes
-  showAllHighlights: boolean
-  selectedHighlightId?: string
-  previewImageFileName?: string
-}
-
-export default function PublicHighlightPage(
-  props: PublicHighlightPageProps
-): JSX.Element {
-  const router = useRouter()
-  const selectedHighlight = useMemo(() => {
-    if (!props.selectedHighlightId) {
-      return null
-    }
-    return props.publicArticle.highlights.find(
-      (h) => h.shortId === props.selectedHighlightId
-    )
-  }, [props.selectedHighlightId, props.publicArticle])
-
-  const articleSite = useMemo(() => {
-    try {
-      const url = new URL(props.publicArticle.url)
-      return url.hostname
-    } catch (e) {
-      console.log('error ', e)
-      return ''
-    }
-  }, [props.publicArticle.url])
-
-  // Adjusting the aspect ratio accordingly to the query parameter
-  useEffect(() => {
-    if (router.isReady && router.query.adjustAspectRatio) {
-      const highlightContainer = document.getElementById(
-        'selected_highlight_wrapper'
-      )
-      const footer = document.getElementById('selected_highlight_footer')
-      if (!highlightContainer || !footer) return
-
-      const getTextY = (): number => footer.getBoundingClientRect().bottom
-      const getContainerY = (): number =>
-        highlightContainer.getBoundingClientRect().bottom
-
-      let widthPercent = 100
-
-      // We are gradually decreasing the width of the container until the text bottom spacing is reduced in the container
-      while (getContainerY() - getTextY() > 25) {
-        widthPercent = widthPercent - 2
-        highlightContainer.style.width = widthPercent + '%'
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  return (
-    <>
-      <Head>
-        {props.previewImageFileName && (
-          <meta
-            name="omnivore:preview_image_destination"
-            content={encodeURIComponent(props.previewImageFileName || '')}
-          />
-        )}
-        {props.previewImageFileName && (
-          <meta
-            name="omnivore:preview_image_selector"
-            content={encodeURIComponent('#selected_highlight_wrapper')}
-          />
-        )}
-      </Head>
-      {selectedHighlight && (
-        <Box
-          id="selected_highlight_wrapper"
-          css={{
-            aspectRatio: '1.91',
-            maxWidth: '100%',
-            padding: '20px',
-          }}
-        >
-          <PublicHighlightView
-            key={selectedHighlight.id}
-            highlight={selectedHighlight}
-            title={props.publicArticle.title}
-            author={props.publicArticle.author}
-          />
-
-          <SpanBox id="selected_highlight_footer">
-            <HighlightFooter
-              title={props.publicArticle.title}
-              author={props.publicArticle.author}
-              site={articleSite}
-              fontSize="16px"
-            />
-          </SpanBox>
-        </Box>
-      )}
-    </>
-  )
-}
-
-export const getServerSideProps: GetServerSideProps<
-  PublicHighlightPageProps
-> = async (ctx) => {
-  const slug = ctx.query.slug as string
-  const username = ctx.query.username as string
-  const selectedHighlightId = ctx.query.highlightId as string
-
-  try {
-    const publicArticle = await publicArticleQuery(ctx, { username, slug })
-
-    if (publicArticle) {
-      const selectedHighlight = await publicArticle.highlights.find(
-        (h) => h.shortId === selectedHighlightId
-      )
-      if (!selectedHighlight) {
-        return { notFound: true }
-      }
-
-      const previewImageMeta = {
-        highlightsCount: publicArticle.highlights.length,
-        annotationsCount: publicArticle.highlights.filter((h) => !!h.annotation)
-          .length,
-        quote: selectedHighlight?.quote,
-        prefix: selectedHighlight?.prefix,
-        suffix: selectedHighlight?.suffix,
-        annotation: selectedHighlight?.annotation,
-      }
-      const previewImageHash = objectToHash(previewImageMeta)
-      const previewImageFileName = `${username}/${slug}/highlights/${selectedHighlightId}/preview_${previewImageHash}.png`
-
-      return {
-        props: {
-          username,
-          publicArticle,
-          selectedHighlightId,
-          previewImageFileName,
-          showAllHighlights: false,
-        },
-      }
-    } else {
-      throw new Error('public article query failed')
-    }
-  } catch (error) {
-    captureException(error)
-    // Flushing before returning is necessary if deploying to Vercel, see
-    // https://vercel.com/docs/platform/limits#streaming-responses
-    await flush(2000)
-    return { notFound: true }
-  }
-}
diff --git a/packages/web/pages/[username]/[slug]/highlights/index.tsx b/packages/web/pages/[username]/[slug]/highlights/index.tsx
deleted file mode 100644
index 4f15d2203..000000000
--- a/packages/web/pages/[username]/[slug]/highlights/index.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { GetServerSideProps } from 'next'
-import { ArticleHighlights } from '../../../../components/templates/ArticleHighlights'
-import {
-  PublicArticleAttributes,
-  publicArticleQuery,
-} from '../../../../lib/networking/queries/useGetPublicArticleQuery'
-import { captureException, flush } from '@sentry/nextjs'
-import { useEffect } from 'react'
-
-type PublicHighlightsPageProps = {
-  publicArticle: PublicArticleAttributes
-}
-
-export default function PublicHighlightsPage(
-  props: PublicHighlightsPageProps
-): JSX.Element {
-
-  useEffect(() => {
-    window.analytics?.track('public_link_read', {
-      link: props.publicArticle.id,
-      slug: props.publicArticle.slug,
-      url: props.publicArticle.url
-    })
-  }, [props.publicArticle.url])
-
-  return (
-    <ArticleHighlights
-      showAllHighlights={true}
-      publicArticle={props.publicArticle}
-    />
-  )
-}
-
-export const getServerSideProps: GetServerSideProps<
-  PublicHighlightsPageProps
-> = async (ctx) => {
-  const slug = ctx.query.slug as string
-  const username = ctx.query.username as string
-
-  try {
-    const publicArticle = await publicArticleQuery(ctx, { username, slug })
-
-    if (publicArticle) {
-      if (publicArticle.highlights.length === 0) {
-        return {
-          redirect: {
-            destination: publicArticle.url,
-            permanent: false,
-          },
-        }
-      }
-
-      return {
-        props: {
-          username,
-          publicArticle,
-        },
-      }
-    } else {
-      throw new Error('article highlights request failed')
-    }
-  } catch (error) {
-    captureException(error)
-    // Flushing before returning is necessary if deploying to Vercel, see
-    // https://vercel.com/docs/platform/limits#streaming-responses
-    await flush(2000)
-    return { notFound: true }
-  }
-}
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index eb9647df4..af9c9b364 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -9,12 +9,9 @@ import { useRouter } from 'next/router'
 import { VStack } from './../../../components/elements/LayoutPrimitives'
 import { ArticleContainer } from './../../../components/templates/article/ArticleContainer'
 import { PdfArticleContainerProps } from './../../../components/templates/article/PdfArticleContainer'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
-import {
-  articleKeyboardCommands,
-  navigationCommands,
-} from '../../../lib/keyboardShortcuts/navigationShortcuts'
+import { navigationCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
 import dynamic from 'next/dynamic'
 import { webBaseURL } from '../../../lib/appConfig'
 import { Toaster } from 'react-hot-toast'
@@ -24,7 +21,6 @@ import { mergeHighlightMutation } from '../../../lib/networking/mutations/mergeH
 import { articleReadingProgressMutation } from '../../../lib/networking/mutations/articleReadingProgressMutation'
 import { updateHighlightMutation } from '../../../lib/networking/mutations/updateHighlightMutation'
 import Script from 'next/script'
-import { theme } from '../../../components/tokens/stitches.config'
 import { ArticleActionsMenu } from '../../../components/templates/article/ArticleActionsMenu'
 import { setLinkArchivedMutation } from '../../../lib/networking/mutations/setLinkArchivedMutation'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
@@ -38,6 +34,10 @@ import { useRegisterActions } from 'kbar'
 import { deleteLinkMutation } from '../../../lib/networking/mutations/deleteLinkMutation'
 import { ConfirmationModal } from '../../../components/patterns/ConfirmationModal'
 import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation'
+import { ReaderHeader } from '../../../components/templates/reader/ReaderHeader'
+import { EditArticleModal } from '../../../components/templates/homeFeed/EditItemModals'
+import { VerticalArticleActionsMenu } from '../../../components/templates/article/VerticalArticleActions'
+import { HeaderSpacer } from '../../../components/templates/homeFeed/HeaderSpacer'
 
 const PdfArticleContainerNoSSR = dynamic<PdfArticleContainerProps>(
   () => import('./../../../components/templates/article/PdfArticleContainer'),
@@ -49,6 +49,8 @@ export default function Home(): JSX.Element {
   const { cache, mutate } = useSWRConfig()
   const scrollRef = useRef<HTMLDivElement | null>(null)
   const { slug } = router.query
+
+  const [showEditModal, setShowEditModal] = useState(false)
   const [showHighlightsModal, setShowHighlightsModal] = useState(false)
   const { viewerData } = useGetViewerQuery()
   const readerSettings = useReaderSettings()
@@ -132,6 +134,9 @@ export default function Home(): JSX.Element {
         case 'showHighlights':
           setShowHighlightsModal(true)
           break
+        case 'showEditModal':
+          setShowEditModal(true)
+          break
         default:
           readerSettings.actionHandler(action, arg)
           break
@@ -161,12 +166,6 @@ export default function Home(): JSX.Element {
     }
   }, [actionHandler])
 
-  useKeyboardShortcuts(
-    articleKeyboardCommands(router, async (action) => {
-      actionHandler(action)
-    })
-  )
-
   useEffect(() => {
     if (article && viewerData?.me) {
       window.analytics?.track('link_read', {
@@ -191,7 +190,7 @@ export default function Home(): JSX.Element {
       })
       router.push(`/home`)
     }
-  }, [article])
+  }, [article, cache, mutate, router])
 
   useRegisterActions(
     [
@@ -209,7 +208,15 @@ export default function Home(): JSX.Element {
         section: 'Article',
         name: 'Return to library',
         shortcut: ['u'],
-        perform: () => router.push(`/home`),
+        perform: () => {
+          const query = window.sessionStorage.getItem('q')
+          if (query) {
+            router.push(`/home?${query}`)
+            return
+          } else {
+            router.push(`/home`)
+          }
+        },
       },
       {
         id: 'archive',
@@ -256,6 +263,13 @@ export default function Home(): JSX.Element {
           setShowHighlightsModal(true)
         },
       },
+      {
+        id: 'edit_title',
+        section: 'Article',
+        name: 'Edit title and description',
+        shortcut: ['i'],
+        perform: () => setShowEditModal(true),
+      },
     ],
     []
   )
@@ -291,13 +305,28 @@ export default function Home(): JSX.Element {
       />
       <Toaster />
 
+      <ReaderHeader
+        showDisplaySettingsModal={
+          readerSettings.setShowEditDisplaySettingsModal
+        }
+        alwaysDisplayToolbar={article?.contentReader == 'PDF'}
+      >
+        <VerticalArticleActionsMenu
+          article={article}
+          layout="top"
+          showReaderDisplaySettings={article?.contentReader != 'PDF'}
+          articleActionHandler={actionHandler}
+        />
+      </ReaderHeader>
+
+      {article?.contentReader == 'PDF' && <HeaderSpacer />}
+
       <VStack
         distribution="between"
         alignment="center"
         css={{
           position: 'fixed',
           flexDirection: 'row-reverse',
-          top: '-120px',
           left: 8,
           height: '100%',
           width: '35px',
@@ -325,13 +354,13 @@ export default function Home(): JSX.Element {
       ) : (
         <VStack
           alignment="center"
-          distribution="center"
+          distribution="start"
           ref={scrollRef}
           className="disable-webkit-callout"
           css={{
-            '@smDown': {
-              background: theme.colors.grayBg.toString(),
-            },
+            width: '100%',
+            height: '100%',
+            background: '$thBackground',
           }}
         >
           {article && viewerData?.me ? (
@@ -347,6 +376,8 @@ export default function Home(): JSX.Element {
               labels={labels}
               showHighlightsModal={showHighlightsModal}
               setShowHighlightsModal={setShowHighlightsModal}
+              justifyText={readerSettings.justifyText ?? undefined}
+              highContrastText={readerSettings.highContrastText ?? undefined}
               articleMutations={{
                 createHighlightMutation,
                 deleteHighlightMutation,
@@ -383,10 +414,10 @@ export default function Home(): JSX.Element {
       {readerSettings.showEditDisplaySettingsModal && (
         <DisplaySettingsModal
           centerX={true}
-          articleActionHandler={actionHandler}
-          onOpenChange={() =>
+          readerSettings={readerSettings}
+          onOpenChange={() => {
             readerSettings.setShowEditDisplaySettingsModal(false)
-          }
+          }}
         />
       )}
       {readerSettings.showDeleteConfirmation && (
@@ -396,6 +427,19 @@ export default function Home(): JSX.Element {
           onOpenChange={() => readerSettings.setShowDeleteConfirmation(false)}
         />
       )}
+      {article && showEditModal && (
+        <EditArticleModal
+          article={article}
+          onOpenChange={() => setShowEditModal(false)}
+          updateArticle={(title, author, description, savedAt, publishedAt) => {
+            article.title = title
+            article.author = author
+            article.description = description
+            article.savedAt = savedAt
+            article.publishedAt = publishedAt
+          }}
+        />
+      )}
     </PrimaryLayout>
   )
 }
diff --git a/packages/web/pages/[username]/links/[id].tsx b/packages/web/pages/[username]/links/[id].tsx
index 90ef594c8..3b7ca4109 100644
--- a/packages/web/pages/[username]/links/[id].tsx
+++ b/packages/web/pages/[username]/links/[id].tsx
@@ -32,7 +32,7 @@ export default function ArticleSavingRequestPage(): JSX.Element {
       headerToolbarControl={
         <ArticleActionsMenu
           article={undefined}
-          layout='top'
+          layout="top"
           showReaderDisplaySettings={true}
           articleActionHandler={readerSettings.actionHandler}
         />
@@ -44,42 +44,45 @@ export default function ArticleSavingRequestPage(): JSX.Element {
       }}
     >
       <TopBarProgress />
-      <VStack distribution="between" alignment="center" css={{
-        position: 'fixed',
-        flexDirection: 'row-reverse',
-        top: '-120px',
-        left: 8,
-        height: '100%',
-        width: '35px',
-        '@lgDown': {
-          display: 'none',
-        },
+      <VStack
+        distribution="between"
+        alignment="center"
+        css={{
+          position: 'fixed',
+          flexDirection: 'row-reverse',
+          top: '-120px',
+          left: 8,
+          height: '100%',
+          width: '35px',
+          '@lgDown': {
+            display: 'none',
+          },
         }}
       >
         <ArticleActionsMenu
           article={undefined}
-          layout='side'
+          layout="side"
           showReaderDisplaySettings={true}
           articleActionHandler={readerSettings.actionHandler}
         />
       </VStack>
-        <VStack
-          alignment="center"
-          distribution="center"
-          className="disable-webkit-callout"
-          css={{
-            '@smDown': {
-              background: theme.colors.grayBg.toString(),
-            }
-          }}
+      <VStack
+        alignment="center"
+        distribution="center"
+        className="disable-webkit-callout"
+        css={{
+          '@smDown': {
+            background: theme.colors.grayBg.toString(),
+          },
+        }}
+      >
+        <SkeletonArticleContainer
+          margin={readerSettings.marginWidth}
+          fontSize={readerSettings.fontSize}
+          lineHeight={readerSettings.lineHeight}
         >
-          <SkeletonArticleContainer
-            margin={readerSettings.marginWidth}
-            fontSize={readerSettings.fontSize}
-            lineHeight={readerSettings.lineHeight}
-          >
-            {articleId ? <PrimaryContent articleId={articleId} /> : <Loader />}
-          </SkeletonArticleContainer>
+          {articleId ? <PrimaryContent articleId={articleId} /> : <Loader />}
+        </SkeletonArticleContainer>
       </VStack>
     </PrimaryLayout>
   )
@@ -121,7 +124,5 @@ function PrimaryContent(props: PrimaryContentProps): JSX.Element {
     router.replace(successRedirectPath)
   }
 
-  return (
-    <Loader />
-  )
+  return <Loader />
 }
diff --git a/packages/web/pages/_app.tsx b/packages/web/pages/_app.tsx
index 7daafb7dc..ad224caca 100644
--- a/packages/web/pages/_app.tsx
+++ b/packages/web/pages/_app.tsx
@@ -19,13 +19,17 @@ import {
   KBarSearch,
   Priority,
 } from 'kbar'
-import { animatorStyle, KBarResultsComponents, searchStyle } from '../components/elements/KBar'
+import {
+  animatorStyle,
+  KBarResultsComponents,
+  searchStyle,
+} from '../components/elements/KBar'
 import { darkenTheme, lightenTheme } from '../lib/themeUpdater'
 
 TopBarProgress.config({
   barColors: {
-    "0": '#FFD234',
-    "1.0": '#FFD234',
+    '0': '#FFD234',
+    '1.0': '#FFD234',
   },
   shadowBlur: 0,
   barThickness: 2,
@@ -99,7 +103,7 @@ function OmnivoreApp({ Component, pageProps }: AppProps): JSX.Element {
   return (
     <KBarProvider actions={generateActions(router)}>
       <KBarPortal>
-        <KBarPositioner>
+        <KBarPositioner style={{ zIndex: 100 }}>
           <KBarAnimator style={animatorStyle}>
             <KBarSearch style={searchStyle} />
             <KBarResultsComponents />
diff --git a/packages/web/pages/_document.tsx b/packages/web/pages/_document.tsx
index 927d240dc..e5c96fe8b 100644
--- a/packages/web/pages/_document.tsx
+++ b/packages/web/pages/_document.tsx
@@ -53,25 +53,61 @@ export default class Document extends NextDocument {
           <script async src="/static/scripts/inject-sw.js" />
 
           {/* prefetch (not preload) fonts that will be used by the reader */}
-          <link rel="prefetch" href='/static/fonts/Lora/Lora-Regular.ttf' />
-          <link rel="prefetch" href='/static/fonts/Lora/Lora-Bold.ttf' />
-          <link rel="prefetch" href='/static/fonts/Lora/Lora-Italic.ttf' />
-          <link rel="prefetch" href='/static/fonts/Merriweather/Merriweather-Regular.ttf' />
-          <link rel="prefetch" href='/static/fonts/Merriweather/Merriweather-Bold.ttf' />
-          <link rel="prefetch" href='/static/fonts/Merriweather/Merriweather-Italic.ttf' />
-          <link rel="prefetch" href='/static/fonts/Open_Sans/OpenSans-Regular.ttf' />
-          <link rel="prefetch" href='/static/fonts/Open_Sans/OpenSans-Bold.ttf' />
-          <link rel="prefetch" href='/static/fonts/Open_Sans/OpenSans-Italic.ttf' />
-          <link rel="prefetch" href='/static/fonts/Roboto/Roboto-Regular.ttf' />
-          <link rel="prefetch" href='/static/fonts/Roboto/Roboto-Bold.ttf' />
-          <link rel="prefetch" href='/static/fonts/Roboto/Roboto-Italic.ttf' />
-          <link rel="prefetch" href='/static/fonts/Crimson_Text/CrimsonText-Regular.ttf' />
-          <link rel="prefetch" href='/static/fonts/Crimson_Text/CrimsonText-Bold.ttf' />
-          <link rel="prefetch" href='/static/fonts/Crimson_Text/CrimsonText-Italic.ttf' />
-          <link rel="prefetch" href='/static/fonts/Source_Serif_Pro/SourceSerifPro-Regular.ttf' />
-          <link rel="prefetch" href='/static/fonts/Source_Serif_Pro/SourceSerifPro-Bold.ttf' />
-          <link rel="prefetch" href='/static/fonts/Source_Serif_Pro/SourceSerifPro-Italic.ttf' />
-          <link rel="prefetch" href='/static/fonts/SFMono/SFMonoRegular.otf' />
+          <link rel="prefetch" href="/static/fonts/Lora/Lora-Regular.ttf" />
+          <link rel="prefetch" href="/static/fonts/Lora/Lora-Bold.ttf" />
+          <link rel="prefetch" href="/static/fonts/Lora/Lora-Italic.ttf" />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Merriweather/Merriweather-Regular.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Merriweather/Merriweather-Bold.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Merriweather/Merriweather-Italic.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Open_Sans/OpenSans-Regular.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Open_Sans/OpenSans-Bold.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Open_Sans/OpenSans-Italic.ttf"
+          />
+          <link rel="prefetch" href="/static/fonts/Roboto/Roboto-Regular.ttf" />
+          <link rel="prefetch" href="/static/fonts/Roboto/Roboto-Bold.ttf" />
+          <link rel="prefetch" href="/static/fonts/Roboto/Roboto-Italic.ttf" />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Crimson_Text/CrimsonText-Regular.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Crimson_Text/CrimsonText-Bold.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Crimson_Text/CrimsonText-Italic.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Source_Serif_Pro/SourceSerifPro-Regular.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Source_Serif_Pro/SourceSerifPro-Bold.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Source_Serif_Pro/SourceSerifPro-Italic.ttf"
+          />
+          <link rel="prefetch" href="/static/fonts/SFMono/SFMonoRegular.otf" />
         </Head>
         <body>
           <Main />
diff --git a/packages/web/pages/about.tsx b/packages/web/pages/about.tsx
index 534b75998..0373cac24 100644
--- a/packages/web/pages/about.tsx
+++ b/packages/web/pages/about.tsx
@@ -1,44 +1,6 @@
-import { VStack, Box } from './../components/elements/LayoutPrimitives'
-import {
-  LandingSectionsContainer,
-  GetStartedButton,
-} from '../components/templates/landing/LandingSectionsContainer'
-import { LandingHeader } from '../components/templates/landing/LandingHeader'
-import { LandingFooter } from '../components/templates/landing/LandingFooter'
 import { PageMetaData } from '../components/patterns/PageMetaData'
 import { About } from '../components/templates/About'
 
-const containerStyles = {
-  alignSelf: 'center',
-  marginTop: 80,
-  maxWidth: 960,
-  px: '2vw',
-  '@md': {
-    px: '6vw',
-  },
-  '@xl': {
-    px: '120px',
-  },
-}
-
-const headingStyles = {
-  fontWeight: '700',
-  color: '#3D3D3D',
-  fontSize: 45,
-  lineHeight: '53px',
-  padding: '10px',
-  paddingBottom: '0px',
-  textAlign: 'center',
-}
-
-const subHeadingStyles = {
-  color: 'rgb(125, 125, 125)',
-  padding: '10px',
-  textAlign: 'center',
-  width: '100%',
-  fontWeight: '600',
-}
-
 export default function LandingPage(): JSX.Element {
   return (
     <>
diff --git a/packages/web/pages/app/[username]/link-request/[id].tsx b/packages/web/pages/app/[username]/link-request/[id].tsx
index ff5fb8089..74ba9279c 100644
--- a/packages/web/pages/app/[username]/link-request/[id].tsx
+++ b/packages/web/pages/app/[username]/link-request/[id].tsx
@@ -7,8 +7,6 @@ import { useSWRConfig } from 'swr'
 import { cacheArticle } from '../../../../lib/networking/queries/useGetArticleQuery'
 import { PrimaryLayout } from '../../../../components/templates/PrimaryLayout'
 import { applyStoredTheme } from '../../../../lib/themeUpdater'
-import { StyledText } from '../../../../components/elements/StyledText'
-import { theme } from '../../../../components/tokens/stitches.config'
 
 export default function LinkRequestPage(): JSX.Element {
   applyStoredTheme(false) // false to skip server sync
@@ -32,7 +30,9 @@ export default function LinkRequestPage(): JSX.Element {
       hideHeader={true}
       pageTestId={router.pathname}
     >
-      <Box css={{ bg: '$grayBase', height: '100vh', width: '100vw', px: '16px' }}>
+      <Box
+        css={{ bg: '$grayBase', height: '100vh', width: '100vw', px: '16px' }}
+      >
         {requestID && username ? (
           <PrimaryContent requestID={requestID} username={username} />
         ) : (
@@ -44,9 +44,7 @@ export default function LinkRequestPage(): JSX.Element {
 }
 
 function Loader(): JSX.Element {
-  return (
-    <Box />
-  )
+  return <Box />
 }
 
 type PrimaryContentProps = {
diff --git a/packages/web/pages/auth/confirm-email/[token].tsx b/packages/web/pages/auth/confirm-email/[token].tsx
index 892fb7c39..3e0ac1cfd 100644
--- a/packages/web/pages/auth/confirm-email/[token].tsx
+++ b/packages/web/pages/auth/confirm-email/[token].tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef } from 'react'
 import { useRouter } from 'next/router'
 
 import { HStack } from '../../../components/elements/LayoutPrimitives'
@@ -30,7 +30,14 @@ export default function ConfirmEmail(): JSX.Element {
         >
           <input type="hidden" name="token" value={router.query.token} />
         </form>
-        <HStack css={{ bg: '$grayBg', padding: '24px', width: '100%', height: '100%'}}>
+        <HStack
+          css={{
+            bg: '$grayBg',
+            padding: '24px',
+            width: '100%',
+            height: '100%',
+          }}
+        >
           <LoadingView />
         </HStack>
       </ProfileLayout>
diff --git a/packages/web/pages/auth/forgot-password.tsx b/packages/web/pages/auth/forgot-password.tsx
index 05e0c26da..609b40cc8 100644
--- a/packages/web/pages/auth/forgot-password.tsx
+++ b/packages/web/pages/auth/forgot-password.tsx
@@ -1,15 +1,15 @@
 import { PageMetaData } from '../../components/patterns/PageMetaData'
 import { ProfileLayout } from '../../components/templates/ProfileLayout'
 import { EmailForgotPassword } from '../../components/templates/auth/EmailForgotPassword'
-import { useEffect } from 'react'
-import { useRouter } from 'next/router'
-import toast, { Toaster } from 'react-hot-toast'
-import { showSuccessToast } from '../../lib/toastHelpers'
+import { Toaster } from 'react-hot-toast'
 
 export default function ForgotPassword(): JSX.Element {
   return (
     <>
-      <PageMetaData title="Reset your password - Omnivore" path="/auth-forgot-password" />
+      <PageMetaData
+        title="Reset your password - Omnivore"
+        path="/auth-forgot-password"
+      />
       <Toaster
         containerStyle={{
           top: '5rem',
diff --git a/packages/web/pages/discover.tsx b/packages/web/pages/discover.tsx
deleted file mode 100644
index 388da35af..000000000
--- a/packages/web/pages/discover.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { PrimaryLayout } from '../components/templates/PrimaryLayout'
-
-export default function Discover(): JSX.Element {
-  return (
-    <PrimaryLayout
-      pageMetaDataProps={{
-        title: 'Discover - Omnivore',
-        path: '/discover',
-      }}
-      pageTestId="discover-page-tag"
-    >
-      Discover Page
-    </PrimaryLayout>
-  )
-}
diff --git a/packages/web/pages/help/emails.tsx b/packages/web/pages/help/emails.tsx
index 40735fb62..b2f4966a4 100644
--- a/packages/web/pages/help/emails.tsx
+++ b/packages/web/pages/help/emails.tsx
@@ -1,18 +1,12 @@
 /* eslint-disable @next/next/no-img-element */
 import { Box, HStack } from '../../components/elements/LayoutPrimitives'
-import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
+import { SettingsLayout } from '../../components/templates/SettingsLayout'
 import { Button } from '../../components/elements/Button'
 import Link from 'next/link'
 
 export default function Emails(): JSX.Element {
   return (
-    <PrimaryLayout
-      pageMetaDataProps={{
-        title: 'Reading Newsletters in Omnivore',
-        path: '/help/newsletters',
-      }}
-      pageTestId="help-newsletters-tag"
-    >
+    <SettingsLayout>
       <Box
         css={{
           m: '42px',
@@ -31,29 +25,34 @@ export default function Emails(): JSX.Element {
         <h1>Omnivore Email Addresses</h1>
         <hr />
         <p>
-          An Omnivore email address will receive email, detect whether the email is a PDF document or newsletter, 
-          and add the content to your library.
+          An Omnivore email address will receive email, detect whether the email
+          is a PDF document or newsletter, and add the content to your library.
         </p>
         <p>
-          If Omnivore doesn&apos;t think the item should be added to your library,
-          it will be forwarded to the email address you used when you registered
-          for Omnivore (from <code>msgs@omnivore.app</code>).
+          If Omnivore doesn&apos;t think the item should be added to your
+          library, it will be forwarded to the email address you used when you
+          registered for Omnivore (from <code>msgs@omnivore.app</code>).
         </p>
 
         <h2>Sending PDFs to your Omnivore Email Address</h2>
         <p>
-          Add PDFs to your Omnivore library by sending them to your Omnivore email address. If there is a subject
-          line in the email, it will be used as the title of the PDF. If there is no subject line, the filename will
-          be used as the title.
+          Add PDFs to your Omnivore library by sending them to your Omnivore
+          email address. If there is a subject line in the email, it will be
+          used as the title of the PDF. If there is no subject line, the
+          filename will be used as the title.
         </p>
 
         <h2>Read all your newsletters in Omnivore</h2>
         <p>
-          Subscribe to newsletters with your Omnivore email address and they 
+          Subscribe to newsletters with your Omnivore email address and they
           will be added to your library when we receive them.
         </p>
 
-        <p><Link href="/help/newsletters">Learn more about setting up newsletters</Link></p>
+        <p>
+          <Link href="/help/newsletters">
+            Learn more about setting up newsletters
+          </Link>
+        </p>
 
         <HStack alignment="center" css={{ mb: '32px', width: '100%' }}>
           <Link passHref href="/settings/emails">
@@ -62,6 +61,6 @@ export default function Emails(): JSX.Element {
         </HStack>
       </Box>
       <Box css={{ height: '120px' }} />
-    </PrimaryLayout>
+    </SettingsLayout>
   )
 }
diff --git a/packages/web/pages/help/labels.tsx b/packages/web/pages/help/labels.tsx
index 23f86b29a..03176a358 100644
--- a/packages/web/pages/help/labels.tsx
+++ b/packages/web/pages/help/labels.tsx
@@ -1,17 +1,11 @@
 /* eslint-disable @next/next/no-img-element */
-import { Box, HStack } from '../../components/elements/LayoutPrimitives'
-import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
+import { Box } from '../../components/elements/LayoutPrimitives'
+import { SettingsLayout } from '../../components/templates/SettingsLayout'
 import Link from 'next/link'
 
 export default function Labels(): JSX.Element {
   return (
-    <PrimaryLayout
-      pageMetaDataProps={{
-        title: 'Labels',
-        path: '/help/labels',
-      }}
-      pageTestId="help-labels-tag"
-    >
+    <SettingsLayout>
       <Box
         css={{
           m: '42px',
@@ -31,59 +25,83 @@ export default function Labels(): JSX.Element {
         <hr />
         <h2>Introduction</h2>
         <p>
-          Labels allow you to group and search for content in Omnivore. A saved page
-          can have multiple labels and search results can be filtered by label.
+          Labels allow you to group and search for content in Omnivore. A saved
+          page can have multiple labels and search results can be filtered by
+          label.
         </p>
         <h2>Adding labels to a page on iOS</h2>
         <p>
-          On iOS you add and remove labels from a page using the Assign Labels modal.
-        </p>  
+          On iOS you add and remove labels from a page using the Assign Labels
+          modal.
+        </p>
         <p>
-          You can open the Assign Labels modal from the home view or the reader view.
-          In the home view long press on an item and choose Edit Labels from the dropdowm
-          menu. In the reader view use the top right menu button.
+          You can open the Assign Labels modal from the home view or the reader
+          view. In the home view long press on an item and choose Edit Labels
+          from the dropdowm menu. In the reader view use the top right menu
+          button.
         </p>
         <h2>Adding labels to a page on the web</h2>
         <p>
-          On the web you add and remove labels from a page using the Assign Labels dropdown
-          or modal depending on your screen size. For larger monitors you will see the Labels
-          button on the left hand side of the reader view. For smaller monitors you will see
-          the labels dropdown at the top of your screen.
+          On the web you add and remove labels from a page using the Assign
+          Labels dropdown or modal depending on your screen size. For larger
+          monitors you will see the Labels button on the left hand side of the
+          reader view. For smaller monitors you will see the labels dropdown at
+          the top of your screen.
         </p>
         <p>
-          You can also use keyboard commands to open the assign labels modal. On the reader
-          view tap the <code>l</code> key. Once open you can use the up/down arrow keys, or the
-          tab key to navigate the available labels, and the Enter key to toggle a label.
+          You can also use keyboard commands to open the assign labels modal. On
+          the reader view tap the <code>l</code> key. Once open you can use the
+          up/down arrow keys, or the tab key to navigate the available labels,
+          and the Enter key to toggle a label.
         </p>
         <h2>Searching by label on iOS</h2>
         <p>
-          On iOS you can use the Labels search chip to search for labels. This will open a modal
-          allowing you to assign multiple labels to your search. This will become an <code>OR </code>
-          search, meaning if you add multiple labels to your search, pages that have any of the
-          labels will be returned.
+          On iOS you can use the Labels search chip to search for labels. This
+          will open a modal allowing you to assign multiple labels to your
+          search. This will become an <code>OR </code>
+          search, meaning if you add multiple labels to your search, pages that
+          have any of the labels will be returned.
         </p>
         <h2>Searching by label with Advanced Search</h2>
         <p>
-          Omnivore&apos;s advanced search syntax supports searching for multiple labels using
-          <code>AND</code> and <code>OR</code> clauses. You can also negate a label search
-          to find all pages that do not have a certain label.
+          Omnivore&apos;s advanced search syntax supports searching for multiple
+          labels using
+          <code>AND</code> and <code>OR</code> clauses. You can also negate a
+          label search to find all pages that do not have a certain label.
         </p>
         <p>Some examples:</p>
         <ul>
-          <li><code>-label:Newsletter</code> finds all pages that have the label <code>Newsletter</code></li>
-          <li><code>label:Cooking,Fitness</code> finds all your pages with either the <code>Cooking</code> or <code>Fitness</code> labels</li>
-          <li><code>label:Newsletter label:Surfing</code> finds all pages with both the <code>Newsletter</code> and <code>Surfing</code> labels</li>
-          <li><code>label:Coding -label:Newsletter</code> finds all pages with the <code>Coding</code> label that do not have the <code>Newsletter</code> label</li>
+          <li>
+            <code>-label:Newsletter</code> finds all pages that have the label{' '}
+            <code>Newsletter</code>
+          </li>
+          <li>
+            <code>label:Cooking,Fitness</code> finds all your pages with either
+            the <code>Cooking</code> or <code>Fitness</code> labels
+          </li>
+          <li>
+            <code>label:Newsletter label:Surfing</code> finds all pages with
+            both the <code>Newsletter</code> and <code>Surfing</code> labels
+          </li>
+          <li>
+            <code>label:Coding -label:Newsletter</code> finds all pages with the{' '}
+            <code>Coding</code> label that do not have the{' '}
+            <code>Newsletter</code> label
+          </li>
         </ul>
-        
+
         <h2>Editing your list of labels</h2>
         <p>
-          The <Link href="/settings/labels"><a>labels</a></Link> page allows you to
-          edit all of your labels. From here you can create new labels, delete existing
-          labels, or modify the color and description of a label.
+          The{' '}
+          <Link href="/settings/labels">
+            <a>labels</a>
+          </Link>{' '}
+          page allows you to edit all of your labels. From here you can create
+          new labels, delete existing labels, or modify the color and
+          description of a label.
         </p>
       </Box>
       <Box css={{ height: '120px' }} />
-    </PrimaryLayout>
+    </SettingsLayout>
   )
 }
diff --git a/packages/web/pages/help/newsletters.tsx b/packages/web/pages/help/newsletters.tsx
index bfb41236f..da0a4a868 100644
--- a/packages/web/pages/help/newsletters.tsx
+++ b/packages/web/pages/help/newsletters.tsx
@@ -1,47 +1,50 @@
 /* eslint-disable @next/next/no-img-element */
-import { Box, HStack, SpanBox } from '../../components/elements/LayoutPrimitives'
-import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
+import {
+  Box,
+  HStack,
+  SpanBox,
+} from '../../components/elements/LayoutPrimitives'
+import { SettingsLayout } from '../../components/templates/SettingsLayout'
 import { Button } from '../../components/elements/Button'
 import Link from 'next/link'
 import { Copy, Plus } from 'phosphor-react'
 import { theme } from '../../components/tokens/stitches.config'
 
 const AddEmailButton = () => {
-  return (<Button
-    style="ctaDarkYellow"
-    css={{
-      cursor: 'default',
-      display: 'inline-flex',
-      alignItems: 'center',
-    }}
-  >
-    <Plus size={18} style={{ marginRight: '6.5px' }} />
-    <SpanBox>Create a new email address</SpanBox>
-  </Button>)
+  return (
+    <Button
+      style="ctaDarkYellow"
+      css={{
+        cursor: 'default',
+        display: 'inline-flex',
+        alignItems: 'center',
+      }}
+    >
+      <Plus size={18} style={{ marginRight: '6.5px' }} />
+      <SpanBox>Create a new email address</SpanBox>
+    </Button>
+  )
 }
 
 const CopyButton = () => {
   return (
-    <Button style="plainIcon" css={{
-      pl: '2px',
-      pr: '4px',
-      cursor: 'default',
-      display: 'inline-flex',
-    }}
-  >
-    <Copy color={theme.colors.grayTextContrast.toString()} />
-  </Button>)
+    <Button
+      style="plainIcon"
+      css={{
+        pl: '2px',
+        pr: '4px',
+        cursor: 'default',
+        display: 'inline-flex',
+      }}
+    >
+      <Copy color={theme.colors.grayTextContrast.toString()} />
+    </Button>
+  )
 }
 
 export default function Newsletters(): JSX.Element {
   return (
-    <PrimaryLayout
-      pageMetaDataProps={{
-        title: 'Reading Newsletters in Omnivore',
-        path: '/help/newsletters',
-      }}
-      pageTestId="help-newsletters-tag"
-    >
+    <SettingsLayout>
       <Box
         css={{
           m: '42px',
@@ -61,45 +64,102 @@ export default function Newsletters(): JSX.Element {
         <hr />
         <p>Omnivore supports newsletters from the following providers:</p>
         <ul>
-          <li>Newsletters hosted on <a href="https://substack.com" target="_blank" rel="noreferrer">substack.com</a></li>
-          <li>Newsletters hosted on <a href="https://www.beehiiv.com/" target="_blank" rel="noreferrer">beehiiv.com</a></li>
-          <li>The <a href="https://www.axios.com/newsletters" target="_blank" rel="noreferrer">Axios Daily</a> newsletters</li>
-          <li><a href="https://golangweekly.com/" target="_blank" rel="noreferrer">Golang Weekly</a></li>
-          <li><a href="https://www.bloomberg.com/account/newsletters" target="_blank" rel="noreferrer">Bloomberg Newsletters</a></li>
+          <li>
+            Newsletters hosted on{' '}
+            <a href="https://substack.com" target="_blank" rel="noreferrer">
+              substack.com
+            </a>
+          </li>
+          <li>
+            Newsletters hosted on{' '}
+            <a href="https://www.beehiiv.com/" target="_blank" rel="noreferrer">
+              beehiiv.com
+            </a>
+          </li>
+          <li>
+            The{' '}
+            <a
+              href="https://www.axios.com/newsletters"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Axios Daily
+            </a>{' '}
+            newsletters
+          </li>
+          <li>
+            <a
+              href="https://golangweekly.com/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Golang Weekly
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://www.bloomberg.com/account/newsletters"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Bloomberg Newsletters
+            </a>
+          </li>
         </ul>
-        <p>If there is a newsletter you would like to read in Omnivore, please let us know.</p>
+        <p>
+          If there is a newsletter you would like to read in Omnivore, please
+          let us know.
+        </p>
 
         <h2>Omnivore Email Addresses</h2>
         <p>
-          Omnivore allows you to create unique email addresses for subscribing to newsletters.
-          You can reuse one address for all your newsletters, or you can create a unique address
-          for each.
+          Omnivore allows you to create unique email addresses for subscribing
+          to newsletters. You can reuse one address for all your newsletters, or
+          you can create a unique address for each.
         </p>
         <p>
-          An Omnivore email address will receive email, detect whether the email is a newsletter,
-          and add the newsletter content to your library. If the email does not appear to be a newsletter,
-          it will be forwarded to the email address you used when you registered for Omnivore.
+          An Omnivore email address will receive email, detect whether the email
+          is a newsletter, and add the newsletter content to your library. If
+          the email does not appear to be a newsletter, it will be forwarded to
+          the email address you used when you registered for Omnivore.
         </p>
 
-        <p>There are multiple ways to add newsletters to your Omnivore library:</p>
+        <p>
+          There are multiple ways to add newsletters to your Omnivore library:
+        </p>
         <ul>
-          <li><a href="#updating">Updating your account email to an Omnivore email address</a></li>
-          <li><a href="#directly">Subscribe to the newsletter with an Omnivore email address</a></li>
-          <li><a href="#forwarding">Create a forwarding rule from your email account</a></li>
+          <li>
+            <a href="#updating">
+              Updating your account email to an Omnivore email address
+            </a>
+          </li>
+          <li>
+            <a href="#directly">
+              Subscribe to the newsletter with an Omnivore email address
+            </a>
+          </li>
+          <li>
+            <a href="#forwarding">
+              Create a forwarding rule from your email account
+            </a>
+          </li>
         </ul>
 
         <h2 id="updating">Updating your account email</h2>
         <p>
-          If you want all your substack newsletters sent to Omnivore, you can login and change the
-          address on <a href="https://substack.com/account/settings">your account page</a> in Substack.
+          If you want all your substack newsletters sent to Omnivore, you can
+          login and change the address on{' '}
+          <a href="https://substack.com/account/settings">your account page</a>{' '}
+          in Substack.
         </p>
 
         <h2 id="directly">Subscribing Directly</h2>
         <p>
-          Create your first email address by clicking the <AddEmailButton /> button on
-          the <Link href='/settings/emails'>emails page</Link>. Copy the email address 
-          to your clipboard using the <CopyButton />
-          copy button, and enter that email address into an email subscription box.
+          Create your first email address by clicking the <AddEmailButton />{' '}
+          button on the <Link href="/settings/emails">emails page</Link>. Copy
+          the email address to your clipboard using the <CopyButton />
+          copy button, and enter that email address into an email subscription
+          box.
         </p>
 
         <HStack distribution="center" css={{ width: '100%', my: '32px' }}>
@@ -110,53 +170,88 @@ export default function Newsletters(): JSX.Element {
         </HStack>
 
         <p>
-          If you are already logged into Substack you might need to logout to use your new email address.
+          If you are already logged into Substack you might need to logout to
+          use your new email address.
         </p>
 
         <h2 id="forwarding">Create a Forwarding Rule</h2>
 
         <p>
-          If you are a Gmail user you can create a forwarding rule to send email from your regular account
-          to your Omnivore email address. This is useful if you have an existing paid newsletter subscription and
+          If you are a Gmail user you can create a forwarding rule to send email
+          from your regular account to your Omnivore email address. This is
+          useful if you have an existing paid newsletter subscription and
           don&apos;t want to update your account email address.
         </p>
 
         <p>
-          For free newsletters we recommend subscribing directly to the newsletter with your Omnivore email address
-          instead of setting up forwarding rules.
+          For free newsletters we recommend subscribing directly to the
+          newsletter with your Omnivore email address instead of setting up
+          forwarding rules.
         </p>
 
         <p>Before you start:</p>
         <ul>
-          <li>Create an Omnivore Email Address by clicking the <AddEmailButton /> button on the <Link href='/settings/emails'>emails page</Link>.</li>
-          <li>Make a note of the Newsletter&apos;s sender email address. For example <code>omnivore@substack.com</code>.</li>
+          <li>
+            Create an Omnivore Email Address by clicking the <AddEmailButton />{' '}
+            button on the <Link href="/settings/emails">emails page</Link>.
+          </li>
+          <li>
+            Make a note of the Newsletter&apos;s sender email address. For
+            example <code>omnivore@substack.com</code>.
+          </li>
         </ul>
 
         <p>Create a forwarding rule:</p>
         <ul>
           <li>
-            On a computer open your <Link href="https://mail.google.com/mail/u/0/#settings/fwdandpop">Gmail Forwarding Rules</Link>.
-            If this link does not work: click on the Gear icon in the upper right corner of Gmail
-              and select All Settings, then click the Forwarding and POP/IMAP tab.
-          </li>
-          <li>In the <b>Forwarding</b> section click <b>Add a forwarding address</b>.</li>
-          <li>Enter your Omnivore Email Address (eg <code>username-sdfsd@inbox.omnivore.app</code>) and click Next.</li>
-          <li>Click Proceed and OK</li>
-          <li>Refresh the Omnivore Newsletter Emails page and you should see a code appear beside your address (eg 663421251).
-            Copy this code to your clipboard (click the <CopyButton /> button).
+            On a computer open your{' '}
+            <Link href="https://mail.google.com/mail/u/0/#settings/fwdandpop">
+              Gmail Forwarding Rules
+            </Link>
+            . If this link does not work: click on the Gear icon in the upper
+            right corner of Gmail and select All Settings, then click the
+            Forwarding and POP/IMAP tab.
           </li>
           <li>
-            Return to your forwarding rules section and look for the confirm code text box.
-            Enter the confirmation code you copied and click <b>Verify</b>.
+            In the <b>Forwarding</b> section click{' '}
+            <b>Add a forwarding address</b>.
+          </li>
+          <li>
+            Enter your Omnivore Email Address (eg{' '}
+            <code>username-sdfsd@inbox.omnivore.app</code>) and click Next.
+          </li>
+          <li>Click Proceed and OK</li>
+          <li>
+            Refresh the Omnivore Newsletter Emails page and you should see a
+            code appear beside your address (eg 663421251). Copy this code to
+            your clipboard (click the <CopyButton /> button).
+          </li>
+          <li>
+            Return to your forwarding rules section and look for the confirm
+            code text box. Enter the confirmation code you copied and click{' '}
+            <b>Verify</b>.
+          </li>
+          <li>
+            In the forwarding section of Gmail, Click on{' '}
+            <b>Creating a Filter</b>
+          </li>
+          <li>
+            Add the email address of your newsletter (eg omnivore@substack.app)
+            in the <code>From</code> section.
+          </li>
+          <li>
+            Click <code>Create Filter</code>
+          </li>
+          <li>
+            Choose <b>Forward it to</b> and enter your Omnivore Email Address
+            (eg <code>username-sdfsd@inbox.omnivore.app</code>)
+          </li>
+          <li>
+            Click <code>Create Filter</code> at the bottom of the dialog.
           </li>
-          <li>In the forwarding section of Gmail, Click on <b>Creating a Filter</b></li>
-          <li>Add the email address of your newsletter (eg omnivore@substack.app) in the <code>From</code> section.</li>
-          <li>Click <code>Create Filter</code></li>
-          <li>Choose <b>Forward it to</b> and enter your Omnivore Email Address (eg  <code>username-sdfsd@inbox.omnivore.app</code>)</li>
-          <li>Click <code>Create Filter</code> at the bottom of the dialog.</li>
         </ul>
       </Box>
       <Box css={{ height: '120px' }} />
-    </PrimaryLayout>
+    </SettingsLayout>
   )
 }
diff --git a/packages/web/pages/help/saving-links.tsx b/packages/web/pages/help/saving-links.tsx
index ff16e56d1..7dbd3098f 100644
--- a/packages/web/pages/help/saving-links.tsx
+++ b/packages/web/pages/help/saving-links.tsx
@@ -3,16 +3,11 @@ import { Box, HStack } from '../../components/elements/LayoutPrimitives'
 import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
 import { Button } from '../../components/elements/Button'
 import Link from 'next/link'
+import { SettingsLayout } from '../../components/templates/SettingsLayout'
 
 export default function Colors(): JSX.Element {
   return (
-    <PrimaryLayout
-      pageMetaDataProps={{
-        title: 'Saving Links to Omnivore',
-        path: '/help/saving-links',
-      }}
-      pageTestId="help-saving-links-page-tag"
-    >
+    <SettingsLayout>
       <Box
         css={{
           m: '42px',
@@ -163,6 +158,6 @@ export default function Colors(): JSX.Element {
         </HStack>
       </Box>
       <Box css={{ height: '120px' }} />
-    </PrimaryLayout>
+    </SettingsLayout>
   )
 }
diff --git a/packages/web/pages/help/search.tsx b/packages/web/pages/help/search.tsx
index baa74d432..f6c6d7c4f 100644
--- a/packages/web/pages/help/search.tsx
+++ b/packages/web/pages/help/search.tsx
@@ -1,20 +1,10 @@
 /* eslint-disable @next/next/no-img-element */
-import { Box, HStack, SpanBox } from '../../components/elements/LayoutPrimitives'
-import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
-import { Button } from '../../components/elements/Button'
-import Link from 'next/link'
-import { Copy, Plus } from 'phosphor-react'
-import { theme } from '../../components/tokens/stitches.config'
+import { Box } from '../../components/elements/LayoutPrimitives'
+import { SettingsLayout } from '../../components/templates/SettingsLayout'
 
 export default function Search(): JSX.Element {
   return (
-    <PrimaryLayout
-      pageMetaDataProps={{
-        title: 'Search',
-        path: '/help/search',
-      }}
-      pageTestId="help-search-tag"
-    >
+    <SettingsLayout>
       <Box
         css={{
           m: '42px',
@@ -33,64 +23,107 @@ export default function Search(): JSX.Element {
         <h1>Search</h1>
         <hr />
         <p>
-          Omnivore uses search to filter items in your library. You can use a simple
-          keyword search or our advanced search syntax to find items.
+          Omnivore uses search to filter items in your library. You can use a
+          simple keyword search or our advanced search syntax to find items.
         </p>
         <ul>
-          <li><a href="#text">Searching for text</a></li>
-          <li><a href="#label">Filtering by label</a></li>
-          <li><a href="#in">Filtering by archive status</a></li>
-          <li><a href="#is">Filtering by read state</a></li>
-          <li><a href="#type">Filtering by type</a></li>
-          <li><a href="#has">Finding highlights</a></li>
-          <li><a href="#dates">Filtering by save/publish dates</a></li>
-          <li><a href="#sort">Sorting</a></li>
+          <li>
+            <a href="#text">Searching for text</a>
+          </li>
+          <li>
+            <a href="#label">Filtering by label</a>
+          </li>
+          <li>
+            <a href="#in">Filtering by archive status</a>
+          </li>
+          <li>
+            <a href="#is">Filtering by read state</a>
+          </li>
+          <li>
+            <a href="#type">Filtering by type</a>
+          </li>
+          <li>
+            <a href="#has">Finding highlights</a>
+          </li>
+          <li>
+            <a href="#dates">Filtering by save/publish dates</a>
+          </li>
+          <li>
+            <a href="#sort">Sorting</a>
+          </li>
         </ul>
 
         <h2 id="text">Searching for text</h2>
         <p>
-          Omnivore will perform full text search across library item&apos;s content, title, description,
-          and site by default. You can search for specific terms by quoting your terms. By default
-          all results that match your search will be returned in the order they were saved. To change
-          your search to relevance use the <code>sort:score</code> parameter.
+          Omnivore will perform full text search across library item&apos;s
+          content, title, description, and site by default. You can search for
+          specific terms by quoting your terms. By default all results that
+          match your search will be returned in the order they were saved. To
+          change your search to relevance use the <code>sort:score</code>{' '}
+          parameter.
         </p>
-  
+
         <h2 id="label">Filtering by label</h2>
         <p>
           You can filter your search based on labels using AND and OR clauses.
-          You can also negate a label search to find pages that do not have a certain label.
+          You can also negate a label search to find pages that do not have a
+          certain label.
         </p>
 
         <p>Some examples:</p>
 
         <ul>
-          <li>label:Newsletter finds all pages that have the label Newsletter</li>
-          <li>label:Cooking,Fitness finds all your pages with either the Cooking or Fitness labels</li>
-          <li>label:Newsletter label:Surfing finds all pages with both the Newsletter and Surfing labels</li>
-          <li>label:Coding -label:News finds all pages with the Coding label that do not have the News label</li>
+          <li>
+            label:Newsletter finds all pages that have the label Newsletter
+          </li>
+          <li>
+            label:Cooking,Fitness finds all your pages with either the Cooking
+            or Fitness labels
+          </li>
+          <li>
+            label:Newsletter label:Surfing finds all pages with both the
+            Newsletter and Surfing labels
+          </li>
+          <li>
+            label:Coding -label:News finds all pages with the Coding label that
+            do not have the News label
+          </li>
         </ul>
 
         <h2 id="in">Filtering by archive status</h2>
         <p>
-          The <code>in:</code> filter is used to filter search by archive status.
-          The options are:
+          The <code>in:</code> filter is used to filter search by archive
+          status. The options are:
         </p>
 
         <ul>
-          <li><code>in:inbox</code> (the default): show unarchived items</li>
-          <li><code>in:archive</code>: show archived items</li>
-          <li><code>in:all</code>: Show all items regardless of archive state</li>
+          <li>
+            <code>in:inbox</code> (the default): show unarchived items
+          </li>
+          <li>
+            <code>in:archive</code>: show archived items
+          </li>
+          <li>
+            <code>in:all</code>: Show all items regardless of archive state
+          </li>
         </ul>
 
         <h2 id="is">Filtering by read state</h2>
         <p>
-          The <code>is:</code> filter is used to filter search by read state. Note
-          that in Omnivore &apos;read&apos; means fully read, not just opened.
+          The <code>is:</code> filter is used to filter search by read state.
+          Note that in Omnivore &apos;read&apos; means fully read, not just
+          opened.
+        </p>
+        <p>
+          The <code>is:</code> filter options are:{' '}
         </p>
-        <p>The <code>is:</code> filter options are:          </p>
         <ul>
-          <li><code>is:read</code>: Show only items that are fully read</li>
-          <li><code>is:unread</code> (the default): show unread items</li>
+          <li>
+            <code>is:read</code>: Show only items that are fully read
+          </li>
+          <li>
+            <code>is:unread</code> (the default): show unread items
+          </li>
         </ul>
 
         <h2 id="type">Filtering by type</h2>
@@ -98,44 +131,70 @@ export default function Search(): JSX.Element {
           The <code>type:</code> filter is used to filter search by type.
         </p>
         <ul>
-          <li><code>type:article</code>: Show only articles</li>
-          <li><code>type:file</code>: Show only files</li>
-          <li><code>type:pdf</code>: Show only PDFs</li>
-          <li><code>type:highlights</code>: Show your highlights</li>
+          <li>
+            <code>type:article</code>: Show only articles
+          </li>
+          <li>
+            <code>type:file</code>: Show only files
+          </li>
+          <li>
+            <code>type:pdf</code>: Show only PDFs
+          </li>
+          <li>
+            <code>type:highlights</code>: Show your highlights
+          </li>
         </ul>
 
         <h2 id="has">Finding highlights</h2>
         <p>
-          You can find your highlights by using the <code>type:highlights</code> filter 
-          or find saved items with highlights using the <code>has:highlights</code> filter.
+          You can find your highlights by using the <code>type:highlights</code>{' '}
+          filter or find saved items with highlights using the{' '}
+          <code>has:highlights</code> filter.
         </p>
 
         <h2 id="dates">Filtering by save/publish dates</h2>
         <p>
-          You can filter your searches based on the time they were saved or published using the
-          <code>saved:</code> and <code>published:</code> filters. These filters take two dates
-          to create a date range. The <code>*</code> wildcard will accept any date.
+          You can filter your searches based on the time they were saved or
+          published using the
+          <code>saved:</code> and <code>published:</code> filters. These filters
+          take two dates to create a date range. The <code>*</code> wildcard
+          will accept any date.
         </p>
         <p>For Example:</p>
         <ul>
-          <li><code>saved:2022-04-21..*</code> All items saved since 2022-04-21</li>
-          <li><code>published:2020-01-01..2022-02-02</code> All items published between 2020-01-01 and 2022-02-02</li>
-          <li><code>published:*..2020-01-01</code> All items published before 2020-01-01</li>
+          <li>
+            <code>saved:2022-04-21..*</code> All items saved since 2022-04-21
+          </li>
+          <li>
+            <code>published:2020-01-01..2022-02-02</code> All items published
+            between 2020-01-01 and 2022-02-02
+          </li>
+          <li>
+            <code>published:*..2020-01-01</code> All items published before
+            2020-01-01
+          </li>
         </ul>
 
         <h2 id="sort">Sorting</h2>
         <p>
-          By default all search results in Omnivore are sorted by saved date. This puts the 
-          most recently saved items at the top of your library. You can use sort options
-          to change the library order:
+          By default all search results in Omnivore are sorted by saved date.
+          This puts the most recently saved items at the top of your library.
+          You can use sort options to change the library order:
         </p>
         <ul>
-          <li><code>sort:saved</code>: Sort by saved date</li>
-          <li><code>sort:updated</code>: Sort by time the item was updated, for example having a label or highlight added.</li>
-          <li><code>sort:score</code>: Sort by query term relevance.</li>
+          <li>
+            <code>sort:saved</code>: Sort by saved date
+          </li>
+          <li>
+            <code>sort:updated</code>: Sort by time the item was updated, for
+            example having a label or highlight added.
+          </li>
+          <li>
+            <code>sort:score</code>: Sort by query term relevance.
+          </li>
         </ul>
       </Box>
       <Box css={{ height: '120px' }} />
-    </PrimaryLayout>
+    </SettingsLayout>
   )
 }
diff --git a/packages/web/pages/home.tsx b/packages/web/pages/home.tsx
index f222eb42f..714abbeaa 100644
--- a/packages/web/pages/home.tsx
+++ b/packages/web/pages/home.tsx
@@ -15,7 +15,11 @@ function LoadedContent(): JSX.Element {
       }}
       pageTestId="home-page-tag"
     >
-      <VStack alignment="center" distribution="center">
+      <VStack
+        alignment="center"
+        distribution="center"
+        css={{ backgroundColor: '$thBackground2' }}
+      >
         <HomeFeedContainer />
       </VStack>
     </PrimaryLayout>
diff --git a/packages/web/pages/index.tsx b/packages/web/pages/index.tsx
index a5b3cce3e..ee60b8333 100644
--- a/packages/web/pages/index.tsx
+++ b/packages/web/pages/index.tsx
@@ -1,47 +1,9 @@
-import { VStack, Box } from './../components/elements/LayoutPrimitives'
-import {
-  LandingSectionsContainer,
-  GetStartedButton,
-} from '../components/templates/landing/LandingSectionsContainer'
-import { LandingHeader } from '../components/templates/landing/LandingHeader'
-import { LandingFooter } from '../components/templates/landing/LandingFooter'
 import { useGetViewerQuery } from '../lib/networking/queries/useGetViewerQuery'
 import { useRouter } from 'next/router'
 import { PageMetaData } from '../components/patterns/PageMetaData'
 import { LoadingView } from '../components/patterns/LoadingView'
 import { About } from '../components/templates/About'
 
-const containerStyles = {
-  alignSelf: 'center',
-  marginTop: 80,
-  maxWidth: 960,
-  px: '2vw',
-  '@md': {
-    px: '6vw',
-  },
-  '@xl': {
-    px: '120px',
-  },
-}
-
-const headingStyles = {
-  fontWeight: '700',
-  color: '#3D3D3D',
-  fontSize: 45,
-  lineHeight: '53px',
-  padding: '10px',
-  paddingBottom: '0px',
-  textAlign: 'center',
-}
-
-const subHeadingStyles = {
-  color: 'rgb(125, 125, 125)',
-  padding: '10px',
-  textAlign: 'center',
-  width: '100%',
-  fontWeight: '600',
-}
-
 export default function LandingPage(): JSX.Element {
   const router = useRouter()
   const { viewerData, isLoading } = useGetViewerQuery()
diff --git a/packages/web/pages/library.tsx b/packages/web/pages/library.tsx
deleted file mode 100644
index 839ff3251..000000000
--- a/packages/web/pages/library.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { LibraryContainer } from '../components/templates/library/LibraryContainer'
-
-export default function Library(): JSX.Element {
-  return <LibraryContainer />
-}
diff --git a/packages/web/pages/onboarding/[index].tsx b/packages/web/pages/onboarding/[index].tsx
deleted file mode 100644
index b9ca0f7d1..000000000
--- a/packages/web/pages/onboarding/[index].tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useRouter } from "next/router";
-import { OnboardingAddNewsletters } from "../../components/templates/onboarding/OnboardingAddNewsletters";
-import { OnboardingInstallInstructions } from "../../components/templates/onboarding/OnboardingInstallInstructions";
-import { OnboardingJoinCommunity } from "../../components/templates/onboarding/OnboardingJoinCommunity";
-import { OnboardingReaderPreview } from "../../components/templates/onboarding/OnboardingReaderPreview";
-
-export default function Onboarding() {
-  const router = useRouter();
-  const { index: pageNumber } = router.query;
-
-  switch (pageNumber) {
-    case "01":
-      return <OnboardingReaderPreview pageNumber={1} />;
-    case "02":
-      return <OnboardingInstallInstructions pageNumber={2} />;
-    case "03":
-      return <OnboardingAddNewsletters pageNumber={3} />;
-    case "04":
-      return <OnboardingJoinCommunity pageNumber={4} />;
-  }
-
-  return <OnboardingReaderPreview pageNumber={1} />
-}
diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx
index 43d0d20ee..885a63a7a 100644
--- a/packages/web/pages/settings/api.tsx
+++ b/packages/web/pages/settings/api.tsx
@@ -1,6 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
-import { useRouter } from 'next/router'
-
+import { useMemo, useState } from 'react'
 import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
 import { applyStoredTheme } from '../../lib/themeUpdater'
 import { useGetApiKeysQuery } from '../../lib/networking/queries/useGetApiKeysQuery'
diff --git a/packages/web/pages/settings/delete-my-account.tsx b/packages/web/pages/settings/delete-my-account.tsx
index a0e0c80c0..c146cb78e 100644
--- a/packages/web/pages/settings/delete-my-account.tsx
+++ b/packages/web/pages/settings/delete-my-account.tsx
@@ -1,11 +1,11 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useState } from 'react'
 import { useRouter } from 'next/router'
 import { Toaster } from 'react-hot-toast'
 
 import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
 import { applyStoredTheme } from '../../lib/themeUpdater'
 
-import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
+import { SettingsLayout } from '../../components/templates/SettingsLayout'
 
 import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
 import { Button } from '../../components/elements/Button'
@@ -24,13 +24,13 @@ export default function DeleteMyAccount(): JSX.Element {
   async function deleteAccount(): Promise<void> {
     const viewerId = viewer.viewerData?.me?.id
     if (!viewerId) {
-      showErrorToast("Error deleting user, no user id found.")
+      showErrorToast('Error deleting user, no user id found.')
       return
     }
 
     const result = await deleteAccountMutation(viewerId)
     if (result) {
-      showSuccessToast('Account deleted',)
+      showSuccessToast('Account deleted')
       setTimeout(() => {
         window.location.href = '/login'
       }, 2000)
@@ -46,7 +46,7 @@ export default function DeleteMyAccount(): JSX.Element {
   }
 
   return (
-    <PrimaryLayout pageTestId={'api-keys'}>
+    <SettingsLayout>
       <Toaster
         containerStyle={{
           top: '5rem',
@@ -55,22 +55,23 @@ export default function DeleteMyAccount(): JSX.Element {
 
       {showConfirm ? (
         <ConfirmationModal
-          message={'Are you sure you want to delete your account? This can not be reversed and all your data (saved articles, highlights, and notes) will be deleted.'}
+          message={
+            'Are you sure you want to delete your account? This can not be reversed and all your data (saved articles, highlights, and notes) will be deleted.'
+          }
           onAccept={deleteAccount}
           onOpenChange={() => setShowConfirm(false)}
         />
       ) : null}
 
-      <HStack css={{ padding: '24px', width: '100%', height: '100%'}}>
+      <HStack css={{ padding: '24px', width: '100%', height: '100%' }}>
         {viewer && router ? (
-          <Button
-            style="ctaDarkYellow"
-            onClick={() => setShowConfirm(true)}
-          >
+          <Button style="ctaDarkYellow" onClick={() => setShowConfirm(true)}>
             Delete my Account
           </Button>
-        ) : <Loader />}
+        ) : (
+          <Loader />
+        )}
       </HStack>
-    </PrimaryLayout>
+    </SettingsLayout>
   )
 }
diff --git a/packages/web/pages/settings/emails/index.tsx b/packages/web/pages/settings/emails/index.tsx
index 2db4a11ad..d76a8b648 100644
--- a/packages/web/pages/settings/emails/index.tsx
+++ b/packages/web/pages/settings/emails/index.tsx
@@ -49,7 +49,7 @@ const CopyTextBtnWrapper = styled(Box, {
 })
 
 function CopyTextButton(props: CopyTextButtonProps): JSX.Element {
-  const { copyLink, isLinkCopied } = useCopyLink(
+  const { copyLink } = useCopyLink(
     props.text,
     'newsletter_' +
       (props.type == TextType.EmailAddress
@@ -64,7 +64,7 @@ function CopyTextButton(props: CopyTextButtonProps): JSX.Element {
         ? 'Email Address Copied'
         : 'Confirmation Code Copied'
     )
-  }, [])
+  }, [copyLink, props.type])
 
   return (
     <Button style="plainIcon" onClick={copy}>
diff --git a/packages/web/pages/settings/installation/extensions.tsx b/packages/web/pages/settings/installation/extensions.tsx
index e16084113..9696b1e2b 100644
--- a/packages/web/pages/settings/installation/extensions.tsx
+++ b/packages/web/pages/settings/installation/extensions.tsx
@@ -1,5 +1,4 @@
-import React, { useEffect } from 'react'
-import Router from 'next/router'
+import React from 'react'
 import ExtensionInstallHelp from '../../../components/elements/ExtensionsInstallHelp'
 import { SettingsLayout } from '../../../components/templates/SettingsLayout'
 import { VStack } from '../../../components/elements/LayoutPrimitives'
diff --git a/packages/web/pages/settings/installation/index.tsx b/packages/web/pages/settings/installation/index.tsx
index 36a9bae92..fea860d1e 100644
--- a/packages/web/pages/settings/installation/index.tsx
+++ b/packages/web/pages/settings/installation/index.tsx
@@ -11,6 +11,7 @@ export default function Installation(): JSX.Element {
         css={{
           maxWidth: '50rem',
           margin: 'auto',
+          marginTop: '40px',
           marginBottom: '100px',
           padding: '10px',
           borderRadius: '6px',
diff --git a/packages/web/pages/settings/installation/mobile.tsx b/packages/web/pages/settings/installation/mobile.tsx
index 0f62ef644..338ece815 100644
--- a/packages/web/pages/settings/installation/mobile.tsx
+++ b/packages/web/pages/settings/installation/mobile.tsx
@@ -1,8 +1,6 @@
-import React, { useEffect } from 'react'
-import Router from 'next/router'
+import React from 'react'
 import { SettingsLayout } from '../../../components/templates/SettingsLayout'
 import MobileInstallHelp from '../../../components/elements/MobileInstallHelp'
-import { VStack } from '../../../components/elements/LayoutPrimitives'
 
 export default function Mobile(): JSX.Element {
   return (
diff --git a/packages/web/pages/settings/integrations.tsx b/packages/web/pages/settings/integrations.tsx
index 8b2a59e19..ff4fb637a 100644
--- a/packages/web/pages/settings/integrations.tsx
+++ b/packages/web/pages/settings/integrations.tsx
@@ -11,7 +11,7 @@ import {
   SpanBox,
   VStack,
 } from '../../components/elements/LayoutPrimitives'
-import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
+import { SettingsLayout } from '../../components/templates/SettingsLayout'
 import { applyStoredTheme } from '../../lib/themeUpdater'
 import { Button } from '../../components/elements/Button'
 import { useGetIntegrationsQuery } from '../../lib/networking/queries/useGetIntegrationsQuery'
@@ -122,10 +122,10 @@ export default function Integrations(): JSX.Element {
         },
       },
     ])
-  }, [])
+  }, [readwiseConnected, router, webhooks])
 
   return (
-    <PrimaryLayout pageTestId={'integrations'}>
+    <SettingsLayout>
       <Toaster
         containerStyle={{
           top: '5rem',
@@ -217,6 +217,6 @@ export default function Integrations(): JSX.Element {
           )
         })}
       </VStack>
-    </PrimaryLayout>
+    </SettingsLayout>
   )
 }
diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx
index 52267abec..85e7649d0 100644
--- a/packages/web/pages/settings/labels.tsx
+++ b/packages/web/pages/settings/labels.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
-import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
+import { SettingsLayout } from '../../components/templates/SettingsLayout'
 import { Button } from '../../components/elements/Button'
-import { styled, theme } from '../../components/tokens/stitches.config'
+import { styled } from '../../components/tokens/stitches.config'
 import {
   Box,
   SpanBox,
@@ -148,7 +148,7 @@ export default function LabelsPage(): JSX.Element {
   const { labels, revalidate } = useGetLabelsQuery()
   const [labelColorHex, setLabelColorHex] = useState<LabelColorHex>({
     rowId: '',
-    value: 'custom color',
+    value: '#000000',
   })
   const [editingLabelId, setEditingLabelId] = useState<string | null>(null)
   const [nameInputText, setNameInputText] = useState<string>('')
@@ -184,7 +184,7 @@ export default function LabelsPage(): JSX.Element {
     setEditingLabelId('')
     setNameInputText('')
     setDescriptionInputText('')
-    setLabelColorHex({ rowId: '', value: 'custom color' })
+    setLabelColorHex({ rowId: '', value: '#000000' })
   }
 
   async function createLabel(): Promise<void> {
@@ -252,167 +252,183 @@ export default function LabelsPage(): JSX.Element {
   }
 
   return (
-    <PrimaryLayout pageTestId="settings-labels-tag">
+    <SettingsLayout>
       <Toaster
         containerStyle={{
           top: '5rem',
         }}
       />
-      <VStack
-        css={{
-          mx: '10px',
-          color: '$grayText',
-        }}
-      >
-        {confirmRemoveLabelId ? (
-          <ConfirmationModal
-            message={
-              'Are you sure? Deleting a label will remove it from all pages.'
-            }
-            onAccept={() => {
-              onDeleteLabel(confirmRemoveLabelId)
-              setConfirmRemoveLabelId(null)
-            }}
-            onOpenChange={() => setConfirmRemoveLabelId(null)}
-          />
-        ) : null}
-        <HeaderWrapper>
-          <Box style={{ display: 'flex', alignItems: 'center' }}>
-            <Box>
-              <StyledText style="fixedHeadline">Labels </StyledText>
-            </Box>
-            <InfoLink href="/help/labels" />
-            <Box css={{ display: 'flex', justifyContent: 'flex-end' }}>
-              {isCreateMode ? null : (
-                <>
-                  <Button
-                    onClick={() => {
-                      resetLabelState()
-                      handleGenerateRandomColor()
-                      setIsCreateMode(true)
-                    }}
-                    style="ctaDarkYellow"
-                    css={{
-                      display: 'flex',
-                      alignItems: 'center',
-                    }}
-                  >
-                    <SpanBox
-                      css={{
-                        display: 'none',
-                        '@md': {
-                          display: 'flex',
-                        },
-                      }}
-                    >
-                      <SpanBox>Add Label</SpanBox>
-                    </SpanBox>
-                    <SpanBox
-                      css={{
-                        p: '0',
-                        display: 'flex',
-                        '@md': {
-                          display: 'none',
-                        },
-                      }}
-                    >
-                      <Plus size={24} />
-                    </SpanBox>
-                  </Button>
-                </>
-              )}
-            </Box>
-          </Box>
-        </HeaderWrapper>
-        <>
-          {isCreateMode ? (
-            windowWidth > breakpoint ? (
-              <DesktopEditCard
-                label={null}
-                labelColorHex={labelColorHex}
-                editingLabelId={editingLabelId}
-                isCreateMode={isCreateMode}
-                handleGenerateRandomColor={handleGenerateRandomColor}
-                setEditingLabelId={setEditingLabelId}
-                setLabelColorHex={setLabelColorHex}
-                deleteLabel={deleteLabel}
-                nameInputText={nameInputText}
-                descriptionInputText={descriptionInputText}
-                setNameInputText={setNameInputText}
-                setDescriptionInputText={setDescriptionInputText}
-                setIsCreateMode={setIsCreateMode}
-                createLabel={createLabel}
-                updateLabel={updateLabel}
-                onEditPress={onEditPress}
-                resetState={resetLabelState}
-              />
-            ) : (
-              <MobileEditCard
-                label={null}
-                labelColorHex={labelColorHex}
-                editingLabelId={editingLabelId}
-                isCreateMode={isCreateMode}
-                handleGenerateRandomColor={handleGenerateRandomColor}
-                setEditingLabelId={setEditingLabelId}
-                setLabelColorHex={setLabelColorHex}
-                deleteLabel={deleteLabel}
-                nameInputText={nameInputText}
-                descriptionInputText={descriptionInputText}
-                setNameInputText={setNameInputText}
-                setDescriptionInputText={setDescriptionInputText}
-                setIsCreateMode={setIsCreateMode}
-                createLabel={createLabel}
-                resetState={resetLabelState}
-                updateLabel={updateLabel}
-              />
-            )
+      <HStack css={{ width: '100%', height: '100%' }}>
+        <VStack
+          css={{
+            mx: '10px',
+            color: '$grayText',
+            width: '100%',
+            maxWidth: '865px',
+          }}
+        >
+          {confirmRemoveLabelId ? (
+            <ConfirmationModal
+              message={
+                'Are you sure? Deleting a label will remove it from all pages.'
+              }
+              onAccept={() => {
+                onDeleteLabel(confirmRemoveLabelId)
+                setConfirmRemoveLabelId(null)
+              }}
+              onOpenChange={() => setConfirmRemoveLabelId(null)}
+            />
           ) : null}
-        </>
-        {sortedLabels
-          ? sortedLabels.map((label, i) => {
-              const isLastChild = i === sortedLabels.length - 1
-              const isFirstChild = i === 0
-              const cardProps = {
-                label: label,
-                labelColorHex: labelColorHex,
-                editingLabelId: editingLabelId,
-                isCreateMode: isCreateMode,
-                isLastChild: isLastChild,
-                isFirstChild: isFirstChild,
-                handleGenerateRandomColor: handleGenerateRandomColor,
-                setEditingLabelId: setEditingLabelId,
-                setLabelColorHex: setLabelColorHex,
-                deleteLabel: deleteLabel,
-                nameInputText: nameInputText,
-                descriptionInputText: descriptionInputText,
-                setNameInputText: setNameInputText,
-                setDescriptionInputText: setDescriptionInputText,
-                setIsCreateMode: setIsCreateMode,
-                createLabel: createLabel,
-                resetState: resetLabelState,
-                updateLabel: updateLabel,
-              }
-
-              if (editingLabelId == label.id) {
-                if (windowWidth >= breakpoint) {
-                  return <DesktopEditCard {...cardProps} />
-                } else {
-                  return <MobileEditCard {...cardProps} />
-                }
-              }
-
-              return (
-                <GenericTableCard
-                  key={label.id}
-                  {...cardProps}
+          <HeaderWrapper>
+            <Box
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <Box>
+                <StyledText style="fixedHeadline">Labels </StyledText>
+              </Box>
+              <InfoLink href="/help/labels" />
+              <Box
+                css={{
+                  display: 'flex',
+                  justifyContent: 'flex-end',
+                  marginLeft: 'auto',
+                }}
+              >
+                {isCreateMode ? null : (
+                  <>
+                    <Button
+                      onClick={() => {
+                        resetLabelState()
+                        handleGenerateRandomColor()
+                        setIsCreateMode(true)
+                      }}
+                      style="ctaDarkYellow"
+                      css={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        marginLeft: 'auto',
+                      }}
+                    >
+                      <SpanBox
+                        css={{
+                          display: 'none',
+                          '@md': {
+                            display: 'flex',
+                          },
+                        }}
+                      >
+                        <SpanBox>Add Label</SpanBox>
+                      </SpanBox>
+                      <SpanBox
+                        css={{
+                          p: '0',
+                          display: 'flex',
+                          '@md': {
+                            display: 'none',
+                          },
+                        }}
+                      >
+                        <Plus size={24} />
+                      </SpanBox>
+                    </Button>
+                  </>
+                )}
+              </Box>
+            </Box>
+          </HeaderWrapper>
+          <>
+            {isCreateMode ? (
+              windowWidth > breakpoint ? (
+                <DesktopEditCard
+                  label={null}
+                  labelColorHex={labelColorHex}
+                  editingLabelId={editingLabelId}
+                  isCreateMode={isCreateMode}
+                  handleGenerateRandomColor={handleGenerateRandomColor}
+                  setEditingLabelId={setEditingLabelId}
+                  setLabelColorHex={setLabelColorHex}
+                  deleteLabel={deleteLabel}
+                  nameInputText={nameInputText}
+                  descriptionInputText={descriptionInputText}
+                  setNameInputText={setNameInputText}
+                  setDescriptionInputText={setDescriptionInputText}
+                  setIsCreateMode={setIsCreateMode}
+                  createLabel={createLabel}
+                  updateLabel={updateLabel}
                   onEditPress={onEditPress}
+                  resetState={resetLabelState}
+                />
+              ) : (
+                <MobileEditCard
+                  label={null}
+                  labelColorHex={labelColorHex}
+                  editingLabelId={editingLabelId}
+                  isCreateMode={isCreateMode}
+                  handleGenerateRandomColor={handleGenerateRandomColor}
+                  setEditingLabelId={setEditingLabelId}
+                  setLabelColorHex={setLabelColorHex}
+                  deleteLabel={deleteLabel}
+                  nameInputText={nameInputText}
+                  descriptionInputText={descriptionInputText}
+                  setNameInputText={setNameInputText}
+                  setDescriptionInputText={setDescriptionInputText}
+                  setIsCreateMode={setIsCreateMode}
+                  createLabel={createLabel}
+                  resetState={resetLabelState}
+                  updateLabel={updateLabel}
                 />
               )
-            })
-          : null}
-      </VStack>
+            ) : null}
+          </>
+          {sortedLabels
+            ? sortedLabels.map((label, i) => {
+                const isLastChild = i === sortedLabels.length - 1
+                const isFirstChild = i === 0
+                const cardProps = {
+                  label: label,
+                  labelColorHex: labelColorHex,
+                  editingLabelId: editingLabelId,
+                  isCreateMode: isCreateMode,
+                  isLastChild: isLastChild,
+                  isFirstChild: isFirstChild,
+                  handleGenerateRandomColor: handleGenerateRandomColor,
+                  setEditingLabelId: setEditingLabelId,
+                  setLabelColorHex: setLabelColorHex,
+                  deleteLabel: deleteLabel,
+                  nameInputText: nameInputText,
+                  descriptionInputText: descriptionInputText,
+                  setNameInputText: setNameInputText,
+                  setDescriptionInputText: setDescriptionInputText,
+                  setIsCreateMode: setIsCreateMode,
+                  createLabel: createLabel,
+                  resetState: resetLabelState,
+                  updateLabel: updateLabel,
+                }
+
+                if (editingLabelId == label.id) {
+                  if (windowWidth >= breakpoint) {
+                    return <DesktopEditCard {...cardProps} />
+                  } else {
+                    return <MobileEditCard {...cardProps} />
+                  }
+                }
+
+                return (
+                  <GenericTableCard
+                    key={label.id}
+                    {...cardProps}
+                    onEditPress={onEditPress}
+                  />
+                )
+              })
+            : null}
+        </VStack>
+      </HStack>
       <Box css={{ height: '120px' }} />
-    </PrimaryLayout>
+    </SettingsLayout>
   )
 }
 
@@ -560,7 +576,10 @@ function GenericTableCard(
               alignment="center"
               css={{ ml: '16px', '@smDown': { ml: '0px' } }}
             >
-              <LabelChip color={labelColor || ''} text={label?.name || ''} />
+              <LabelChip
+                color={labelColor || '#000000'}
+                text={label?.name || ''}
+              />
             </HStack>
           )}
           {showInput && !label ? (
@@ -633,7 +652,7 @@ function GenericTableCard(
               labelColorHexRowId={labelColorHex.rowId}
               labelColorHexValue={labelColorHex.value}
               labelId={label?.id || ''}
-              labelColor={label?.color || 'custom color'}
+              labelColor={label?.color || '#000000'}
               setLabelColorHex={setLabelColorHex}
             />
           )}
@@ -805,7 +824,7 @@ function MobileEditCard(props: any) {
           labelColorHexRowId={labelColorHex.rowId}
           labelColorHexValue={labelColorHex.value}
           labelId={label?.id || ''}
-          labelColor={label?.color || 'custom color'}
+          labelColor={label?.color || '#000000'}
           setLabelColorHex={setLabelColorHex}
         />
         <TextArea
@@ -901,7 +920,7 @@ function DesktopEditCard(props: any) {
             labelColorHexRowId={labelColorHex.rowId}
             labelColorHexValue={labelColorHex.value}
             labelId={label?.id || ''}
-            labelColor={label?.color || 'custom color'}
+            labelColor={label?.color || '#000000'}
             setLabelColorHex={setLabelColorHex}
           />
           <Input
diff --git a/packages/web/pages/settings/rules.tsx b/packages/web/pages/settings/rules.tsx
index cea7826c6..788c459c3 100644
--- a/packages/web/pages/settings/rules.tsx
+++ b/packages/web/pages/settings/rules.tsx
@@ -10,7 +10,7 @@ import {
   useGetRulesQuery,
 } from '../../lib/networking/queries/useGetRulesQuery'
 
-import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
+import { SettingsLayout } from '../../components/templates/SettingsLayout'
 import { Button, Space, Table, Form, Input, Modal, Tag, Select } from 'antd'
 
 // import 'antd/dist/antd.dark.css'
@@ -123,9 +123,8 @@ const CreateActionModal = (props: CreateActionModalProps): JSX.Element => {
     }
   }
 
-  const [actionType, setActionType] = useState<RuleActionType | undefined>(
-    undefined
-  )
+  const [actionType, setActionType] =
+    useState<RuleActionType | undefined>(undefined)
 
   return (
     <Modal
@@ -192,9 +191,8 @@ export default function Rules(): JSX.Element {
   const { rules, revalidate } = useGetRulesQuery()
   const { labels } = useGetLabelsQuery()
   const [isCreateRuleModalOpen, setIsCreateRuleModalOpen] = useState(false)
-  const [createActionRule, setCreateActionRule] = useState<Rule | undefined>(
-    undefined
-  )
+  const [createActionRule, setCreateActionRule] =
+    useState<Rule | undefined>(undefined)
 
   const dataSource = useMemo(() => {
     return rules.map((rule: Rule) => {
@@ -301,7 +299,7 @@ export default function Rules(): JSX.Element {
   ]
 
   return (
-    <PrimaryLayout pageTestId={'api-keys'}>
+    <SettingsLayout>
       <Toaster
         containerStyle={{
           top: '5rem',
@@ -342,6 +340,6 @@ export default function Rules(): JSX.Element {
           // expandable={{ expandedRowRender, indentSize: 30 }}
         />
       </Box>
-    </PrimaryLayout>
+    </SettingsLayout>
   )
 }
diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx
index 7f976c1b0..785201029 100644
--- a/packages/web/pages/settings/webhooks.tsx
+++ b/packages/web/pages/settings/webhooks.tsx
@@ -1,4 +1,4 @@
-import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
+import { SettingsLayout } from '../../components/templates/SettingsLayout'
 import { Toaster } from 'react-hot-toast'
 import { Table } from '../../components/elements/Table'
 import { applyStoredTheme } from '../../lib/themeUpdater'
@@ -88,7 +88,7 @@ export default function Webhooks(): JSX.Element {
   }
 
   return (
-    <PrimaryLayout pageTestId={'webhooks'}>
+    <SettingsLayout>
       <Toaster
         containerStyle={{
           top: '5rem',
@@ -203,6 +203,6 @@ export default function Webhooks(): JSX.Element {
           setOnEditWebhook(webhook)
         }}
       />
-    </PrimaryLayout>
+    </SettingsLayout>
   )
 }
diff --git a/packages/web/pages/tools/bulk.tsx b/packages/web/pages/tools/bulk.tsx
index 9b4031937..97bea8282 100644
--- a/packages/web/pages/tools/bulk.tsx
+++ b/packages/web/pages/tools/bulk.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react'
 import { applyStoredTheme } from '../../lib/themeUpdater'
 
-import { Box, VStack } from '../../components/elements/LayoutPrimitives'
+import { VStack } from '../../components/elements/LayoutPrimitives'
 
 import { StyledText } from '../../components/elements/StyledText'
 import { ProfileLayout } from '../../components/templates/ProfileLayout'
diff --git a/packages/web/pages/tools/import/file.tsx b/packages/web/pages/tools/import/file.tsx
index 44096d324..13fb53f6b 100644
--- a/packages/web/pages/tools/import/file.tsx
+++ b/packages/web/pages/tools/import/file.tsx
@@ -69,6 +69,12 @@ export default function ImportUploader(): JSX.Element {
             'content-length': `${file.size}`,
           },
         })
+        if (!uploadRes) {
+          setErrorMessage(
+            'Unable to create file upload. Please ensure you are logged in.'
+          )
+          setUploadState('none')
+        }
         setUploadState('completed')
       } else {
         setErrorMessage(
diff --git a/packages/web/pages/zh/index.tsx b/packages/web/pages/zh/index.tsx
index df1c34a7e..01b277327 100644
--- a/packages/web/pages/zh/index.tsx
+++ b/packages/web/pages/zh/index.tsx
@@ -1,44 +1,6 @@
-import { VStack, Box } from '.././../components/elements/LayoutPrimitives'
-import {
-  LandingSectionsContainer,
-  GetStartedButton,
-} from '../../components/templates/landing/LandingSectionsContainer'
-import { LandingHeader } from '../../components/templates/landing/LandingHeader'
-import { LandingFooter } from '../../components/templates/landing/LandingFooter'
 import { PageMetaData } from '../../components/patterns/PageMetaData'
 import { About } from '../../components/templates/About'
 
-const containerStyles = {
-  alignSelf: 'center',
-  marginTop: 80,
-  maxWidth: 960,
-  px: '2vw',
-  '@md': {
-    px: '6vw',
-  },
-  '@xl': {
-    px: '120px',
-  },
-}
-
-const headingStyles = {
-  fontWeight: '700',
-  color: '#3D3D3D',
-  fontSize: 45,
-  lineHeight: '53px',
-  padding: '10px',
-  paddingBottom: '0px',
-  textAlign: 'center',
-}
-
-const subHeadingStyles = {
-  color: 'rgb(125, 125, 125)',
-  padding: '10px',
-  textAlign: 'center',
-  width: '100%',
-  fontWeight: '600',
-}
-
 export default function LandingPage(): JSX.Element {
   return (
     <>
diff --git a/packages/web/stories/EditTitleModal.stories.tsx b/packages/web/stories/EditTitleModal.stories.tsx
index 53a7b41f9..eb76d8b9d 100644
--- a/packages/web/stories/EditTitleModal.stories.tsx
+++ b/packages/web/stories/EditTitleModal.stories.tsx
@@ -1,10 +1,10 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { EditTitleModal } from '../components/templates/homeFeed/EditTitleModal'
+import { EditLibraryItemModal } from '../components/templates/homeFeed/EditItemModals'
 import { LibraryItem } from '../lib/networking/queries/useGetLibraryItemsQuery'
 
 export default {
   title: 'Components/EditTitleModal',
-  component: EditTitleModal,
+  component: EditLibraryItemModal,
   argTypes: {
     onOpenChange: {
       description:
@@ -23,18 +23,16 @@ export default {
     },
     viewMode: 'canvas',
   },
-} as ComponentMeta<typeof EditTitleModal>
+} as ComponentMeta<typeof EditLibraryItemModal>
 
-export const EditTitleModalStory: ComponentStory<typeof EditTitleModal> = (
-  args
-) => (
-  <EditTitleModal
-    onOpenChange={() => {}}
-    item={{
-      cursor: '',
-      node: { title: '', description: '' } as LibraryItem['node'],
-    }}
-    updateItem={async () => console.log('update item')}
-    
-  />
-)
+export const EditTitleModalStory: ComponentStory<typeof EditLibraryItemModal> =
+  (args) => (
+    <EditLibraryItemModal
+      onOpenChange={() => {}}
+      item={{
+        cursor: '',
+        node: { title: '', description: '' } as LibraryItem['node'],
+      }}
+      updateItem={async () => console.log('update item')}
+    />
+  )
diff --git a/packages/web/stories/HighlightItemCard.stories.tsx b/packages/web/stories/HighlightItemCard.stories.tsx
deleted file mode 100644
index 260338eb4..000000000
--- a/packages/web/stories/HighlightItemCard.stories.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { HighlightItemCard, HighlightItemCardProps } from '../components/patterns/LibraryCards/HighlightItemCard'
-import { updateThemeLocally } from '../lib/themeUpdater'
-import { ThemeId } from '../components/tokens/stitches.config'
-import { PageType, State } from '../lib/networking/fragments/articleFragment'
-
-export default {
-  title: 'Components/HighlightItemCard',
-  component: HighlightItemCard,
-  argTypes: {
-    item: {
-      description: 'The highlight.',
-    },
-    handleAction: {
-      description: 'Action that fires on click.'
-    }
-  }
-} as ComponentMeta<typeof HighlightItemCard>
-
-const highlight: HighlightItemCardProps = {
-  handleAction: () => console.log('Handling Action'),
-  item:{
-    id: "nnnnn",
-    shortId: "shortId",
-    quote: "children not only participate in herding work, but are also encouraged to act independently in most other areas of life. They have a say in deciding when to eat, when to sleep, and what to wear, even at temperatures of -30C (-22F).",
-    annotation: "Okay… this is wild! I love this independence. Wondering how I can reponsibly instill this type of indepence in my own kids…",
-    createdAt: '',
-    description: '',
-    isArchived: false,
-    originalArticleUrl: 'https://example.com',
-    ownedByViewer: true,
-    pageId: '1',
-    readingProgressAnchorIndex: 12,
-    readingProgressPercent: 50,
-    slug: 'slug',
-    title: "This is a title", 
-    uploadFileId: '1',
-    url: 'https://example.com',
-    author: 'Author',
-    image: 'https://logos-world.net/wp-content/uploads/2021/11/Unity-New-Logo.png',
-    state: State.SUCCEEDED,
-    pageType: PageType.HIGHLIGHTS,
-  },
-}
-
-const Template = (props: HighlightItemCardProps) => <HighlightItemCard {...props} />
-
-export const LightHighlightItemCard: ComponentStory<
-  typeof HighlightItemCard
-> = (args: any) => {
-  updateThemeLocally(ThemeId.Light)
-  return (
-    <Template {...args}/>
-  )
-}
-export const DarkHighlightItemCard: ComponentStory<
-  typeof HighlightItemCard
-> = (args: any) => {
-  updateThemeLocally(ThemeId.Dark)
-  return (
-    <Template {...args}/>
-  )
-}
-
-LightHighlightItemCard.args = {
-  ...highlight
-}
-
-DarkHighlightItemCard.args = {
-  ...highlight
-}
diff --git a/packages/web/stories/OnboardingLayout.stories.tsx b/packages/web/stories/OnboardingLayout.stories.tsx
deleted file mode 100644
index e801feaaa..000000000
--- a/packages/web/stories/OnboardingLayout.stories.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { OnboardingLayout } from '../components/templates/OnboardingLayout'
-
-export default {
-  title: 'Components/OnboardingLayout',
-  component: OnboardingLayout,
-  argTypes: {
-    pageNumber: {
-      description: 'The current page number of the onboarding process',
-    },
-    title: {
-      description: 'The title of the current onboading screen',
-    },
-    subTitle: {
-      description: 'The subtitle of the current onboading screen',
-    },
-    description: {
-      description: 'The description of the current onboading screen',
-    },
-    children: {
-      description: 'The right column on the page',
-    },
-    image: {
-      description: 'The image on the left column on the page',
-    },
-    nextPage: {
-      description: 'The link to which the user is sent when next button is pressed'
-    }
-  },
-} as ComponentMeta<typeof OnboardingLayout>
-
-const Template: ComponentStory<typeof OnboardingLayout> = (args) => (
-  <OnboardingLayout {...args}>{args.children}</OnboardingLayout>
-)
-
-export const OnboardingLayoutStory = Template.bind({})
-OnboardingLayoutStory.args = {
-  pageNumber: 2,
-  title: 'Save links to read later',
-  subTitle:
-    'Save any link to your library using our apps and browser extensions',
-  description: 'Install our apps and browser extensions',
-  children: <div>This is where the child is rendered.</div>
-}
diff --git a/packages/web/stories/OnboardingPage1.stories.tsx b/packages/web/stories/OnboardingPage1.stories.tsx
deleted file mode 100644
index 44500c9d3..000000000
--- a/packages/web/stories/OnboardingPage1.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { OnboardingReaderPreview } from '../components/templates/onboarding/OnboardingReaderPreview'
-
-export default {
-  title: 'Onboarding-Pages/01',
-  component: OnboardingReaderPreview,
-} as ComponentMeta<typeof OnboardingReaderPreview>
-
-export const OnboardingPage1Story: ComponentStory<typeof OnboardingReaderPreview> = (args: any) => {
-  return (
-    <OnboardingReaderPreview pageNumber={1} />
-  )
-}
diff --git a/packages/web/stories/OnboardingPage2.stories.tsx b/packages/web/stories/OnboardingPage2.stories.tsx
deleted file mode 100644
index 8f07d3fcc..000000000
--- a/packages/web/stories/OnboardingPage2.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { OnboardingInstallInstructions } from '../components/templates/onboarding/OnboardingInstallInstructions'
-
-export default {
-  title: 'Onboarding-Pages/02',
-  component: OnboardingInstallInstructions,
-} as ComponentMeta<typeof OnboardingInstallInstructions>
-
-export const OnboardingPage2Story: ComponentStory<typeof OnboardingInstallInstructions> = (args: any) => {
-  return (
-    <OnboardingInstallInstructions pageNumber={2} />
-  )
-}
diff --git a/packages/web/stories/OnboardingPage3.stories.tsx b/packages/web/stories/OnboardingPage3.stories.tsx
deleted file mode 100644
index e3cbcd66e..000000000
--- a/packages/web/stories/OnboardingPage3.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { OnboardingAddNewsletters } from '../components/templates/onboarding/OnboardingAddNewsletters'
-
-export default {
-  title: 'Onboarding-Pages/03',
-  component: OnboardingAddNewsletters,
-} as ComponentMeta<typeof OnboardingAddNewsletters>
-
-export const OnboardingPage3Story: ComponentStory<typeof OnboardingAddNewsletters> = (args: any) => {
-  return (
-    <OnboardingAddNewsletters pageNumber={3} />
-  )
-}
diff --git a/packages/web/stories/OnboardingPage4.stories.tsx b/packages/web/stories/OnboardingPage4.stories.tsx
deleted file mode 100644
index 59c219f16..000000000
--- a/packages/web/stories/OnboardingPage4.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { OnboardingOrganizeInstructions } from '../components/templates/onboarding/OnboardingOrganizeInstructions'
-
-export default {
-  title: 'Onboarding-Pages/04',
-  component: OnboardingOrganizeInstructions,
-} as ComponentMeta<typeof OnboardingOrganizeInstructions>
-
-export const OnboardingPage4Story: ComponentStory<typeof OnboardingOrganizeInstructions> = (args: any) => {
-  return (
-    <OnboardingOrganizeInstructions pageNumber={4} />
-  )
-}
diff --git a/packages/web/stories/OnboardingPage5.stories.tsx b/packages/web/stories/OnboardingPage5.stories.tsx
deleted file mode 100644
index da2ce728d..000000000
--- a/packages/web/stories/OnboardingPage5.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { OnboardingHighlightInstructions } from '../components/templates/onboarding/OnboardingHighlightInstructions'
-
-export default {
-  title: 'Onboarding-Pages/05',
-  component: OnboardingHighlightInstructions,
-} as ComponentMeta<typeof OnboardingHighlightInstructions>
-
-export const OnboardingPage5Story: ComponentStory<typeof OnboardingHighlightInstructions> = (args: any) => {
-  return (
-    <OnboardingHighlightInstructions pageNumber={5} />
-  )
-}
diff --git a/packages/web/stories/OnboardingPage6.stories.tsx b/packages/web/stories/OnboardingPage6.stories.tsx
deleted file mode 100644
index a35ec04f3..000000000
--- a/packages/web/stories/OnboardingPage6.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { OnboardingJoinCommunity } from '../components/templates/onboarding/OnboardingJoinCommunity'
-
-export default {
-  title: 'Onboarding-Pages/06',
-  component: OnboardingJoinCommunity,
-} as ComponentMeta<typeof OnboardingJoinCommunity>
-
-export const OnboardingPage6Story: ComponentStory<typeof OnboardingJoinCommunity> = (args: any) => {
-  return (
-    <OnboardingJoinCommunity pageNumber={6} />
-  )
-}
diff --git a/packages/web/stories/ReaderSettingsControl.stories.tsx b/packages/web/stories/ReaderSettingsControl.stories.tsx
deleted file mode 100644
index 4b6b75f3c..000000000
--- a/packages/web/stories/ReaderSettingsControl.stories.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { Box } from '../components/elements/LayoutPrimitives'
-import { ReaderSettingsControl } from '../components/templates/article/ReaderSettingsControl'
-
-export default {
-  title: 'Components/ReaderSettingsControl',
-  component: ReaderSettingsControl,
-  argTypes: {
-    position: {
-      description: 'The ReaderSettingsControl component',
-      control: { type: 'select' },
-    },
-  },
-} as ComponentMeta<typeof ReaderSettingsControl>
-
-export const ReaderSettingsStory: ComponentStory<typeof ReaderSettingsControl> = (args: any) => {
-  return (
-    <div style={{ width: '245px', border: '2px solid black' }}>
-      <ReaderSettingsControl articleActionHandler={(action) => {
-        console.log('articleActionHandler')
-      }} />
-    </div>
-  )
-}
diff --git a/packages/web/styles/articleInnerStyling.css b/packages/web/styles/articleInnerStyling.css
index 9fe007613..b8cb3dddc 100644
--- a/packages/web/styles/articleInnerStyling.css
+++ b/packages/web/styles/articleInnerStyling.css
@@ -142,7 +142,7 @@ on smaller screens we display the note icon
     color: var(--font-color-transparent);
   }
 
-  margin: 30px 0;
+  margin: 0;
   font-size: 0.75em;
   line-height: 1.5em;
 
@@ -324,7 +324,6 @@ on smaller screens we display the note icon
 }
 
 .article-inner-css .page {
-  text-align: start;
   word-wrap: break-word;
 
   font-size: var(--text-font-size);
diff --git a/packages/web/utils/settings-page/labels/labelColorObjects.tsx b/packages/web/utils/settings-page/labels/labelColorObjects.tsx
index ac4f1fbe6..5d4ea5655 100644
--- a/packages/web/utils/settings-page/labels/labelColorObjects.tsx
+++ b/packages/web/utils/settings-page/labels/labelColorObjects.tsx
@@ -47,6 +47,7 @@ export const labelColorObjects: LabelColorObjects = {
 
 export const randomLabelColorHex = () => {
   const colorHexes = Object.keys(labelColorObjects).slice(0, -1)
-  const randomColorHex = colorHexes[Math.floor(Math.random() * colorHexes.length)]
+  const randomColorHex =
+    colorHexes[Math.floor(Math.random() * colorHexes.length)]
   return randomColorHex
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index 120d7e6b6..9f0406df7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4276,6 +4276,13 @@
   resolved "https://registry.yarnpkg.com/@n1ru4l/graphql-live-query/-/graphql-live-query-0.9.0.tgz#defaebdd31f625bee49e6745934f36312532b2bc"
   integrity sha512-BTpWy1e+FxN82RnLz4x1+JcEewVdfmUhV1C6/XYD5AjS7PQp9QFF7K8bCD6gzPTr2l+prvqOyVueQhFJxB1vfg==
 
+"@next/bundle-analyzer@^13.2.1":
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-13.2.3.tgz#8a34f595f9d213b39fc68f5246f59d5043f8c6f4"
+  integrity sha512-hPAT0ja6zHmEIrLYAWmdtpS07FCuUL8TxKP5ekzel+NoP4cNOykBS2Y265ciJwurpisd8Ux29g3QgeyBBSBnLA==
+  dependencies:
+    webpack-bundle-analyzer "4.7.0"
+
 "@next/env@12.1.6":
   version "12.1.6"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.6.tgz#5f44823a78335355f00f1687cfc4f1dafa3eca08"
@@ -4838,6 +4845,13 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
+"@radix-ui/number@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.0.0.tgz#4c536161d0de750b3f5d55860fc3de46264f897b"
+  integrity sha512-Ofwh/1HX69ZfJRiRBMTy7rgjAzHmwe4kW9C9Y99HTRUcYLUuVT0KESFj15rPjRgKJs20GPq8Bm5aEDJ8DuA3vA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/popper@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/popper/-/popper-0.1.0.tgz#c387a38f31b7799e1ea0d2bb1ca0c91c2931b063"
@@ -4853,6 +4867,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/primitive@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253"
+  integrity sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-arrow@0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-0.1.4.tgz#a871448a418cd3507d83840fdd47558cb961672b"
@@ -4899,6 +4920,17 @@
     "@radix-ui/react-primitive" "0.1.4"
     "@radix-ui/react-slot" "0.1.2"
 
+"@radix-ui/react-collection@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.2.tgz#d50da00bfa2ac14585319efdbbb081d4c5a29a97"
+  integrity sha512-s8WdQQ6wNXpaxdZ308KSr8fEWGrg4un8i4r/w7fhiS4ElRNjk5rRcl0/C6TANG2LvLOGIxtzo/jAg6Qf73TEBw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.2"
+    "@radix-ui/react-slot" "1.0.1"
+
 "@radix-ui/react-compose-refs@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-0.1.0.tgz#cff6e780a0f73778b976acff2c2a5b6551caab95"
@@ -4948,6 +4980,13 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "^2.4.0"
 
+"@radix-ui/react-direction@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.0.tgz#a2e0b552352459ecf96342c79949dd833c1e6e45"
+  integrity sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-dismissable-layer@0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-0.1.5.tgz#9379032351e79028d472733a5cc8ba4a0ea43314"
@@ -5113,6 +5152,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-slot" "1.0.1"
 
+"@radix-ui/react-primitive@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz#54e22f49ca59ba88d8143090276d50b93f8a7053"
+  integrity sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.1"
+
 "@radix-ui/react-progress@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-progress/-/react-progress-1.0.1.tgz#49ec2f729a67ba3b580a90356fc1d871466a4212"
@@ -5145,6 +5192,24 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "0.1.3"
 
+"@radix-ui/react-slider@^1.1.0":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-1.1.1.tgz#5685f23b6244804a5b1f55cee2d321a2acd1878e"
+  integrity sha512-0aswLpUKZIraPEOcXfwW25N1KPfLA6Mvm1TxogUChGsbLbys2ihd7uk9XAKsol9ZQPucxh2/mybwdRtAKrs/MQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/number" "1.0.0"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-collection" "1.0.2"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-direction" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+    "@radix-ui/react-use-previous" "1.0.0"
+    "@radix-ui/react-use-size" "1.0.0"
+
 "@radix-ui/react-slot@0.1.2":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-0.1.2.tgz#e6f7ad9caa8ce81cc8d532c854c56f9b8b6307c8"
@@ -5161,6 +5226,20 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.0"
 
+"@radix-ui/react-switch@^1.0.1":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.0.2.tgz#e3d1b9fe18b6b1173aadc8b8e6efdc96a28a70f8"
+  integrity sha512-BcG/LKehxt36NXG0wPnoCitIfSMtU9Xo7BmythYA1PAMLtsMvW7kALfBzmduQoHTWcKr0AVcFyh0gChBUp9TiQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+    "@radix-ui/react-use-previous" "1.0.0"
+    "@radix-ui/react-use-size" "1.0.0"
+
 "@radix-ui/react-tooltip@^0.1.7":
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-0.1.7.tgz#6f8c00d6e489565d14abf209ce0fb8853c8c8ee3"
@@ -5197,6 +5276,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-callback-ref@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
+  integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-use-controllable-state@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-0.1.0.tgz#4fced164acfc69a4e34fb9d193afdab973a55de1"
@@ -5205,6 +5291,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-callback-ref" "0.1.0"
 
+"@radix-ui/react-use-controllable-state@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz#a64deaafbbc52d5d407afaa22d493d687c538b7f"
+  integrity sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
 "@radix-ui/react-use-direction@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-direction/-/react-use-direction-0.1.0.tgz#97ac1d52e497c974389e7988f809238ed72e7df7"
@@ -5227,6 +5321,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-layout-effect@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
+  integrity sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-use-previous@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-0.1.1.tgz#0226017f72267200f6e832a7103760e96a6db5d0"
@@ -5234,6 +5335,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-previous@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz#e48a69c3a7d8078a967084038df66d0d181c56ac"
+  integrity sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-use-rect@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-0.1.1.tgz#6c15384beee59c086e75b89a7e66f3d2e583a856"
@@ -5249,6 +5357,14 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-size@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.0.0.tgz#a0b455ac826749419f6354dc733e2ca465054771"
+  integrity sha512-imZ3aYcoYCKhhgNpkNDh/aTiU05qw9hX+HHI1QDBTyIlcFjgeFlKKySNGMwTp7nYFLQg/j0VA2FmCY4WPDDHMg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
 "@radix-ui/react-visually-hidden@0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-0.1.4.tgz#6c75eae34fb5d084b503506fbfc05587ced05f03"
@@ -12640,6 +12756,11 @@ dayjs@1.x, dayjs@^1.10.4:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.6.tgz#2e79a226314ec3ec904e3ee1dd5a4f5e5b1c7afb"
   integrity sha512-zZbY5giJAinCG+7AGaw0wIhNZ6J8AhWuSXKvuc1KAyMiRsvGQWqh4L+MomvhdAYjN+lqvVCMq1I41e3YHvXkyQ==
 
+dayjs@^1.11.7:
+  version "1.11.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
+  integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
+
 debounce@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
@@ -22837,11 +22958,6 @@ rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-apple-login@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/react-apple-login/-/react-apple-login-1.1.3.tgz#5cb047a52a251fc52d920c7b4d9151d411994997"
-  integrity sha512-I6/2WQEfum9QGowHs9Maea5JhzsOjl8dMCqFP5got+jnnNZRimLE6wGambAvDXdiOuLr+gwMQx5W4JeBGKJHTA==
-
 react-colorful@^5.1.2, react-colorful@^5.5.1:
   version "5.5.1"
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.5.1.tgz#29d9c4e496f2ca784dd2bb5053a3a4340cfaf784"
@@ -26735,6 +26851,21 @@ webidl-conversions@^6.1.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
   integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
 
+webpack-bundle-analyzer@4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.7.0.tgz#33c1c485a7fcae8627c547b5c3328b46de733c66"
+  integrity sha512-j9b8ynpJS4K+zfO5GGwsAcQX4ZHpWV+yRiHDiL+bE0XHJ8NiPYLTNVQdlFYWxtpg9lfAQNlwJg16J9AJtFSXRg==
+  dependencies:
+    acorn "^8.0.4"
+    acorn-walk "^8.0.0"
+    chalk "^4.1.0"
+    commander "^7.2.0"
+    gzip-size "^6.0.0"
+    lodash "^4.17.20"
+    opener "^1.5.2"
+    sirv "^1.0.7"
+    ws "^7.3.1"
+
 webpack-bundle-analyzer@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.5.0.tgz#1b0eea2947e73528754a6f9af3e91b2b6e0f79d5"