diff --git a/packages/web/components/patterns/ArticleNotes.tsx b/packages/web/components/patterns/ArticleNotes.tsx
index c6c86f617..81da54d14 100644
--- a/packages/web/components/patterns/ArticleNotes.tsx
+++ b/packages/web/components/patterns/ArticleNotes.tsx
@@ -46,7 +46,9 @@ type NoteSectionProps = {
 
   placeHolder: string
 
-  text: string | undefined
+  text: string
+  setText: (text: string) => void
+
   saveText: (text: string) => void
 }
 
@@ -63,6 +65,7 @@ export function ArticleNotes(props: NoteSectionProps): JSX.Element {
       targetId={props.targetId}
       placeHolder={props.placeHolder}
       text={props.text}
+      setText={props.setText}
       saveText={saveText}
       fillBackground={false}
     />
@@ -79,7 +82,9 @@ type HighlightViewNoteProps = {
 
   setEditMode: (set: 'edit' | 'preview') => void
 
-  text: string | undefined
+  text: string
+  setText: (text: string) => void
+
   updateHighlight: (highlight: Highlight) => void
 }
 
@@ -108,6 +113,7 @@ export function HighlightViewNote(props: HighlightViewNoteProps): JSX.Element {
       targetId={props.targetId}
       placeHolder={props.placeHolder}
       text={props.text}
+      setText={props.setText}
       saveText={saveText}
       fillBackground={true}
     />
@@ -120,6 +126,7 @@ type MarkdownNote = {
   placeHolder: string
 
   text: string | undefined
+  setText: (text: string) => void
   fillBackground: boolean | undefined
 
   saveText: (text: string) => void
@@ -147,6 +154,7 @@ export function MarkdownNote(props: MarkdownNote): JSX.Element {
       data: { text: string; html: string },
       event?: ChangeEvent<HTMLTextAreaElement> | undefined
     ) => {
+      props.setText(data.text)
       if (event) {
         event.preventDefault()
       }
@@ -186,8 +194,7 @@ export function MarkdownNote(props: MarkdownNote): JSX.Element {
       <MdEditor
         key="note-editor"
         ref={editorRef}
-        autoFocus={true}
-        defaultValue={props.text}
+        value={props.text}
         placeholder={props.placeHolder}
         view={{ menu: true, md: true, html: false }}
         canView={{
diff --git a/packages/web/components/patterns/RcEditorStyles.tsx b/packages/web/components/patterns/RcEditorStyles.tsx
index fcda55fa9..058cc6bbe 100644
--- a/packages/web/components/patterns/RcEditorStyles.tsx
+++ b/packages/web/components/patterns/RcEditorStyles.tsx
@@ -30,11 +30,5 @@ export const RcEditorStyles = (isDark: boolean, shadow: boolean) => {
       border: '1px solid $thBorderSubtle',
       backgroundColor: isDark ? '#2A2A2A' : 'white',
     },
-    '.rc-md-editor:focus-within': {
-      outline: '2px solid $omnivoreCtaYellow',
-      borderRadius: '5px',
-      border: 'unset',
-      boxShadow: 'unset',
-    },
   }
 }
diff --git a/packages/web/components/templates/article/EpubContainer.tsx b/packages/web/components/templates/article/EpubContainer.tsx
index e59e0a5aa..85a21ad84 100644
--- a/packages/web/components/templates/article/EpubContainer.tsx
+++ b/packages/web/components/templates/article/EpubContainer.tsx
@@ -333,7 +333,6 @@ export default function EpubContainer(props: EpubContainerProps): JSX.Element {
           key={notebookKey}
           viewer={props.viewer}
           item={props.article}
-          highlights={highlightsRef.current}
           onClose={(updatedHighlights, deletedAnnotations) => {
             console.log(
               'closed PDF notebook: ',
diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx
index 12f4a7fc1..8d147f362 100644
--- a/packages/web/components/templates/article/HighlightsLayer.tsx
+++ b/packages/web/components/templates/article/HighlightsLayer.tsx
@@ -749,7 +749,6 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
       <NotebookModal
         viewer={props.viewer}
         item={props.item}
-        highlights={highlights}
         onClose={handleCloseNotebook}
         viewHighlightInReader={(highlightId) => {
           // The timeout here is a bit of a hack to work around rerendering
diff --git a/packages/web/components/templates/article/Notebook.tsx b/packages/web/components/templates/article/Notebook.tsx
index bc13ba303..42b00e668 100644
--- a/packages/web/components/templates/article/Notebook.tsx
+++ b/packages/web/components/templates/article/Notebook.tsx
@@ -2,23 +2,8 @@ import { Box, HStack, VStack, SpanBox } from '../../elements/LayoutPrimitives'
 import { StyledText } from '../../elements/StyledText'
 import { theme } from '../../tokens/stitches.config'
 import type { Highlight } from '../../../lib/networking/fragments/highlightFragment'
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useReducer,
-  useRef,
-  useState,
-} from 'react'
-import {
-  BookOpen,
-  CaretDown,
-  CaretRight,
-  DotsThree,
-  Pencil,
-  PencilLine,
-  X,
-} from 'phosphor-react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { CaretDown, CaretRight } from 'phosphor-react'
 import { updateHighlightMutation } from '../../../lib/networking/mutations/updateHighlightMutation'
 import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 import { diff_match_patch } from 'diff-match-patch'
@@ -43,7 +28,6 @@ type NotebookContentProps = {
   viewer: UserBasicData
 
   item: ReadableItem
-  highlights: Highlight[]
 
   viewInReader: (highlightId: string) => void
 
@@ -73,6 +57,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
     username: props.viewer.profile.username,
     includeFriendsHighlights: false,
   })
+  const [noteText, setNoteText] = useState<string>('')
   const [showConfirmDeleteHighlightId, setShowConfirmDeleteHighlightId] =
     useState<undefined | string>(undefined)
   const [labelsTarget, setLabelsTarget] = useState<Highlight | undefined>(
@@ -138,6 +123,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
     if (note) {
       noteState.current.note = note
       noteState.current.isCreating = false
+      setNoteText(note.annotation || '')
     }
     return result
   }, [articleData])
@@ -204,9 +190,24 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
       }
       createNote(text)
     },
-    [noteState, createNote, updateNote]
+    [noteText, noteState, createNote, updateNote, highlights]
   )
 
+  const deleteDocumentNote = useCallback(() => {
+    ;(async () => {
+      highlights
+        ?.filter((h) => h.type === 'NOTE')
+        .forEach(async (h) => {
+          const result = await deleteHighlightMutation(h.id)
+          if (!result) {
+            showErrorToast('Error deleting note')
+          }
+        })
+      noteState.current.note = undefined
+    })()
+    setNoteText('')
+  }, [noteState, highlights])
+
   const [articleNotesCollapsed, setArticleNotesCollapsed] = useState(false)
   const [highlightsCollapsed, setHighlightsCollapsed] = useState(false)
   const [errorSaving, setErrorSaving] = useState<string | undefined>(undefined)
@@ -238,7 +239,8 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
           >
             <ArticleNotes
               targetId={props.item.id}
-              text={noteState.current.note?.annotation}
+              text={noteText}
+              setText={setNoteText}
               placeHolder="Add notes to this document..."
               saveText={handleSaveNoteText}
             />
@@ -308,7 +310,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
                   p: '10px',
                   mt: '15px',
                   width: '100%',
-                  fontSize: '9px',
+                  fontSize: '13px',
                   color: '$thTextSubtle',
                   alignItems: 'center',
                   justifyContent: 'center',
@@ -373,7 +375,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
           message="Are you sure you want to delete the note from this document?"
           acceptButtonLabel="Delete"
           onAccept={() => {
-            // deleteDocumentNote()
+            deleteDocumentNote()
             if (props.setShowConfirmDeleteNote) {
               props.setShowConfirmDeleteNote(false)
             }
@@ -403,7 +405,6 @@ function SectionTitle(props: SectionTitleProps): JSX.Element {
         css={{
           display: 'flex',
           alignItems: 'center',
-          width: '100%',
           gap: '5px',
         }}
         onClick={(event) => {
diff --git a/packages/web/components/templates/article/NotebookModal.tsx b/packages/web/components/templates/article/NotebookModal.tsx
index 260b93e52..55205f6be 100644
--- a/packages/web/components/templates/article/NotebookModal.tsx
+++ b/packages/web/components/templates/article/NotebookModal.tsx
@@ -24,10 +24,9 @@ type NotebookModalProps = {
   viewer: UserBasicData
 
   item: ReadableItem
-  highlights: Highlight[]
 
   viewHighlightInReader: (arg: string) => void
-  onClose: (highlights: Highlight[]) => void
+  onClose: (highlights: Highlight[], deletedHighlights: Highlight[]) => void
 }
 
 export const getHighlightLocation = (patch: string): number | undefined => {
@@ -42,13 +41,15 @@ export function NotebookModal(props: NotebookModalProps): JSX.Element {
     undefined
   )
 
+  const [deletedHighlights, setDeletedAnnotations] = useState<
+    Highlight[] | undefined
+  >(undefined)
+
   const handleClose = useCallback(() => {
-    console.log('closing: ', allAnnotations)
-    props.onClose(allAnnotations ?? [])
+    props.onClose(allAnnotations ?? [], deletedHighlights ?? [])
   }, [props, allAnnotations])
 
   const handleAnnotationsChange = useCallback((allAnnotations) => {
-    console.log('all annotation: ', allAnnotations)
     setAllAnnotations(allAnnotations)
   }, [])
 
@@ -191,33 +192,3 @@ function CloseButton(props: { close: () => void }): JSX.Element {
     </Button>
   )
 }
-
-function SizeToggle(props: SizeToggleProps): JSX.Element {
-  return (
-    <Button
-      style="plainIcon"
-      css={{
-        display: 'flex',
-        padding: '2px',
-        alignItems: 'center',
-        borderRadius: '9999px',
-        '&:hover': {
-          bg: '#898989',
-        },
-        '@mdDown': {
-          display: 'none',
-        },
-      }}
-      onClick={(event) => {
-        props.setMode(props.mode == 'normal' ? 'maximized' : 'normal')
-        event.preventDefault()
-      }}
-    >
-      {props.mode == 'normal' ? (
-        <ArrowsOut size="15" color={theme.colors.thTextContrast2.toString()} />
-      ) : (
-        <ArrowsIn size="15" color={theme.colors.thTextContrast2.toString()} />
-      )}
-    </Button>
-  )
-}
diff --git a/packages/web/components/templates/article/NotebookPresenter.tsx b/packages/web/components/templates/article/NotebookPresenter.tsx
index 5676e5736..58380fdad 100644
--- a/packages/web/components/templates/article/NotebookPresenter.tsx
+++ b/packages/web/components/templates/article/NotebookPresenter.tsx
@@ -10,7 +10,6 @@ type NotebookPresenterProps = {
   viewer: UserBasicData
 
   item: ReadableItem
-  highlights: Highlight[]
 
   onClose: (highlights: Highlight[]) => void
 }
@@ -20,7 +19,6 @@ export const NotebookPresenter = (props: NotebookPresenterProps) => {
     <NotebookModal
       viewer={props.viewer}
       item={props.item}
-      highlights={props.highlights}
       onClose={(highlights: Highlight[]) => {
         console.log('NotebookModal: ', highlights)
         props.onClose(highlights)
diff --git a/packages/web/components/templates/article/PdfArticleContainer.tsx b/packages/web/components/templates/article/PdfArticleContainer.tsx
index cb4809a32..be65a9583 100644
--- a/packages/web/components/templates/article/PdfArticleContainer.tsx
+++ b/packages/web/components/templates/article/PdfArticleContainer.tsx
@@ -510,14 +510,13 @@ export default function PdfArticleContainer(
           key={notebookKey}
           viewer={props.viewer}
           item={props.article}
-          highlights={highlightsRef.current}
-          onClose={(updatedHighlights, deletedAnnotations) => {
+          onClose={(updatedHighlights, deletedHighlights) => {
             console.log(
               'closed PDF notebook: ',
               updatedHighlights,
-              deletedAnnotations
+              deletedHighlights
             )
-            deletedAnnotations.forEach((highlight) => {
+            deletedHighlights.forEach((highlight) => {
               const event = new CustomEvent('deleteHighlightbyId', {
                 detail: highlight.id,
               })
diff --git a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
index 04455fbb6..8184f40da 100644
--- a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
+++ b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
@@ -447,7 +447,6 @@ function HighlightList(props: HighlightListProps): JSX.Element {
           <NotebookContent
             viewer={props.viewer}
             item={props.item.node}
-            highlights={props.item.node.highlights ?? []}
             viewInReader={viewInReader}
           />
         )}