diff --git a/.storybook/decorators/ViewerContextDecorator.svelte b/.storybook/decorators/ViewerContextDecorator.svelte
index ddab5b2a2..54053bb99 100644
--- a/.storybook/decorators/ViewerContextDecorator.svelte
+++ b/.storybook/decorators/ViewerContextDecorator.svelte
@@ -1,18 +1,8 @@
 <script lang="ts">
-  import type { Note, ViewerMode } from "../../src/lib/api/types";
-
-  import { setContext } from "svelte";
-  import { writable, type Writable } from "svelte/store";
-
-  export let mode: ViewerMode = "document";
-
-  const currentMode: Writable<ViewerMode> = writable(mode);
-  const currentPage: Writable<number> = writable(1);
-  const activeNote: Writable<Note> = writable(null);
-
-  setContext("currentMode", currentMode);
-  setContext("currentPage", currentPage);
-  setContext("activeNote", activeNote);
+  import ViewerContext from "../../src/lib/components/viewer/ViewerContext.svelte";
+  import { document } from "../../src/test/fixtures/documents";
 </script>
 
-<slot />
+<ViewerContext {document}>
+  <slot />
+</ViewerContext>
diff --git a/src/lib/api/documents.ts b/src/lib/api/documents.ts
index c45c77597..486566b34 100644
--- a/src/lib/api/documents.ts
+++ b/src/lib/api/documents.ts
@@ -20,6 +20,7 @@ import type {
   WriteMode,
   ViewerMode,
   ValidationError,
+  Nullable,
 } from "./types";
 
 import { writable, type Writable } from "svelte/store";
