diff --git a/src/lib/api/documents.ts b/src/lib/api/documents.ts
index 3dfb4baaa..ee68fab39 100644
--- a/src/lib/api/documents.ts
+++ b/src/lib/api/documents.ts
@@ -1,7 +1,7 @@
 /** API helpers related to documents.
  * Lots of duplicated code here that should get consolidated at some point.
  */
-import type { Document, sizes } from "./types";
+import type { Document, DocumentResults, SearchOptions, sizes } from "./types";
 
 import { error } from "@sveltejs/kit";
 
@@ -10,17 +10,31 @@ import { isOrg } from "@/api/types/orgAndUser";
 import { APP_URL, BASE_API_URL } from "@/config/config.js";
 import { isErrorCode } from "../utils";
 
-/** Search documents */
+/**
+ * Search documents
+ * https://www.documentcloud.org/help/search/
+ *
+ * Note that in some environments, pagination works by setting page=N
+ * while in others we use cursers.
+ *  */
 export async function search(
   query = "",
-  highlight = false,
+  options: SearchOptions = {
+    hl: Boolean(query),
+    per_page: 25,
+    cursor: "",
+    version: "2.0",
+  },
   fetch = globalThis.fetch,
-) {
+): Promise<DocumentResults> {
   const endpoint = new URL("documents/search/", BASE_API_URL);
 
   endpoint.searchParams.set("expand", DEFAULT_EXPAND);
   endpoint.searchParams.set("q", query);
-  endpoint.searchParams.set("hl", String(highlight));
+
+  for (const [k, v] of Object.entries(options)) {
+    endpoint.searchParams.set(k, String(v));
+  }
 
   const resp = await fetch(endpoint, { credentials: "include" });
 
diff --git a/src/lib/api/types.d.ts b/src/lib/api/types.d.ts
index d686d6680..8e48776d4 100644
--- a/src/lib/api/types.d.ts
+++ b/src/lib/api/types.d.ts
@@ -135,6 +135,15 @@ export interface Section {
 
 export type SectionResults = Page<Section>;
 
+export interface SearchOptions {
+  hl?: boolean;
+  per_page?: number;
+  page?: number;
+  cursor?: string;
+  expand?: string;
+  version?: number | string;
+}
+
 export interface OEmbed {
   version: "1.0";
   provider_name: "DocumentCloud";
diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
index b60959d78..1015a0d93 100644
--- a/src/lib/components/Search.svelte
+++ b/src/lib/components/Search.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { Search24, XCircleFill24 } from "svelte-octicons";
-  import Button from "./common/Button.svelte";
 
   export let query: string = "";
+
   let input: HTMLInputElement;
 
   function clear() {
@@ -11,16 +11,19 @@
   }
 </script>
 
-<form class="container" on:submit|preventDefault>
+<form class="container" on:submit>
   <label for="query" title="Search"><Search24 /></label>
   <input
+    type="search"
     id="query"
-    name="query"
+    name="q"
+    autocomplete="off"
+    placeholder="Search…"
     bind:value={query}
     bind:this={input}
     on:change
-    autocomplete="off"
-    placeholder="Search…"
+    on:input
+    on:reset
   />
   <button
     title="Clear Search"
diff --git a/src/routes/app/+page.svelte b/src/routes/app/+page.svelte
index 08702a3fd..ea38c78e0 100644
--- a/src/routes/app/+page.svelte
+++ b/src/routes/app/+page.svelte
@@ -1,39 +1,46 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
   import { Hourglass24 } from "svelte-octicons";
+  import { page } from "$app/stores";
+  import { goto } from "$app/navigation";
+
   import ResultsList from "$lib/components/documents/ResultsList.svelte";
   import ContentLayout from "$lib/components/ContentLayout.svelte";
   import PageToolbar from "$lib/components/common/PageToolbar.svelte";
   import Search from "$lib/components/Search.svelte";
   import Empty from "$lib/components/common/Empty.svelte";
   import Paginator from "@/common/Paginator.svelte";
-  import type { DocumentResults } from "@/lib/api/types";
-
-  export let data: {
-    query: string;
-    searchResults: Promise<DocumentResults>;
-  };
 
-  let page = 1;
-  let per_page = 25;
-  let error: Error;
+  export let data;
 
   $: searchResults = data.searchResults;
   $: query = data.query;
+  $: per_page = data.per_page;
+  $: current = data.cursor;
+  // $: page_number = data.page;
+
+  // update the cursor URL param, forcing refresh of search results
+  function setCursor(next: string, previous: string) {
+    // snapshot the current URL
+    const u = new URL($page.url);
 
-  async function load(url) {
-    const res = await fetch(url, { credentials: "include" }).catch((e) => {
-      error = e;
-      throw e; // if something went wrong here, something broke
-    });
+    u.searchParams.set("cursor", next);
 
-    if (!res.ok) {
-      // 404 or something similar
-      console.error(res.statusText);
-      error = { name: "Loading error", message: res.statusText };
+    // we need to store the current cursor in the URL so we can go back
+    if (previous) {
+      u.searchParams.set("previous", current);
+    } else {
+      u.searchParams.delete("previous");
     }
 
-    data.searchResults = res.json();
+    return goto(u);
+  }
+
+  // update the per_page query param
+  async function setPerPage(e) {
+    const u = new URL($page.url);
+    u.searchParams.set("per_page", e.target.value);
+    return goto(u);
   }
 </script>
 
@@ -58,19 +65,19 @@
         {@const count = sr.count}
         {@const total_pages = Math.ceil(count / per_page)}
         {@const next = sr.next}
-        {@const previous = sr.previous}
+
         <Paginator
-          {page}
           totalPages={total_pages}
           has_next={Boolean(next)}
-          has_previous={Boolean(previous)}
-          on:next={(e) => {
-            page = Math.min(total_pages, page + 1);
-            load(next);
+          has_previous={Boolean(current)}
+          on:next={async (e) => {
+            const cursor = new URL(next).searchParams.get("cursor");
+            await setCursor(cursor, current);
+            // page_number = Math.min(total_pages, page_number + 1);
           }}
-          on:previous={(e) => {
-            page = Math.max(1, page - 1);
-            load(previous);
+          on:previous={async (e) => {
+            await setCursor(current, "");
+            // page_number = Math.max(1, page_number - 1);
           }}
         />
       {/await}
@@ -78,7 +85,7 @@
 
     <label slot="right">
       Per page
-      <select name="per_page" bind:value={per_page}>
+      <select name="per_page" value={per_page} on:change={setPerPage}>
         <option value={25}>25</option>
         <option value={50}>50</option>
         <option value={100}>100</option>
diff --git a/src/routes/app/+page.ts b/src/routes/app/+page.ts
index 2798376c6..7a3a73206 100644
--- a/src/routes/app/+page.ts
+++ b/src/routes/app/+page.ts
@@ -1,11 +1,30 @@
+import type { SearchOptions } from "$lib/api/types";
 import { search } from "$lib/api/documents.js";
 
 export async function load({ url, fetch }) {
   const query = url.searchParams.get("q") || "";
-  const searchResults = search(query, true, fetch);
+  const per_page = +url.searchParams.get("per_page") || 25;
+  const cursor = url.searchParams.get("cursor") || "";
+
+  const options: SearchOptions = {
+    hl: Boolean(query),
+    version: "2.0",
+  };
+
+  if (per_page) {
+    options.per_page = per_page;
+  }
+
+  if (cursor) {
+    options.cursor = cursor;
+  }
+
+  const searchResults = search(query, options, fetch);
 
   return {
-    searchResults,
     query,
+    per_page,
+    cursor,
+    searchResults,
   };
 }