diff --git a/jest-setup.js b/jest-setup.js
new file mode 100644
index 000000000..d0de870dc
--- /dev/null
+++ b/jest-setup.js
@@ -0,0 +1 @@
+import "@testing-library/jest-dom";
diff --git a/jest.config.js b/jest.config.js
index 5dae9db74..f319f3cd2 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -6,13 +6,15 @@ export default {
   },
   moduleFileExtensions: ["js", "ts", "svelte"],
   rootDir: "src",
-  setupFiles: ["dotenv/config"],
+  setupFiles: ["dotenv/config", "<rootDir>/langs/i18n.js"],
+  setupFilesAfterEnv: ["<rootDir>/../jest-setup.js"],
   testEnvironment: "jsdom",
   transform: {
     "^.+\\.svelte$": ["svelte-jester", { preprocess: true }],
-    "^.+\\.ts$": ["ts-jest", { useESM: true }],
+    "^.+\\.ts$": ["ts-jest", { useESM: true, tsconfig: "tsconfig.test.json" }],
   },
   transformIgnorePatterns: ["/node_modules/(?!svue).+\\.js$"],
+  coverageDirectory: "<rootDir>/../coverage",
   collectCoverageFrom: ["./**/*.{js,ts,svelte}"],
-  coverageReporters: ["html", "text-summary"],
+  coverageReporters: ["lcov", "html", "text-summary"],
 };
diff --git a/package-lock.json b/package-lock.json
index c9c55e068..1fb28a03b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -70,10 +70,12 @@
         "@storybook/svelte": "^7.6.10",
         "@storybook/svelte-webpack5": "^7.6.10",
         "@storybook/testing-library": "^0.2.2",
+        "@testing-library/jest-dom": "^6.4.2",
+        "@testing-library/svelte": "^4.1.0",
         "@types/lucene": "^2.1.7",
         "chromatic": "^9.1.0",
         "eslint": "^7.32.0",
-        "jest": "^29.6.3",
+        "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "msw": "^1.2.3",
         "msw-storybook-addon": "^1.10.0",
@@ -6571,17 +6573,17 @@
       }
     },
     "node_modules/@testing-library/jest-dom": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.1.5.tgz",
-      "integrity": "sha512-3y04JLW+EceVPy2Em3VwNr95dOKqA8DhR0RJHhHKDZNYXcVXnEK7WIrpj4eYU8SVt/qYZ2aRWt/WgQ+grNES8g==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.2.tgz",
+      "integrity": "sha512-CzqH0AFymEMG48CpzXFriYYkOjk6ZGPCLMhW9e9jg3KMCn5OfJecF8GtGW7yGfR/IgCe3SX8BSwjdzI6BBbZLw==",
       "dev": true,
       "dependencies": {
-        "@adobe/css-tools": "^4.3.1",
+        "@adobe/css-tools": "^4.3.2",
         "@babel/runtime": "^7.9.2",
         "aria-query": "^5.0.0",
         "chalk": "^3.0.0",
         "css.escape": "^1.5.1",
-        "dom-accessibility-api": "^0.5.6",
+        "dom-accessibility-api": "^0.6.3",
         "lodash": "^4.17.15",
         "redent": "^3.0.0"
       },
@@ -6592,6 +6594,7 @@
       },
       "peerDependencies": {
         "@jest/globals": ">= 28",
+        "@types/bun": "latest",
         "@types/jest": ">= 28",
         "jest": ">= 28",
         "vitest": ">= 0.32"
@@ -6600,6 +6603,9 @@
         "@jest/globals": {
           "optional": true
         },
+        "@types/bun": {
+          "optional": true
+        },
         "@types/jest": {
           "optional": true
         },
@@ -6639,6 +6645,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true
+    },
     "node_modules/@testing-library/jest-dom/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -6660,6 +6672,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/@testing-library/svelte": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/svelte/-/svelte-4.1.0.tgz",