@@ -550,13 +551,13 @@ export function pageHashUrl(page: number): string {
  *
  * @param hash URL hash
  */
-export function pageFromHash(hash: string): number {
+export function pageFromHash(hash: string): Nullable<number> {
   const re = /^#document\/p(\d+)/; // match pages and notes
   const match = re.exec(hash);
 
-  if (!match) return 1;
+  if (!match) return null;
 
-  return +match[1] || 1;
+  return +match[1] || null;
 }
 
 /**
diff --git a/src/lib/api/notes.ts b/src/lib/api/notes.ts
index ba0fd63b5..9635f37d5 100644
--- a/src/lib/api/notes.ts
+++ b/src/lib/api/notes.ts
@@ -159,10 +159,7 @@ export function canonicalNoteUrl(document: Document, note: Note): URL {
  * @example https://www.documentcloud.org/documents/2622-agreement-between-conservatives-and-liberal-democrats-to-form-a-coalition-government/#document/p3/a557
  */
 export function noteUrl(document: Document, note: Note): URL {
-  return new URL(
-    `#document/p${note.page_number + 1}/a${note.id}`,
-    canonicalUrl(document),
-  );
+  return new URL(noteHashUrl(note), canonicalUrl(document));
 }
 
 /**
diff --git a/src/lib/api/tests/documents.test.ts b/src/lib/api/tests/documents.test.ts
index 48f3e8cc5..6f7d937cf 100644
--- a/src/lib/api/tests/documents.test.ts
+++ b/src/lib/api/tests/documents.test.ts
@@ -714,7 +714,7 @@ describe("document helper methods", () => {
     expect(documents.pageFromHash(hash)).toStrictEqual(10);
 
     // invalid hash returns page 1
-    expect(documents.pageFromHash("#nopage")).toStrictEqual(1);
+    expect(documents.pageFromHash("#nopage")).toStrictEqual(null);
 
     // match a note hash
     expect(documents.pageFromHash("#document/p2/a2000002")).toStrictEqual(2);
diff --git a/src/lib/components/embeds/DocumentEmbed.svelte b/src/lib/components/embeds/DocumentEmbed.svelte
index 015d4f482..672729955 100644
--- a/src/lib/components/embeds/DocumentEmbed.svelte
+++ b/src/lib/components/embeds/DocumentEmbed.svelte
@@ -1,7 +1,9 @@
+<!-- 
+  @component
+  An embedded document viewer.
+  Assumes it's a child of a ViewerContext
+-->
 <script lang="ts">
-  import type { Document, DocumentText } from "$lib/api/types";
-  import { type EmbedSettings, defaultSettings } from "$lib/utils/embed";
-
   import { setContext } from "svelte";
   import { _ } from "svelte-i18n";
   import { Alert16 } from "svelte-octicons";
@@ -9,13 +11,17 @@
   import Metadata from "../common/Metadata.svelte";
   import Viewer from "../viewer/Viewer.svelte";
 
+  import { defaultSettings, type EmbedSettings } from "$lib/utils/embed";
   import { getUserName, isOrg, isUser } from "$lib/api/accounts";
   import { canonicalUrl } from "$lib/api/documents";
+  import { getDocument } from "../viewer/ViewerContext.svelte";
 
-  export let document: Document;
-  export let text: DocumentText;
   export let settings: Partial<EmbedSettings> = defaultSettings;
 
+  const documentStore = getDocument();
+
+  $: document = $documentStore;
+
   // if we're using this layout, we're embedded
   setContext("embed", true);
 
@@ -43,7 +49,7 @@
     </header>
   {/if}
   <main>
-    <Viewer {document} {text} />
+    <Viewer />
   </main>
 </div>
 
diff --git a/src/lib/components/forms/ConfirmRedaction.svelte b/src/lib/components/forms/ConfirmRedaction.svelte
index 9101914eb..7f84750c3 100644
--- a/src/lib/components/forms/ConfirmRedaction.svelte
+++ b/src/lib/components/forms/ConfirmRedaction.svelte
@@ -20,7 +20,7 @@ This almost certainly lives in a modal.
   import {
     pending,
     redactions,
-  } from "$lib/components/viewer/RedactionPane.svelte";
+  } from "$lib/components/viewer/RedactionLayer.svelte";
   import { canonicalUrl } from "$lib/api/documents";
 
   export let document: Document;
@@ -29,7 +29,7 @@ This almost certainly lives in a modal.
 
   let error: string;
 
-  $: action = canonicalUrl(document).pathname + "?/redact";
+  $: action = new URL("?/redact", canonicalUrl(document)).href;
 
   function onSubmit({ formElement, submitter }) {
     formElement.disabled = true;
diff --git a/src/lib/components/forms/EditNote.svelte b/src/lib/components/forms/EditNote.svelte
index f1925c869..314afe99d 100644
--- a/src/lib/components/forms/EditNote.svelte
+++ b/src/lib/components/forms/EditNote.svelte
@@ -8,7 +8,6 @@ Positioning and generating coordinates should happen outside of this form.
   import type { Bounds, Document, Note } from "$lib/api/types";
 
   import { enhance } from "$app/forms";
-  import { invalidate } from "$app/navigation";
 
   import { createEventDispatcher } from "svelte";
   import { _ } from "svelte-i18n";
@@ -39,7 +38,7 @@ Positioning and generating coordinates should happen outside of this form.
     submitter.disabled = true;
     return ({ result, update }) => {
       if (result.type === "success") {
-        // invalidate(`document:${document.id}`);
+        dispatch("success", result.data.note);
         update(result);
         dispatch("close");
       }
diff --git a/src/lib/components/layouts/ContentLayout.svelte b/src/lib/components/layouts/ContentLayout.svelte
index 0bac315d4..ff1cb2897 100644
--- a/src/lib/components/layouts/ContentLayout.svelte
+++ b/src/lib/components/layouts/ContentLayout.svelte
@@ -33,7 +33,7 @@
     width: 100%;
     position: sticky;
     top: 0;
-    z-index: 2;
+    z-index: var(--z-toolbar);
     padding: 0.625rem;
   }
   main {
@@ -48,7 +48,7 @@
     width: 100%;
     position: sticky;
     bottom: 0;
-    z-index: 2;
+    z-index: var(--z-toolbar);
     padding: 0.625rem;
   }
 
diff --git a/src/lib/components/layouts/DocumentLayout.svelte b/src/lib/components/layouts/DocumentLayout.svelte
index 4ae58fe59..991fffa5a 100644
--- a/src/lib/components/layouts/DocumentLayout.svelte
+++ b/src/lib/components/layouts/DocumentLayout.svelte
@@ -1,8 +1,11 @@
+<!-- @component
+  Assumes it's a child of a ViewerContext
+ -->
+
 <script lang="ts">
   import type {
     AddOnListItem,
     APIResponse,
-    Document,
     DocumentText,
     Page,
     Project,
@@ -25,17 +28,16 @@
 
   import { getCurrentUser } from "$lib/utils/permissions";
   import { isOrg } from "@/api/types/orgAndUser";
-  import { pdfUrl } from "$lib/api/documents";
+  import { getDocument, getText } from "../viewer/ViewerContext.svelte";
 
   const me = getCurrentUser();
 
-  export let document: Document;
-  export let text: DocumentText;
-  export let asset_url: URL = pdfUrl(document);
-  export let query: string = "";
+  export let documentStore = getDocument();
+  export let text: DocumentText = getText();
   export let action: string = "";
   export let addons: Promise<APIResponse<Page<AddOnListItem>>>;
 
+  $: document = $documentStore;
   $: projects = (document.projects ?? []) as Project[];
 </script>
 
@@ -48,7 +50,7 @@
 
   <article slot="content">
     <header><DocumentHeader {document} /></header>
-    <main><Viewer {document} {asset_url} {text} {query} /></main>
+    <main><Viewer /></main>
   </article>
 
   <aside class="column between" slot="action">
diff --git a/src/lib/components/layouts/EmbedLayout.svelte b/src/lib/components/layouts/EmbedLayout.svelte
index aaa46e401..17c753fc4 100644
--- a/src/lib/components/layouts/EmbedLayout.svelte
+++ b/src/lib/components/layouts/EmbedLayout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { EmbedSettings } from "@/lib/utils/embed";
+  import type { EmbedSettings } from "$lib/utils/embed";
 
   import { onMount } from "svelte";
   import { _ } from "svelte-i18n";
diff --git a/src/lib/components/layouts/stories/DocumentLayout.stories.svelte b/src/lib/components/layouts/stories/DocumentLayout.stories.svelte
index 154667ff5..58f1cad3f 100644
--- a/src/lib/components/layouts/stories/DocumentLayout.stories.svelte
+++ b/src/lib/components/layouts/stories/DocumentLayout.stories.svelte
@@ -7,6 +7,7 @@
   import doc from "@/test/fixtures/documents/document-expanded.json";
   import txt from "@/test/fixtures/documents/document.txt.json";
   import { activeAddons } from "@/test/fixtures/addons";
+  import { writable } from "svelte/store";
   const document = doc as Document;
 
   export const meta = {
@@ -25,7 +26,7 @@
   };
 
   let args = {
-    document,
+    document: writable(document),
     mode: "document",
     text: txt,
     query: "",
diff --git a/src/lib/components/layouts/stories/EmbedLayout.stories.svelte b/src/lib/components/layouts/stories/EmbedLayout.stories.svelte
index 63c363889..541a82424 100644
--- a/src/lib/components/layouts/stories/EmbedLayout.stories.svelte
+++ b/src/lib/components/layouts/stories/EmbedLayout.stories.svelte
@@ -8,6 +8,7 @@
   import txt from "@/test/fixtures/documents/document.txt.json";
   import DocumentEmbed from "../../embeds/DocumentEmbed.svelte";
   import { canonicalUrl, pdfUrl } from "$lib/api/documents";
+  import ViewerContext from "../../viewer/ViewerContext.svelte";
 
   const document = doc as Document;
 
@@ -31,13 +32,15 @@
 
 <Story name="With Document" {args} let:args>
   <div class="vh">
-    <EmbedLayout
-      settings={args.settings}
-      canonicalUrl={canonicalUrl(document).href}
-      downloadUrl={pdfUrl(document).href}
-    >
-      <DocumentEmbed settings={args.settings} {document} text={txt} />
-    </EmbedLayout>
+    <ViewerContext {document} text={txt} asset_url={pdfUrl(document)}>
+      <EmbedLayout
+        settings={args.settings}
+        canonicalUrl={canonicalUrl(document).href}
+        downloadUrl={pdfUrl(document).href}
+      >
+        <DocumentEmbed settings={args.settings} />
+      </EmbedLayout>
+    </ViewerContext>
   </div>
 </Story>
 
diff --git a/src/lib/components/viewer/AnnotationLayer.svelte b/src/lib/components/viewer/AnnotationLayer.svelte
new file mode 100644
index 000000000..58f3206cc
--- /dev/null
+++ b/src/lib/components/viewer/AnnotationLayer.svelte
@@ -0,0 +1,377 @@
+<!-- @component
+A box to draw notes in, similar to RedactionLayer.
+This adds a layer to PDFPage and handles interactions.
+
+This layer needs to coordinate between note coordinates 
+and instances of the EditNote form.
+
+Only one note can be added/edited at a time.
+
+Assumes it's a child of a ViewerContext
+-->
+<script lang="ts">
+  import type { BBox, Maybe, Note as NoteType, Nullable } from "$lib/api/types";
+
+  import { invalidate, pushState } from "$app/navigation";
+
+  import { _ } from "svelte-i18n";
+
+  import EditNote from "../forms/EditNote.svelte";
+  import NoteTab from "./NoteTab.svelte";
+
+  import Modal from "../layouts/Modal.svelte";
+  import Portal from "../layouts/Portal.svelte";
+
+  import { width, height, isPageLevel, noteHashUrl } from "$lib/api/notes";
+  import {
+    getCurrentMode,
+    getCurrentNote,
+    getDocument,
+    isEmbedded,
+  } from "$lib/components/viewer/ViewerContext.svelte";
+  import { getNotes, getViewerHref } from "$lib/utils/viewer";
+  import Note from "./Note.svelte";
+  import { fly } from "svelte/transition";
+
+  export let scale = 1.5;
+  export let page_number: number; // zero-indexed
+
+  const documentStore = getDocument();
+  const embed = isEmbedded();
+  const mode = getCurrentMode();
+  const currentNote = getCurrentNote();
+
+  let newNote: Nullable<Partial<NoteType> & BBox> = null;
+  let drawStart: Nullable<[x: number, y: number]> = null;
+  let drawing = false;
+
+  $: document = $documentStore;
+  $: notes =
+    getNotes(document)[page_number]?.filter((note) => !isPageLevel(note)) ?? [];
+  $: writing = $mode === "annotating";
+  $: activeNote = Boolean($currentNote) || (Boolean(newNote) && !drawing);
+  $: edit_page_note =
+    writing &&
+    Boolean($currentNote) &&
+    isPageLevel($currentNote) &&
+    page_number === $currentNote.page_number;
+
+  function getNoteId(note: NoteType) {
+    return noteHashUrl(note).split("#")[1];
+  }
+
+  function getLayerPosition(e: PointerEvent): [x: number, y: number] {
+    // pointer position in window
+    const { offsetX, offsetY } = e;
+    // page dimensions
+    const { clientWidth, clientHeight } = e.target as HTMLDivElement;
+    // box points
+    return [offsetX / clientWidth, offsetY / clientHeight];
+  }
+
+  function startDrawingBox(e: PointerEvent) {
+    if ($currentNote || newNote) return;
+
+    drawing = true;
+    $currentNote = null;
+    const [x, y] = getLayerPosition(e);
+    drawStart = [x, y];
+    // when starting, the note is a 0px shape
+    newNote = {
+      x1: x,
+      x2: x,
+      y1: y,
+      y2: y,
+    };
+  }
+
+  function continueDrawingBox(e: PointerEvent) {
+    if (!drawing || !newNote) return;
+
+    const [x, y] = getLayerPosition(e);
+    const [startX, startY] = drawStart;
+
+    const movingRight = x > startX;
+    const movingDown = y > startY;
+
+    const x1 = movingRight ? newNote.x1 : x;
+    const x2 = movingRight ? x : newNote.x2;
+    const y1 = movingDown ? newNote.y1 : y;
+    const y2 = movingDown ? y : newNote.y2;
+
+    newNote = {
+      x1,
+      x2,
+      y1,
+      y2,
+    };
+  }
+
+  function finishDrawingBox(e: PointerEvent) {
+    if (!newNote || !drawing) return;
+
+    newNote = {
+      ...newNote,
+      // now initialize some note values
+      page_number,
+      title: "",
+      content: "",
+      access: "private",
+    };
+
+    drawStart = null;
+    drawing = false;
+  }
+
+  function openNote(e: MouseEvent, note: NoteType) {
+    const target = e.target as HTMLAnchorElement;
+    const href =
+      target?.href || getViewerHref({ document, note, mode: $mode, embed });
+    $currentNote = note;
+    pushState(href, { note });
+  }
+
+  function closeNote() {
+    drawing = false;
+    newNote = null;
+    $currentNote = null;
+    const href = getViewerHref({ document, mode: $mode, embed });
+    pushState(href, {});
+  }
+
+  function onkeypress(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      closeNote();
+    }
+  }
+
+  function onEditNoteSuccess(
+    e: CustomEvent<Maybe<NoteType>>,
+    oldNote: Maybe<NoteType>,
+  ) {
+    const editedNote = e.detail;
+    // Make an optimistic update to the `$documentStore`,
+    // which should be overwritten by invalidation.
+    // Start by removing the old note from the notes array.
+    const newDocNotes = document.notes.filter(
+      (note) => note.id !== oldNote?.id,
+    );
+    // When a note is added or edited, add or replace it in the array.
+    // When it's deleted, `editedNote` will be undefined so we'll skip this.
+    if (editedNote) newDocNotes.push(editedNote);
+    // Update the $documentStore with new value for `document.notes`.
+    documentStore.update((document) => ({ ...document, notes: newDocNotes }));
+    // Finally, invalidate the document. After it's refetched, the
+    // $documentStore will be updated with fresh data from the API.
+    invalidate(`document:${document.id}`);
+  }
+</script>
+
+<svelte:window on:keydown={onkeypress} />
+
+<div
+  class="notes"
+  class:writing
+  class:drawing
+  class:activeNote
+  on:pointerdown|self={startDrawingBox}
+  on:pointermove|self={continueDrawingBox}
+  on:pointerup|self={finishDrawingBox}
+>
+  {#each notes as note (note.id)}
+    <a
+      id={getNoteId(note)}
+      class="note-tab"
+      href={getViewerHref({ document, note, mode: $mode, embed })}
+      title={note.title}
+      style:top="calc({note.y1} * 100%)"
+      on:click={(e) => openNote(e, note)}
+    >
+      <NoteTab access={note.access} title={note.title} />
+    </a>
+    <a
+      href={getViewerHref({ document, note, mode: $mode, embed })}
+      class="note-highlight {note.access}"
+      title={note.title}
+      style:top="{note.y1 * 100}%"
+      style:left="{note.x1 * 100}%"
+      style:width="{width(note) * 100}%"
+      style:height="{height(note) * 100}%"
+      on:click={(e) => openNote(e, note)}
+    >
+      {note.title}
+    </a>
+    {#if note.id === $currentNote?.id}
+      {#if writing}
+        <div class="note-form" style:top="calc({note.y1} * 100% - 3.25rem)">
+          <EditNote
+            bind:note
+            {document}
+            {page_number}
+            on:close={closeNote}
+            on:success={(e) => onEditNoteSuccess(e, note)}
+          />
+        </div>
+      {:else}
+        <div class="note-reading" style:top="calc({note.y1} * 100% - 3.25rem)">
+          <Note {note} {scale} on:close={closeNote} />
+        </div>
+      {/if}
+    {/if}
+  {/each}
+
+  {#if newNote}
+    <div
+      class="box {newNote.access}"
+      style:top="{newNote.y1 * 100}%"
+      style:left="{newNote.x1 * 100}%"
+      style:width="{width(newNote) * 100}%"
+      style:height="{height(newNote) * 100}%"
+    ></div>
+
+    {#if !drawing}
+      <div
+        class="note-form"
+        style:top="calc({newNote.y2} * 100% + 1.5rem)"
+        transition:fly={{ duration: 250, y: "-1.1rem" }}
+      >
+        <EditNote
+          {document}
+          bind:note={newNote}
+          on:close={closeNote}
+          on:success={(e) => onEditNoteSuccess(e, undefined)}
+        />
+      </div>
+    {/if}
+  {/if}
+</div>
+
+{#if edit_page_note}
+  <Portal>
+    <Modal on:close={closeNote}>
+      <h2 slot="title">
+        {$_("annotate.cta.add-note")}
+      </h2>
+
+      <EditNote
+        {document}
+        note={$currentNote}
+        {page_number}
+        on:close={closeNote}
+        on:success={(e) => onEditNoteSuccess(e, $currentNote)}
+      />
+    </Modal>
+  </Portal>
+{/if}
+
+<style>
+  .notes {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    pointer-events: none;
+  }
+
+  .notes.writing {
+    cursor: crosshair;
+    pointer-events: all;
+  }
+
+  .notes :global(*) {
+    pointer-events: all;
+  }
+
+  .notes.drawing :global(*) {
+    pointer-events: none;
+  }
+
+  .note-tab {
+    left: -3rem;
+    position: absolute;
+    pointer-events: all;
+
+    scroll-margin-top: 6rem;
+  }
+
+  .note-reading {
+    position: absolute;
+    left: -1.5rem;
+    width: 44rem;
+    max-width: 100%;
+    z-index: var(--z-note);
+  }
+
+  .note-form {
+    position: absolute;
+    left: -1.5rem;
+    width: 44rem;
+    max-width: 100%;
+    z-index: var(--z-note);
+    pointer-events: all;
+  }
+
+  .notes.activeNote {
+    cursor: auto;
+    pointer-events: none;
+  }
+
+  .box {
+    position: absolute;
+    border: 1px solid var(--note-private);
+    background: var(--note-private);
+    opacity: 0.75;
+    mix-blend-mode: multiply;
+    pointer-events: stroke;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+
+    /* if we make boxes editable
+    cursor: grab;
+    resize: both;
+    overflow: hidden;
+    */
+  }
+
+  .box.public {
+    border-color: var(--note-public);
+    background: var(--note-public);
+  }
+
+  .box.organization {
+    border-color: var(--note-org);
+    background: var(--note-org);
+  }
+
+  .box.private {
+    border-color: var(--note-private);
+    background: var(--note-private);
+  }
+
+  a.note-highlight {
+    border-radius: 0.25rem;
+    color: transparent;
+    position: absolute;
+    opacity: 0.5;
+    pointer-events: all;
+    mix-blend-mode: multiply;
+
+    border: 0.5rem solid var(--gray-4);
+    /* pointer-events: none; */
+  }
+
+  a.note-highlight.public {
+    background-color: var(--note-public);
+    border-color: var(--note-public);
+  }
+
+  a.note-highlight.private {
+    background-color: var(--note-private);
+    border-color: var(--note-private);
+  }
+
+  a.note-highlight.organization {
+    background-color: var(--note-org);
+    border-color: var(--note-org);
+  }
+</style>
diff --git a/src/lib/components/viewer/AnnotationPane.svelte b/src/lib/components/viewer/AnnotationPane.svelte
deleted file mode 100644
index 0cfddc356..000000000
--- a/src/lib/components/viewer/AnnotationPane.svelte
+++ /dev/null
@@ -1,313 +0,0 @@
-<!-- @component
-A box to draw notes in, similar to RedactionPane.
-This adds a layer to PDFPage and handles interactions.
-
-This layer needs to coordinate between note coordinates 
-and instances of the EditNote form.
-
-Only one note can be added/edited at a time.
--->
-<script lang="ts">
-  import type { Writable } from "svelte/store";
-  import type { BBox, Document, Note as NoteType } from "$lib/api/types";
-
-  import { pushState } from "$app/navigation";
-
-  import { getContext } from "svelte";
-  import { _ } from "svelte-i18n";
-  import { XCircleFill16 } from "svelte-octicons";
-
-  import EditNote from "../forms/EditNote.svelte";
-  import NoteLink from "./NoteLink.svelte";
-  import NoteTab from "./NoteTab.svelte";
-
-  import Modal from "../layouts/Modal.svelte";
-  import Portal from "../layouts/Portal.svelte";
-
-  import { noteHashUrl, width, height, isPageLevel } from "$lib/api/notes";
-
-  export let document: Document;
-  export let notes: NoteType[] = [];
-
-  export let page_number: number; // zero-indexed
-
-  const activeNote: Writable<Partial<NoteType>> = getContext("activeNote");
-  let container: HTMLElement;
-  let newNote: Partial<NoteType> & BBox = null; // is this too clever?
-
-  let dragging = false;
-  let form: EditNote;
-
-  $: editing = Boolean($activeNote) || (Boolean(newNote) && !dragging);
-  $: edit_page_note =
-    Boolean($activeNote) &&
-    isPageLevel($activeNote) &&
-    $activeNote.page_number === page_number;
-
-  function pointerdown(e) {
-    if ($activeNote || newNote) return;
-
-    dragging = true;
-
-    const { offsetX, offsetY } = e;
-    const { clientWidth, clientHeight } = e.target;
-
-    newNote = {
-      x1: offsetX / clientWidth,
-      x2: offsetX / clientWidth,
-      y1: offsetY / clientHeight,
-      y2: offsetY / clientHeight,
-    };
-  }
-
-  function pointermove(e) {
-    if (!dragging) return;
-
-    const { offsetX, offsetY } = e;
-    const { clientWidth, clientHeight } = e.target;
-
-    let x1: number, x2: number, y1: number, y2: number;
-    let x = offsetX / clientWidth;
-    let y = offsetY / clientHeight;
-
-    if (x > newNote.x1) {
-      // moving right
-      x1 = newNote.x1;
-      x2 = x;
-    } else {
-      // moving left
-      x1 = x;
-      x2 = newNote.x2;
-    }
-
-    if (y > newNote.y1) {
-      y1 = newNote.y1;
-      y2 = y;
-    } else {
-      y1 = y;
-      y2 = newNote.y2;
-    }
-
-    newNote = {
-      x1,
-      x2,
-      y1,
-      y2,
-    };
-  }
-
-  function pointerup(e) {
-    dragging = false;
-
-    if (!newNote || editing) return;
-
-    const { offsetX, offsetY } = e;
-    const { clientWidth, clientHeight } = e.target;
-
-    const x = offsetX / clientWidth;
-    const y = offsetY / clientHeight;
-
-    newNote = {
-      page_number,
-      x1: Math.min(newNote.x1, x),
-      x2: Math.max(newNote.x2, x),
-      y1: Math.min(newNote.y1, y),
-      y2: Math.max(newNote.y2, y),
-
-      title: "",
-      content: "",
-      access: "private",
-    };
-  }
-
-  function openNote(e, note: NoteType) {
-    activeNote?.set(note);
-    const href = e.target?.href || noteHashUrl(note);
-    pushState(href, {});
-  }
-
-  function closeNote() {
-    activeNote?.set(null);
-    newNote = null;
-    dragging = false;
-    pushState(window.location.pathname, {});
-  }
-
-  function onkeypress(e) {
-    if (e.key === "Escape") {
-      closeNote();
-    }
-  }
-</script>
-
-<svelte:window on:keydown={onkeypress} />
-
-<div
-  bind:this={container}
-  class="notes"
-  class:dragging
-  class:editing
-  on:pointerdown|self={pointerdown}
-  on:pointermove|self={pointermove}
-  on:pointerup|self={pointerup}
->
-  {#each notes || [] as note}
-    {@const is_active = note.id === $activeNote?.id}
-    <a
-      class="note"
-      href={noteHashUrl(note)}
-      title={note.title}
-      style:top="{note.y1 * 100}%"
-      on:click={(e) => openNote(e, note)}
-    >
-      <NoteTab access={note.access} />
-      {#if is_active}
-        <button
-          class="close"
-          on:click|preventDefault|stopPropagation={closeNote}
-        >
-          <XCircleFill16 />
-        </button>
-      {/if}
-    </a>
-    {#if is_active}
-      <div
-        class="box {note.access}"
-        style:top="{note.y1 * 100}%"
-        style:left="{note.x1 * 100}%"
-        style:width="{width(note) * 100}%"
-        style:height="{height(note) * 100}%"
-      ></div>
-
-      <div class="note-form" style:top="calc({note.y2} * 100% + 1rem)">
-        <EditNote
-          bind:this={form}
-          {document}
-          bind:note
-          {page_number}
-          on:close={closeNote}
-        />
-      </div>
-    {:else}
-      <NoteLink {note} />
-    {/if}
-  {/each}
-
-  {#if newNote}
-    <div
-      class="box {newNote.access}"
-      style:top="{newNote.y1 * 100}%"
-      style:left="{newNote.x1 * 100}%"
-      style:width="{width(newNote) * 100}%"
-      style:height="{height(newNote) * 100}%"
-    ></div>
-
-    {#if !dragging}
-      <div class="note-form" style:top="calc({newNote.y2} * 100% + 1rem)">
-        <EditNote
-          bind:this={form}
-          {document}
-          bind:note={newNote}
-          {page_number}
-          on:close={closeNote}
-        />
-      </div>
-    {/if}
-  {/if}
-</div>
-
-{#if edit_page_note}
-  <Portal>
-    <Modal on:close={closeNote}>
-      <h2 slot="title">
-        {$_("annotate.cta.add-note")}
-      </h2>
-
-      <EditNote
-        {document}
-        note={$activeNote}
-        {page_number}
-        on:close={closeNote}
-      />
-    </Modal>
-  </Portal>
-{/if}
-
-<style>
-  .notes {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-
-    cursor: crosshair;
-  }
-
-  .notes :global(*) {
-    pointer-events: all;
-  }
-
-  .notes.dragging :global(*) {
-    pointer-events: none;
-  }
-
-  .note {
-    position: absolute;
-    pointer-events: all;
-    left: -3rem;
-  }
-
-  .note button {
-    border: none;
-    padding: 0;
-    background: none;
-    cursor: pointer;
-
-    position: absolute;
-    margin: auto 0;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-
-    display: flex;
-    padding-left: 0.5rem;
-    justify-content: left;
-    align-items: center;
-  }
-
-  .note-form {
-    position: absolute;
-    pointer-events: all;
-    width: 100%;
-    z-index: 10;
-  }
-
-  .notes.editing {
-    cursor: auto;
-    pointer-events: none;
-  }
-
-  .box {
-    position: absolute;
-    border: 3px dashed var(--gray-4);
-    background-color: transparent;
-    /* if we make boxes editable
-    cursor: grab;
-    resize: both;
-    overflow: hidden;
-    */
-  }
-
-  .box.public {
-    border-color: var(--note-public);
-  }
-
-  .box.organization {
-    border-color: var(--note-org);
-  }
-
-  .box.private {
-    border-color: var(--note-private);
-  }
-</style>
diff --git a/src/lib/components/viewer/toolbars/AnnotationToolbar.svelte b/src/lib/components/viewer/AnnotationToolbar.svelte
similarity index 94%
rename from src/lib/components/viewer/toolbars/AnnotationToolbar.svelte
rename to src/lib/components/viewer/AnnotationToolbar.svelte
index 7c348fc69..e85c454f6 100644
--- a/src/lib/components/viewer/toolbars/AnnotationToolbar.svelte
+++ b/src/lib/components/viewer/AnnotationToolbar.svelte
@@ -5,7 +5,7 @@
   import Button from "$lib/components/common/Button.svelte";
   import Flex from "$lib/components/common/Flex.svelte";
   import Tooltip from "$lib/components/common/Tooltip.svelte";
-  import { getViewerHref } from "@/lib/utils/viewer";
+  import { getViewerHref } from "$lib/utils/viewer";
 
   let width: number;
 </script>
diff --git a/src/lib/components/viewer/ThumbnailGrid.svelte b/src/lib/components/viewer/Grid.svelte
similarity index 76%
rename from src/lib/components/viewer/ThumbnailGrid.svelte
rename to src/lib/components/viewer/Grid.svelte
index 9d51c9ffe..6b91eb7cd 100644
--- a/src/lib/components/viewer/ThumbnailGrid.svelte
+++ b/src/lib/components/viewer/Grid.svelte
@@ -2,9 +2,11 @@
   @component
   Show a grid of thumbnail images for a single document.
   Each image should link to its respective page.
+
+  Assumes it's a child of a ViewerContext
 -->
 <script lang="ts">
-  import type { Document, Sizes } from "$lib/api/types";
+  import type { Sizes } from "$lib/api/types";
 
   import { _ } from "svelte-i18n";
 
@@ -13,11 +15,16 @@
   import { IMAGE_WIDTHS_MAP } from "@/config/config.js";
   import { pageImageUrl } from "$lib/api/documents";
   import { pageSizesFromSpec } from "@/api/pageSize.js";
-  import { isEmbedded } from "@/lib/utils/viewer";
+  import {
+    getDocument,
+    getZoom,
+  } from "$lib/components/viewer/ViewerContext.svelte";
+  import { zoomToSize } from "@/lib/utils/viewer";
 
-  export let document: Document;
   export let size: Sizes = "thumbnail";
-  export let embed = isEmbedded();
+
+  const documentStore = getDocument();
+  const zoom = getZoom();
 
   const SCALE = {
     thumbnail: 1,
@@ -26,6 +33,8 @@
     large: 3,
   };
 
+  $: document = $documentStore;
+  $: size = zoomToSize($zoom);
   $: sizes = pageSizesFromSpec(document.page_spec);
   $: scale = SCALE[size] ?? 1;
   $: width = IMAGE_WIDTHS_MAP.get(size) / scale;
@@ -35,8 +44,8 @@
   {#each sizes as aspect, n}
     {@const page_number = n + 1}
     {@const height = width * aspect}
-    <Page {document} {page_number} {embed} let:href>
-      <a {href}>
+    <Page {page_number} let:documentHref>
+      <a href={documentHref}>
         <img
           src={pageImageUrl(document, page_number, size).href}
           alt="Page {page_number}, {document.title}"
diff --git a/src/lib/components/viewer/Note.svelte b/src/lib/components/viewer/Note.svelte
index cd33c89fb..1e28750c6 100644
--- a/src/lib/components/viewer/Note.svelte
+++ b/src/lib/components/viewer/Note.svelte
@@ -4,14 +4,16 @@
 
   It can use *either* a loaded PDF or a document image to render
   a document excerpt.
+
+  Assumes it's a child of a ViewerContext
 -->
 <script lang="ts">
-  import type { Writable } from "svelte/store";
+  import type { PDFDocumentProxy } from "pdfjs-dist/types/src/display/api";
   import type { User } from "@/api/types/orgAndUser";
-  import type { Document, Note, Sizes, ViewerMode } from "$lib/api/types";
+  import type { Document, Note, Sizes } from "$lib/api/types";
 
   import DOMPurify from "isomorphic-dompurify";
-  import { getContext, onMount } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   import { _ } from "svelte-i18n";
   import {
     Globe16,
@@ -19,8 +21,8 @@
     Pencil16,
     People16,
     Share16,
+    XCircle16,
   } from "svelte-octicons";
-  import Action from "../common/Action.svelte";
 
   import { ALLOWED_ATTR, ALLOWED_TAGS } from "@/config/config.js";
   import { width, height, isPageLevel, noteHashUrl } from "$lib/api/notes";
@@ -29,13 +31,26 @@
   import Modal from "../layouts/Modal.svelte";
   import Share from "../documents/Share.svelte";
   import { getUserName } from "@/lib/api/accounts";
-  import { getViewerHref, isEmbedded } from "@/lib/utils/viewer";
+  import {
+    getCurrentMode,
+    getDocument,
+    getPDF,
+    isEmbedded,
+  } from "$lib/components/viewer/ViewerContext.svelte";
+  import { getViewerHref } from "$lib/utils/viewer";
+  import Button from "../common/Button.svelte";
+
+  const documentStore = getDocument();
+  const pdf = getPDF();
+  const embed = isEmbedded();
+  const mode = getCurrentMode();
+
+  const dispatch = createEventDispatcher();
 
-  export let document: Document;
   export let note: Note;
-  export let pdf = null; // PDFDocumentProxy
-  export let scale = 1.5;
-  export let embed = isEmbedded();
+  export let scale = 2;
+
+  type AsyncPDF = typeof $pdf;
 
   const SIZE: Sizes = "large";
 
@@ -57,33 +72,32 @@
     },
   };
 
-  const mode: Writable<ViewerMode> = getContext("currentMode");
-
   let canvas: HTMLCanvasElement;
-  let renderTask: { promise: Promise<any> };
   let rendering: Promise<any>;
 
   let shareNoteOpen = false;
 
+  $: document = $documentStore;
   $: page_level = isPageLevel(note);
   $: page_number = note.page_number + 1; // note pages are 0-indexed
   $: user = typeof note.user === "object" ? (note.user as User) : null;
-  $: rendering = render(canvas, document, pdf); // avoid re-using the same canvas
+  $: rendering = render(canvas, document, $pdf); // avoid re-using the same canvas
   $: edit_link = getViewerHref({ document, note, mode: "annotating" });
   $: canEdit = note.edit_access && !embed;
 
-  onMount(() => {
-    rendering = render(canvas, document, pdf);
-  });
-
-  async function render(canvas: HTMLCanvasElement, document: Document, pdf) {
+  async function render(
+    canvas: HTMLCanvasElement,
+    document: Document,
+    pdf: AsyncPDF,
+  ) {
     if (!canvas) return;
     if (rendering) {
       await rendering;
     }
 
     if (pdf) {
-      return renderPDF(canvas, pdf);
+      const resolvedPdf = await pdf;
+      return renderPDF(canvas, resolvedPdf);
     }
 
     if (document && !pdf) {
@@ -123,11 +137,7 @@
     });
   }
 
-  async function renderPDF(canvas: HTMLCanvasElement, pdf) {
-    if (renderTask) {
-      await renderTask.promise;
-    }
-
+  async function renderPDF(canvas: HTMLCanvasElement, pdf: PDFDocumentProxy) {
     const context = canvas.getContext("2d");
     const page = await pdf.getPage(page_number);
     const [x, y, w, h] = page.view;
@@ -149,7 +159,7 @@
     canvas.width = Math.floor(noteWidth * dpr);
     canvas.height = Math.floor(noteHeight * dpr);
 
-    renderTask = page.render({
+    const renderTask = page.render({
       canvasContext: context,
       viewport,
       transform,
@@ -165,10 +175,13 @@
       ALLOWED_ATTR,
     });
   }
+
+  function closeNote() {
+    dispatch("close");
+  }
 </script>
 
 <div
-  id="a{note.id}"
   class="note {note.access} {$mode || 'notes'}"
   class:page_level
   style:--x1={note.x1}
@@ -179,15 +192,17 @@
   style:--note-height={height(note)}
 >
   <header>
-    <h3>{note.title}</h3>
-    <div class="actions">
-      <Action icon={Share16} on:click={() => (shareNoteOpen = true)}>
-        {$_("dialog.share")}
-      </Action>
-      {#if canEdit}
-        <Action icon={Pencil16}>
-          <a href={edit_link}>{$_("dialog.edit")}</a>
-        </Action>
+    {#if !page_level && $mode === "document"}
+      <Button minW={false} ghost on:click={closeNote}>
+        <XCircle16 />
+      </Button>
+    {/if}
+    <div class="headerText">
+      <h3>{note.title}</h3>
+      {#if user}
+        <p class="author">
+          {$_("annotation.by", { values: { name: getUserName(user) } })}
+        </p>
       {/if}
     </div>
   </header>
@@ -204,12 +219,24 @@
       <svelte:component this={access[note.access].icon} />
       {$_(`access.${access[note.access].value}.title`)}
     </span>
-
-    {#if user}
-      <p class="author">
-        {$_("annotation.by", { values: { name: getUserName(user) } })}
-      </p>
-    {/if}
+    <div class="actions">
+      {#if canEdit}
+        <Button ghost minW={false} mode="primary" size="small" href={edit_link}>
+          <Pencil16 />
+          {$_("dialog.edit")}
+        </Button>
+      {/if}
+      <Button
+        ghost
+        minW={false}
+        mode="primary"
+        size="small"
+        on:click={() => (shareNoteOpen = true)}
+      >
+        <Share16 />
+        {$_("dialog.share")}
+      </Button>
+    </div>
   </footer>
 </div>
 {#if shareNoteOpen}
@@ -227,15 +254,20 @@
     padding: var(--font-xs, 0.75rem) var(--font-md, 1rem);
     flex-direction: column;
     align-items: flex-start;
-    gap: var(--font-xs, 0.75rem);
+    gap: 1rem;
     pointer-events: all;
+    position: relative;
 
     border-radius: 0.5rem;
     border: 1px solid var(--gray-2, #d8dee2);
     background: var(--white, #fff);
 
+    scroll-margin-top: 6rem;
+
+    z-index: var(--z-note);
+
     /* shadow-2 */
-    box-shadow: 0px 2px 8px 2px var(--shadow-1, rgba(30, 48, 56, 0.15));
+    box-shadow: var(--shadow-2);
   }
 
   /* overlay */
@@ -267,9 +299,22 @@
 
   header {
     display: flex;
-    justify-content: space-between;
     align-items: center;
     align-self: stretch;
+    gap: 0.5rem;
+  }
+
+  .headerText {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: baseline;
+    gap: 1rem;
+  }
+
+  h3 {
+    flex: 0 1 auto;
+    text-align: left;
+    font-weight: var(--font-semibold);
   }
 
   .actions {
@@ -290,52 +335,59 @@
   }
 
   .public .highlight {
-    border-color: var(--note-public);
+    border-color: var(--yellow-3);
   }
 
   .private .highlight {
-    border-color: var(--note-private);
+    border-color: var(--blue-3);
   }
 
   .organization .highlight {
-    border-color: var(--note-org);
+    border-color: var(--green-3);
+  }
+
+  .content {
+    line-height: 1.5;
+    font-size: var(--font-md);
+  }
+
+  .author {
+    font-size: var(--font-xs);
+    color: var(--gray-5);
   }
 
   canvas {
     max-width: 100%;
-    padding: 0.25rem;
+    padding: 1rem;
   }
 
   footer {
     display: flex;
-    justify-content: space-between;
+    gap: 1rem;
     align-items: center;
     align-self: stretch;
   }
 
-  footer p {
-    color: var(--gray-4, #5c717c);
-    font-size: var(--font-sm);
-  }
-
   span.access {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     font-size: var(--font-sm);
+    font-weight: var(--font-semibold);
   }
 
   span.access.public {
-    fill: var(--note-public);
+    fill: var(--yellow-3);
+    color: var(--yellow-4);
   }
 
   span.access.organization {
-    color: var(--note-org);
-    fill: var(--note-org);
+    fill: var(--green-3);
+    color: var(--green-4);
   }
 
   span.access.private {
-    color: var(--note-private);
-    fill: var(--note-private);
+    color: var(--blue-4);
+    fill: var(--blue-3);
   }
 </style>
diff --git a/src/lib/components/viewer/NoteLink.svelte b/src/lib/components/viewer/NoteLink.svelte
deleted file mode 100644
index 2427d6799..000000000
--- a/src/lib/components/viewer/NoteLink.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<!-- @component
-A link to a note, overlaid on a document
--->
-<script lang="ts">
-  import type { Writable } from "svelte/store";
-  import type { Note } from "$lib/api/types";
-
-  import { pushState } from "$app/navigation";
-  import { getContext } from "svelte";
-  import { noteHashUrl, width, height } from "$lib/api/notes";
-
-  export let note: Note;
-
-  const activeNote: Writable<Note> = getContext("activeNote");
-
-  $: href = noteHashUrl(note);
-
-  function onClick(e) {
-    activeNote?.set(note);
-    pushState(e.target.href, {});
-  }
-</script>
-
-<a
-  {href}
-  class="note {note.access}"
-  title={note.title}
-  style:top="{note.y1 * 100}%"
-  style:left="{note.x1 * 100}%"
-  style:width="{width(note) * 100}%"
-  style:height="{height(note) * 100}%"
-  on:click={onClick}
->
-  {note.title}
-</a>
-
-<style>
-  a.note {
-    border-radius: 0.25rem;
-    color: transparent;
-    position: absolute;
-    opacity: 0.5;
-    pointer-events: all;
-    mix-blend-mode: multiply;
-  }
-
-  a.note.public {
-    background-color: var(--note-public);
-  }
-
-  a.note.private {
-    background-color: var(--note-private);
-    border-color: var(--note-private);
-  }
-
-  a.note.organization {
-    background-color: var(--note-org);
-    border-color: var(--note-org);
-  }
-</style>
diff --git a/src/lib/components/viewer/NoteTab.svelte b/src/lib/components/viewer/NoteTab.svelte
index 3208fc5ab..460eff06a 100644
--- a/src/lib/components/viewer/NoteTab.svelte
+++ b/src/lib/components/viewer/NoteTab.svelte
@@ -6,20 +6,24 @@
 -->
 <script lang="ts">
   import type { Access } from "$lib/api/types";
+  import Tooltip from "../common/Tooltip.svelte";
 
   export let access: Access | "" = "";
   export let size: "small" | "normal" = "normal";
+  export let title: string = undefined;
 </script>
 
-<div class="tab {access} {size}"></div>
+<Tooltip caption={title} placement="right">
+  <div class="tab {access} {size}"></div>
+</Tooltip>
 
 <style>
   .tab {
-    width: 6vw;
-    height: 3vw;
+    width: 5rem;
+    height: 2rem;
     opacity: 0.8;
     background: var(--blue-3, #4294f0);
-    mix-blend-mode: multiply;
+    /* mix-blend-mode: multiply; */
 
     /* Glare 1 */
     box-shadow: var(--glare);
diff --git a/src/lib/components/viewer/Notes.svelte b/src/lib/components/viewer/Notes.svelte
index 1de10d950..b3c1f8edc 100644
--- a/src/lib/components/viewer/Notes.svelte
+++ b/src/lib/components/viewer/Notes.svelte
@@ -1,85 +1,49 @@
-<script lang="ts">
-  import type { Document } from "$lib/api/types";
+<!-- @component
+Assumes it's a child of a ViewerContext
+ -->
 
-  import * as pdfjs from "pdfjs-dist/legacy/build/pdf.mjs";
-  if (!pdfjs.GlobalWorkerOptions.workerSrc) {
-    pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-      "pdfjs-dist/legacy/build/pdf.worker.mjs",
-      import.meta.url,
-    ).href;
-  }
-  import { onMount } from "svelte";
+<script lang="ts">
   import { _ } from "svelte-i18n";
   import { ListOrdered24 } from "svelte-octicons";
 
   import Empty from "../common/Empty.svelte";
   import Note from "./Note.svelte";
 
-  import { getViewerHref, isEmbedded } from "@/lib/utils/viewer";
+  import { getViewerHref } from "$lib/utils/viewer";
+  import {
+    getDocument,
+    isEmbedded,
+  } from "$lib/components/viewer/ViewerContext.svelte";
 
-  export let document: Document;
-  export let pdf = new Promise(() => {});
-  export let task: ReturnType<typeof pdfjs.getDocument> | undefined = null;
-  export let asset_url: URL = undefined;
-  export let embed = isEmbedded();
+  const documentStore = getDocument();
+  const embed = isEmbedded();
 
+  $: document = $documentStore;
   $: notes = document.notes;
   $: annotate = getViewerHref({ document, mode: "annotating" });
-
-  onMount(async () => {
-    if (asset_url && !task) {
-      task = pdfjs.getDocument({ url: asset_url });
-      pdf = task.promise;
-    }
-  });
 </script>
 
 <div class="pages">
-  {#if asset_url}
-    {#await pdf then pdf}
-      {#each notes as note}
-        <div class="note-wrapper">
-          <Note {document} {note} {pdf} {embed} />
-          <h4>
-            <a href={getViewerHref({ document, note, embed })}>
-              {$_("documents.page")}
-              {note.page_number + 1}
-            </a>
-          </h4>
-        </div>
-      {:else}
-        <Empty icon={ListOrdered24}>
-          <h2>{$_("notes.empty")}</h2>
-          {#if document.edit_access}
-            <p>
-              <a href={annotate}> {$_("notes.cta")}</a>
-            </p>
-          {/if}
-        </Empty>
-      {/each}
-    {/await}
+  {#each notes as note}
+    <div class="note-wrapper">
+      <Note {note} />
+      <h4>
+        <a href={getViewerHref({ document, note, embed })}>
+          {$_("documents.page")}
+          {note.page_number + 1}
+        </a>
+      </h4>
+    </div>
   {:else}
-    {#each notes as note}
-      <div class="note-wrapper">
-        <Note {document} {note} {embed} />
-        <h4>
-          <a href={getViewerHref({ document, note, embed })}>
-            {$_("documents.page")}
-            {note.page_number + 1}
-          </a>
-        </h4>
-      </div>
-    {:else}
-      <Empty icon={ListOrdered24}>
-        <h2>{$_("notes.empty")}</h2>
-        {#if document.edit_access}
-          <p>
-            <a href={annotate}> {$_("notes.cta")}</a>
-          </p>
-        {/if}
-      </Empty>
-    {/each}
-  {/if}
+    <Empty icon={ListOrdered24}>
+      <h2>{$_("notes.empty")}</h2>
+      {#if document.edit_access}
+        <p>
+          <a href={annotate}> {$_("notes.cta")}</a>
+        </p>
+      {/if}
+    </Empty>
+  {/each}
 </div>
 
 <style>
diff --git a/src/lib/components/viewer/NotesPane.svelte b/src/lib/components/viewer/NotesPane.svelte
deleted file mode 100644
index d6f5255cc..000000000
--- a/src/lib/components/viewer/NotesPane.svelte
+++ /dev/null
@@ -1,110 +0,0 @@
-<!-- @component
-Display notes on a document. This is the read-only version.
-To create or edit notes, see `AnnotationPane.svelte`.
--->
-<script lang="ts">
-  import type { Writable } from "svelte/store";
-  import type { Document, Note as NoteType, ViewerMode } from "$lib/api/types";
-
-  import { pushState } from "$app/navigation";
-
-  import { getContext } from "svelte";
-  import { XCircleFill16 } from "svelte-octicons";
-
-  import Note from "./Note.svelte";
-  import NoteLink from "./NoteLink.svelte";
-  import NoteTab from "./NoteTab.svelte";
-
-  import { noteHashUrl } from "$lib/api/notes";
-  import { getViewerHref, isEmbedded } from "@/lib/utils/viewer";
-
-  export let document: Document;
-  export let notes: NoteType[] = [];
-  export let pdf = null; // PDFDocumentProxy
-  export let scale = 1.5;
-  export let embed = isEmbedded();
-
-  const activeNote: Writable<NoteType> = getContext("activeNote");
-  const currentMode: Writable<ViewerMode> = getContext("currentMode");
-
-  function openNote(e, note: NoteType) {
-    activeNote?.set(note);
-    const href =
-      e.target?.href ||
-      getViewerHref({ document, note, mode: $currentMode, embed });
-    pushState(href, {});
-  }
-
-  function closeNote() {
-    activeNote?.set(null);
-    pushState(window.location.pathname, {});
-  }
-</script>
-
-<div class="notes">
-  {#each notes as note}
-    {@const is_active = note.id === $activeNote?.id}
-    <a
-      class="note"
-      href={getViewerHref({ document, note, mode: $currentMode, embed })}
-      title={note.title}
-      style:top="{note.y1 * 100}%"
-      on:click={(e) => openNote(e, note)}
-    >
-      <NoteTab access={note.access} />
-      {#if is_active}
-        <button
-          class="close"
-          on:click|preventDefault|stopPropagation={closeNote}
-        >
-          <XCircleFill16 />
-        </button>
-      {/if}
-    </a>
-    {#if is_active}
-      <Note {document} {note} {pdf} {scale} />
-    {:else}
-      <NoteLink {note} />
-    {/if}
-  {/each}
-</div>
-
-<style>
-  .notes {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    pointer-events: none;
-  }
-
-  .notes :global(*) {
-    pointer-events: all;
-  }
-
-  .note {
-    transform: translateY(-25%);
-    position: absolute;
-    pointer-events: all;
-    left: -3vw;
-  }
-
-  .note button {
-    border: none;
-    padding: 0;
-    background: none;
-    cursor: pointer;
-
-    position: absolute;
-    margin: auto 0;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-
-    display: flex;
-    padding-left: 0.5rem;
-    justify-content: left;
-    align-items: center;
-  }
-</style>
diff --git a/src/lib/components/viewer/PDF.svelte b/src/lib/components/viewer/PDF.svelte
index ed286fede..ba0bab7fd 100644
--- a/src/lib/components/viewer/PDF.svelte
+++ b/src/lib/components/viewer/PDF.svelte
@@ -4,74 +4,37 @@
   It uses PDF.js to render the actual pages on canvas elements.
 
   This is only the pages of the document, contained inside the larger viewer.
+
+  Assumes it's a child of a ViewerContext
 -->
 
 <script lang="ts">
-  import type { Writable } from "svelte/store";
-  import type { Document } from "$lib/api/types";
-
-  import { getContext, onMount } from "svelte";
-
-  import * as pdfjs from "pdfjs-dist/legacy/build/pdf.mjs";
-  if (!pdfjs.GlobalWorkerOptions.workerSrc) {
-    pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-      "pdfjs-dist/legacy/build/pdf.worker.mjs",
-      import.meta.url,
-    ).href;
-  }
+  import { onMount } from "svelte";
 
   import PdfPage from "./PDFPage.svelte";
 
-  import { pageSizes } from "@/api/pageSize.js";
   import { scrollToPage } from "$lib/utils/scroll";
-  import { remToPx } from "@/lib/utils/layout";
-  import { isEmbedded } from "@/lib/utils/viewer";
-
-  export let asset_url: URL = null;
-  export let document: Document;
-  export let query: string = ""; // search query
-  export let scale: number | "width" | "height" = 1;
-  export let embed = isEmbedded();
-
-  // https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib-PDFDocumentProxy.html
-  export let pdf: Promise<any> = new Promise(() => {});
-  export let task: ReturnType<typeof pdfjs.getDocument> | undefined = null;
-
-  const currentPage: Writable<number> = getContext("currentPage");
-
+  import { remToPx } from "$lib/utils/layout";
+  import { getSections, pageSizes, zoomToScale } from "$lib/utils/viewer";
+  import {
+    getCurrentPage,
+    getDocument,
+    getPDF,
+    getZoom,
+  } from "./ViewerContext.svelte";
+
+  const documentStore = getDocument();
+  const currentPage = getCurrentPage();
+  const pdf = getPDF();
+  const zoom = getZoom();
+
+  $: document = $documentStore;
+  $: scale = zoomToScale($zoom);
   $: sizes = document.page_spec ? pageSizes(document.page_spec) : [];
-
-  // index notes and sections by page
-  $: notes = document.notes.reduce((m, note) => {
-    if (!m[note.page_number]) {
-      m[note.page_number] = [];
-    }
-    m[note.page_number].push(note);
-    return m;
-  }, {});
-
-  $: sections = document.sections.reduce((m, section) => {
-    m[section.page_number] = section;
-    return m;
-  }, {});
-
-  let progress = {
-    loaded: 0,
-    total: 0,
-  };
+  $: sections = getSections(document);
 
   onMount(() => {
-    // we might move this to a load function
-    if (!task) {
-      task = pdfjs.getDocument({ url: asset_url });
-      pdf = task.promise;
-    }
-
-    task.onProgress = (p) => {
-      progress = p;
-    };
-
-    pdf.then((p) => {
+    $pdf.then((p) => {
       // handle missing page_spec
       if (sizes.length === 0) {
         sizes = Array(p.numPages).fill([0, 0]);
@@ -97,18 +60,12 @@
 >
   {#each sizes as [width, height], n}
     {@const page_number = n + 1}
-    <PdfPage
-      {document}
-      {page_number}
-      {pdf}
-      {scale}
-      {width}
-      {height}
-      {query}
-      section={sections[n]}
-      notes={notes[n]}
-      {embed}
-    />
+    {#if sections[n]}
+      <h3 class="section">
+        {sections[n].title}
+      </h3>
+    {/if}
+    <PdfPage {page_number} {scale} {width} {height} />
   {/each}
 </div>
 
@@ -131,4 +88,12 @@
     padding: 4.5rem;
     gap: 2.25rem;
   }
+  .section {
+    color: var(--gray-4);
+    font-weight: var(--font-semibold);
+    max-width: 66ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 </style>
diff --git a/src/lib/components/viewer/PDFPage.svelte b/src/lib/components/viewer/PDFPage.svelte
index 58b7525e4..56daa3ee2 100644
--- a/src/lib/components/viewer/PDFPage.svelte
+++ b/src/lib/components/viewer/PDFPage.svelte
@@ -3,77 +3,50 @@ A single page of a PDF document.
 This component exists to manage state and rendering for a single page,
 working with PDF.svelte.
 
+Assumes it's a child of a ViewerContext
+
 Selectable text can be rendered in one of two ways:
 - Extracted from the PDF page (preferred)
 - Passed in as a server-fetched JSON object
 -->
 <script lang="ts">
-  import type { Writable } from "svelte/store";
-  import type {
-    Document,
-    Note as NoteType,
-    Section,
-    TextPosition,
-    ViewerMode,
-  } from "$lib/api/types";
+  import type { TextPosition } from "$lib/api/types";
 
   import * as pdfjs from "pdfjs-dist/legacy/build/pdf.mjs";
-  import { getContext } from "svelte";
   import { _ } from "svelte-i18n";
-  import {
-    Share16,
-    Comment16,
-    ListOrdered16,
-    KebabHorizontal16,
-  } from "svelte-octicons";
 
   // page parts
-  import AnnotationPane from "./AnnotationPane.svelte";
+  import AnnotationLayer from "./AnnotationLayer.svelte";
   import Note from "./Note.svelte";
-  import NotesPane from "./NotesPane.svelte";
   import Page from "./Page.svelte";
-  import RedactionPane, { pending, redactions } from "./RedactionPane.svelte";
+  import RedactionLayer, { pending, redactions } from "./RedactionLayer.svelte";
 
   // writable ui
-  import Action from "../common/Action.svelte";
-  import Button from "../common/Button.svelte";
-  import Dropdown from "@/lib/components/common/Dropdown.svelte";
-  import EditNote from "../forms/EditNote.svelte";
-  import EditSections from "../forms/EditSections.svelte";
-  import Flex from "../common/Flex.svelte";
-  import Menu from "$lib/components/common/Menu.svelte";
-  import MenuItem from "$lib/components/common/MenuItem.svelte";
-  import Modal from "../layouts/Modal.svelte";
-  import Share from "../documents/Share.svelte";
-  import Portal from "../layouts/Portal.svelte";
-
   import { highlight } from "$lib/utils/search";
   import { isPageLevel } from "$lib/api/notes";
-  import { remToPx } from "@/lib/utils/layout";
-  import { isEmbedded } from "@/lib/utils/viewer";
+  import {
+    getDocument,
+    getCurrentMode,
+    getPDF,
+    getQuery,
+  } from "$lib/components/viewer/ViewerContext.svelte";
+  import { fitPage, getNotes } from "@/lib/utils/viewer";
 
-  export let document: Document;
   export let page_number: number; // 1-indexed
-  export let pdf; // Promise<PDFDocumentProxy>
 
   export let scale: number | "width" | "height";
   export let width: number;
   export let height: number;
-
-  export let query: string = ""; // search query
-  export let notes: NoteType[] = [];
-  export let section: Section = undefined; // one at most
   export let text: TextPosition[] = [];
-  export let embed = isEmbedded();
+
+  const documentStore = getDocument();
+  const mode = getCurrentMode();
+  const pdf = getPDF();
+  const query = getQuery();
 
   // make hidden things visible, for debugging
   export let debug = false;
 
-  // share page
-  let pageShareOpen = false;
-
-  const mode: Writable<ViewerMode> = getContext("currentMode");
-
   let canvas: HTMLCanvasElement;
   let container: HTMLElement;
   let textContainer: HTMLElement;
@@ -82,29 +55,22 @@ Selectable text can be rendered in one of two ways:
   let renderTask;
   let textPromise: Promise<void>; // resolves when text is rendered
   let loaded = false;
-  let textLayer; // TextLayer
+  let textLayer: pdfjs.TextLayer; // TextLayer
 
   // visibility, for loading optimization
   let visible: boolean = false;
 
-  let editSection = false;
-  let pageNote = false;
-
-  function close() {
-    editSection = false;
-    pageNote = false;
-  }
-
+  $: document = $documentStore;
   $: aspect = height / width;
   $: orientation = height > width ? "vertical" : "horizontal";
   $: numericScale = fitPage(width, height, container, scale);
 
   // render when anything changes
   $: page =
-    visible && Promise.resolve(pdf).then((pdf) => pdf?.getPage(page_number));
+    visible && Promise.resolve($pdf).then((pdf) => pdf?.getPage(page_number));
 
   // we need to wait on both promises to render on initial load
-  $: Promise.all([pdf, page]).then(([pdf, page]) => {
+  $: Promise.all([$pdf, page]).then(([pdf, page]) => {
     render(page, canvas, container, scale);
     textPromise = renderTextLayer(page, textContainer, container, scale);
   });
@@ -125,30 +91,8 @@ Selectable text can be rendered in one of two ways:
     (r) => r.page_number === page_number - 1,
   );
 
-  $: page_level_notes = notes?.filter((n) => isPageLevel(n)) ?? [];
-  $: in_page_notes = notes?.filter((n) => !isPageLevel(n)) ?? [];
-
-  /**
-   * Return a numeric scale based on intrinsic page size and container size
-   * @param width Original document width
-   * @param height Original document height
-   * @param container
-   * @param scale
-   */
-  function fitPage(
-    width: number,
-    height: number,
-    container: HTMLElement,
-    scale: number | "width" | "height",
-  ): number {
-    if (typeof scale === "number") return scale;
-    if (!container) return 1;
-
-    // const [x1, y1, width, height] = page.view;
-    const { clientWidth, clientHeight } = container;
-
-    return scale === "width" ? clientWidth / width : clientHeight / height;
-  }
+  $: page_level_notes =
+    getNotes(document)[page_number - 1]?.filter((n) => isPageLevel(n)) ?? [];
 
   async function render(
     page, // pdf.getPage
@@ -232,14 +176,13 @@ Selectable text can be rendered in one of two ways:
 
   function onVisibilityChange() {
     if (window.document.visibilityState === "visible" && !canvas.hidden) {
-      Promise.all([pdf, page]).then(([pdf, page]) => {
+      Promise.all([$pdf, page]).then(([pdf, page]) => {
         render(page, canvas, container, scale);
       });
     }
   }
 
   let pageWidth: number;
-  $: id = `page_${page_number}`;
 </script>
 
 <svelte:window on:resize={onResize} />
@@ -247,9 +190,7 @@ Selectable text can be rendered in one of two ways:
 <svelte:document on:visibilitychange={onVisibilityChange} />
 
 <Page
-  {document}
   {page_number}
-  {embed}
   wide={scale === "width"}
   tall={scale === "height"}
   track
@@ -259,90 +200,10 @@ Selectable text can be rendered in one of two ways:
   }}
   bind:width={pageWidth}
 >
-  <svelte:fragment slot="title">
-    {#if section}
-      <h3 class="section">
-        {section.title}
-      </h3>
-    {/if}
-  </svelte:fragment>
-
-  <div slot="actions">
-    {#if !embed}
-      {#if pageWidth > remToPx(32) || !document.edit_access}
-        <Flex align="center">
-          <Action icon={Share16} on:click={() => (pageShareOpen = true)}>
-            {$_("dialog.share")}
-          </Action>
-          {#if document.edit_access}
-            <div>
-              <Action icon={Comment16} on:click={() => (pageNote = true)}>
-                {$_("annotate.cta.add-note")}
-              </Action>
-
-              <Action
-                icon={ListOrdered16}
-                on:click={() => (editSection = true)}
-              >
-                {#if section}
-                  {$_("annotate.cta.edit-section")}
-                {:else}
-                  {$_("annotate.cta.add-section")}
-                {/if}
-              </Action>
-            </div>
-          {/if}
-        </Flex>
-      {:else}
-        <Dropdown position="bottom-end">
-          <Button minW={false} slot="anchor" ghost mode="primary">
-            <KebabHorizontal16 />
-          </Button>
-          <Menu slot="default" let:close>
-            <MenuItem
-              on:click={() => {
-                close();
-                pageShareOpen = true;
-              }}
-            >
-              <Share16 slot="icon" />
-              {$_("dialog.share")}
-            </MenuItem>
-            {#if document.edit_access}
-              <MenuItem
-                on:click={() => {
-                  close();
-                  pageNote = true;
-                }}
-              >
-                <Comment16 slot="icon" />
-                {$_("annotate.cta.add-note")}
-              </MenuItem>
-
-              <MenuItem
-                on:click={() => {
-                  close();
-                  editSection = true;
-                }}
-              >
-                <ListOrdered16 slot="icon" />
-                {#if section}
-                  {$_("annotate.cta.edit-section")}
-                {:else}
-                  {$_("annotate.cta.add-section")}
-                {/if}
-              </MenuItem>
-            {/if}
-          </Menu>
-        </Dropdown>
-      {/if}
-    {/if}
-  </div>
-
   {#if page_level_notes.length}
     <div class="page-notes">
       {#each page_level_notes as note}
-        <Note {document} {note} />
+        <Note {note} />
       {/each}
     </div>
   {/if}
@@ -377,78 +238,18 @@ Selectable text can be rendered in one of two ways:
       </div>
     {/if}
 
-    {#if $mode === "annotating"}
-      <AnnotationPane
-        {document}
-        notes={in_page_notes}
-        page_number={page_number - 1}
-      />
-    {:else}
-      {#await pdf then pdf}
-        <NotesPane
-          {document}
-          notes={in_page_notes}
-          {pdf}
-          scale={numericScale}
-        />
-      {/await}
-    {/if}
+    <AnnotationLayer page_number={page_number - 1} />
 
     {#if redactions_for_page.length > 0 || $mode === "redacting"}
-      <RedactionPane
+      <RedactionLayer
         page_number={page_number - 1}
         active={$mode === "redacting"}
       />
     {/if}
   </div>
 </Page>
-{#if pageShareOpen}
-  <Portal>
-    <Modal on:close={() => (pageShareOpen = false)}>
-      <h1 slot="title">{$_("dialog.share")}</h1>
-      <Share {document} page={page_number} currentTab="page" />
-    </Modal>
-  </Portal>
-{/if}
-{#if editSection}
-  <Portal>
-    <Modal on:close={close}>
-      <h2 slot="title">
-        {#if section}
-          {$_("annotate.cta.edit-section")}
-        {:else}
-          {$_("annotate.cta.add-section")}
-        {/if}
-      </h2>
-      <EditSections
-        {document}
-        on:close={close}
-        section={section || { page_number: page_number - 1 }}
-      />
-    </Modal>
-  </Portal>
-{/if}
-{#if pageNote}
-  <Portal>
-    <Modal on:close={close}>
-      <h2 slot="title">
-        {$_("annotate.cta.add-note")}
-      </h2>
-      <EditNote {document} page_number={page_number - 1} on:close={close} />
-    </Modal>
-  </Portal>
-{/if}
 
 <style>
-  .section {
-    color: var(--gray-4);
-    font-weight: var(--font-semibold);
-    max-width: 66ch;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
   .page-container {
     aspect-ratio: 1 / var(--aspect);
     margin: 0;
diff --git a/src/lib/components/viewer/Page.svelte b/src/lib/components/viewer/Page.svelte
index bf264650a..667db8587 100644
--- a/src/lib/components/viewer/Page.svelte
+++ b/src/lib/components/viewer/Page.svelte
@@ -1,33 +1,50 @@
-<script lang="ts">
-  import type { Writable } from "svelte/store";
-  import type { Document, ViewerMode } from "$lib/api/types";
+<!-- @component
+Page is a generic container for Viewer content.
+
+Assumes it's a child of a ViewerContext
+-->
 
-  import { createEventDispatcher, onMount, getContext } from "svelte";
+<script lang="ts">
+  import { createEventDispatcher, onMount } from "svelte";
   import { _ } from "svelte-i18n";
 
+  import PageActions from "./PageActions.svelte";
+
   import { pageHashUrl } from "$lib/api/documents";
-  import { replaceState } from "$app/navigation";
-  import { getViewerHref, isEmbedded } from "@/lib/utils/viewer";
+  import {
+    getCurrentMode,
+    getCurrentPage,
+    getDocument,
+    isEmbedded,
+  } from "$lib/components/viewer/ViewerContext.svelte";
+  import { getViewerHref } from "$lib/utils/viewer";
 
-  export let document: Document;
   export let page_number: number;
-  export let mode: ViewerMode = "document";
   export let wide = false;
   export let tall = false;
   export let track: boolean | "once" = false;
   export let width: number = undefined;
-  export let embed = isEmbedded();
 
   const dispatch = createEventDispatcher();
 
-  const currentPage: Writable<number> = getContext("currentPage");
+  const documentStore = getDocument();
+  const currentPage = getCurrentPage();
+  const mode = getCurrentMode();
+  const embed = isEmbedded();
 
   let io: IntersectionObserver;
   let container: HTMLElement;
   let visible: boolean;
 
+  $: document = $documentStore;
   $: id = pageHashUrl(page_number).replace("#", "");
-  $: href = getViewerHref({ document, mode, page: page_number, embed });
+  $: href = getViewerHref({ document, mode: $mode, page: page_number, embed });
+  $: documentHref = getViewerHref({
+    document,
+    mode: "document",
+    page: page_number,
+    embed,
+  });
 
   function watch(el: HTMLElement, once = false): IntersectionObserver {
     const io = new IntersectionObserver(
@@ -102,13 +119,9 @@
       </a>
     </h4>
 
-    {#if $$slots.actions}
-      <div class="actions">
-        <slot name="actions" />
-      </div>
-    {/if}
+    <PageActions {document} {page_number} pageWidth={width} />
   </header>
-  <slot {id} {href} {visible} />
+  <slot {id} {href} {visible} {documentHref} />
 </div>
 
 <style>
@@ -159,8 +172,4 @@
   .title:empty {
     display: none;
   }
-
-  .actions {
-    flex: 0 0 auto;
-  }
 </style>
diff --git a/src/lib/components/viewer/PageActions.svelte b/src/lib/components/viewer/PageActions.svelte
new file mode 100644
index 000000000..ed67a373e
--- /dev/null
+++ b/src/lib/components/viewer/PageActions.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+  import type { Document } from "$lib/api/types";
+
+  import { _ } from "svelte-i18n";
+  import {
+    Share16,
+    Comment16,
+    ListOrdered16,
+    KebabHorizontal16,
+  } from "svelte-octicons";
+
+  import Action from "$lib/components/common/Action.svelte";
+  import Button from "$lib/components/common/Button.svelte";
+  import Dropdown from "$lib/components/common/Dropdown.svelte";
+  import EditNote from "$lib/components/forms/EditNote.svelte";
+  import EditSections from "$lib/components/forms/EditSections.svelte";
+  import Flex from "$lib/components/common/Flex.svelte";
+  import Menu from "$lib/components/common/Menu.svelte";
+  import MenuItem from "$lib/components/common/MenuItem.svelte";
+  import Modal from "$lib/components/layouts/Modal.svelte";
+  import Portal from "$lib/components/layouts/Portal.svelte";
+  import Share from "$lib/components/documents/Share.svelte";
+
+  import { remToPx } from "$lib/utils/layout";
+  import { getSections } from "$lib/utils/viewer";
+
+  export let document: Document;
+  export let page_number: number;
+  export let pageWidth: number;
+
+  let pageShareOpen = false;
+  let pageNote = false;
+  let editSection = false;
+
+  $: section = getSections(document)[page_number];
+</script>
+
+<div class="page-actions">
+  {#if pageWidth > remToPx(32) || !document.edit_access}
+    <Flex align="center">
+      <Action icon={Share16} on:click={() => (pageShareOpen = true)}>
+        {$_("dialog.share")}
+      </Action>
+      {#if document.edit_access}
+        <div>
+          <Action icon={Comment16} on:click={() => (pageNote = true)}>
+            {$_("annotate.cta.add-note")}
+          </Action>
+
+          <Action icon={ListOrdered16} on:click={() => (editSection = true)}>
+            {#if section}
+              {$_("annotate.cta.edit-section")}
+            {:else}
+              {$_("annotate.cta.add-section")}
+            {/if}
+          </Action>
+        </div>
+      {/if}
+    </Flex>
+  {:else}
+    <Dropdown position="bottom-end">
+      <Button minW={false} slot="anchor" ghost mode="primary">
+        <KebabHorizontal16 />
+      </Button>
+      <Menu slot="default" let:close>
+        <MenuItem
+          on:click={() => {
+            close();
+            pageShareOpen = true;
+          }}
+        >
+          <Share16 slot="icon" />
+          {$_("dialog.share")}
+        </MenuItem>
+        {#if document.edit_access}
+          <MenuItem
+            on:click={() => {
+              close();
+              pageNote = true;
+            }}
+          >
+            <Comment16 slot="icon" />
+            {$_("annotate.cta.add-note")}
+          </MenuItem>
+
+          <MenuItem
+            on:click={() => {
+              close();
+              editSection = true;
+            }}
+          >
+            <ListOrdered16 slot="icon" />
+            {#if section}
+              {$_("annotate.cta.edit-section")}
+            {:else}
+              {$_("annotate.cta.add-section")}
+            {/if}
+          </MenuItem>
+        {/if}
+      </Menu>
+    </Dropdown>
+  {/if}
+</div>
+{#if pageShareOpen}
+  <Portal>
+    <Modal on:close={() => (pageShareOpen = false)}>
+      <h1 slot="title">{$_("dialog.share")}</h1>
+      <Share {document} page={page_number} currentTab="page" />
+    </Modal>
+  </Portal>
+{/if}
+{#if editSection}
+  <Portal>
+    <Modal on:close={close}>
+      <h2 slot="title">
+        {#if section}
+          {$_("annotate.cta.edit-section")}
+        {:else}
+          {$_("annotate.cta.add-section")}
+        {/if}
+      </h2>
+      <EditSections
+        {document}
+        on:close={close}
+        section={section || { page_number: page_number - 1 }}
+      />
+    </Modal>
+  </Portal>
+{/if}
+{#if pageNote}
+  <Portal>
+    <Modal on:close={close}>
+      <h2 slot="title">
+        {$_("annotate.cta.add-note")}
+      </h2>
+      <EditNote {document} page_number={page_number - 1} on:close={close} />
+    </Modal>
+  </Portal>
+{/if}
+
+<style>
+  .page-actions {
+    flex: 0 0 auto;
+  }
+</style>
diff --git a/src/lib/components/viewer/toolbars/PaginationToolbar.svelte b/src/lib/components/viewer/PaginationToolbar.svelte
similarity index 88%
rename from src/lib/components/viewer/toolbars/PaginationToolbar.svelte
rename to src/lib/components/viewer/PaginationToolbar.svelte
index 6a18b6f9f..ae699e878 100644
--- a/src/lib/components/viewer/toolbars/PaginationToolbar.svelte
+++ b/src/lib/components/viewer/PaginationToolbar.svelte
@@ -1,10 +1,10 @@
-<script lang="ts">
-  import type { Writable } from "svelte/store";
-  import type { Document, ViewerMode } from "$lib/api/types";
+<!-- @component
+ Assumes it's a child of a ViewerContext
+-->
 
+<script lang="ts">
   import { replaceState } from "$app/navigation";
 
-  import { getContext } from "svelte";
   import { _ } from "svelte-i18n";
   import { ChevronUp12, ListOrdered16, ListOrdered24 } from "svelte-octicons";
 
@@ -18,22 +18,27 @@
   import Portal from "$lib/components/layouts/Portal.svelte";
   import Modal from "$lib/components/layouts/Modal.svelte";
   import SidebarItem from "$lib/components/sidebar/SidebarItem.svelte";
-  import Zoom from "../Zoom.svelte";
+  import Zoom from "./Zoom.svelte";
 
   import { pageHashUrl, shouldPaginate } from "$lib/api/documents";
   import { remToPx } from "$lib/utils/layout";
   import { scrollToPage } from "$lib/utils/scroll";
-  import { isEmbedded } from "@/lib/utils/viewer";
-
-  export let document: Document;
-  export let embed = isEmbedded();
+  import {
+    getCurrentMode,
+    getCurrentPage,
+    getDocument,
+    isEmbedded,
+  } from "$lib/components/viewer/ViewerContext.svelte";
+
+  const documentStore = getDocument();
+  $: document = $documentStore;
+  const embed = isEmbedded();
+  const currentMode = getCurrentMode();
+  const currentPage = getCurrentPage();
 
   let sectionsOpen = false;
   let width: number;
 
-  const currentMode: Writable<ViewerMode> = getContext("currentMode");
-  const currentPage: Writable<number> = getContext("currentPage");
-
   $: BREAKPOINTS = {
     TWO_ROWS: width <= remToPx(34),
   };
@@ -82,7 +87,7 @@
           {#each sections as section}
             <MenuItem
               on:click={() => {
-                gotoPage(section.page_number);
+                gotoPage(section.page_number + 1);
                 close();
               }}>{section.title}</MenuItem
             >
@@ -129,7 +134,7 @@
   {/if}
 
   <div class="zoom">
-    <Zoom mode={$currentMode} />
+    <Zoom />
   </div>
 </div>
 
diff --git a/src/lib/components/viewer/README.md b/src/lib/components/viewer/README.md
new file mode 100644
index 000000000..7f061a073
--- /dev/null
+++ b/src/lib/components/viewer/README.md
@@ -0,0 +1,52 @@
+# Viewer
+
+Viewer is, in many ways, the heart of DocumentCloud.
+It loads and renders PDFs for reading and writing.
+
+## Context
+
+Viewer makes heavy use of [Svelte's Context APIs](https://svelte.dev/docs/svelte). In `ViewerContext.svelte`, we set independent context values and provide getter shortcuts for them that fully type the return vaues.
+
+The values made available by `ViewerContext` are:
+
+- `document: Document`
+- `text: DocumentText`
+- `asset_url: URL`
+- `embed: boolean`
+- `query: string`
+- `currentPage: Writable<number>`
+- `currentMode: Writable<ViewerMode>`
+- `progress: { loaded: number, total: number }`
+- `pdf: Promise<pdfjs.PDFDocumentProxy>`
+
+## Modes
+
+Viewer has multiple modes for presenting and interacting with a document:
+
+### File
+
+In File mode, we render each page of the PDF to a `<canvas>` element, the layer on elements with selectable/searchable text, annotations, and pending redactions. Any saved redactions are baked into the PDF file. In File mode, the document can be zoomed to a scale factor, or a fit factor.
+
+### Text
+
+In Text mode, we render each page of OCR-generated text from a PDF.
+
+### Grid
+
+In Grid mode, we render thumbnail images for each page of the PDF. Clicking on a page will navigate to the page in File mode.
+
+### Notes
+
+In Notes mode, we render just the document's annotations in a list.
+
+### Annotating
+
+Annotating mode extends File mode with an interface for drawing new annotations onto the document and letting users edit existing annotations.
+
+### Redacting
+
+Redacting mode extends File mode with an interface for drawing new redactions onto the document. While in Redacting mode, users can undo the redactions they've drawn. Before leaving Redacting mode, a user must decide to discard or save the redactions they made. When saving redactions, the document is reprocessed to bake the redactions into the actual PDF file and OCR is rerun to omit any redacted text.
+
+## Navigation
+
+Navigating the viewer is done through URL, which ensures viewer state flows one way, and that viewer states are linkable.
diff --git a/src/lib/components/viewer/toolbars/ReadingToolbar.svelte b/src/lib/components/viewer/ReadingToolbar.svelte
similarity index 82%
rename from src/lib/components/viewer/toolbars/ReadingToolbar.svelte
rename to src/lib/components/viewer/ReadingToolbar.svelte
index fb1217665..eb0401f6d 100644
--- a/src/lib/components/viewer/toolbars/ReadingToolbar.svelte
+++ b/src/lib/components/viewer/ReadingToolbar.svelte
@@ -1,14 +1,10 @@
-<script lang="ts">
-  import type { Writable } from "svelte/store";
+<!-- @component
+Assumes it's a child of a ViewerContext
+ -->
 
-  import type {
-    Document,
-    ReadMode,
-    ViewerMode,
-    WriteMode,
-  } from "$lib/api/types";
+<script lang="ts">
+  import type { ReadMode, WriteMode } from "$lib/api/types";
 
-  import { getContext } from "svelte";
   import { _ } from "svelte-i18n";
   import {
     Comment16,
@@ -29,20 +25,25 @@
   import PageToolbar from "$lib/components/common/PageToolbar.svelte";
   import Tab from "$lib/components/common/Tab.svelte";
   import Search from "$lib/components/forms/Search.svelte";
-
-  import SidebarItem from "../../sidebar/SidebarItem.svelte";
+  import SidebarItem from "../sidebar/SidebarItem.svelte";
 
   import { remToPx } from "$lib/utils/layout";
-  import { getViewerHref, isEmbedded } from "@/lib/utils/viewer";
-
-  export let document: Document;
-  export let query: string = "";
-  export let embed = isEmbedded();
+  import { getViewerHref } from "$lib/utils/viewer";
+  import {
+    getCurrentMode,
+    getDocument,
+    getQuery,
+    isEmbedded,
+  } from "$lib/components/viewer/ViewerContext.svelte";
 
   let width: number;
 
-  const mode: Writable<ViewerMode> = getContext("currentMode");
+  const documentStore = getDocument();
+  const query = getQuery();
+  const mode = getCurrentMode();
+  const embed = isEmbedded();
 
+  $: document = $documentStore;
   $: canWrite = !embed && document.edit_access;
   $: BREAKPOINTS = {
     READ_MENU: width > remToPx(52),
@@ -124,16 +125,17 @@
     {#if !BREAKPOINTS.WRITE_MENU && canWrite}
       {#each writeModes as [value, name]}
         <Button ghost href={getViewerHref({ document, mode: value, embed })}>
-          <svelte:component this={icons[value]} />
+          <span class="icon"><svelte:component this={icons[value]} /></span>
           {name}
         </Button>
       {/each}
     {/if}
     {#if BREAKPOINTS.SEARCH_MENU}
       <Dropdown position="bottom-end">
-        <Button minW={false} ghost slot="anchor"
-          ><Search16 /> {$_("common.search")}</Button
-        >
+        <Button minW={false} ghost slot="anchor">
+          <Search16 />
+          {$_("common.search")}
+        </Button>
         <Menu>
           <Search name="q" {query} />
         </Menu>
@@ -149,4 +151,8 @@
     display: flex;
     padding: 0 1rem;
   }
+  .icon {
+    flex: 0 0 auto;
+    display: inline-flex;
+  }
 </style>
diff --git a/src/lib/components/viewer/RedactionPane.svelte b/src/lib/components/viewer/RedactionLayer.svelte
similarity index 100%
rename from src/lib/components/viewer/RedactionPane.svelte
rename to src/lib/components/viewer/RedactionLayer.svelte
diff --git a/src/lib/components/viewer/toolbars/RedactionToolbar.svelte b/src/lib/components/viewer/RedactionToolbar.svelte
similarity index 89%
rename from src/lib/components/viewer/toolbars/RedactionToolbar.svelte
rename to src/lib/components/viewer/RedactionToolbar.svelte
index 03d7e2abc..8ee969ad3 100644
--- a/src/lib/components/viewer/toolbars/RedactionToolbar.svelte
+++ b/src/lib/components/viewer/RedactionToolbar.svelte
@@ -1,6 +1,8 @@
-<script lang="ts">
-  import type { Document } from "$lib/api/types";
+<!-- @component
+Assumes it's a child of a ViewerContext 
+-->
 
+<script lang="ts">
   import { goto } from "$app/navigation";
 
   import { _ } from "svelte-i18n";
@@ -14,17 +16,19 @@
 
   import Button from "$lib/components/common/Button.svelte";
   import Flex from "$lib/components/common/Flex.svelte";
-  import { redactions, undo, clear } from "../RedactionPane.svelte";
   import Tooltip from "$lib/components/common/Tooltip.svelte";
 
   import ConfirmRedaction from "$lib/components/forms/ConfirmRedaction.svelte";
   import Portal from "$lib/components/layouts/Portal.svelte";
   import Modal from "$lib/components/layouts/Modal.svelte";
 
+  import { redactions, undo, clear } from "./RedactionLayer.svelte";
   import { remToPx } from "$lib/utils/layout";
-  import { getViewerHref } from "@/lib/utils/viewer";
+  import { getViewerHref } from "$lib/utils/viewer";
+  import { getDocument } from "./ViewerContext.svelte";
 
-  export let document: Document;
+  const documentStore = getDocument();
+  $: document = $documentStore;
 
   let width: number;
   let confirmOpen = false;
diff --git a/src/lib/components/viewer/Text.svelte b/src/lib/components/viewer/Text.svelte
index d5c66a592..2cca1efa1 100644
--- a/src/lib/components/viewer/Text.svelte
+++ b/src/lib/components/viewer/Text.svelte
@@ -1,27 +1,26 @@
 <!--
   @component
-  Text wraps a list of TextPage components for loading and management
+  Text wraps a list of Page components with plain text contents
+  
+  Assumes it's a child of a ViewerContext
 -->
 <script lang="ts">
-  import type { Writable } from "svelte/store";
-  import type { Document, DocumentText } from "$lib/api/types";
-
-  import { getContext, onMount } from "svelte";
+  import { onMount } from "svelte";
 
   import Page from "./Page.svelte";
-  import TextPage from "./TextPage.svelte";
-
+  import {
+    getText,
+    getCurrentPage,
+    getQuery,
+    getZoom,
+  } from "./ViewerContext.svelte";
   import { scrollToPage } from "$lib/utils/scroll";
-  import { isEmbedded } from "@/lib/utils/viewer";
+  import { highlight } from "$lib/utils/search";
 
-  export let document: Document;
-  export let query: string = ""; // search query
-  export let text: DocumentText;
-  export let total: number = 0;
-  export let zoom: number = 1;
-  export let embed = isEmbedded();
-
-  const currentPage: Writable<number> = getContext("currentPage");
+  const text = getText();
+  const query = getQuery();
+  const currentPage = getCurrentPage();
+  const zoom = getZoom();
 
   onMount(async () => {
     if ($currentPage > 1) {
@@ -30,19 +29,14 @@
   });
 </script>
 
-<div class="textPages" style:--zoom={zoom}>
-  {#await text}
-    <!-- loading state-->
-    {#each Array(total).fill(null) as p, n}
-      <Page {document} {embed} page_number={n + 1} mode="text">
-        <div class="placeholder"></div>
-      </Page>
-    {/each}
-  {:then { pages }}
-    {#each pages as { page, contents }}
-      <TextPage {document} {page} {contents} {query} {embed} />
-    {/each}
-  {/await}
+<div class="textPages" style:--zoom={+$zoom || 1}>
+  {#each text?.pages as { page, contents }}
+    <Page page_number={page + 1} track>
+      <pre>
+        {@html highlight(contents, query)}
+      </pre>
+    </Page>
+  {/each}
 </div>
 
 <style>
@@ -53,10 +47,22 @@
     width: 100%;
   }
 
-  .placeholder {
-    aspect-ratio: calc(11 / 8.5);
-    background-color: var(--white, white);
+  pre {
+    background-color: var(--white, #fff);
+    margin: 0;
+    padding: 1.5rem;
+    text-wrap: pretty;
+    word-break: break-word;
+
+    color: var(--gray-5, #233944);
+    font-family: var(--font-mono, "Source Code Pro", monospace);
+    font-size: calc(var(--font-xs) * var(--zoom, 1));
+    line-height: calc(1.25rem * var(--zoom, 1));
     box-shadow: var(--shadow-1);
-    width: 66ch;
+    width: 100%;
+  }
+
+  pre :global(mark) {
+    background: var(--note-public, mark);
   }
 </style>
diff --git a/src/lib/components/viewer/TextPage.svelte b/src/lib/components/viewer/TextPage.svelte
deleted file mode 100644
index 4434c89c2..000000000
--- a/src/lib/components/viewer/TextPage.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-  import { _ } from "svelte-i18n";
-
-  import Page from "./Page.svelte";
-
-  import { highlight } from "$lib/utils/search";
-  import type { Document } from "$lib/api/types";
-  import { isEmbedded } from "@/lib/utils/viewer";
-
-  export let document: Document;
-  export let page: number;
-  export let contents: string;
-  export let query: string = ""; // search query
-  export let embed = isEmbedded();
-</script>
-
-<Page {document} {embed} page_number={page + 1} mode="text" track>
-  <pre>
-    {@html highlight(contents, query)}
-  </pre>
-</Page>
-
-<style>
-  pre {
-    background-color: var(--white, #fff);
-    margin: 0;
-    padding: 1.5rem;
-    text-wrap: pretty;
-    word-break: break-word;
-
-    color: var(--gray-5, #233944);
-    font-family: var(--font-mono, "Source Code Pro", monospace);
-    font-size: calc(var(--font-xs) * var(--zoom, 1));
-    line-height: calc(1.25rem * var(--zoom, 1));
-    box-shadow: var(--shadow-1);
-    width: 100%;
-  }
-
-  pre :global(mark) {
-    background: var(--note-public, mark);
-  }
-</style>
diff --git a/src/lib/components/viewer/Viewer.svelte b/src/lib/components/viewer/Viewer.svelte
index 547b73985..3b56f6810 100644
--- a/src/lib/components/viewer/Viewer.svelte
+++ b/src/lib/components/viewer/Viewer.svelte
@@ -1,9 +1,10 @@
-<script lang="ts">
-  import type { Writable } from "svelte/store";
-  import type { Document, DocumentText, ViewerMode } from "$lib/api/types";
+<!-- @component
+The document viewer.
+
+Assumes it's a child of a ViewerContext
+-->
 
-  import { getContext } from "svelte";
-  import { _ } from "svelte-i18n";
+<script lang="ts">
   import { SidebarExpand16 } from "svelte-octicons";
 
   import Button from "$lib/components/common/Button.svelte";
@@ -12,29 +13,22 @@
   import { sidebars } from "$lib/components/layouts/Sidebar.svelte";
 
   // modes
-  import Notes from "./Notes.svelte";
   import PDF from "./PDF.svelte";
   import Text from "./Text.svelte";
-  import ThumbnailGrid from "./ThumbnailGrid.svelte";
+  import Grid from "./Grid.svelte";
+  import Notes from "./Notes.svelte";
 
   // toolbars
-  import AnnotationToolbar from "./toolbars/AnnotationToolbar.svelte";
-  import PaginationToolbar from "./toolbars/PaginationToolbar.svelte";
-  import ReadingToolbar from "./toolbars/ReadingToolbar.svelte";
-  import RedactionToolbar from "./toolbars/RedactionToolbar.svelte";
+  import AnnotationToolbar from "./AnnotationToolbar.svelte";
+  import PaginationToolbar from "./PaginationToolbar.svelte";
+  import ReadingToolbar from "./ReadingToolbar.svelte";
+  import RedactionToolbar from "./RedactionToolbar.svelte";
 
   // utils
-  import { zoomToScale, zoom, zoomToSize } from "./Zoom.svelte";
-  import { pdfUrl } from "$lib/api/documents";
-  import { isEmbedded } from "@/lib/utils/viewer";
-
-  const currentMode: Writable<ViewerMode> = getContext("currentMode");
+  import { getCurrentMode, isEmbedded } from "./ViewerContext.svelte";
 
-  export let document: Document;
-  export let asset_url: URL = pdfUrl(document);
-  export let query: string = "";
-  export let text: DocumentText;
-  export let embed = isEmbedded();
+  const embed = isEmbedded();
+  const currentMode = getCurrentMode();
 
   $: mode = $currentMode;
   $: showPDF = ["document", "annotating", "redacting"].includes($currentMode);
@@ -60,9 +54,9 @@
       {#if !embed && mode === "annotating"}
         <AnnotationToolbar />
       {:else if !embed && mode === "redacting"}
-        <RedactionToolbar {document} />
+        <RedactionToolbar />
       {:else}
-        <ReadingToolbar {document} {query} {embed} />
+        <ReadingToolbar />
       {/if}
       {#if !embed && $sidebars["action"] === false}
         <div class="toolbar w-auto">
@@ -79,24 +73,17 @@
 
     <!-- content -->
     {#if showPDF}
-      <PDF {document} scale={zoomToScale($zoom)} {asset_url} {query} {embed} />
+      <PDF />
     {:else if mode === "text"}
-      <Text
-        {document}
-        {text}
-        zoom={+$zoom || 1}
-        total={document.page_count}
-        {query}
-        {embed}
-      />
+      <Text />
     {:else if mode === "grid"}
-      <ThumbnailGrid {document} size={zoomToSize($zoom)} {embed} />
+      <Grid />
     {:else if mode === "notes"}
-      <Notes {document} {asset_url} {embed} />
+      <Notes />
     {/if}
     <svelte:fragment slot="footer">
       {#if mode !== "notes"}
-        <PaginationToolbar {document} {embed} />
+        <PaginationToolbar />
       {/if}
     </svelte:fragment>
   </ContentLayout>
diff --git a/src/lib/components/viewer/ViewerContext.svelte b/src/lib/components/viewer/ViewerContext.svelte
new file mode 100644
index 000000000..715a4dcfc
--- /dev/null
+++ b/src/lib/components/viewer/ViewerContext.svelte
@@ -0,0 +1,194 @@
+<!-- @component
+Provides context for its children. Useful as a parent of Viewer in
+layouts, stories, and tests.
+ -->
+<script lang="ts" context="module">
+  import type {
+    Maybe,
+    Nullable,
+    Document,
+    DocumentText,
+    Note,
+    ViewerMode,
+    Zoom,
+  } from "$lib/api/types";
+
+  import { afterNavigate } from "$app/navigation";
+
+  import { getContext, onMount, setContext } from "svelte";
+  import { type Readable, type Writable, writable } from "svelte/store";
+
+  import {
+    pageFromHash,
+    pdfUrl,
+    shouldPaginate,
+    shouldPreload,
+  } from "$lib/api/documents";
+
+  import * as pdfjs from "pdfjs-dist/legacy/build/pdf.mjs";
+  if (!pdfjs.GlobalWorkerOptions.workerSrc) {
+    pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+      "pdfjs-dist/legacy/build/pdf.worker.mjs",
+      import.meta.url,
+    ).href;
+  }
+
+  interface DocumentLoadProgress {
+    loaded: number;
+    total: number;
+  }
+
+  export function getDocument(): Writable<Document> {
+    return getContext("document");
+  }
+
+  export function getText(): Maybe<DocumentText> {
+    return getContext("text");
+  }
+
+  export function getAssetUrl(): URL {
+    return getContext("asset_url");
+  }
+
+  export function getQuery(): string {
+    return getContext("query") ?? "";
+  }
+
+  export function isEmbedded(): boolean {
+    // are we embedded?
+    return getContext("embed") ?? false;
+  }
+
+  export function getCurrentNote(): Readable<Note> {
+    return getContext("currentNote");
+  }
+
+  export function getCurrentPage(): Writable<number> {
+    return getContext("currentPage");
+  }
+
+  export function getCurrentMode(): Writable<ViewerMode> {
+    return getContext("currentMode");
+  }
+
+  export function getPDF(): Writable<Promise<pdfjs.PDFDocumentProxy>> {
+    return getContext("pdf");
+  }
+
+  export function getPDFProgress(): Writable<DocumentLoadProgress> {
+    return getContext("progress");
+  }
+
+  export function getZoom(): Writable<Zoom> {
+    return getContext("zoom");
+  }
+</script>
+
+<script lang="ts">
+  import { page as pageStore } from "$app/stores";
+  import { noteFromHash } from "$lib/api/notes";
+
+  export let document: Document;
+  export let text: Maybe<DocumentText> = undefined;
+  export let note: Nullable<Note> = null;
+  export let asset_url: URL = pdfUrl(document);
+  export let embed: boolean = false;
+  export let page: number = 1;
+  export let mode: ViewerMode = "document";
+  export let query: string = "";
+  export let zoom: Zoom = 1;
+
+  // https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib-PDFDocumentProxy.html
+  export let pdf: Writable<Promise<pdfjs.PDFDocumentProxy>> = writable(
+    new Promise(() => {}),
+  );
+  let task: Maybe<Nullable<pdfjs.PDFDocumentLoadingTask>> = null;
+
+  const progress = writable<DocumentLoadProgress>({
+    loaded: 0,
+    total: 0,
+  });
+
+  // React to document changes
+  const documentStore = writable(document);
+  $: documentStore.set(document);
+
+  // stores we need deeper in the component tree, available via context
+  setContext("document", documentStore);
+  setContext("text", text);
+  setContext("asset_url", asset_url);
+  setContext("embed", embed);
+  setContext("query", query);
+  setContext("currentNote", writable(note));
+  setContext("currentPage", writable(page));
+  setContext("currentMode", writable(mode));
+  setContext("zoom", writable(zoom));
+  setContext("progress", progress);
+  setContext("pdf", pdf);
+
+  $: currentDoc = getDocument();
+  $: currentMode = getCurrentMode();
+  $: currentPage = getCurrentPage();
+  $: currentNote = getCurrentNote();
+
+  $: noteMatchingPageHash = (note: Note) =>
+    note.id === noteFromHash($pageStore.url.hash);
+
+  function scrollToHash(hash?: string) {
+    const page: Nullable<number> = pageFromHash(hash);
+    let el: Maybe<HTMLElement>;
+    if (hash) {
+      el = window?.document.getElementById(hash.split("#")[1]);
+    }
+    // Scroll to the element, if it's available, and update the current page
+    if (el && page) {
+      el.scrollIntoView();
+      $currentPage = page;
+    }
+  }
+
+  function onHashChange() {
+    const { hash } = window.location;
+    $currentNote = $currentDoc.notes.find(noteMatchingPageHash);
+    if (shouldPaginate($currentMode)) {
+      scrollToHash(hash);
+    }
+  }
+
+  onMount(() => {
+    // we might move this to a load function
+    if (!task) {
+      task = pdfjs.getDocument({ url: asset_url });
+      $pdf = task.promise;
+    }
+
+    task.onProgress = (p: DocumentLoadProgress) => {
+      $progress = p;
+    };
+  });
+
+  afterNavigate(() => {
+    // refresh stores from URL state
+    const { hash } = $pageStore.url;
+    $currentMode = mode;
+    $currentNote = $currentDoc.notes.find(noteMatchingPageHash) ?? null;
+    if (shouldPaginate(mode)) {
+      scrollToHash(hash);
+    }
+  });
+</script>
+
+<svelte:window on:hashchange={onHashChange} on:popstate={onHashChange} />
+<svelte:head>
+  {#if shouldPreload($currentMode)}
+    <link
+      rel="prefetch"
+      href={asset_url.href}
+      as="fetch"
+      crossorigin="anonymous"
+      type="application/pdf"
+    />
+  {/if}
+</svelte:head>
+
+<slot />
diff --git a/src/lib/components/viewer/Zoom.svelte b/src/lib/components/viewer/Zoom.svelte
index 585a29198..54b190ce5 100644
--- a/src/lib/components/viewer/Zoom.svelte
+++ b/src/lib/components/viewer/Zoom.svelte
@@ -1,118 +1,31 @@
 <!-- @component
 Shared zoom component for all viewer routes.
-It exports a $zoom store that can be passed around to other components.
--->
-<script context="module" lang="ts">
-  import { _, unwrapFunctionStore } from "svelte-i18n";
-  import { writable, type Writable } from "svelte/store";
-  import type { Sizes, ViewerMode, Zoom } from "$lib/api/types";
-  import { IMAGE_WIDTHS_MAP } from "@/config/config.js";
-
-  const i18n = unwrapFunctionStore(_);
-
-  export const zoom: Writable<Zoom> = writable(1);
-
-  // for typescript
-  export function zoomToScale(zoom: any): number | "width" | "height" {
-    if (zoom === "width" || zoom === "height") {
-      return zoom;
-    }
-
-    return +zoom || 1;
-  }
-
-  export function zoomToSize(zoom: any): Sizes {
-    if (IMAGE_WIDTHS_MAP.has(zoom)) {
-      return zoom;
-    }
-
-    return "small";
-  }
-
-  /**
-   * Generate a default zoom, based on mode
-   * @param mode
-   */
-  export function getDefaultZoom(mode: ViewerMode): Zoom {
-    switch (mode) {
-      case "document":
-        return "width";
-
-      case "annotating":
-        return "width";
 
-      case "redacting":
-        return "width";
-
-      case "grid":
-        return "small";
-
-      default:
-        return 1;
-    }
-  }
-
-  /**
-   * Generate zoom levels based on mode, since each zooms in a slightly different way
-   */
-  export function getZoomLevels(mode: ViewerMode): (string | number)[][] {
-    switch (mode) {
-      case "document":
-      case "annotating":
-      case "redacting":
-        return [
-          ["width", i18n("zoom.fitWidth")],
-          ["height", i18n("zoom.fitHeight")],
-          [0.5, "50%"],
-          [0.75, "75%"],
-          [1, "100%"],
-          [1.25, "125%"],
-          [1.5, "150%"],
-          [2, "200%"],
-        ];
-
-      case "text":
-        return [
-          [0.5, "50%"],
-          [0.75, "75%"],
-          [1, "100%"],
-          [1.25, "125%"],
-          [1.5, "150%"],
-          [2, "200%"],
-        ];
-
-      case "grid":
-        return [
-          ["thumbnail", i18n("zoom.thumbnail")],
-          ["small", i18n("zoom.small")],
-          ["normal", i18n("zoom.normal")],
-          ["large", i18n("zoom.large")],
-        ];
+Assumes it's a child of a ViewerContext
+-->
+<script lang="ts">
+  import { _ } from "svelte-i18n";
 
-      default:
-        // todo: notes, maybe
-        return [];
-    }
-  }
-</script>
+  import { getDefaultZoom, getZoomLevels } from "@/lib/utils/viewer";
+  import { getCurrentMode, getZoom } from "./ViewerContext.svelte";
 
-<script lang="ts">
-  export let mode: ViewerMode;
+  const mode = getCurrentMode();
+  const zoom = getZoom();
 
-  $: zoomLevels = getZoomLevels(mode);
-  $: $zoom = getDefaultZoom(mode);
+  $: zoomLevels = getZoomLevels($mode);
+  $: $zoom = getDefaultZoom($mode);
 </script>
 
 {#if zoomLevels.length}
   <label class="zoom">
-    {#if mode === "grid"}
+    {#if $mode === "grid"}
       {$_("zoom.size")}
     {:else}
       {$_("zoom.zoom")}
     {/if}
     <select name="zoom" bind:value={$zoom}>
       {#each zoomLevels as [value, label]}
-        <option {value}>{label}</option>
+        <option {value}>{$_(label)}</option>
       {/each}
     </select>
   </label>
diff --git a/src/lib/components/viewer/stories/AnnotationLayer.stories.svelte b/src/lib/components/viewer/stories/AnnotationLayer.stories.svelte
new file mode 100644
index 000000000..82060b41a
--- /dev/null
+++ b/src/lib/components/viewer/stories/AnnotationLayer.stories.svelte
@@ -0,0 +1,62 @@
+<script context="module" lang="ts">
+  import type { Document } from "$lib/api/types";
+
+  import { Story } from "@storybook/addon-svelte-csf";
+  import AnnotationLayer from "../AnnotationLayer.svelte";
+  import Page from "../Page.svelte";
+  import Flex from "$lib/components/common/Flex.svelte";
+
+  export const meta = {
+    title: "Components / Viewer / Annotation Layer",
+    component: AnnotationLayer,
+    parameters: { layout: "centered" },
+  };
+
+  import { pageSizes } from "@/api/pageSize.js";
+  import doc from "@/test/fixtures/documents/document-expanded.json";
+  import ViewerContext from "../ViewerContext.svelte";
+
+  const document = doc as Document;
+  const sizes = pageSizes(document.page_spec);
+</script>
+
+<Story name="Reading">
+  <ViewerContext {document}>
+    <Flex class="pages" direction="column" gap={1}>
+      {#each sizes as [width, height], page_number}
+        <Page page_number={page_number + 1}>
+          <div class="page-container">
+            <AnnotationLayer {page_number} />
+          </div>
+        </Page>
+      {/each}
+    </Flex>
+  </ViewerContext>
+</Story>
+
+<Story name="Writing">
+  <ViewerContext {document} mode="annotating">
+    <Flex class="pages" direction="column" gap={1}>
+      {#each sizes as [width, height], page_number}
+        <Page page_number={page_number + 1}>
+          <div class="page-container">
+            <AnnotationLayer {page_number} />
+          </div>
+        </Page>
+      {/each}
+    </Flex>
+  </ViewerContext>
+</Story>
+
+<style>
+  .page-container {
+    margin: 0;
+    position: relative;
+
+    background-color: var(--white, white);
+    box-shadow: var(--shadow-1);
+
+    width: 88ch;
+    aspect-ratio: 2 / 3;
+  }
+</style>
diff --git a/src/lib/components/viewer/stories/AnnotationPane.stories.svelte b/src/lib/components/viewer/stories/AnnotationPane.stories.svelte
deleted file mode 100644
index 80914e416..000000000
--- a/src/lib/components/viewer/stories/AnnotationPane.stories.svelte
+++ /dev/null
@@ -1,67 +0,0 @@
-<script context="module" lang="ts">
-  import type { Document, Note, ViewerMode } from "$lib/api/types";
-
-  import { Story } from "@storybook/addon-svelte-csf";
-  import AnnotationPane from "../AnnotationPane.svelte";
-  import Page from "../Page.svelte";
-  import Flex from "$lib/components/common/Flex.svelte";
-
-  export const meta = {
-    title: "Components / Viewer / Annotation pane",
-    component: AnnotationPane,
-    parameters: { layout: "centered" },
-  };
-
-  import { pageSizes } from "@/api/pageSize.js";
-  import doc from "@/test/fixtures/documents/document-expanded.json";
-
-  const document = doc as Document;
-  const sizes = pageSizes(document.page_spec);
-  const notes = document.notes.reduce((m, note) => {
-    if (!m[note.page_number]) {
-      m[note.page_number] = [];
-    }
-    m[note.page_number].push(note);
-    return m;
-  }, {});
-</script>
-
-<script lang="ts">
-  import { setContext } from "svelte";
-  import { writable, type Writable } from "svelte/store";
-
-  const activeNote: Writable<Note> = writable(null);
-  const mode: Writable<ViewerMode> = writable("annotating");
-
-  setContext("activeNote", activeNote);
-  setContext("currentMode", mode);
-</script>
-
-<Story name="default">
-  <Flex class="pages" direction="column" gap={1}>
-    {#each sizes as [width, height], page_number}
-      <Page {document} page_number={page_number + 1}>
-        <div class="page-container">
-          <AnnotationPane
-            {document}
-            {page_number}
-            notes={notes[page_number] || []}
-          />
-        </div>
-      </Page>
-    {/each}
-  </Flex>
-</Story>
-
-<style>
-  .page-container {
-    margin: 0;
-    position: relative;
-
-    background-color: var(--white, white);
-    box-shadow: var(--shadow-1);
-
-    width: 88ch;
-    aspect-ratio: 2 / 3;
-  }
-</style>
diff --git a/src/lib/components/viewer/toolbars/stories/AnnotationToolbar.stories.svelte b/src/lib/components/viewer/stories/AnnotationToolbar.stories.svelte
similarity index 100%
rename from src/lib/components/viewer/toolbars/stories/AnnotationToolbar.stories.svelte
rename to src/lib/components/viewer/stories/AnnotationToolbar.stories.svelte
diff --git a/src/lib/components/viewer/stories/Grid.stories.svelte b/src/lib/components/viewer/stories/Grid.stories.svelte
new file mode 100644
index 000000000..cca03f58b
--- /dev/null
+++ b/src/lib/components/viewer/stories/Grid.stories.svelte
@@ -0,0 +1,36 @@
+<script context="module" lang="ts">
+  import { Template, Story } from "@storybook/addon-svelte-csf";
+  import type { Document } from "$lib/api/types";
+  import ViewerContext from "../ViewerContext.svelte";
+  import Grid from "../Grid.svelte";
+
+  export const meta = {
+    title: "Components / Viewer / Grid",
+    component: Grid,
+    parameters: { layout: "fullscreen" },
+  };
+
+  import doc from "@/test/fixtures/documents/examples/lefler-thesis.json";
+
+  const document = doc as Document;
+
+  let args = {
+    context: {
+      document,
+    },
+    props: {
+      size: "thumbnail",
+    },
+  };
+</script>
+
+<Template let:args>
+  <ViewerContext {...args.context}>
+    <Grid {...args.props} />
+  </ViewerContext>
+</Template>
+
+<Story
+  name="small"
+  args={{ ...args, props: { ...args.props, size: "small" } }}
+/>
diff --git a/src/lib/components/viewer/stories/Note.stories.svelte b/src/lib/components/viewer/stories/Note.stories.svelte
index ddf39efd3..e2f71989d 100644
--- a/src/lib/components/viewer/stories/Note.stories.svelte
+++ b/src/lib/components/viewer/stories/Note.stories.svelte
@@ -7,12 +7,14 @@
     import.meta.url,
   ).href;
 
-  import { Story } from "@storybook/addon-svelte-csf";
-  import { setContext } from "svelte";
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import ViewerContext from "../ViewerContext.svelte";
   import Note from "../Note.svelte";
 
   import doc from "@/test/fixtures/documents/document-expanded.json";
   import pdfFile from "@/test/fixtures/documents/examples/agreement-between-conservatives-and-liberal-democrats-to-form-a-coalition-government.pdf";
+  import { writable } from "svelte/store";
+  import { pdfUrl } from "@/lib/api/documents";
 
   const document = doc as Document;
   const notes = document.notes as NoteType[];
@@ -36,35 +38,31 @@
 </script>
 
 <script lang="ts">
-  setContext("document", document);
 </script>
 
-<Story name="default">
-  <Note {document} note={notes[0]} />
-</Story>
-
-<Story name="page-level note">
-  <Note {document} note={page_note} />
-</Story>
-
-<Story name="editable">
-  <Note {document} note={{ ...notes[1], edit_access: true }} />
-</Story>
-
-<Story name="private access">
-  <Note {document} note={{ ...notes[1], access: "private" }} />
-</Story>
-
-<Story name="collaborators access">
-  <Note {document} note={{ ...notes[1], access: "organization" }} />
-</Story>
-
-<Story name="note with HTML">
-  <Note {document} note={{ ...notes[2], content: html }} />
-</Story>
-
-<Story name="render using PDF">
-  {#await load(url) then pdf}
-    <Note {document} note={{ ...notes[2], content: html }} {pdf} />
-  {/await}
-</Story>
+<Template let:args>
+  <ViewerContext
+    {document}
+    asset_url={pdfUrl(document)}
+    pdf={args.pdf ?? undefined}
+  >
+    <Note {...args} />
+  </ViewerContext>
+</Template>
+
+<Story name="default" args={{ note: notes[0] }} />
+<Story name="page-level note" args={{ note: page_note }} />
+<Story name="editable" args={{ note: { ...notes[1], edit_access: true } }} />
+<Story
+  name="private access"
+  args={{ note: { ...notes[1], access: "private" } }}
+/>
+<Story
+  name="collaborators access"
+  args={{ note: { ...notes[1], access: "organization" } }}
+/>
+<Story name="note with HTML" args={{ note: { ...notes[2], content: html } }} />
+<Story
+  name="render using PDF"
+  args={{ pdf: writable(load(url)), note: { ...notes[2], content: html } }}
+/>
diff --git a/src/lib/components/viewer/stories/Notes.stories.svelte b/src/lib/components/viewer/stories/Notes.stories.svelte
index 2c5fdbbd6..e78a18648 100644
--- a/src/lib/components/viewer/stories/Notes.stories.svelte
+++ b/src/lib/components/viewer/stories/Notes.stories.svelte
@@ -1,9 +1,9 @@
 <script context="module" lang="ts">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import type { Document } from "$lib/api/types";
-
-  import { Story } from "@storybook/addon-svelte-csf";
-  import { setContext } from "svelte";
-
+  import doc from "@/test/fixtures/documents/document-expanded.json";
+  import pdfFile from "@/test/fixtures/documents/examples/agreement-between-conservatives-and-liberal-democrats-to-form-a-coalition-government.pdf";
+  import ViewerContext from "../ViewerContext.svelte";
   import Notes from "../Notes.svelte";
 
   export const meta = {
@@ -12,25 +12,23 @@
     parameters: { layout: "centered" },
   };
 
-  import doc from "@/test/fixtures/documents/document-expanded.json";
-  import pdfFile from "@/test/fixtures/documents/examples/agreement-between-conservatives-and-liberal-democrats-to-form-a-coalition-government.pdf";
-
   const document = doc as Document;
   const url = new URL(pdfFile, import.meta.url);
-</script>
 
-<script lang="ts">
-  setContext("document", document);
+  let args = {
+    document,
+    asset_url: url,
+  };
 </script>
 
-<Story name="notes using images">
-  <Notes {document} />
-</Story>
+<Template let:args>
+  <ViewerContext {...args}>
+    <Notes />
+  </ViewerContext>
+</Template>
+
+<Story name="notes using images" args={{ document }} />
 
-<Story name="notes using a PDF file">
-  <Notes {document} asset_url={url} />
-</Story>
+<Story name="notes using a PDF file" {args} />
 
-<Story name="no notes">
-  <Notes document={{ ...document, notes: [] }} />
-</Story>
+<Story name="no notes" args={{ document: { ...document, notes: [] } }} />
diff --git a/src/lib/components/viewer/stories/NotesPane.stories.svelte b/src/lib/components/viewer/stories/NotesPane.stories.svelte
deleted file mode 100644
index 91138392f..000000000
--- a/src/lib/components/viewer/stories/NotesPane.stories.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script context="module" lang="ts">
-  import type { Document, Note, ViewerMode } from "$lib/api/types";
-
-  import { Story } from "@storybook/addon-svelte-csf";
-  import NotesPane from "../NotesPane.svelte";
-  import Flex from "$lib/components/common/Flex.svelte";
-
-  export const meta = {
-    title: "Components / Viewer / Notes pane",
-    component: NotesPane,
-    parameters: { layout: "centered" },
-  };
-
-  import pdfFile from "@/test/fixtures/documents/examples/agreement-between-conservatives-and-liberal-democrats-to-form-a-coalition-government.pdf";
-
-  import * as pdfjs from "pdfjs-dist/build/pdf.mjs";
-  pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-    "pdfjs-dist/build/pdf.worker.mjs",
-    import.meta.url,
-  ).href;
-  import { pageSizes } from "@/api/pageSize.js";
-  import doc from "@/test/fixtures/documents/document-expanded.json";
-
-  const document = doc as Document;
-  const sizes = pageSizes(document.page_spec);
-  const notes = document.notes.reduce((m, note) => {
-    if (!m[note.page_number]) {
-      m[note.page_number] = [];
-    }
-    m[note.page_number].push(note);
-    return m;
-  }, {});
-
-  const url = new URL(pdfFile, import.meta.url);
-
-  async function load(url: URL) {
-    return pdfjs.getDocument(url).promise;
-  }
-</script>
-
-<script lang="ts">
-  import { setContext } from "svelte";
-  import { writable, type Writable } from "svelte/store";
-
-  const activeNote: Writable<Note> = writable(null);
-  const mode: Writable<ViewerMode> = writable("annotating");
-
-  setContext("activeNote", activeNote);
-  setContext("currentMode", mode);
-</script>
-
-<Story name="default">
-  <Flex class="pages" direction="column" gap={1}>
-    {#await load(url) then pdf}
-      {#each sizes as [width, height], page_number}
-        <div class="page">
-          <NotesPane
-            {document}
-            {pdf}
-            notes={notes[page_number] || []}
-            scale={1.25}
-          />
-        </div>
-      {/each}
-    {/await}
-  </Flex>
-</Story>
-
-<style>
-  .page {
-    position: relative;
-    width: 88ch;
-    aspect-ratio: 2 / 3;
-    box-shadow: var(--shadow-1);
-  }
-</style>
diff --git a/src/lib/components/viewer/stories/PDF.stories.svelte b/src/lib/components/viewer/stories/PDF.stories.svelte
index 6d8ad0735..aee2b10ee 100644
--- a/src/lib/components/viewer/stories/PDF.stories.svelte
+++ b/src/lib/components/viewer/stories/PDF.stories.svelte
@@ -1,15 +1,18 @@
 <script context="module" lang="ts">
   import { rest } from "msw";
-  import type { Document, Note, ViewerMode } from "@/lib/api/types";
+  import type { Document, Note, Section, ViewerMode } from "@/lib/api/types";
 
-  import { Story } from "@storybook/addon-svelte-csf";
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import PDF from "../PDF.svelte";
-  import { redactions } from "../RedactionPane.svelte";
+  import { redactions } from "../RedactionLayer.svelte";
+
+  import ViewerContext from "../ViewerContext.svelte";
 
   import { IMAGE_WIDTHS_MAP } from "@/config/config.js";
   import { pdfUrl } from "$lib/api/documents";
 
+  import { createApiUrl } from "@/test/handlers/utils";
   import doc from "@/test/fixtures/documents/document-expanded.json";
   import redacted from "@/test/fixtures/documents/redactions.json";
 
@@ -22,43 +25,61 @@
   const document = doc as Document;
 
   const loadingUrl = createApiUrl("loading/");
-</script>
-
-<script lang="ts">
-  import { setContext } from "svelte";
-  import { writable, type Writable } from "svelte/store";
-  import { createApiUrl } from "@/test/handlers/utils";
 
-  const activeNote: Writable<Note> = writable(null);
-  const mode: Writable<ViewerMode> = writable("document");
-
-  setContext("activeNote", activeNote);
-  setContext("currentMode", mode);
-  setContext("document", document);
+  const sections: Section[] = [
+    { id: 1, page_number: 1, title: "Something uneasy" },
+    {
+      id: 1,
+      page_number: 1,
+      title:
+        "What it means is that tonight a Santa Ana will begin to blow, a hot wind from the northeast whining down through the Cajon and SanGorgonio Passes, blowing up sand storms out along Route 66, drying the hills andthe nerves to flash point.",
+    },
+  ];
+
+  let args = {
+    context: {
+      document: {
+        ...document,
+        notes: [],
+      },
+      mode: "document",
+      asset_url: pdfUrl(document),
+    },
+    props: {
+      scale: "width",
+    },
+  };
 </script>
 
-<Story name="default">
-  <div style="width: {IMAGE_WIDTHS_MAP.get('large')}px;">
-    <PDF document={{ ...document, notes: [] }} asset_url={pdfUrl(document)} />
-  </div>
-</Story>
+<Template let:args>
+  <ViewerContext {...args.context}>
+    <div style="width: {IMAGE_WIDTHS_MAP.get('large')}px;">
+      <PDF {...args.props} />
+    </div>
+  </ViewerContext>
+</Template>
 
-<Story name="show notes">
-  <div style="width: {IMAGE_WIDTHS_MAP.get('large')}px;">
-    <PDF {document} asset_url={pdfUrl(document)} />
-  </div>
-</Story>
+<Story name="Default" {args} />
 
-<Story name="fit width" parameters={{ layout: "fullscreen" }}>
-  <PDF {document} asset_url={pdfUrl(document)} scale="width" />
-</Story>
+<Story
+  name="With Notes"
+  args={{ ...args, context: { ...args.context, document } }}
+/>
 
-<Story name="Zoom 200%" parameters={{ layout: "fullscreen" }}>
-  <PDF {document} asset_url={pdfUrl(document)} scale={2} />
-</Story>
+<Story
+  name="Fit width"
+  parameters={{ layout: "fullscreen" }}
+  args={{ ...args, props: { scale: "width" } }}
+/>
+
+<Story
+  name="Zoom 200%"
+  parameters={{ layout: "fullscreen" }}
+  args={{ ...args, props: { scale: 2 } }}
+/>
 
 <Story
-  name="no pdf"
+  name="File Loading"
   parameters={{
     msw: {
       handlers: [
@@ -66,24 +87,62 @@
       ],
     },
   }}
->
-  <div style="width: {IMAGE_WIDTHS_MAP.get('large')}px;">
-    <PDF {document} asset_url={new URL(loadingUrl)} />
-  </div>
-</Story>
+  args={{
+    ...args,
+    context: { ...args.context, asset_url: new URL(loadingUrl) },
+  }}
+/>
 
-<Story name="missing page spec">
-  <div style="width: {IMAGE_WIDTHS_MAP.get('large')}px;">
-    <PDF
-      document={{ ...document, notes: [], page_spec: undefined }}
-      asset_url={pdfUrl(document)}
-    />
-  </div>
-</Story>
+<Story
+  name="File Error"
+  parameters={{
+    msw: {
+      handlers: [
+        rest.get(loadingUrl, (req, res, ctx) =>
+          res(
+            ctx.status(400, "Ambiguous Error"),
+            ctx.json("Something went horribly wrong."),
+          ),
+        ),
+      ],
+    },
+  }}
+  args={{
+    ...args,
+    context: { ...args.context, asset_url: new URL(loadingUrl) },
+  }}
+/>
 
-<Story name="redactions in progress">
-  <div style="width: {IMAGE_WIDTHS_MAP.get('large')}px;">
-    <button on:click={() => ($redactions = redacted)}>Show redactions</button>
-    <PDF document={{ ...document, notes: [] }} asset_url={pdfUrl(document)} />
-  </div>
+<Story
+  name="Missing page_spec"
+  args={{
+    ...args,
+    context: {
+      ...args.context,
+      document: { ...document, notes: [], page_spec: undefined },
+    },
+  }}
+/>
+
+<Story name="Redactions in-progress">
+  <ViewerContext
+    document={{ ...document, notes: [] }}
+    asset_url={pdfUrl(document)}
+  >
+    <div style="width: {IMAGE_WIDTHS_MAP.get('large')}px;">
+      <button on:click={() => ($redactions = redacted)}>Show redactions</button>
+      <PDF />
+    </div>
+  </ViewerContext>
 </Story>
+
+<Story
+  name="With Section"
+  args={{
+    ...args,
+    context: {
+      ...args.context,
+      document: { ...document, notes: [], sections },
+    },
+  }}
+/>
diff --git a/src/lib/components/viewer/stories/PDFPage.stories.svelte b/src/lib/components/viewer/stories/PDFPage.stories.svelte
index d0e4f9ec5..3aec5ae6c 100644
--- a/src/lib/components/viewer/stories/PDFPage.stories.svelte
+++ b/src/lib/components/viewer/stories/PDFPage.stories.svelte
@@ -3,7 +3,7 @@
   import { Story } from "@storybook/addon-svelte-csf";
   import PdfPage from "../PDFPage.svelte";
 
-  import * as pdfjs from "pdfjs-dist/build/pdf.mjs";
+  import * as pdfjs from "pdfjs-dist/legacy/build/pdf.mjs";
   pdfjs.GlobalWorkerOptions.workerSrc = new URL(
     "pdfjs-dist/build/pdf.worker.mjs",
     import.meta.url,
@@ -13,6 +13,8 @@
   import doc from "@/test/fixtures/documents/examples/the-santa-anas.json";
   import textPositions from "@/test/fixtures/documents/examples/the-santa-anas-p1.position.json";
   import pdfFile from "@/test/fixtures/documents/examples/the-santa-anas.pdf";
+  import ViewerContext from "../ViewerContext.svelte";
+  import { writable } from "svelte/store";
 
   const document = { ...doc, edit_access: true } as Document;
 
@@ -27,92 +29,43 @@
   const query = "los angeles";
   const url = new URL(pdfFile, import.meta.url);
 
-  // sections
-  const section: Section = { id: 1, page_number: 1, title: "Something uneasy" };
-  const long_section: Section = {
-    id: 1,
-    page_number: 1,
-    title:
-      "What it means is that tonight a Santa Ana will begin to blow, a hot wind from the northeast whining down through the Cajon and SanGorgonio Passes, blowing up sand storms out along Route 66, drying the hills andthe nerves to flash point.",
-  };
-
-  async function load(url: URL) {
+  async function load(url: URL): Promise<pdfjs.PDFDocumentProxy> {
     return pdfjs.getDocument(url).promise;
   }
 </script>
 
 <Story name="fit width" parameters={{ layout: "fullscreen" }}>
-  {#await load(url) then pdf}
-    <PdfPage
-      {document}
-      page_number={1}
-      scale="width"
-      {pdf}
-      {width}
-      {height}
-      {section}
-    />
-  {/await}
+  <ViewerContext {document} pdf={writable(load(url))}>
+    <PdfPage page_number={1} scale="width" {width} {height} />
+  </ViewerContext>
 </Story>
 
 <Story name="embedded text">
-  {#await load(url) then pdf}
-    <PdfPage {document} page_number={1} scale={1.5} {pdf} {width} {height} />
-  {/await}
+  <ViewerContext {document} pdf={writable(load(url))}>
+    <PdfPage page_number={1} scale={1.5} {width} {height} />
+  </ViewerContext>
 </Story>
 
 <Story name="server text">
-  {#await load(url) then pdf}
+  <ViewerContext {document} pdf={writable(load(url))}>
     <PdfPage
-      {document}
       page_number={1}
       scale={1.5}
-      {pdf}
       text={textPositions}
       {width}
       {height}
     />
-  {/await}
+  </ViewerContext>
 </Story>
 
 <Story name="search results">
-  {#await load(url) then pdf}
-    <PdfPage
-      {document}
-      page_number={1}
-      scale={1.5}
-      {pdf}
-      {width}
-      {height}
-      {query}
-    />
-  {/await}
-</Story>
-
-<Story name="section start">
-  {#await load(url) then pdf}
-    <PdfPage
-      {document}
-      page_number={1}
-      scale={1.5}
-      {pdf}
-      {width}
-      {height}
-      {section}
-    />
-  {/await}
+  <ViewerContext {document} pdf={writable(load(url))}>
+    <PdfPage page_number={1} scale={1.5} {width} {height} />
+  </ViewerContext>
 </Story>
 
 <Story name="long section start" parameters={{ layout: "fullscreen" }}>
-  {#await load(url) then pdf}
-    <PdfPage
-      {document}
-      page_number={1}
-      scale="width"
-      {pdf}
-      {width}
-      {height}
-      section={long_section}
-    />
-  {/await}
+  <ViewerContext {document} pdf={writable(load(url))}>
+    <PdfPage page_number={1} scale="width" {width} {height} />
+  </ViewerContext>
 </Story>
diff --git a/src/lib/components/viewer/toolbars/stories/PaginationToolbar.stories.svelte b/src/lib/components/viewer/stories/PaginationToolbar.stories.svelte
similarity index 100%
rename from src/lib/components/viewer/toolbars/stories/PaginationToolbar.stories.svelte
rename to src/lib/components/viewer/stories/PaginationToolbar.stories.svelte
diff --git a/src/lib/components/viewer/toolbars/stories/ReadingToolbar.stories.svelte b/src/lib/components/viewer/stories/ReadingToolbar.stories.svelte
similarity index 100%
rename from src/lib/components/viewer/toolbars/stories/ReadingToolbar.stories.svelte
rename to src/lib/components/viewer/stories/ReadingToolbar.stories.svelte
diff --git a/src/lib/components/viewer/stories/RedactionPane.stories.svelte b/src/lib/components/viewer/stories/RedactionLayer.stories.svelte
similarity index 79%
rename from src/lib/components/viewer/stories/RedactionPane.stories.svelte
rename to src/lib/components/viewer/stories/RedactionLayer.stories.svelte
index 17e503eed..c7a91690e 100644
--- a/src/lib/components/viewer/stories/RedactionPane.stories.svelte
+++ b/src/lib/components/viewer/stories/RedactionLayer.stories.svelte
@@ -1,13 +1,13 @@
 <script context="module" lang="ts">
   import { Story, Template } from "@storybook/addon-svelte-csf";
-  import RedactionPane, { redactions } from "../RedactionPane.svelte";
+  import RedactionLayer, { redactions } from "../RedactionLayer.svelte";
   import Flex from "../../common/Flex.svelte";
 
   import redacted from "@/test/fixtures/documents/redactions.json";
 
   export const meta = {
-    title: "Components / Viewer / Redaction pane",
-    component: RedactionPane,
+    title: "Components / Viewer / Redaction Layer",
+    component: RedactionLayer,
     parameters: { layout: "centered" },
   };
 </script>
@@ -28,7 +28,7 @@
   <Flex class="pages" direction="column" gap={1}>
     {#each redacted as page}
       <div class="page">
-        <RedactionPane {...args} page_number={page.page_number} />
+        <RedactionLayer {...args} page_number={page.page_number} />
       </div>
     {/each}
   </Flex>
diff --git a/src/lib/components/viewer/toolbars/stories/RedactionToolbar.stories.svelte b/src/lib/components/viewer/stories/RedactionToolbar.stories.svelte
similarity index 100%
rename from src/lib/components/viewer/toolbars/stories/RedactionToolbar.stories.svelte
rename to src/lib/components/viewer/stories/RedactionToolbar.stories.svelte
diff --git a/src/lib/components/viewer/stories/Section.stories.svelte b/src/lib/components/viewer/stories/Section.stories.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/lib/components/viewer/stories/Text.stories.svelte b/src/lib/components/viewer/stories/Text.stories.svelte
index 130f4c05b..686cde891 100644
--- a/src/lib/components/viewer/stories/Text.stories.svelte
+++ b/src/lib/components/viewer/stories/Text.stories.svelte
@@ -9,9 +9,12 @@
   };
 
   import { document } from "@/test/fixtures/documents";
-  import txt from "@/test/fixtures/documents/document.txt.json";
+  import text from "@/test/fixtures/documents/document.txt.json";
+  import ViewerContext from "../ViewerContext.svelte";
 </script>
 
 <Story name="default">
-  <Text {document} text={txt} />
+  <ViewerContext {document} {text}>
+    <Text />
+  </ViewerContext>
 </Story>
diff --git a/src/lib/components/viewer/stories/TextPage.stories.svelte b/src/lib/components/viewer/stories/TextPage.stories.svelte
deleted file mode 100644
index 1aae7d49a..000000000
--- a/src/lib/components/viewer/stories/TextPage.stories.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script context="module" lang="ts">
-  import { Story } from "@storybook/addon-svelte-csf";
-  import TextPage from "../TextPage.svelte";
-
-  export const meta = {
-    title: "Components / Viewer / Text page",
-    component: TextPage,
-    parameters: { layout: "centered" },
-  };
-
-  import { document } from "@/test/fixtures/documents";
-  import txt from "@/test/fixtures/documents/document.txt.json";
-
-  const page = txt.pages[0];
-  const query = "los angeles";
-</script>
-
-<Story name="default">
-  <TextPage {document} page={page.page} contents={page.contents} />
-</Story>
-
-<Story name="search results">
-  <TextPage {document} page={page.page} contents={page.contents} {query} />
-</Story>
diff --git a/src/lib/components/viewer/stories/ThumbnailGrid.stories.svelte b/src/lib/components/viewer/stories/ThumbnailGrid.stories.svelte
deleted file mode 100644
index 8a02ea6a3..000000000
--- a/src/lib/components/viewer/stories/ThumbnailGrid.stories.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script context="module" lang="ts">
-  import type { Document } from "$lib/api/types";
-
-  import { Story } from "@storybook/addon-svelte-csf";
-  import ThumbnailGrid from "../ThumbnailGrid.svelte";
-
-  export const meta = {
-    title: "Components / Viewer / Thumbnail grid",
-    component: ThumbnailGrid,
-    parameters: { layout: "fullscreen" },
-  };
-
-  import doc from "@/test/fixtures/documents/examples/lefler-thesis.json";
-
-  const document = doc as Document;
-</script>
-
-<Story name="thumbnail">
-  <ThumbnailGrid {document} />
-</Story>
-
-<Story name="small">
-  <ThumbnailGrid {document} size="small" />
-</Story>
diff --git a/src/lib/components/viewer/stories/Viewer.stories.svelte b/src/lib/components/viewer/stories/Viewer.stories.svelte
index 82b8f613a..3d66f8116 100644
--- a/src/lib/components/viewer/stories/Viewer.stories.svelte
+++ b/src/lib/components/viewer/stories/Viewer.stories.svelte
@@ -2,11 +2,12 @@
   import type { Document, DocumentText, ViewerMode } from "$lib/api/types";
 
   import { Story, Template } from "@storybook/addon-svelte-csf";
-  import ViewerContextDecorator from "@/../.storybook/decorators/ViewerContextDecorator.svelte";
+  import ViewerContext from "../ViewerContext.svelte";
   import Viewer from "../Viewer.svelte";
 
   import doc from "@/test/fixtures/documents/document-expanded.json";
   import txt from "@/test/fixtures/documents/document.txt.json";
+  import Note from "../Note.svelte";
 
   const document = doc as Document;
 
@@ -34,9 +35,9 @@
 
 <Template let:args>
   <div class="vh">
-    <ViewerContextDecorator mode={args.mode}>
-      <Viewer {...args} />
-    </ViewerContextDecorator>
+    <ViewerContext {...args}>
+      <Viewer />
+    </ViewerContext>
   </div>
 </Template>
 
@@ -44,7 +45,11 @@
   name="Edit Access"
   args={{
     ...args,
-    document: { ...document, edit_access: true },
+    document: {
+      ...document,
+      edit_access: true,
+      notes: document.notes.map((note) => ({ ...note, edit_access: true })),
+    },
   }}
 />
 <Story
diff --git a/src/lib/components/viewer/stories/Zoom.stories.svelte b/src/lib/components/viewer/stories/Zoom.stories.svelte
index 4a2df1caf..ffc27a01b 100644
--- a/src/lib/components/viewer/stories/Zoom.stories.svelte
+++ b/src/lib/components/viewer/stories/Zoom.stories.svelte
@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-  import { Story } from "@storybook/addon-svelte-csf";
+  import { Template, Story } from "@storybook/addon-svelte-csf";
   import Zoom from "../Zoom.svelte";
 
   export const meta = {
@@ -10,16 +10,18 @@
     },
     tags: ["autodocs"],
   };
+
+  let args = {
+    mode: "document",
+  };
 </script>
 
-<Story name="document">
-  <Zoom mode="document" />
-</Story>
+<Template let:args>
+  <Zoom {...args} />
+</Template>
+
+<Story name="Document Zoom" {args} />
 
-<Story name="text">
-  <Zoom mode="text" />
-</Story>
+<Story name="Text Zoom" args={{ ...args, mode: "text" }} />
 
-<Story name="grid">
-  <Zoom mode="grid" />
-</Story>
+<Story name="Grid Zoom" args={{ ...args, mode: "grid" }} />
diff --git a/src/lib/load/document.ts b/src/lib/load/document.ts
new file mode 100644
index 000000000..99ceefe95
--- /dev/null
+++ b/src/lib/load/document.ts
@@ -0,0 +1,38 @@
+import type { ViewerMode } from "$lib/api/types";
+
+import { error } from "@sveltejs/kit";
+import * as documents from "$lib/api/documents";
+
+interface Load {
+  fetch: typeof globalThis.fetch;
+  params: { id: string };
+  url: URL;
+}
+
+export default async function load({ fetch, params, url }: Load) {
+  const { data: document, error: err } = await documents.get(+params.id, fetch);
+
+  if (err) {
+    throw error(err.status, err.message);
+  }
+
+  if (!document) {
+    throw error(404, "Document not found");
+  }
+
+  let mode: ViewerMode =
+    (url.searchParams.get("mode") as ViewerMode) ?? "document";
+  const text = await documents.text(document, fetch);
+  const asset_url = await documents.assetUrl(document, fetch);
+
+  if (!documents.MODES.has(mode)) {
+    mode = documents.MODES[0];
+  }
+
+  return {
+    document,
+    text,
+    asset_url,
+    mode,
+  };
+}
diff --git a/src/lib/utils/search.ts b/src/lib/utils/search.ts
index 21fda10ea..173fcd2c9 100644
--- a/src/lib/utils/search.ts
+++ b/src/lib/utils/search.ts
@@ -71,3 +71,7 @@ export function pageNumber(page: string): number {
   const number = parseInt(match[1]);
   return number;
 }
+
+export function getQuery(url: URL, param: string = "q"): string {
+  return url.searchParams.get(param) ?? "";
+}
diff --git a/src/lib/utils/tests/__snapshots__/viewer.test.ts.snap b/src/lib/utils/tests/__snapshots__/viewer.test.ts.snap
new file mode 100644
index 000000000..4532219eb
--- /dev/null
+++ b/src/lib/utils/tests/__snapshots__/viewer.test.ts.snap
@@ -0,0 +1,164 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`getZoomLevels 1`] = `
+[
+  [
+    "width",
+    "zoom.fitWidth",
+  ],
+  [
+    "height",
+    "zoom.fitHeight",
+  ],
+  [
+    0.5,
+    "50%",
+  ],
+  [
+    0.75,
+    "75%",
+  ],
+  [
+    1,
+    "100%",
+  ],
+  [
+    1.25,
+    "125%",
+  ],
+  [
+    1.5,
+    "150%",
+  ],
+  [
+    2,
+    "200%",
+  ],
+]
+`;
+
+exports[`getZoomLevels 2`] = `
+[
+  [
+    0.5,
+    "50%",
+  ],
+  [
+    0.75,
+    "75%",
+  ],
+  [
+    1,
+    "100%",
+  ],
+  [
+    1.25,
+    "125%",
+  ],
+  [
+    1.5,
+    "150%",
+  ],
+  [
+    2,
+    "200%",
+  ],
+]
+`;
+
+exports[`getZoomLevels 3`] = `
+[
+  [
+    "thumbnail",
+    "zoom.thumbnail",
+  ],
+  [
+    "small",
+    "zoom.small",
+  ],
+  [
+    "normal",
+    "zoom.normal",
+  ],
+  [
+    "large",
+    "zoom.large",
+  ],
+]
+`;
+
+exports[`getZoomLevels 4`] = `[]`;
+
+exports[`getZoomLevels 5`] = `
+[
+  [
+    "width",
+    "zoom.fitWidth",
+  ],
+  [
+    "height",
+    "zoom.fitHeight",
+  ],
+  [
+    0.5,
+    "50%",
+  ],
+  [
+    0.75,
+    "75%",
+  ],
+  [
+    1,
+    "100%",
+  ],
+  [
+    1.25,
+    "125%",
+  ],
+  [
+    1.5,
+    "150%",
+  ],
+  [
+    2,
+    "200%",
+  ],
+]
+`;
+
+exports[`getZoomLevels 6`] = `
+[
+  [
+    "width",
+    "zoom.fitWidth",
+  ],
+  [
+    "height",
+    "zoom.fitHeight",
+  ],
+  [
+    0.5,
+    "50%",
+  ],
+  [
+    0.75,
+    "75%",
+  ],
+  [
+    1,
+    "100%",
+  ],
+  [
+    1.25,
+    "125%",
+  ],
+  [
+    1.5,
+    "150%",
+  ],
+  [
+    2,
+    "200%",
+  ],
+]
+`;
diff --git a/src/lib/utils/tests/viewer.test.ts b/src/lib/utils/tests/viewer.test.ts
index bb0b6b5b9..dd8421dd7 100644
--- a/src/lib/utils/tests/viewer.test.ts
+++ b/src/lib/utils/tests/viewer.test.ts
@@ -1,7 +1,15 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, test, expect } from "vitest";
 import { document } from "@/test/fixtures/documents";
 import { note } from "@/test/fixtures/notes";
-import { getViewerHref } from "../viewer";
+import {
+  fitPage,
+  getViewerHref,
+  pageSizes,
+  zoomToScale,
+  zoomToSize,
+  getZoomLevels,
+  getDefaultZoom,
+} from "../viewer";
 import {
   canonicalUrl,
   pageHashUrl,
@@ -53,3 +61,66 @@ describe("getViewerHref", () => {
     );
   });
 });
+
+describe("pageSizes", () => {
+  // Transform page_spec value into width + height for each page
+  it("returns an empty array for an empty pageSpec value", () => {
+    expect(pageSizes(" ")).toEqual([]);
+  });
+  it("splits each pageSpec part into a new array entry", () => {
+    expect(pageSizes(";;;;;;")).toEqual(new Array(7));
+  });
+  it("checks each part for a comma-delimited value", () => {
+    expect(pageSizes("1x1:0;2x2:1-3")).toEqual([
+      [1, 1],
+      [2, 2],
+      [2, 2],
+      [2, 2],
+    ]);
+  });
+});
+
+describe("fitPage", () => {
+  it("returns sensible defaults", () => {
+    expect(fitPage(1, 1, undefined, 10)).toEqual(10);
+    expect(fitPage(1, 1, undefined, "width")).toEqual(1);
+  });
+  it("returns a scale based on the container", () => {
+    const container = { clientWidth: 1000, clientHeight: 1000 } as HTMLElement;
+    expect(fitPage(750, 1000, container, "width")).toEqual(1000 / 750);
+    expect(fitPage(750, 2000, container, "height")).toEqual(1000 / 2000);
+  });
+});
+
+test("zoomToScale", () => {
+  expect(zoomToScale("width")).toEqual("width");
+  expect(zoomToScale("height")).toEqual("height");
+  expect(zoomToScale(1.1)).toEqual(1.1);
+  expect(zoomToScale("1.2")).toEqual(1.2);
+  expect(zoomToScale(undefined)).toEqual(1);
+  expect(zoomToScale("foobar")).toEqual(1);
+});
+
+test("zoomToSize", () => {
+  expect(zoomToSize("xlarge")).toEqual("xlarge");
+  expect(zoomToSize("large")).toEqual("large");
+  expect(zoomToSize(2000)).toEqual("small");
+});
+
+test("getDefaultZoom", () => {
+  expect(getDefaultZoom("document")).toEqual("width");
+  expect(getDefaultZoom("text")).toEqual(1);
+  expect(getDefaultZoom("grid")).toEqual("small");
+  expect(getDefaultZoom("notes")).toEqual(1);
+  expect(getDefaultZoom("annotating")).toEqual("width");
+  expect(getDefaultZoom("redacting")).toEqual("width");
+});
+
+test("getZoomLevels", () => {
+  expect(getZoomLevels("document")).toMatchSnapshot();
+  expect(getZoomLevels("text")).toMatchSnapshot();
+  expect(getZoomLevels("grid")).toMatchSnapshot();
+  expect(getZoomLevels("notes")).toMatchSnapshot();
+  expect(getZoomLevels("annotating")).toMatchSnapshot();
+  expect(getZoomLevels("redacting")).toMatchSnapshot();
+});
diff --git a/src/lib/utils/viewer.ts b/src/lib/utils/viewer.ts
index 346cbc431..462dfe91a 100644
--- a/src/lib/utils/viewer.ts
+++ b/src/lib/utils/viewer.ts
@@ -1,7 +1,15 @@
-import { getContext } from "svelte";
-import type { Document, Note, ViewerMode } from "$lib/api/types";
+import type {
+  Document,
+  Note,
+  Section,
+  Sizes,
+  ViewerMode,
+  Zoom,
+} from "$lib/api/types";
+
 import { canonicalUrl, pageHashUrl } from "../api/documents";
 import { noteHashUrl } from "../api/notes";
+import { IMAGE_WIDTHS_MAP } from "@/config/config.js";
 
 interface ViewerHrefOptions {
   document?: Document;
@@ -11,11 +19,6 @@ interface ViewerHrefOptions {
   embed?: boolean;
 }
 
-export function isEmbedded(): boolean {
-  // are we embedded?
-  return getContext("embed") ?? false;
-}
-
 export function getViewerHref(options: ViewerHrefOptions = {}) {
   const { document, page, note, mode = "document", embed = false } = options;
   let hash = "";
@@ -36,3 +39,166 @@ export function getViewerHref(options: ViewerHrefOptions = {}) {
     return href;
   }
 }
+
+/**
+ * Return a numeric scale based on intrinsic page size and container size
+ * @param width Original document width
+ * @param height Original document height
+ * @param container
+ * @param scale
+ */
+export function fitPage(
+  width: number,
+  height: number,
+  container: HTMLElement,
+  scale: number | "width" | "height",
+): number {
+  if (typeof scale === "number") return scale;
+  if (!container) return 1;
+
+  // const [x1, y1, width, height] = page.view;
+  const { clientWidth, clientHeight } = container;
+
+  return scale === "width" ? clientWidth / width : clientHeight / height;
+}
+
+/**
+ * Parse page_spec into width and height of each page
+ *
+ * @param pageSpec A string encoding page dimensions in a compact format
+ * @returns an array of [width, height] tuples
+ */
+export function pageSizes(pageSpec: string): [width: number, height: number][] {
+  // Handle empty page spec
+  if (pageSpec.trim().length == 0) return [];
+
+  const parts = pageSpec.split(";");
+  return parts.reduce((sizes, part) => {
+    const [size, range] = part?.split(":");
+    const [width, height] = size?.split("x").map(parseFloat);
+
+    range?.split(",").forEach((rangePart) => {
+      if (rangePart.includes("-")) {
+        const [start, end] = rangePart.split("-").map((x) => parseInt(x, 10));
+        for (let page = start; page <= end; page++) {
+          sizes[page] = [width, height];
+        }
+      } else {
+        const page = parseInt(rangePart, 10);
+        sizes[page] = [width, height];
+      }
+    });
+
+    return sizes;
+  }, Array(parts.length));
+}
+
+/**
+ * Index notes by page
+ */
+export function getNotes(document: Document): Record<number, Note[]> {
+  return (
+    document.notes?.reduce<Record<number, Note[]>>((m, note) => {
+      if (!m[note.page_number]) {
+        m[note.page_number] = [];
+      }
+      m[note.page_number].push(note);
+      return m;
+    }, {}) ?? {}
+  );
+}
+
+/**
+ * Index sections by page
+ */
+export function getSections(document: Document): Record<number, Section> {
+  return (
+    document.sections?.reduce((m, section) => {
+      m[section.page_number] = section;
+      return m;
+    }, {}) ?? {}
+  );
+}
+
+// for typescript
+export function zoomToScale(zoom: any): number | "width" | "height" {
+  if (zoom === "width" || zoom === "height") {
+    return zoom;
+  }
+
+  return +zoom || 1;
+}
+
+export function zoomToSize(zoom: any): Sizes {
+  if (IMAGE_WIDTHS_MAP.has(zoom)) {
+    return zoom;
+  }
+
+  return "small";
+}
+
+/**
+ * Generate a default zoom, based on mode
+ * @param mode
+ */
+export function getDefaultZoom(mode: ViewerMode): Zoom {
+  switch (mode) {
+    case "document":
+      return "width";
+
+    case "annotating":
+      return "width";
+
+    case "redacting":
+      return "width";
+
+    case "grid":
+      return "small";
+
+    default:
+      return 1;
+  }
+}
+
+/**
+ * Generate zoom levels based on mode, since each zooms in a slightly different way
+ */
+export function getZoomLevels(mode: ViewerMode): [string | number, string][] {
+  switch (mode) {
+    case "document":
+    case "annotating":
+    case "redacting":
+      return [
+        ["width", "zoom.fitWidth"],
+        ["height", "zoom.fitHeight"],
+        [0.5, "50%"],
+        [0.75, "75%"],
+        [1, "100%"],
+        [1.25, "125%"],
+        [1.5, "150%"],
+        [2, "200%"],
+      ];
+
+    case "text":
+      return [
+        [0.5, "50%"],
+        [0.75, "75%"],
+        [1, "100%"],
+        [1.25, "125%"],
+        [1.5, "150%"],
+        [2, "200%"],
+      ];
+
+    case "grid":
+      return [
+        ["thumbnail", "zoom.thumbnail"],
+        ["small", "zoom.small"],
+        ["normal", "zoom.normal"],
+        ["large", "zoom.large"],
+      ];
+
+    default:
+      // notes don't zoom
+      return [];
+  }
+}
diff --git a/src/routes/(app)/documents/[id]-[slug]/+layout.svelte b/src/routes/(app)/documents/[id]-[slug]/+layout.svelte
deleted file mode 100644
index 8023ce0c6..000000000
--- a/src/routes/(app)/documents/[id]-[slug]/+layout.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts">
-  import type { Document, Note, ViewerMode } from "$lib/api/types";
-
-  import { setContext } from "svelte";
-  import { writable, type Writable } from "svelte/store";
-
-  import { embedUrl } from "$lib/api/embed";
-  import { canonicalUrl, pageImageUrl } from "@/lib/api/documents";
-
-  export let data;
-
-  const currentPage: Writable<number> = writable(1);
-  const activeNote: Writable<Note> = writable(null);
-  const currentMode: Writable<ViewerMode> = writable(data.mode);
-
-  setContext<Document>("document", data.document);
-  // stores we need deeper in the component tree, available via context
-  setContext("currentPage", currentPage);
-  setContext("activeNote", activeNote);
-  setContext("currentMode", currentMode);
-
-  $: document = data.document;
-  $: canonical_url = canonicalUrl(document).href;
-</script>
-
-<svelte:head>
-  <!-- Insert canonical URL -->
-  <link rel="canonical" href={canonical_url} />
-
-  {#if document.noindex || document.admin_noindex}
-    <meta name="robots" content="noindex" />
-  {/if}
-  <title>{document.title} | DocumentCloud</title>
-  <link
-    rel="alternate"
-    type="application/json+oembed"
-    href={embedUrl(document.canonical_url).href}
-    title={document.title}
-  />
-  {#if document.description?.trim().length > 0}
-    <meta name="description" content={document.description} />
-    <meta property="og:description" content={document.description} />
-  {/if}
-  <meta
-    property="og:image"
-    content={pageImageUrl(document, 0, "normal").href}
-  />
-  <!-- Social cards -->
-  <meta property="twitter:card" content="summary_large_image" />
-  <meta property="og:url" content={canonical_url} />
-  <meta property="og:title" content={document.title} />
-</svelte:head>
-
-<slot />
diff --git a/src/routes/(app)/documents/[id]-[slug]/+layout.ts b/src/routes/(app)/documents/[id]-[slug]/+layout.ts
deleted file mode 100644
index ef00c7c0b..000000000
--- a/src/routes/(app)/documents/[id]-[slug]/+layout.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Load a document for the document viewer.
- * We do this in a layout module because sub-routes can use the same
- * document without loading it again.
- */
-import type { Document, ViewerMode, ReadMode } from "@/lib/api/types";
-
-import { redirect, error } from "@sveltejs/kit";
-
-import * as documents from "$lib/api/documents";
-import { getPinnedAddons } from "$lib/api/addons";
-import { breadcrumbTrail } from "$lib/utils/index";
-
-/** @type {import('./$types').PageLoad} */
-export async function load({ fetch, params, parent, depends, url }) {
-  const { data: document, error: err } = await documents.get(+params.id, fetch);
-
-  if (err) {
-    error(err.status, err.message);
-  }
-
-  if (!document) {
-    error(404, "Document not found");
-  }
-
-  const canonical = new URL(document.canonical_url);
-  if (document.slug !== params.slug) {
-    redirect(302, canonical.pathname);
-  }
-
-  let mode: ViewerMode =
-    (url.searchParams.get("mode") as ViewerMode) ?? "document";
-
-  if (!documents.MODES.has(mode)) {
-    mode = documents.MODES[0];
-  }
-
-  if (!document.edit_access && !documents.READING_MODES.has(mode as ReadMode)) {
-    return redirect(302, canonical);
-  }
-
-  let action = url.searchParams.get("action");
-
-  const breadcrumbs = await breadcrumbTrail(parent, [
-    { href: canonical.pathname, title: document.title },
-  ]);
-
-  // stream this
-  const pinnedAddons = getPinnedAddons(fetch);
-
-  depends(`document:${document.id}`);
-
-  return {
-    document,
-    mode,
-    action,
-    pinnedAddons,
-    breadcrumbs,
-  };
-}
diff --git a/src/routes/(app)/documents/[id]-[slug]/+page.svelte b/src/routes/(app)/documents/[id]-[slug]/+page.svelte
index a2f500ff9..863b19e88 100644
--- a/src/routes/(app)/documents/[id]-[slug]/+page.svelte
+++ b/src/routes/(app)/documents/[id]-[slug]/+page.svelte
@@ -1,80 +1,58 @@
-<script lang="ts">
-  import type { Writable } from "svelte/store";
-  import type { Note, ViewerMode } from "$lib/api/types.js";
+<!-- @component
+  Assumes it's a child of a ViewerContext
+ -->
 
-  import { afterNavigate, invalidate } from "$app/navigation";
-  import { page } from "$app/stores";
+<script lang="ts">
+  import "@/style/kit.css";
 
-  import { getContext } from "svelte";
-  import { _ } from "svelte-i18n";
+  import { embedUrl } from "$lib/api/embed";
+  import { canonicalUrl, pageImageUrl } from "$lib/api/documents";
 
   import DocumentLayout from "$lib/components/layouts/DocumentLayout.svelte";
   import GuidedTour from "$lib/components/onboarding/GuidedTour.svelte";
-
-  // config and utils
-  import {
-    shouldPreload,
-    pageFromHash,
-    shouldPaginate,
-  } from "$lib/api/documents";
-  import { noteFromHash } from "$lib/api/notes";
-  import { scrollToPage } from "$lib/utils/scroll";
+  import ViewerContext from "$lib/components/viewer/ViewerContext.svelte";
 
   export let data;
 
-  const activeNote: Writable<Note> = getContext("activeNote");
-  const currentMode: Writable<ViewerMode> = getContext("currentMode");
-  const currentPage: Writable<number> = getContext("currentPage");
-
   $: document = data.document;
-  $: asset_url = data.asset_url;
-  $: query = data.query;
+  $: mode = data.mode;
   $: text = data.text;
+  $: asset_url = data.asset_url;
+  $: canonical_url = canonicalUrl(document).href;
+
   $: action = data.action;
-  $: $currentMode = data.mode; // set $currentMode from URL search param
   $: addons = data.pinnedAddons;
-
-  // lifecycle
-  afterNavigate(() => {
-    const { hash } = $page.url;
-
-    $currentPage = pageFromHash(hash);
-
-    if ($currentPage > 1 && shouldPaginate($currentMode)) {
-      scrollToPage($currentPage);
-    }
-
-    const noteId = noteFromHash(hash);
-    if (noteId) {
-      $activeNote = document.notes.find((note) => note.id === noteId);
-    }
-  });
-
-  // go to page
-  function onHashChange() {
-    const { hash } = window.location;
-    $currentPage = pageFromHash(hash);
-    scrollToPage($currentPage);
-
-    const noteId = noteFromHash(hash);
-    if (noteId) {
-      $activeNote = document.notes.find((note) => note.id === noteId);
-    }
-  }
 </script>
 
-<svelte:window on:hashchange={onHashChange} on:popstate={onHashChange} />
 <svelte:head>
-  {#if shouldPreload($currentMode)}
-    <link
-      rel="prefetch"
-      href={data.asset_url.href}
-      as="fetch"
-      crossorigin="anonymous"
-      type="application/pdf"
-    />
+  <!-- Insert canonical URL -->
+  <link rel="canonical" href={canonical_url} />
+
+  {#if document.noindex || document.admin_noindex}
+    <meta name="robots" content="noindex" />
+  {/if}
+  <title>{document.title} | DocumentCloud</title>
+  <link
+    rel="alternate"
+    type="application/json+oembed"
+    href={embedUrl(document.canonical_url).href}
+    title={document.title}
+  />
+  {#if document.description?.trim().length > 0}
+    <meta name="description" content={document.description} />
+    <meta property="og:description" content={document.description} />
   {/if}
+  <meta
+    property="og:image"
+    content={pageImageUrl(document, 0, "normal").href}
+  />
+  <!-- Social cards -->
+  <meta property="twitter:card" content="summary_large_image" />
+  <meta property="og:url" content={canonical_url} />
+  <meta property="og:title" content={document.title} />
 </svelte:head>
 
-<DocumentLayout {document} {asset_url} {text} {query} {action} {addons} />
+<ViewerContext {document} {mode} {text} {asset_url}>
+  <DocumentLayout {action} {addons} />
+</ViewerContext>
 <GuidedTour />
diff --git a/src/routes/(app)/documents/[id]-[slug]/+page.ts b/src/routes/(app)/documents/[id]-[slug]/+page.ts
index 1e93f5db9..0f241aa17 100644
--- a/src/routes/(app)/documents/[id]-[slug]/+page.ts
+++ b/src/routes/(app)/documents/[id]-[slug]/+page.ts
@@ -1,25 +1,57 @@
-import type { DocumentText } from "$lib/api/types.js";
+/**
+ * Load a document for the document viewer.
+ * We do this in a layout module because sub-routes can use the same
+ * document without loading it again.
+ */
+import type { ReadMode } from "@/lib/api/types";
+
+import { redirect } from "@sveltejs/kit";
 
 import * as documents from "$lib/api/documents";
+import { getPinnedAddons } from "$lib/api/addons";
+import { breadcrumbTrail } from "$lib/utils/index";
 
-export async function load({ fetch, parent, url, data, depends }) {
-  const query = url.searchParams.get("q") ?? "";
+import loadDocument from "$lib/load/document";
+import { getQuery } from "$lib/utils/search";
 
-  const { document, mode } = await parent();
+/** @type {import('./$types').PageLoad} */
+export async function load({ fetch, params, parent, depends, url }) {
+  let { document, text, asset_url, mode } = await loadDocument({
+    fetch,
+    params,
+    url,
+  });
 
-  // load text
-  let text = await documents.text(document, fetch);
+  depends(`document:${document.id}`);
 
-  const asset_url = await documents.assetUrl(document, fetch);
+  const canonical = new URL(document.canonical_url);
+  if (document.slug !== params.slug) {
+    redirect(302, canonical.pathname);
+  }
 
-  // so we can reload when we reprocess
-  depends(`document:${document.id}`);
+  if (!document.edit_access && !documents.READING_MODES.has(mode as ReadMode)) {
+    return redirect(302, canonical);
+  }
+
+  let action = url.searchParams.get("action");
+
+  const breadcrumbs = await breadcrumbTrail(parent, [
+    { href: canonical.pathname, title: document.title },
+  ]);
+
+  // stream this
+  const pinnedAddons = getPinnedAddons(fetch);
+
+  const query = getQuery(url);
 
   return {
-    ...(data ?? {}), // include csrf_token
+    document,
+    mode,
+    text,
     asset_url,
+    action,
+    pinnedAddons,
+    breadcrumbs,
     query,
-    text,
-    mode,
   };
 }
diff --git a/src/routes/embed/documents/[id]-[slug]/+layout.svelte b/src/routes/embed/documents/[id]-[slug]/+layout.svelte
deleted file mode 100644
index fb47215f4..000000000
--- a/src/routes/embed/documents/[id]-[slug]/+layout.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-  import type { ViewerMode, Note } from "$lib/api/types";
-
-  import { type Writable, writable } from "svelte/store";
-
-  import { canonicalUrl } from "$lib/api/documents";
-  import { setContext } from "svelte";
-
-  export let data;
-
-  $: document = data.document;
-  $: canonical_url = canonicalUrl(document).href;
-
-  const activeNote: Writable<Note> = writable(null);
-  const currentPage: Writable<number> = writable(1);
-  const currentMode: Writable<ViewerMode> = writable(data.mode);
-
-  // stores we need deeper in the component tree, available via context
-  setContext("activeNote", activeNote);
-  setContext("currentPage", currentPage);
-  setContext("currentMode", currentMode);
-</script>
-
-<svelte:head>
-  <title>{document.title} | DocumentCloud</title>
-
-  <!-- Insert canonical URL -->
-  <link rel="canonical" href={canonical_url} />
-
-  {#if document.noindex || document.admin_noindex}
-    <meta name="robots" content="noindex" />
-  {/if}
-</svelte:head>
-
-<slot />
diff --git a/src/routes/embed/documents/[id]-[slug]/+layout.ts b/src/routes/embed/documents/[id]-[slug]/+layout.ts
deleted file mode 100644
index e77984846..000000000
--- a/src/routes/embed/documents/[id]-[slug]/+layout.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-// DUPLICATED FROM /documents/[id]-[slug]/
-// TODO: CONSOLIDATE VIEWER LOADING LOGIC
-
-/**
- * Load a document for the document viewer.
- * We do this in a layout module because sub-routes can use the same
- * document without loading it again.
- */
-
-import { error, redirect } from "@sveltejs/kit";
-
-import * as documents from "$lib/api/documents";
-import type { ViewerMode, ReadMode } from "$lib/api/types";
-import { getEmbedSettings, type EmbedSettings } from "$lib/utils/embed.js";
-
-/** @type {import('./$types').PageLoad} */
-export async function load({ fetch, url, params, depends }) {
-  const { data: document, error: err } = await documents.get(+params.id, fetch);
-
-  if (err) {
-    return error(err.status, err.message);
-  }
-
-  if (!document) {
-    return error(404, "Document not found");
-  }
-
-  depends(`document:${document.id}`);
-
-  let mode: ViewerMode =
-    (url.searchParams.get("mode") as ViewerMode) ?? "document";
-
-  if (!documents.MODES.has(mode)) {
-    mode = documents.MODES[0];
-  }
-
-  // embeds are only readable
-  // not sure if there's a better way to lie to typescript here
-  if (!documents.READING_MODES.has(mode as ReadMode)) {
-    return redirect(302, url.pathname);
-  }
-
-  let settings: Partial<EmbedSettings> = getEmbedSettings(url.searchParams);
-
-  return {
-    document,
-    mode,
-    settings,
-  };
-}
diff --git a/src/routes/embed/documents/[id]-[slug]/+page.svelte b/src/routes/embed/documents/[id]-[slug]/+page.svelte
index cd59f8721..9a7931ca7 100644
--- a/src/routes/embed/documents/[id]-[slug]/+page.svelte
+++ b/src/routes/embed/documents/[id]-[slug]/+page.svelte
@@ -1,86 +1,41 @@
-<!-- COPIED FROM /documents/[id]-[slug] -->
-<!-- TODO: CONSOLIDATE VIEWER RENDERING LOGIC -->
+<!-- @component
+Assumes it's a child of a ViewerContext
+ -->
 
 <script lang="ts">
-  import type { Writable } from "svelte/store";
-  import type { Note, ViewerMode } from "@/lib/api/types.js";
-
-  import { afterNavigate } from "$app/navigation";
-  import { page } from "$app/stores";
-
-  import { getContext } from "svelte";
-  import { _ } from "svelte-i18n";
-
-  import DocumentEmbed from "@/lib/components/embeds/DocumentEmbed.svelte";
-  import EmbedLayout from "@/lib/components/layouts/EmbedLayout.svelte";
+  import DocumentEmbed from "$lib/components/embeds/DocumentEmbed.svelte";
+  import EmbedLayout from "$lib/components/layouts/EmbedLayout.svelte";
+  import ViewerContext from "$lib/components/viewer/ViewerContext.svelte";
 
   // config and utils
-  import {
-    canonicalUrl,
-    pageFromHash,
-    pdfUrl,
-    shouldPaginate,
-    shouldPreload,
-  } from "$lib/api/documents";
-  import { noteFromHash } from "$lib/api/notes";
-  import { scrollToPage } from "$lib/utils/scroll";
+  import { canonicalUrl, pdfUrl } from "$lib/api/documents";
 
   export let data;
 
-  const currentMode: Writable<ViewerMode> = getContext("currentMode");
-  const currentPage: Writable<number> = getContext("currentPage");
-  const activeNote: Writable<Note> = getContext("activeNote");
-
   $: document = data.document;
+  $: mode = data.mode;
   $: text = data.text;
-  $: $currentMode = data.mode; // set $currentMode from URL search param
-
-  // lifecycle
-  afterNavigate(() => {
-    const { hash } = $page.url;
-
-    $currentPage = pageFromHash(hash);
-
-    if ($currentPage > 1 && shouldPaginate($currentMode)) {
-      scrollToPage($currentPage);
-    }
-
-    const noteId = noteFromHash(hash);
-    if (noteId) {
-      $activeNote = document.notes.find((note) => note.id === noteId);
-    }
-  });
-
-  // pagination
-  function onHashChange(e: HashChangeEvent | PopStateEvent) {
-    const { hash } = window.location;
-    $currentPage = pageFromHash(hash);
-    scrollToPage($currentPage);
-
-    const noteId = noteFromHash(hash);
-    if (noteId) {
-      $activeNote = document.notes.find((note) => note.id === noteId);
-    }
-  }
+  $: asset_url = data.asset_url;
+  $: canonical_url = canonicalUrl(document).href;
 </script>
 
-<svelte:window on:hashchange={onHashChange} />
 <svelte:head>
-  {#if shouldPreload($currentMode)}
-    <link
-      rel="preload"
-      href={data.asset_url.href}
-      as="fetch"
-      crossorigin="anonymous"
-      type="application/pdf"
-    />
+  <title>{document.title} | DocumentCloud</title>
+
+  <!-- Insert canonical URL -->
+  <link rel="canonical" href={canonical_url} />
+
+  {#if document.noindex || document.admin_noindex}
+    <meta name="robots" content="noindex" />
   {/if}
 </svelte:head>
 
-<EmbedLayout
-  settings={data.settings}
-  canonicalUrl={canonicalUrl(document).href}
-  downloadUrl={pdfUrl(document).href}
->
-  <DocumentEmbed settings={data.settings} {document} {text} />
-</EmbedLayout>
+<ViewerContext {document} {mode} {text} {asset_url}>
+  <EmbedLayout
+    settings={data.settings}
+    canonicalUrl={canonicalUrl(document).href}
+    downloadUrl={pdfUrl(document).href}
+  >
+    <DocumentEmbed settings={data.settings} />
+  </EmbedLayout>
+</ViewerContext>
diff --git a/src/routes/embed/documents/[id]-[slug]/+page.ts b/src/routes/embed/documents/[id]-[slug]/+page.ts
index c1d615144..c3ddfe22d 100644
--- a/src/routes/embed/documents/[id]-[slug]/+page.ts
+++ b/src/routes/embed/documents/[id]-[slug]/+page.ts
@@ -1,21 +1,38 @@
-import type { DocumentText, ViewerMode } from "@/lib/api/types";
-// load data for a single page embed
-import * as documents from "@/lib/api/documents";
-import * as notesApi from "$lib/api/notes";
+import type { ReadMode } from "$lib/api/types";
+
+import { redirect } from "@sveltejs/kit";
+
+import { getEmbedSettings, type EmbedSettings } from "$lib/utils/embed.js";
+import { getQuery } from "$lib/utils/search.js";
+import loadDocument from "$lib/load/document";
+import * as documents from "$lib/api/documents";
 
 /** @type {import('./$types').PageLoad} */
-export async function load({ parent, fetch, url }) {
-  const { document } = await parent();
+export async function load({ fetch, url, params, depends }) {
+  let { document, text, asset_url, mode } = await loadDocument({
+    fetch,
+    url,
+    params,
+  });
+
+  depends(`document:${document.id}`);
 
-  const query = url.searchParams.get("q") ?? "";
+  // embeds are only readable
+  // not sure if there's a better way to lie to typescript here
+  if (!documents.READING_MODES.has(mode as ReadMode)) {
+    return redirect(302, url.pathname);
+  }
 
-  // load text
-  const text = await documents.text(document, fetch);
-  const asset_url = await documents.assetUrl(document, fetch);
+  let settings: Partial<EmbedSettings> = getEmbedSettings(url.searchParams);
+
+  const query = getQuery(url);
 
   return {
+    document,
+    mode,
+    text,
     asset_url,
+    settings,
     query,
-    text,
   };
 }
diff --git a/src/service-worker.ts b/src/service-worker.ts
index aa169f42a..3c6050db9 100644
--- a/src/service-worker.ts
+++ b/src/service-worker.ts
@@ -37,8 +37,9 @@ sw.addEventListener("activate", (event) => {
 });
 
 sw.addEventListener("fetch", (event) => {
-  // ignore POST requests etc
-  if (event.request.method !== "GET") return;
+  // ignore POST requests and browser extensions
+  if (event.request.method !== "GET" || !event.request.url.startsWith("http"))
+    return;
 
   async function respond() {
     const url = new URL(event.request.url);
diff --git a/src/style/kit.css b/src/style/kit.css
index 26b581f00..9fd99bcef 100644
--- a/src/style/kit.css
+++ b/src/style/kit.css
@@ -91,14 +91,15 @@ Updated variables and styles for new SvelteKit routes
   --shadow-3: 0 2px 16px 2px rgba(30 48 56 / 0.075);
 
   /* Z-Index Layers */
-  --z-toolbar: 2;
+  --z-toolbar: 5;
+  --z-note: 2;
   --z-navigation: 7;
   --z-drawer: 9;
   --z-modal: 10;
   --z-dropdownBackdrop: 11;
   --z-dropdown: 12;
   --z-toast: 20;
-  --z-tooltip: 21;
+  --z-tooltip: 2;
 }
 
 html,
@@ -247,4 +248,4 @@ hr.divider {
   & svg {
     display: block;
   }
-}
\ No newline at end of file
+}