diff --git a/src/lib/pages/TasksPage.svelte b/src/lib/pages/TasksPage.svelte
index f175860..b8de465 100644
--- a/src/lib/pages/TasksPage.svelte
+++ b/src/lib/pages/TasksPage.svelte
@@ -10,11 +10,11 @@
   } from "$lib/stores/page.svelte.js";
   import { recentCompletions, todayCount } from "$lib/stores/completionStats.svelte";
   import WipTaskList from '$lib/components/WipTaskList.svelte';
-  import EmptyState from '$lib/components/EmptyState.svelte';
+  import LumotiaEmptyState from '$lib/ui/LumotiaEmptyState.svelte';
+  import LumotiaButton from '$lib/ui/LumotiaButton.svelte';
   import CompletionSparkline from "$lib/components/CompletionSparkline.svelte";
   import EnergyChip from '$lib/components/EnergyChip.svelte';
   import { SquareCheck, Search, ExternalLink, ChevronLeft, ArrowUpDown, Plus, X, ChevronRight, Zap } from 'lucide-svelte';
-  import Card from "$lib/components/Card.svelte";
   import { formatTimestamp } from "$lib/utils/time.js";
   import { BUCKET_COLORS, EFFORT_LABELS, EFFORT_ORDER } from "$lib/utils/constants.js";
 
@@ -360,15 +360,15 @@
       </button>
     </div>
 
-    <button
-      class="flex items-center gap-1.5 btn-md rounded-lg text-text-secondary hover:bg-hover hover:text-text"
-      style="transition-duration: var(--duration-ui)"
+    <LumotiaButton
+      variant="tertiary"
       onclick={popOutTasks}
-      aria-label="Pop out task window"
+      ariaLabel="Pop out task window"
+      classes="inline-flex items-center gap-1.5"
     >
       <ExternalLink size={14} aria-hidden="true" />
       Pop out
-    </button>
+    </LumotiaButton>
   </div>
 
   <!-- Search -->
@@ -576,7 +576,7 @@
     <!-- Task list -->
     <div class="flex-1 overflow-y-auto min-h-0">
       {#if filteredTasks.length === 0}
-        <EmptyState
+        <LumotiaEmptyState
           icon={SquareCheck}
           message={searchQuery
             ? "No matching tasks"