diff --git a/src/pages/viewer/Footer.svelte b/src/pages/viewer/Footer.svelte
index ca7f99160..fe334a9aa 100644
--- a/src/pages/viewer/Footer.svelte
+++ b/src/pages/viewer/Footer.svelte
@@ -1,101 +1,94 @@
-<script>
+<script lang="ts">
   // Controls
   import ViewDropdown from "./controls/ViewDropdown.svelte";
   import Paginator from "./controls/Paginator.svelte";
   import Zoom from "./controls/Zoom.svelte";
   import FullScreen from "./controls/FullScreen.svelte";
 
-  import { layout } from "@/viewer/layout.js";
+  import { FOOTER_HEIGHT } from "./constants.js";
 
-  $: style = `height: ${$layout.footerHeight}px;`;
+  export let disableControls = false;
+  export let compact = false;
+  export let embed = false;
+  export let showFullscreen = false;
+
+  $: style = `height: ${FOOTER_HEIGHT}px;`;
 </script>
 
-<style lang="scss">
+<style>
   footer {
     position: absolute;
     bottom: 0;
-    border-top: $viewerHeaderBorder;
-    z-index: $viewerFooterZ;
+    left: 0;
+    right: 0;
+    border-top: var(--viewerHeaderBorder);
+    z-index: var(--viewerFooterZ);
     text-align: center;
+  }
 
-    &.disabled {
-      pointer-events: none;
-      filter: brightness(90%);
-    }
+  footer.disabled {
+    pointer-events: none;
+    filter: brightness(90%);
   }
 
   .cell {
     display: table-cell;
     vertical-align: middle;
+  }
 
-    &.side {
-      width: 200px;
-      text-align: left;
-      padding: 0 0 0 16px;
+  .cell.side {
+    width: 200px;
+    text-align: left;
+    padding: 0 0 0 16px;
+  }
 
-      &.right {
-        text-align: right;
-        padding: 0 16px 0 0;
-      }
-    }
+  .cell.side.right {
+    text-align: right;
+    padding: 0 16px 0 0;
+  }
 
-    &.center {
-      text-align: center;
-    }
+  .cell.center {
+    text-align: center;
+  }
 
-    &.floatleft {
-      @media only screen and (max-width: $earlyBreak) {
-        position: absolute;
-        left: 0;
-        top: 6px;
-      }
-    }
+  .hide.ib {
+    display: inline-block;
+  }
 
