diff --git a/ui/src/components/track/occurrence-picker.tsx b/ui/src/components/track/occurrence-picker.tsx
index 8987a8683..fa93981d2 100644
--- a/ui/src/components/track/occurrence-picker.tsx
+++ b/ui/src/components/track/occurrence-picker.tsx
@@ -4,6 +4,7 @@ import {
   MERGE_SCOPES,
 } from 'data-services/hooks/occurrences/useMergeCandidates'
 import {
+  addSortColumn,
   getComparisonSides,
   getCostLabel,
   getDistanceLabel,
@@ -206,11 +207,18 @@ export const OccurrencePicker = ({
   const columnSort = sort && 'column' in sort ? sort : undefined
 
   const toggleSort = (column: MergeCandidateSortColumn) =>
-    setSort(
-      columnSort?.column === column
-        ? { column, descending: !columnSort.descending }
-        : { column, descending: DESCENDING_FIRST.includes(column) }
-    )
+    setSort(addSortColumn(sort, column, DESCENDING_FIRST.includes(column)))
+
+  const sortKeys = columnSort
+    ? [columnSort, ...(columnSort.thenBy ?? [])].map((key) => key.column)
+    : []
+  const columnSortLabel = sortKeys.length
+    ? sortKeys
+        .map((column) => translate(COLUMN_LABELS[column]))
+        .reduce((first, next) =>
+          translate(STRING.TRACK_SORT_THEN, { first, next: next.toLowerCase() })
+        )
+    : undefined
 
   const chooseOrder = (value: string) =>
     setSort(value === CUMULATIVE ? { cumulative: true } : undefined)
@@ -250,6 +258,8 @@ export const OccurrencePicker = ({
     const label = COLUMN_LABELS[column]
     const help = COLUMN_HELP[column]
     const active = columnSort?.column === column
+    // Columns clicked earlier break the ties of the last one and are numbered from 2.
+    const tieBreakRank = active ? 0 : sortKeys.indexOf(column) + 1
     const DirectionIcon = !active
       ? ArrowUpDownIcon
       : columnSort.descending
@@ -285,6 +295,16 @@ export const OccurrencePicker = ({
             <span>{translate(label)}</span>
           )}
           <DirectionIcon aria-hidden className="w-3 h-3" />
+          {tieBreakRank > 1 ? (
+            <span
+              className="tabular-nums text-foreground"
+              title={translate(STRING.TRACK_SORT_TIE_BREAK, {
+                rank: tieBreakRank,
+              })}
+            >
+              {tieBreakRank}
+            </span>
+          ) : null}
         </button>
       </th>
     )
@@ -344,7 +364,7 @@ export const OccurrencePicker = ({
                     className="h-8 body-small"
                     value={columnSort.column}
                   >
-                    {translate(COLUMN_LABELS[columnSort.column])}
+                    {columnSortLabel}
                   </Select.Item>
                 ) : null}
               </Select.Content>
diff --git a/ui/src/data-services/models/merge-candidate.test.ts b/ui/src/data-services/models/merge-candidate.test.ts
index 5bc1cddac..ff20d679a 100644
--- a/ui/src/data-services/models/merge-candidate.test.ts
+++ b/ui/src/data-services/models/merge-candidate.test.ts
@@ -9,6 +9,7 @@ import {
   MergeCandidate,
   ServerMergeCandidate,
   sortMergeCandidates,
+  addSortColumn,
 } from './merge-candidate'
 
 const serverCandidate = (
@@ -269,4 +270,77 @@ describe('merge candidate sorting', () => {
       ids(sortMergeCandidates(rows, { column: 'similarity', descending: true }))
     ).toEqual(['3', '2', '1'])
   })
+
+  test('a second column breaks the ties of the column clicked after it', () => {
+    const table = [
+      serverCandidate({
+        id: 1,
+        determination: { id: 1, name: 'Pelosia muscerda' },
+        detections_count: 2,
+      }),
+      serverCandidate({
+        id: 2,
+        determination: { id: 2, name: 'Eilema lurideola' },
+        detections_count: 3,
+      }),
+      serverCandidate({
+        id: 3,
+        determination: { id: 1, name: 'Pelosia muscerda' },
+        detections_count: 9,
+      }),
+    ].map(convertMergeCandidate)
+
+    const byFrames = addSortColumn(undefined, 'frames', true)
+    const bySpeciesThenFrames = addSortColumn(byFrames, 'species', false)
+
+    expect(ids(sortMergeCandidates(table, bySpeciesThenFrames))).toEqual([
+      '2',
+      '3',
+      '1',
+    ])
+    // Without the earlier click the tie keeps the server's order.
+    expect(
+      ids(
+        sortMergeCandidates(table, addSortColumn(undefined, 'species', false))
+      )
+    ).toEqual(['2', '1', '3'])
+  })
+
+  test('clicking the first column again flips it and keeps its tie-breakers', () => {
+    const sort = addSortColumn(
+      addSortColumn(undefined, 'frames', true),
+      'species',
+      false
+    )
+
+    expect(addSortColumn(sort, 'species', false)).toEqual({
+      column: 'species',
+      descending: true,
+      thenBy: [{ column: 'frames', descending: true }],
+    })
+  })
+
+  test('a column appears once and only two earlier columns are kept', () => {
+    let sort = addSortColumn(undefined, 'when', false)
+    sort = addSortColumn(sort, 'distance', false)
+    sort = addSortColumn(sort, 'similarity', true)
+    sort = addSortColumn(sort, 'when', false)
+
+    expect(sort).toEqual({
+      column: 'when',
+      descending: false,
+      thenBy: [
+        { column: 'similarity', descending: true },
+        { column: 'distance', descending: false },
+      ],
+    })
+  })
+
+  test('switching from the cumulative order starts a fresh column sort', () => {
+    expect(addSortColumn({ cumulative: true }, 'frames', true)).toEqual({
+      column: 'frames',
+      descending: true,
+      thenBy: [],
+    })
+  })
 })
diff --git a/ui/src/data-services/models/merge-candidate.ts b/ui/src/data-services/models/merge-candidate.ts
index 59f99b162..22f7817c8 100644
--- a/ui/src/data-services/models/merge-candidate.ts
+++ b/ui/src/data-services/models/merge-candidate.ts
@@ -220,11 +220,54 @@ export type MergeCandidateSortColumn =
   | 'cost'
   | 'match'
 
-/** One column the reviewer clicked, or all three applied in turn. */
+export interface MergeCandidateColumnSort {
+  column: MergeCandidateSortColumn
+  descending: boolean
+}
+
+/**
+ * The column the reviewer clicked last, with the ones clicked before it breaking its
+ * ties, or time, distance and similarity applied in turn.
+ */
 export type MergeCandidateSort =
-  | { column: MergeCandidateSortColumn; descending: boolean }
+  | (MergeCandidateColumnSort & { thenBy?: MergeCandidateColumnSort[] })
   | { cumulative: true }
 
+// Two earlier clicks are enough to say "species, then frames, then time".
+const MAX_THEN_BY = 2
+
+/**
+ * The order after a click on a column header: the same column flips its direction,
+ * another becomes the first key and the previous keys break its ties, as in a
+ * spreadsheet sorted one column at a time.
+ */
+export const addSortColumn = (
+  sort: MergeCandidateSort | undefined,
+  column: MergeCandidateSortColumn,
+  descendingFirst: boolean
+): MergeCandidateSort => {
+  const current = sort && 'column' in sort ? sort : undefined
+
+  if (current?.column === column) {
+    return { ...current, descending: !current.descending }
+  }
+
+  const previous = current
+    ? [
+        { column: current.column, descending: current.descending },
+        ...(current.thenBy ?? []),
+      ]
+    : []
+
+  return {
+    column,
+    descending: descendingFirst,
+    thenBy: previous
+      .filter((key) => key.column !== column)
+      .slice(0, MAX_THEN_BY),
+  }
+}
+
 const sortValue = (
   candidate: MergeCandidate,
   column: MergeCandidateSortColumn
@@ -299,11 +342,24 @@ export const sortMergeCandidates = (
     })
   }
 
-  return [...candidates].sort((a, b) =>
-    compare(
-      sortValue(a, sort.column),
-      sortValue(b, sort.column),
-      sort.descending
-    )
-  )
+  const keys = [
+    { column: sort.column, descending: sort.descending },
+    ...(sort.thenBy ?? []),
+  ]
+
+  return [...candidates].sort((a, b) => {
+    for (const key of keys) {
+      const result = compare(
+        sortValue(a, key.column),
+        sortValue(b, key.column),
+        key.descending
+      )
+
+      if (result !== 0) {
+        return result
+      }
+    }
+
+    return 0
+  })
 }
