diff --git a/scripts/capture-quietware-screenshots.mjs b/scripts/capture-quietware-screenshots.mjs
index 535ef72..2ebbc0d 100644
--- a/scripts/capture-quietware-screenshots.mjs
+++ b/scripts/capture-quietware-screenshots.mjs
@@ -103,5 +103,25 @@ try {
   console.error(`files page skipped: ${e.message}`);
 }
 
+// History page — SPA navigation via the sidebar item.
+try {
+  console.log("\n=== history page (best effort) ===");
+  await page.evaluate(() => {
+    const items = Array.from(document.querySelectorAll('button, a, [role="button"], li'));
+    const target = items.find(el => (el.textContent || "").trim().toLowerCase() === "history");
+    if (target) target.click();
+  });
+  await page.waitForTimeout(1500);
+  for (const mode of MODES.slice(1, 3)) {
+    await setMode(mode);
+    await page.waitForTimeout(400);
+    const file = `${OUT}/history__${mode.id}.png`;
+    await page.screenshot({ path: file, fullPage: false });
+    console.log(`  history ${mode.id}`);
+  }
+} catch (e) {
+  console.error(`history page skipped: ${e.message}`);
+}
+
 await browser.close();
 console.log(`\nWrote screenshots to ${OUT}/`);
diff --git a/src/lib/pages/HistoryPage.svelte b/src/lib/pages/HistoryPage.svelte
index f6eb36f..1d65f58 100644
--- a/src/lib/pages/HistoryPage.svelte
+++ b/src/lib/pages/HistoryPage.svelte
@@ -25,7 +25,11 @@
   import LumotiaCard from "$lib/ui/LumotiaCard.svelte";
   import LumotiaEmptyState from "$lib/ui/LumotiaEmptyState.svelte";
   import LumotiaButton from "$lib/ui/LumotiaButton.svelte";
-  import { formatTime, formatDuration } from "$lib/utils/time.js";
+  import LumotiaNotice from "$lib/ui/LumotiaNotice.svelte";
+  // v0.3 Phase 5f — quietware History layout.
+  import LumotiaPageSkeleton from "$lib/ui/LumotiaPageSkeleton.svelte";
+  import { onMount } from "svelte";
+  import { formatTime, formatDuration, formatTimestamp } from "$lib/utils/time.js";
   import { PLAYBACK_SPEEDS } from "$lib/utils/constants.js";
   import { Search, Clock, Play, Pause, FileText, Mic, ChevronDown, ExternalLink, Star, Tag } from 'lucide-svelte';
 
@@ -203,7 +207,27 @@
       : ""
   );
 
+  // v0.3 Phase 5f — quietware layout switch. Same observer pattern
+  // as Dictation / Files. v0.2 surface unchanged without quietware.
+  let isQuietware = $state(false);
+  let quietwareObserver: MutationObserver | null = null;
+
+  onMount(() => {
+    if (typeof document === "undefined") return;
+    const sync = () => {
+      isQuietware = document.documentElement.dataset.design === "quietware";
+    };
+    sync();
+    quietwareObserver = new MutationObserver(sync);
+    quietwareObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-design"],
+    });
+  });
+
   onDestroy(() => {
+    quietwareObserver?.disconnect();
+    quietwareObserver = null;
     stopPlayback();
     if (bulkDeleteArmTimer) clearTimeout(bulkDeleteArmTimer);
   });
@@ -683,7 +707,7 @@
   });
 </script>
 
-<div class="flex flex-col h-full overflow-y-auto animate-fade-in">
+<div class="flex flex-col h-full {isQuietware ? '' : 'overflow-y-auto'} animate-fade-in">
   <!-- Off-screen live region for inline-confirm announcements. Sits at
        the page root so it persists while the morphed Confirm/Cancel
        pills mount and unmount in the header and bulk toolbar. -->
@@ -693,6 +717,168 @@
     aria-atomic="true"
   >{confirmAnnouncement}</div>
 
