diff --git a/apps/web/src/components/a4-preview.tsx b/apps/web/src/components/a4-preview.tsx
index 6cfd595..7ee52f7 100644
--- a/apps/web/src/components/a4-preview.tsx
+++ b/apps/web/src/components/a4-preview.tsx
@@ -1,15 +1,13 @@
 import { useLayoutEffect, useRef, useState } from 'react'
 
-import { SheetControls } from '@/components/sheet-controls'
 import { SheetInspector } from '@/components/sheet-inspector'
 import { SheetPage } from '@/components/sheet-page'
-import { Button } from '@/components/ui/button'
 import { captionFontStack } from '@/lib/fonts'
 import { paperSize, sheetLayout } from '@/lib/layout'
-import { downloadSheetPdf } from '@/lib/pdf'
 import { usePhotoStore } from '@/stores/photo-store'
 import { useSettingsStore } from '@/stores/settings-store'
 
+/** The centre column: the print sheet itself, with a floating frame inspector. */
 export function A4Preview() {
   const photos = usePhotoStore((state) => state.photos)
   const captionFontId = useSettingsStore((state) => state.captionFontId)
@@ -23,24 +21,6 @@ export function A4Preview() {
 
   const containerRef = useRef<HTMLDivElement>(null)
   const [width, setWidth] = useState(0)
-  const [isExporting, setIsExporting] = useState(false)
-
-  const handleExport = async () => {
-    setIsExporting(true)
-    try {
-      await downloadSheetPdf(
-        photos,
-        perRow,
-        showCutMarks,
-        showCaptions,
-        showCameraLine,
-        paper,
-        captionFontId,
-      )
-    } finally {
-      setIsExporting(false)
-    }
-  }
 
   useLayoutEffect(() => {
     const el = containerRef.current
@@ -62,21 +42,14 @@ export function A4Preview() {
 
   return (
     <section className="flex flex-col gap-3">
-      <div className="flex items-center justify-between gap-3">
-        <h2 className="text-sm font-medium">
-          Print sheet ({paper.label})
-          {pageCount > 1 ? ` — ${pageCount} pages` : ''}
-        </h2>
-        <Button
-          size="sm"
-          disabled={isExporting || photos.length === 0}
-          onClick={() => void handleExport()}
-        >
-          {isExporting ? 'Preparing…' : 'Export PDF'}
-        </Button>
+      <h2 className="text-center text-sm font-medium">
+        Print sheet ({paper.label})
+        {pageCount > 1 ? ` — ${pageCount} pages` : ''}
+      </h2>
+      {/* Floats over the page so the selected frame's tools follow you. */}
+      <div className="sticky top-2 z-20 mx-auto w-full max-w-xl empty:hidden">
+        <SheetInspector />
       </div>
-      <SheetControls />
-      <SheetInspector />
       <div
         ref={containerRef}
         className="mx-auto flex w-full max-w-xl flex-col gap-5"
diff --git a/apps/web/src/components/caption-controls.tsx b/apps/web/src/components/caption-controls.tsx
deleted file mode 100644
index 918de7f..0000000
--- a/apps/web/src/components/caption-controls.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { DATE_FORMATS, type DateFormat } from '@/lib/date'
-import { LOCATION_DETAILS } from '@/lib/geocode'
-import { usePhotoStore } from '@/stores/photo-store'
-import {
-  type CaptionLocation,
-  useSettingsStore,
-} from '@/stores/settings-store'
-
-export function CaptionControls() {
-  const captionLocation = useSettingsStore((state) => state.captionLocation)
-  const setCaptionLocation = useSettingsStore(
-    (state) => state.setCaptionLocation,
-  )
-  const dateFormat = useSettingsStore((state) => state.dateFormat)
-  const setDateFormat = useSettingsStore((state) => state.setDateFormat)
-  const showCameraLine = useSettingsStore((state) => state.showCameraLine)
-  const setShowCameraLine = useSettingsStore((state) => state.setShowCameraLine)
-  const showCaptions = useSettingsStore((state) => state.showCaptions)
-  const setShowCaptions = useSettingsStore((state) => state.setShowCaptions)
-  const applyLocationMode = usePhotoStore((state) => state.applyLocationMode)
-  const applyDateFormat = usePhotoStore((state) => state.applyDateFormat)
-
-  const selectLocation = (location: CaptionLocation) => {
-    setCaptionLocation(location)
-    applyLocationMode(location)
-  }
-
-  const selectDateFormat = (format: DateFormat) => {
-    setDateFormat(format)
-    applyDateFormat(format)
-  }
-
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <div className="flex items-center gap-1.5">
-        <label
-          htmlFor="location-detail"
-          className="text-muted-foreground text-xs font-medium"
-        >
-          Location
-        </label>
-        <select
-          id="location-detail"
-          value={captionLocation}
-          onChange={(event) =>
-            selectLocation(event.target.value as CaptionLocation)
-          }
-          className="border-input bg-background rounded-md border px-2 py-1 text-xs"
-        >
-          {LOCATION_DETAILS.map((detail) => (
-            <option key={detail.id} value={detail.id}>
-              {detail.label}
-            </option>
-          ))}
-          <option value="neighborhood" disabled>
-            Neighborhood (offline N/A)
-          </option>
-        </select>
-      </div>
-      <div className="flex items-center gap-1.5">
-        <label
-          htmlFor="date-format"
-          className="text-muted-foreground text-xs font-medium"
-        >
-          Date
-        </label>
-        <select
-          id="date-format"
-          value={dateFormat}
-          onChange={(event) => selectDateFormat(event.target.value as DateFormat)}
-          className="border-input bg-background rounded-md border px-2 py-1 text-xs"
-        >
-          {DATE_FORMATS.map((format) => (
-            <option key={format.id} value={format.id}>
-              {format.label}
-            </option>
-          ))}
-        </select>
-      </div>
-      <label className="text-muted-foreground flex items-center gap-1.5 text-xs font-medium">
-        <input
-          type="checkbox"
-          checked={showCameraLine}
-          onChange={(event) => setShowCameraLine(event.target.checked)}
-          className="accent-primary"
-        />
-        Camera info
-      </label>
-      <label className="text-muted-foreground flex items-center gap-1.5 text-xs font-medium">
-        <input
-          type="checkbox"
-          checked={showCaptions}
-          onChange={(event) => setShowCaptions(event.target.checked)}
-          className="accent-primary"
-        />
-        Captions
-      </label>
-    </div>
-  )
-}
diff --git a/apps/web/src/components/caption-font-control.tsx b/apps/web/src/components/caption-font-control.tsx
deleted file mode 100644
index 8ef360c..0000000
--- a/apps/web/src/components/caption-font-control.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { CAPTION_FONTS } from '@/lib/fonts'
-import { useSettingsStore } from '@/stores/settings-store'
-
-export function CaptionFontControl() {
-  const captionFontId = useSettingsStore((state) => state.captionFontId)
-  const setCaptionFont = useSettingsStore((state) => state.setCaptionFont)
-
-  return (
-    <div className="flex items-center gap-2">
-      <label
-        htmlFor="caption-font"
-        className="text-muted-foreground text-xs font-medium whitespace-nowrap"
-      >
-        Font
-      </label>
-      <select
-        id="caption-font"
-        value={captionFontId}
-        onChange={(event) => setCaptionFont(event.target.value)}
-        className="border-input bg-background rounded-md border px-2 py-1 text-sm"
-      >
-        {CAPTION_FONTS.map((font) => (
-          <option
-            key={font.id}
-            value={font.id}
-            style={{ fontFamily: font.stack }}
-          >
-            {font.label}
-          </option>
-        ))}
-      </select>
-    </div>
-  )
-}
diff --git a/apps/web/src/components/options-panel.tsx b/apps/web/src/components/options-panel.tsx
new file mode 100644
index 0000000..a12eb29
--- /dev/null
+++ b/apps/web/src/components/options-panel.tsx
@@ -0,0 +1,230 @@
+import { type ReactNode, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { DATE_FORMATS, type DateFormat } from '@/lib/date'
+import { CAPTION_FONTS } from '@/lib/fonts'
+import { LOCATION_DETAILS } from '@/lib/geocode'
+import { PAPER_SIZES, paperSize } from '@/lib/layout'
+import { downloadSheetPdf } from '@/lib/pdf'
+import { usePhotoStore } from '@/stores/photo-store'
+import {
+  type CaptionLocation,
+  MAX_PER_ROW,
+  MIN_PER_ROW,
+  useSettingsStore,
+} from '@/stores/settings-store'
+
+const SELECT_CLASS =
+  'border-input bg-background rounded-md border px-2 py-1 text-sm'
+
+/** The right-hand rail: every caption + sheet option, plus export. */
+export function OptionsPanel() {
+  const photos = usePhotoStore((state) => state.photos)
+  const applyLocationMode = usePhotoStore((state) => state.applyLocationMode)
+  const applyDateFormat = usePhotoStore((state) => state.applyDateFormat)
+
+  const captionLocation = useSettingsStore((state) => state.captionLocation)
+  const setCaptionLocation = useSettingsStore((state) => state.setCaptionLocation)
+  const dateFormat = useSettingsStore((state) => state.dateFormat)
+  const setDateFormat = useSettingsStore((state) => state.setDateFormat)
+  const captionFontId = useSettingsStore((state) => state.captionFontId)
+  const setCaptionFont = useSettingsStore((state) => state.setCaptionFont)
+  const showCameraLine = useSettingsStore((state) => state.showCameraLine)
+  const setShowCameraLine = useSettingsStore((state) => state.setShowCameraLine)
+  const showCaptions = useSettingsStore((state) => state.showCaptions)
+  const setShowCaptions = useSettingsStore((state) => state.setShowCaptions)
+  const paperSizeId = useSettingsStore((state) => state.paperSizeId)
+  const setPaperSize = useSettingsStore((state) => state.setPaperSize)
+  const perRow = useSettingsStore((state) => state.polaroidsPerRow)
+  const setPerRow = useSettingsStore((state) => state.setPolaroidsPerRow)
+  const showCutMarks = useSettingsStore((state) => state.showCutMarks)
+  const setShowCutMarks = useSettingsStore((state) => state.setShowCutMarks)
+
+  const [isExporting, setIsExporting] = useState(false)
+  const paper = paperSize(paperSizeId)
+
+  const selectLocation = (value: CaptionLocation) => {
+    setCaptionLocation(value)
+    applyLocationMode(value)
+  }
+  const selectDate = (value: DateFormat) => {
+    setDateFormat(value)
+    applyDateFormat(value)
+  }
+
+  const handleExport = async () => {
+    setIsExporting(true)
+    try {
+      await downloadSheetPdf(
+        photos,
+        perRow,
+        showCutMarks,
+        showCaptions,
+        showCameraLine,
+        paper,
+        captionFontId,
+      )
+    } finally {
+      setIsExporting(false)
+    }
+  }
+
+  return (
+    <div className="border-input bg-card flex flex-col gap-5 rounded-lg border p-3">
+      <Section title="Captions">
+        <Field label="Location" htmlFor="opt-location">
+          <select
+            id="opt-location"
+            className={SELECT_CLASS}
+            value={captionLocation}
+            onChange={(event) =>
+              selectLocation(event.target.value as CaptionLocation)
+            }
+          >
+            {LOCATION_DETAILS.map((detail) => (
+              <option key={detail.id} value={detail.id}>
+                {detail.label}
+              </option>
+            ))}
+            <option value="neighborhood" disabled>
+              Neighborhood (offline N/A)
+            </option>
+          </select>
+        </Field>
+        <Field label="Date" htmlFor="opt-date">
+          <select
+            id="opt-date"
+            className={SELECT_CLASS}
+            value={dateFormat}
+            onChange={(event) => selectDate(event.target.value as DateFormat)}
+          >
+            {DATE_FORMATS.map((format) => (
+              <option key={format.id} value={format.id}>
+                {format.label}
+              </option>
+            ))}
+          </select>
+        </Field>
+        <Field label="Font" htmlFor="opt-font">
+          <select
+            id="opt-font"
+            className={SELECT_CLASS}
+            value={captionFontId}
+            onChange={(event) => setCaptionFont(event.target.value)}
+          >
+            {CAPTION_FONTS.map((font) => (
+              <option key={font.id} value={font.id} style={{ fontFamily: font.stack }}>
+                {font.label}
+              </option>
+            ))}
+          </select>
+        </Field>
+        <Toggle
+          label="Camera info"
+          checked={showCameraLine}
+          onChange={setShowCameraLine}
+        />
+        <Toggle label="Captions" checked={showCaptions} onChange={setShowCaptions} />
+      </Section>
+
+      <Section title="Sheet">
+        <Field label="Paper" htmlFor="opt-paper">
+          <select
+            id="opt-paper"
+            className={SELECT_CLASS}
+            value={paperSizeId}
+            onChange={(event) => setPaperSize(event.target.value)}
+          >
+            {PAPER_SIZES.map((size) => (
+              <option key={size.id} value={size.id}>
+                {size.label}
+              </option>
+            ))}
+          </select>
+        </Field>
+        <Field label="Per row" htmlFor="opt-perrow">
+          <span className="flex items-center gap-2">
+            <input
+              id="opt-perrow"
+              type="range"
+              min={MIN_PER_ROW}
+              max={MAX_PER_ROW}
+              step={1}
+              value={perRow}
+              onChange={(event) => setPerRow(Number(event.target.value))}
+              className="accent-primary w-24"
+            />
+            <span className="text-muted-foreground w-3 text-sm tabular-nums">
+              {perRow}
+            </span>
+          </span>
+        </Field>
+        <Toggle
+          label="Cut marks"
+          checked={showCutMarks}
+          onChange={setShowCutMarks}
+        />
+      </Section>
+
+      <Button
+        disabled={isExporting || photos.length === 0}
+        onClick={() => void handleExport()}
+        className="w-full"
+      >
+        {isExporting ? 'Preparing…' : 'Export PDF'}
+      </Button>
+    </div>
+  )
+}
+
+function Section({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <div className="flex flex-col gap-2.5">
+      <h3 className="text-muted-foreground text-[11px] font-semibold tracking-wide uppercase">
+        {title}
+      </h3>
+      {children}
+    </div>
+  )
+}
+
+function Field({
+  label,
+  htmlFor,
+  children,
+}: {
+  label: string
+  htmlFor: string
+  children: ReactNode
+}) {
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <label htmlFor={htmlFor} className="text-sm">
+        {label}
+      </label>
+      {children}
+    </div>
+  )
+}
+
+function Toggle({
+  label,
+  checked,
+  onChange,
+}: {
+  label: string
+  checked: boolean
+  onChange: (value: boolean) => void
+}) {
+  return (
+    <label className="flex items-center gap-2 text-sm">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(event) => onChange(event.target.checked)}
+        className="accent-primary"
+      />
+      {label}
+    </label>
+  )
+}
diff --git a/apps/web/src/components/settings-toolbar.tsx b/apps/web/src/components/settings-toolbar.tsx
deleted file mode 100644
index 898ab13..0000000
--- a/apps/web/src/components/settings-toolbar.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { CaptionControls } from '@/components/caption-controls'
-import { CaptionFontControl } from '@/components/caption-font-control'
-
-/** Global caption settings that apply to every photo on the sheet. */
-export function SettingsToolbar() {
-  return (
-    <div className="border-input bg-card flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border p-2.5">
-      <CaptionControls />
-      <CaptionFontControl />
-    </div>
-  )
-}
diff --git a/apps/web/src/components/sheet-controls.tsx b/apps/web/src/components/sheet-controls.tsx
deleted file mode 100644
index 6cd61d9..0000000
--- a/apps/web/src/components/sheet-controls.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { PAPER_SIZES } from '@/lib/layout'
-import {
-  MAX_PER_ROW,
-  MIN_PER_ROW,
-  useSettingsStore,
-} from '@/stores/settings-store'
-
-export function SheetControls() {
-  const paperSizeId = useSettingsStore((state) => state.paperSizeId)
-  const setPaperSize = useSettingsStore((state) => state.setPaperSize)
-  const perRow = useSettingsStore((state) => state.polaroidsPerRow)
-  const setPerRow = useSettingsStore((state) => state.setPolaroidsPerRow)
-  const showCutMarks = useSettingsStore((state) => state.showCutMarks)
-  const setShowCutMarks = useSettingsStore((state) => state.setShowCutMarks)
-
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <div className="flex items-center gap-2">
-        <label
-          htmlFor="paper-size"
-          className="text-muted-foreground text-xs font-medium whitespace-nowrap"
-        >
-          Paper
-        </label>
-        <select
-          id="paper-size"
-          value={paperSizeId}
-          onChange={(event) => setPaperSize(event.target.value)}
-          className="border-input bg-background rounded-md border px-2 py-1 text-xs"
-        >
-          {PAPER_SIZES.map((paper) => (
-            <option key={paper.id} value={paper.id}>
-              {paper.label}
-            </option>
-          ))}
-        </select>
-      </div>
-      <div className="flex items-center gap-2">
-        <label
-          htmlFor="per-row"
-          className="text-muted-foreground text-xs font-medium whitespace-nowrap"
-        >
-          Per row
-        </label>
-        <input
-          id="per-row"
-          type="range"
-          min={MIN_PER_ROW}
-          max={MAX_PER_ROW}
-          step={1}
-          value={perRow}
-          onChange={(event) => setPerRow(Number(event.target.value))}
-          className="accent-primary w-24"
-        />
-        <span className="text-muted-foreground w-3 text-xs tabular-nums">
-          {perRow}
-        </span>
-      </div>
-      <label className="text-muted-foreground flex items-center gap-1.5 text-xs font-medium">
-        <input
-          type="checkbox"
-          checked={showCutMarks}
-          onChange={(event) => setShowCutMarks(event.target.checked)}
-          className="accent-primary"
-        />
-        Cut marks
-      </label>
-    </div>
-  )
-}
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index f2b54fe..661f66d 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -1,10 +1,10 @@
 import { createFileRoute } from '@tanstack/react-router'
 
 import { A4Preview } from '@/components/a4-preview'
+import { OptionsPanel } from '@/components/options-panel'
 import { PhotoDropzone } from '@/components/photo-dropzone'
 import { PhotoStrip } from '@/components/photo-strip'
 import { ProjectControls } from '@/components/project-controls'
-import { SettingsToolbar } from '@/components/settings-toolbar'
 import { usePhotoStore } from '@/stores/photo-store'
 
 export const Route = createFileRoute('/')({
@@ -15,28 +15,29 @@ function Home() {
   const hasPhotos = usePhotoStore((state) => state.photos.length > 0)
 
   return (
-    <main className="mx-auto flex min-h-svh w-full max-w-6xl flex-col gap-5 p-4 sm:p-6">
+    <main className="mx-auto flex min-h-svh w-full max-w-7xl flex-col gap-5 p-4 sm:p-6">
       <header className="flex items-start justify-between gap-3">
         <div className="flex flex-col gap-1">
           <h1 className="text-2xl font-semibold tracking-tight">Polaroid</h1>
           <p className="text-muted-foreground text-sm">
-            Build polaroid-style print sheets — edit each frame right on the
-            page. Everything stays on your device.
+            Build polaroid-style print sheets — edit each frame on the page.
+            Everything stays on your device.
           </p>
         </div>
         <ProjectControls />
       </header>
 
-      {hasPhotos && <SettingsToolbar />}
-
-      <div className="grid gap-6 lg:grid-cols-[300px_1fr] lg:items-start">
+      <div className="grid gap-6 lg:grid-cols-[240px_minmax(0,1fr)_300px] lg:items-start">
         <aside className="flex flex-col gap-3">
           <PhotoDropzone compact={hasPhotos} />
           <PhotoStrip />
         </aside>
-        <div className="lg:sticky lg:top-4">
+        <div className="min-w-0">
           <A4Preview />
         </div>
+        <aside className="lg:sticky lg:top-4">
+          <OptionsPanel />
+        </aside>
       </div>
     </main>
   )