diff --git a/src/lib/pages/HistoryPage.svelte b/src/lib/pages/HistoryPage.svelte
index 7ead932..f6eb36f 100644
--- a/src/lib/pages/HistoryPage.svelte
+++ b/src/lib/pages/HistoryPage.svelte
@@ -22,8 +22,9 @@
   import { clampTextLines, measurePreWrap } from "$lib/utils/textMeasure.js";
   import { bodyPretextLineHeight, pretextFontShorthand } from "$lib/utils/accessibilityTypography.js";
   import { buildCumulativeOffsets, findVisibleRange } from "$lib/utils/virtualList.js";
-  import Card from "$lib/components/Card.svelte";
-  import EmptyState from "$lib/components/EmptyState.svelte";
+  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 { PLAYBACK_SPEEDS } from "$lib/utils/constants.js";
   import { Search, Clock, Play, Pause, FileText, Mic, ChevronDown, ExternalLink, Star, Tag } from 'lucide-svelte';
@@ -835,7 +836,7 @@
   {#if viewMode === "live"}
   <!-- Search -->
   <div class="px-7 pb-3">
-    <Card tone="subtle">
+    <LumotiaCard tone="subtle">
       <div class="flex items-center gap-3 px-4 py-2.5">
         <Search size={16} class="text-text-tertiary flex-shrink-0" aria-hidden="true" />
         <input
@@ -852,7 +853,7 @@
           >Clear</button>
         {/if}
       </div>
-    </Card>
+    </LumotiaCard>
   </div>
 
   <!-- Tag chip filter bar -->
@@ -928,9 +929,9 @@
 
   <!-- History list -->
   <div class="flex-1 px-7 pb-4 min-h-0">
-    <Card classes="h-full flex flex-col overflow-hidden">
+    <LumotiaCard classes="h-full flex flex-col overflow-hidden">
       {#if filtered.length === 0}
-        <EmptyState
+        <LumotiaEmptyState
           icon={Clock}
           message={searchQuery ? "No matching transcripts" : "Your transcriptions will be saved here"}
         />
@@ -1164,7 +1165,7 @@
           </div>
         </div>
       {/if}
-    </Card>
+    </LumotiaCard>
   </div>
   {:else}
   <!-- Trash view. Lists soft-deleted transcripts (deleted_at IS NOT
@@ -1180,19 +1181,19 @@
     </div>
   </div>
   <div class="flex-1 px-7 pb-4 min-h-0">
-    <Card classes="h-full flex flex-col overflow-hidden">
+    <LumotiaCard classes="h-full flex flex-col overflow-hidden">
       {#if trashLoading && trashItems.length === 0}
-        <EmptyState
+        <LumotiaEmptyState
           icon={Clock}
           message="Loading Trash…"
         />
       {:else if trashError && trashItems.length === 0}
-        <EmptyState
+        <LumotiaEmptyState
           icon={Clock}
           message={`Failed to load Trash: ${trashError}`}
         />
       {:else if trashItems.length === 0}
-        <EmptyState
+        <LumotiaEmptyState
           icon={Clock}
           message="Trash is empty"
         />
@@ -1219,7 +1220,7 @@
           {/each}
         </div>
       {/if}
-    </Card>
+    </LumotiaCard>
   </div>
   {/if}
 </div>