+  {#if isQuietware}
+    <!-- =================================================================
+         v0.3 Phase 5f — quietware History layout. Calm local archive.
+
+           Header           "History" + count
+           Primary surface  search + view tabs + list / empty state
+           Action dock      contextual per item
+           Mono footer      saved count · storage · local only
+
+         Reuses every existing state and handler: history (store),
+         trashItems, viewMode, searchQuery, filtered (derived),
+         compactPreviewText, copyItem, removeItem, openViewer,
+         restoreFromTrash. Bulk actions, audio playback, tag chips
+         and ClearAll modal stay accessible via the v0.2 fallback —
+         the quietware view focuses on the core archive flow.
+         ================================================================= -->
+    <LumotiaPageSkeleton>
+      {#snippet header()}
+        <div class="flex items-center gap-4">
+          <div class="flex-1 min-w-0">
+            <h1 class="text-[18px] font-medium text-text leading-tight">History</h1>
+            <p class="text-[12px] text-text-secondary mt-0.5">
+              {viewMode === "trash" ? "Recover transcripts within 30 days." : "Search and reopen saved transcripts."}
+            </p>
+          </div>
+          <div
+            class="inline-flex items-center rounded-lg border border-border-subtle p-0.5 bg-bg-elevated text-[12px]"
+            role="tablist"
+            aria-label="History view"
+          >
+            <button
+              role="tab"
+              aria-selected={viewMode === "live"}
+              class="px-3 py-1 rounded-md transition-colors
+                     {viewMode === 'live' ? 'bg-bg-card text-text' : 'text-text-secondary hover:text-text'}"
+              onclick={() => (viewMode = "live")}
+            >Live <span class="text-text-tertiary font-mono">{history.length}</span></button>
+            <button
+              role="tab"
+              aria-selected={viewMode === "trash"}
+              class="px-3 py-1 rounded-md transition-colors
+                     {viewMode === 'trash' ? 'bg-bg-card text-text' : 'text-text-secondary hover:text-text'}"
+              onclick={() => { viewMode = "trash"; loadTrash(); }}
+            >Trash <span class="text-text-tertiary font-mono">{trashItems.length}</span></button>
+          </div>
+        </div>
+      {/snippet}
+
+      {#snippet primary()}
+        <div class="h-full flex flex-col">
+          {#if trashError && viewMode === "trash"}
+            <div class="px-6 pt-4">
+              <LumotiaNotice tone="danger" slim dismissible onDismiss={() => trashError = ""}>
+                {trashError}
+              </LumotiaNotice>
+            </div>
+          {/if}
+
+          <!-- Search input, mounted to the top of the surface. -->
+          <div class="px-6 pt-5 pb-3 border-b border-border-subtle">
+            <div class="relative max-w-2xl">
+              <Search size={14} class="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary pointer-events-none" aria-hidden="true" />
+              <input
+                type="search"
+                placeholder={viewMode === "trash" ? "Search trash" : "Search transcripts, #tags"}
+                bind:value={searchQuery}
+                class="w-full bg-bg-input border border-border-subtle rounded-lg pl-9 pr-9 py-2 text-[13px] text-text placeholder:text-text-tertiary
+                       focus:outline-none focus:border-[var(--button-primary-bg)] focus:ring-[var(--wire-width-focus,2px)] focus:ring-[var(--button-primary-bg)]"
+                aria-label="Search history"
+              />
+            </div>
+          </div>
+
+          <!-- Archive list. Reuses the existing derived `filtered` for
+               live mode and `trashItems` for trash mode. -->
+          <div class="flex-1 overflow-auto min-h-0">
+            {#if viewMode === "live"}
+              {#if filtered.length === 0}
+                <div class="h-full flex flex-col items-center justify-center text-center gap-3 text-text-tertiary px-12">
+                  <FileText size={48} class="opacity-50" aria-hidden="true" />
+                  <p class="font-display italic text-[24px] text-text">
+                    {searchQuery ? "Nothing matched." : "Nothing saved yet."}
+                  </p>
+                  <p class="text-[13px] text-text-secondary">
+                    {searchQuery ? "Try different keywords or clear the search." : "Saved dictations and file transcripts will appear here."}
+                  </p>
+                </div>
+              {:else}
+                <ul class="divide-y divide-border-subtle">
+                  {#each filtered as item (item.id)}
+                    <li class="flex items-start gap-3 px-6 py-3 hover:bg-hover transition-colors">
+                      <div class="mt-0.5 text-text-tertiary shrink-0">
+                        {#if item.source === "file"}
+                          <FileText size={16} aria-hidden="true" />
+                        {:else}
+                          <Mic size={16} aria-hidden="true" />
+                        {/if}
+                      </div>
+                      <div class="flex-1 min-w-0">
+                        <p class="text-[13px] font-medium text-text truncate">
+                          {item.title || item.preview?.slice(0, 80) || "Untitled"}
+                        </p>
+                        <p class="text-[12px] text-text-secondary mt-0.5 line-clamp-2">{compactPreviewText(item)}</p>
+                        <p class="text-[11px] text-text-tertiary mt-1 font-mono">{formatTimestamp(item.savedAt || item.timestamp)}</p>
+                      </div>
+                      <div class="flex items-center gap-1 shrink-0">
+                        <LumotiaButton size="sm" variant="tertiary" onclick={() => openViewer(item)}>Open</LumotiaButton>
+                        <LumotiaButton size="sm" variant="tertiary" onclick={() => copyItem(item)}>Copy</LumotiaButton>
+                        <LumotiaButton size="sm" variant="tertiary" onclick={() => removeItem(item)}>Delete</LumotiaButton>
+                      </div>
+                    </li>
+                  {/each}
+                </ul>
+              {/if}
+            {:else}
+              <!-- Trash view -->
+              {#if trashLoading && trashItems.length === 0}
+                <div class="h-full flex items-center justify-center text-text-tertiary text-[13px]">Loading trash…</div>
+              {:else if trashItems.length === 0}
+                <div class="h-full flex flex-col items-center justify-center text-center gap-3 text-text-tertiary px-12">
+                  <Clock size={48} class="opacity-50" aria-hidden="true" />
+                  <p class="font-display italic text-[24px] text-text">Trash is empty.</p>
+                  <p class="text-[13px] text-text-secondary">Deleted transcripts appear here for 30 days.</p>
+                </div>
+              {:else}
+                <ul class="divide-y divide-border-subtle">
+                  {#each trashItems as item (item.id)}
+                    <li class="flex items-start gap-3 px-6 py-3 hover:bg-hover transition-colors">
+                      <div class="mt-0.5 text-text-tertiary shrink-0">
+                        <FileText size={16} aria-hidden="true" />
+                      </div>
+                      <div class="flex-1 min-w-0">
+                        <p class="text-[13px] font-medium text-text truncate">
+                          {item.title || item.preview?.slice(0, 80) || "Untitled"}
+                        </p>
+                        <p class="text-[12px] text-text-secondary mt-0.5 line-clamp-1">{item.preview || ""}</p>
+                        <p class="text-[11px] text-text-tertiary mt-1 font-mono">Deleted {formatTrashTimestamp(item.deleted_at)}</p>
+                      </div>
+                      <div class="flex items-center gap-1 shrink-0">
+                        <LumotiaButton
+                          size="sm"
+                          variant={restoringId === item.id ? "secondary" : "primary"}
+                          disabled={restoringId === item.id}
+                          onclick={() => restoreFromTrash(item.id)}
+                        >{restoringId === item.id ? "Restoring…" : "Restore"}</LumotiaButton>
+                      </div>
+                    </li>
+                  {/each}
+                </ul>
+              {/if}
+            {/if}
+          </div>
+        </div>
+      {/snippet}
+
+      {#snippet metadata()}
+        <div class="flex items-center justify-end">
+          {history.length} saved · {trashItems.length} in trash · Local only
+        </div>
+      {/snippet}
+    </LumotiaPageSkeleton>
+  {:else}
   <!-- Header -->
   <div class="flex items-center gap-4 px-7 pt-6 pb-4">
     <h2 class="font-display text-[26px] italic text-text">History</h2>
@@ -1223,4 +1409,5 @@
     </LumotiaCard>
   </div>
   {/if}
+  {/if}
 </div>