diff --git a/ui/src/data-services/models/occurrence-details.test.ts b/ui/src/data-services/models/occurrence-details.test.ts
index 4e6dc9cc2..a401abcbc 100644
--- a/ui/src/data-services/models/occurrence-details.test.ts
+++ b/ui/src/data-services/models/occurrence-details.test.ts
@@ -1,9 +1,12 @@
 import {
+  FrameName,
+  formatFrameNames,
   frameHasVector,
   getFrameClassification,
   OccurrenceDetails,
   ServerFrameClassification,
 } from './occurrence-details'
+import { Taxon } from './taxa'
 
 const serverTaxon = (id: string, name: string, rank = 'SPECIES') => ({
   cover_image_url: null,
@@ -88,10 +91,32 @@ describe('frame feature vectors', () => {
   })
 })
 
+describe('frame names', () => {
+  test('reads as one line of names and counts, unclassified frames included', () => {
+    const names: FrameName[] = [
+      { frames: 2, taxon: new Taxon(NOCTUA) },
+      { frames: 1 },
+      { frames: 1, taxon: new Taxon(XESTIA) },
+    ]
+
+    expect(formatFrameNames(names)).toBe(
+      'Noctua pronuba ×2, No classification ×1, Xestia c-nigrum ×1'
+    )
+    expect(formatFrameNames(names, 1)).toBe('Noctua pronuba ×2, 2 more')
+    expect(formatFrameNames([])).toBe('')
+  })
+})
+
 describe('occurrence details', () => {
   const detection = (id: number, classifications: unknown[]) => ({
     bbox: [0, 0, 10, 20],
-    capture: { height: 100, id: id + 100, width: 100 },
+    capture: {
+      height: 100,
+      id: id + 100,
+      // Only the first frame's capture has an image stored.
+      url: id === 1 ? 'https://example.com/capture-101.jpg' : null,
+      width: 100,
+    },
     classifications,
     frame_index: id - 1,
     height: null,
@@ -163,6 +188,13 @@ describe('occurrence details', () => {
     })
   })
 
+  test('each frame links to the full capture it was cropped from, when there is one', () => {
+    const [first, second] = occurrence.firstFramesPage
+
+    expect(first.captureUrl).toBe('https://example.com/capture-101.jpg')
+    expect(second.captureUrl).toBeUndefined()
+  })
+
   test('the track ends and label counts cover every frame, not just the first page', () => {
     expect(occurrence.lastFrame).toMatchObject({
       captureId: '140',
diff --git a/ui/src/data-services/models/occurrence-details.ts b/ui/src/data-services/models/occurrence-details.ts
index f833ac2ab..07a1d4106 100644
--- a/ui/src/data-services/models/occurrence-details.ts
+++ b/ui/src/data-services/models/occurrence-details.ts
@@ -89,7 +89,12 @@ export interface TrackFrame {
 
 export interface ServerOccurrenceFrame {
   bbox: number[] | null
-  capture: { id: number; height: number | null; width: number | null } | null
+  capture: {
+    id: number
+    height: number | null
+    url?: string | null
+    width: number | null
+  } | null
   classifications: ServerFrameClassification[] | null
   frame_index: number
   height: number | null
@@ -102,6 +107,8 @@ export interface ServerOccurrenceFrame {
 /** One detection of an occurrence, as a frame of the track strip. */
 export interface OccurrenceFrame {
   captureId?: string
+  /** The full capture the crop was cut from, when its image is stored. */
+  captureUrl?: string
   frameIndex: number
   frameLabel: FrameLabel
   hasVector?: boolean
@@ -198,6 +205,24 @@ const timeLabelOf = (timestamp?: string | null) =>
       })
     : undefined
 
+/** "Pelosia muscerda ×7, No classification ×2", naming at most `limit` labels. */
+export const formatFrameNames = (names: FrameName[], limit = 4): string => {
+  const shown = names.slice(0, limit).map(({ frames, taxon }) =>
+    translate(STRING.TRACK_FRAME_NAME_COUNT, {
+      count: frames,
+      name: taxon?.name ?? translate(STRING.TRACK_FRAME_NO_CLASSIFICATION),
+    })
+  )
+
+  if (names.length > limit) {
+    shown.push(
+      translate(STRING.TRACK_FRAME_NAMES_MORE, { count: names.length - limit })
+    )
+  }
+
+  return shown.join(', ')
+}
+
 /** Width and height of a `[x1, y1, x2, y2]` box, 0 when the box is malformed. */
 const bboxSize = (bbox?: number[]): [number, number] =>
   bbox?.length === 4
@@ -217,6 +242,7 @@ export const convertOccurrenceFrame = (
 
   return {
     captureId: frame.capture ? `${frame.capture.id}` : undefined,
+    captureUrl: frame.capture?.url || undefined,
     frameIndex: frame.frame_index,
     frameLabel,
     hasVector: frameHasVector(frame.classifications),
diff --git a/ui/src/pages/occurrence-details/track/frame-caption.tsx b/ui/src/pages/occurrence-details/track/frame-caption.tsx
index a3cd17cb4..744e775b7 100644
--- a/ui/src/pages/occurrence-details/track/frame-caption.tsx
+++ b/ui/src/pages/occurrence-details/track/frame-caption.tsx
@@ -1,7 +1,7 @@
 import { isGenusOrBelow } from 'components/taxon-details/utils'
 import { FrameLabel } from 'data-services/models/occurrence-details'
 import { Taxon } from 'data-services/models/taxa'
-import { BanIcon } from 'lucide-react'
+import { BanIcon, ImageIcon } from 'lucide-react'
 import { cn } from 'nova-ui-kit/utils'
 import { STRING, translate } from 'utils/language'
 
@@ -27,11 +27,14 @@ export const FrameTaxonName = ({ taxon }: { taxon?: Taxon }) => {
  * `hasVector` is undefined when the payload did not say, and only a definite no is marked.
  */
 export const FrameCaption = ({
+  captureUrl,
   detectionId,
   hasVector,
   label,
   timeLabel,
 }: {
+  /** The whole capture this frame was cropped from, opened at full size. */
+  captureUrl?: string
   detectionId: string
   hasVector?: boolean
   label: FrameLabel
@@ -57,7 +60,21 @@ export const FrameCaption = ({
           </span>
         ) : null}
       </div>
-      <span>{timeLabel}</span>
+      <div className="flex items-center gap-1">
+        <span>{timeLabel}</span>
+        {captureUrl ? (
+          <a
+            aria-label={translate(STRING.TRACK_OPEN_FULL_CAPTURE)}
+            className="flex items-center hover:text-foreground"
+            href={captureUrl}
+            rel="noreferrer"
+            target="_blank"
+            title={translate(STRING.TRACK_OPEN_FULL_CAPTURE)}
+          >
+            <ImageIcon aria-hidden className="w-3 h-3" />
+          </a>
+        ) : null}
+      </div>
     </div>
     <span className="font-medium">
       <FrameTaxonName taxon={label.taxon} />
diff --git a/ui/src/pages/occurrence-details/track/frame-strip.tsx b/ui/src/pages/occurrence-details/track/frame-strip.tsx
index 754b1bf68..25f564a8b 100644
--- a/ui/src/pages/occurrence-details/track/frame-strip.tsx
+++ b/ui/src/pages/occurrence-details/track/frame-strip.tsx
@@ -177,6 +177,7 @@ export const FrameStrip = ({
       caption={
         trackingEnabled ? (
           <FrameCaption
+            captureUrl={frame.captureUrl}
             detectionId={frame.id}
             hasVector={frame.hasVector}
             label={frame.frameLabel}
diff --git a/ui/src/pages/session-details/capture/capture-ghost-trail.tsx b/ui/src/pages/session-details/capture/capture-ghost-trail.tsx
index e8efeba2f..57518c84b 100644
--- a/ui/src/pages/session-details/capture/capture-ghost-trail.tsx
+++ b/ui/src/pages/session-details/capture/capture-ghost-trail.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import { getOffsetLabel } from 'data-services/models/merge-candidate'
 import { Tooltip } from 'nova-ui-kit'
 import { useState } from 'react'
@@ -5,6 +6,7 @@ import { STRING, translate } from 'utils/language'
 import styles from './capture.module.scss'
 import { getGhostFrame } from './ghost-frame'
 import { Ghost, GHOST_COLOR, MAX_GHOST_BOXES, Trail } from './ghost-trail'
+import { PANEL_LAYER } from './panel-layer'
 
 // A hovered frame comes forward of the other path frames and is drawn in full, which
 // is how one is picked out of a stack. It stays under the live boxes all the same.
@@ -132,18 +134,24 @@ export const CaptureGhostTrail = ({
                     ) : null}
                   </button>
                 </Tooltip.Trigger>
-                <Tooltip.Content
-                  className="z-[1] p-3 pointer-events-none"
-                  collisionPadding={8}
-                  side="bottom"
-                >
-                  <GhostReading
-                    cropMissing={cropMissing}
-                    ghost={ghost}
-                    time={frame.time}
-                    total={trail.total}
-                  />
-                </Tooltip.Content>
+                <Tooltip.Portal>
+                  <Tooltip.Content
+                    className={classNames(
+                      'p-3 pointer-events-none',
+                      PANEL_LAYER
+                    )}
+                    collisionPadding={8}
+                    hideWhenDetached
+                    side="bottom"
+                  >
+                    <GhostReading
+                      cropMissing={cropMissing}
+                      ghost={ghost}
+                      time={frame.time}
+                      total={trail.total}
+                    />
+                  </Tooltip.Content>
+                </Tooltip.Portal>
               </Tooltip.Root>
               {gap ? (
                 <span
diff --git a/ui/src/pages/session-details/capture/capture.module.scss b/ui/src/pages/session-details/capture/capture.module.scss
index f0f9bd15d..594b0f1cd 100644
--- a/ui/src/pages/session-details/capture/capture.module.scss
+++ b/ui/src/pages/session-details/capture/capture.module.scss
@@ -128,3 +128,9 @@
     outline-offset: 1px;
   }
 }
+
+// Radix fades a panel out when its box is panned out of view; a faded panel must not
+// keep catching clicks meant for the capture under it.
+.panel[style*='opacity: 0'] {
+  pointer-events: none;
+}
diff --git a/ui/src/pages/session-details/capture/capture.tsx b/ui/src/pages/session-details/capture/capture.tsx
index 69d35521c..c7fcaa80c 100644
--- a/ui/src/pages/session-details/capture/capture.tsx
+++ b/ui/src/pages/session-details/capture/capture.tsx
@@ -34,6 +34,7 @@ import { ExtendClick, getExtendClickHint } from './extend-click'
 import { ExtendTrackDialog, ExtendTrackState } from './extend-track'
 import { buildTrail } from './ghost-trail'
 import { OccurrenceToolbar } from './occurrence-toolbar'
+import { PANEL_LAYER } from './panel-layer'
 import {
   SessionPathStatus,
   SessionTrackEdit,
@@ -284,7 +285,11 @@ export const Capture = ({
     >
       <TransformWrapper
         maxScale={maxScale}
-        onTransform={(_, state) => setScale(state.scale)}
+        onTransform={(ref, state) => {
+          setScale(state.scale)
+          // The box panels live in a portal and reposition on scroll, not on transforms.
+          ref.instance.wrapperComponent?.dispatchEvent(new Event('scroll'))
+        }}
         ref={transformRef}
       >
         <TransformComponent
@@ -346,6 +351,7 @@ export const Capture = ({
               isLoadingPath={isLoadingPath}
               matches={matches}
               onHidePath={() => setPathOccurrenceId(undefined)}
+              onSelectCapture={setActiveCaptureId}
               onShowPath={(occurrenceId) =>
                 occurrenceId === shownPathId
                   ? refetchPath()
@@ -493,6 +499,7 @@ const CaptureDetections = ({
   isLoadingPath,
   matches,
   onHidePath,
+  onSelectCapture,
   onShowPath,
   onTogglePathCrops,
   path,
@@ -510,6 +517,7 @@ const CaptureDetections = ({
   isLoadingPath?: boolean
   matches?: Record<string, CaptureMatch>
   onHidePath: () => void
+  onSelectCapture: (captureId: string) => void
   onShowPath: (occurrenceId: string) => void
   /** Switch the path's boxes between the moth's own pixels and an outline. */
   onTogglePathCrops?: () => void
@@ -522,9 +530,6 @@ const CaptureDetections = ({
   shownFrames?: number
   trackingEnabled?: boolean
 }) => {
-  // Held in state, not a ref: Radix needs the element itself to keep a panel inside
-  // the image, and a ref assignment does not re-render to hand it over.
-  const [container, setContainer] = useState<HTMLDivElement | null>(null)
   const [activeOccurrence, setActiveOccurrence] = useState<string>()
   const [trackEdit, setTrackEdit] = useState<SessionTrackEdit>()
   // Selected occurrences whose panel was closed with Escape; they stay selected.
@@ -653,7 +658,7 @@ const CaptureDetections = ({
 
   return (
     <>
-      <div className={styles.detections} ref={setContainer}>
+      <div className={styles.detections}>
         {Object.entries(boxStyles).map(([id, style]) => {
           const detection = detections.find((d) => d.id === id)
 
@@ -729,54 +734,57 @@ const CaptureDetections = ({
                   open={hoveredBox === detection.id || (plainLabel && isActive)}
                 >
                   <Tooltip.Trigger asChild>{box}</Tooltip.Trigger>
-                  <Tooltip.Content
-                    className={classNames(
-                      'z-[1]',
-                      plainLabel
-                        ? 'pointer-events-auto'
-                        : 'pointer-events-none',
-                      detailsHidden ? 'px-3 py-2' : 'p-3'
-                    )}
-                    collisionBoundary={container}
-                    collisionPadding={8}
-                    onMouseEnter={() => hoverBox(detection.id)}
-                    onMouseLeave={() => unhoverBox(detection.id)}
-                    side="bottom"
-                  >
-                    {detailsHidden ? (
-                      <CaptureMatchTooltip
-                        click={click}
-                        detection={detection}
-                        detections={detections}
-                        isTrackFrame={isExtended}
-                        match={match}
-                      />
-                    ) : (
-                      <div className="flex flex-col items-start gap-1">
-                        {plainLabel ? (
-                          <button
-                            className="body-base text-primary font-medium"
-                            disabled={!detection.occurrenceId}
-                            onClick={() =>
-                              setActiveOccurrence(detection.occurrenceId)
-                            }
-                            type="button"
-                          >
-                            {detection.label}
-                          </button>
-                        ) : (
-                          <span className="body-base font-medium">
-                            {detection.label}
-                          </span>
-                        )}
-                        <DeterminationScore
-                          score={detection.score}
-                          scoreLabel={detection.scoreLabel}
-                          verified={detection.score === 1}
+                  <Tooltip.Portal>
+                    <Tooltip.Content
+                      className={classNames(
+                        PANEL_LAYER,
+                        styles.panel,
+                        plainLabel
+                          ? 'pointer-events-auto'
+                          : 'pointer-events-none',
+                        detailsHidden ? 'px-3 py-2' : 'p-3'
+                      )}
+                      collisionPadding={8}
+                      hideWhenDetached
+                      onMouseEnter={() => hoverBox(detection.id)}
+                      onMouseLeave={() => unhoverBox(detection.id)}
+                      side="bottom"
+                    >
+                      {detailsHidden ? (
+                        <CaptureMatchTooltip
+                          click={click}
+                          detection={detection}
+                          detections={detections}
+                          isTrackFrame={isExtended}
+                          match={match}
                         />
-                      </div>
-                    )}
-                  </Tooltip.Content>
+                      ) : (
+                        <div className="flex flex-col items-start gap-1">
+                          {plainLabel ? (
+                            <button
+                              className="body-base text-primary font-medium"
+                              disabled={!detection.occurrenceId}
+                              onClick={() =>
+                                setActiveOccurrence(detection.occurrenceId)
+                              }
+                              type="button"
+                            >
+                              {detection.label}
+                            </button>
+                          ) : (
+                            <span className="body-base font-medium">
+                              {detection.label}
+                            </span>
+                          )}
+                          <DeterminationScore
+                            score={detection.score}
+                            scoreLabel={detection.scoreLabel}
+                            verified={detection.score === 1}
+                          />
+                        </div>
+                      )}
+                    </Tooltip.Content>
+                  </Tooltip.Portal>
                 </Tooltip.Root>
               </Tooltip.Provider>
             )
@@ -785,95 +793,102 @@ const CaptureDetections = ({
           return (
             <Popover.Root key={detection.id} open={panelOpen}>
               <Popover.Trigger asChild>{box}</Popover.Trigger>
-              <Popover.Content
-                align="center"
-                // The layer holding the boxes is transparent to the pointer so a path
-                // frame below it stays reachable, so this panel, which has links in
-                // it, has to take clicks back.
-                className="w-auto p-3 z-[1] body-small pointer-events-auto"
-                collisionBoundary={container}
-                collisionPadding={8}
-                onEscapeKeyDown={() => {
-                  if (isActive) {
-                    setDismissed(detection.occurrenceId as string, true)
-                  } else {
-                    setHoveredBox(undefined)
-                  }
-                }}
-                onMouseEnter={() => hoverBox(detection.id)}
-                onMouseLeave={() => unhoverBox(detection.id)}
-                // The panel follows a selection or a hover rather than a deliberate
-                // open, so it must not pull focus off the capture.
-                onOpenAutoFocus={(event) => event.preventDefault()}
-                side="bottom"
-              >
-                <OccurrenceToolbar
-                  detectionId={detection.id}
-                  isExtended={isExtended}
-                  isLoadingPath={
-                    isLoadingPath && pathOccurrenceId === detection.occurrenceId
-                  }
-                  occurrence={{
-                    frameCount: detection.frameCount,
-                    groupingVerified: detection.groupingVerified,
-                    groupingVerifiedAt: detection.groupingVerifiedAt,
-                    groupingVerifiedBy: detection.groupingVerifiedBy,
-                    id: detection.occurrenceId,
-                    label: detection.label,
-                    score: detection.score,
-                    scoreLabel: detection.scoreLabel,
+              <Popover.Portal>
+                <Popover.Content
+                  align="center"
+                  className={classNames(
+                    'w-auto p-3 body-small overflow-y-auto max-h-[var(--radix-popover-content-available-height)]',
+                    PANEL_LAYER,
+                    styles.panel
+                  )}
+                  collisionPadding={8}
+                  hideWhenDetached
+                  onEscapeKeyDown={() => {
+                    if (isActive) {
+                      setDismissed(detection.occurrenceId as string, true)
+                    } else {
+                      setHoveredBox(undefined)
+                    }
                   }}
-                  onExtend={() =>
-                    extend.start(detection.occurrenceId as string)
-                  }
-                  onDismiss={() =>
-                    setDismissed(detection.occurrenceId as string, true)
-                  }
-                  onHidePath={onHidePath}
-                  onTogglePathCrops={onTogglePathCrops}
-                  showPathCrops={showPathCrops}
-                  onMerge={() =>
-                    setTrackEdit({
-                      action: 'merge',
-                      detectionId: detection.id,
-                      occurrenceId: detection.occurrenceId as string,
-                    })
-                  }
-                  onOpenOccurrence={() =>
-                    setActiveOccurrence(detection.occurrenceId)
-                  }
-                  onShowPath={() => showPath(detection.occurrenceId as string)}
-                  onSplit={() =>
-                    setTrackEdit({
-                      action: 'split',
-                      detectionId: detection.id,
-                      occurrenceId: detection.occurrenceId as string,
-                      ...describeSplit(detection.id),
-                    })
-                  }
-                  onVerify={() =>
-                    setTrackEdit({
-                      action: 'verify',
-                      detectionId: detection.id,
-                      occurrenceId: detection.occurrenceId as string,
-                      verified: detection.groupingVerified,
-                    })
-                  }
-                  path={
-                    pathOccurrenceId === detection.occurrenceId
-                      ? path
-                      : undefined
-                  }
-                  pathError={
-                    pathError && pathOccurrenceId === detection.occurrenceId
-                  }
-                  shownFrames={
-                    pathOccurrenceId === detection.occurrenceId
-                      ? shownFrames
-                      : undefined
-                  }
-                />
-              </Popover.Content>
+                  onMouseEnter={() => hoverBox(detection.id)}
+                  onMouseLeave={() => unhoverBox(detection.id)}
+                  // The panel follows a selection or a hover rather than a deliberate
+                  // open, so it must not pull focus off the capture.
+                  onOpenAutoFocus={(event) => event.preventDefault()}
+                  side="bottom"
+                >
+                  <OccurrenceToolbar
+                    detectionId={detection.id}
+                    isExtended={isExtended}
+                    isLoadingPath={
+                      isLoadingPath &&
+                      pathOccurrenceId === detection.occurrenceId
+                    }
+                    occurrence={{
+                      frameCount: detection.frameCount,
+                      groupingVerified: detection.groupingVerified,
+                      groupingVerifiedAt: detection.groupingVerifiedAt,
+                      groupingVerifiedBy: detection.groupingVerifiedBy,
+                      id: detection.occurrenceId,
+                      label: detection.label,
+                      score: detection.score,
+                      scoreLabel: detection.scoreLabel,
+                    }}
+                    onExtend={() =>
+                      extend.start(detection.occurrenceId as string)
+                    }
+                    onDismiss={() =>
+                      setDismissed(detection.occurrenceId as string, true)
+                    }
+                    onHidePath={onHidePath}
+                    onTogglePathCrops={onTogglePathCrops}
+                    showPathCrops={showPathCrops}
+                    onMerge={() =>
+                      setTrackEdit({
+                        action: 'merge',
+                        detectionId: detection.id,
+                        occurrenceId: detection.occurrenceId as string,
+                      })
+                    }
+                    onOpenOccurrence={() =>
+                      setActiveOccurrence(detection.occurrenceId)
+                    }
+                    onSelectCapture={onSelectCapture}
+                    onShowPath={() =>
+                      showPath(detection.occurrenceId as string)
+                    }
+                    onSplit={() =>
+                      setTrackEdit({
+                        action: 'split',
+                        detectionId: detection.id,
+                        occurrenceId: detection.occurrenceId as string,
+                        ...describeSplit(detection.id),
+                      })
+                    }
+                    onVerify={() =>
+                      setTrackEdit({
+                        action: 'verify',
+                        detectionId: detection.id,
+                        occurrenceId: detection.occurrenceId as string,
+                        verified: detection.groupingVerified,
+                      })
+                    }
+                    path={
+                      pathOccurrenceId === detection.occurrenceId
+                        ? path
+                        : undefined
+                    }
+                    pathError={
+                      pathError && pathOccurrenceId === detection.occurrenceId
+                    }
+                    shownFrames={
+                      pathOccurrenceId === detection.occurrenceId
+                        ? shownFrames
+                        : undefined
+                    }
+                  />
+                </Popover.Content>
+              </Popover.Portal>
             </Popover.Root>
           )
         })}
diff --git a/ui/src/pages/session-details/capture/occurrence-toolbar.tsx b/ui/src/pages/session-details/capture/occurrence-toolbar.tsx
index 974a2068c..8e732d960 100644
--- a/ui/src/pages/session-details/capture/occurrence-toolbar.tsx
+++ b/ui/src/pages/session-details/capture/occurrence-toolbar.tsx
@@ -1,6 +1,7 @@
 import { CopyLinkButton } from 'components/copy-link-button/copy-link-button'
 import { DeterminationScore } from 'components/determination-score'
 import { useOccurrenceDetails } from 'data-services/hooks/occurrences/useOccurrenceDetails'
+import { formatFrameNames } from 'data-services/models/occurrence-details'
 import { PathFrame } from 'data-services/models/occurrence-path'
 import { Loader2Icon, RouteIcon, XIcon } from 'lucide-react'
 import { Button } from 'nova-ui-kit'
@@ -10,6 +11,7 @@ import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/
 import { getFormatedTimeString } from 'utils/date/getFormatedTimeString/getFormatedTimeString'
 import { STRING, translate } from 'utils/language'
 import { buildDetectionLink } from '../hooks/useActiveDetection'
+import { getPathEnds } from './track-navigation'
 
 export interface ToolbarOccurrence {
   frameCount: number
@@ -63,6 +65,7 @@ export const OccurrenceToolbar = ({
   onHidePath,
   onMerge,
   onOpenOccurrence,
+  onSelectCapture,
   onShowPath,
   onSplit,
   onTogglePathCrops,
@@ -84,6 +87,8 @@ export const OccurrenceToolbar = ({
   onHidePath: () => void
   onMerge: () => void
   onOpenOccurrence: () => void
+  /** Steps the viewer to another capture, keeping this track selected. */
+  onSelectCapture?: (captureId: string) => void
   onShowPath: () => void
   onSplit: () => void
   /** Switch the path's boxes between the moth's own pixels and an outline. */
@@ -107,6 +112,11 @@ export const OccurrenceToolbar = ({
   const { canRestructure, canVerify } = getTrackEditRights(
     details?.userPermissions
   )
+  // The classifier's own name for each frame, which a merge or a confirmed
+  // identification does not change: the evidence behind the track's name.
+  const frameNames = details?.frameNames.length
+    ? formatFrameNames(details.frameNames)
+    : undefined
 
   // Matched on the detection rather than the capture: one capture can hold two frames
   // of the same track, and they are different positions along it.
@@ -122,6 +132,10 @@ export const OccurrenceToolbar = ({
         })
       : undefined
 
+  const ends = pathShown ? getPathEnds(path) : undefined
+  const currentCaptureId =
+    frameIndex !== -1 ? path?.[frameIndex].captureId : undefined
+
   const subtitle = () => {
     if (!pathShown) {
       return singleFrame
@@ -164,6 +178,24 @@ export const OccurrenceToolbar = ({
         </span>
       </Button>
     ) : null,
+    ends && onSelectCapture && path && path.length > 1 ? (
+      <div className="flex items-center gap-1" key="ends">
+        {[
+          { frame: ends.first, label: STRING.TRACK_GO_FIRST_FRAME },
+          { frame: ends.last, label: STRING.TRACK_GO_LAST_FRAME },
+        ].map(({ frame, label }) => (
+          <Button
+            disabled={frame.captureId === currentCaptureId}
+            key={label}
+            onClick={() => onSelectCapture(frame.captureId)}
+            size="small"
+            variant="ghost"
+          >
+            <span>{translate(label)}</span>
+          </Button>
+        ))}
+      </div>
+    ) : null,
     // A single frame has no path to draw, and the subtitle says so.
     !pathShown && !singleFrame ? (
       <Button
@@ -241,6 +273,13 @@ export const OccurrenceToolbar = ({
       </div>
 
       <div className="flex flex-col gap-0.5 body-small text-muted-foreground">
+        {frameNames ? (
+          <span>
+            {translate(STRING.TRACK_SUMMARY_FRAME_NAMES)}:{' '}
+            <span className="text-foreground">{frameNames}</span>
+          </span>
+        ) : null}
+
         {framePosition ? <span>{framePosition}</span> : null}
 
         {shownFrames !== undefined && path && shownFrames < path.length ? (
diff --git a/ui/src/pages/session-details/capture/panel-layer.ts b/ui/src/pages/session-details/capture/panel-layer.ts
new file mode 100644
index 000000000..166fa053e
--- /dev/null
+++ b/ui/src/pages/session-details/capture/panel-layer.ts
@@ -0,0 +1,4 @@
+// Panels are portalled out of the zoomed image so they keep their size and can flip
+// into the page when a box sits near the image's edge. They sit above the page but
+// below the app header (z-index 2) and dialogs, so a panel never covers the header.
+export const PANEL_LAYER = 'z-[1]'
diff --git a/ui/src/pages/session-details/capture/track-navigation.test.ts b/ui/src/pages/session-details/capture/track-navigation.test.ts
index 248e8f228..52337ef8b 100644
--- a/ui/src/pages/session-details/capture/track-navigation.test.ts
+++ b/ui/src/pages/session-details/capture/track-navigation.test.ts
@@ -2,6 +2,7 @@ import { TrackFrame } from 'data-services/models/occurrence-details'
 import {
   getMergedTrackExtent,
   getNearestPathFrame,
+  getPathEnds,
   getTrackNavigation,
 } from './track-navigation'
 
@@ -132,3 +133,33 @@ describe('getNearestPathFrame', () => {
     ).toBe('undated')
   })
 })
+
+describe('getPathEnds', () => {
+  const pathFrame = (captureId: string, timestamp: Date | null) => ({
+    bbox: [0, 0, 1, 1],
+    captureHeight: null,
+    captureId,
+    captureWidth: null,
+    detectionId: `d-${captureId}`,
+    timestamp,
+  })
+
+  test('the ends go by time, whatever order the path arrives in', () => {
+    const { first, last } = getPathEnds([
+      pathFrame('middle', at(20)),
+      pathFrame('latest', at(30)),
+      pathFrame('earliest', at(10)),
+    ])
+
+    expect([first?.captureId, last?.captureId]).toEqual(['earliest', 'latest'])
+  })
+
+  test('an undated frame never becomes the first frame', () => {
+    const { first } = getPathEnds([
+      pathFrame('undated', null),
+      pathFrame('dated', at(10)),
+    ])
+
+    expect(first?.captureId).toBe('dated')
+  })
+})
diff --git a/ui/src/pages/session-details/capture/track-navigation.ts b/ui/src/pages/session-details/capture/track-navigation.ts
index c390b186c..76b7f6088 100644
--- a/ui/src/pages/session-details/capture/track-navigation.ts
+++ b/ui/src/pages/session-details/capture/track-navigation.ts
@@ -143,3 +143,11 @@ export const getNearestPathFrame = (frames: PathFrame[], date?: Date) => {
     distance(frame) < distance(nearest) ? frame : nearest
   )
 }
+
+/** A path's earliest and latest frames; frames without a timestamp count as latest. */
+export const getPathEnds = (frames: PathFrame[]) => {
+  const time = (frame: PathFrame) => frame.timestamp?.getTime() ?? Infinity
+  const ordered = [...frames].sort((f1, f2) => time(f1) - time(f2))
+
+  return { first: ordered[0], last: ordered[ordered.length - 1] }
+}
diff --git a/ui/src/pages/session-details/session-details.tsx b/ui/src/pages/session-details/session-details.tsx
index 50fd73b72..d5b0b379a 100644
--- a/ui/src/pages/session-details/session-details.tsx
+++ b/ui/src/pages/session-details/session-details.tsx
@@ -24,6 +24,7 @@ import {
   useProjectFeature,
 } from 'utils/project-features/useProjectFeature'
 import { useUser } from 'utils/user/userContext'
+import { useUserPreferences } from 'utils/userPreferences/userPreferencesContext'
 import { ActivityPlot } from './activity-plot/lazy-activity-plot'
 import { OccurrenceTimelineMarkers } from './activity-plot/occurrence-timeline-markers'
 import { CaptureInfo } from './capture-info'
@@ -94,11 +95,22 @@ const Content = ({ session }: { session: SessionDetails }) => {
   // Settings
   const [poll, setPoll] = useState(false)
   const transformRef = useRef<ReactZoomPanPinchRef>(null)
-  const [settings, setSettings] = useState<ViewSettingsValues>({
+  const [viewSettings, setViewSettings] = useState({
     defaultFilters: true,
     showDetections: true,
-    showPathCrops: true,
   })
+  // Kept per browser: a reviewer who wants the crops along a path wants them every visit.
+  const { userPreferences, setUserPreferences } = useUserPreferences()
+  const settings: ViewSettingsValues = {
+    ...viewSettings,
+    showPathCrops: !!userPreferences.showPathCrops,
+  }
+  const setSettings = ({ showPathCrops, ...rest }: ViewSettingsValues) => {
+    setViewSettings(rest)
+    if (showPathCrops !== settings.showPathCrops) {
+      setUserPreferences({ ...userPreferences, showPathCrops })
+    }
+  }
 
   // Data
   const { projectId } = useParams()
@@ -210,10 +222,10 @@ const Content = ({ session }: { session: SessionDetails }) => {
               height={activeCapture?.height ?? session.firstCapture.height}
               trackingEnabled={trackingEnabled}
               onTogglePathCrops={() =>
-                setSettings((current) => ({
-                  ...current,
-                  showPathCrops: !current.showPathCrops,
-                }))
+                setSettings({
+                  ...settings,
+                  showPathCrops: !settings.showPathCrops,
+                })
               }
               showDetections={settings.showDetections}
               showPathCrops={settings.showPathCrops}
diff --git a/ui/src/utils/language.ts b/ui/src/utils/language.ts
index 2b3f6908a..95d04c792 100644
--- a/ui/src/utils/language.ts
+++ b/ui/src/utils/language.ts
@@ -459,6 +459,9 @@ export enum STRING {
   TRACK_FRAME_THIS_CAPTURE,
   TRACK_HIDE_PANEL,
   TRACK_HIDE_PATH,
+  TRACK_GO_FIRST_FRAME,
+  TRACK_OPEN_FULL_CAPTURE,
+  TRACK_GO_LAST_FRAME,
   TRACK_JUMP_FIRST_FRAME,
   TRACK_JUMP_LAST_FRAME,
   TRACK_JUMP_ONLY_FRAME,
@@ -541,6 +544,8 @@ export enum STRING {
   TRACK_SORT_BY,
   TRACK_SORT_CUMULATIVE,
   TRACK_SORT_LABEL,
+  TRACK_SORT_THEN,
+  TRACK_SORT_TIE_BREAK,
   TRACK_SPLIT_HERE,
   TRACK_SPLIT_RESULT,
   TRACK_STAT_DISTINCT_TAXA,
@@ -554,6 +559,8 @@ export enum STRING {
   TRACK_SUMMARY_FRAMES,
   TRACK_SUMMARY_FRAMES_WITH_VECTORS,
   TRACK_SUMMARY_FRAME_NAMES,
+  TRACK_FRAME_NAME_COUNT,
+  TRACK_FRAME_NAMES_MORE,
   TRACK_SUMMARY_ID_AGREEMENT,
   TRACK_SUMMARY_SCORE_RANGE,
   TRACK_SUMMARY_TITLE,
@@ -1125,6 +1132,9 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.TRACK_FRAME_THIS_CAPTURE]: 'On the capture you are viewing',
   [STRING.TRACK_HIDE_PANEL]: 'Hide this panel',
   [STRING.TRACK_HIDE_PATH]: 'Hide path',
+  [STRING.TRACK_GO_FIRST_FRAME]: 'First frame',
+  [STRING.TRACK_OPEN_FULL_CAPTURE]: 'Open the full capture',
+  [STRING.TRACK_GO_LAST_FRAME]: 'Last frame',
   [STRING.TRACK_JUMP_FIRST_FRAME]: 'First frame in session',
   [STRING.TRACK_JUMP_LAST_FRAME]: 'Last frame in session',
   [STRING.TRACK_JUMP_ONLY_FRAME]: 'Open in session',
@@ -1228,6 +1238,9 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.TRACK_SORT_BY]: 'Sort by {{column}}',
   [STRING.TRACK_SORT_CUMULATIVE]: 'Time, then distance, then similarity',
   [STRING.TRACK_SORT_LABEL]: 'Order candidates',
+  [STRING.TRACK_SORT_THEN]: '{{first}}, then {{next}}',
+  [STRING.TRACK_SORT_TIE_BREAK]:
+    'Sort key {{rank}}: breaks ties left by the keys before it',
   [STRING.TRACK_SPLIT_HERE]: 'Split here',
   [STRING.TRACK_SPLIT_RESULT]:
     'Split. {{count}} frames moved to occurrence #{{id}}.',
@@ -1243,6 +1256,8 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.TRACK_SUMMARY_FRAMES]: 'Frames grouped',
   [STRING.TRACK_SUMMARY_FRAMES_WITH_VECTORS]: 'Frames with a feature vector',
   [STRING.TRACK_SUMMARY_FRAME_NAMES]: 'Names given to frames',
+  [STRING.TRACK_FRAME_NAME_COUNT]: '{{name}} ×{{count}}',
+  [STRING.TRACK_FRAME_NAMES_MORE]: '{{count}} more',
   [STRING.TRACK_SUMMARY_ID_AGREEMENT]: 'Identification agreement',
   [STRING.TRACK_SUMMARY_SCORE_RANGE]: 'Score range',
   [STRING.TRACK_SUMMARY_TITLE]: 'Occurrence tracking',
diff --git a/ui/src/utils/userPreferences/constants.ts b/ui/src/utils/userPreferences/constants.ts
index 742381e12..c85f6f31d 100644
--- a/ui/src/utils/userPreferences/constants.ts
+++ b/ui/src/utils/userPreferences/constants.ts
@@ -5,5 +5,6 @@ export const USER_PREFERENCES_STORAGE_KEY = 'ami-user-preferences'
 export const DEFAULT_PREFERENCES: UserPreferences = {
   columnSettings: {},
   recentIdentifications: [],
+  showPathCrops: false,
   termsMessageSeen: false,
 }
diff --git a/ui/src/utils/userPreferences/types.ts b/ui/src/utils/userPreferences/types.ts
index ee1d8d23d..d667cfcd5 100644
--- a/ui/src/utils/userPreferences/types.ts
+++ b/ui/src/utils/userPreferences/types.ts
@@ -5,6 +5,8 @@ export interface UserPreferences {
     label: string
     value: string
   }[]
+  /** Fill the boxes along a track's path with each frame's crop, not just an outline. */
+  showPathCrops?: boolean
   termsMessageSeen?: boolean
 }
 
diff --git a/ui/src/utils/userPreferences/userPreferencesContext.test.tsx b/ui/src/utils/userPreferences/userPreferencesContext.test.tsx
new file mode 100644
index 000000000..c9ba70f79
--- /dev/null
+++ b/ui/src/utils/userPreferences/userPreferencesContext.test.tsx
@@ -0,0 +1,69 @@
+import { act, renderHook } from '@testing-library/react'
+import { ReactNode } from 'react'
+import { CookieConsentContext } from 'utils/cookieConsent/cookieConsentContext'
+import { DEFAULT_SETTINGS } from 'utils/cookieConsent/constants'
+import { USER_PREFERENCES_STORAGE_KEY } from './constants'
+import {
+  UserPreferencesContextProvider,
+  useUserPreferences,
+} from './userPreferencesContext'
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+  <CookieConsentContext.Provider
+    value={{
+      accepted: '2026-01-01T00:00:00Z',
+      settings: { ...DEFAULT_SETTINGS, functionality: true },
+      setSettings: () => {},
+    }}
+  >
+    <UserPreferencesContextProvider>{children}</UserPreferencesContextProvider>
+  </CookieConsentContext.Provider>
+)
+
+describe('useUserPreferences', () => {
+  beforeEach(() => localStorage.clear())
+  afterEach(() => jest.restoreAllMocks())
+
+  test('path crops are off until the viewer turns them on, and stay on', () => {
+    const first = renderHook(() => useUserPreferences(), { wrapper })
+    expect(first.result.current.userPreferences.showPathCrops).toBe(false)
+
+    act(() =>
+      first.result.current.setUserPreferences({
+        ...first.result.current.userPreferences,
+        showPathCrops: true,
+      })
+    )
+
+    const second = renderHook(() => useUserPreferences(), { wrapper })
+    expect(second.result.current.userPreferences.showPathCrops).toBe(true)
+  })
+
+  test('storage that throws falls back to defaults and still applies changes', () => {
+    localStorage.setItem(
+      USER_PREFERENCES_STORAGE_KEY,
+      JSON.stringify({ showPathCrops: true })
+    )
+    jest
+      .spyOn(Object.getPrototypeOf(window.localStorage), 'getItem')
+      .mockImplementation(() => {
+        throw new Error('blocked')
+      })
+    jest
+      .spyOn(Object.getPrototypeOf(window.localStorage), 'setItem')
+      .mockImplementation(() => {
+        throw new Error('blocked')
+      })
+
+    const { result } = renderHook(() => useUserPreferences(), { wrapper })
+    expect(result.current.userPreferences.showPathCrops).toBe(false)
+
+    act(() =>
+      result.current.setUserPreferences({
+        ...result.current.userPreferences,
+        showPathCrops: true,
+      })
+    )
+    expect(result.current.userPreferences.showPathCrops).toBe(true)
+  })
+})
diff --git a/ui/src/utils/userPreferences/userPreferencesContext.tsx b/ui/src/utils/userPreferences/userPreferencesContext.tsx
index d58bd75e9..ff4e620a5 100644
--- a/ui/src/utils/userPreferences/userPreferencesContext.tsx
+++ b/ui/src/utils/userPreferences/userPreferencesContext.tsx
@@ -20,12 +20,14 @@ export const UserPreferencesContextProvider = ({
   const [userPreferences, setUserPreferences] = useState<UserPreferences>(
     () => {
       // TODO: For logged in users, here we could check backend for stored preferences
-      const storedPreferences =
-        hasStorageConsent && localStorage.getItem(USER_PREFERENCES_STORAGE_KEY)
-      if (!storedPreferences) {
-        return DEFAULT_PREFERENCES
-      }
+      // Storage can throw (blocked site data, some private windows); defaults stand in.
       try {
+        const storedPreferences =
+          hasStorageConsent &&
+          localStorage.getItem(USER_PREFERENCES_STORAGE_KEY)
+        if (!storedPreferences) {
+          return DEFAULT_PREFERENCES
+        }
         return {
           ...DEFAULT_PREFERENCES,
           ...JSON.parse(storedPreferences),
@@ -43,10 +45,14 @@ export const UserPreferencesContextProvider = ({
         setUserPreferences: (userPreferences: UserPreferences) => {
           // TODO: For logged in users, here we could sync preferences to backend
           if (hasStorageConsent) {
-            localStorage.setItem(
-              USER_PREFERENCES_STORAGE_KEY,
-              JSON.stringify(userPreferences)
-            )
+            try {
+              localStorage.setItem(
+                USER_PREFERENCES_STORAGE_KEY,
+                JSON.stringify(userPreferences)
+              )
+            } catch {
+              // The preference still applies for this visit.
+            }
           }
           setUserPreferences(userPreferences)
         },