diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 61956da..4e7478d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,6 +3,7 @@ import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import { DashboardLayout } from "./components/DashboardLayout";
 import { LoginPage } from "./components/LoginPage";
 import { ToastProvider } from "./components/Toast";
+import { ThemeProvider } from "./hooks/useTheme";
 import { useSession } from "./lib/auth-client";
 
 // Lazy-loaded pages for code splitting
@@ -50,20 +51,26 @@ function App() {
 
   if (session.isPending) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center">
         <div className="text-gray-400">Loading...</div>
       </div>
     );
   }
 
   if (!session.data) {
-    return <LoginPage onSuccess={() => window.location.reload()} />;
+    return (
+      <ThemeProvider>
+        <LoginPage onSuccess={() => window.location.reload()} />
+      </ThemeProvider>
+    );
   }
 
   return (
-    <ToastProvider>
-      <AuthenticatedApp />
-    </ToastProvider>
+    <ThemeProvider>
+      <ToastProvider>
+        <AuthenticatedApp />
+      </ToastProvider>
+    </ThemeProvider>
   );
 }
 
diff --git a/frontend/src/components/DashboardLayout.tsx b/frontend/src/components/DashboardLayout.tsx
index 4b5457e..3c2b9c6 100644
--- a/frontend/src/components/DashboardLayout.tsx
+++ b/frontend/src/components/DashboardLayout.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { NavLink, Outlet } from "react-router-dom";
 import { useCurrentUser } from "../hooks/useCurrentUser";