-    &.floatright {
-      @media only screen and (max-width: $earlyBreak) {
-        position: absolute;
-        right: -14px;
-        top: 5px;
-        width: auto;
-      }
+  @media only screen and (max-width: 720px) {
+    .hide {
+      display: none;
     }
-
-    .adjustright {
-      @media only screen and (max-width: $earlyBreak) {
-        margin-top: -2px;
-        margin-right: 14px;
-      }
+    .hide.ib {
+      display: none;
     }
   }
 
-  .hide {
-    &.ib {
-      display: inline-block;
-
-      @media only screen and (max-width: 720px) {
-        display: none;
-      }
+  @media only screen and (max-width: 900px) {
+    .cell.floatright {
+      position: absolute;
+      right: -14px;
+      top: 5px;
+      width: auto;
     }
-
-    @media only screen and (max-width: 720px) {
-      display: none;
+    .cell.floatleft {
+      position: absolute;
+      left: 0;
+      top: 6px;
     }
-
-    &.hideearly {
-      @media only screen and (max-width: $earlyBreak) {
-        display: none;
-      }
+    .adjustright {
+      margin-top: -2px;
+      margin-right: 14px;
+    }
+    .hide.hideearly {
+      display: none;
     }
   }
 </style>
 
-<footer
-  class="vheader"
-  class:disabled={$layout.disableControls}
-  style="height: {$layout.footerHeight}px"
->
+<footer class="vheader" class:disabled={disableControls} {style}>
   <div class="vcontent">
-    {#if !$layout.compact}
+    {#if !compact}
       <div class="cell side hide floatleft" {style}>
         <ViewDropdown />
       </div>
@@ -103,10 +96,10 @@
         <Paginator />
       </div>
       <div class="cell side right floatright" {style}>
-        <span class="hide ib adjustright" class:hideearly={$layout.embed}>
+        <span class="hide ib adjustright" class:hideearly={embed}>
           <Zoom />
         </span>
-        {#if $layout.embed && $layout.showFullscreen}
+        {#if embed && showFullscreen}
           <FullScreen />
         {/if}
       </div>
diff --git a/src/pages/viewer/Header.svelte b/src/pages/viewer/Header.svelte
new file mode 100644
index 000000000..3885db2d0
--- /dev/null
+++ b/src/pages/viewer/Header.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+  import { _ } from "svelte-i18n";
+
+  import Loader from "../../common/Loader.svelte";
+  import Link from "../../router/Link.svelte";
+  import backArrowSvg from "../../assets/back_arrow.svg?raw";
+
+  import Search from "./controls/Search.svelte";
+  import Hamburger from "./controls/Hamburger.svelte";
+
+  import { HEADER_HEIGHT } from "./constants";
+
+  export let document: any;
+  export let loaded: boolean;
+  export let title = true;
+  export let showOrg = true;
+  export let disableControls = false;
+  export let embed = false;
+</script>
+
+<style>
+  header {
+    z-index: var(--viewerHeaderZ);
+    position: relative;
+    border-bottom: var(--viewerHeaderBorder);
+    box-shadow: 0 0 25px rgba(0, 0, 0, 0.35);
+  }
+  header.disabled {
+    pointer-events: none;
+    filter: brightness(90%);
+  }
+  .expand {
+    width: 100%;
+  }
+
+  .cell {
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  .back {
+    margin: 0 16px 0 16px;
+  }
+
+  .title {
+    color: var(--viewerFg, rgba(0, 0, 0, 0.8));
+    user-select: none;
+  }
+  .title > * {
+    display: inline-block;
+    margin: 0;
+  }
+
+  .title h1 {
+    font-size: 18px;
+    margin: 0 5px;
+    word-break: break-all;
+  }
+
+  .title .padleft {
+    margin-left: 30px;
+  }
+
+  .title h2 {
+    color: var(--viewerSecondary, rgba(0, 0, 0, 0.78));
+    font-size: 14px;
+    font-weight: normal;
+    margin: 0 5px;
+  }
+</style>
+
+<header
+  class="vheader"
+  class:disabled={disableControls}
+  style="height: {HEADER_HEIGHT}px"
+>
+  <div class="vcontent">
+    <!-- Expanding cell to hold title and optional back -->
+    <div class="cell">
+      {#if !embed}
+        <div class="back">
+          <Link back={true}>
+            {@html backArrowSvg}
+          </Link>
+        </div>
+      {/if}
+    </div>
+    <div class="cell expand">
+      {#if loaded}
+        <div class="title">
+          {#if !embed && document.readable}
+            <Loader active={true} pad={true} />
+          {/if}
+          {#if title}
+            <h1 class:padleft={embed}>{document.title}</h1>
+            <h2>
+              {$_("titleHeader.contributedBy", {
+                values: {
+                  name: showOrg ? document.orgString : document.userOrgString,
+                },
+              })}
+            </h2>
+          {/if}
+        </div>
+      {/if}
+    </div>
+    <div class="cell">
+      <Search />
+    </div>
+    <div class="cell">
+      <Hamburger />
+    </div>
+  </div>
+</header>
diff --git a/src/pages/viewer/Sidebar.svelte b/src/pages/viewer/Sidebar.svelte
index d6000daac..bd9757e2a 100644
--- a/src/pages/viewer/Sidebar.svelte
+++ b/src/pages/viewer/Sidebar.svelte
@@ -1,10 +1,10 @@
-<script>
+<script lang="ts">
   import TableOfContents from "./TableOfContents.svelte";
-  import Progress from "@/common/Progress.svelte";
-  import AccessIcon from "@/common/AccessIcon.svelte";
-  import HtmlField from "@/common/HtmlField.svelte";
-  import session from "@/api/session.js";
-  import { jsonUrl } from "@/api/viewer.js";
+  import Progress from "../../common/Progress.svelte";
+  import AccessIcon from "../../common/AccessIcon.svelte";
+  import HtmlField from "../../common/HtmlField.svelte";
+  import session from "../../api/session.js";
+  import { jsonUrl } from "../../api/viewer.js";
 
   import {
     enterRedactMode,
@@ -13,13 +13,25 @@
     enterInfoMode,
     enterDataMode,
     enterSectionsMode,
-  } from "@/viewer/actions";
-  import { layout, showEmbedFlow, cancelAnnotation } from "@/viewer/layout.js";
-  import { viewer } from "@/viewer/viewer.js";
+  } from "../../viewer/actions";
+  import { showEmbedFlow, cancelAnnotation } from "../../viewer/layout.js";
   import { _ } from "svelte-i18n";
+  import { FOOTER_HEIGHT, HEADER_HEIGHT, SIDEBAR_WIDTH } from "./constants";
+  import SidebarAction from "./SidebarAction.svelte";
+
+  export let document: any;
+  export let signedIn: Boolean;
+  export let loaded = false;
+  export let embed = false;
+  export let hidePdfLink = false;
+  export let showOrg = false;
+  export let displayAnnotate = false;
+  export let disableControls = false;
+
+  const style = `top: ${HEADER_HEIGHT}px; bottom: ${FOOTER_HEIGHT}px; width: ${SIDEBAR_WIDTH}px;`;
 
   function handleMouseDown() {
-    if ($layout.displayAnnotate) {
+    if (displayAnnotate) {
       cancelAnnotation();
     }
   }
@@ -36,11 +48,69 @@
     doctr: "docTR",
   };
 
+  interface Action {
+    id: string;
+    action: () => void;
+    header: string;
+    description: string;
+    disabled?: boolean;
+  }
+
+  let actions: Action[] = [
+    {
+      id: "share",
+      action: () => showEmbedFlow(document),
+      header: $_("sidebar.share"),
+      description: $_("sidebar.shareDesc"),
+      disabled: document?.readable,
+    },
+    {
+      id: "annotate",
+      action: enterAnnotateMode,
+      header: $_("sidebar.annotate"),
+      description: $_("sidebar.annotateDesc"),
+    },
+    {
+      id: "redact",
+      action: enterRedactMode,
+      header: $_("sidebar.redact"),
+      description: $_("sidebar.redactDesc"),
+      disabled: document?.readable,
+    },
+    {
+      id: "modify",
+      action: enterModifyMode,
+      header: $_("sidebar.modify"),
+      description: $_("sidebar.modifyDesc"),
+      disabled: document?.readable,
+    },
+    {
+      id: "info",
+      action: enterInfoMode,
+      header: $_("sidebar.info"),
+      description: $_("sidebar.infoDesc"),
+      disabled: document?.readable,
+    },
+    {
+      id: "data",
+      action: enterDataMode,
+      header: $_("sidebar.data"),
+      description: $_("sidebar.dataDesc"),
+      disabled: document?.readable,
+    },
+    {
+      id: "sections",
+      action: enterSectionsMode,
+      header: $_("sidebar.sections"),
+      description: $_("sidebar.sectionsDesc"),
+    },
+  ];
+
   $: {
-    if ($viewer.document != null && textDoc == null && !loading) {
+    if (document != null && textDoc == null && !loading) {
       loading = true;
       (async () => {
-        textDoc = await session.getStatic(jsonUrl(viewer.document));
+        textDoc = await session.getStatic(jsonUrl(document));
         // strip _force if it exists
         ocrEngine = textDoc.pages[0].ocr;
         if (ocrEngine) {
@@ -97,38 +167,6 @@
       text-shadow: 0 1px 0 #ffffff5c;
     }
 
-    .action {
-      cursor: pointer;
-      background: #ffffff;
-      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
-      padding: 8px 20px;
-
-      &.disabled {
-        background: #e8e8e8;
-        opacity: 0.5;
-        cursor: default;
-        pointer-events: none;
-      }
-
-      &:hover {
-        background: rgba(black, 0.02);
-      }
-
-      h3 {
-        font-weight: bold;
-        font-size: 14px;
-        color: var(--viewerDarkGray, #171717);
-        margin: 8px 0;
-      }
-
-      p {
-        font-size: 14px;
-        line-height: 18px;
-        color: var(--viewerGray, #525252);
-        margin: 8px 0;
-      }
-    }
-
     .title {
       padding: 16px 20px 16px 20px;
       background: white;
@@ -166,152 +204,108 @@
   }
 </style>
 
-{#if $layout.showSidebar}
-  <div
-    class="sidebar"
-    class:white={$viewer.me == null}
-    class:disabled={$layout.disableControls}
-    on:mousedown={handleMouseDown}
-    style="top: {$layout.headerHeight}px; bottom: {$layout.footerHeight}px;
-    width: {$layout.sidebarWidth}px"
-  >
-    {#if $viewer.loaded}
-      <div class="title">
-        {#if !$layout.embed && $viewer.document.readable}
-          <div class="updating">
-            {$_("sidebar.updating")}
-            <Progress initializing={true} progress={0} compact={true} />
-          </div>
-        {/if}
+<div
+  class="sidebar"
+  class:white={!signedIn}
+  class:disabled={disableControls}
+  on:mousedown={handleMouseDown}
+  {style}
+>
+  {#if loaded}
+    <div class="title">
+      {#if !embed && document?.readable}
+        <div class="updating">
+          {$_("sidebar.updating")}
+          <Progress initializing={true} progress={0} compact={true} />
+        </div>
+      {/if}
 
-        {#if $viewer.document.description != null && $viewer.document.description.trim().length > 0}
-          <details class="dc" open>
-            <summary>
-              <h2 class="inlineheader">{$viewer.document.title}</h2>
-            </summary>
-            <HtmlField content={$viewer.document.description} />
-          </details>
-        {:else}
-          <h2>{$viewer.document.title}</h2>
-        {/if}
+      {#if document?.description != null && document?.description.trim().length > 0}
+        <details class="dc" open>
+          <summary>
+            <h2 class="inlineheader">{document?.title}</h2>
+          </summary>
+          <HtmlField content={document?.description} />
+        </details>
+      {:else}
+        <h2>{document?.title}</h2>
+      {/if}
 
-        <TableOfContents />
+      <TableOfContents />
 
-        <hr />
-        {#if !$layout.hidePdfLink}
-          <div>
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              class="plausible-event-name=viewer-original-document"
-              href={$viewer.document.pdf}
-            >
-              {$_("sidebar.original")}
-            </a>
-          </div>
-        {/if}
-        {#if $viewer.document.relatedArticleUrl != null && $viewer.document.relatedArticleUrl.trim().length > 0}
-          <div>
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              class="plausible-event-name=viewer-related-url"
-              href={$viewer.document.relatedArticleUrl}
-            >
-              {$_("sidebar.related")}
-            </a>
-          </div>
-        {/if}
+      <hr />
+      {#if !hidePdfLink}
+        <div>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            class="plausible-event-name=viewer-original-document"
+            href={document?.pdf}
+          >
+            {$_("sidebar.original")}
+          </a>
+        </div>
+      {/if}
+      {#if document?.relatedArticleUrl != null && document?.relatedArticleUrl.trim().length > 0}
+        <div>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            class="plausible-event-name=viewer-related-url"
+            href={document?.relatedArticleUrl}
+          >
+            {$_("sidebar.related")}
+          </a>
+        </div>
+      {/if}
+      <small>
+        <p>
+          {$_("sidebar.contributed", {
+            values: {
+              name: showOrg ? document?.orgString : document?.userOrgString,
+            },
+          })}
+        </p>
+      </small>
+      {#if document?.source !== null && document?.source.trim().length > 0}
         <small>
           <p>
-            {$_("sidebar.contributed", {
-              values: {
-                name: $layout.showOrg
-                  ? $viewer.document.orgString
-                  : $viewer.document.userOrgString,
-              },
+            {$_("sidebar.source", {
+              values: { source: document?.source },
             })}
           </p>
         </small>
-        {#if $viewer.document.source !== null && $viewer.document.source.trim().length > 0}
-          <small>
-            <p>
-              {$_("sidebar.source", {
-                values: { source: $viewer.document.source },
-              })}
-            </p>
-          </small>
-        {/if}
-        {#if $viewer.document.editAccess}
-          <div>
-            <AccessIcon document={$viewer.document} showText={true} />
-          </div>
-        {/if}
-        {#if ocrEngine}
-          <small><p>OCR: {ocrEngine}</p></small>
-        {/if}
-      </div>
+      {/if}
+      {#if document?.editAccess}
+        <div>
+          <AccessIcon {document} showText={true} />
+        </div>
+      {/if}
+      {#if ocrEngine}
+        <small><p>OCR: {ocrEngine}</p></small>
+      {/if}
+    </div>
 
-      {#if $viewer.me !== null}
-        <div class="actions">{$_("sidebar.actions")}</div>
-        {#if $viewer.document.editAccess}
-          <div
-            class="action plausible-event-name=sidebar-share"
-            class:disabled={$viewer.document.readable}
-            on:click={() => showEmbedFlow($viewer.document)}
-          >
-            <h3>{$_("sidebar.share")}</h3>
-            <p>{$_("sidebar.shareDesc")}</p>
-          </div>
-          <div class="action" on:click={enterAnnotateMode}>
-            <h3>{$_("sidebar.annotate")}</h3>
-            <p>{$_("sidebar.annotateDesc")}</p>
-          </div>
-          <div
-            class="action"
-            class:disabled={$viewer.document.readable}
-            on:click={enterRedactMode}
-          >
-            <h3>{$_("sidebar.redact")}</h3>
-            <p>
-              {$_("sidebar.redactDesc")}
-            </p>
-          </div>
-          <div
-            class="action"
-            class:disabled={$viewer.document.readable}
-            on:click={enterModifyMode}
-          >
-            <h3>{$_("sidebar.modify")}</h3>
-            <p>{$_("sidebar.modifyDesc")}</p>
-          </div>
-          <div
-            class="action"
-            class:disabled={$viewer.document.readable}
-            on:click={enterInfoMode}
-          >
-            <h3>{$_("sidebar.info")}</h3>
-            <p>{$_("sidebar.infoDesc")}</p>
-          </div>
-          <div
-            class="action"
-            class:disabled={$viewer.document.readable}
-            on:click={enterDataMode}
-          >
-            <h3>{$_("sidebar.data")}</h3>
-            <p>{$_("sidebar.dataDesc")}</p>
-          </div>
-          <div class="action" on:click={enterSectionsMode}>
-            <h3>{$_("sidebar.sections")}</h3>
-            <p>{$_("sidebar.sectionsDesc")}</p>
-          </div>
-        {:else}
-          <div class="action" on:click={enterAnnotateMode}>
-            <h3>{$_("sidebar.privateNote")}</h3>
-            <p>{$_("sidebar.privateNoteDesc")}</p>
-          </div>
-        {/if}
+    {#if signedIn}
+      <div class="actions">{$_("sidebar.actions")}</div>
+      {#if document?.editAccess}
+        {#each actions as { id, action, header, description, disabled }}
+          <SidebarAction
+            class={`plausible-event-name=sidebar-${id}`}
+            {disabled}
+            {action}
+            {header}
+            {description}
+          />
+        {/each}
+      {:else}
+        <SidebarAction
+          class="plausible-event-name=sidebar-private-note"
+          action={enterAnnotateMode}
+          header={$_("sidebar.privateNote")}
+          description={$_("sidebar.privateNoteDesc")}
+        />
       {/if}
     {/if}
-  </div>
-{/if}
+  {/if}
+</div>
diff --git a/src/pages/viewer/SidebarAction.svelte b/src/pages/viewer/SidebarAction.svelte
new file mode 100644
index 000000000..978523417
--- /dev/null
+++ b/src/pages/viewer/SidebarAction.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  export let action: () => void;
+  export let header: string;
+  export let description: string;
+  export let disabled = false;
+  let className = "";
+  export { className as class };
+</script>
+
+<style>
+  .action {
+    appearance: none;
+    border: none;
+    text-align: left;
+    font-family: inherit;
+    display: block;
+    width: 100%;
+    cursor: pointer;
+    background: #ffffff;
+    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+    padding: 8px 20px;
+  }
+
+  .action.disabled {
+    background: #e8e8e8;
+    opacity: 0.5;
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .action:hover,
+  .action:focus {
+    background: rgba(0, 0, 0, 0.02);
+  }
+
+  .action h3 {
+    font-weight: bold;
+    font-size: 14px;
+    color: var(--viewerDarkGray, #171717);
+    margin: 8px 0;
+  }
+
+  .action p {
+    font-size: 14px;
+    line-height: 18px;
+    color: var(--viewerGray, #525252);
+    margin: 8px 0;
+  }
+</style>
+
+<button class={`action ${className}`} class:disabled on:click={action}>
+  <h3>{header}</h3>
+  <p>{description}</p>
+</button>
diff --git a/src/pages/viewer/Viewer.svelte b/src/pages/viewer/Viewer.svelte
index 60b83d042..8628d3b77 100644
--- a/src/pages/viewer/Viewer.svelte
+++ b/src/pages/viewer/Viewer.svelte
@@ -2,7 +2,7 @@
   import { _ } from "svelte-i18n";
   import { onMount } from "svelte";
 
-  import Header from "./header/Header.svelte";
+  import Header from "./Header.svelte";
   import Body from "./Body.svelte";
   import SimpleBody from "./SimpleBody.svelte";
   import NoteBody from "./NoteBody.svelte";
@@ -202,7 +202,14 @@
   <Toasts />
 
   <Loader active={$layout.loading}>
-    <Header />
+    <Header
+      document={$viewer.document}
+      loaded={$viewer.loaded}
+      title={$layout.title}
+      showOrg={$layout.title}
+      disableControls={$layout.disableControls}
+      embed={$viewer.embed}
+    />
     {#if $doc.mode == "image"}
       <Body mode={$doc.mode} />
     {:else if $doc.mode == "text" || $doc.mode == "search"}
@@ -214,7 +221,23 @@
     {:else if $doc.mode == "modify"}
       <ThumbnailBody modify={true} />
     {/if}
-    <Sidebar />
-    <Footer />
+    {#if $layout.showSidebar}
+      <Sidebar
+        document={$viewer.document}
+        signedIn={$viewer.me !== null}
+        loaded={$viewer.loaded}
+        embed={$layout.embed}
+        hidePdfLink={$layout.hidePdfLink}
+        showOrg={$layout.showOrg}
+        displayAnnotate={$layout.displayAnnotate}
+        disableControls={$layout.disableControls}
+      />
+    {/if}
+    <Footer
+      disableControls={$layout.disableControls}
+      compact={$layout.compact}
+      embed={$layout.embed}
+      showFullscreen={$layout.showFullscreen}
+    />
   </Loader>
 {/if}
diff --git a/src/pages/viewer/constants.js b/src/pages/viewer/constants.js
new file mode 100644
index 000000000..bdbdda379
--- /dev/null
+++ b/src/pages/viewer/constants.js
@@ -0,0 +1,5 @@
+export const HEADER_HEIGHT = 36;
+export const FOOTER_HEIGHT = 36;
+export const SIDEBAR_WIDTH = 350;
+// A little bigger than normal mobile break to hide sidebar in narrow viewports
+export const MOBILE_BREAKPOINT = 800;
diff --git a/src/pages/viewer/fixtures/document.json b/src/pages/viewer/fixtures/document.json
new file mode 100644
index 000000000..1cb707277
--- /dev/null
+++ b/src/pages/viewer/fixtures/document.json
@@ -0,0 +1,74 @@
+{
+  "id": 24002098,
+  "access": "public",
+  "admin_noindex": false,
+  "asset_url": "https://s3.documentcloud.org/",
+  "canonical_url": "https://www.documentcloud.org/documents/24002098-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018",
+  "created_at": "2023-10-02T00:05:27.632309Z",
+  "data": {},
+  "description": "",
+  "edit_access": true,
+  "file_hash": "0a90fe2c7096c7aa83ff9f6daf302a3b83466060",
+  "noindex": false,
+  "language": "eng",
+  "organization": {
+    "id": 125,
+    "avatar_url": "https://cdn.muckrock.com/media/org_avatars/logo.png",
+    "individual": false,
+    "monthly_ai_credits": 10000,
+    "name": "MuckRock",
+    "number_ai_credits": 0,
+    "slug": "muckrock",
+    "uuid": "97109cc6-e52e-41e7-adb7-834ab7c6819c"
+  },
+  "original_extension": "pdf",
+  "page_count": 20,
+  "page_spec": "612.0x792.0:0-19",
+  "projects": [215678, 208091],
+  "publish_at": null,
+  "published_url": "",
+  "related_article": "",
+  "slug": "quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018",
+  "source": "Scraped from https://www.ssa.gov/foia/readingroom.html",
+  "status": "success",
+  "title": "Quarterly Reports created pursuant to the letter from the National Archives and Records Administration dated June 1, 2018",
+  "updated_at": "2023-10-26T16:13:43.082660Z",
+  "user": {
+    "id": 20080,
+    "avatar_url": "https://cdn.muckrock.com/media/account_images/22_MuckRock_2018_PRELIMANRY_EDITS_DSC_5387_2018_Derek_Kouyoumjian_preview_SfuGGnJ.jpg",
+    "is_staff": true,
+    "name": "Mitchell Kotler",
+    "organization": 125,
+    "organizations": [10000, 3168, 125, 41248, 10002],
+    "admin_organizations": [10000, 3168, 125, 41248, 10002],
+    "username": "mitch",
+    "uuid": "8136b9b8-95b9-4302-950d-5402e9065978",
+    "verified_journalist": true
+  },
+  "revision_control": true,
+  "revisions": [
+    {
+      "version": 1,
+      "user": 20080,
+      "created_at": "2023-10-26T16:11:44.202208Z",
+      "comment": "Initial",
+      "url": "https://api.www.documentcloud.org/files/documents/24002098/revisions/0001-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018.pdf"
+    },
+    {
+      "version": 2,
+      "user": 20080,
+      "created_at": "2023-10-26T16:12:06.155780Z",
+      "comment": "Redacting",
+      "url": "https://api.www.documentcloud.org/files/documents/24002098/revisions/0002-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018.pdf"
+    },
+    {
+      "version": 3,
+      "user": 20080,
+      "created_at": "2023-10-26T16:12:41.997682Z",
+      "comment": "Modifying",
+      "url": "https://api.www.documentcloud.org/files/documents/24002098/revisions/0003-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018.pdf"
+    }
+  ],
+  "notes": [],
+  "sections": []
+}
diff --git a/src/pages/viewer/header/Header.svelte b/src/pages/viewer/header/Header.svelte
deleted file mode 100644
index 29a9a2312..000000000
--- a/src/pages/viewer/header/Header.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-  // Headers
-  import TitleHeader from "./TitleHeader.svelte";
-
-  import { layout } from "@/viewer/layout.js";
-</script>
-
-<style lang="scss">
-  header {
-    z-index: $viewerHeaderZ;
-    position: relative;
-    border-bottom: $viewerHeaderBorder;
-    box-shadow: 0 0 25px rgba(0, 0, 0, 0.35);
-
-    &.disabled {
-      pointer-events: none;
-      filter: brightness(90%);
-    }
-  }
-</style>
-
-<header
-  class="vheader"
-  class:disabled={$layout.disableControls}
-  style="height: {$layout.headerHeight}px"
->
-  <div class="vcontent">
-    <TitleHeader />
-  </div>
-</header>
diff --git a/src/pages/viewer/header/TitleHeader.svelte b/src/pages/viewer/header/TitleHeader.svelte
deleted file mode 100644
index 2bdd3be1c..000000000
--- a/src/pages/viewer/header/TitleHeader.svelte
+++ /dev/null
@@ -1,94 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-
-  // Controls
-  import Loader from "@/common/Loader.svelte";
-  import Search from "../controls/Search.svelte";
-  import Hamburger from "../controls/Hamburger.svelte";
-
-  import Link from "@/router/Link.svelte";
-  import { viewer } from "@/viewer/viewer.js";
-  import { layout } from "@/viewer/layout.js";
-
-  // SVG assets
-  import backArrowSvg from "@/assets/back_arrow.svg?raw";
-</script>
-
-<style>
-  .expand {
-    width: 100%;
-  }
-
-  .cell {
-    display: table-cell;
-    vertical-align: middle;
-  }
-
-  .back {
-    margin: 0 16px 0 16px;
-  }
-
-  .title {
-    color: var(--viewerFg, rgba(0, 0, 0, 0.8));
-    user-select: none;
-  }
-  .title > * {
-    display: inline-block;
-    margin: 0;
-  }
-
-  .title h1 {
-    font-size: 18px;
-    margin: 0 5px;
-    word-break: break-all;
-  }
-
-  .title .padleft {
-    margin-left: 30px;
-  }
-
-  .title h2 {
-    color: var(--viewerSecondary, rgba(0, 0, 0, 0.78));
-    font-size: 14px;
-    font-weight: normal;
-    margin: 0 5px;
-  }
-</style>
-
-<!-- Expanding cell to hold title and optional back -->
-<div class="cell">
-  {#if !$layout.embed}
-    <div class="back">
-      <Link back={true} style="margin-top: {$layout.headerHeight - 20}px">
-        {@html backArrowSvg}
-      </Link>
-    </div>
-  {/if}
-</div>
-<div class="cell expand">
-  {#if $viewer.loaded}
-    <div class="title">
-      {#if !$layout.embed && $viewer.document.readable}
-        <Loader active={true} pad={true} />
-      {/if}
-      {#if $layout.title}
-        <h1 class:padleft={$layout.embed}>{$viewer.document.title}</h1>
-        <h2>
-          {$_("titleHeader.contributedBy", {
-            values: {
-              name: $layout.showOrg
-                ? $viewer.document.orgString
-                : $viewer.document.userOrgString,
-            },
-          })}
-        </h2>
-      {/if}
-    </div>
-  {/if}
-</div>
-<div class="cell">
-  <Search />
-</div>
-<div class="cell">
-  <Hamburger />
-</div>
diff --git a/src/pages/viewer/stories/Footer.stories.svelte b/src/pages/viewer/stories/Footer.stories.svelte
new file mode 100644
index 000000000..4f05c98b8
--- /dev/null
+++ b/src/pages/viewer/stories/Footer.stories.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+
+  import Footer from "../Footer.svelte";
+
+  const args = {
+    disableControls: false,
+    compact: false,
+    embed: false,
+    showFullscreen: false,
+  };
+</script>
+
+<Meta title="Viewer / Footer" component={Footer} />
+
+<Template let:args>
+  <Footer {...args} />
+</Template>
+
+<Story name="Default" {args} />
+<Story name="Compact" args={{ ...args, compact: true }} />
+<Story name="Disable Controls" args={{ ...args, disableControls: true }} />
+<Story name="Embedded" args={{ ...args, embed: true }} />
+<Story
+  name="Fullscreen"
+  args={{ ...args, embed: true, showFullscreen: true }}
+/>
diff --git a/src/pages/viewer/stories/Header.stories.svelte b/src/pages/viewer/stories/Header.stories.svelte
new file mode 100644
index 000000000..0cf48aff6
--- /dev/null
+++ b/src/pages/viewer/stories/Header.stories.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+
+  import Header from "../Header.svelte";
+
+  import documentFixture from "../fixtures/document.json";
+  import { Document as DocumentState } from "../../../structure/document";
+
+  const args = {
+    document: new DocumentState(documentFixture),
+    loaded: true,
+    title: true,
+    showOrg: true,
+    embed: false,
+    disableControls: false,
+  };
+</script>
+
+<Meta title="Viewer / Header" component={Header} />
+
+<Template let:args>
+  <Header {...args} />
+</Template>
+
+<Story name="Default" {args} />
+<Story name="Loading" args={{ ...args, loaded: false }} />
+<Story name="Without Title" args={{ ...args, title: false }} />
+<Story name="Hide Org" args={{ ...args, showOrg: false }} />
+<Story name="Embed" args={{ ...args, embed: true }} />
+<Story name="Disable Controls" args={{ ...args, disableControls: true }} />
diff --git a/src/pages/viewer/stories/Sidebar.stories.svelte b/src/pages/viewer/stories/Sidebar.stories.svelte
new file mode 100644
index 000000000..1ec36f95b
--- /dev/null
+++ b/src/pages/viewer/stories/Sidebar.stories.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+
+  import Sidebar from "../Sidebar.svelte";
+  import documentFixture from "../fixtures/document.json";
+  import { Document as DocumentState } from "../../../structure/document";
+
+  const args = {
+    document: new DocumentState(documentFixture),
+    loaded: true,
+    signedIn: true,
+    disableControls: false,
+  };
+</script>
+
+<Meta title="Viewer / Sidebar" component={Sidebar} />
+
+<Template let:args>
+  <Sidebar {...args} />
+</Template>
+
+<Story name="Default" {args} />
+<Story name="Unloaded" args={{ ...args, loaded: false }} />
+<Story name="Signed Out" args={{ ...args, signedIn: false }} />
+<Story name="Disable Controls" args={{ ...args, disableControls: true }} />
+<Story
+  name="Uneditable"
+  args={{
+    ...args,
+    document: new DocumentState({ ...documentFixture, edit_access: false }),
+  }}
+/>
diff --git a/src/pages/viewer/stories/SidebarAction.stories.svelte b/src/pages/viewer/stories/SidebarAction.stories.svelte
new file mode 100644
index 000000000..d7c2d0bb9
--- /dev/null
+++ b/src/pages/viewer/stories/SidebarAction.stories.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+  import { action } from "@storybook/addon-actions";
+
+  import SidebarAction from "../SidebarAction.svelte";
+
+  const args = {
+    action: action("Trigger Action"),
+    header: "Add Note",
+    description:
+      "Leave a public, private or shared note, which can be embedded within an article.",
+    disabled: false,
+  };
+</script>
+
+<Meta title="Viewer / Sidebar / Action" component={SidebarAction} />
+
+<Template let:args>
+  <SidebarAction {...args} />
+</Template>
+
+<Story name="Action" id="sidebarAction" {args} />
+<Story name="Disabled" args={{ ...args, disabled: true }} />
diff --git a/src/viewer/document.js b/src/viewer/document.js
index 408e13ff3..2a4543cf9 100644
--- a/src/viewer/document.js
+++ b/src/viewer/document.js
@@ -4,13 +4,14 @@ import { tick } from "svelte";
 import { router } from "@/router/router.js";
 import {
   layout,
-  MOBILE_BREAKPOINT,
   annotationValid,
   startSearch,
   clearSearch,
   simpleCancelActions,
 } from "./layout.js";
 
+import { MOBILE_BREAKPOINT } from "../pages/viewer/constants.js";
+
 const LAYOUT = {
   docMargin: 40, // margin from top to first page, bottom to last
   pageGap: 20, // margin between pages
diff --git a/src/viewer/layout.js b/src/viewer/layout.js
index 3597f0b58..06ddd5af4 100644
--- a/src/viewer/layout.js
+++ b/src/viewer/layout.js
@@ -23,8 +23,12 @@ import { DEFAULT_EXPAND } from "../api/common.js";
 import { inIframe } from "@/util/iframe.js";
 import { modification } from "./modification/modification.js";
 
-// A little bigger than normal mobile break to hide sidebar in narrow viewports
-export const MOBILE_BREAKPOINT = 800;
+import {
+  MOBILE_BREAKPOINT,
+  HEADER_HEIGHT,
+  FOOTER_HEIGHT,
+  SIDEBAR_WIDTH,
+} from "../pages/viewer/constants.js";
 
 export const layout = new Svue({
   data() {
@@ -33,10 +37,10 @@ export const layout = new Svue({
       viewer,
 
       // Height of header row
-      headerHeight: 36,
-      baseSidebarWidth: 350,
+      headerHeight: HEADER_HEIGHT,
+      baseSidebarWidth: SIDEBAR_WIDTH,
       // Height of footer row
-      footerHeight: 36,
+      footerHeight: FOOTER_HEIGHT,
 
       // Show the title in the header (title=true)
       title: true,