+      "integrity": "sha512-MJqe7x9WowkiAVdk9mvazEC2ktFZdmK2OqFVoO557PC37aBemQ4ozqdK3yrG34Zg9kuln3qgTVeLSh08e69AMw==",
+      "dev": true,
+      "dependencies": {
+        "@testing-library/dom": "^9.3.1"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "peerDependencies": {
+        "svelte": "^3 || ^4"
+      }
+    },
     "node_modules/@testing-library/user-event": {
       "version": "14.5.1",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.1.tgz",
diff --git a/package.json b/package.json
index 723824698..ce8edfdec 100644
--- a/package.json
+++ b/package.json
@@ -65,10 +65,12 @@
     "@storybook/svelte": "^7.6.10",
     "@storybook/svelte-webpack5": "^7.6.10",
     "@storybook/testing-library": "^0.2.2",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/svelte": "^4.1.0",
     "@types/lucene": "^2.1.7",
     "chromatic": "^9.1.0",
     "eslint": "^7.32.0",
-    "jest": "^29.6.3",
+    "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "msw": "^1.2.3",
     "msw-storybook-addon": "^1.10.0",
diff --git a/src/addons/Paginator.svelte b/src/addons/Paginator.svelte
deleted file mode 100644
index ce41c18c7..000000000
--- a/src/addons/Paginator.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from "svelte";
-  import { _ } from "svelte-i18n";
-  import Button from "../common/Button.svelte";
-
-  export let has_next = false;
-  export let has_previous = false;
-
-  const dispatch = createEventDispatcher();
-
-  export function previous() {
-    dispatch("previous");
-  }
-
-  export function next() {
-    dispatch("next");
-  }
-</script>
-
-<div class="paginator">
-  <Button disabled={!has_previous} on:click={previous}>
-    {$_("paginator.previous")}
-  </Button>
-
-  <Button disabled={!has_next} on:click={next}>
-    {$_("paginator.next")}
-  </Button>
-</div>
-
-<style>
-  .paginator {
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    width: 100%;
-  }
-</style>
diff --git a/src/addons/browser/Browser.svelte b/src/addons/browser/Browser.svelte
index a975fdea8..4bb6408aa 100644
--- a/src/addons/browser/Browser.svelte
+++ b/src/addons/browser/Browser.svelte
@@ -2,13 +2,14 @@
 
 <script lang="ts">
   import { _ } from "svelte-i18n";
-  import { baseApiUrl } from "../../api/base.js";
   import AddOnList from "./AddOnList.svelte";
   import type { AddOnListItem } from "../types.ts";
-  import Drawer from "../Drawer.svelte";
-  import Paginator from "../Paginator.svelte";
-  import Search, { query } from "./SearchInput.svelte";
-  import Filters, { filter, FILTERS, CATEGORIES } from "./Filters.svelte";
+  import Filters from "./Filters.svelte";
+  import Categories from "./Categories.svelte";
+  import { buildParams, buildUrl, filter } from "./browser";
+  import Drawer from "../../common/Drawer.svelte";
+  import Paginator from "../../common/Paginator.svelte";
+  import Search, { query } from "../../common/SearchInput.svelte";
   import Pin from "../../common/icons/Pin.svelte";
   import Star from "../../common/icons/Star.svelte";
   import Credit from "../../common/icons/Credit.svelte";
@@ -17,29 +18,29 @@
   export let per_page = 10;
 
   let drawer: Drawer;
-  let loading = false;
-  let error = null;
-  let res: {
-    next?: string | null;
-    previous?: string | null;
-    results?: AddOnListItem[];
-  } = {};
-
-  const options: RequestInit = {
-    credentials: "include",
-  };
 
   $: urlParams = buildParams({
     per_page,
     query: $query,
     filter: $filter,
   });
-
   $: url = buildUrl(urlParams);
   $: next_url = res.next ? new URL(res.next).toString() : null;
   $: previous_url = res.previous ? new URL(res.previous).toString() : null;
   $: items = res.results;
 
+  /** Network logic */
+  let loading = false;
+  let error = null;
+  let res: {
+    next?: string | null;
+    previous?: string | null;
+    results?: AddOnListItem[];
+  } = {};
+  const options: RequestInit = {
+    credentials: "include",
+  };
+
   export async function load(url) {
     loading = true;
 
@@ -64,49 +65,6 @@
   $: loadNext = () => load(next_url);
   $: loadPrev = () => load(previous_url);
   $: reload = () => load(url);
-
-  function buildUrl({ query = "", filters = {}, per_page = 5 }) {
-    const u = new URL("addons/", baseApiUrl);
-
-    u.search = new URLSearchParams({
-      query,
-      per_page: String(per_page),
-      ...filters,
-    }).toString();
-
-    return u.toString();
-  }
-
-  function buildParams({
-    query = "",
-    per_page = 5,
-    filter = [],
-  }: {
-    query: string;
-    per_page: number;
-    filter: string | string[];
-  }) {
-    if (!Array.isArray(filter)) {
-      filter = [filter];
-    }
-    const params = { per_page, query, filters: {} };
-    const filters = FILTERS.map(([n]) => n).filter((n) => filter.includes(n));
-    const categories = CATEGORIES.map(([n]) => n).filter((n) =>
-      filter.includes(n),
-    );
-    params.filters = filters.reduce((m, f) => {
-      if (f !== "all") {
-        m[f] = true;
-      }
-      return m;
-    }, {});
-
-    if (categories.length) {
-      params.filters["category"] = categories.join(",");
-    }
-
-    return params;
-  }
 </script>
 
 <Drawer bind:this={drawer} bind:visible anchor="right" on:open on:close>
@@ -117,7 +75,10 @@
     </header>
     <aside class="sidebar">
       <div class="search"><Search /></div>
-      <div class="filters"><Filters /></div>
+      <div class="filters">
+        <Filters />
+        <Categories />
+      </div>
     </aside>
     <main class="results">
       <div class="list">
diff --git a/src/addons/browser/Categories.svelte b/src/addons/browser/Categories.svelte
new file mode 100644
index 000000000..d4d4813e8
--- /dev/null
+++ b/src/addons/browser/Categories.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { _ } from "svelte-i18n";
+  import { filter, CATEGORIES } from "./browser";
+  import Filter from "./Filter.svelte";
+</script>
+
+<div class="categories">
+  <h3>{$_("addonBrowserDialog.categories")}</h3>
+  <ul>
+    {#each CATEGORIES as [category, name]}
+      <li class="category" class:selected={$filter.includes(category)}>
+        <Filter {name} selected={$filter.includes(category)}>
+          <input
+            slot="input"
+            type="radio"
+            value={category}
+            bind:group={$filter}
+          />
+        </Filter>
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>
+  ul {
+    list-style: none;
+    margin-block-start: 0;
+    padding-inline-start: 0;
+  }
+
+  ul li {
+    margin-bottom: 0.25em;
+  }
+  h3 {
+    margin: 0.5em;
+  }
+</style>
diff --git a/src/addons/browser/Filters.svelte b/src/addons/browser/Filters.svelte
index fcef773df..98f066aa0 100644
--- a/src/addons/browser/Filters.svelte
+++ b/src/addons/browser/Filters.svelte
@@ -1,78 +1,30 @@
-<script context="module">
-  import { writable } from "svelte/store";
-  export const filter = writable("featured");
-  // TODO declare hardcoded values in a centralized place
-  export const FILTERS = [
-    ["all", "All"],
-    ["active", "Pinned"],
-    ["featured", "Featured"],
-    ["premium", "Premium"],
-  ];
-
-  export const CATEGORIES = [
-    ["export", "Export"],
-    ["ai", "AI"],
-    ["bulk", "Bulk"],
-    ["extraction", "Extraction"],
-    ["file", "File"],
-    ["monitor", "Monitor"],
-    ["statistical", "Statistical"],
-  ];
-</script>
-
 <script lang="ts">
   import { _ } from "svelte-i18n";
-
+  import { filter, FILTERS } from "./browser";
   import Filter from "./Filter.svelte";
   import Pin from "../../common/icons/Pin.svelte";
   import Star from "../../common/icons/Star.svelte";
   import Infinity from "svelte-octicons/lib/Infinity16.svelte";
-  import Credit from "../../common/icons/Credit.svelte";
+  import Premium from "../../common/icons/Premium.svelte";
+
+  const icons = {
+    all: Infinity,
+    active: Pin,
+    featured: Star,
+    premium: Premium,
+  };
 </script>
 
 <ul class="filters">
-  <li id="all" class:selected={$filter.includes("all")}>
-    <Filter name="All" selected={$filter.includes("all")}>
-      <input slot="input" type="radio" value="all" bind:group={$filter} />
-      <span slot="icon"><Infinity /></span>
-    </Filter>
-  </li>
-  <li id="featured" class:selected={$filter.includes("featured")}>
-    <Filter name="Featured" selected={$filter.includes("featured")}>
-      <input slot="input" type="radio" value="featured" bind:group={$filter} />
-      <span slot="icon"><Star /></span>
-    </Filter>
-  </li>
-  <li id="pinned" class:selected={$filter.includes("active")}>
-    <Filter name="Pinned" selected={$filter.includes("active")}>
-      <input slot="input" type="radio" value="active" bind:group={$filter} />
-      <span slot="icon"><Pin /></span>
-    </Filter>
-  </li>
-  <li id="premium" class:selected={$filter.includes("premium")}>
-    <Filter name="Premium" selected={$filter.includes("premium")}>
-      <input slot="input" type="radio" value="premium" bind:group={$filter} />
-      <span slot="icon"><Credit badge /></span>
-    </Filter>
-  </li>
+  {#each FILTERS as [id, name]}
+    <li {id} class:selected={$filter.includes(id)}>
+      <Filter {name} selected={$filter.includes(id)}>
+        <input slot="input" type="radio" value={id} bind:group={$filter} />
+        <span slot="icon"><svelte:component this={icons[id]} /></span>
+      </Filter>
+    </li>
+  {/each}
 </ul>
-<div class="categories">
-  <h3>{$_("addonBrowserDialog.categories")}</h3>
-  <ul>
-    {#each CATEGORIES as [category, name]}
-      <li class="category" class:selected={$filter.includes(category)}>
-        <Filter {name} selected={$filter.includes(category)}>
-          <input
-            slot="input"
-            type="radio"
-            value={category}
-            bind:group={$filter}
-          />
-        </Filter>
-      </li>
-    {/each}
-  </ul>
-</div>
 
 <style>
   ul {
@@ -85,10 +37,6 @@
     margin-bottom: 0.25em;
   }
 
-  h3 {
-    margin: 0.5em;
-  }
-
   #all [slot="icon"] {
     display: flex;
     align-items: center;
@@ -98,7 +46,7 @@
     fill: var(--primary);
   }
 
-  #pinned:not(.selected) [slot="icon"] {
+  #active:not(.selected) [slot="icon"] {
     fill: palevioletred;
   }
 
diff --git a/src/addons/browser/browser.ts b/src/addons/browser/browser.ts
new file mode 100644
index 000000000..64034ab38
--- /dev/null
+++ b/src/addons/browser/browser.ts
@@ -0,0 +1,64 @@
+import { writable } from "svelte/store";
+import { baseApiUrl } from "../../api/base.js";
+
+export const filter = writable("featured");
+
+export const FILTERS = [
+  ["all", "All"],
+  ["active", "Pinned"],
+  ["featured", "Featured"],
+  ["premium", "Premium"],
+];
+
+export const CATEGORIES = [
+  ["export", "Export"],
+  ["ai", "AI"],
+  ["bulk", "Bulk"],
+  ["extraction", "Extraction"],
+  ["file", "File"],
+  ["monitor", "Monitor"],
+  ["statistical", "Statistical"],
+];
+
+export function buildParams({
+  query = "",
+  per_page = 5,
+  filter = [],
+}: {
+  query: string;
+  per_page: number;
+  filter: string | string[];
+}) {
+  if (!Array.isArray(filter)) {
+    filter = [filter];
+  }
+  const params = { per_page, query, filters: {} };
+  const filters = FILTERS.map(([n]) => n).filter((n) => filter.includes(n));
+  const categories = CATEGORIES.map(([n]) => n).filter((n) =>
+    filter.includes(n),
+  );
+  params.filters = filters.reduce((m, f) => {
+    if (f !== "all") {
+      m[f] = true;
+    }
+    return m;
+  }, {});
+
+  if (categories.length) {
+    params.filters["category"] = categories.join(",");
+  }
+
+  return params;
+}
+
+export function buildUrl({ query = "", filters = {}, per_page = 5 }) {
+  const u = new URL("addons/", baseApiUrl);
+
+  u.search = new URLSearchParams({
+    query,
+    per_page: String(per_page),
+    ...filters,
+  }).toString();
+
+  return u.toString();
+}
diff --git a/src/addons/dispatch/Dispatch.svelte b/src/addons/dispatch/Dispatch.svelte
index 5685cd0c9..900aee076 100644
--- a/src/addons/dispatch/Dispatch.svelte
+++ b/src/addons/dispatch/Dispatch.svelte
@@ -8,7 +8,7 @@
   import type { Event } from "../runs/ScheduledEvent.svelte";
 
   import Button from "../../common/Button.svelte";
-  import Drawer from "../Drawer.svelte";
+  import Drawer from "../../common/Drawer.svelte";
   import Form, { values } from "./Form.svelte";
   import Header from "./Header.svelte";
   import Selection from "./Selection.svelte";
diff --git a/src/addons/runs/History.svelte b/src/addons/runs/History.svelte
index fc397d874..8823ebcb1 100644
--- a/src/addons/runs/History.svelte
+++ b/src/addons/runs/History.svelte
@@ -7,7 +7,7 @@
   import HistoryEvent, { type Run } from "./HistoryEvent.svelte";
   import History24 from "svelte-octicons/lib/History24.svelte";
   import Loader from "../../common/Loader.svelte";
-  import Paginator from "../Paginator.svelte";
+  import Paginator from "../../common/Paginator.svelte";
   import { baseApiUrl } from "../../api/base.js";
 
   let res: {
diff --git a/src/addons/runs/Runs.svelte b/src/addons/runs/Runs.svelte
index b257c39be..6ec9e8ec8 100644
--- a/src/addons/runs/Runs.svelte
+++ b/src/addons/runs/Runs.svelte
@@ -3,7 +3,7 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
 
-  import Drawer from "../Drawer.svelte";
+  import Drawer from "../../common/Drawer.svelte";
   import Scheduled from "./Scheduled.svelte";
   import History from "./History.svelte";
 
diff --git a/src/addons/runs/Scheduled.svelte b/src/addons/runs/Scheduled.svelte
index e61e2874c..db3034548 100644
--- a/src/addons/runs/Scheduled.svelte
+++ b/src/addons/runs/Scheduled.svelte
@@ -6,7 +6,7 @@
   import Clock24 from "svelte-octicons/lib/Clock24.svelte";
   import Error from "../../common/icons/Error.svelte";
   import Loader from "../../common/Loader.svelte";
-  import Paginator from "../Paginator.svelte";
+  import Paginator from "../../common/Paginator.svelte";
   import ScheduledEvent, { type Event } from "./ScheduledEvent.svelte";
 
   import { baseApiUrl } from "../../api/base.js";
diff --git a/src/common/Button.svelte b/src/common/Button.svelte
index edde6fc53..064bd4a8a 100644
--- a/src/common/Button.svelte
+++ b/src/common/Button.svelte
@@ -16,6 +16,8 @@
   export let danger = false;
   export let disabled = false;
   export let plain = false;
+  export let ghost = false;
+  export let square = false;
   export let nomargin = false;
   export let fullWidth = false;
   export let type: "submit" | "reset" | "button" = "submit";
@@ -39,6 +41,8 @@
       class:nondescript
       class:action
       class:plain
+      class:ghost
+      class:square
       class:nomargin
       class:fullWidth
       class:disabled={disabled || disabledReason != null}
@@ -60,6 +64,8 @@
       class:nondescript
       class:action
       class:plain
+      class:ghost
+      class:square
       class:nomargin
       class:fullWidth
       disabled={disabled || disabledReason != null}
@@ -182,6 +188,27 @@
     margin: 0 5px;
   }
 
+  .ghost {
+    background: transparent;
+    color: var(--primary);
+    fill: var(--primary);
+  }
+  .ghost:disabled {
+    opacity: 0.5;
+    background: transparent;
+    color: var(--gray);
+    fill: var(--gray);
+  }
+  .ghost:hover,
+  .ghost:focus {
+    background: var(--primary-faded);
+  }
+
+  .square {
+    margin: 0;
+    padding: 0.5rem;
+  }
+
   .fullWidth {
     display: flex;
     width: 100%;
diff --git a/src/addons/Drawer.svelte b/src/common/Drawer.svelte
similarity index 100%
rename from src/addons/Drawer.svelte
rename to src/common/Drawer.svelte
diff --git a/src/common/Paginator.svelte b/src/common/Paginator.svelte
new file mode 100644
index 000000000..cf19d0c5b
--- /dev/null
+++ b/src/common/Paginator.svelte
@@ -0,0 +1,183 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  import { _ } from "svelte-i18n";
+  import Button from "./Button.svelte";
+  import {
+    ArrowLeft16,
+    ArrowRight16,
+    MoveToEnd16,
+    MoveToStart16,
+  } from "svelte-octicons";
+
+  export let page: number | undefined = undefined;
+  export let totalPages: number | undefined = undefined;
+  export let has_next = false;
+  export let has_previous = false;
+  export let goToNav = false;
+
+  var isInt = /^[0-9]+$/;
+
+  const dispatch = createEventDispatcher();
+  let input: HTMLInputElement;
+  // proxy the page value so we can reset it if needed
+  let inputValue = page;
+  $: inputWidth = String(inputValue ?? 0).length;
+  $: invalidValue =
+    inputValue > totalPages ||
+    !inputValue ||
+    !isInt.test(inputValue.toString());
+  $: {
+    inputValue = page;
+  }
+
+  function previous() {
+    dispatch("previous", page - 1);
+  }
+
+  function next() {
+    dispatch("next", page + 1);
+  }
+
+  function goTo(page: number) {
+    dispatch("goTo", page);
+  }
+
+  function handleChange(event: Event) {
+    if (invalidValue || inputValue === page) {
+      inputValue = page;
+      return;
+    }
+    const { value } = event.target as HTMLInputElement;
+    goTo(parseInt(value));
+  }
+
+  function handleKeyup({ key }: KeyboardEvent) {
+    if (input != document.activeElement) return;
+    switch (key) {
+      case "Escape":
+      case "Enter":
+        input.blur();
+        break;
+    }
+  }
+</script>
+
+<div class="paginator">
+  {#if page && totalPages && goToNav}
+    <Button
+      square
+      ghost
+      disabled={page === 1}
+      on:click={() => goTo(1)}
+      title={$_("paginator.first")}
+    >
+      <MoveToStart16 />
+    </Button>
+  {/if}
+  <Button
+    square
+    ghost
+    disabled={!has_previous}
+    on:click={previous}
+    title={$_("paginator.previous")}
+  >
+    <ArrowLeft16 />
+  </Button>
+  {#if page}
+    <div class="current">
+      <span class="page">{$_("paginator.page")}</span>
+      {#if goToNav}
+        <input
+          name="page"
+          class="pageNumber"
+          class:error={invalidValue}
+          type="number"
+          inputmode="numeric"
+          pattern="[0-9]*"
+          min="1"
+          max={totalPages}
+          bind:this={input}
+          bind:value={inputValue}
+          on:change={handleChange}
+          on:keyup={handleKeyup}
+          style={`width: ${inputWidth}ch`}
+        />
+      {:else}
+        <span class="pageNumber">{page}</span>
+      {/if}
+      {#if totalPages}<span class="rest">{$_("paginator.of")} {totalPages}</span
+        >{/if}
+    </div>
+  {/if}
+  <Button
+    square
+    ghost
+    disabled={!has_next}
+    on:click={next}
+    title={$_("paginator.next")}
+  >
+    <ArrowRight16 />
+  </Button>
+  {#if page && totalPages && goToNav}
+    <Button
+      square
+      ghost
+      disabled={page === totalPages}
+      on:click={() => goTo(totalPages)}
+      title={$_("paginator.last")}
+    >
+      <MoveToEnd16 />
+    </Button>
+  {/if}
+</div>
+
+<style>
+  .paginator {
+    display: flex;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+  }
+
+  .current {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin: 0 1rem;
+  }
+
+  input.pageNumber {
+    flex: 0 1 auto;
+    padding: 0.125rem;
+    text-align: center;
+    border-color: rgba(0, 0, 0, 0.125);
+    box-shadow: none;
+  }
+
+  input.pageNumber:hover,
+  input.pageNumber:focus {
+    border-color: rgba(0, 0, 0, 0.25);
+  }
+
+  /* Hide arrows from number input */
+  /* Chrome, Safari, Edge, Opera */
+  input.pageNumber::-webkit-outer-spin-button,
+  input.pageNumber::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+  input.pageNumber[type="number"] {
+    appearance: textfield;
+    -moz-appearance: textfield;
+  }
+
+  .rest {
+    white-space: nowrap;
+  }
+
+  .pageNumber.error {
+    outline-color: var(--caution);
+  }
+</style>
diff --git a/src/addons/browser/SearchInput.svelte b/src/common/SearchInput.svelte
similarity index 93%
rename from src/addons/browser/SearchInput.svelte
rename to src/common/SearchInput.svelte
index e580b9ab8..3f655646a 100644
--- a/src/addons/browser/SearchInput.svelte
+++ b/src/common/SearchInput.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <script>
-  import Search from "../../common/icons/Search.svelte";
+  import Search from "./icons/Search.svelte";
 </script>
 
 <label class="search">
diff --git a/src/addons/stories/Drawer.stories.svelte b/src/common/stories/Drawer.stories.svelte
similarity index 95%
rename from src/addons/stories/Drawer.stories.svelte
rename to src/common/stories/Drawer.stories.svelte
index 377310505..b18785832 100644
--- a/src/addons/stories/Drawer.stories.svelte
+++ b/src/common/stories/Drawer.stories.svelte
@@ -7,7 +7,7 @@
 
   export const meta = {
     component: Drawer,
-    title: "Add-Ons / Drawer",
+    title: "Common / Drawer",
     tags: ["autodocs"],
     parameters: { layout: "fullscreen" },
   };
diff --git a/src/addons/stories/Paginator.stories.svelte b/src/common/stories/Paginator.stories.svelte
similarity index 75%
rename from src/addons/stories/Paginator.stories.svelte
rename to src/common/stories/Paginator.stories.svelte
index 080ae4fe3..a37b509d6 100644
--- a/src/addons/stories/Paginator.stories.svelte
+++ b/src/common/stories/Paginator.stories.svelte
@@ -11,7 +11,7 @@
 
   export const meta = {
     component: Paginator,
-    title: "Add-Ons / Paginator",
+    title: "Common / Paginator",
     tags: ["autodocs"],
     parameters: {
       layout: "centered",
@@ -23,6 +23,7 @@
   <div class="container">
     <Paginator
       {...args}
+      on:goTo={action("Go To")}
       on:next={action("Next")}
       on:previous={action("Previous")}
     />
@@ -33,11 +34,16 @@
 <Story name="Only Page" args={{ has_next: false, has_previous: false }} />
 <Story name="First Page" args={{ has_next: true, has_previous: false }} />
 <Story name="Last Page" args={{ has_next: false, has_previous: true }} />
+<Story name="With Page" args={{ ...args, page: 1 }} />
+<Story name="With Page and Count" args={{ ...args, page: 2, totalPages: 12 }} />
+<Story
+  name="With Go To Page"
+  args={{ ...args, page: 1, totalPages: 12, goToNav: true }}
+/>
 
 <style>
   .container {
     border: 1px solid gray;
     padding: 1em;
-    width: 50vw;
   }
 </style>
diff --git a/src/addons/browser/stories/SearchInput.stories.svelte b/src/common/stories/SearchInput.stories.svelte
similarity index 88%
rename from src/addons/browser/stories/SearchInput.stories.svelte
rename to src/common/stories/SearchInput.stories.svelte
index bea38ae14..964490e00 100644
--- a/src/addons/browser/stories/SearchInput.stories.svelte
+++ b/src/common/stories/SearchInput.stories.svelte
@@ -6,7 +6,7 @@
   const args = {};
 
   export const meta = {
-    title: "Add-Ons / Browser / Components / Search",
+    title: "Common / Search",
     tags: ["autodocs"],
     parameters: { layout: "centered" },
     component: SearchInput,
diff --git a/src/common/tests/Paginator.test.ts b/src/common/tests/Paginator.test.ts
new file mode 100644
index 000000000..4738f5601
--- /dev/null
+++ b/src/common/tests/Paginator.test.ts
@@ -0,0 +1,127 @@
+import { jest } from "@jest/globals";
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import { userEvent } from "@testing-library/user-event";
+
+import Paginator from "../Paginator.svelte";
+
+describe("Paginator", () => {
+  it("has next and previous buttons", () => {
+    render(Paginator, { props: { has_previous: true, has_next: true } });
+    const previous = screen.getByTitle(/Previous/);
+    const next = screen.getByTitle(/Next/);
+    expect(previous).toBeInTheDocument();
+    expect(next).toBeInTheDocument();
+  });
+
+  it("disables next or previous if has_* is false", () => {
+    render(Paginator, { props: { has_previous: false, has_next: true } });
+    const previous = screen.getByTitle(/Previous/);
+    const next = screen.getByTitle(/Next/);
+    expect(previous).toBeDisabled();
+    expect(next).not.toBeDisabled();
+  });
+
+  it("calls on:previous handler when previous is clicked", async () => {
+    const user = userEvent.setup();
+    const results = render(Paginator, {
+      props: { has_previous: true, has_next: true },
+    });
+    const mockPrevious = jest.fn();
+    results.component.$on("previous", mockPrevious);
+    const previous = screen.getByTitle(/Previous/);
+    await user.click(previous);
+    expect(mockPrevious).toBeCalledWith(expect.any(Object));
+  });
+
+  it("calls on:next handler when next is clicked", async () => {
+    const user = userEvent.setup();
+    const results = render(Paginator, {
+      props: { has_previous: true, has_next: true },
+    });
+    const mockNext = jest.fn();
+    results.component.$on("next", mockNext);
+    const next = screen.getByTitle(/Next/);
+    await user.click(next);
+    expect(mockNext).toBeCalledWith(expect.any(Object));
+  });
+
+  it("displays the page number when provided", async () => {
+    render(Paginator, {
+      props: { page: 1, has_previous: true, has_next: true },
+    });
+    const page = screen.getByText(/Page/);
+    const number = screen.getByText(/1/);
+    expect(page).toBeInTheDocument();
+    expect(number).toBeInTheDocument();
+  });
+
+  it("displays the total pages when provided", async () => {
+    render(Paginator, {
+      props: { page: 1, totalPages: 12, has_previous: true, has_next: true },
+    });
+    const total = screen.getByText(/of 12/);
+    expect(total).toBeInTheDocument();
+  });
+
+  it("renders first page and last page buttons when goToNav is true", async () => {
+    render(Paginator, {
+      props: {
+        page: 1,
+        totalPages: 12,
+        goToNav: true,
+        has_previous: true,
+        has_next: true,
+      },
+    });
+    const first = screen.getByTitle(/First/);
+    const last = screen.getByTitle(/Last/);
+    expect(first).toBeInTheDocument();
+    expect(last).toBeInTheDocument();
+  });
+
+  it("calls a goTo handler when first or last is clicked", async () => {
+    const user = userEvent.setup();
+    const results = render(Paginator, {
+      props: {
+        page: 5,
+        totalPages: 12,
+        goToNav: true,
+        has_previous: true,
+        has_next: true,
+      },
+    });
+    const mockGoTo = jest.fn();
+    results.component.$on("goTo", mockGoTo);
+    const first = screen.getByTitle(/First/);
+    await user.click(first);
+    expect(mockGoTo).toHaveBeenLastCalledWith(
+      expect.objectContaining({ detail: 1 }),
+    );
+    const last = screen.getByTitle(/Last/);
+    await user.click(last);
+    expect(mockGoTo).toHaveBeenLastCalledWith(
+      expect.objectContaining({ detail: 12 }),
+    );
+  });
+
+  it("calls a goTo handler when the page number is changed", async () => {
+    const user = userEvent.setup();
+    const results = render(Paginator, {
+      props: {
+        page: 1,
+        totalPages: 12,
+        goToNav: true,
+        has_previous: true,
+        has_next: true,
+      },
+    });
+    const mockGoTo = jest.fn();
+    results.component.$on("goTo", mockGoTo);
+    const pageNumber = screen.getByRole("spinbutton");
+    expect(pageNumber).toHaveValue(1);
+    await user.click(pageNumber);
+    expect(pageNumber).toHaveFocus();
+    await user.type(pageNumber, "2[Enter]");
+    expect(mockGoTo).toBeCalled();
+  });
+});
diff --git a/src/langs/json/en.json b/src/langs/json/en.json
index d978178b9..967cdb03a 100644
--- a/src/langs/json/en.json
+++ b/src/langs/json/en.json
@@ -539,10 +539,13 @@
     "requestVerificationAction": "Request Verification to Upload"
   },
   "paginator": {
+    "page": "Page",
     "of": "of",
     "document": "{n, plural, one {Document} other {Documents}}",
-    "next": "Next",
-    "previous": "Previous"
+    "next": "Next Page",
+    "previous": "Previous Page",
+    "first": "First Page",
+    "last": "Last Page"
   },
   "processingBar": {
     "doneProcessing": "Done processing",
diff --git a/src/pages/app/ActionBar.svelte b/src/pages/app/ActionBar.svelte
index b92b8e90c..cd9966767 100644
--- a/src/pages/app/ActionBar.svelte
+++ b/src/pages/app/ActionBar.svelte
@@ -2,7 +2,7 @@
   import Checkbox from "@/common/Checkbox.svelte";
   import Tooltip from "@/common/Tooltip.svelte";
   import Dropdown from "@/common/Dropdown.svelte";
-  import Paginator from "./Paginator.svelte";
+  import Paginator from "../../common/Paginator.svelte";
   import { _ } from "svelte-i18n";
 
   // Menus
@@ -11,6 +11,7 @@
   import AddonsMenu from "./menus/AddonsMenu.svelte";
 
   // Stores
+  import { search, searchNext, searchPrev } from "@/search/search.js";
   import { layout } from "@/manager/layout.js";
   import { manager, selectAll } from "@/manager/manager.js";
   import { documents, unselectAll } from "@/manager/documents.js";
@@ -82,7 +83,14 @@
       {/if}
 
       <span class="narrowhide">
-        <Paginator />
+        <Paginator
+          page={$search.page}
+          totalPages={$search.results?.numPages}
+          on:next={searchNext}
+          on:previous={searchPrev}
+          has_next={$search.hasNext}
+          has_previous={$search.hasPrev}
+        />
       </span>
     </div>
   {/if}
diff --git a/src/pages/app/Documents.svelte b/src/pages/app/Documents.svelte
index a3cad2fde..405b324a6 100644
--- a/src/pages/app/Documents.svelte
+++ b/src/pages/app/Documents.svelte
@@ -15,7 +15,7 @@
   import Loader from "@/common/Loader.svelte";
   import Modal from "@/common/Modal.svelte";
   import NoDocuments from "./NoDocuments.svelte";
-  import Paginator from "./Paginator.svelte";
+  import Paginator from "../../common/Paginator.svelte";
   import ProcessingBar from "./ProcessingBar.svelte";
   import SearchBar from "./SearchBar.svelte";
   import SearchLink from "./SearchLink.svelte";
@@ -26,7 +26,12 @@
   // Store properties
   import { layout } from "@/manager/layout.js";
   import { documents } from "@/manager/documents.js";
-  import { search, projectIdUrl } from "@/search/search.js";
+  import {
+    search,
+    searchNext,
+    searchPrev,
+    projectIdUrl,
+  } from "@/search/search.js";
   import {
     orgsAndUsers,
     getUserById,
@@ -220,7 +225,14 @@
       <EmbedFooter {dialog} />
     {:else}
       <div class="narrowshow">
-        <Paginator />
+        <Paginator
+          page={$search.page}
+          totalPages={$search.results?.numPages}
+          on:next={searchNext}
+          on:previous={searchPrev}
+          has_next={$search.hasNext}
+          has_previous={$search.hasPrev}
+        />
       </div>
     {/if}
   </div>
diff --git a/src/pages/app/EmbedFooter.svelte b/src/pages/app/EmbedFooter.svelte
index 92df224bc..66a4ed230 100644
--- a/src/pages/app/EmbedFooter.svelte
+++ b/src/pages/app/EmbedFooter.svelte
@@ -1,14 +1,22 @@
 <script>
-  import Paginator from "./Paginator.svelte";
+  import Paginator from "../../common/Paginator.svelte";
   import Logo from "@/common/Logo.svelte";
 
   export let dialog = false;
+  import { search, searchNext, searchPrev } from "@/search/search.js";
 </script>
 
 <div class="footer" class:dialog>
   <div class="background" />
   <div class="paginator">
-    <Paginator />
+    <Paginator
+      page={$search.page}
+      totalPages={$search.results?.numPages}
+      on:next={searchNext}
+      on:previous={searchPrev}
+      has_next={$search.hasNext}
+      has_previous={$search.hasPrev}
+    />
   </div>
   {#if !dialog}
     <div class="logo">
diff --git a/src/pages/app/Paginator.svelte b/src/pages/app/Paginator.svelte
deleted file mode 100644
index 02e3f0cca..000000000
--- a/src/pages/app/Paginator.svelte
+++ /dev/null
@@ -1,103 +0,0 @@
-<script>
-  import { search, searchNext, searchPrev } from "@/search/search.js";
-  import { _ } from "svelte-i18n";
-
-  // SVG assets
-  import leftPaginatorSvg from "@/assets/page_arrow_left.svg?raw";
-  import rightPaginatorSvg from "@/assets/page_arrow_right.svg?raw";
-</script>
-
-<div class="paginator">
-  {#if $search.hasResults}
-    <button disabled={!$search.hasPrev} on:click={searchPrev}>
-      {@html leftPaginatorSvg}
-    </button>
-    <div class="text">
-      <div class="number">
-        {#if $search.results.onlyPage}
-          {$search.results.rawResults.results.length}
-        {:else}
-          <span class="range">
-            {$search.start}
-            -
-            {$search.end}
-          </span>
-          {#if $search.results.count}
-            {$_("paginator.of")}
-            {$search.results.count}
-          {/if}
-        {/if}
-      </div>
-      <div class="documents">
-        {$_("paginator.document", { values: { n: $search.results.count } })}
-      </div>
-    </div>
-    <button disabled={!$search.hasNext} on:click={searchNext}>
-      {@html rightPaginatorSvg}
-    </button>
-  {/if}
-</div>
-
-<style lang="scss">
-  .paginator {
-    display: table-cell;
-    width: 100%;
-    text-align: right;
-    white-space: nowrap;
-
-    > * {
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    .text {
-      text-align: center;
-      margin: 0 13px;
-
-      .number {
-        font-size: 14px;
-      }
-
-      .range {
-        font-weight: bold;
-      }
-
-      .documents {
-        color: rgba(0, 0, 0, 0.53);
-        font-weight: bold;
-        font-size: 11px;
-        text-transform: uppercase;
-      }
-    }
-
-    button {
-      cursor: pointer;
-      background: none;
-      border: none;
-      outline: none;
-      width: 24px;
-      height: 21px;
-      padding: 2px 0;
-      position: relative;
-      text-align: center;
-
-      :global(svg) {
-        height: 8px;
-      }
-
-      &:hover {
-        opacity: 0.8;
-
-        &:disabled {
-          opacity: 0.2;
-        }
-      }
-
-      &:disabled,
-      &:disabled:before {
-        opacity: 0.2;
-        cursor: default;
-      }
-    }
-  }
-</style>
diff --git a/src/pages/entities/Entities.svelte b/src/pages/entities/Entities.svelte
index f7ec11409..d0cb1d3a4 100644
--- a/src/pages/entities/Entities.svelte
+++ b/src/pages/entities/Entities.svelte
@@ -16,6 +16,7 @@
   import closeSvg from "@/assets/close_inline.svg?raw";
 
   import { SPECIAL_CONTACT } from "../../config/config.js";
+  import Paginator from "../../common/Paginator.svelte";
 
   let loading = true;
   let fullText = null;
@@ -163,16 +164,12 @@
     <Link back={true} color={true}>{$_("entities.back")}</Link>
   </p>
   {#if !loading && $entities.entities != null && fullText != null && ($entities.entities.entities.length > 0 || pagePushed)}
-    <p class="paginator">
-      <span>{$_("entities.page")}&nbsp;</span>
-      {#if $entities.entities.hasPrev}
-        <span class="paginate" on:click={() => prevPage()}>←</span>
-      {/if}
-      {#if $entities.entities.hasNext}
-        <span class="paginate" on:click={() => nextPage()}>→</span>
-      {/if}
-    </p>
-
+    <Paginator
+      has_next={$entities.entities.hasNext}
+      has_prev={$entities.entities.hasPrev}
+      on:next={nextPage}
+      on:previous={prevPage}
+    />
     <details>
       <!-- Todo: put in separate component -->
       <summary>{$_("entities.filter")}</summary>
@@ -484,18 +481,6 @@
     }
   }
 
-  .paginator {
-    .paginate {
-      color: $searchSpecial;
-      cursor: pointer;
-      user-select: none;
-
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-  }
-
   .close {
     @include buttonLike;
     display: inline-block;
diff --git a/src/pages/viewer/controls/Paginator.svelte b/src/pages/viewer/controls/Paginator.svelte
index 32d98aba8..8966f4de4 100644
--- a/src/pages/viewer/controls/Paginator.svelte
+++ b/src/pages/viewer/controls/Paginator.svelte
@@ -1,202 +1,31 @@
+<!-- TODO Add TS lang to script. Right now, `doc` has conflicts that fail checks. -->
 <script>
-  import { _ } from "svelte-i18n";
+  import { doc } from "../../../viewer/document.js";
+  import { viewer } from "../../../viewer/viewer.js";
+  import Paginator from "../../../common/Paginator.svelte";
 
-  import { doc } from "@/viewer/document.js";
-  import { viewer } from "@/viewer/viewer.js";
+  $: mode = $doc.mode;
 
-  // SVG assets
-  import leftPaginator from "@/assets/left_paginator.svg?raw";
-  import rightPaginator from "@/assets/right_paginator.svg?raw";
+  $: page = $doc.visiblePageNumber;
+  $: totalPages = $viewer.document?.pageCount;
+  $: has_next = page < totalPages;
+  $: has_previous = page > 1;
 
-  let input;
-  let customPage = "1";
-
-  let intentionalBlur = false;
-  let hadInput = false;
-
-  $: {
-    customPage = customPage.replace(/[^0-9]/g, "");
-  }
-
-  function dismiss() {
-    intentionalBlur = true;
-    input.blur();
-  }
-
-  function select() {
-    if (input == null) return;
-    setTimeout(() => input.select(), 0);
-  }
-
-  function getPageFromInput() {
-    if (!viewer.loaded || input == null) return null;
-
-    const pageNumber = parseInt(customPage);
-    if (pageNumber == null) return null;
-    // Disregard page out of bounds.
-    if (pageNumber < 1 || pageNumber > viewer.document.pageCount) return null;
-
-    return pageNumber;
-  }
-
-  function gotoPage(readablePageNumber) {
-    customPage = `${readablePageNumber}`;
-    doc.jumpToPage(readablePageNumber - 1);
-  }
-
-  function handleInput() {
-    if (intentionalBlur) {
-      intentionalBlur = false;
-      return;
-    }
-    if (!viewer.loaded || input == null || !hadInput) return;
-
-    // Blur the input
-    dismiss();
-
-    // Pull out page number
-    const pageNumber = getPageFromInput();
-    if (pageNumber == null) return;
-
-    // Jump the viewer
-    gotoPage(pageNumber);
-  }
-
-  function increment(fromInput = false) {
-    let pageNumber = fromInput ? getPageFromInput() : doc.visiblePageNumber;
-    if (pageNumber == null) return;
-
-    pageNumber = Math.min(pageNumber + 1, viewer.document.pageCount);
-
-    // Jump the viewer
-    gotoPage(pageNumber);
-    if (fromInput) select();
-  }
-
-  function decrement(fromInput = false) {
-    let pageNumber = fromInput ? getPageFromInput() : doc.visiblePageNumber;
-    if (pageNumber == null) return;
-
-    pageNumber = Math.max(pageNumber - 1, 1);
-
-    // Jump the viewer
-    gotoPage(pageNumber);
-    if (fromInput) select();
+  function goToPage(event) {
+    const page = event.detail;
+    doc.jumpToPage(page - 1);
   }
 </script>
 
-{#if $viewer.loaded && $doc.mode !== "search" && $doc.mode !== "notes" && $doc.mode !== "thumbnail"}
-  <div class="paginator">
-    <button class="paginate left buttonLike" on:click={() => decrement(false)}>
-      {@html leftPaginator}
-    </button>
-    <span class="page">
-      <span class="hidden">{$viewer.document.pageCount}</span>
-      <span class="absolute">{$doc.visiblePageNumber}</span>
-      <input
-        type="text"
-        inputmode="numeric"
-        pattern="[0-9]*"
-        bind:this={input}
-        bind:value={customPage}
-        on:focus={() => {
-          intentionalBlur = false;
-          customPage = `${$doc.visiblePageNumber}`;
-          hadInput = false;
-          select();
-        }}
-        on:blur={handleInput}
-        on:input={() => (hadInput = true)}
-        on:keydown={(e) => {
-          if (input != document.activeElement) return;
-          if (e.key == "Escape") {
-            dismiss();
-          } else if (e.key == "Enter") {
-            handleInput();
-          } else if (e.key == "ArrowUp") {
-            increment(true);
-          } else if (e.key == "ArrowDown") {
-            decrement(true);
-          }
-        }}
-      />
-    </span>
-    <span class="rest">{$_("paginator.of")} {$viewer.document.pageCount}</span>
-    <button class="paginate right buttonLike" on:click={() => increment(false)}>
-      {@html rightPaginator}
-    </button>
-  </div>
+{#if $viewer.loaded && mode !== "search" && mode !== "notes" && mode !== "thumbnail"}
+  <Paginator
+    {page}
+    {totalPages}
+    {has_next}
+    {has_previous}
+    on:previous={goToPage}
+    on:next={goToPage}
+    on:goTo={goToPage}
+    goToNav
+  />
 {/if}
-
-<style>
-  .paginator {
-    --inputHeight: 23px;
-    --arrowHeight: 18px;
-    --arrowPadding: 13px;
-
-    user-select: none;
-    color: var(--viewerDarkGray);
-  }
-
-  .paginator .page {
-    position: relative;
-    font-weight: normal;
-    font-size: 15px;
-    padding: 0 18px;
-    background: #ffffff;
-    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
-    border-radius: var(--radius);
-    display: inline-block;
-    height: var(--inputHeight, 23px);
-    line-height: var(--inputHeight, 23px);
-    vertical-align: middle;
-  }
-
-  .paginator .page .absolute,
-  .paginator .page input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .paginator .page .hidden {
-    opacity: 0;
-  }
-
-  .paginator .page input {
-    opacity: 0;
-    box-sizing: border-box;
-    text-align: center;
-    font-weight: inherit;
-    font-family: inherit;
-    font-size: inherit;
-    color: inherit;
-  }
-  .paginator .page :focus {
-    opacity: 1;
-  }
-
-  .paginator .rest {
-    display: inline-block;
-    line-height: var(--inputHeight, 23px);
-    vertical-align: middle;
-    padding-left: 8px;
-  }
-
-  .paginator .paginate {
-    display: inline-block;
-    font-size: 0;
-    padding: calc((var(--inputHeight, 23px) - var(--arrowHeight, 18px)) / 2) 0;
-    vertical-align: middle;
-  }
-
-  .paginator .paginate.left {
-    padding-right: var(--arrowPadding, 13px);
-  }
-
-  .paginator .paginate.right {
-    padding-left: var(--arrowPadding, 13px);
-  }
-</style>
diff --git a/src/search/search.js b/src/search/search.js
index 830812c5a..481645595 100644
--- a/src/search/search.js
+++ b/src/search/search.js
@@ -62,6 +62,9 @@ export const search = new Svue({
     hasPrev(prevUrls) {
       return prevUrls.length > 0;
     },
+    page(prevUrls) {
+      return prevUrls.length + 1;
+    },
     start(prevUrls, results, params) {
       if (results == null) return 0;
       var startIndex = 1;
diff --git a/tsconfig.json b/tsconfig.json
index 89d9ac115..ebbfd19b9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,8 @@
       "@/*": ["src/*"],
       "svelte": ["node_modules/svelte"]
     },
-    "downlevelIteration": true
+    "downlevelIteration": true,
+    "types": ["@testing-library/jest-dom"]
   },
   "include": ["src/**/*.ts", "src/**/*.svelte", "src/**/*.js"],
   "exclude": ["public/*"]
diff --git a/tsconfig.test.json b/tsconfig.test.json
new file mode 100644
index 000000000..9b8d7b8b7
--- /dev/null
+++ b/tsconfig.test.json
@@ -0,0 +1,22 @@
+{
+  // "extends": "@tsconfig/svelte/tsconfig.json" /* all options: https://www.typescriptlang.org/tsconfig#resolveJsonModule */,
+  "compilerOptions": {
+    // "ignoreDeprecations": "5.0",
+    // "verbatimModuleSyntax": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "lib": ["es2020", "DOM", "dom.iterable"],
+    "allowJs": true,
+    // "checkJs": true, /* 600+ errors */
+    "baseUrl": "/app",
+    "paths": {
+      "@/*": ["src/*"],
+      "svelte": ["node_modules/svelte"]
+    },
+    "downlevelIteration": true,
+    "moduleResolution": "nodenext",
+    "types": ["@testing-library/jest-dom"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.svelte", "src/**/*.js"],
+  "exclude": ["public/*"]
+}