+import { useTheme } from "../hooks/useTheme";
 import { signOut } from "../lib/auth-client";
 
 const navItems = [
@@ -13,8 +14,16 @@ const navItems = [
 
 export function DashboardLayout() {
   const { user, isAdmin } = useCurrentUser();
+  const { theme, setTheme } = useTheme();
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
+  const cycleTheme = () => {
+    const next = theme === "light" ? "dark" : theme === "dark" ? "system" : "light";
+    setTheme(next);
+  };
+  const themeIcon = theme === "light" ? "☀️" : theme === "dark" ? "🌙" : "💻";
+  const themeLabel = theme === "light" ? "Light" : theme === "dark" ? "Dark" : "System";
+
   const handleLogout = async () => {
     await signOut();
     window.location.reload();
@@ -23,7 +32,7 @@ export function DashboardLayout() {
   const closeSidebar = () => setSidebarOpen(false);
 
   return (
-    <div className="min-h-screen bg-gray-50 flex">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex">
       {/* Mobile header */}
       <header className="md:hidden fixed top-0 left-0 right-0 z-40 bg-gray-900 text-white flex items-center h-14 px-4 shadow-lg">
         <button
@@ -138,6 +147,13 @@ export function DashboardLayout() {
               )}
             </div>
           </div>
+          <button
+            onClick={cycleTheme}
+            className="w-full text-xs text-gray-500 hover:text-gray-300 px-3 py-1.5 rounded-lg hover:bg-gray-800 transition text-left flex items-center gap-2 mb-1"
+            title={`Theme: ${themeLabel}`}
+          >
+            <span>{themeIcon}</span> {themeLabel}
+          </button>
           <button
             onClick={handleLogout}
             className="w-full text-xs text-gray-500 hover:text-red-400 px-3 py-1.5 rounded-lg hover:bg-gray-800 transition text-left"
diff --git a/frontend/src/components/KanbanBoard.tsx b/frontend/src/components/KanbanBoard.tsx
index 5f15734..4e0496f 100644
--- a/frontend/src/components/KanbanBoard.tsx
+++ b/frontend/src/components/KanbanBoard.tsx
@@ -17,45 +17,45 @@ const COLUMNS: KanbanColumn[] = [
     status: "active",
     label: "Active",
     icon: "⚡",
-    color: "text-amber-700",
-    bgColor: "bg-amber-50",
-    borderColor: "border-amber-200",
-    dropColor: "bg-amber-100",
+    color: "text-amber-700 dark:text-amber-400",
+    bgColor: "bg-amber-50 dark:bg-amber-900/10",
+    borderColor: "border-amber-200 dark:border-amber-800",
+    dropColor: "bg-amber-100 dark:bg-amber-900/20",
   },
   {
     status: "queued",
     label: "Queued",
     icon: "📋",
-    color: "text-blue-700",
-    bgColor: "bg-blue-50",
-    borderColor: "border-blue-200",
-    dropColor: "bg-blue-100",
+    color: "text-blue-700 dark:text-blue-400",
+    bgColor: "bg-blue-50 dark:bg-blue-900/10",
+    borderColor: "border-blue-200 dark:border-blue-800",
+    dropColor: "bg-blue-100 dark:bg-blue-900/20",
   },
   {
     status: "blocked",
     label: "Blocked",
     icon: "🚫",
-    color: "text-red-700",
-    bgColor: "bg-red-50",
-    borderColor: "border-red-200",
-    dropColor: "bg-red-100",
+    color: "text-red-700 dark:text-red-400",
+    bgColor: "bg-red-50 dark:bg-red-900/10",
+    borderColor: "border-red-200 dark:border-red-800",
+    dropColor: "bg-red-100 dark:bg-red-900/20",
   },
   {
     status: "completed",
     label: "Done",
     icon: "✅",
-    color: "text-green-700",
-    bgColor: "bg-green-50",
-    borderColor: "border-green-200",
-    dropColor: "bg-green-100",
+    color: "text-green-700 dark:text-green-400",
+    bgColor: "bg-green-50 dark:bg-green-900/10",
+    borderColor: "border-green-200 dark:border-green-800",
+    dropColor: "bg-green-100 dark:bg-green-900/20",
   },
 ];
 
 const PRIORITY_COLORS: Record<string, string> = {
-  critical: "bg-red-100 text-red-700 border-red-200",
-  high: "bg-orange-100 text-orange-700 border-orange-200",
-  medium: "bg-blue-100 text-blue-700 border-blue-200",
-  low: "bg-gray-100 text-gray-500 border-gray-200",
+  critical: "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 border-red-200 dark:border-red-800",
+  high: "bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400 border-orange-200 dark:border-orange-800",
+  medium: "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 border-blue-200 dark:border-blue-800",
+  low: "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 border-gray-200 dark:border-gray-700",
 };
 
 interface KanbanCardProps {
@@ -81,16 +81,15 @@ function KanbanCard({ task, projectName, onDragStart, onDragEnd, isDragging, onC
       }}
       onDragEnd={onDragEnd}
       onClick={onClick}
-      className={`bg-white rounded-lg border border-gray-200 p-3 cursor-grab active:cursor-grabbing shadow-sm hover:shadow-md transition-all ${
+      className={`bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-3 cursor-grab active:cursor-grabbing shadow-sm hover:shadow-md transition-all ${
         isDragging ? "opacity-40 scale-95" : "opacity-100"
       }`}
     >
-      {/* Header: number + priority */}
       <div className="flex items-center justify-between mb-1.5">
         <Link
           to={`/task/HQ-${task.taskNumber}`}
           onClick={(e) => e.stopPropagation()}
-          className="text-xs font-bold font-mono text-gray-500 hover:text-amber-600 transition"
+          className="text-xs font-bold font-mono text-gray-500 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-400 transition"
         >
           HQ-{task.taskNumber}
         </Link>
@@ -99,20 +98,18 @@ function KanbanCard({ task, projectName, onDragStart, onDragEnd, isDragging, onC
         </span>
       </div>
 
-      {/* Title */}
-      <h4 className="text-sm font-medium text-gray-900 leading-snug mb-1.5 line-clamp-2">
+      <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 leading-snug mb-1.5 line-clamp-2">
         {task.title}
       </h4>
 
-      {/* Meta: project, assignee, subtasks, due */}
       <div className="flex flex-wrap gap-1.5 items-center">
         {projectName && (
-          <span className="text-[10px] text-sky-600 bg-sky-50 px-1.5 py-0.5 rounded-full">
+          <span className="text-[10px] text-sky-600 dark:text-sky-400 bg-sky-50 dark:bg-sky-900/30 px-1.5 py-0.5 rounded-full">
             📁 {projectName}
           </span>
         )}
         {task.assigneeName && (
-          <span className="text-[10px] text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded-full">
+          <span className="text-[10px] text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-900/30 px-1.5 py-0.5 rounded-full">
             👤 {task.assigneeName}
           </span>
         )}
@@ -124,7 +121,7 @@ function KanbanCard({ task, projectName, onDragStart, onDragEnd, isDragging, onC
           const label = isOverdue ? "overdue" : diffDays === 0 ? "today" : diffDays === 1 ? "tomorrow" : `${diffDays}d`;
           return (
             <span className={`text-[10px] px-1.5 py-0.5 rounded-full ${
-              isOverdue ? "bg-red-100 text-red-600" : diffDays <= 2 ? "bg-amber-100 text-amber-600" : "bg-gray-100 text-gray-500"
+              isOverdue ? "bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400" : diffDays <= 2 ? "bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400" : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400"
             }`}>
               📅 {label}
             </span>
@@ -132,16 +129,15 @@ function KanbanCard({ task, projectName, onDragStart, onDragEnd, isDragging, onC
         })()}
       </div>
 
-      {/* Subtask progress */}
       {subtasksTotal > 0 && (
         <div className="mt-2 flex items-center gap-2">
-          <div className="flex-1 bg-gray-100 rounded-full h-1">
+          <div className="flex-1 bg-gray-100 dark:bg-gray-800 rounded-full h-1">
             <div
               className="bg-green-500 h-1 rounded-full transition-all"
               style={{ width: `${(subtasksDone / subtasksTotal) * 100}%` }}
             />
           </div>
-          <span className="text-[10px] text-gray-400">{subtasksDone}/{subtasksTotal}</span>
+          <span className="text-[10px] text-gray-400 dark:text-gray-500">{subtasksDone}/{subtasksTotal}</span>
         </div>
       )}
     </div>
@@ -202,7 +198,6 @@ function KanbanColumnView({
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
-      {/* Column header */}
       <div className={`px-3 py-2.5 border-b ${column.borderColor} flex items-center justify-between`}>
         <div className="flex items-center gap-1.5">
           <span className="text-sm">{column.icon}</span>
@@ -213,10 +208,9 @@ function KanbanColumnView({
         </span>
       </div>
 
-      {/* Cards */}
       <div className="flex-1 p-2 space-y-2 overflow-y-auto max-h-[calc(100vh-16rem)]">
         {tasks.length === 0 ? (
-          <div className="text-xs text-gray-400 text-center py-6 italic">
+          <div className="text-xs text-gray-400 dark:text-gray-500 text-center py-6 italic">
             {dragOver ? "Drop here" : "No tasks"}
           </div>
         ) : (
diff --git a/frontend/src/components/LoginPage.tsx b/frontend/src/components/LoginPage.tsx
index 69befd7..0345539 100644
--- a/frontend/src/components/LoginPage.tsx
+++ b/frontend/src/components/LoginPage.tsx
@@ -30,23 +30,23 @@ export function LoginPage({ onSuccess }: LoginPageProps) {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 flex items-center justify-center px-4">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center px-4">
       <div className="w-full max-w-sm">
         <div className="text-center mb-8">
           <span className="text-5xl">🔨</span>
-          <h1 className="text-2xl font-bold text-gray-900 mt-3">Hammer Queue</h1>
-          <p className="text-sm text-gray-500 mt-1">Sign in to access the dashboard</p>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-3">Hammer Queue</h1>
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Sign in to access the dashboard</p>
         </div>
 
-        <form onSubmit={handleSubmit} className="bg-white rounded-xl shadow-lg border border-gray-200 p-6 space-y-4">
+        <form onSubmit={handleSubmit} className="bg-white dark:bg-gray-900 rounded-xl shadow-lg border border-gray-200 dark:border-gray-800 p-6 space-y-4">
           {error && (
-            <div className="bg-red-50 border border-red-200 text-red-700 rounded-lg p-3 text-sm">
+            <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 rounded-lg p-3 text-sm">
               {error}
             </div>
           )}
 
           <div>
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
               Email
             </label>
             <input
@@ -56,13 +56,13 @@ export function LoginPage({ onSuccess }: LoginPageProps) {
               onChange={(e) => setEmail(e.target.value)}
               required
               autoFocus
-              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent"
+              className="w-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-amber-600 focus:border-transparent placeholder:text-gray-400 dark:placeholder:text-gray-500"
               placeholder="you@example.com"
             />
           </div>
 
           <div>
-            <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
               Password
             </label>
             <input
@@ -71,7 +71,7 @@ export function LoginPage({ onSuccess }: LoginPageProps) {
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required
-              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent"
+              className="w-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-amber-600 focus:border-transparent placeholder:text-gray-400 dark:placeholder:text-gray-500"
               placeholder="••••••••"
             />
           </div>
@@ -85,7 +85,7 @@ export function LoginPage({ onSuccess }: LoginPageProps) {
           </button>
         </form>
 
-        <p className="text-center text-xs text-gray-400 mt-6">
+        <p className="text-center text-xs text-gray-400 dark:text-gray-500 mt-6">
           Invite-only access · Contact admin for an account
         </p>
       </div>
diff --git a/frontend/src/components/TaskCard.tsx b/frontend/src/components/TaskCard.tsx
index 51dd510..ff0d5b4 100644
--- a/frontend/src/components/TaskCard.tsx
+++ b/frontend/src/components/TaskCard.tsx
@@ -8,12 +8,12 @@ const priorityColors: Record<TaskPriority, string> = {
 };
 
 const sourceColors: Record<string, string> = {
-  donovan: "bg-purple-100 text-purple-800",
-  david: "bg-green-100 text-green-800",
-  hammer: "bg-yellow-100 text-yellow-800",
-  heartbeat: "bg-pink-100 text-pink-800",
-  cron: "bg-indigo-100 text-indigo-800",
-  other: "bg-gray-100 text-gray-800",
+  donovan: "bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300",
+  david: "bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300",
+  hammer: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300",
+  heartbeat: "bg-pink-100 dark:bg-pink-900/30 text-pink-800 dark:text-pink-300",
+  cron: "bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300",
+  other: "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300",
 };
 
 const statusActions: Record<TaskStatus, { label: string; next: TaskStatus }[]> = {
@@ -76,8 +76,8 @@ export function TaskCard({
       onClick={onClick}
       className={`rounded-xl border p-3 sm:p-4 transition-all cursor-pointer group ${
         isActive
-          ? "border-amber-300 bg-gradient-to-r from-amber-50 to-orange-50 shadow-lg shadow-amber-100/50 hover:shadow-xl hover:shadow-amber-200/50"
-          : "border-gray-200 bg-white shadow-sm hover:shadow-md hover:border-gray-300"
+          ? "border-amber-300 dark:border-amber-700 bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 shadow-lg shadow-amber-100/50 dark:shadow-amber-900/20 hover:shadow-xl hover:shadow-amber-200/50 dark:hover:shadow-amber-900/30"
+          : "border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-600"
       }`}
     >
       {/* Top row: title + expand chevron */}
@@ -90,14 +90,14 @@ export function TaskCard({
                 <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-amber-500"></span>
               </span>
             )}
-            <h3 className={`font-semibold text-sm sm:text-base leading-snug ${isActive ? "text-amber-900" : "text-gray-900"}`} style={{ wordBreak: "break-word" }}>
+            <h3 className={`font-semibold text-sm sm:text-base leading-snug ${isActive ? "text-amber-900 dark:text-amber-200" : "text-gray-900 dark:text-gray-100"}`} style={{ wordBreak: "break-word" }}>
               {task.title}
             </h3>
           </div>
 
           <div className="flex items-center gap-1.5 sm:gap-2 mb-1.5 flex-wrap">
             <span
-              className="text-[10px] sm:text-xs px-1.5 py-0.5 rounded font-mono font-bold bg-amber-100 text-amber-700 cursor-pointer hover:bg-amber-200 transition"
+              className="text-[10px] sm:text-xs px-1.5 py-0.5 rounded font-mono font-bold bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 cursor-pointer hover:bg-amber-200 dark:hover:bg-amber-900/50 transition"
               title={`Click to copy: ${displayId}`}
               onClick={(e) => {
                 e.stopPropagation();
@@ -112,30 +112,28 @@ export function TaskCard({
             <span className={`text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full font-medium ${sourceColors[task.source] || sourceColors.other}`}>
               {task.source}
             </span>
-            {/* Project badge */}
             {projectName && (
-              <span className="text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full font-medium bg-sky-100 text-sky-700">
+              <span className="text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full font-medium bg-sky-100 dark:bg-sky-900/30 text-sky-700 dark:text-sky-400">
                 📁 {projectName}
               </span>
             )}
-            {/* Assignee badge */}
             {task.assigneeName && (
-              <span className="text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full font-medium bg-emerald-100 text-emerald-700">
+              <span className="text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full font-medium bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400">
                 👤 {task.assigneeName}
               </span>
             )}
-            <span className="text-[10px] sm:text-xs text-gray-400">
+            <span className="text-[10px] sm:text-xs text-gray-400 dark:text-gray-500">
               {timeAgo(task.createdAt)}
             </span>
             {noteCount > 0 && (
-              <span className="text-[10px] sm:text-xs text-gray-400 flex items-center gap-0.5">
+              <span className="text-[10px] sm:text-xs text-gray-400 dark:text-gray-500 flex items-center gap-0.5">
                 💬 {noteCount}
               </span>
             )}
           </div>
 
           {task.description && (
-            <p className="text-xs sm:text-sm text-gray-500 line-clamp-1">{task.description}</p>
+            <p className="text-xs sm:text-sm text-gray-500 dark:text-gray-400 line-clamp-1">{task.description}</p>
           )}
 
           {/* Due date and subtask badges */}
@@ -148,7 +146,7 @@ export function TaskCard({
               const isDueSoon = diffDays <= 2 && !isOverdue;
               return (
                 <span className={`text-[10px] sm:text-xs px-1.5 py-0.5 rounded-full font-medium inline-flex items-center gap-0.5 ${
-                  isOverdue ? "bg-red-100 text-red-700" : isDueSoon ? "bg-amber-100 text-amber-700" : "bg-gray-100 text-gray-500"
+                  isOverdue ? "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400" : isDueSoon ? "bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400" : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400"
                 }`}>
                   📅 {isOverdue ? `${Math.abs(diffDays)}d overdue` : diffDays === 0 ? "today" : diffDays === 1 ? "tomorrow" : `${diffDays}d`}
                 </span>
@@ -159,8 +157,8 @@ export function TaskCard({
               const total = task.subtasks.length;
               const pct = Math.round((done / total) * 100);
               return (
-                <span className="text-[10px] sm:text-xs text-gray-400 inline-flex items-center gap-1.5">
-                  <span className="inline-block w-12 h-1 bg-gray-200 rounded-full overflow-hidden">
+                <span className="text-[10px] sm:text-xs text-gray-400 dark:text-gray-500 inline-flex items-center gap-1.5">
+                  <span className="inline-block w-12 h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                     <span className={`block h-full rounded-full ${pct === 100 ? "bg-green-500" : "bg-amber-400"}`} style={{ width: `${pct}%` }} />
                   </span>
                   {done}/{total}
@@ -170,23 +168,22 @@ export function TaskCard({
           </div>
         </div>
 
-        {/* Expand chevron - always visible */}
-        <div className="shrink-0 mt-1 text-gray-300 group-hover:text-gray-500 transition">
+        {/* Expand chevron */}
+        <div className="shrink-0 mt-1 text-gray-300 dark:text-gray-600 group-hover:text-gray-500 dark:group-hover:text-gray-400 transition">
           <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
           </svg>
         </div>
       </div>
 
-      {/* Action buttons row - hidden on mobile, shown on sm+ */}
-      <div className="hidden sm:flex items-center gap-1 mt-2 pt-2 border-t border-gray-100" onClick={(e) => e.stopPropagation()}>
-        {/* Reorder buttons for queued tasks */}
+      {/* Action buttons row */}
+      <div className="hidden sm:flex items-center gap-1 mt-2 pt-2 border-t border-gray-100 dark:border-gray-800" onClick={(e) => e.stopPropagation()}>
         {task.status === "queued" && (
           <div className="flex gap-1 mr-1">
             <button
               onClick={onMoveUp}
               disabled={isFirst}
-              className="text-xs px-1.5 py-0.5 rounded-md bg-gray-100 hover:bg-gray-200 disabled:opacity-30 disabled:cursor-not-allowed transition"
+              className="text-xs px-1.5 py-0.5 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed transition"
               title="Move up"
             >
               ↑
@@ -194,7 +191,7 @@ export function TaskCard({
             <button
               onClick={onMoveDown}
               disabled={isLast}
-              className="text-xs px-1.5 py-0.5 rounded-md bg-gray-100 hover:bg-gray-200 disabled:opacity-30 disabled:cursor-not-allowed transition"
+              className="text-xs px-1.5 py-0.5 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed transition"
               title="Move down"
             >
               ↓
@@ -202,12 +199,11 @@ export function TaskCard({
           </div>
         )}
 
-        {/* Quick status actions */}
         {actions.slice(0, 2).map((action) => (
           <button
             key={action.next}
             onClick={() => onStatusChange(task.id, action.next)}
-            className="text-xs px-2.5 py-1.5 rounded-lg border border-gray-200 hover:bg-gray-50 whitespace-nowrap text-gray-600 hover:text-gray-800 transition font-medium"
+            className="text-xs px-2.5 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 whitespace-nowrap text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition font-medium"
           >
             {action.label}
           </button>
diff --git a/frontend/src/components/TaskDetailPanel.tsx b/frontend/src/components/TaskDetailPanel.tsx
index 6ab18f7..f74f449 100644
--- a/frontend/src/components/TaskDetailPanel.tsx
+++ b/frontend/src/components/TaskDetailPanel.tsx
@@ -18,11 +18,11 @@ const priorityIcons: Record<TaskPriority, string> = {
 };
 
 const statusColors: Record<TaskStatus, string> = {
-  active: "bg-amber-100 text-amber-800 border-amber-300",
-  queued: "bg-blue-100 text-blue-800 border-blue-300",
-  blocked: "bg-red-100 text-red-800 border-red-300",
-  completed: "bg-green-100 text-green-800 border-green-300",
-  cancelled: "bg-gray-100 text-gray-600 border-gray-300",
+  active: "bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300 border-amber-300 dark:border-amber-700",
+  queued: "bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-300 dark:border-blue-700",
+  blocked: "bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-red-300 dark:border-red-700",
+  completed: "bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-300 dark:border-green-700",
+  cancelled: "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-700",
 };
 
 const statusIcons: Record<TaskStatus, string> = {
@@ -34,33 +34,33 @@ const statusIcons: Record<TaskStatus, string> = {
 };
 
 const sourceColors: Record<string, string> = {
-  donovan: "bg-purple-100 text-purple-800",
-  david: "bg-green-100 text-green-800",
-  hammer: "bg-yellow-100 text-yellow-800",
-  heartbeat: "bg-pink-100 text-pink-800",
-  cron: "bg-indigo-100 text-indigo-800",
-  other: "bg-gray-100 text-gray-800",
+  donovan: "bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300",
+  david: "bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300",
+  hammer: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300",
+  heartbeat: "bg-pink-100 dark:bg-pink-900/30 text-pink-800 dark:text-pink-300",
+  cron: "bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300",
+  other: "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300",
 };
 
 const statusActions: Record<TaskStatus, { label: string; next: TaskStatus; color: string }[]> = {
   active: [
-    { label: "⏸ Pause", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" },
-    { label: "🚫 Block", next: "blocked", color: "bg-red-50 text-red-700 border-red-200 hover:bg-red-100" },
-    { label: "✅ Complete", next: "completed", color: "bg-green-50 text-green-700 border-green-200 hover:bg-green-100" },
-    { label: "❌ Cancel", next: "cancelled", color: "bg-gray-50 text-gray-700 border-gray-200 hover:bg-gray-100" },
+    { label: "⏸ Pause", next: "queued", color: "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900/30" },
+    { label: "🚫 Block", next: "blocked", color: "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800 hover:bg-red-100 dark:hover:bg-red-900/30" },
+    { label: "✅ Complete", next: "completed", color: "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 border-green-200 dark:border-green-800 hover:bg-green-100 dark:hover:bg-green-900/30" },
+    { label: "❌ Cancel", next: "cancelled", color: "bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700" },
   ],
   queued: [
-    { label: "▶ Activate", next: "active", color: "bg-amber-50 text-amber-700 border-amber-200 hover:bg-amber-100" },
-    { label: "🚫 Block", next: "blocked", color: "bg-red-50 text-red-700 border-red-200 hover:bg-red-100" },
-    { label: "❌ Cancel", next: "cancelled", color: "bg-gray-50 text-gray-700 border-gray-200 hover:bg-gray-100" },
+    { label: "▶ Activate", next: "active", color: "bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 border-amber-200 dark:border-amber-800 hover:bg-amber-100 dark:hover:bg-amber-900/30" },
+    { label: "🚫 Block", next: "blocked", color: "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800 hover:bg-red-100 dark:hover:bg-red-900/30" },
+    { label: "❌ Cancel", next: "cancelled", color: "bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700" },
   ],
   blocked: [
-    { label: "▶ Activate", next: "active", color: "bg-amber-50 text-amber-700 border-amber-200 hover:bg-amber-100" },
-    { label: "📋 Queue", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" },
-    { label: "❌ Cancel", next: "cancelled", color: "bg-gray-50 text-gray-700 border-gray-200 hover:bg-gray-100" },
+    { label: "▶ Activate", next: "active", color: "bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 border-amber-200 dark:border-amber-800 hover:bg-amber-100 dark:hover:bg-amber-900/30" },
+    { label: "📋 Queue", next: "queued", color: "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900/30" },
+    { label: "❌ Cancel", next: "cancelled", color: "bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700" },
   ],
-  completed: [{ label: "🔄 Requeue", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" }],
-  cancelled: [{ label: "🔄 Requeue", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" }],
+  completed: [{ label: "🔄 Requeue", next: "queued", color: "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900/30" }],
+  cancelled: [{ label: "🔄 Requeue", next: "queued", color: "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900/30" }],
 };
 
 const allPriorities: TaskPriority[] = ["critical", "high", "medium", "low"];
@@ -119,7 +119,7 @@ function ElapsedTimer({ since }: { since: string }) {
   }, [since]);
 
   return (
-    <span className="font-mono text-amber-700 font-semibold">{elapsed}</span>
+    <span className="font-mono text-amber-700 dark:text-amber-400 font-semibold">{elapsed}</span>
   );
 }
 
@@ -149,11 +149,11 @@ function EditableText({
     return (
       <div
         onClick={() => setEditing(true)}
-        className={`cursor-pointer rounded-md px-2 py-1 -mx-2 -my-1 hover:bg-gray-100 transition group ${className}`}
+        className={`cursor-pointer rounded-md px-2 py-1 -mx-2 -my-1 hover:bg-gray-100 dark:hover:bg-gray-800 transition group ${className}`}
         title="Click to edit"
       >
-        {value || <span className="text-gray-400 italic">{placeholder}</span>}
-        <span className="text-gray-300 opacity-0 group-hover:opacity-100 ml-1 text-xs">✏️</span>
+        {value || <span className="text-gray-400 dark:text-gray-500 italic">{placeholder}</span>}
+        <span className="text-gray-300 dark:text-gray-600 opacity-0 group-hover:opacity-100 ml-1 text-xs">✏️</span>
       </div>
     );
   }
@@ -166,7 +166,7 @@ function EditableText({
         onChange={(e) => onChange(e.target.value)}
         onBlur={stopEditing}
         onKeyDown={(e) => { if (e.key === "Escape") stopEditing(); }}
-        className={`w-full rounded-md border border-blue-300 bg-white px-2 py-1 -mx-2 -my-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200 resize-y min-h-[60px] ${className}`}
+        className={`w-full rounded-md border border-blue-300 dark:border-blue-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-2 py-1 -mx-2 -my-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-800 resize-y min-h-[60px] ${className}`}
         rows={3}
       />
     );
@@ -182,7 +182,7 @@ function EditableText({
         if (e.key === "Enter") stopEditing();
         if (e.key === "Escape") stopEditing();
       }}
-      className={`w-full rounded-md border border-blue-300 bg-white px-2 py-1 -mx-2 -my-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200 ${className}`}
+      className={`w-full rounded-md border border-blue-300 dark:border-blue-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-2 py-1 -mx-2 -my-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-800 ${className}`}
     />
   );
 }
@@ -199,30 +199,30 @@ function CopyableId({ id, taskNumber }: { id: string; taskNumber?: number }) {
   };
 
   return (
-    <div className="px-4 sm:px-6 py-3 border-t border-gray-100 bg-gray-50 flex items-center gap-2">
+    <div className="px-4 sm:px-6 py-3 border-t border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 flex items-center gap-2">
       {displayId && (
         <>
-          <span className="text-xs font-bold text-amber-700 bg-amber-100 px-2 py-0.5 rounded font-mono">{displayId}</span>
+          <span className="text-xs font-bold text-amber-700 dark:text-amber-400 bg-amber-100 dark:bg-amber-900/30 px-2 py-0.5 rounded font-mono">{displayId}</span>
           <button
             onClick={() => handleCopy(displayId, "ref")}
             className={`text-xs px-2 py-0.5 rounded-md border transition font-medium shrink-0 ${
               copied === "ref"
-                ? "bg-green-50 text-green-600 border-green-200"
-                : "bg-white text-gray-500 border-gray-200 hover:bg-gray-100"
+                ? "bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 border-green-200 dark:border-green-800"
+                : "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700"
             }`}
           >
             {copied === "ref" ? "✓" : "📋"}
           </button>
-          <span className="text-gray-300 hidden sm:inline">|</span>
+          <span className="text-gray-300 dark:text-gray-600 hidden sm:inline">|</span>
         </>
       )}
-      <code className="text-[10px] sm:text-xs text-gray-400 font-mono flex-1 truncate select-all hidden sm:block">{id}</code>
+      <code className="text-[10px] sm:text-xs text-gray-400 dark:text-gray-500 font-mono flex-1 truncate select-all hidden sm:block">{id}</code>
       <button
         onClick={() => handleCopy(id, "uuid")}
         className={`text-xs px-2.5 py-1 rounded-md border transition font-medium shrink-0 ${
           copied === "uuid"
-            ? "bg-green-50 text-green-600 border-green-200"
-            : "bg-white text-gray-500 border-gray-200 hover:bg-gray-100 hover:text-gray-700"
+            ? "bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 border-green-200 dark:border-green-800"
+            : "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200"
         }`}
         title="Copy UUID"
       >
@@ -251,7 +251,6 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
   const [deleting, setDeleting] = useState(false);
   const { toast } = useToast();
 
-  // Draft state for editable fields
   const [draftTitle, setDraftTitle] = useState(task.title);
   const [draftDescription, setDraftDescription] = useState(task.description || "");
   const [draftPriority, setDraftPriority] = useState(task.priority);
@@ -263,12 +262,10 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
   const [newSubtaskTitle, setNewSubtaskTitle] = useState("");
   const [addingSubtask, setAddingSubtask] = useState(false);
 
-  // Fetch projects for the selector
   useEffect(() => {
     fetchProjects().then(setProjects).catch(() => {});
   }, []);
 
-  // Keyboard shortcut: Escape to close
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape" && !showDeleteConfirm) onClose();
@@ -277,7 +274,6 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [onClose, showDeleteConfirm]);
 
-  // Reset drafts when task changes
   useEffect(() => {
     setDraftTitle(task.title);
     setDraftDescription(task.description || "");
@@ -288,7 +284,6 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
     setDraftAssigneeName(task.assigneeName || "");
   }, [task.id, task.title, task.description, task.priority, task.source, task.projectId, task.dueDate, task.assigneeName]);
 
-  // Detect if any field has been modified
   const currentDueDate = task.dueDate ? new Date(task.dueDate).toISOString().slice(0, 16) : "";
   const isDirty =
     draftTitle !== task.title ||
@@ -349,7 +344,6 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
     }
   };
 
-  // Legacy single-field save available if needed
   const _handleFieldSave = async (field: string, value: string) => {
     if (!hasToken) return;
     setSaving(true);
@@ -362,26 +356,23 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
       setSaving(false);
     }
   };
-  void _handleFieldSave; // suppress unused warning
+  void _handleFieldSave;
 
   return (
     <>
-      {/* Backdrop */}
       <div
         className="fixed inset-0 bg-black/30 backdrop-blur-sm z-40 transition-opacity"
         onClick={onClose}
       />
 
-      {/* Panel */}
-      <div className="fixed inset-0 sm:inset-y-0 sm:left-auto sm:right-0 w-full sm:max-w-lg bg-white shadow-2xl z-50 flex flex-col animate-slide-in-right">
+      <div className="fixed inset-0 sm:inset-y-0 sm:left-auto sm:right-0 w-full sm:max-w-lg bg-white dark:bg-gray-900 shadow-2xl z-50 flex flex-col animate-slide-in-right">
         {/* Header */}
-        <div className={`px-4 sm:px-6 py-3 sm:py-4 border-b ${isActive ? "bg-gradient-to-r from-amber-50 to-orange-50 border-amber-200" : "bg-gray-50 border-gray-200"}`}>
+        <div className={`px-4 sm:px-6 py-3 sm:py-4 border-b ${isActive ? "bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border-amber-200 dark:border-amber-800" : "bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700"}`}>
           <div className="flex items-start justify-between gap-2 sm:gap-3">
             <div className="flex-1 min-w-0">
-              {/* Back button on mobile */}
               <button
                 onClick={onClose}
-                className="sm:hidden flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 mb-2 -ml-1 px-1 py-0.5 rounded transition"
+                className="sm:hidden flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 mb-2 -ml-1 px-1 py-0.5 rounded transition"
               >
                 <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                   <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
@@ -396,29 +387,28 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
                   </span>
                 )}
                 {task.taskNumber && (
-                  <span className="text-xs font-bold text-amber-700 bg-amber-100 px-2 py-0.5 rounded font-mono">
+                  <span className="text-xs font-bold text-amber-700 dark:text-amber-400 bg-amber-100 dark:bg-amber-900/30 px-2 py-0.5 rounded font-mono">
                     HQ-{task.taskNumber}
                   </span>
                 )}
                 <span className={`text-xs px-2.5 py-1 rounded-full font-semibold border ${statusColors[task.status]}`}>
                   {statusIcons[task.status]} {task.status.toUpperCase()}
                 </span>
-                {saving && <span className="text-xs text-blue-500 animate-pulse">Saving...</span>}
+                {saving && <span className="text-xs text-blue-500 dark:text-blue-400 animate-pulse">Saving...</span>}
               </div>
               {hasToken ? (
                 <EditableText
                   value={draftTitle}
                   onChange={setDraftTitle}
-                  className="text-base sm:text-lg font-bold text-gray-900 leading-snug"
+                  className="text-base sm:text-lg font-bold text-gray-900 dark:text-gray-100 leading-snug"
                 />
               ) : (
-                <h2 className="text-base sm:text-lg font-bold text-gray-900 leading-snug">{task.title}</h2>
+                <h2 className="text-base sm:text-lg font-bold text-gray-900 dark:text-gray-100 leading-snug">{task.title}</h2>
               )}
             </div>
-            {/* Close X button - hidden on mobile (use Back instead) */}
             <button
               onClick={onClose}
-              className="hidden sm:block p-2 -mr-2 -mt-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition"
+              className="hidden sm:block p-2 -mr-2 -mt-1 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition"
               title="Close"
             >
               <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -431,10 +421,10 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
         {/* Content */}
         <div className="flex-1 overflow-y-auto">
           {/* Priority & Source */}
-          <div className="px-4 sm:px-6 py-4 border-b border-gray-100">
+          <div className="px-4 sm:px-6 py-4 border-b border-gray-100 dark:border-gray-800">
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div>
-                <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Priority</h3>
+                <h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Priority</h3>
                 {hasToken ? (
                   <div className="flex flex-wrap gap-1.5">
                     {allPriorities.map((p) => (
@@ -444,7 +434,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
                         className={`text-xs px-2.5 py-1 rounded-full font-medium transition ${
                           p === draftPriority
                             ? priorityColors[p]
-                            : "bg-gray-100 text-gray-500 hover:bg-gray-200"
+                            : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
                         }`}
                       >
                         {priorityIcons[p]} {p}
@@ -458,7 +448,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
                 )}
               </div>
               <div>
-                <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Source</h3>
+                <h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Source</h3>
                 {hasToken ? (
                   <div className="flex flex-wrap gap-1.5">
                     {allSources.map((s) => (
@@ -468,7 +458,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
                         className={`text-xs px-2.5 py-1 rounded-full font-medium transition ${
                           s === draftSource
                             ? sourceColors[s] || sourceColors.other
-                            : "bg-gray-100 text-gray-500 hover:bg-gray-200"
+                            : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
                         }`}
                       >
                         {s}
@@ -486,13 +476,13 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
 
           {/* Project */}
           {(hasToken || task.projectId) && (
-            <div className="px-4 sm:px-6 py-4 border-b border-gray-100">
-              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Project</h3>
+            <div className="px-4 sm:px-6 py-4 border-b border-gray-100 dark:border-gray-800">
+              <h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Project</h3>
               {hasToken ? (
                 <select
                   value={draftProjectId}
                   onChange={(e) => setDraftProjectId(e.target.value)}
-                  className="text-sm border border-gray-200 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 bg-white w-full max-w-xs"
+                  className="text-sm border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 w-full max-w-xs"
                 >
                   <option value="">No project</option>
                   {projects.map((p) => (
@@ -500,7 +490,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
                   ))}
                 </select>
               ) : (
-                <span className="text-sm text-gray-700">
+                <span className="text-sm text-gray-700 dark:text-gray-300">
                   {projects.find((p) => p.id === task.projectId)?.name || task.projectId || "None"}
                 </span>
               )}
@@ -508,8 +498,8 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
           )}
 
           {/* Assignee */}
-          <div className="px-4 sm:px-6 py-4 border-b border-gray-100">
-            <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Assignee</h3>
+          <div className="px-4 sm:px-6 py-4 border-b border-gray-100 dark:border-gray-800">
+            <h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Assignee</h3>
             {hasToken ? (
               <div className="flex items-center gap-2">
                 <div className="flex gap-1.5 flex-wrap">
@@ -520,7 +510,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
                       className={`text-xs px-2.5 py-1.5 rounded-lg font-medium transition border ${
                         draftAssigneeName === name
                           ? "bg-emerald-500 text-white border-emerald-500"
-                          : "bg-white text-gray-600 border-gray-200 hover:border-gray-300 hover:bg-gray-50"
+                          : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
                       }`}
                     >
                       👤 {name}
@@ -528,39 +518,39 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
                   ))}
                 </div>
                 {draftAssigneeName && !["Hammer", "Donovan", "David"].includes(draftAssigneeName) && (
-                  <span className="text-xs px-2 py-1 bg-emerald-100 text-emerald-700 rounded-full font-medium">
+                  <span className="text-xs px-2 py-1 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 rounded-full font-medium">
                     👤 {draftAssigneeName}
                   </span>
                 )}
               </div>
             ) : (
-              <span className="text-sm text-gray-700">
+              <span className="text-sm text-gray-700 dark:text-gray-300">
                 {task.assigneeName ? (
-                  <span className="text-xs px-2 py-1 bg-emerald-100 text-emerald-700 rounded-full font-medium">
+                  <span className="text-xs px-2 py-1 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 rounded-full font-medium">
                     👤 {task.assigneeName}
                   </span>
                 ) : (
-                  <span className="text-gray-400 italic">Unassigned</span>
+                  <span className="text-gray-400 dark:text-gray-500 italic">Unassigned</span>
                 )}
               </span>
             )}
           </div>
 
           {/* Due Date */}
-          <div className="px-4 sm:px-6 py-4 border-b border-gray-100">
-            <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Due Date</h3>
+          <div className="px-4 sm:px-6 py-4 border-b border-gray-100 dark:border-gray-800">
+            <h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Due Date</h3>
             {hasToken ? (
               <div className="flex items-center gap-2">
                 <input
                   type="datetime-local"
                   value={draftDueDate}
                   onChange={(e) => setDraftDueDate(e.target.value)}
-                  className="text-sm border border-gray-200 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 bg-white"
+                  className="text-sm border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
                 />
                 {draftDueDate && (
                   <button
                     onClick={() => setDraftDueDate("")}
-                    className="text-xs text-gray-400 hover:text-red-500 transition"
+                    className="text-xs text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition"
                     title="Clear due date"
                   >
                     ✕
@@ -575,7 +565,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
                   const isDueSoon = diffDays <= 2 && !isOverdue;
                   return (
                     <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${
-                      isOverdue ? "bg-red-100 text-red-700" : isDueSoon ? "bg-amber-100 text-amber-700" : "bg-gray-100 text-gray-600"
+                      isOverdue ? "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400" : isDueSoon ? "bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400" : "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
                     }`}>
                       {isOverdue ? `${Math.abs(diffDays)}d overdue` : diffDays === 0 ? "Due today" : diffDays === 1 ? "Due tomorrow" : `${diffDays}d left`}
                     </span>
@@ -583,53 +573,53 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
                 })()}
               </div>
             ) : (
-              <span className="text-sm text-gray-700">
-                {task.dueDate ? new Date(task.dueDate).toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit" }) : <span className="text-gray-400 italic">No due date</span>}
+              <span className="text-sm text-gray-700 dark:text-gray-300">
+                {task.dueDate ? new Date(task.dueDate).toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit" }) : <span className="text-gray-400 dark:text-gray-500 italic">No due date</span>}
               </span>
             )}
           </div>
 
           {/* Description */}
-          <div className="px-4 sm:px-6 py-4 border-b border-gray-100">
-            <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Description</h3>
+          <div className="px-4 sm:px-6 py-4 border-b border-gray-100 dark:border-gray-800">
+            <h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Description</h3>
             {hasToken ? (
               <EditableText
                 value={draftDescription}
                 onChange={setDraftDescription}
                 multiline
-                className="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap"
+                className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed whitespace-pre-wrap"
                 placeholder="Add a description..."
               />
             ) : (
-              <p className="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap">
-                {task.description || <span className="text-gray-400 italic">No description</span>}
+              <p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed whitespace-pre-wrap">
+                {task.description || <span className="text-gray-400 dark:text-gray-500 italic">No description</span>}
               </p>
             )}
           </div>
 
           {/* Time Info */}
-          <div className="px-4 sm:px-6 py-4 border-b border-gray-100">
-            <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Timeline</h3>
+          <div className="px-4 sm:px-6 py-4 border-b border-gray-100 dark:border-gray-800">
+            <h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">Timeline</h3>
             <div className="space-y-2">
               <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm gap-0.5">
-                <span className="text-gray-500">Created</span>
-                <span className="text-gray-700 font-medium text-xs sm:text-sm">{formatDate(task.createdAt)} <span className="text-gray-400 text-xs">({timeAgo(task.createdAt)})</span></span>
+                <span className="text-gray-500 dark:text-gray-400">Created</span>
+                <span className="text-gray-700 dark:text-gray-300 font-medium text-xs sm:text-sm">{formatDate(task.createdAt)} <span className="text-gray-400 dark:text-gray-500 text-xs">({timeAgo(task.createdAt)})</span></span>
               </div>
               {task.updatedAt !== task.createdAt && (
                 <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm gap-0.5">
-                  <span className="text-gray-500">Updated</span>
-                  <span className="text-gray-700 font-medium text-xs sm:text-sm">{formatDate(task.updatedAt)} <span className="text-gray-400 text-xs">({timeAgo(task.updatedAt)})</span></span>
+                  <span className="text-gray-500 dark:text-gray-400">Updated</span>
+                  <span className="text-gray-700 dark:text-gray-300 font-medium text-xs sm:text-sm">{formatDate(task.updatedAt)} <span className="text-gray-400 dark:text-gray-500 text-xs">({timeAgo(task.updatedAt)})</span></span>
                 </div>
               )}
               {task.completedAt && (
                 <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm gap-0.5">
-                  <span className="text-gray-500">Completed</span>
-                  <span className="text-gray-700 font-medium text-xs sm:text-sm">{formatDate(task.completedAt)}</span>
+                  <span className="text-gray-500 dark:text-gray-400">Completed</span>
+                  <span className="text-gray-700 dark:text-gray-300 font-medium text-xs sm:text-sm">{formatDate(task.completedAt)}</span>
                 </div>
               )}
               {isActive && (
-                <div className="flex items-center justify-between text-sm mt-1 pt-2 border-t border-amber-100">
-                  <span className="text-amber-600 font-medium">⏱ Running for</span>
+                <div className="flex items-center justify-between text-sm mt-1 pt-2 border-t border-amber-100 dark:border-amber-900/30">
+                  <span className="text-amber-600 dark:text-amber-400 font-medium">⏱ Running for</span>
                   <ElapsedTimer since={task.updatedAt} />
                 </div>
               )}
@@ -637,19 +627,18 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
           </div>
 
           {/* Subtasks */}
-          <div className="px-4 sm:px-6 py-4 border-b border-gray-100">
-            <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
+          <div className="px-4 sm:px-6 py-4 border-b border-gray-100 dark:border-gray-800">
+            <h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">
               Subtasks {task.subtasks?.length > 0 && (
-                <span className="text-gray-300 ml-1">
+                <span className="text-gray-300 dark:text-gray-600 ml-1">
                   ({task.subtasks.filter(s => s.completed).length}/{task.subtasks.length})
                 </span>
               )}
             </h3>
 
-            {/* Subtask progress bar */}
             {task.subtasks?.length > 0 && (
               <div className="mb-3">
-                <div className="w-full bg-gray-200 rounded-full h-1.5">
+                <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
                   <div
                     className="bg-green-500 h-1.5 rounded-full transition-all duration-300"
                     style={{ width: `${(task.subtasks.filter(s => s.completed).length / task.subtasks.length) * 100}%` }}
@@ -658,7 +647,6 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
               </div>
             )}
 
-            {/* Subtask list */}
             {task.subtasks?.length > 0 && (
               <div className="space-y-1 mb-3">
                 {task.subtasks.map((subtask) => (
@@ -675,7 +663,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
                       className={`w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition ${
                         subtask.completed
                           ? "bg-green-500 border-green-500 text-white"
-                          : "border-gray-300 hover:border-amber-400"
+                          : "border-gray-300 dark:border-gray-600 hover:border-amber-400 dark:hover:border-amber-500"
                       }`}
                     >
                       {subtask.completed && (
@@ -684,7 +672,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
                         </svg>
                       )}
                     </button>
-                    <span className={`text-sm flex-1 ${subtask.completed ? "line-through text-gray-400" : "text-gray-700"}`}>
+                    <span className={`text-sm flex-1 ${subtask.completed ? "line-through text-gray-400 dark:text-gray-500" : "text-gray-700 dark:text-gray-300"}`}>
                       {subtask.title}
                     </span>
                     {hasToken && (
@@ -697,7 +685,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
                             console.error("Failed to delete subtask:", e);
                           }
                         }}
-                        className="opacity-0 group-hover:opacity-100 text-gray-300 hover:text-red-400 transition p-0.5"
+                        className="opacity-0 group-hover:opacity-100 text-gray-300 dark:text-gray-600 hover:text-red-400 dark:hover:text-red-400 transition p-0.5"
                         title="Remove subtask"
                       >
                         <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -710,7 +698,6 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
               </div>
             )}
 
-            {/* Add subtask input */}
             {hasToken && (
               <div className="flex gap-2">
                 <input
@@ -718,7 +705,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
                   value={newSubtaskTitle}
                   onChange={(e) => setNewSubtaskTitle(e.target.value)}
                   placeholder="Add a subtask..."
-                  className="flex-1 text-sm border border-gray-200 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 focus:border-amber-300"
+                  className="flex-1 text-sm border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 focus:border-amber-300 dark:focus:border-amber-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500"
                   onKeyDown={async (e) => {
                     if (e.key === "Enter" && newSubtaskTitle.trim()) {
                       setAddingSubtask(true);
@@ -760,13 +747,12 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
 
           {/* Progress Notes */}
           <div className="px-4 sm:px-6 py-4">
-            <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
+            <h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">
               Progress Notes {task.progressNotes?.length > 0 && (
-                <span className="text-gray-300 ml-1">({task.progressNotes.length})</span>
+                <span className="text-gray-300 dark:text-gray-600 ml-1">({task.progressNotes.length})</span>
               )}
             </h3>
 
-            {/* Add note input */}
             {hasToken && (
               <div className="mb-4">
                 <div className="flex gap-2">
@@ -775,7 +761,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
                     onChange={(e) => setNoteText(e.target.value)}
                     placeholder="Add a progress note..."
                     rows={2}
-                    className="flex-1 text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 focus:border-amber-300 resize-y min-h-[40px] max-h-32"
+                    className="flex-1 text-sm border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 focus:border-amber-300 dark:focus:border-amber-700 resize-y min-h-[40px] max-h-32 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500"
                     onKeyDown={(e) => {
                       if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
                         e.preventDefault();
@@ -810,12 +796,12 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
                     {addingNote ? "..." : "Add"}
                   </button>
                 </div>
-                <p className="text-[10px] text-gray-400 mt-1">⌘+Enter to submit</p>
+                <p className="text-[10px] text-gray-400 dark:text-gray-500 mt-1">⌘+Enter to submit</p>
               </div>
             )}
 
             {!task.progressNotes || task.progressNotes.length === 0 ? (
-              <div className="text-sm text-gray-400 italic py-4 text-center border-2 border-dashed border-gray-100 rounded-lg">
+              <div className="text-sm text-gray-400 dark:text-gray-500 italic py-4 text-center border-2 border-dashed border-gray-100 dark:border-gray-800 rounded-lg">
                 No progress notes yet
               </div>
             ) : (
@@ -825,24 +811,21 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
                   .reverse()
                   .map((note, i) => (
                     <div key={i} className="relative pl-6 pb-4 last:pb-0 group">
-                      {/* Timeline line */}
                       {i < task.progressNotes.length - 1 && (
-                        <div className="absolute left-[9px] top-3 bottom-0 w-0.5 bg-gray-200 group-last:hidden" />
+                        <div className="absolute left-[9px] top-3 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700 group-last:hidden" />
                       )}
-                      {/* Timeline dot */}
                       <div className={`absolute left-0 top-1 w-[18px] h-[18px] rounded-full border-2 flex items-center justify-center ${
                         i === 0 && isActive
-                          ? "border-amber-400 bg-amber-50"
-                          : "border-gray-300 bg-white"
+                          ? "border-amber-400 dark:border-amber-600 bg-amber-50 dark:bg-amber-900/30"
+                          : "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900"
                       }`}>
                         <div className={`w-2 h-2 rounded-full ${
-                          i === 0 && isActive ? "bg-amber-500" : "bg-gray-300"
+                          i === 0 && isActive ? "bg-amber-500" : "bg-gray-300 dark:bg-gray-600"
                         }`} />
                       </div>
-                      {/* Content */}
                       <div>
-                        <p className="text-sm text-gray-700 leading-relaxed">{note.note}</p>
-                        <p className="text-xs text-gray-400 mt-0.5">{formatTimestamp(note.timestamp)} · {timeAgo(note.timestamp)}</p>
+                        <p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">{note.note}</p>
+                        <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{formatTimestamp(note.timestamp)} · {timeAgo(note.timestamp)}</p>
                       </div>
                     </div>
                   ))}
@@ -853,20 +836,20 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
 
         {/* Save / Cancel Bar */}
         {hasToken && isDirty && (
-          <div className="px-4 sm:px-6 py-3 border-t border-blue-200 bg-blue-50 flex items-center justify-between animate-slide-up">
-            <span className="text-sm text-blue-700 font-medium">Unsaved changes</span>
+          <div className="px-4 sm:px-6 py-3 border-t border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20 flex items-center justify-between animate-slide-up">
+            <span className="text-sm text-blue-700 dark:text-blue-300 font-medium">Unsaved changes</span>
             <div className="flex gap-2">
               <button
                 onClick={handleCancel}
                 disabled={saving}
-                className="text-sm px-4 py-2 rounded-lg border border-gray-300 bg-white text-gray-700 font-medium hover:bg-gray-50 transition disabled:opacity-50"
+                className="text-sm px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition disabled:opacity-50"
               >
                 Cancel
               </button>
               <button
                 onClick={handleSave}
                 disabled={saving}
-                className="text-sm px-4 py-2 rounded-lg border border-blue-400 bg-blue-600 text-white font-medium hover:bg-blue-700 transition disabled:opacity-50"
+                className="text-sm px-4 py-2 rounded-lg border border-blue-400 dark:border-blue-600 bg-blue-600 text-white font-medium hover:bg-blue-700 transition disabled:opacity-50"
               >
                 {saving ? "Saving..." : "Save"}
               </button>
@@ -876,8 +859,8 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
 
         {/* Actions Footer */}
         {hasToken && actions.length > 0 && (
-          <div className="px-4 sm:px-6 py-4 border-t border-gray-200 bg-gray-50">
-            <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Actions</h3>
+          <div className="px-4 sm:px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+            <h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">Actions</h3>
             <div className="flex flex-wrap gap-2 items-center">
               {actions.map((action) => (
                 <button
@@ -895,14 +878,14 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
               {!showDeleteConfirm ? (
                 <button
                   onClick={() => setShowDeleteConfirm(true)}
-                  className="text-xs text-gray-400 hover:text-red-500 px-2 py-1.5 rounded transition"
+                  className="text-xs text-gray-400 dark:text-gray-500 hover:text-red-500 dark:hover:text-red-400 px-2 py-1.5 rounded transition"
                   title="Delete task"
                 >
                   🗑 Delete
                 </button>
               ) : (
-                <div className="flex items-center gap-2 bg-red-50 border border-red-200 rounded-lg px-3 py-2 animate-slide-up">
-                  <span className="text-xs text-red-700">Delete this task?</span>
+                <div className="flex items-center gap-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg px-3 py-2 animate-slide-up">
+                  <span className="text-xs text-red-700 dark:text-red-400">Delete this task?</span>
                   <button
                     onClick={handleDelete}
                     disabled={deleting}
@@ -912,7 +895,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
                   </button>
                   <button
                     onClick={() => setShowDeleteConfirm(false)}
-                    className="text-xs px-2 py-1 text-gray-500 hover:text-gray-700 transition"
+                    className="text-xs px-2 py-1 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition"
                   >
                     Cancel
                   </button>
@@ -922,7 +905,6 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
           </div>
         )}
 
-        {/* Task ID - click to copy */}
         <CopyableId id={task.id} taskNumber={task.taskNumber} />
       </div>
     </>
diff --git a/frontend/src/hooks/useTheme.tsx b/frontend/src/hooks/useTheme.tsx
new file mode 100644
index 0000000..7a08b63
--- /dev/null
+++ b/frontend/src/hooks/useTheme.tsx
@@ -0,0 +1,66 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+
+type Theme = "light" | "dark" | "system";
+
+interface ThemeContextType {
+  theme: Theme;
+  resolved: "light" | "dark";
+  setTheme: (t: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType>({
+  theme: "system",
+  resolved: "light",
+  setTheme: () => {},
+});
+
+function getSystemTheme(): "light" | "dark" {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+function resolveTheme(theme: Theme): "light" | "dark" {
+  return theme === "system" ? getSystemTheme() : theme;
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    const stored = localStorage.getItem("hammer-theme");
+    return (stored === "light" || stored === "dark" || stored === "system") ? stored : "system";
+  });
+  const [resolved, setResolved] = useState<"light" | "dark">(() => resolveTheme(theme));
+
+  const setTheme = (t: Theme) => {
+    setThemeState(t);
+    localStorage.setItem("hammer-theme", t);
+  };
+
+  // Apply class to <html>
+  useEffect(() => {
+    const r = resolveTheme(theme);
+    setResolved(r);
+    document.documentElement.classList.toggle("dark", r === "dark");
+  }, [theme]);
+
+  // Listen for system theme changes
+  useEffect(() => {
+    if (theme !== "system") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => {
+      const r = resolveTheme("system");
+      setResolved(r);
+      document.documentElement.classList.toggle("dark", r === "dark");
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, resolved, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index fb4e853..4a846dc 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,5 +1,7 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @keyframes slide-in-right {
   from {
     transform: translateX(100%);
diff --git a/frontend/src/pages/ActivityPage.tsx b/frontend/src/pages/ActivityPage.tsx
index ebde861..653f140 100644
--- a/frontend/src/pages/ActivityPage.tsx
+++ b/frontend/src/pages/ActivityPage.tsx
@@ -50,7 +50,6 @@ export function ActivityPage() {
     return items;
   }, [tasks]);
 
-  // Group by day
   const groupedActivity = useMemo(() => {
     const filtered =
       filter === "all"
@@ -77,7 +76,7 @@ export function ActivityPage() {
 
   if (loading && tasks.length === 0) {
     return (
-      <div className="min-h-screen flex items-center justify-center text-gray-400">
+      <div className="min-h-screen flex items-center justify-center text-gray-400 dark:text-gray-500">
         Loading activity...
       </div>
     );
@@ -85,18 +84,18 @@ export function ActivityPage() {
 
   return (
     <div className="min-h-screen">
-      <header className="bg-white border-b border-gray-200 sticky top-14 md:top-0 z-30">
+      <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-14 md:top-0 z-30">
         <div className="max-w-3xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">
           <div>
-            <h1 className="text-xl font-bold text-gray-900">📝 Activity Log</h1>
-            <p className="text-sm text-gray-400">
+            <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">📝 Activity Log</h1>
+            <p className="text-sm text-gray-400 dark:text-gray-500">
               {allActivity.length} updates across {tasks.length} tasks
             </p>
           </div>
           <select
             value={filter}
             onChange={(e) => setFilter(e.target.value)}
-            className="text-sm border border-gray-200 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200"
+            className="text-sm border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
           >
             <option value="all">All Tasks</option>
             <option value="active">Active</option>
@@ -109,25 +108,24 @@ export function ActivityPage() {
 
       <div className="max-w-3xl mx-auto px-4 sm:px-6 py-6">
         {groupedActivity.length === 0 ? (
-          <div className="text-center text-gray-400 py-12">No activity found</div>
+          <div className="text-center text-gray-400 dark:text-gray-500 py-12">No activity found</div>
         ) : (
           <div className="space-y-8">
             {groupedActivity.map((group) => (
               <div key={group.date}>
-                <div className="sticky top-28 md:top-14 z-10 bg-gray-50/95 backdrop-blur-sm py-2 mb-3">
-                  <h2 className="text-sm font-semibold text-gray-500">{group.date}</h2>
+                <div className="sticky top-28 md:top-14 z-10 bg-gray-50/95 dark:bg-gray-950/95 backdrop-blur-sm py-2 mb-3">
+                  <h2 className="text-sm font-semibold text-gray-500 dark:text-gray-400">{group.date}</h2>
                 </div>
                 <div className="space-y-1">
                   {group.items.map((item, i) => (
                     <div
                       key={`${item.task.id}-${i}`}
-                      className="flex gap-3 py-3 px-3 rounded-lg hover:bg-white transition group"
+                      className="flex gap-3 py-3 px-3 rounded-lg hover:bg-white dark:hover:bg-gray-900 transition group"
                     >
-                      {/* Timeline dot */}
                       <div className="flex flex-col items-center pt-1.5">
                         <div className="w-2.5 h-2.5 rounded-full bg-amber-400 shrink-0" />
                         {i < group.items.length - 1 && (
-                          <div className="w-px flex-1 bg-gray-200 mt-1" />
+                          <div className="w-px flex-1 bg-gray-200 dark:bg-gray-700 mt-1" />
                         )}
                       </div>
 
@@ -135,21 +133,21 @@ export function ActivityPage() {
                         <div className="flex items-center gap-2 mb-1 flex-wrap">
                           <Link
                             to={`/task/HQ-${item.task.taskNumber}`}
-                            className="text-xs font-bold text-amber-700 bg-amber-50 px-1.5 py-0.5 rounded font-mono hover:bg-amber-100 transition"
+                            className="text-xs font-bold text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/30 px-1.5 py-0.5 rounded font-mono hover:bg-amber-100 dark:hover:bg-amber-900/50 transition"
                           >
                             HQ-{item.task.taskNumber}
                           </Link>
-                          <span className="text-[10px] text-gray-400">
+                          <span className="text-[10px] text-gray-400 dark:text-gray-500">
                             {formatDate(item.note.timestamp)}
                           </span>
-                          <span className="text-[10px] text-gray-300">
+                          <span className="text-[10px] text-gray-300 dark:text-gray-600">
                             ({timeAgo(item.note.timestamp)})
                           </span>
                         </div>
-                        <p className="text-sm text-gray-700 leading-relaxed">
+                        <p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
                           {item.note.note}
                         </p>
-                        <p className="text-xs text-gray-400 mt-1 truncate">
+                        <p className="text-xs text-gray-400 dark:text-gray-500 mt-1 truncate">
                           {item.task.title}
                         </p>
                       </div>
diff --git a/frontend/src/pages/ChatPage.tsx b/frontend/src/pages/ChatPage.tsx
index 846389e..5ca52c3 100644
--- a/frontend/src/pages/ChatPage.tsx
+++ b/frontend/src/pages/ChatPage.tsx
@@ -70,9 +70,9 @@ function ThreadList({
   const localSessionKeys = new Set(threads.map(t => t.sessionKey));
 
   return (
-    <div className="w-full sm:w-64 bg-white border-r border-gray-200 flex flex-col h-full">
-      <div className="p-3 border-b border-gray-100 flex items-center justify-between">
-        <h3 className="text-sm font-semibold text-gray-600">Threads</h3>
+    <div className="w-full sm:w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col h-full">
+      <div className="p-3 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
+        <h3 className="text-sm font-semibold text-gray-600 dark:text-gray-400">Threads</h3>
         <div className="flex items-center gap-2">
           <button
             onClick={onCreate}
@@ -96,24 +96,24 @@ function ThreadList({
       <div className="flex-1 overflow-y-auto">
         {/* Local threads */}
         {threads.length === 0 && !showGatewaySessions ? (
-          <div className="p-4 text-sm text-gray-400 text-center">
+          <div className="p-4 text-sm text-gray-400 dark:text-gray-500 text-center">
             No threads yet
           </div>
         ) : (
           threads.map((thread) => (
             <div
               key={thread.sessionKey}
-              className={`group relative w-full text-left px-3 py-3 border-b border-gray-50 transition cursor-pointer ${
+              className={`group relative w-full text-left px-3 py-3 border-b border-gray-50 dark:border-gray-800 transition cursor-pointer ${
                 activeThread === thread.sessionKey
-                  ? "bg-amber-50 border-l-2 border-l-amber-500"
-                  : "hover:bg-gray-50"
+                  ? "bg-amber-50 dark:bg-amber-900/20 border-l-2 border-l-amber-500"
+                  : "hover:bg-gray-50 dark:hover:bg-gray-800"
               }`}
               onClick={() => onSelect(thread.sessionKey)}
             >
               {editingKey === thread.sessionKey ? (
                 <input
                   autoFocus
-                  className="text-sm font-medium text-gray-800 w-full bg-white border border-amber-300 rounded px-1 py-0.5 outline-none"
+                  className="text-sm font-medium text-gray-800 dark:text-gray-200 w-full bg-white dark:bg-gray-800 border border-amber-300 dark:border-amber-700 rounded px-1 py-0.5 outline-none"
                   value={editName}
                   onChange={(e) => setEditName(e.target.value)}
                   onBlur={commitRename}
@@ -125,7 +125,7 @@ function ThreadList({
                 />
               ) : (
                 <div
-                  className="text-sm font-medium text-gray-800 truncate pr-6"
+                  className="text-sm font-medium text-gray-800 dark:text-gray-200 truncate pr-6"
                   onDoubleClick={(e) => {
                     e.stopPropagation();
                     startRename(thread.sessionKey, thread.name);
@@ -158,13 +158,13 @@ function ThreadList({
         )}
 
         {/* Gateway sessions browser */}
-        <div className="border-t border-gray-200">
+        <div className="border-t border-gray-200 dark:border-gray-800">
           <button
             onClick={() => {
               onToggleGatewaySessions?.();
               if (!showGatewaySessions) onBrowseSessions?.();
             }}
-            className="w-full px-3 py-2.5 text-xs font-semibold text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition flex items-center justify-between"
+            className="w-full px-3 py-2.5 text-xs font-semibold text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition flex items-center justify-between"
           >
             <span>🔌 Gateway Sessions</span>
             <svg
@@ -177,23 +177,23 @@ function ThreadList({
             </svg>
           </button>
           {showGatewaySessions && (
-            <div className="bg-gray-50">
+            <div className="bg-gray-50 dark:bg-gray-800/50">
               {loadingGatewaySessions ? (
-                <div className="px-3 py-3 text-xs text-gray-400 text-center">Loading sessions...</div>
+                <div className="px-3 py-3 text-xs text-gray-400 dark:text-gray-500 text-center">Loading sessions...</div>
               ) : !gatewaySessions || gatewaySessions.length === 0 ? (
-                <div className="px-3 py-3 text-xs text-gray-400 text-center">No sessions found</div>
+                <div className="px-3 py-3 text-xs text-gray-400 dark:text-gray-500 text-center">No sessions found</div>
               ) : (
                 gatewaySessions.filter(s => !localSessionKeys.has(s.sessionKey)).map((session) => (
                   <div
                     key={session.sessionKey}
-                    className="px-3 py-2.5 border-b border-gray-100 hover:bg-gray-100 cursor-pointer transition"
+                    className="px-3 py-2.5 border-b border-gray-100 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition"
                     onClick={() => onSelect(session.sessionKey)}
                   >
                     <div className="flex items-center gap-1.5">
                       <span className="text-xs">
                         {session.channel === "telegram" ? "📱" : session.kind === "cron" ? "⏰" : "💬"}
                       </span>
-                      <span className="text-xs font-medium text-gray-700 truncate">
+                      <span className="text-xs font-medium text-gray-700 dark:text-gray-300 truncate">
                         {session.sessionKey}
                       </span>
                     </div>
@@ -233,7 +233,7 @@ function MessageBubble({ msg }: { msg: ChatMessage }) {
   if (isSystem) {
     return (
       <div className="text-center my-2">
-        <span className="text-xs text-gray-400 bg-gray-100 px-3 py-1 rounded-full">
+        <span className="text-xs text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded-full">
           {msg.content}
         </span>
       </div>
@@ -255,7 +255,7 @@ function MessageBubble({ msg }: { msg: ChatMessage }) {
           className={`max-w-[75vw] sm:max-w-[60vw] rounded-2xl px-4 py-2.5 ${
             isUser
               ? "bg-blue-500 text-white rounded-br-md"
-              : "bg-gray-100 text-gray-800 rounded-bl-md"
+              : "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-bl-md"
           }`}
         >
           {isUser ? (
@@ -284,7 +284,7 @@ function ThinkingIndicator() {
       <div className="w-8 h-8 bg-amber-500 rounded-full flex items-center justify-center text-sm mr-2 shrink-0 mt-1">
         🔨
       </div>
-      <div className="bg-gray-100 rounded-2xl rounded-bl-md px-4 py-3">
+      <div className="bg-gray-100 dark:bg-gray-800 rounded-2xl rounded-bl-md px-4 py-3">
         <div className="flex gap-1.5">
           <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "0ms" }} />
           <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "150ms" }} />
@@ -352,9 +352,9 @@ function ChatArea({
       {/* Messages */}
       <div className="flex-1 overflow-y-auto px-6 py-4">
         {loading ? (
-          <div className="text-center text-gray-400 py-12">Loading messages...</div>
+          <div className="text-center text-gray-400 dark:text-gray-500 py-12">Loading messages...</div>
         ) : messages.length === 0 ? (
-          <div className="text-center text-gray-400 py-12">
+          <div className="text-center text-gray-400 dark:text-gray-500 py-12">
             <span className="text-4xl block mb-3">🔨</span>
             <p className="text-sm">Send a message to start chatting with Hammer</p>
           </div>
@@ -373,7 +373,7 @@ function ChatArea({
       </div>
 
       {/* Input */}
-      <div className="border-t border-gray-200 bg-white px-4 py-3">
+      <div className="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 py-3">
         {connectionState === "disconnected" && (
           <div className="text-xs text-red-500 mb-2 flex items-center gap-1">
             <span className="w-2 h-2 bg-red-500 rounded-full" />
@@ -395,7 +395,7 @@ function ChatArea({
             placeholder={connected ? "Type a message..." : "Connecting..."}
             disabled={!connected}
             rows={1}
-            className="flex-1 resize-none rounded-xl border border-gray-200 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-200 focus:border-amber-300 disabled:opacity-50 max-h-32"
+            className="flex-1 resize-none rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 focus:border-amber-300 dark:focus:border-amber-700 disabled:opacity-50 max-h-32 placeholder:text-gray-400 dark:placeholder:text-gray-500"
             style={{ minHeight: "42px" }}
           />
           {streaming ? (
@@ -653,19 +653,19 @@ export function ChatPage() {
   return (
     <div className="h-[calc(100vh-3.5rem)] md:h-screen flex flex-col">
       {/* Page Header */}
-      <header className="bg-white border-b border-gray-200 sticky top-0 z-30">
+      <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-0 z-30">
         <div className="px-4 sm:px-6 py-3 flex items-center justify-between">
           <div className="flex items-center gap-3">
             <button
               onClick={() => setShowThreads(!showThreads)}
-              className="sm:hidden p-1 rounded hover:bg-gray-100 transition"
+              className="sm:hidden p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition"
               aria-label="Toggle threads"
             >
-              <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h8m-8 6h16" />
               </svg>
             </button>
-            <h1 className="text-lg font-bold text-gray-900">Chat</h1>
+            <h1 className="text-lg font-bold text-gray-900 dark:text-gray-100">Chat</h1>
           </div>
           <div className="flex items-center gap-2">
             <span
@@ -732,7 +732,7 @@ export function ChatPage() {
             connectionState={connectionState}
           />
         ) : (
-          <div className="flex-1 flex items-center justify-center text-gray-400 p-4 text-center">
+          <div className="flex-1 flex items-center justify-center text-gray-400 dark:text-gray-500 p-4 text-center">
             <div>
               <span className="text-3xl block mb-2">💬</span>
               <p>Select or create a thread</p>
diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index d6b9666..cd0bd91 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -28,7 +28,6 @@ function timeAgo(dateStr: string): string {
 }
 
 function RecentActivity({ tasks }: { tasks: Task[] }) {
-  // Gather all progress notes with task context, sorted by timestamp desc
   const recentNotes = useMemo(() => {
     const notes: { task: Task; note: ProgressNote }[] = [];
     for (const task of tasks) {
@@ -44,7 +43,7 @@ function RecentActivity({ tasks }: { tasks: Task[] }) {
 
   if (recentNotes.length === 0) {
     return (
-      <div className="text-sm text-gray-400 italic py-6 text-center">
+      <div className="text-sm text-gray-400 dark:text-gray-500 italic py-6 text-center">
         No recent activity
       </div>
     );
@@ -54,18 +53,18 @@ function RecentActivity({ tasks }: { tasks: Task[] }) {
     <div className="space-y-3">
       {recentNotes.map((item, i) => (
         <div key={i} className="flex gap-3">
-          <div className="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center text-sm shrink-0 mt-0.5">
+          <div className="w-8 h-8 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center text-sm shrink-0 mt-0.5">
             🔨
           </div>
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 mb-0.5">
-              <span className="text-xs font-bold text-amber-700 bg-amber-50 px-1.5 py-0.5 rounded font-mono">
+              <span className="text-xs font-bold text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/30 px-1.5 py-0.5 rounded font-mono">
                 HQ-{item.task.taskNumber}
               </span>
-              <span className="text-xs text-gray-400">{timeAgo(item.note.timestamp)}</span>
+              <span className="text-xs text-gray-400 dark:text-gray-500">{timeAgo(item.note.timestamp)}</span>
             </div>
-            <p className="text-sm text-gray-700 line-clamp-2">{item.note.note}</p>
-            <p className="text-xs text-gray-400 mt-0.5 truncate">{item.task.title}</p>
+            <p className="text-sm text-gray-700 dark:text-gray-300 line-clamp-2">{item.note.note}</p>
+            <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5 truncate">{item.task.title}</p>
           </div>
         </div>
       ))}
@@ -108,7 +107,7 @@ export function DashboardPage() {
 
   if (loading && tasks.length === 0) {
     return (
-      <div className="min-h-screen flex items-center justify-center text-gray-400">
+      <div className="min-h-screen flex items-center justify-center text-gray-400 dark:text-gray-500">
         Loading dashboard...
       </div>
     );
@@ -116,53 +115,53 @@ export function DashboardPage() {
 
   return (
     <div className="min-h-screen">
-      <header className="bg-white border-b border-gray-200 sticky top-14 md:top-0 z-30">
+      <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-14 md:top-0 z-30">
         <div className="max-w-5xl mx-auto px-4 sm:px-6 py-4">
-          <h1 className="text-xl font-bold text-gray-900">🔨 Dashboard</h1>
-          <p className="text-sm text-gray-400">Overview of Hammer's work</p>
+          <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">🔨 Dashboard</h1>
+          <p className="text-sm text-gray-400 dark:text-gray-500">Overview of Hammer's work</p>
         </div>
       </header>
 
       <div className="max-w-5xl mx-auto px-4 sm:px-6 py-6 space-y-6">
         {/* Stats Grid */}
         <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-          <StatCard label="Active" value={stats.active} icon="⚡" color="bg-amber-50 border-amber-200 text-amber-800" />
-          <StatCard label="Queued" value={stats.queued} icon="📋" color="bg-blue-50 border-blue-200 text-blue-800" />
-          <StatCard label="Blocked" value={stats.blocked} icon="🚫" color="bg-red-50 border-red-200 text-red-800" />
-          <StatCard label="Completed" value={stats.completed} icon="✅" color="bg-green-50 border-green-200 text-green-800" />
+          <StatCard label="Active" value={stats.active} icon="⚡" color="bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800 text-amber-800 dark:text-amber-300" />
+          <StatCard label="Queued" value={stats.queued} icon="📋" color="bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-300" />
+          <StatCard label="Blocked" value={stats.blocked} icon="🚫" color="bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-800 dark:text-red-300" />
+          <StatCard label="Completed" value={stats.completed} icon="✅" color="bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-800 dark:text-green-300" />
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           {/* Currently Working On */}
-          <div className="bg-white rounded-xl border border-gray-200 shadow-sm">
-            <div className="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
-              <h2 className="font-semibold text-gray-900">⚡ Currently Working On</h2>
-              <Link to="/queue" className="text-xs text-amber-600 hover:text-amber-700 font-medium">
+          <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm">
+            <div className="px-5 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
+              <h2 className="font-semibold text-gray-900 dark:text-gray-100">⚡ Currently Working On</h2>
+              <Link to="/queue" className="text-xs text-amber-600 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-300 font-medium">
                 View Queue →
               </Link>
             </div>
             <div className="p-5">
               {activeTasks.length === 0 ? (
-                <div className="text-sm text-gray-400 italic py-4 text-center">
+                <div className="text-sm text-gray-400 dark:text-gray-500 italic py-4 text-center">
                   Hammer is idle — no active tasks
                 </div>
               ) : (
                 <div className="space-y-3">
                   {activeTasks.map((task) => (
                     <Link to={`/task/HQ-${task.taskNumber}`} key={task.id} className="block">
-                      <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 hover:bg-amber-100 transition">
-                        <div className="flex items-center gap-2 mb-1">
+                      <div className="rounded-lg border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 p-3 hover:bg-amber-100 dark:hover:bg-amber-900/30 transition">
+                        <div className="flex items-center gap-2 mb-1 flex-wrap">
                           <span className="relative flex h-2 w-2">
                             <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
                             <span className="relative inline-flex rounded-full h-2 w-2 bg-amber-500"></span>
                           </span>
-                          <span className="text-xs font-bold text-amber-700 font-mono">HQ-{task.taskNumber}</span>
-                          <span className="text-xs text-amber-600 capitalize px-1.5 py-0.5 bg-amber-200/50 rounded-full">{task.priority}</span>
+                          <span className="text-xs font-bold text-amber-700 dark:text-amber-400 font-mono">HQ-{task.taskNumber}</span>
+                          <span className="text-xs text-amber-600 dark:text-amber-400 capitalize px-1.5 py-0.5 bg-amber-200/50 dark:bg-amber-800/50 rounded-full">{task.priority}</span>
                           {task.projectId && projectMap[task.projectId] && (
-                            <span className="text-xs text-sky-600 px-1.5 py-0.5 bg-sky-100 rounded-full">📁 {projectMap[task.projectId]}</span>
+                            <span className="text-xs text-sky-600 dark:text-sky-400 px-1.5 py-0.5 bg-sky-100 dark:bg-sky-900/30 rounded-full">📁 {projectMap[task.projectId]}</span>
                           )}
                           {task.assigneeName && (
-                            <span className="text-xs text-emerald-600 px-1.5 py-0.5 bg-emerald-100 rounded-full">👤 {task.assigneeName}</span>
+                            <span className="text-xs text-emerald-600 dark:text-emerald-400 px-1.5 py-0.5 bg-emerald-100 dark:bg-emerald-900/30 rounded-full">👤 {task.assigneeName}</span>
                           )}
                           {task.dueDate && (() => {
                             const due = new Date(task.dueDate);
@@ -170,23 +169,23 @@ export function DashboardPage() {
                             const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
                             const isOverdue = diffMs < 0;
                             return isOverdue || diffDays <= 2 ? (
-                              <span className={`text-xs px-1.5 py-0.5 rounded-full ${isOverdue ? "bg-red-200 text-red-700" : "bg-amber-200 text-amber-700"}`}>
+                              <span className={`text-xs px-1.5 py-0.5 rounded-full ${isOverdue ? "bg-red-200 dark:bg-red-900/30 text-red-700 dark:text-red-400" : "bg-amber-200 dark:bg-amber-800/50 text-amber-700 dark:text-amber-400"}`}>
                                 📅 {isOverdue ? "overdue" : diffDays === 0 ? "today" : diffDays === 1 ? "tomorrow" : `${diffDays}d`}
                               </span>
                             ) : null;
                           })()}
                         </div>
-                        <h3 className="font-medium text-sm text-amber-900">{task.title}</h3>
+                        <h3 className="font-medium text-sm text-amber-900 dark:text-amber-200">{task.title}</h3>
                         {task.subtasks?.length > 0 && (
                           <div className="mt-1.5 flex items-center gap-2">
-                            <div className="flex-1 bg-amber-200/50 rounded-full h-1">
+                            <div className="flex-1 bg-amber-200/50 dark:bg-amber-800/30 rounded-full h-1">
                               <div className="bg-green-500 h-1 rounded-full" style={{ width: `${(task.subtasks.filter(s => s.completed).length / task.subtasks.length) * 100}%` }} />
                             </div>
-                            <span className="text-xs text-amber-600">{task.subtasks.filter(s => s.completed).length}/{task.subtasks.length}</span>
+                            <span className="text-xs text-amber-600 dark:text-amber-400">{task.subtasks.filter(s => s.completed).length}/{task.subtasks.length}</span>
                           </div>
                         )}
                         {task.progressNotes?.length > 0 && (
-                          <p className="text-xs text-amber-700 mt-1 line-clamp-2 opacity-70">
+                          <p className="text-xs text-amber-700 dark:text-amber-400 mt-1 line-clamp-2 opacity-70">
                             Latest: {task.progressNotes[task.progressNotes.length - 1].note}
                           </p>
                         )}
@@ -198,16 +197,16 @@ export function DashboardPage() {
 
               {/* Up Next */}
               {upNext.length > 0 && (
-                <div className="mt-4 pt-4 border-t border-gray-100">
-                  <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Up Next</h3>
+                <div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800">
+                  <h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Up Next</h3>
                   <div className="space-y-2">
                     {upNext.map((task, i) => (
-                      <Link to={`/task/HQ-${task.taskNumber}`} key={task.id} className="flex items-center gap-2 text-sm group hover:bg-gray-50 rounded-lg px-1 -mx-1 py-0.5 transition">
-                        <span className="text-gray-300 text-xs w-4 text-right">{i + 1}.</span>
-                        <span className="text-xs font-mono text-gray-400">HQ-{task.taskNumber}</span>
-                        <span className="text-gray-700 truncate group-hover:text-amber-700 transition">{task.title}</span>
+                      <Link to={`/task/HQ-${task.taskNumber}`} key={task.id} className="flex items-center gap-2 text-sm group hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg px-1 -mx-1 py-0.5 transition">
+                        <span className="text-gray-300 dark:text-gray-600 text-xs w-4 text-right">{i + 1}.</span>
+                        <span className="text-xs font-mono text-gray-400 dark:text-gray-500">HQ-{task.taskNumber}</span>
+                        <span className="text-gray-700 dark:text-gray-300 truncate group-hover:text-amber-700 dark:group-hover:text-amber-400 transition">{task.title}</span>
                         {task.priority === "high" || task.priority === "critical" ? (
-                          <span className={`text-[10px] px-1.5 py-0.5 rounded-full font-medium shrink-0 ${task.priority === "critical" ? "bg-red-100 text-red-600" : "bg-orange-100 text-orange-600"}`}>
+                          <span className={`text-[10px] px-1.5 py-0.5 rounded-full font-medium shrink-0 ${task.priority === "critical" ? "bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400" : "bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400"}`}>
                             {task.priority}
                           </span>
                         ) : null}
@@ -220,9 +219,9 @@ export function DashboardPage() {
           </div>
 
           {/* Recent Activity */}
-          <div className="bg-white rounded-xl border border-gray-200 shadow-sm">
-            <div className="px-5 py-4 border-b border-gray-100">
-              <h2 className="font-semibold text-gray-900">📝 Recent Activity</h2>
+          <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm">
+            <div className="px-5 py-4 border-b border-gray-100 dark:border-gray-800">
+              <h2 className="font-semibold text-gray-900 dark:text-gray-100">📝 Recent Activity</h2>
             </div>
             <div className="p-5">
               <RecentActivity tasks={tasks} />
@@ -232,21 +231,21 @@ export function DashboardPage() {
 
         {/* Recently Completed */}
         {recentlyCompleted.length > 0 && (
-          <div className="bg-white rounded-xl border border-gray-200 shadow-sm">
-            <div className="px-5 py-4 border-b border-gray-100">
-              <h2 className="font-semibold text-gray-900">✅ Recently Completed</h2>
+          <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm">
+            <div className="px-5 py-4 border-b border-gray-100 dark:border-gray-800">
+              <h2 className="font-semibold text-gray-900 dark:text-gray-100">✅ Recently Completed</h2>
             </div>
             <div className="p-5">
               <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                 {recentlyCompleted.map((task) => (
-                  <Link to={`/task/HQ-${task.taskNumber}`} key={task.id} className="rounded-lg border border-green-200 bg-green-50 p-3 hover:bg-green-100 transition block">
+                  <Link to={`/task/HQ-${task.taskNumber}`} key={task.id} className="rounded-lg border border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20 p-3 hover:bg-green-100 dark:hover:bg-green-900/30 transition block">
                     <div className="flex items-center gap-2 mb-1">
-                      <span className="text-xs font-bold text-green-700 font-mono">HQ-{task.taskNumber}</span>
+                      <span className="text-xs font-bold text-green-700 dark:text-green-400 font-mono">HQ-{task.taskNumber}</span>
                       {task.completedAt && (
-                        <span className="text-xs text-green-600">{timeAgo(task.completedAt)}</span>
+                        <span className="text-xs text-green-600 dark:text-green-500">{timeAgo(task.completedAt)}</span>
                       )}
                     </div>
-                    <h3 className="font-medium text-sm text-green-900">{task.title}</h3>
+                    <h3 className="font-medium text-sm text-green-900 dark:text-green-200">{task.title}</h3>
                   </Link>
                 ))}
               </div>
diff --git a/frontend/src/pages/QueuePage.tsx b/frontend/src/pages/QueuePage.tsx
index ed826c2..25671b9 100644
--- a/frontend/src/pages/QueuePage.tsx
+++ b/frontend/src/pages/QueuePage.tsx
@@ -141,12 +141,12 @@ export function QueuePage() {
   return (
     <div className="min-h-screen">
       {/* Page Header */}
-      <header className="bg-white border-b border-gray-200 sticky top-14 md:top-0 z-30">
+      <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-14 md:top-0 z-30">
         <div className="max-w-4xl mx-auto px-4 sm:px-6 py-3 sm:py-4">
           <div className="flex items-center justify-between mb-3">
             <div>
-              <h1 className="text-lg sm:text-xl font-bold text-gray-900">Task Queue</h1>
-              <p className="text-xs sm:text-sm text-gray-400">
+              <h1 className="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100">Task Queue</h1>
+              <p className="text-xs sm:text-sm text-gray-400 dark:text-gray-500">
                 Manage what Hammer is working on
                 {filteredTasks.length !== tasks.length && (
                   <span className="ml-1 text-amber-500">· {filteredTasks.length} of {tasks.length} shown</span>
@@ -155,10 +155,10 @@ export function QueuePage() {
             </div>
             <div className="flex items-center gap-2">
               {/* View toggle */}
-              <div className="hidden sm:flex items-center bg-gray-100 rounded-lg p-0.5">
+              <div className="hidden sm:flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-0.5">
                 <button
                   onClick={() => setViewMode("list")}
-                  className={`p-1.5 rounded-md transition ${viewMode === "list" ? "bg-white shadow-sm text-amber-600" : "text-gray-400 hover:text-gray-600"}`}
+                  className={`p-1.5 rounded-md transition ${viewMode === "list" ? "bg-white dark:bg-gray-700 shadow-sm text-amber-600 dark:text-amber-400" : "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"}`}
                   title="List view"
                   aria-label="List view"
                 >
@@ -168,7 +168,7 @@ export function QueuePage() {
                 </button>
                 <button
                   onClick={() => setViewMode("board")}
-                  className={`p-1.5 rounded-md transition ${viewMode === "board" ? "bg-white shadow-sm text-amber-600" : "text-gray-400 hover:text-gray-600"}`}
+                  className={`p-1.5 rounded-md transition ${viewMode === "board" ? "bg-white dark:bg-gray-700 shadow-sm text-amber-600 dark:text-amber-400" : "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"}`}
                   title="Board view"
                   aria-label="Board view"
                 >
@@ -188,7 +188,7 @@ export function QueuePage() {
           </div>
           <div className="flex gap-2 items-center">
             <div className="flex-1 relative">
-              <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
               </svg>
               <input
@@ -196,7 +196,7 @@ export function QueuePage() {
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
                 placeholder="Search tasks..."
-                className="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-200 focus:border-amber-300"
+                className="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 focus:border-amber-300 dark:focus:border-amber-700 placeholder:text-gray-400 dark:placeholder:text-gray-500"
               />
               {search && (
                 <button
@@ -212,7 +212,7 @@ export function QueuePage() {
             <select
               value={filterPriority}
               onChange={(e) => setFilterPriority(e.target.value)}
-              className="text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 bg-white"
+              className="text-sm border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
             >
               <option value="">All priorities</option>
               <option value="critical">🔴 Critical</option>
@@ -224,7 +224,7 @@ export function QueuePage() {
               <select
                 value={filterStatus}
                 onChange={(e) => setFilterStatus(e.target.value)}
-                className="text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 bg-white"
+                className="text-sm border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
               >
                 <option value="">All statuses</option>
                 <option value="active">⚡ Active</option>
@@ -265,10 +265,10 @@ export function QueuePage() {
       ) : (
         <div className="max-w-4xl mx-auto px-4 sm:px-6 py-4 sm:py-6 space-y-5 sm:space-y-6">
           {loading && (
-            <div className="text-center text-gray-400 py-12">Loading tasks...</div>
+            <div className="text-center text-gray-400 dark:text-gray-500 py-12">Loading tasks...</div>
           )}
           {error && (
-            <div className="bg-red-50 border border-red-200 text-red-700 rounded-lg p-3 text-sm">
+            <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 rounded-lg p-3 text-sm">
               {error}
             </div>
           )}
@@ -276,11 +276,11 @@ export function QueuePage() {
           {/* Active Task */}
           {showSection("active") && (
             <section>
-              <h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
+              <h2 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
                 ⚡ Currently Working On
               </h2>
               {activeTasks.length === 0 ? (
-                <div className="border-2 border-dashed border-gray-200 rounded-lg p-8 text-center text-gray-400">
+                <div className="border-2 border-dashed border-gray-200 dark:border-gray-700 rounded-lg p-8 text-center text-gray-400 dark:text-gray-500">
                   No active task — Hammer is idle
                 </div>
               ) : (
@@ -303,7 +303,7 @@ export function QueuePage() {
           {/* Blocked */}
           {showSection("blocked") && blockedTasks.length > 0 && (
             <section>
-              <h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
+              <h2 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
                 🚫 Blocked ({blockedTasks.length})
               </h2>
               <div className="space-y-2">
@@ -323,11 +323,11 @@ export function QueuePage() {
           {/* Queue */}
           {showSection("queued") && (
             <section>
-              <h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
+              <h2 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
                 📋 Queue ({queuedTasks.length})
               </h2>
               {queuedTasks.length === 0 ? (
-                <div className="border-2 border-dashed border-gray-200 rounded-lg p-6 text-center text-gray-400">
+                <div className="border-2 border-dashed border-gray-200 dark:border-gray-700 rounded-lg p-6 text-center text-gray-400 dark:text-gray-500">
                   Queue is empty
                 </div>
               ) : (
@@ -355,7 +355,7 @@ export function QueuePage() {
             <section>
               {filterStatus ? (
                 <>
-                  <h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
+                  <h2 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
                     {filterStatus === "completed" ? "✅" : "❌"} {filterStatus.charAt(0).toUpperCase() + filterStatus.slice(1)} ({completedTasks.length})
                   </h2>
                   <div className="space-y-2 opacity-60">
@@ -374,7 +374,7 @@ export function QueuePage() {
                 <>
                   <button
                     onClick={() => setShowCompleted(!showCompleted)}
-                    className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3 flex items-center gap-1 hover:text-gray-700"
+                    className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3 flex items-center gap-1 hover:text-gray-700 dark:hover:text-gray-300"
                   >
                     {showCompleted ? "▾" : "▸"} Completed / Cancelled ({completedTasks.length})
                   </button>
diff --git a/frontend/src/pages/TaskPage.tsx b/frontend/src/pages/TaskPage.tsx
index 6027548..487a1c7 100644
--- a/frontend/src/pages/TaskPage.tsx
+++ b/frontend/src/pages/TaskPage.tsx
@@ -1,5 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { useParams, Link, useNavigate } from "react-router-dom";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import type { Task, TaskStatus, Project } from "../lib/types";
 import { updateTask, fetchProjects, addProgressNote, addSubtask, toggleSubtask, deleteSubtask, deleteTask } from "../lib/api";
 import { useToast } from "../components/Toast";
@@ -12,11 +14,11 @@ const priorityColors: Record<string, string> = {
 };
 
 const statusColors: Record<string, string> = {
-  active: "bg-amber-100 text-amber-800 border-amber-300",
-  queued: "bg-blue-100 text-blue-800 border-blue-300",
-  blocked: "bg-red-100 text-red-800 border-red-300",
-  completed: "bg-green-100 text-green-800 border-green-300",
-  cancelled: "bg-gray-100 text-gray-600 border-gray-300",
+  active: "bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300 border-amber-300 dark:border-amber-700",
+  queued: "bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-300 dark:border-blue-700",
+  blocked: "bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-red-300 dark:border-red-700",
+  completed: "bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-300 dark:border-green-700",
+  cancelled: "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600",
 };
 
 const statusIcons: Record<string, string> = {
@@ -29,20 +31,20 @@ const statusIcons: Record<string, string> = {
 
 const statusActions: Record<string, { label: string; next: TaskStatus; color: string }[]> = {
   active: [
-    { label: "⏸ Pause", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" },
-    { label: "🚫 Block", next: "blocked", color: "bg-red-50 text-red-700 border-red-200 hover:bg-red-100" },
-    { label: "✅ Complete", next: "completed", color: "bg-green-50 text-green-700 border-green-200 hover:bg-green-100" },
+    { label: "⏸ Pause", next: "queued", color: "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-700 hover:bg-blue-100 dark:hover:bg-blue-900/40" },
+    { label: "🚫 Block", next: "blocked", color: "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 border-red-200 dark:border-red-700 hover:bg-red-100 dark:hover:bg-red-900/40" },
+    { label: "✅ Complete", next: "completed", color: "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 border-green-200 dark:border-green-700 hover:bg-green-100 dark:hover:bg-green-900/40" },
   ],
   queued: [
-    { label: "▶ Activate", next: "active", color: "bg-amber-50 text-amber-700 border-amber-200 hover:bg-amber-100" },
-    { label: "🚫 Block", next: "blocked", color: "bg-red-50 text-red-700 border-red-200 hover:bg-red-100" },
+    { label: "▶ Activate", next: "active", color: "bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 border-amber-200 dark:border-amber-700 hover:bg-amber-100 dark:hover:bg-amber-900/40" },
+    { label: "🚫 Block", next: "blocked", color: "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 border-red-200 dark:border-red-700 hover:bg-red-100 dark:hover:bg-red-900/40" },
   ],
   blocked: [
-    { label: "▶ Activate", next: "active", color: "bg-amber-50 text-amber-700 border-amber-200 hover:bg-amber-100" },
-    { label: "📋 Queue", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" },
+    { label: "▶ Activate", next: "active", color: "bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 border-amber-200 dark:border-amber-700 hover:bg-amber-100 dark:hover:bg-amber-900/40" },
+    { label: "📋 Queue", next: "queued", color: "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-700 hover:bg-blue-100 dark:hover:bg-blue-900/40" },
   ],
-  completed: [{ label: "🔄 Requeue", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" }],
-  cancelled: [{ label: "🔄 Requeue", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" }],
+  completed: [{ label: "🔄 Requeue", next: "queued", color: "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-700 hover:bg-blue-100 dark:hover:bg-blue-900/40" }],
+  cancelled: [{ label: "🔄 Requeue", next: "queued", color: "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-700 hover:bg-blue-100 dark:hover:bg-blue-900/40" }],
 };
 
 function formatDate(dateStr: string): string {
@@ -63,6 +65,9 @@ function timeAgo(dateStr: string): string {
   return `${days}d ago`;
 }
 
+// Markdown prose classes for descriptions and notes
+const proseClasses = "prose prose-sm prose-gray dark:prose-invert max-w-none [&_pre]:bg-gray-800 dark:[&_pre]:bg-gray-900 [&_pre]:text-gray-100 [&_pre]:rounded-lg [&_pre]:p-3 [&_pre]:overflow-x-auto [&_pre]:text-xs [&_code]:bg-gray-200 dark:[&_code]:bg-gray-700 [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-xs [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_p]:mb-2 [&_p:last-child]:mb-0 [&_ul]:mb-2 [&_ol]:mb-2 [&_li]:mb-0.5 [&_h1]:text-base [&_h2]:text-sm [&_h3]:text-sm [&_a]:text-amber-600 dark:[&_a]:text-amber-400 [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-gray-300 dark:[&_blockquote]:border-gray-600 [&_blockquote]:pl-3 [&_blockquote]:text-gray-500 dark:[&_blockquote]:text-gray-400";
+
 export function TaskPage() {
   const { taskRef } = useParams<{ taskRef: string }>();
   const [task, setTask] = useState<Task | null>(null);
@@ -76,6 +81,14 @@ export function TaskPage() {
   const [saving, setSaving] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [deleting, setDeleting] = useState(false);
+  // Description editing
+  const [editingDescription, setEditingDescription] = useState(false);
+  const [descriptionDraft, setDescriptionDraft] = useState("");
+  const [savingDescription, setSavingDescription] = useState(false);
+  // Title editing
+  const [editingTitle, setEditingTitle] = useState(false);
+  const [titleDraft, setTitleDraft] = useState("");
+  const [savingTitle, setSavingTitle] = useState(false);
   const { toast } = useToast();
   const navigate = useNavigate();
 
@@ -120,6 +133,38 @@ export function TaskPage() {
     }
   };
 
+  const handleSaveDescription = async () => {
+    if (!task) return;
+    setSavingDescription(true);
+    try {
+      await updateTask(task.id, { description: descriptionDraft });
+      fetchTask();
+      setEditingDescription(false);
+      toast("Description updated", "success");
+    } catch (e) {
+      console.error("Failed to save description:", e);
+      toast("Failed to save description", "error");
+    } finally {
+      setSavingDescription(false);
+    }
+  };
+
+  const handleSaveTitle = async () => {
+    if (!task || !titleDraft.trim()) return;
+    setSavingTitle(true);
+    try {
+      await updateTask(task.id, { title: titleDraft.trim() });
+      fetchTask();
+      setEditingTitle(false);
+      toast("Title updated", "success");
+    } catch (e) {
+      console.error("Failed to save title:", e);
+      toast("Failed to save title", "error");
+    } finally {
+      setSavingTitle(false);
+    }
+  };
+
   const handleDelete = async () => {
     if (!task) return;
     setDeleting(true);
@@ -138,7 +183,7 @@ export function TaskPage() {
 
   if (loading) {
     return (
-      <div className="min-h-screen flex items-center justify-center text-gray-400">
+      <div className="min-h-screen flex items-center justify-center text-gray-400 dark:text-gray-500">
         Loading task...
       </div>
     );
@@ -149,8 +194,8 @@ export function TaskPage() {
       <div className="min-h-screen flex items-center justify-center">
         <div className="text-center">
           <span className="text-4xl block mb-3">😕</span>
-          <p className="text-gray-500 mb-4">{error || "Task not found"}</p>
-          <Link to="/queue" className="text-amber-600 hover:text-amber-700 font-medium text-sm">
+          <p className="text-gray-500 dark:text-gray-400 mb-4">{error || "Task not found"}</p>
+          <Link to="/queue" className="text-amber-600 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-300 font-medium text-sm">
             ← Back to Queue
           </Link>
         </div>
@@ -168,14 +213,18 @@ export function TaskPage() {
   return (
     <div className="min-h-screen">
       {/* Header */}
-      <header className={`sticky top-14 md:top-0 z-30 border-b ${isActive ? "bg-gradient-to-r from-amber-50 to-orange-50 border-amber-200" : "bg-white border-gray-200"}`}>
+      <header className={`sticky top-14 md:top-0 z-30 border-b ${
+        isActive
+          ? "bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border-amber-200 dark:border-amber-800"
+          : "bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800"
+      }`}>
         <div className="max-w-4xl mx-auto px-4 sm:px-6 py-4">
           <div className="flex items-center gap-2 mb-2">
-            <Link to="/queue" className="text-sm text-gray-400 hover:text-gray-600 transition">
+            <Link to="/queue" className="text-sm text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition">
               ← Queue
             </Link>
-            <span className="text-gray-300">/</span>
-            <span className="text-xs font-bold text-amber-700 bg-amber-100 px-2 py-0.5 rounded font-mono">
+            <span className="text-gray-300 dark:text-gray-600">/</span>
+            <span className="text-xs font-bold text-amber-700 dark:text-amber-400 bg-amber-100 dark:bg-amber-900/30 px-2 py-0.5 rounded font-mono">
               HQ-{task.taskNumber}
             </span>
           </div>
@@ -195,15 +244,51 @@ export function TaskPage() {
                   {task.priority}
                 </span>
                 {project && (
-                  <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
+                  <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded">
                     📁 {project.name}
                   </span>
                 )}
               </div>
-              <h1 className="text-xl font-bold text-gray-900">{task.title}</h1>
+              {editingTitle ? (
+                <div className="flex items-center gap-2">
+                  <input
+                    autoFocus
+                    value={titleDraft}
+                    onChange={(e) => setTitleDraft(e.target.value)}
+                    className="text-xl font-bold text-gray-900 dark:text-gray-100 bg-transparent border-b-2 border-amber-400 dark:border-amber-500 outline-none flex-1 py-0.5"
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") handleSaveTitle();
+                      if (e.key === "Escape") setEditingTitle(false);
+                    }}
+                    disabled={savingTitle}
+                  />
+                  <button
+                    onClick={handleSaveTitle}
+                    disabled={savingTitle || !titleDraft.trim()}
+                    className="text-xs px-2.5 py-1 bg-amber-500 text-white rounded-lg font-medium hover:bg-amber-600 transition disabled:opacity-50"
+                  >
+                    {savingTitle ? "..." : "Save"}
+                  </button>
+                  <button
+                    onClick={() => setEditingTitle(false)}
+                    className="text-xs px-2.5 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              ) : (
+                <h1
+                  className="text-xl font-bold text-gray-900 dark:text-gray-100 cursor-pointer hover:text-amber-700 dark:hover:text-amber-400 transition group"
+                  onClick={() => { setTitleDraft(task.title); setEditingTitle(true); }}
+                  title="Click to edit title"
+                >
+                  {task.title}
+                  <span className="opacity-0 group-hover:opacity-100 text-gray-400 dark:text-gray-500 text-sm ml-2 transition">✏️</span>
+                </h1>
+              )}
             </div>
             {/* Status Actions */}
-            <div className="flex gap-2 shrink-0">
+            <div className="flex gap-2 shrink-0 flex-wrap justify-end">
               {actions.map((action) => (
                 <button
                   key={action.next}
@@ -226,9 +311,13 @@ export function TaskPage() {
             const isDueSoon = diffDays <= 2 && !isOverdue;
             return (
               <div className="mt-2 flex items-center gap-2">
-                <span className="text-xs text-gray-500">📅 Due:</span>
+                <span className="text-xs text-gray-500 dark:text-gray-400">📅 Due:</span>
                 <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${
-                  isOverdue ? "bg-red-100 text-red-700" : isDueSoon ? "bg-amber-100 text-amber-700" : "bg-gray-100 text-gray-600"
+                  isOverdue
+                    ? "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400"
+                    : isDueSoon
+                      ? "bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400"
+                      : "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
                 }`}>
                   {formatDate(task.dueDate)} ({isOverdue ? `${Math.abs(diffDays)}d overdue` : diffDays === 0 ? "today" : diffDays === 1 ? "tomorrow" : `${diffDays}d left`})
                 </span>
@@ -243,30 +332,80 @@ export function TaskPage() {
           {/* Main content */}
           <div className="lg:col-span-2 space-y-6">
             {/* Description */}
-            <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
-              <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">Description</h2>
-              <p className="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap">
-                {task.description || <span className="text-gray-400 italic">No description</span>}
-              </p>
+            <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm p-5">
+              <div className="flex items-center justify-between mb-3">
+                <h2 className="text-sm font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Description</h2>
+                {!editingDescription && (
+                  <button
+                    onClick={() => { setDescriptionDraft(task.description || ""); setEditingDescription(true); }}
+                    className="text-xs text-gray-400 dark:text-gray-500 hover:text-amber-600 dark:hover:text-amber-400 transition font-medium"
+                  >
+                    ✏️ Edit
+                  </button>
+                )}
+              </div>
+              {editingDescription ? (
+                <div className="space-y-3">
+                  <textarea
+                    autoFocus
+                    value={descriptionDraft}
+                    onChange={(e) => setDescriptionDraft(e.target.value)}
+                    rows={8}
+                    className="w-full text-sm border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 focus:border-amber-300 dark:focus:border-amber-700 resize-y min-h-[120px] font-mono placeholder:text-gray-400 dark:placeholder:text-gray-500"
+                    placeholder="Describe the task... (Markdown supported)"
+                  />
+                  <div className="flex items-center justify-between">
+                    <span className="text-[10px] text-gray-400 dark:text-gray-500">Markdown supported</span>
+                    <div className="flex gap-2">
+                      <button
+                        onClick={() => setEditingDescription(false)}
+                        className="text-xs px-3 py-1.5 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition"
+                      >
+                        Cancel
+                      </button>
+                      <button
+                        onClick={handleSaveDescription}
+                        disabled={savingDescription}
+                        className="text-xs px-3 py-1.5 bg-amber-500 text-white rounded-lg font-medium hover:bg-amber-600 transition disabled:opacity-50"
+                      >
+                        {savingDescription ? "Saving..." : "Save"}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ) : task.description ? (
+                <div className={`text-sm leading-relaxed ${proseClasses}`}>
+                  <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                    {task.description}
+                  </ReactMarkdown>
+                </div>
+              ) : (
+                <p
+                  className="text-sm text-gray-400 dark:text-gray-500 italic cursor-pointer hover:text-amber-500 dark:hover:text-amber-400 transition py-4 text-center border-2 border-dashed border-gray-200 dark:border-gray-700 rounded-lg"
+                  onClick={() => { setDescriptionDraft(""); setEditingDescription(true); }}
+                >
+                  No description — click to add one
+                </p>
+              )}
             </div>
 
             {/* Subtasks */}
-            <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
+            <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm p-5">
               <div className="flex items-center justify-between mb-3">
-                <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">
+                <h2 className="text-sm font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">
                   Subtasks {task.subtasks?.length > 0 && (
-                    <span className="text-gray-300 ml-1">({task.subtasks.filter(s => s.completed).length}/{task.subtasks.length})</span>
+                    <span className="text-gray-300 dark:text-gray-600 ml-1">({task.subtasks.filter(s => s.completed).length}/{task.subtasks.length})</span>
                   )}
                 </h2>
                 {task.subtasks?.length > 0 && (
-                  <span className="text-xs text-gray-400">{subtaskProgress}%</span>
+                  <span className="text-xs text-gray-400 dark:text-gray-500">{subtaskProgress}%</span>
                 )}
               </div>
 
               {/* Progress bar */}
               {task.subtasks?.length > 0 && (
                 <div className="mb-4">
-                  <div className="w-full bg-gray-200 rounded-full h-2">
+                  <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                     <div
                       className="bg-green-500 h-2 rounded-full transition-all duration-300"
                       style={{ width: `${subtaskProgress}%` }}
@@ -279,7 +418,7 @@ export function TaskPage() {
               {task.subtasks?.length > 0 && (
                 <div className="space-y-1 mb-4">
                   {task.subtasks.map((subtask) => (
-                    <div key={subtask.id} className="flex items-center gap-3 group py-1.5 px-2 rounded-lg hover:bg-gray-50 transition">
+                    <div key={subtask.id} className="flex items-center gap-3 group py-1.5 px-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition">
                       <button
                         onClick={async () => {
                           try {
@@ -292,7 +431,7 @@ export function TaskPage() {
                         className={`w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition ${
                           subtask.completed
                             ? "bg-green-500 border-green-500 text-white"
-                            : "border-gray-300 hover:border-amber-400"
+                            : "border-gray-300 dark:border-gray-600 hover:border-amber-400 dark:hover:border-amber-500"
                         }`}
                       >
                         {subtask.completed && (
@@ -301,7 +440,7 @@ export function TaskPage() {
                           </svg>
                         )}
                       </button>
-                      <span className={`text-sm flex-1 ${subtask.completed ? "line-through text-gray-400" : "text-gray-700"}`}>
+                      <span className={`text-sm flex-1 ${subtask.completed ? "line-through text-gray-400 dark:text-gray-500" : "text-gray-700 dark:text-gray-300"}`}>
                         {subtask.title}
                       </span>
                       <button
@@ -313,7 +452,7 @@ export function TaskPage() {
                             console.error("Failed to delete subtask:", e);
                           }
                         }}
-                        className="opacity-0 group-hover:opacity-100 text-gray-300 hover:text-red-400 transition p-0.5"
+                        className="opacity-0 group-hover:opacity-100 text-gray-300 dark:text-gray-600 hover:text-red-400 dark:hover:text-red-400 transition p-0.5"
                       >
                         <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -331,7 +470,7 @@ export function TaskPage() {
                   value={newSubtaskTitle}
                   onChange={(e) => setNewSubtaskTitle(e.target.value)}
                   placeholder="Add a subtask..."
-                  className="flex-1 text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 focus:border-amber-300"
+                  className="flex-1 text-sm border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 focus:border-amber-300 dark:focus:border-amber-700 placeholder:text-gray-400 dark:placeholder:text-gray-500"
                   onKeyDown={async (e) => {
                     if (e.key === "Enter" && newSubtaskTitle.trim()) {
                       setAddingSubtask(true);
@@ -371,10 +510,10 @@ export function TaskPage() {
             </div>
 
             {/* Progress Notes */}
-            <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
-              <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">
+            <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm p-5">
+              <h2 className="text-sm font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">
                 Progress Notes {task.progressNotes?.length > 0 && (
-                  <span className="text-gray-300 ml-1">({task.progressNotes.length})</span>
+                  <span className="text-gray-300 dark:text-gray-600 ml-1">({task.progressNotes.length})</span>
                 )}
               </h2>
 
@@ -386,7 +525,7 @@ export function TaskPage() {
                     onChange={(e) => setNoteText(e.target.value)}
                     placeholder="Add a progress note..."
                     rows={2}
-                    className="flex-1 text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 focus:border-amber-300 resize-y min-h-[40px] max-h-32"
+                    className="flex-1 text-sm border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 focus:border-amber-300 dark:focus:border-amber-700 resize-y min-h-[40px] max-h-32 placeholder:text-gray-400 dark:placeholder:text-gray-500"
                     onKeyDown={(e) => {
                       if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
                         e.preventDefault();
@@ -415,12 +554,12 @@ export function TaskPage() {
                     {addingNote ? "..." : "Add"}
                   </button>
                 </div>
-                <p className="text-[10px] text-gray-400 mt-1">⌘+Enter to submit</p>
+                <p className="text-[10px] text-gray-400 dark:text-gray-500 mt-1">⌘+Enter to submit</p>
               </div>
 
               {/* Notes list */}
               {!task.progressNotes || task.progressNotes.length === 0 ? (
-                <div className="text-sm text-gray-400 italic py-6 text-center border-2 border-dashed border-gray-100 rounded-lg">
+                <div className="text-sm text-gray-400 dark:text-gray-500 italic py-6 text-center border-2 border-dashed border-gray-100 dark:border-gray-800 rounded-lg">
                   No progress notes yet
                 </div>
               ) : (
@@ -431,16 +570,18 @@ export function TaskPage() {
                     .map((note, i) => (
                       <div key={i} className="relative pl-6 pb-4 last:pb-0 group">
                         {i < task.progressNotes.length - 1 && (
-                          <div className="absolute left-[9px] top-3 bottom-0 w-0.5 bg-gray-200 group-last:hidden" />
+                          <div className="absolute left-[9px] top-3 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700 group-last:hidden" />
                         )}
                         <div className={`absolute left-0 top-1 w-[18px] h-[18px] rounded-full border-2 flex items-center justify-center ${
-                          i === 0 && isActive ? "border-amber-400 bg-amber-50" : "border-gray-300 bg-white"
+                          i === 0 && isActive
+                            ? "border-amber-400 dark:border-amber-500 bg-amber-50 dark:bg-amber-900/30"
+                            : "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900"
                         }`}>
-                          <div className={`w-2 h-2 rounded-full ${i === 0 && isActive ? "bg-amber-500" : "bg-gray-300"}`} />
+                          <div className={`w-2 h-2 rounded-full ${i === 0 && isActive ? "bg-amber-500" : "bg-gray-300 dark:bg-gray-600"}`} />
                         </div>
                         <div>
-                          <p className="text-sm text-gray-700 leading-relaxed">{note.note}</p>
-                          <p className="text-xs text-gray-400 mt-0.5">{formatDate(note.timestamp)} · {timeAgo(note.timestamp)}</p>
+                          <p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">{note.note}</p>
+                          <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{formatDate(note.timestamp)} · {timeAgo(note.timestamp)}</p>
                         </div>
                       </div>
                     ))}
@@ -452,49 +593,49 @@ export function TaskPage() {
           {/* Sidebar */}
           <div className="space-y-4">
             {/* Meta */}
-            <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
-              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Details</h3>
+            <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm p-4">
+              <h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">Details</h3>
               <div className="space-y-3 text-sm">
                 <div className="flex justify-between">
-                  <span className="text-gray-500">Source</span>
-                  <span className="text-gray-700 font-medium capitalize">{task.source}</span>
+                  <span className="text-gray-500 dark:text-gray-400">Source</span>
+                  <span className="text-gray-700 dark:text-gray-300 font-medium capitalize">{task.source}</span>
                 </div>
                 {task.assigneeName && (
                   <div className="flex justify-between">
-                    <span className="text-gray-500">Assignee</span>
-                    <span className="text-gray-700 font-medium">{task.assigneeName}</span>
+                    <span className="text-gray-500 dark:text-gray-400">Assignee</span>
+                    <span className="text-gray-700 dark:text-gray-300 font-medium">{task.assigneeName}</span>
                   </div>
                 )}
                 {project && (
                   <div className="flex justify-between">
-                    <span className="text-gray-500">Project</span>
-                    <span className="text-gray-700 font-medium">{project.name}</span>
+                    <span className="text-gray-500 dark:text-gray-400">Project</span>
+                    <span className="text-gray-700 dark:text-gray-300 font-medium">{project.name}</span>
                   </div>
                 )}
                 <div className="flex justify-between">
-                  <span className="text-gray-500">Created</span>
-                  <span className="text-gray-700 text-xs">{timeAgo(task.createdAt)}</span>
+                  <span className="text-gray-500 dark:text-gray-400">Created</span>
+                  <span className="text-gray-700 dark:text-gray-300 text-xs">{timeAgo(task.createdAt)}</span>
                 </div>
                 {task.updatedAt !== task.createdAt && (
                   <div className="flex justify-between">
-                    <span className="text-gray-500">Updated</span>
-                    <span className="text-gray-700 text-xs">{timeAgo(task.updatedAt)}</span>
+                    <span className="text-gray-500 dark:text-gray-400">Updated</span>
+                    <span className="text-gray-700 dark:text-gray-300 text-xs">{timeAgo(task.updatedAt)}</span>
                   </div>
                 )}
                 {task.completedAt && (
                   <div className="flex justify-between">
-                    <span className="text-gray-500">Completed</span>
-                    <span className="text-gray-700 text-xs">{timeAgo(task.completedAt)}</span>
+                    <span className="text-gray-500 dark:text-gray-400">Completed</span>
+                    <span className="text-gray-700 dark:text-gray-300 text-xs">{timeAgo(task.completedAt)}</span>
                   </div>
                 )}
               </div>
             </div>
 
             {/* Quick link */}
-            <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
-              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Share</h3>
+            <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm p-4">
+              <h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Share</h3>
               <div className="flex items-center gap-2">
-                <code className="text-xs text-gray-500 font-mono bg-gray-50 px-2 py-1 rounded flex-1 truncate">
+                <code className="text-xs text-gray-500 dark:text-gray-400 font-mono bg-gray-50 dark:bg-gray-800 px-2 py-1 rounded flex-1 truncate">
                   /task/HQ-{task.taskNumber}
                 </code>
                 <button
@@ -503,7 +644,7 @@ export function TaskPage() {
                     navigator.clipboard.writeText(url);
                     toast("Link copied", "info");
                   }}
-                  className="text-xs px-2 py-1 bg-gray-100 rounded hover:bg-gray-200 transition"
+                  className="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-800 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition"
                 >
                   📋
                 </button>
@@ -511,18 +652,18 @@ export function TaskPage() {
             </div>
 
             {/* Danger zone */}
-            <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
-              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Danger Zone</h3>
+            <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm p-4">
+              <h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">Danger Zone</h3>
               {!showDeleteConfirm ? (
                 <button
                   onClick={() => setShowDeleteConfirm(true)}
-                  className="w-full text-sm text-red-600 hover:text-red-700 border border-red-200 rounded-lg px-3 py-2 hover:bg-red-50 transition font-medium"
+                  className="w-full text-sm text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 border border-red-200 dark:border-red-800 rounded-lg px-3 py-2 hover:bg-red-50 dark:hover:bg-red-900/20 transition font-medium"
                 >
                   🗑 Delete Task
                 </button>
               ) : (
                 <div className="space-y-2 animate-slide-up">
-                  <p className="text-xs text-red-700">This cannot be undone. Are you sure?</p>
+                  <p className="text-xs text-red-700 dark:text-red-400">This cannot be undone. Are you sure?</p>
                   <div className="flex gap-2">
                     <button
                       onClick={handleDelete}
@@ -533,7 +674,7 @@ export function TaskPage() {
                     </button>
                     <button
                       onClick={() => setShowDeleteConfirm(false)}
-                      className="flex-1 text-sm px-3 py-2 border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50 transition"
+                      className="flex-1 text-sm px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition"
                     >
                       Cancel
                     </button>