diff --git a/src/langs/json/en.json b/src/langs/json/en.json
index 4047f7bf9..7e480e21f 100644
--- a/src/langs/json/en.json
+++ b/src/langs/json/en.json
@@ -17,7 +17,9 @@
     "reset": "Clear Search",
     "help": "Use filters like <code>user:</code>, <code>project:</code> or <code>organization:</code> to refine searches. Use <code>sort:</code> to order results.",
     "more": "Learn more",
-    "empty": "No matching results found."
+    "collapseAll": "Collapse all",
+    "expandAll": "Expand all",
+    "empty": "No matching results found"
   },
   "homeTemplate": {
     "signedIn": "Signed in as {name}",
diff --git a/src/lib/components/common/Highlight.svelte b/src/lib/components/common/Highlight.svelte
index 79922e104..c4a94721e 100644
--- a/src/lib/components/common/Highlight.svelte
+++ b/src/lib/components/common/Highlight.svelte
@@ -3,13 +3,14 @@
 
   export let title: string = "";
   export let segments: string[] = [];
+  export let inlineTitle: boolean = false;
 
   function sanitize(s: string): string {
     return DOMPurify.sanitize(s, { ALLOWED_TAGS: ["em"] });
   }
 </script>
 
-<div class="container">
+<div class="container" class:inlineTitle>
   {#if title}<h4 class="ellipsis">{@html sanitize(title)}</h4>{/if}
   {#if segments.length > 0}
     <blockquote>
@@ -23,6 +24,9 @@
 <style>
   .container {
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
   }
   .container blockquote {
     margin: 0;
@@ -31,11 +35,10 @@
     overflow: hidden;
   }
   .container h4 {
-    flex: 0 0 4rem;
     color: var(--gray-4);
     font-weight: var(--font-semibold);
     font-size: var(--font-sm);
-    margin-bottom: 0.5rem;
+    /* margin-bottom: 0.5rem; */
   }
   .segment {
     margin-bottom: 0.5rem;
@@ -54,4 +57,10 @@
     box-shadow: 0 0 0 0.125rem var(--yellow-2);
     font-style: normal;
   }
+  .container.inlineTitle {
+    flex-direction: row;
+  }
+  .container.inlineTitle h4 {
+    flex: 0 0 4rem;
+  }
 </style>
diff --git a/src/lib/components/common/HighlightGroup.svelte b/src/lib/components/common/HighlightGroup.svelte
index 02ce7b0e9..d36db09e2 100644
--- a/src/lib/components/common/HighlightGroup.svelte
+++ b/src/lib/components/common/HighlightGroup.svelte
@@ -1,19 +1,79 @@
 <!-- @component A collection of highlights from search results.-->
 
 <script lang="ts" generics="H">
+  import { createEventDispatcher } from "svelte";
   import { _ } from "svelte-i18n";
+  import {
+    ChevronDown12,
+    ChevronRight12,
+    Fold16,
+    Unfold16,
+  } from "svelte-octicons";
+
+  import { remToPx } from "$lib/utils/layout";
+  import Button from "./Button.svelte";
 
   export let open = false;
   export let highlights: [string, H][] = [];
   export let getHref: (id: string) => string;
+  export let showAll = false;
+
+  let clientWidth = 1000;
+  $: isSmall = clientWidth < remToPx(27);
+
+  const dispatch = createEventDispatcher();
+
+  function collapseAll() {
+    open = false;
+    dispatch("collapseAll");
+  }
+
+  function expandAll() {
+    open = true;
+    dispatch("expandAll");
+  }
 </script>
 
 {#if highlights.length}
-  <details class="highlights" bind:open>
+  <details class="highlights" bind:open bind:clientWidth>
     <summary>
-      <slot name="summary">
-        {$_("search.matchingResults", { values: { n: highlights.length } })}
-      </slot>
+      <div class="left">
+        {#if open}
+          <ChevronDown12 />
+        {:else}
+          <ChevronRight12 />
+        {/if}
+        <slot name="summary">
+          {$_("search.matchingResults", { values: { n: highlights.length } })}
+        </slot>
+      </div>
+      {#if showAll}
+        <div class="right">
+          {#if open}
+            <Button
+              minW={false}
+              size="small"
+              ghost
+              on:click={collapseAll}
+              title={$_("search.collapseAll")}
+            >
+              <Fold16 height={14} width={14} />
+              {#if !isSmall}{$_("search.collapseAll")}{/if}
+            </Button>
+          {:else}
+            <Button
+              minW={false}
+              size="small"
+              ghost
+              on:click={expandAll}
+              title={$_("search.expandAll")}
+            >
+              <Unfold16 height={14} width={14} />
+              {#if !isSmall}{$_("search.expandAll")}{/if}
+            </Button>
+          {/if}
+        </div>
+      {/if}
     </summary>
     <ul>
       {#each highlights as [id, highlight]}
@@ -33,13 +93,30 @@
     overflow: hidden;
   }
   .highlights summary {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    gap: 1rem;
     color: var(--gray-4);
+    fill: var(--gray-4);
     padding: 0.5rem 0.75rem;
     font-size: var(--font-sm);
     font-weight: var(--font-semibold);
   }
-  .highlights summary::marker {
-    margin-right: 1rem;
+  .highlights summary .left,
+  .highlights summary .right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    white-space: no-wrap;
+    padding: 0 0.5rem 0 0.25rem;
+    border-radius: 0.5rem;
+  }
+  summary .left:hover,
+  summary .left:focus,
+  summary:hover .left,
+  summary:focus .left {
+    background-color: var(--blue-1);
   }
   .highlights ul {
     list-style-type: none;
diff --git a/src/lib/components/common/stories/HighlightGroup.stories.svelte b/src/lib/components/common/stories/HighlightGroup.stories.svelte
index 497cd3fff..e1eeea7c6 100644
--- a/src/lib/components/common/stories/HighlightGroup.stories.svelte
+++ b/src/lib/components/common/stories/HighlightGroup.stories.svelte
@@ -25,3 +25,11 @@
     </svelte:fragment>
   </HighlightGroup>
 </Story>
+
+<Story name="With All Controls">
+  <HighlightGroup {highlights} {getHref} showAll>
+    <svelte:fragment let:id let:highlight>
+      <Highlight title={id} segments={highlight} />
+    </svelte:fragment>
+  </HighlightGroup>
+</Story>
diff --git a/src/lib/components/documents/NoteHighlights.svelte b/src/lib/components/documents/NoteHighlights.svelte
index 1df18798f..e8e4a19ac 100644
--- a/src/lib/components/documents/NoteHighlights.svelte
+++ b/src/lib/components/documents/NoteHighlights.svelte
@@ -17,27 +17,44 @@
 -->
 
 <script lang="ts">
+  import type { Writable } from "svelte/store";
+  import type { Document } from "$lib/api/types";
+
+  import { getContext } from "svelte";
   import { _ } from "svelte-i18n";
 
-  import type { Document } from "$lib/api/types";
-  import { noteUrl } from "$lib/api/notes";
   import Highlight from "../common/Highlight.svelte";
   import HighlightGroup from "../common/HighlightGroup.svelte";
 
+  import { noteUrl } from "$lib/api/notes";
+
   export let document: Document;
   export let open = true;
 
+  const { subscribe } =
+    getContext<Writable<{ allOpen: boolean }>>("highlightState") ?? {};
+  $: subscribe?.((state) => {
+    open = state.allOpen;
+  });
+
   $: highlights = Object.entries(document.note_highlights ?? {});
   $: notes = new Map(document.notes?.map((n) => [n.id, n]));
 
   function noteHref(id: string): string {
     const note = notes.get(id);
     if (!note) return "";
-    return noteUrl(document, note).toString();
+    return noteUrl(document, note).href;
   }
 </script>
 
-<HighlightGroup {highlights} getHref={noteHref} bind:open>
+<HighlightGroup
+  {highlights}
+  getHref={noteHref}
+  bind:open
+  showAll={Boolean(subscribe)}
+  on:collapseAll
+  on:expandAll
+>
   <svelte:fragment slot="summary">
     {$_("documents.matchingNotes", { values: { n: highlights.length } })}
   </svelte:fragment>
diff --git a/src/lib/components/documents/PageHighlights.svelte b/src/lib/components/documents/PageHighlights.svelte
index 66bfeb7f7..610952bd8 100644
--- a/src/lib/components/documents/PageHighlights.svelte
+++ b/src/lib/components/documents/PageHighlights.svelte
@@ -11,8 +11,10 @@
   ```
 -->
 <script lang="ts">
+  import type { Writable } from "svelte/store";
   import type { Document } from "$lib/api/types";
 
+  import { getContext } from "svelte";
   import { _ } from "svelte-i18n";
 
   import Highlight from "../common/Highlight.svelte";
@@ -24,21 +26,34 @@
   export let document: Document;
   export let open = true;
 
+  const { subscribe } =
+    getContext<Writable<{ allOpen: boolean }>>("highlightState") ?? {};
+  $: subscribe?.((state) => {
+    open = state.allOpen;
+  });
   $: highlights = Object.entries(document.highlights ?? {});
 
   function pageHref(id: string): string {
     const pageNo = pageNumber(id);
-    return pageUrl(document, pageNo).toString();
+    return pageUrl(document, pageNo).href;
   }
 </script>
 
-<HighlightGroup {highlights} getHref={pageHref} bind:open>
+<HighlightGroup
+  {highlights}
+  getHref={pageHref}
+  bind:open
+  showAll={Boolean(subscribe)}
+  on:collapseAll
+  on:expandAll
+>
   <svelte:fragment slot="summary">
     {$_("documents.matchingPages", { values: { n: highlights.length } })}
   </svelte:fragment>
   <svelte:fragment let:id let:highlight>
     <Highlight
       title="{$_('documents.pageAbbrev')} {pageNumber(id)}"
+      inlineTitle
       segments={highlight}
     />
   </svelte:fragment>
diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
index 6ea8779a1..1d114d28c 100644
--- a/src/lib/components/documents/ResultsList.svelte
+++ b/src/lib/components/documents/ResultsList.svelte
@@ -18,10 +18,16 @@
   );
 
   export let total: Writable<number> = writable(0);
+
+  // In order for the highlight state to be shared between components, we need to
+  // create a writable store and set it in the context.
+  export const highlightState: Writable<{ allOpen: boolean }> = writable({
+    allOpen: true,
+  });
 </script>
 
 <script lang="ts">
-  import { getContext, onMount } from "svelte";
+  import { getContext, onMount, setContext } from "svelte";
   import { _ } from "svelte-i18n";
   import { Search24 } from "svelte-octicons";
 
@@ -47,6 +53,16 @@
 
   const embed: boolean = getContext("embed");
 
+  setContext("highlightState", highlightState);
+
+  function collapseAll() {
+    highlightState.update((state) => ({ ...state, allOpen: false }));
+  }
+
+  function expandAll() {
+    highlightState.update((state) => ({ ...state, allOpen: true }));
+  }
+
   // track what's visible so we can compare to $selected
   $: $visible = new Map(results.map((d) => [String(d.id), d]));
 
@@ -106,10 +122,13 @@
 </script>
 
 <div class="container" data-sveltekit-preload-data={preload}>
-  <Flex direction="column">
+  <Flex direction="column" gap={0}>
     <slot name="start" />
     {#each results as document (document.id)}
-      <Flex gap={0.625} align="center">
+      <div
+        class="result-row"
+        class:selected={$selectedIds.includes(String(document.id))}
+      >
         {#if !embed}
           <label>
             <span class="sr-only">{$_("documents.select")}</span>
@@ -120,16 +139,24 @@
             />
           </label>
         {/if}
-        <DocumentListItem {document} />
-      </Flex>
-
-      {#if document.highlights}
-        <PageHighlights {document} />
-      {/if}
-
-      {#if document.note_highlights}
-        <NoteHighlights {document} />
-      {/if}
+        <div class="result-content">
+          <DocumentListItem {document} />
+          {#if document.highlights}
+            <PageHighlights
+              {document}
+              on:collapseAll={collapseAll}
+              on:expandAll={expandAll}
+            />
+          {/if}
+          {#if document.note_highlights}
+            <NoteHighlights
+              {document}
+              on:collapseAll={collapseAll}
+              on:expandAll={expandAll}
+            />
+          {/if}
+        </div>
+      </div>
     {:else}
       <Empty icon={Search24}>
         <h2>{$_("noDocuments.noSearchResults")}</h2>
@@ -170,6 +197,24 @@
     padding: 1rem;
     display: flex;
     flex-direction: column;
+    width: 100%;
+  }
+
+  .result-row {
+    width: 100%;
+    display: flex;
+    gap: 0.625rem;
+    align-items: flex-start;
+    padding-bottom: 0.5rem;
+  }
+
+  .result-row.selected {
+    background-color: var(--blue-1, #f0f0f0);
+  }
+
+  .result-content {
+    flex: 1 1 auto;
+    min-width: 0;
   }
 
   label {
@@ -177,9 +222,11 @@
     align-items: center;
     gap: 0.5rem;
     padding-left: 0.5rem;
+    margin-top: 1.25rem;
   }
 
   input[type="checkbox"] {
+    margin: 0;
     height: 1.25rem;
     width: 1.25rem;
   }
diff --git a/src/lib/components/documents/stories/NoteHighlights.stories.svelte b/src/lib/components/documents/stories/NoteHighlights.stories.svelte
index 015198731..a5fb0ede3 100644
--- a/src/lib/components/documents/stories/NoteHighlights.stories.svelte
+++ b/src/lib/components/documents/stories/NoteHighlights.stories.svelte
@@ -1,6 +1,7 @@
 <script context="module" lang="ts">
-  import type { Document } from "$lib/api/types";
   import { Story } from "@storybook/addon-svelte-csf";
+
+  import type { Document } from "$lib/api/types";
   import NoteHighlights from "../NoteHighlights.svelte";
 
   import search from "@/test/fixtures/documents/search-highlight.json";
@@ -17,6 +18,18 @@
   };
 </script>
 
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  setContext(
+    "highlightState",
+    writable({
+      allOpen: true,
+    }),
+  );
+</script>
+
 <Story name="closed">
   <NoteHighlights {document} />
 </Story>
diff --git a/src/lib/components/documents/stories/PageHighlights.stories.svelte b/src/lib/components/documents/stories/PageHighlights.stories.svelte
index 3487685c6..6578e522c 100644
--- a/src/lib/components/documents/stories/PageHighlights.stories.svelte
+++ b/src/lib/components/documents/stories/PageHighlights.stories.svelte
@@ -1,7 +1,7 @@
 <script context="module" lang="ts">
-  import type { Document } from "$lib/api/types";
-
   import { Story } from "@storybook/addon-svelte-csf";
+
+  import type { Document } from "$lib/api/types";
   import PageHighlights from "../PageHighlights.svelte";
 
   import search from "@/test/fixtures/documents/search-highlight.json";
@@ -19,6 +19,18 @@
   };
 </script>
 
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  setContext(
+    "highlightState",
+    writable({
+      allOpen: true,
+    }),
+  );
+</script>
+
 <Story name="closed">
   <PageHighlights {document} />
 </Story>