diff --git a/src/lib/api/documents.ts b/src/lib/api/documents.ts
index 6bcfe3392..807c81fe1 100644
--- a/src/lib/api/documents.ts
+++ b/src/lib/api/documents.ts
@@ -17,6 +17,8 @@ import { isOrg } from "@/api/types/orgAndUser";
 import { APP_URL, BASE_API_URL, CSRF_HEADER_NAME } from "@/config/config.js";
 import { isErrorCode } from "../utils";
 
+export const MODES = new Set(["document", "text", "thumbnails", "notes"]);
+
 /**
  * Search documents
  * https://www.documentcloud.org/help/search/
diff --git a/src/lib/api/types.d.ts b/src/lib/api/types.d.ts
index 28e451967..f30b3e771 100644
--- a/src/lib/api/types.d.ts
+++ b/src/lib/api/types.d.ts
@@ -15,11 +15,13 @@ export type Access = "public" | "private" | "organization"; // https://www.docum
 
 export type Data = Record<string, string[]>;
 
+export type Highlights = Record<string, string[]>;
+
 export type Status = "success" | "readable" | "pending" | "error" | "nofile"; // https://www.documentcloud.org/help/api#statuses
 
 export type Sizes = "thumbnail" | "small" | "normal" | "large" | "xlarge";
 
-export type Highlights = Record<string, string[]>;
+export type ViewerMode = "document" | "text" | "thumbnails" | "notes";
 
 export interface NoteHighlight {
   title: string[];
diff --git a/src/lib/components/inputs/Search.svelte b/src/lib/components/forms/Search.svelte
similarity index 100%
rename from src/lib/components/inputs/Search.svelte
rename to src/lib/components/forms/Search.svelte
diff --git a/src/lib/components/inputs/stories/Search.stories.svelte b/src/lib/components/forms/stories/Search.stories.svelte
similarity index 100%
rename from src/lib/components/inputs/stories/Search.stories.svelte
rename to src/lib/components/forms/stories/Search.stories.svelte
diff --git a/src/lib/components/layouts/stories/MainLayout.stories.svelte b/src/lib/components/layouts/stories/MainLayout.stories.svelte
index 903837bbc..c1aea6a07 100644
--- a/src/lib/components/layouts/stories/MainLayout.stories.svelte
+++ b/src/lib/components/layouts/stories/MainLayout.stories.svelte
@@ -27,7 +27,7 @@
   import ResultsList from "../../documents/ResultsList.svelte";
   import ContentLayout from "../ContentLayout.svelte";
   import PageToolbar from "../../common/PageToolbar.svelte";
-  import Search from "../../inputs/Search.svelte";
+  import Search from "../../forms/Search.svelte";
 
   import { addons } from "@/test/handlers/addons";
 
diff --git a/src/routes/app/+page.svelte b/src/routes/app/+page.svelte
index 2ae771979..bc80277d9 100644
--- a/src/routes/app/+page.svelte
+++ b/src/routes/app/+page.svelte
@@ -11,7 +11,7 @@
   import MainLayout from "$lib/components/layouts/MainLayout.svelte";
   import ContentLayout from "$lib/components/layouts/ContentLayout.svelte";
   import PageToolbar from "$lib/components/common/PageToolbar.svelte";
-  import Search from "$lib/components/inputs/Search.svelte";
+  import Search from "@/lib/components/forms/Search.svelte";
   import Empty from "$lib/components/common/Empty.svelte";
   import Button from "$lib/components/common/Button.svelte";
   import SignedIn from "$lib/components/common/SignedIn.svelte";
diff --git a/src/routes/app/add-ons/+page.svelte b/src/routes/app/add-ons/+page.svelte
index 704ead201..80f6ae38f 100644
--- a/src/routes/app/add-ons/+page.svelte
+++ b/src/routes/app/add-ons/+page.svelte
@@ -6,7 +6,7 @@
   import { Hourglass24, Plug24 } from "svelte-octicons";
 
   import Paginator from "@/common/Paginator.svelte";
-  import Search from "@/lib/components/inputs/Search.svelte";
+  import Search from "@/lib/components/forms/Search.svelte";
   import Pin from "@/common/icons/Pin.svelte";
   import Star from "@/common/icons/Star.svelte";
   import ContentLayout from "$lib/components/layouts/ContentLayout.svelte";
diff --git a/src/routes/app/projects/+page.svelte b/src/routes/app/projects/+page.svelte
index d7a0d41eb..0c0ef3a14 100644
--- a/src/routes/app/projects/+page.svelte
+++ b/src/routes/app/projects/+page.svelte
@@ -12,7 +12,7 @@
   import PageToolbar from "@/lib/components/common/PageToolbar.svelte";
   import MainLayout from "@/lib/components/layouts/MainLayout.svelte";
   import ContentLayout from "@/lib/components/layouts/ContentLayout.svelte";
-  import Search from "@/lib/components/inputs/Search.svelte";
+  import Search from "@/lib/components/forms/Search.svelte";
   import SidebarItem from "@/lib/components/sidebar/SidebarItem.svelte";
   import ProjectListItem from "@/lib/components/projects/ProjectListItem.svelte";
 
diff --git a/src/routes/app/projects/[id]-[slug]/+page.svelte b/src/routes/app/projects/[id]-[slug]/+page.svelte
index d58e6890a..bc193a813 100644
--- a/src/routes/app/projects/[id]-[slug]/+page.svelte
+++ b/src/routes/app/projects/[id]-[slug]/+page.svelte
@@ -16,7 +16,7 @@
   import Empty from "@/lib/components/common/Empty.svelte";
   import Error from "@/lib/components/common/Error.svelte";
   import { projectSearchUrl } from "@/lib/utils/search";
-  import Search from "@/lib/components/inputs/Search.svelte";
+  import Search from "@/lib/components/forms/Search.svelte";
   import ResultsList, {
     selected,
     total,
diff --git a/src/routes/documents/[id]-[slug]/+page.svelte b/src/routes/documents/[id]-[slug]/+page.svelte
index a24ee4fb8..a85b7281a 100644
--- a/src/routes/documents/[id]-[slug]/+page.svelte
+++ b/src/routes/documents/[id]-[slug]/+page.svelte
@@ -1,28 +1,45 @@
 <script lang="ts">
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
+
   import ContentLayout from "$lib/components/layouts/ContentLayout.svelte";
   import PageToolbar from "$lib/components/common/PageToolbar.svelte";
   import TextPage from "$lib/components/documents/TextPage.svelte";
 
   export let data;
 
-  const modes = [
+  const modes = new Map([
     ["document", "Document"],
     ["text", "Text"],
     ["thumbnails", "Thumbnails"],
     ["notes", "Notes"],
-  ];
+  ]);
+
+  $: mode = modes.has(data.mode) ? data.mode : "document";
+  $: text = data.text;
+
+  function setMode(e) {
+    const mode = e.target.value;
+    const u = new URL($page.url);
+
+    u.searchParams.set("mode", mode);
+
+    goto(u);
+  }
 </script>
 
 <ContentLayout>
-  {#await data.text then { pages }}
-    {#each pages as { page, contents }}
-      <TextPage {page} {contents} />
-    {/each}
-  {/await}
+  {#if mode === "text"}
+    {#await text then { pages }}
+      {#each pages as { page, contents }}
+        <TextPage {page} {contents} />
+      {/each}
+    {/await}
+  {/if}
 
   <PageToolbar slot="footer">
-    <select name="mode" slot="left">
-      {#each modes as [value, name]}
+    <select name="mode" slot="left" value={mode} on:change={setMode}>
+      {#each modes.entries() as [value, name]}
         <option {value}>{name}</option>
       {/each}
     </select>
diff --git a/src/routes/documents/[id]-[slug]/+page.ts b/src/routes/documents/[id]-[slug]/+page.ts
index b65c51de3..c17746b84 100644
--- a/src/routes/documents/[id]-[slug]/+page.ts
+++ b/src/routes/documents/[id]-[slug]/+page.ts
@@ -1,11 +1,27 @@
+import type { DocumentText, ViewerMode } from "$lib/api/types.js";
 import * as documents from "$lib/api/documents";
 
 export async function load({ fetch, parent, url }) {
-  const mode = url.searchParams.get("mode") ?? "document";
-  const { document } = await parent();
+  let mode: ViewerMode =
+    (url.searchParams.get("mode") as ViewerMode) ?? "document";
+
+  if (!documents.MODES.has(mode)) {
+    mode = "document";
+  }
+
+  // only load text in text mode
+  let text: Promise<DocumentText> = Promise.resolve({
+    updated: 0,
+    pages: [],
+  });
+
+  if (mode === "text") {
+    const { document } = await parent();
+    text = documents.text(document, fetch);
+  }
 
   return {
     mode,
-    text: documents.text(document, fetch),
+    text,
   };
 }