diff --git a/packages/web/components/patterns/ArticleNotes.tsx b/packages/web/components/patterns/ArticleNotes.tsx
index 8ed2a25bc..438e834ff 100644
--- a/packages/web/components/patterns/ArticleNotes.tsx
+++ b/packages/web/components/patterns/ArticleNotes.tsx
@@ -7,27 +7,14 @@ import {
   useRef,
   useState,
 } from 'react'
-import { formattedShortTime } from '../../lib/dateFormatting'
-import { Box, HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'
+import { VStack } from '../elements/LayoutPrimitives'
 
 import MarkdownIt from 'markdown-it'
 import MdEditor, { Plugins } from 'react-markdown-editor-lite'
 import 'react-markdown-editor-lite/lib/index.css'
-import ReactMarkdown from 'react-markdown'
 import throttle from 'lodash/throttle'
 import { updateHighlightMutation } from '../../lib/networking/mutations/updateHighlightMutation'
 import { Highlight } from '../../lib/networking/fragments/highlightFragment'
-import { Button } from '../elements/Button'
-import {
-  ModalContent,
-  ModalOverlay,
-  ModalRoot,
-} from '../elements/ModalPrimitives'
-import { CloseButton } from '../elements/CloseButton'
-import { StyledText } from '../elements/StyledText'
-import remarkGfm from 'remark-gfm'
-import MDEditorSavePlugin from './MDEditorSavePlugin'
-import HandleFullScreen from './MDEditorSavePlugin'
 import Counter from './MDEditorSavePlugin'
 import { isDarkTheme } from '../../lib/themeUpdater'
 import { RcEditorStyles } from './RcEditorStyles'
diff --git a/packages/web/components/patterns/HighlightNotes.tsx b/packages/web/components/patterns/HighlightNotes.tsx
index 19daf58d1..253caa3d3 100644
--- a/packages/web/components/patterns/HighlightNotes.tsx
+++ b/packages/web/components/patterns/HighlightNotes.tsx
@@ -275,7 +275,9 @@ export function MarkdownNote(props: MarkdownNote): JSX.Element {
               color: props.text ? '$thHighContrast' : '#898989',
               borderRadius: '5px',
               background:
-                props.text && props.fillBackground ? '$thBackground5' : 'unset',
+                props.text && props.fillBackground
+                  ? '$thNotebookTextBackground'
+                  : 'unset',
               '> *': {
                 m: '0px',
               },
diff --git a/packages/web/components/patterns/RcEditorStyles.tsx b/packages/web/components/patterns/RcEditorStyles.tsx
index b53cba22a..f0b65ad6f 100644
--- a/packages/web/components/patterns/RcEditorStyles.tsx
+++ b/packages/web/components/patterns/RcEditorStyles.tsx
@@ -1,7 +1,7 @@
 export const RcEditorStyles = (isDark: boolean, shadow: boolean) => {
   return {
     '.rc-md-editor .rc-md-navigation': {
-      background: 'var(--colors-grayBg)',
+      background: '$grayBg',
       borderBottom: '1px solid $thBorderSubtle',
     },
     '.rc-md-editor': {
diff --git a/packages/web/components/templates/KeyboardShortcutListModal.tsx b/packages/web/components/templates/KeyboardShortcutListModal.tsx
index 1b0c1d685..3285446d8 100644
--- a/packages/web/components/templates/KeyboardShortcutListModal.tsx
+++ b/packages/web/components/templates/KeyboardShortcutListModal.tsx
@@ -125,7 +125,7 @@ const readerCommands = () => {
       callback: () => {},
     },
     {
-      actionDescription: 'Open Notebook',
+      actionDescription: 'Toggle Notebook open',
       shortcutKeys: ['t'],
       shortcutKeyDescription: 't',
       callback: () => {},
diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx
index 953e743db..26f77b028 100644
--- a/packages/web/components/templates/article/HighlightsLayer.tsx
+++ b/packages/web/components/templates/article/HighlightsLayer.tsx
@@ -742,46 +742,44 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
           />
         </>
       )}
-      {props.showHighlightsModal && (
-        <SlidingPane
-          className="sliding-pane-class"
-          isOpen={props.showHighlightsModal}
-          width={windowDimensions.width < 600 ? '100%' : '420px'}
-          hideHeader={true}
-          from="right"
-          overlayClassName="slide-panel-overlay"
-          onRequestClose={() => {
-            props.setShowHighlightsModal(false)
-          }}
-        >
-          <>
-            <NotebookHeader setShowNotebook={props.setShowHighlightsModal} />
-            <NotebookContent
-              viewer={props.viewer}
-              item={props.item}
-              // highlights={highlights}
-              // onClose={handleCloseNotebook}
-              viewInReader={(highlightId) => {
-                // The timeout here is a bit of a hack to work around rerendering
-                setTimeout(() => {
-                  const target = document.querySelector(
-                    `[omnivore-highlight-id="${highlightId}"]`
-                  )
-                  target?.scrollIntoView({
-                    block: 'center',
-                    behavior: 'auto',
-                  })
-                }, 1)
-                history.replaceState(
-                  undefined,
-                  window.location.href,
-                  `#${highlightId}`
+      <SlidingPane
+        className="sliding-pane-class"
+        isOpen={props.showHighlightsModal}
+        width={windowDimensions.width < 600 ? '100%' : '420px'}
+        hideHeader={true}
+        from="right"
+        overlayClassName="slide-panel-overlay"
+        onRequestClose={() => {
+          props.setShowHighlightsModal(false)
+        }}
+      >
+        <>
+          <NotebookHeader setShowNotebook={props.setShowHighlightsModal} />
+          <NotebookContent
+            viewer={props.viewer}
+            item={props.item}
+            // highlights={highlights}
+            // onClose={handleCloseNotebook}
+            viewInReader={(highlightId) => {
+              // The timeout here is a bit of a hack to work around rerendering
+              setTimeout(() => {
+                const target = document.querySelector(
+                  `[omnivore-highlight-id="${highlightId}"]`
                 )
-              }}
-            />
-          </>
-        </SlidingPane>
-      )}
+                target?.scrollIntoView({
+                  block: 'center',
+                  behavior: 'auto',
+                })
+              }, 1)
+              history.replaceState(
+                undefined,
+                window.location.href,
+                `#${highlightId}`
+              )
+            }}
+          />
+        </>
+      </SlidingPane>
     </>
   )
 }
diff --git a/packages/web/components/templates/article/Notebook.tsx b/packages/web/components/templates/article/Notebook.tsx
index c7dcb4c8e..8565cfc6f 100644
--- a/packages/web/components/templates/article/Notebook.tsx
+++ b/packages/web/components/templates/article/Notebook.tsx
@@ -212,44 +212,22 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
 
   return (
     <VStack
+      tabIndex={-1}
       distribution="start"
       css={{
         height: '100%',
         width: '100%',
-        p: '20px',
+        px: '20px',
 
         bg: '$thLibrarySearchbox',
         '@mdDown': { p: '15px' },
       }}
     >
-      {/* <HStack
-        css={{
-          width: '100%',
-          gap: '30px',
-          fontSize: '13px',
-          borderBottom: '1px solid $thBorderSubtle',
-        }}
-        distribution="start"
-        alignment="start"
-      >
-        <SectionTitle
-          title="Article Note"
-          selected={tabSelected == 'note'}
-          setSelected={() => setTabSelected('note')}
-        />
-        <SectionTitle
-          title="Highlights"
-          selected={tabSelected == 'highlights'}
-          setSelected={() => setTabSelected('highlights')}
-        />
-      </HStack> */}
-
-      {/* {tabSelected == 'note' && ( */}
       <>
         <HStack
           alignment="start"
           distribution="start"
-          css={{ width: '100%', mt: '20px', gap: '10px' }}
+          css={{ width: '100%', gap: '10px', mt: '25px' }}
         >
           <ArticleNotes
             targetId={props.item.id}
@@ -291,7 +269,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
         </HStack>
       </>
 
-      <VStack css={{ mt: '20px', gap: '30px' }}>
+      <VStack css={{ mt: '25px', gap: '25px' }}>
         {sortedHighlights.map((highlight) => (
           <HighlightViewItem
             key={highlight.id}
diff --git a/packages/web/components/templates/article/NotebookHeader.tsx b/packages/web/components/templates/article/NotebookHeader.tsx
index 187664f5a..5edeccd91 100644
--- a/packages/web/components/templates/article/NotebookHeader.tsx
+++ b/packages/web/components/templates/article/NotebookHeader.tsx
@@ -11,6 +11,9 @@ import { HStack } from '../../elements/LayoutPrimitives'
 import { MenuTrigger } from '../../elements/MenuTrigger'
 import { StyledText } from '../../elements/StyledText'
 import { NotebookModal } from './NotebookModal'
+import { Sidebar } from 'phosphor-react'
+import { theme } from '../../tokens/stitches.config'
+import { Button } from '../../elements/Button'
 
 type NotebookHeaderProps = {
   setShowNotebook: (set: boolean) => void
@@ -35,9 +38,10 @@ export const NotebookHeader = (props: NotebookHeaderProps) => {
         overflow: 'clip',
         background: '$thLibrarySearchbox',
         zIndex: 10,
+        borderBottom: '1px solid $thNotebookBorder',
       }}
     >
-      <StyledText style="modalHeadline" css={{ color: '$thTextSubtle2' }}>
+      <StyledText style="modalHeadline" css={{ color: '$thNotebookSubtle' }}>
         Notebook
       </StyledText>
       <HStack
@@ -50,7 +54,7 @@ export const NotebookHeader = (props: NotebookHeaderProps) => {
         distribution="center"
         alignment="center"
       >
-        <Dropdown triggerElement={<MenuTrigger />}>
+        {/* <Dropdown triggerElement={<MenuTrigger />}>
           <DropdownOption
             onSelect={() => {
               // exportHighlights()
@@ -63,8 +67,10 @@ export const NotebookHeader = (props: NotebookHeaderProps) => {
             }}
             title="Delete Article Note"
           />
-        </Dropdown>
-        <CloseButton close={handleClose} />
+        </Dropdown> */}
+        <Button style="plainIcon" onClick={() => props.setShowNotebook(false)}>
+          <Sidebar size={25} color={theme.colors.thNotebookSubtle.toString()} />
+        </Button>
       </HStack>
     </HStack>
   )
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index b119c2c39..8c886fc91 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -350,7 +350,11 @@ export function HomeFeedContainer(): JSX.Element {
         setLabelsTarget(item)
         break
       case 'open-notebook':
-        setNotebookTarget(item)
+        if (!notebookTarget) {
+          setNotebookTarget(item)
+        } else {
+          setNotebookTarget(undefined)
+        }
         break
       case 'unsubscribe':
         performActionOnItem('unsubscribe', item)
@@ -489,6 +493,7 @@ export function HomeFeedContainer(): JSX.Element {
           handleCardAction('set-labels', activeItem)
           break
         case 'openNotebook':
+          console.log('openNotebook: ', notebookTarget)
           handleCardAction('open-notebook', activeItem)
           break
         case 'sortDescending':
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 5067c66d8..6e57310c7 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -183,6 +183,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         thNotebookSubtle: '#6A6968',
         thNotebookBorder: '#D9D9D9',
         thNotebookBackground: '#FCFCFC',
+        thNotebookTextBackground: '#EBEBEB',
 
         thTextContrast: '#1E1E1E',
         thTextContrast2: '#3D3D3D',
@@ -280,7 +281,8 @@ const darkThemeSpec = {
 
     thNotebookSubtle: '#898989',
     thNotebookBorder: '#898989',
-    thNotebookBackground: '#3D3D3D',
+    thNotebookBackground: '#3B3938',
+    thNotebookTextBackground: '#3D3D3D',
     thNotebookHighContrast: '#2A2A2A',
 
     thTextContrast: '#FFFFFF',
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index 4ba683215..2d1babc43 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -350,7 +350,7 @@ export default function Home(): JSX.Element {
         name: 'Notebook',
         shortcut: ['t'],
         perform: () => {
-          setShowHighlightsModal(true)
+          setShowHighlightsModal(!showHighlightsModal)
         },
       },
       {