diff --git a/apps/web/index.html b/apps/web/index.html
index a3501f0..c51c357 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -9,10 +9,13 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="manifest" href="/site.webmanifest" />
-    <meta name="theme-color" content="#030712" />
+    <meta name="theme-color" content="#070b0f" />
     <meta name="color-scheme" content="dark" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   </head>
-  <body style="background-color: #030712">
+  <body style="background-color: #070b0f">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/apps/web/src/components/CaptureCard.tsx b/apps/web/src/components/CaptureCard.tsx
index 3a7a71f..94edf3b 100644
--- a/apps/web/src/components/CaptureCard.tsx
+++ b/apps/web/src/components/CaptureCard.tsx
@@ -51,7 +51,7 @@ export default function CaptureCard({ capture, onEdit, onDelete }: CaptureCardPr
               <textarea
                 value={editedContent}
                 onChange={(e) => setEditedContent(e.target.value)}
-                className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-sm text-gray-200 font-mono leading-relaxed focus:outline-none focus:border-accent-highlight resize-y min-h-[60px]"
+                className="input-edit font-mono leading-relaxed resize-y min-h-[60px]"
                 autoFocus
                 onKeyDown={(e) => {
                   if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
@@ -65,7 +65,7 @@ export default function CaptureCard({ capture, onEdit, onDelete }: CaptureCardPr
                 <button
                   onClick={handleSaveEdit}
                   disabled={isSaving}
-                  className="flex items-center gap-1 px-3 py-1 bg-green-600 hover:bg-green-700 disabled:bg-green-800 disabled:opacity-50 text-white text-xs rounded transition-colors"
+                  className="btn-save"
                 >
                   {isSaving ? (
                     <Loader2 className="w-3 h-3 animate-spin" />
@@ -77,7 +77,7 @@ export default function CaptureCard({ capture, onEdit, onDelete }: CaptureCardPr
                 <button
                   onClick={handleCancelEdit}
                   disabled={isSaving}
-                  className="flex items-center gap-1 px-3 py-1 bg-gray-700 hover:bg-gray-600 disabled:bg-gray-800 disabled:opacity-50 text-gray-200 text-xs rounded transition-colors"
+                  className="btn-cancel"
                 >
                   <X className="w-3 h-3" />
                   Cancel
@@ -101,7 +101,7 @@ export default function CaptureCard({ capture, onEdit, onDelete }: CaptureCardPr
           <div className="absolute top-4 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
             <button
               onClick={handleStartEdit}
-              className="px-2 py-1 hover:bg-gray-700 rounded"
+              className="icon-btn"
               title="Edit capture"
               aria-label="Edit capture"
             >
@@ -109,7 +109,7 @@ export default function CaptureCard({ capture, onEdit, onDelete }: CaptureCardPr
             </button>
             <button
               onClick={() => onDelete(capture.id)}
-              className="text-gray-500 hover:text-red-400 text-sm px-2 py-1 rounded hover:bg-gray-800"
+              className="text-gray-500 hover:text-red-400 text-sm px-2 py-1 rounded hover:bg-white/[0.06]"
               title="Delete"
               aria-label="Delete capture"
             >
diff --git a/apps/web/src/components/Layout.tsx b/apps/web/src/components/Layout.tsx
index 329091d..8f01f28 100644
--- a/apps/web/src/components/Layout.tsx
+++ b/apps/web/src/components/Layout.tsx
@@ -1,7 +1,7 @@
 import { Link, useLocation } from 'react-router-dom';
 import { ReactNode, useState, useEffect } from 'react';
 import { useInboxCount } from '../api/queries';
-import { PenLine, CalendarDays, Inbox, FileText, ListChecks, Layers, MessageSquare, Cog, Menu, X, Mic, TrendingUp } from 'lucide-react';
+import { PenLine, CalendarDays, Inbox, FileText, ListChecks, Layers, MessageSquare, Cog, Menu, X, Mic, TrendingUp, Brain } from 'lucide-react';
 import { useQueryClient } from '@tanstack/react-query';
 
 const isElectron = typeof window !== 'undefined' && window.electronAPI?.isElectron;
@@ -10,20 +10,30 @@ interface LayoutProps {
   children: ReactNode;
 }
 
+const primaryNavItems = [
+  { path: '/', label: 'Capture', icon: PenLine },
+  { path: '/today', label: 'Today Sheet', icon: CalendarDays },
+  { path: '/weekly-review', label: 'Weekly Review', icon: TrendingUp },
+  { path: '/inbox', label: 'Inbox', icon: Inbox },
+  { path: '/notes', label: 'Notes', icon: FileText },
+  { path: '/todos', label: 'Todos', icon: ListChecks },
+];
+
+const toolNavItems = [
+  { path: '/templates', label: 'Templates', icon: Layers },
+  { path: '/chat', label: 'Chat', icon: MessageSquare },
+];
+
 export default function Layout({ children }: LayoutProps) {
   const { data: inboxCount = 0 } = useInboxCount();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const queryClient = useQueryClient();
 
-  // Listen for capture created events from Quick Capture window
   useEffect(() => {
     if (!window.electronAPI?.onCaptureCreated) return;
-
     const unsubscribe = window.electronAPI.onCaptureCreated(() => {
-      // Invalidate inbox count when a capture is created
       queryClient.invalidateQueries({ queryKey: ['inboxCount'] });
     });
-
     return unsubscribe;
   }, [queryClient]);
 
@@ -34,87 +44,110 @@ export default function Layout({ children }: LayoutProps) {
     return location.pathname.startsWith(path);
   };
 
-  const navItems = [
-    { path: '/', label: 'Capture', icon: PenLine },
-    { path: '/today', label: 'Today Sheet', icon: CalendarDays },
-    { path: '/weekly-review', label: 'Weekly Review', icon: TrendingUp },
-    { path: '/inbox', label: 'Inbox', icon: Inbox },
-    { path: '/notes', label: 'Notes', icon: FileText },
-    { path: '/todos', label: 'Todos', icon: ListChecks },
-    { path: '/templates', label: 'Templates', icon: Layers },
-    { path: '/chat', label: 'Chat', icon: MessageSquare },
-    { path: '/settings', label: 'Settings', icon: Cog },
-  ];
-
   const closeDrawer = () => setIsDrawerOpen(false);
 
+  const NavLink = ({ item, onClick }: { item: { path: string; label: string; icon: React.ElementType }; onClick?: () => void }) => {
+    const Icon = item.icon;
+    const active = isActive(item.path);
+    return (
+      <Link
+        to={item.path}
+        onClick={onClick}
+        className={`
+          flex items-center gap-3 mx-2 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-150
+          ${active
+            ? 'bg-white/[0.08] text-white'
+            : 'text-gray-500 hover:text-gray-200 hover:bg-white/[0.05]'
+          }
+        `}
+      >
+        <Icon className={`w-4 h-4 flex-shrink-0 ${active ? 'text-accent' : ''}`} style={active ? { color: '#9b8dd4' } : undefined} />
+        <span>{item.label}</span>
+        {item.path === '/inbox' && inboxCount > 0 && (
+          <span className="ml-auto badge-accent">
+            {inboxCount}
+          </span>
+        )}
+      </Link>
+    );
+  };
+
+  const SectionLabel = ({ label }: { label: string }) => (
+    <p className="px-5 mb-1 mt-5 text-[10px] uppercase tracking-widest text-gray-600 font-semibold select-none">
+      {label}
+    </p>
+  );
+
   return (
-    <div className="flex h-full bg-gray-950 text-gray-100 overflow-hidden">
+    <div className="flex h-full text-gray-100 overflow-hidden" style={{ backgroundColor: '#070b0f' }}>
       {/* Sidebar - Desktop */}
-      <aside className="hidden md:block w-64 bg-gray-900 border-r border-gray-800 shadow-2xl flex-shrink-0">
-        {/* Draggable title bar region for Electron */}
+      <aside className="hidden md:flex flex-col w-60 flex-shrink-0" style={{ backgroundColor: '#0c1117', borderRight: '1px solid rgba(255,255,255,0.04)' }}>
+        {/* Electron drag region */}
         {isElectron && (
           <div
-            className="h-8 w-full"
+            className="h-8 w-full flex-shrink-0"
             style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
           />
         )}
-        <div className={`p-6 ${isElectron ? 'pt-2' : ''}`}>
-          <h1 className="text-2xl font-bold text-gray-100">Mind Melder</h1>
-          <p className="text-sm text-gray-400 mt-1">Quick Capture & AI Organizer</p>
+
+        {/* Branding */}
+        <div className={`flex items-center gap-2.5 px-4 ${isElectron ? 'py-3' : 'py-5'}`}>
+          <div className="w-7 h-7 rounded-lg flex items-center justify-center flex-shrink-0" style={{ backgroundColor: 'rgba(114,97,175,0.22)', border: '1px solid rgba(114,97,175,0.28)' }}>
+            <Brain className="w-4 h-4" style={{ color: '#9b8dd4' }} />
+          </div>
+          <span className="text-[15px] font-semibold text-gray-100 tracking-tight">Mind Melder</span>
         </div>
 
-        <nav className="mt-6">
-          {navItems.map((item) => {
-            const Icon = item.icon;
-            return (
-              <Link
-                key={item.path}
-                to={item.path}
-                className={`
-                  flex items-center gap-3 px-6 py-3 transition-all
-                  ${
-                    isActive(item.path)
-                      ? 'bg-gray-800 border-l-4 border-accent text-gray-100'
-                      : 'text-gray-400 hover:text-gray-200 hover:bg-gray-800/50'
-                  }
-                `}
-              >
-                <Icon className="w-5 h-5" />
-                <span className="font-medium">{item.label}</span>
-                {item.path === '/inbox' && inboxCount > 0 && (
-                  <span className="badge-accent">
-                    {inboxCount}
-                  </span>
-                )}
-              </Link>
-            );
-          })}
+        {/* Primary nav */}
+        <nav className="flex-1 pb-2 overflow-y-auto">
+          <SectionLabel label="Workspace" />
+          <div className="space-y-0.5">
+            {primaryNavItems.map((item) => (
+              <NavLink key={item.path} item={item} />
+            ))}
+          </div>
+
+          <SectionLabel label="Tools" />
+          <div className="space-y-0.5">
+            {toolNavItems.map((item) => (
+              <NavLink key={item.path} item={item} />
+            ))}
+          </div>
+        </nav>
+
+        {/* Bottom: Settings + Record */}
+        <div className="pb-4 pt-2 space-y-0.5" style={{ borderTop: '1px solid rgba(255,255,255,0.04)' }}>
+          <NavLink item={{ path: '/settings', label: 'Settings', icon: Cog }} />
           {isElectron && (
             <button
               onClick={() => window.electronAPI?.openRecordingWindow()}
-              className="flex items-center gap-3 px-6 py-3 transition-all text-gray-400 hover:text-gray-200 hover:bg-gray-800/50 w-full"
+              className="flex items-center gap-3 mx-2 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-150 text-gray-500 hover:text-gray-200 hover:bg-white/[0.05] w-[calc(100%-16px)]"
             >
-              <Mic className="w-5 h-5" />
-              <span className="font-medium">Record</span>
+              <Mic className="w-4 h-4 flex-shrink-0" />
+              <span>Record</span>
             </button>
           )}
-        </nav>
+        </div>
       </aside>
 
       {/* Mobile Header */}
-      <div className="md:hidden fixed top-0 left-0 right-0 bg-gray-900 border-b border-gray-800 z-50">
+      <div className="md:hidden fixed top-0 left-0 right-0 z-50" style={{ backgroundColor: '#0c1117', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
         <div
           className="flex items-center justify-between px-4 py-3"
           style={isElectron ? { WebkitAppRegion: 'drag' } as React.CSSProperties : undefined}
         >
-          <h1 className="text-lg font-bold text-gray-100">Mind Melder</h1>
+          <div className="flex items-center gap-2">
+            <div className="w-6 h-6 rounded-md flex items-center justify-center" style={{ backgroundColor: 'rgba(114,97,175,0.22)' }}>
+              <Brain className="w-3.5 h-3.5" style={{ color: '#9b8dd4' }} />
+            </div>
+            <span className="text-sm font-semibold text-gray-100">Mind Melder</span>
+          </div>
           <button
             onClick={() => setIsDrawerOpen(true)}
-            className="p-2 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800"
+            className="p-2 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-white/[0.06]"
             style={isElectron ? { WebkitAppRegion: 'no-drag' } as React.CSSProperties : undefined}
           >
-            <Menu className="w-6 h-6" />
+            <Menu className="w-5 h-5" />
           </button>
         </div>
       </div>
@@ -122,70 +155,60 @@ export default function Layout({ children }: LayoutProps) {
       {/* Mobile Drawer Overlay */}
       {isDrawerOpen && (
         <div
-          className="md:hidden fixed inset-0 bg-black/50 z-50"
+          className="md:hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-50"
           onClick={closeDrawer}
         />
       )}
 
       {/* Mobile Drawer */}
       <div
-        className={`md:hidden fixed top-0 right-0 h-full w-72 bg-gray-900 border-l border-gray-800 z-50 transform transition-transform duration-300 ease-in-out ${
+        className={`md:hidden fixed top-0 right-0 h-full w-72 z-50 transform transition-transform duration-300 ease-in-out ${
           isDrawerOpen ? 'translate-x-0' : 'translate-x-full'
         }`}
+        style={{ backgroundColor: '#0c1117', borderLeft: '1px solid rgba(255,255,255,0.05)' }}
       >
-        <div className="flex items-center justify-between p-4 border-b border-gray-800">
-          <span className="font-semibold text-gray-200">Menu</span>
+        <div className="flex items-center justify-between p-4" style={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
+          <span className="text-sm font-semibold text-gray-300">Navigation</span>
           <button
             onClick={closeDrawer}
-            className="p-2 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800"
+            className="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-white/[0.06]"
           >
-            <X className="w-5 h-5" />
+            <X className="w-4 h-4" />
           </button>
         </div>
 
-        <nav className="py-4">
-          {navItems.map((item) => {
-            const Icon = item.icon;
-            return (
-              <Link
-                key={item.path}
-                to={item.path}
-                onClick={closeDrawer}
-                className={`
-                  flex items-center gap-3 px-6 py-3 transition-all
-                  ${
-                    isActive(item.path)
-                      ? 'bg-gray-800 border-l-4 border-accent text-gray-100'
-                      : 'text-gray-400 hover:text-gray-200 hover:bg-gray-800/50'
-                  }
-                `}
+        <nav className="py-3">
+          <p className="px-5 mb-1 mt-2 text-[10px] uppercase tracking-widest text-gray-600 font-semibold">Workspace</p>
+          <div className="space-y-0.5">
+            {primaryNavItems.map((item) => (
+              <NavLink key={item.path} item={item} onClick={closeDrawer} />
+            ))}
+          </div>
+          <p className="px-5 mb-1 mt-5 text-[10px] uppercase tracking-widest text-gray-600 font-semibold">Tools</p>
+          <div className="space-y-0.5">
+            {toolNavItems.map((item) => (
+              <NavLink key={item.path} item={item} onClick={closeDrawer} />
+            ))}
+          </div>
+          <div className="mt-4 pt-3 space-y-0.5" style={{ borderTop: '1px solid rgba(255,255,255,0.05)' }}>
+            <NavLink item={{ path: '/settings', label: 'Settings', icon: Cog }} onClick={closeDrawer} />
+            {isElectron && (
+              <button
+                onClick={() => {
+                  closeDrawer();
+                  window.electronAPI?.openRecordingWindow();
+                }}
+                className="flex items-center gap-3 mx-2 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-150 text-gray-500 hover:text-gray-200 hover:bg-white/[0.05] w-[calc(100%-16px)]"
               >
-                <Icon className="w-5 h-5" />
-                <span className="font-medium">{item.label}</span>
-                {item.path === '/inbox' && inboxCount > 0 && (
-                  <span className="badge-accent">
-                    {inboxCount}
-                  </span>
-                )}
-              </Link>
-            );
-          })}
-          {isElectron && (
-            <button
-              onClick={() => {
-                closeDrawer();
-                window.electronAPI?.openRecordingWindow();
-              }}
-              className="flex items-center gap-3 px-6 py-3 transition-all text-gray-400 hover:text-gray-200 hover:bg-gray-800/50 w-full"
-            >
-              <Mic className="w-5 h-5" />
-              <span className="font-medium">Record</span>
-            </button>
-          )}
+                <Mic className="w-4 h-4 flex-shrink-0" />
+                <span>Record</span>
+              </button>
+            )}
+          </div>
         </nav>
       </div>
 
-      {/* Draggable title bar overlay for Electron - always on top, even above modals */}
+      {/* Draggable title bar overlay for Electron */}
       {isElectron && (
         <div
           className="hidden md:block fixed top-0 left-0 right-0 h-8 z-[60]"
@@ -194,19 +217,18 @@ export default function Layout({ children }: LayoutProps) {
       )}
 
       {/* Main content */}
-      <main className="flex-1 flex flex-col overflow-hidden pt-14 md:pt-0">
-        {/* Draggable title bar region for Electron - main content area */}
+      <main className="flex-1 flex flex-col overflow-hidden pt-14 md:pt-0" style={{ backgroundColor: '#070b0f' }}>
         {isElectron && (
           <div
-            className="hidden md:block h-8 w-full flex-shrink-0 bg-gray-950 z-10"
-            style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
+            className="hidden md:block h-8 w-full flex-shrink-0 z-10"
+            style={{ WebkitAppRegion: 'drag', backgroundColor: '#070b0f' } as React.CSSProperties}
           />
         )}
         {location.pathname.startsWith('/chat') ? (
           <div className="flex-1 min-h-0">{children}</div>
         ) : (
           <div className="flex-1 min-h-0 overflow-auto">
-            <div className="max-w-5xl mx-auto p-4 md:p-8" style={{ paddingBottom: 'calc(1rem + env(safe-area-inset-bottom))' }}>{children}</div>
+            <div className="max-w-5xl mx-auto p-4 md:p-8" style={{ paddingBottom: 'calc(2rem + env(safe-area-inset-bottom))' }}>{children}</div>
           </div>
         )}
       </main>
diff --git a/apps/web/src/components/TaskCard.tsx b/apps/web/src/components/TaskCard.tsx
index a9787ad..08fa9e7 100644
--- a/apps/web/src/components/TaskCard.tsx
+++ b/apps/web/src/components/TaskCard.tsx
@@ -176,7 +176,7 @@ export default function TaskCard({ todo, showDragHandle = true, onToggleComplete
                   type="text"
                   value={editedContent}
                   onChange={(e) => setEditedContent(e.target.value)}
-                  className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-sm text-gray-200 focus:outline-none focus:border-accent-highlight"
+                  className="input-edit"
                   autoFocus
                   onKeyDown={(e) => {
                     if (e.key === 'Enter') {
@@ -198,7 +198,7 @@ export default function TaskCard({ todo, showDragHandle = true, onToggleComplete
                       }
                       setIsEditingContent(false);
                     }}
-                    className="flex items-center gap-1 px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded transition-colors"
+                    className="btn-save"
                   >
                     <Save className="w-3 h-3" />
                     Save
@@ -208,7 +208,7 @@ export default function TaskCard({ todo, showDragHandle = true, onToggleComplete
                       setEditedContent(todo.content);
                       setIsEditingContent(false);
                     }}
-                    className="flex items-center gap-1 px-3 py-1 bg-gray-700 hover:bg-gray-600 text-gray-200 text-xs rounded transition-colors"
+                    className="btn-cancel"
                   >
                     <X className="w-3 h-3" />
                     Cancel
@@ -226,7 +226,7 @@ export default function TaskCard({ todo, showDragHandle = true, onToggleComplete
                 </p>
                 <button
                   onClick={() => setIsEditingContent(true)}
-                  className="absolute top-0 right-0 opacity-0 group-hover/content:opacity-100 transition-opacity p-1 hover:bg-gray-700 rounded"
+                  className="absolute top-0 right-0 opacity-0 group-hover/content:opacity-100 transition-opacity icon-btn"
                   title="Edit title"
                 >
                   <Pencil className="w-3 h-3 text-gray-400" />
@@ -285,7 +285,7 @@ export default function TaskCard({ todo, showDragHandle = true, onToggleComplete
                 </button>
                 {/* Tooltip for feedback text */}
                 {todo.feedbackVote === 'thumbs_down' && todo.feedbackText && !showFeedbackInput && (
-                  <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-800 border border-gray-700 rounded text-xs text-gray-300 whitespace-nowrap opacity-0 group-hover/feedback:opacity-100 transition-opacity pointer-events-none z-10 max-w-xs">
+                  <div className="tooltip-card bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 group-hover/feedback:opacity-100 transition-opacity max-w-xs">
                     {todo.feedbackText}
                   </div>
                 )}
@@ -311,7 +311,7 @@ export default function TaskCard({ todo, showDragHandle = true, onToggleComplete
                 onChange={(e) => setFeedbackText(e.target.value.slice(0, 100))}
                 placeholder="What went wrong? (optional, ESC to cancel)"
                 maxLength={100}
-                className="flex-1 px-3 py-1.5 bg-gray-800 border border-gray-600 rounded text-sm text-gray-200 focus:outline-none focus:border-red-500 placeholder-gray-500"
+                className="feedback-input"
                 autoFocus
                 onKeyDown={(e) => {
                   if (e.key === 'Enter') {
@@ -333,7 +333,7 @@ export default function TaskCard({ todo, showDragHandle = true, onToggleComplete
                   }
                   setShowFeedbackInput(false);
                 }}
-                className="px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white text-xs rounded transition-colors"
+                className="btn-feedback-submit"
               >
                 Submit
               </button>
@@ -351,7 +351,7 @@ export default function TaskCard({ todo, showDragHandle = true, onToggleComplete
 
           {/* Expanded original capture */}
           {showOriginal && todo.captureId && (
-            <div className="mt-3 px-3 py-2 bg-gray-900/40 border border-gray-700/50 rounded text-sm text-gray-400 italic">
+            <div className="source-block">
               {isLoadingCapture ? (
                 <span>Loading original capture...</span>
               ) : (
@@ -371,7 +371,7 @@ export default function TaskCard({ todo, showDragHandle = true, onToggleComplete
 
           {/* Description section */}
           {todo.description && (
-            <div className="mt-3 border-l-2 border-gray-700 pl-3 group/description">
+            <div className="mt-3 description-block group/description">
               <button
                 onClick={() => setShowDescription(!showDescription)}
                 className="flex items-center gap-2 text-sm text-gray-400 hover:text-gray-300"
@@ -386,7 +386,7 @@ export default function TaskCard({ todo, showDragHandle = true, onToggleComplete
                       <textarea
                         value={editedDescription}
                         onChange={(e) => setEditedDescription(e.target.value)}
-                        className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-sm text-gray-200 focus:outline-none focus:border-accent-highlight resize-none"
+                        className="input-edit resize-none"
                         rows={3}
                         autoFocus
                       />
@@ -398,7 +398,7 @@ export default function TaskCard({ todo, showDragHandle = true, onToggleComplete
                             }
                             setIsEditingDescription(false);
                           }}
-                          className="flex items-center gap-1 px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded transition-colors"
+                          className="btn-save"
                         >
                           <Save className="w-3 h-3" />
                           Save
@@ -408,7 +408,7 @@ export default function TaskCard({ todo, showDragHandle = true, onToggleComplete
                             setEditedDescription(todo.description || '');
                             setIsEditingDescription(false);
                           }}
-                          className="flex items-center gap-1 px-3 py-1 bg-gray-700 hover:bg-gray-600 text-gray-200 text-xs rounded transition-colors"
+                          className="btn-cancel"
                         >
                           <X className="w-3 h-3" />
                           Cancel
@@ -420,7 +420,7 @@ export default function TaskCard({ todo, showDragHandle = true, onToggleComplete
                       <p className="text-sm text-gray-300 leading-relaxed pr-8">{todo.description}</p>
                       <button
                         onClick={() => setIsEditingDescription(true)}
-                        className="absolute top-0 right-0 opacity-0 group-hover/edit:opacity-100 transition-opacity p-1 hover:bg-gray-700 rounded"
+                        className="absolute top-0 right-0 opacity-0 group-hover/edit:opacity-100 transition-opacity icon-btn"
                         title="Edit description"
                       >
                         <Pencil className="w-3 h-3 text-gray-400" />
@@ -472,11 +472,7 @@ export default function TaskCard({ todo, showDragHandle = true, onToggleComplete
                         }
                         setShowTimePicker(false);
                       }}
-                      className={`px-2 py-1 rounded text-xs flex items-center gap-1 transition-colors ${
-                        isSelected
-                          ? 'bg-accent text-white'
-                          : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
-                      }`}
+                      className={`picker-btn ${isSelected ? 'picker-btn-active' : 'picker-btn-inactive'}`}
                     >
                       <Icon className="w-3 h-3" />
                       {option.label}
@@ -485,7 +481,7 @@ export default function TaskCard({ todo, showDragHandle = true, onToggleComplete
                 })}
                 <button
                   onClick={() => setShowTimePicker(false)}
-                  className="px-2 py-1 bg-gray-700 text-gray-400 rounded text-xs hover:bg-gray-600"
+                  className="btn-cancel"
                 >
                   <X className="w-3 h-3" />
                 </button>
@@ -523,7 +519,7 @@ export default function TaskCard({ todo, showDragHandle = true, onToggleComplete
                   onChange={handleDateChange}
                   onBlur={handleDateBlur}
                   autoFocus
-                  className="px-2 py-1 bg-gray-800 border border-gray-600 rounded text-xs text-gray-200 focus:outline-none focus:border-accent-highlight"
+                  className="input-edit text-xs py-1"
                 />
               </div>
             )}
@@ -541,16 +537,13 @@ export default function TaskCard({ todo, showDragHandle = true, onToggleComplete
             {!showTagEditor && todo.tags && todo.tags.length > 0 && (
               <>
                 {todo.tags.map((tag) => (
-                  <span
-                    key={tag}
-                    className="px-2 py-0.5 bg-blue-900/20 border border-blue-700/40 rounded text-xs text-blue-300/90"
-                  >
+                  <span key={tag} className="tag-chip">
                     {tag}
                   </span>
                 ))}
                 <button
                   onClick={() => setShowTagEditor(true)}
-                  className="opacity-0 group-hover:opacity-100 transition-opacity px-1 py-0.5 hover:bg-gray-700 rounded"
+                  className="opacity-0 group-hover:opacity-100 transition-opacity icon-btn"
                   title="Edit tags"
                 >
                   <Pencil className="w-3 h-3 text-gray-400" />
@@ -572,7 +565,7 @@ export default function TaskCard({ todo, showDragHandle = true, onToggleComplete
               />
               <button
                 onClick={() => setShowTagEditor(false)}
-                className="px-2 py-1 bg-gray-700 text-gray-400 rounded text-xs hover:bg-gray-600 flex-shrink-0"
+                className="btn-cancel flex-shrink-0"
               >
                 <Check className="w-3 h-3" />
               </button>
diff --git a/apps/web/src/components/TodoCard.tsx b/apps/web/src/components/TodoCard.tsx
index 81b6747..155feba 100644
--- a/apps/web/src/components/TodoCard.tsx
+++ b/apps/web/src/components/TodoCard.tsx
@@ -147,7 +147,7 @@ export default function TodoCard({
                 type="text"
                 value={editedContent}
                 onChange={(e) => setEditedContent(e.target.value)}
-                className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-sm text-gray-200 focus:outline-none focus:border-accent-highlight"
+                className="input-edit"
                 autoFocus
                 onKeyDown={(e) => {
                   if (e.key === 'Enter') {
@@ -159,10 +159,7 @@ export default function TodoCard({
                 }}
               />
               <div className="flex gap-2">
-                <button
-                  onClick={handleSaveContent}
-                  className="flex items-center gap-1 px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded transition-colors"
-                >
+                <button onClick={handleSaveContent} className="btn-save">
                   <Save className="w-3 h-3" />
                   Save
                 </button>
@@ -171,7 +168,7 @@ export default function TodoCard({
                     setEditedContent(todo.content);
                     setIsEditingContent(false);
                   }}
-                  className="flex items-center gap-1 px-3 py-1 bg-gray-700 hover:bg-gray-600 text-gray-200 text-xs rounded transition-colors"
+                  className="btn-cancel"
                 >
                   <X className="w-3 h-3" />
                   Cancel
@@ -189,7 +186,7 @@ export default function TodoCard({
               </p>
               <button
                 onClick={() => setIsEditingContent(true)}
-                className="absolute top-0 right-0 opacity-0 group-hover/content:opacity-100 transition-opacity p-1 hover:bg-gray-700 rounded"
+                className="absolute top-0 right-0 opacity-0 group-hover/content:opacity-100 transition-opacity icon-btn"
                 title="Edit title"
               >
                 <Pencil className="w-3 h-3 text-gray-400" />
@@ -199,7 +196,7 @@ export default function TodoCard({
 
           {/* Description section */}
           {todo.description && (
-            <div className="mt-3 border-l-2 border-gray-700 pl-3">
+            <div className="mt-3 description-block">
               <button
                 onClick={() => setExpandedDescription(!expandedDescription)}
                 className="flex items-center gap-2 text-sm text-gray-400 hover:text-gray-300"
@@ -218,15 +215,12 @@ export default function TodoCard({
                       <textarea
                         value={editedDescription}
                         onChange={(e) => setEditedDescription(e.target.value)}
-                        className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-sm text-gray-200 focus:outline-none focus:border-accent-highlight resize-none"
+                        className="input-edit resize-none"
                         rows={3}
                         autoFocus
                       />
                       <div className="flex gap-2">
-                        <button
-                          onClick={handleSaveDescription}
-                          className="flex items-center gap-1 px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded transition-colors"
-                        >
+                        <button onClick={handleSaveDescription} className="btn-save">
                           <Save className="w-3 h-3" />
                           Save
                         </button>
@@ -235,7 +229,7 @@ export default function TodoCard({
                             setEditedDescription(todo.description || '');
                             setIsEditingDescription(false);
                           }}
-                          className="flex items-center gap-1 px-3 py-1 bg-gray-700 hover:bg-gray-600 text-gray-200 text-xs rounded transition-colors"
+                          className="btn-cancel"
                         >
                           <X className="w-3 h-3" />
                           Cancel
@@ -249,7 +243,7 @@ export default function TodoCard({
                       </p>
                       <button
                         onClick={() => setIsEditingDescription(true)}
-                        className="absolute top-0 right-0 opacity-0 group-hover/edit:opacity-100 transition-opacity p-1 hover:bg-gray-700 rounded"
+                        className="absolute top-0 right-0 opacity-0 group-hover/edit:opacity-100 transition-opacity icon-btn"
                         title="Edit description"
                       >
                         <Pencil className="w-3 h-3 text-gray-400" />
@@ -299,11 +293,7 @@ export default function TodoCard({
                         onUpdateTimeEstimate(todo.id, option.value);
                         setShowTimePicker(false);
                       }}
-                      className={`px-2 py-1 rounded text-xs flex items-center gap-1 transition-colors ${
-                        isSelected
-                          ? 'bg-accent text-white'
-                          : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
-                      }`}
+                      className={`picker-btn ${isSelected ? 'picker-btn-active' : 'picker-btn-inactive'}`}
                     >
                       <Icon className="w-3 h-3" />
                       {option.label}
@@ -312,7 +302,7 @@ export default function TodoCard({
                 })}
                 <button
                   onClick={() => setShowTimePicker(false)}
-                  className="px-2 py-1 bg-gray-700 text-gray-400 rounded text-xs hover:bg-gray-600"
+                  className="btn-cancel"
                 >
                   <X className="w-3 h-3" />
                 </button>
@@ -346,7 +336,7 @@ export default function TodoCard({
                   onChange={(e) => setSelectedDate(e.target.value)}
                   onBlur={handleDateBlur}
                   autoFocus
-                  className="px-2 py-1 bg-gray-800 border border-gray-600 rounded text-xs text-gray-200 focus:outline-none focus:border-accent-highlight"
+                  className="input-edit text-xs py-1"
                 />
               </div>
             )}
@@ -367,16 +357,13 @@ export default function TodoCard({
             {!showTagEditor && todo.tags && todo.tags.length > 0 && (
               <>
                 {todo.tags.map((tag) => (
-                  <span
-                    key={tag}
-                    className="px-2 py-0.5 bg-blue-900/20 border border-blue-700/40 rounded text-xs text-blue-300/90"
-                  >
+                  <span key={tag} className="tag-chip">
                     {tag}
                   </span>
                 ))}
                 <button
                   onClick={() => setShowTagEditor(true)}
-                  className="opacity-0 group-hover:opacity-100 transition-opacity px-1 py-0.5 hover:bg-gray-700 rounded"
+                  className="opacity-0 group-hover:opacity-100 transition-opacity icon-btn"
                   title="Edit tags"
                 >
                   <Pencil className="w-3 h-3 text-gray-400" />
@@ -398,7 +385,7 @@ export default function TodoCard({
               />
               <button
                 onClick={() => setShowTagEditor(false)}
-                className="px-2 py-1 bg-gray-700 text-gray-400 rounded text-xs hover:bg-gray-600 flex-shrink-0"
+                className="btn-cancel flex-shrink-0"
               >
                 <Check className="w-3 h-3" />
               </button>
@@ -411,7 +398,7 @@ export default function TodoCard({
           <div className={`relative ${currentSection ? '' : 'opacity-0 group-hover:opacity-100'} transition-opacity`}>
             <button
               onClick={() => setShowTodaySheetDropdown(!showTodaySheetDropdown)}
-              className="text-gray-400 hover:text-accent-highlight text-sm px-3 py-1 rounded hover:bg-gray-800 transition-all flex items-center gap-2"
+              className="text-gray-400 hover:text-accent-highlight text-sm px-3 py-1 rounded hover:bg-white/[0.06] transition-all flex items-center gap-2"
               title="Add to today sheet"
             >
               {currentSection ? (
@@ -431,7 +418,7 @@ export default function TodoCard({
             </button>
             
             {showTodaySheetDropdown && (
-              <div className="absolute right-0 mt-1 w-48 bg-gray-800 border border-gray-700 rounded-md shadow-lg z-10">
+              <div className="absolute right-0 mt-1 w-48 dropdown-card z-10">
                 {TODAY_SHEET_OPTIONS.map((option) => {
                   const Icon = option.icon;
                   const isSelected = todo.todaySheetSection === option.value;
@@ -439,11 +426,7 @@ export default function TodoCard({
                     <button
                       key={option.value}
                       onClick={() => handleTodaySheetChange(option.value)}
-                      className={`w-full text-left px-3 py-2 text-sm flex items-center gap-2 transition-colors ${
-                        isSelected
-                          ? 'bg-accent text-white'
-                          : 'text-gray-300 hover:bg-gray-700'
-                      }`}
+                      className={`dropdown-item ${isSelected ? 'active' : ''}`}
                     >
                       <Icon className="w-4 h-4" />
                       {option.label}
@@ -452,10 +435,10 @@ export default function TodoCard({
                 })}
                 {currentSection && (
                   <>
-                    <div className="border-t border-gray-700 my-1" />
+                    <div className="border-t border-white/[0.06] my-1" />
                     <button
                       onClick={() => handleTodaySheetChange('none')}
-                      className="w-full text-left px-3 py-2 text-sm flex items-center gap-2 text-red-400 hover:bg-gray-700 transition-colors"
+                      className="dropdown-item danger"
                     >
                       <Trash2 className="w-4 h-4" />
                       Remove
@@ -469,7 +452,7 @@ export default function TodoCard({
           <button
             onClick={() => onDelete(todo.id)}
             className="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-red-400
-                     transition-all text-sm px-3 py-1 rounded hover:bg-gray-800"
+                     transition-all text-sm px-3 py-1 rounded hover:bg-white/[0.06]"
             title="Delete"
           >
             <X className="w-4 h-4" />
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index aebb5e8..5382c66 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -3,74 +3,117 @@
 @tailwind utilities;
 
 @layer base {
-  /* Ensure safe area insets use the theme background color */
   html, body, #root {
     height: 100%;
-    background-color: #030712; /* gray-950 */
+    background-color: #070b0f;
+    font-family: 'Inter', system-ui, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* Apply JetBrains Mono to all mono/input contexts */
+  textarea,
+  input[type="text"],
+  input[type="url"],
+  input[type="date"],
+  input[type="time"],
+  pre,
+  code,
+  kbd,
+  .font-mono {
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
   }
 }
 
 @layer components {
-  /* Today Sheet Card Styles */
+  /* ─── Card Styles ─────────────────────────────────────────── */
+
   .sheet-card {
-    @apply rounded-lg shadow-lg;
-    background: linear-gradient(to bottom right, rgb(17 24 39), rgb(17 24 39 / 0.95));
-    border: 1px solid rgb(114 97 175 / 0.3);
-    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
+    @apply rounded-xl;
+    background: linear-gradient(145deg, #0d1620, #0b131c);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35);
   }
 
   .sheet-card-inner {
-    @apply rounded-lg;
-    background: rgb(31 41 55 / 0.5);
-    border: 1px solid rgb(114 97 175 / 0.2);
+    @apply rounded-xl;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.04);
   }
 
-  /* Task Card Styles */
+  /* ─── Task Card Styles ────────────────────────────────────── */
+
   .task-card {
-    @apply rounded-lg p-4 transition-all relative;
-    background: linear-gradient(to bottom right, rgb(17 24 39), rgb(17 24 39 / 0.95));
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.2);
+    @apply rounded-xl p-4 transition-all duration-150 relative;
+    background: linear-gradient(145deg, #0d1620, #0b131c);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
   }
 
   .task-card:hover {
-    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
+    background: linear-gradient(145deg, #111923, #0d1620);
+    border-color: rgba(255, 255, 255, 0.09);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
+    transform: translateY(-1px);
   }
 
   .task-card-active {
-    border: 1px solid rgb(114 97 175 / 0.3);
+    border-color: rgba(114, 97, 175, 0.22);
+  }
+
+  .task-card-active:hover {
+    border-color: rgba(114, 97, 175, 0.35);
   }
 
   .task-card-completed {
-    @apply opacity-60 border-gray-800;
+    opacity: 0.5;
+    border-color: rgba(255, 255, 255, 0.04);
+  }
+
+  .task-card-completed:hover {
+    transform: none;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
   }
 
-  /* Button Styles */
+  /* ─── Button Styles ───────────────────────────────────────── */
+
   .btn-accent {
-    @apply px-4 py-2 text-gray-100 font-medium rounded-lg transition-colors shadow-md;
-    background-color: rgb(114 97 175 / 0.4);
-    border: 1px solid rgb(114 97 175 / 0.3);
+    @apply px-4 py-2 text-gray-100 font-medium rounded-lg transition-all duration-150 shadow-md;
+    background-color: rgba(114, 97, 175, 0.55);
+    border: 1px solid rgba(114, 97, 175, 0.4);
   }
 
   .btn-accent:hover:not(:disabled) {
-    background-color: rgb(114 97 175 / 0.6);
+    background-color: rgba(114, 97, 175, 0.75);
+    box-shadow: 0 4px 12px rgba(114, 97, 175, 0.25);
+    transform: translateY(-1px);
+  }
+
+  .btn-accent:active:not(:disabled) {
+    transform: translateY(0);
   }
 
   .btn-accent-lg {
-    @apply px-6 py-3 text-gray-100 font-medium rounded-lg transition-colors shadow-lg;
-    background-color: rgb(114 97 175 / 0.4);
-    border: 1px solid rgb(114 97 175 / 0.3);
+    @apply px-6 py-2.5 text-gray-100 font-medium rounded-lg transition-all duration-150 shadow-lg;
+    background-color: rgba(114, 97, 175, 0.55);
+    border: 1px solid rgba(114, 97, 175, 0.4);
   }
 
   .btn-accent-lg:hover:not(:disabled) {
-    background-color: rgb(114 97 175 / 0.6);
+    background-color: rgba(114, 97, 175, 0.75);
+    box-shadow: 0 4px 16px rgba(114, 97, 175, 0.3);
+    transform: translateY(-1px);
   }
 
-  .btn-accent:disabled {
-    @apply bg-gray-800 text-gray-600 border-gray-700;
+  .btn-accent-lg:active:not(:disabled) {
+    transform: translateY(0);
   }
 
+  .btn-accent:disabled,
   .btn-accent-lg:disabled {
-    @apply bg-gray-800 text-gray-600 border-gray-700;
+    @apply text-gray-600;
+    background-color: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.06);
   }
 
   /* Button animations */
@@ -84,94 +127,323 @@
 
   @keyframes button-pulse {
     0%, 100% {
-      box-shadow: 0 0 10px -1px rgb(114 97 175 / 0.2);
+      box-shadow: 0 0 10px -1px rgba(114, 97, 175, 0.2);
     }
     50% {
-      box-shadow: 0 0 10px -1px rgb(114 97 175 / 0.4), 0 0 20px rgb(114 97 175 / 0.3);
+      box-shadow: 0 0 16px rgba(114, 97, 175, 0.5), 0 0 32px rgba(114, 97, 175, 0.2);
     }
   }
 
   @keyframes success-flash {
     0% {
-      background-color: rgb(114 97 175 / 0.4);
-      box-shadow: 0 0 10px -1px rgb(0 0 0 / 0.2);
+      background-color: rgba(114, 97, 175, 0.55);
     }
     50% {
-      background-color: rgb(34 197 94 / 0.6);
-      box-shadow: 0 0 30px rgb(34 197 94 / 0.6);
+      background-color: rgba(34, 197, 94, 0.6);
+      box-shadow: 0 0 24px rgba(34, 197, 94, 0.5);
     }
     100% {
-      background-color: rgb(114 97 175 / 0.4);
-      box-shadow: 0 0 10px -1px rgb(0 0 0 / 0.2);
+      background-color: rgba(114, 97, 175, 0.55);
     }
   }
 
-  /* Input Styles */
+  /* ─── Input Styles ────────────────────────────────────────── */
+
   .input-accent {
-    @apply rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-500;
-    background-color: rgb(31 41 55 / 0.8);
-    border: 1px solid rgb(114 97 175 / 0.2);
+    @apply rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-600 transition-all duration-150;
+    background-color: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
   }
 
+  .input-accent:focus,
   .input-accent:focus-within {
-    @apply outline-none border-transparent;
-    box-shadow: 0 0 0 2px rgb(114 97 175 / 0.5);
+    @apply outline-none;
+    border-color: transparent;
+    background-color: rgba(255, 255, 255, 0.06);
+    box-shadow: 0 0 0 2px rgba(114, 97, 175, 0.45);
   }
 
-  /* Drag Handle */
+  /* ─── Drag Handle ─────────────────────────────────────────── */
+
   .drag-handle {
-    @apply mt-1 cursor-grab active:cursor-grabbing transition-colors text-lg leading-none select-none;
-    color: rgb(114 97 175 / 0.5);
+    @apply mt-1 cursor-grab active:cursor-grabbing transition-colors select-none;
+    color: rgba(114, 97, 175, 0.4);
   }
 
   .drag-handle:hover {
-    color: rgb(114 97 175 / 0.7);
+    color: rgba(114, 97, 175, 0.7);
   }
 
-  /* Checkbox */
+  /* ─── Checkbox ────────────────────────────────────────────── */
+
   .checkbox-accent {
-    @apply mt-0.5 w-5 h-5 rounded border-2 flex items-center justify-center transition-all flex-shrink-0;
+    @apply mt-0.5 w-[18px] h-[18px] rounded-md border-2 flex items-center justify-center transition-all flex-shrink-0;
   }
 
   .checkbox-accent-unchecked {
-    border-color: rgb(114 97 175 / 0.5);
+    border-color: rgba(114, 97, 175, 0.4);
   }
 
   .checkbox-accent-unchecked:hover {
-    border-color: rgb(114 97 175 / 0.7);
-    background-color: rgb(114 97 175 / 0.1);
+    border-color: rgba(114, 97, 175, 0.7);
+    background-color: rgba(114, 97, 175, 0.08);
   }
 
   .checkbox-accent-checked {
-    @apply bg-green-600 border-green-500 shadow-inner;
+    @apply bg-green-600 border-green-500;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
   }
 
   .checkbox-setting-accent-checked {
-    @apply shadow-inner;
-    background-color: rgb(114 97 175 / 0.2);
-    border: 1px solid rgb(114 97 175 / 0.3);
+    background-color: rgba(114, 97, 175, 0.2);
+    border: 1px solid rgba(114, 97, 175, 0.35);
   }
 
-  /* Badge Styles */
+  /* ─── Badge Styles ────────────────────────────────────────── */
+
   .badge-accent {
-    @apply px-2.5 py-0.5 rounded-full text-sm text-gray-300;
-    background-color: rgb(114 97 175 / 0.2);
-    border: 1px solid rgb(114 97 175 / 0.3);
+    @apply px-2 py-0.5 rounded-full text-xs font-semibold text-gray-300;
+    background-color: rgba(114, 97, 175, 0.18);
+    border: 1px solid rgba(114, 97, 175, 0.28);
   }
 
   .badge-chip {
-    @apply px-2 py-0.5 rounded text-xs text-gray-300;
-    background-color: rgb(31 41 55 / 0.8);
-    border: 1px solid rgb(114 97 175 / 0.3);
+    @apply px-2 py-0.5 rounded-md text-xs text-gray-400;
+    background-color: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  /* ─── Inline Edit Inputs ─────────────────────────────────── */
+
+  .input-edit {
+    @apply w-full rounded outline-none transition-all duration-150;
+    padding: 0.375rem 0.625rem;
+    font-size: 0.875rem;
+    color: #e5e7eb;
+    background-color: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.10);
+  }
+
+  .input-edit:focus {
+    border-color: transparent;
+    box-shadow: 0 0 0 2px rgba(114, 97, 175, 0.40);
+  }
+
+  /* ─── Edit Action Buttons ─────────────────────────────────── */
+
+  .btn-save {
+    @apply inline-flex items-center gap-1 rounded text-xs font-medium transition-all duration-150;
+    padding: 0.25rem 0.75rem;
+    background: linear-gradient(135deg, rgba(34, 197, 94, 0.45), rgba(22, 163, 74, 0.35));
+    border: 1px solid rgba(34, 197, 94, 0.30);
+    color: #bbf7d0;
+  }
+
+  .btn-save:hover:not(:disabled) {
+    background: linear-gradient(135deg, rgba(34, 197, 94, 0.62), rgba(22, 163, 74, 0.52));
+    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.18);
+  }
+
+  .btn-save:disabled { opacity: 0.4; cursor: not-allowed; }
+
+  .btn-cancel {
+    @apply inline-flex items-center gap-1 rounded text-xs transition-all duration-150;
+    padding: 0.25rem 0.75rem;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: #9ca3af;
+  }
+
+  .btn-cancel:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.08);
+    color: #e5e7eb;
+  }
+
+  .btn-cancel:disabled { opacity: 0.4; cursor: not-allowed; }
+
+  /* ─── Dropdown / Context Menus ────────────────────────────── */
+
+  .dropdown-card {
+    @apply rounded-lg overflow-hidden;
+    background: linear-gradient(145deg, #0d1620, #0b131c);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.4);
+  }
+
+  .dropdown-item {
+    @apply flex items-center gap-2 w-full text-left transition-colors duration-100;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8125rem;
+    font-family: 'Inter', system-ui, sans-serif;
+    color: #9ca3af;
+  }
+
+  .dropdown-item:hover {
+    background: rgba(255, 255, 255, 0.06);
+    color: #e5e7eb;
+  }
+
+  .dropdown-item.active {
+    background: rgba(114, 97, 175, 0.22);
+    color: #c4b5fd;
+  }
+
+  .dropdown-item.danger { color: #f87171; }
+
+  .dropdown-item.danger:hover {
+    background: rgba(239, 68, 68, 0.10);
+    color: #fca5a5;
+  }
+
+  /* ─── Picker Option Buttons ───────────────────────────────── */
+
+  .picker-btn {
+    @apply inline-flex items-center gap-1 rounded text-xs transition-all duration-150;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid transparent;
+  }
+
+  .picker-btn-inactive {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.07);
+    color: #9ca3af;
+  }
+
+  .picker-btn-inactive:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: #e5e7eb;
   }
 
-  /* Section Styles */
+  .picker-btn-active {
+    background: rgba(114, 97, 175, 0.32);
+    border-color: rgba(114, 97, 175, 0.48);
+    color: #c4b5fd;
+  }
+
+  /* ─── Tag Chips (purple accent family) ───────────────────── */
+
+  .tag-chip {
+    @apply inline-flex items-center rounded-full font-medium;
+    padding: 0.125rem 0.5rem;
+    font-size: 0.6875rem;
+    background: rgba(114, 97, 175, 0.14);
+    border: 1px solid rgba(114, 97, 175, 0.26);
+    color: #a78bfa;
+    letter-spacing: 0.01em;
+  }
+
+  /* ─── Source / Provenance Block ───────────────────────────── */
+
+  .source-block {
+    @apply rounded-lg italic;
+    margin-top: 0.75rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8125rem;
+    color: #6b7280;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+  }
+
+  /* ─── Description Block ───────────────────────────────────── */
+
+  .description-block {
+    padding-left: 0.75rem;
+    font-size: 0.8125rem;
+    color: #6b7280;
+    border-left: 2px solid rgba(114, 97, 175, 0.28);
+  }
+
+  /* ─── Feedback Inputs ─────────────────────────────────────── */
+
+  .feedback-input {
+    @apply flex-1 rounded outline-none transition-all duration-150;
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: #e5e7eb;
+  }
+
+  .feedback-input:focus {
+    border-color: transparent;
+    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.32);
+  }
+
+  .feedback-input::placeholder { color: #4b5563; }
+
+  .btn-feedback-submit {
+    @apply rounded text-xs font-medium transition-all duration-150;
+    padding: 0.375rem 0.75rem;
+    background: rgba(239, 68, 68, 0.38);
+    border: 1px solid rgba(239, 68, 68, 0.28);
+    color: #fca5a5;
+  }
+
+  .btn-feedback-submit:hover {
+    background: rgba(239, 68, 68, 0.56);
+  }
+
+  /* ─── Tooltip ─────────────────────────────────────────────── */
+
+  .tooltip-card {
+    @apply absolute rounded pointer-events-none z-10;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    background: linear-gradient(145deg, #0d1620, #0b131c);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: #9ca3af;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  }
+
+  /* ─── Keyboard Key ────────────────────────────────────────── */
+
+  .kbd {
+    @apply inline-block rounded;
+    padding: 0.125rem 0.375rem;
+    font-size: 0.6875rem;
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    color: #9ca3af;
+  }
+
+  /* ─── Icon Button ─────────────────────────────────────────── */
+
+  .icon-btn {
+    @apply rounded transition-colors duration-100;
+    padding: 0.25rem;
+    color: #6b7280;
+  }
+
+  .icon-btn:hover {
+    background: rgba(255, 255, 255, 0.06);
+    color: #9ca3af;
+  }
+
+  /* ─── Page Header ─────────────────────────────────────────── */
+
+  .page-header {
+    @apply flex items-start justify-between mb-8 pb-6;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  }
+
+  .page-title {
+    @apply text-2xl font-semibold text-white tracking-tight;
+  }
+
+  .page-subtitle {
+    @apply text-sm text-gray-500 mt-1;
+  }
+
+  /* ─── Section Styles ──────────────────────────────────────── */
+
   .section-header {
-    @apply text-xl font-semibold text-gray-100 group-hover:text-white transition-colors;
+    @apply text-lg font-semibold text-gray-100 group-hover:text-white transition-colors;
   }
 
   .section-divider {
-    border-bottom: 2px solid rgb(114 97 175 / 0.2);
+    border-bottom: 1px solid rgba(114, 97, 175, 0.18);
     position: relative;
     overflow: hidden;
   }
@@ -182,11 +454,11 @@
     bottom: 0;
     left: 0;
     right: 0;
-    height: 2px;
+    height: 1px;
     background: linear-gradient(
       90deg,
       transparent,
-      rgb(114 97 175 / 0.8),
+      rgba(114, 97, 175, 0.9),
       transparent
     );
     animation: pulse-sweep 2s ease-in-out infinite;
@@ -207,24 +479,26 @@
   }
 
   .section-border {
-    border-left: 2px solid rgb(114 97 175 / 0.2);
+    border-left: 2px solid rgba(114, 97, 175, 0.2);
   }
 
-  /* Summary Box */
+  /* ─── Summary Box ─────────────────────────────────────────── */
+
   .summary-box {
-    @apply rounded-lg p-4 shadow-md;
-    background-color: rgb(114 97 175 / 0.1);
-    border: 1px solid rgb(114 97 175 / 0.3);
+    @apply rounded-xl p-4;
+    background-color: rgba(114, 97, 175, 0.08);
+    border: 1px solid rgba(114, 97, 175, 0.25);
   }
 
-  /* Accent Text */
+  /* ─── Accent Utilities ────────────────────────────────────── */
+
   .text-accent-highlight {
     @apply font-semibold;
-    color: #7261af;
+    color: #9b8dd4;
   }
 
   .text-accent-arrow {
-    color: rgb(114 97 175 / 0.5);
+    color: rgba(114, 97, 175, 0.5);
   }
 
   .text-accent {
@@ -239,26 +513,28 @@
     background-color: #7261af;
   }
 
-  /* Recording dot pulse */
+  /* ─── Recording ───────────────────────────────────────────── */
+
   .recording-dot-pulse {
     animation: pulse-red 1.5s ease-in-out infinite;
   }
 
   @keyframes pulse-red {
     0%, 100% { opacity: 1; }
-    50% { opacity: 0.4; }
+    50% { opacity: 0.35; }
   }
 
-  /* Fade-in animation for sections */
+  /* ─── Animations ──────────────────────────────────────────── */
+
   .animate-fade-in {
-    animation: fade-in 0.5s ease-out forwards;
+    animation: fade-in 0.4s ease-out forwards;
     opacity: 0;
   }
 
   @keyframes fade-in {
     from {
       opacity: 0;
-      transform: translateY(10px);
+      transform: translateY(8px);
     }
     to {
       opacity: 1;
@@ -266,18 +542,19 @@
     }
   }
 
-  /* Chat Styles */
+  /* ─── Chat Styles ─────────────────────────────────────────── */
+
   .chat-bubble-user {
-    @apply px-4 py-2 max-w-[80%] rounded-2xl rounded-br-sm;
-    background-color: rgb(114 97 175 / 0.2);
-    border: 1px solid rgb(114 97 175 / 0.3);
+    @apply px-4 py-2.5 max-w-[80%] rounded-2xl rounded-br-sm;
+    background-color: rgba(114, 97, 175, 0.22);
+    border: 1px solid rgba(114, 97, 175, 0.28);
   }
 
   .chat-message-assistant {
-    @apply max-w-none text-gray-200 px-4 py-3 rounded-lg;
-     background-color: rgb(17 24 39 / 0.6);
-     border: 1px solid rgb(114 97 175 / 0.15);
-     margin-right: 50pt;
+    @apply max-w-none text-gray-200 px-4 py-3 rounded-xl;
+    background-color: rgba(17, 25, 35, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    margin-right: 50pt;
   }
 
   .chat-message-assistant p {
@@ -294,18 +571,20 @@
   }
 
   .chat-message-assistant code {
-    @apply px-1.5 py-0.5 rounded text-sm font-mono;
-    background-color: rgb(31 41 55 / 0.8);
+    @apply px-1.5 py-0.5 rounded text-sm;
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    background-color: rgba(255, 255, 255, 0.07);
+    border: 1px solid rgba(255, 255, 255, 0.08);
   }
 
   .chat-message-assistant pre {
-    @apply p-4 rounded-lg mb-3 overflow-x-auto;
-    background-color: rgb(17 24 39);
-    border: 1px solid rgb(114 97 175 / 0.2);
+    @apply p-4 rounded-xl mb-3 overflow-x-auto;
+    background-color: rgba(12, 17, 23, 0.9);
+    border: 1px solid rgba(255, 255, 255, 0.07);
   }
 
   .chat-message-assistant pre code {
-    @apply p-0 bg-transparent;
+    @apply p-0 bg-transparent border-0;
   }
 
   .chat-message-assistant h1,
@@ -319,30 +598,32 @@
   .chat-message-assistant h3 { @apply text-base; }
 
   .chat-message-assistant a {
-    @apply text-accent hover:underline;
+    color: #9b8dd4;
+    @apply hover:underline;
   }
 
   .chat-message-assistant blockquote {
-    @apply border-l-2 border-accent/50 pl-4 italic text-gray-400 my-3;
+    @apply border-l-2 pl-4 italic text-gray-400 my-3;
+    border-color: rgba(114, 97, 175, 0.5);
   }
 
-  /* Scrollbar Styles - dark theme */
+  /* ─── Scrollbar ───────────────────────────────────────────── */
+
   ::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
+    width: 6px;
+    height: 6px;
   }
 
   ::-webkit-scrollbar-track {
     background: transparent;
-    margin-block: 20px;
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: rgb(107 114 128 / 0.6);
-    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background-color: rgb(107 114 128 / 0.8);
+    background-color: rgba(255, 255, 255, 0.18);
   }
 }
diff --git a/apps/web/src/pages/CapturePage.tsx b/apps/web/src/pages/CapturePage.tsx
index 3d4a487..7c36f44 100644
--- a/apps/web/src/pages/CapturePage.tsx
+++ b/apps/web/src/pages/CapturePage.tsx
@@ -1,28 +1,33 @@
 import QuickCaptureInput from '../components/QuickCaptureInput';
-import { Lightbulb } from 'lucide-react';
+import { Lightbulb, PenLine } from 'lucide-react';
 
 export default function CapturePage() {
   return (
-    <div className="pt-12">
-      <div className="mb-8">
-        <h2 className="text-3xl font-bold mb-2">Quick Capture</h2>
-        <p className="text-gray-400">
-          Jot down thoughts, ideas, and tasks. They'll be organized automatically.
-        </p>
+    <div>
+      <div className="page-header">
+        <div>
+          <div className="flex items-center gap-2.5 mb-1">
+            <PenLine className="w-5 h-5" style={{ color: '#9b8dd4' }} />
+            <h2 className="page-title">Quick Capture</h2>
+          </div>
+          <p className="page-subtitle">
+            Jot down thoughts, ideas, and tasks. They'll be organized automatically.
+          </p>
+        </div>
       </div>
 
       <QuickCaptureInput variant="textarea" autoFocus />
 
-      <div className="mt-8 bg-gray-900/50 border border-gray-800/50 rounded-lg p-4 shadow-lg shadow-black/10">
+      <div className="mt-8 sheet-card-inner p-4">
         <h3 className="text-sm font-semibold text-gray-300 mb-2 flex items-center gap-2">
-          <Lightbulb className="w-4 h-4" />
+          <Lightbulb className="w-4 h-4" style={{ color: '#9b8dd4' }} />
           Pro Tips
         </h3>
-        <ul className="text-sm text-gray-400 space-y-1">
-          <li>• Press <kbd className="px-2 py-0.5 bg-gray-800 rounded text-xs">Cmd/Ctrl+Enter</kbd> to submit</li>
-          <li>• No need to organize - AI will do it for you</li>
-          <li>• Check <strong>Inbox</strong> to see unorganized captures</li>
-          <li>• Click <strong>"Organize Now"</strong> in Inbox to process them</li>
+        <ul className="text-sm text-gray-500 space-y-1.5">
+          <li>• Press <kbd className="kbd">Cmd/Ctrl+Enter</kbd> to submit</li>
+          <li>• No need to organize — AI will do it for you</li>
+          <li>• Check <span className="text-gray-300 font-medium">Inbox</span> to see unorganized captures</li>
+          <li>• Click <span className="text-gray-300 font-medium">"Organize Now"</span> in Inbox to process them</li>
         </ul>
       </div>
     </div>
diff --git a/apps/web/src/pages/InboxPage.tsx b/apps/web/src/pages/InboxPage.tsx
index 5fb4571..a6206b5 100644
--- a/apps/web/src/pages/InboxPage.tsx
+++ b/apps/web/src/pages/InboxPage.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { capturesAPI, organizeAPI } from '../api/client';
-import { Zap, MailOpen } from 'lucide-react';
+import { Zap, MailOpen, Inbox } from 'lucide-react';
 import TemplateSelector from '../components/TemplateSelector';
 import CaptureCard from '../components/CaptureCard';
 
@@ -95,10 +95,13 @@ export default function InboxPage() {
 
   return (
     <div>
-      <div className="flex items-center justify-between mb-8">
+      <div className="page-header">
         <div>
-          <h2 className="text-3xl font-bold mb-2">Inbox</h2>
-          <p className="text-gray-400">{captures.length} unorganized captures</p>
+          <div className="flex items-center gap-2.5 mb-1">
+            <Inbox className="w-5 h-5" style={{ color: '#9b8dd4' }} />
+            <h2 className="page-title">Inbox</h2>
+          </div>
+          <p className="page-subtitle">{captures.length} unorganized captures</p>
         </div>
 
         {captures.length > 0 && (
@@ -108,7 +111,7 @@ export default function InboxPage() {
               disabled={isOrganizing}
               className="btn-accent-lg flex items-center gap-2"
             >
-              <Zap className="w-5 h-5" />
+              <Zap className="w-4 h-4" />
               {isOrganizing ? 'Organizing...' : 'Organize Now'}
             </button>
             <TemplateSelector
diff --git a/apps/web/src/pages/NotesPage.tsx b/apps/web/src/pages/NotesPage.tsx
index 9798d7d..1d68985 100644
--- a/apps/web/src/pages/NotesPage.tsx
+++ b/apps/web/src/pages/NotesPage.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { notesAPI, searchAPI } from '../api/client';
 import { FileText, X, Plus, Search, FileAudio } from 'lucide-react';
+
 import AudioUploadModal from '../components/AudioUploadModal';
 
 export default function NotesPage() {
@@ -78,10 +79,13 @@ export default function NotesPage() {
 
   return (
     <div>
-      <div className="flex items-center justify-between mb-8">
+      <div className="page-header">
         <div>
-          <h2 className="text-3xl font-bold mb-2">Notes</h2>
-          <p className="text-gray-400">
+          <div className="flex items-center gap-2.5 mb-1">
+            <FileText className="w-5 h-5" style={{ color: '#9b8dd4' }} />
+            <h2 className="page-title">Notes</h2>
+          </div>
+          <p className="page-subtitle">
             {searchQuery ? `${notes.length} result${notes.length !== 1 ? 's' : ''}` : `${notes.length} notes`}
           </p>
         </div>
@@ -164,7 +168,7 @@ export default function NotesPage() {
           {notes.map((note) => (
             <div
               key={note.id}
-              className="task-card task-card-active group p-5"
+              className="task-card task-card-active group"
             >
               <div className="flex items-start justify-between gap-4">
                 <div className="flex-1">
@@ -199,7 +203,7 @@ export default function NotesPage() {
                 <button
                   onClick={() => handleDelete(note.id)}
                   className="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-red-400
-                           transition-all text-sm px-3 py-1 rounded hover:bg-gray-800"
+                           transition-all text-sm px-3 py-1 rounded hover:bg-white/[0.06]"
                   title="Delete"
                 >
                   <X className="w-4 h-4" />
diff --git a/apps/web/src/pages/SettingsPage.tsx b/apps/web/src/pages/SettingsPage.tsx
index 6a1cf0e..48319be 100644
--- a/apps/web/src/pages/SettingsPage.tsx
+++ b/apps/web/src/pages/SettingsPage.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { settingsAPI, ollamaAPI, tokenUsageAPI, type Settings, type OllamaModel, type UsageSummary } from '../api/client';
 import { Cog, ChevronDown, ChevronUp, RefreshCw } from 'lucide-react';
+
 import { getServerUrl, setApiUrl, testConnection } from '../api/config';
 import ServerConnection from '../components/ServerConnection';
 import NotificationSettings from '../components/NotificationSettings';
@@ -184,10 +185,13 @@ export default function SettingsPage() {
   if (!settings) {
     return (
       <div>
-        <div className="flex items-center justify-between mb-8">
+        <div className="page-header">
           <div>
-            <h2 className="text-3xl font-bold mb-2">Settings</h2>
-            <p className="text-gray-400">Configure your LLM provider and preferences</p>
+            <div className="flex items-center gap-2.5 mb-1">
+              <Cog className="w-5 h-5" style={{ color: '#9b8dd4' }} />
+              <h2 className="page-title">Settings</h2>
+            </div>
+            <p className="page-subtitle">Configure your LLM provider and preferences</p>
           </div>
         </div>
 
@@ -221,10 +225,13 @@ export default function SettingsPage() {
 
   return (
     <div>
-      <div className="flex items-center justify-between mb-8">
+      <div className="page-header">
         <div>
-          <h2 className="text-3xl font-bold mb-2">Settings</h2>
-          <p className="text-gray-400">Configure your LLM provider and preferences</p>
+          <div className="flex items-center gap-2.5 mb-1">
+            <Cog className="w-5 h-5" style={{ color: '#9b8dd4' }} />
+            <h2 className="page-title">Settings</h2>
+          </div>
+          <p className="page-subtitle">Configure your LLM provider and preferences</p>
         </div>
       </div>
 
diff --git a/apps/web/src/pages/TemplatesPage.tsx b/apps/web/src/pages/TemplatesPage.tsx
index d050bdb..15bd843 100644
--- a/apps/web/src/pages/TemplatesPage.tsx
+++ b/apps/web/src/pages/TemplatesPage.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { templatesAPI, tagsAPI, Tag } from '../api/client';
-import { Settings, Pencil, X, Tag as TagIcon, Plus } from 'lucide-react';
+import { Settings, Pencil, X, Tag as TagIcon, Plus, Layers } from 'lucide-react';
 
 export default function TemplatesPage() {
   // Templates state
@@ -160,6 +160,16 @@ export default function TemplatesPage() {
 
   return (
     <div className="space-y-10">
+      <div className="page-header">
+        <div>
+          <div className="flex items-center gap-2.5 mb-1">
+            <Layers className="w-5 h-5" style={{ color: '#9b8dd4' }} />
+            <h2 className="page-title">Templates & Tags</h2>
+          </div>
+          <p className="page-subtitle">Define how AI organizes your captures and manage global tags</p>
+        </div>
+      </div>
+
       {/* Tags Section */}
       <section>
         <div className="flex items-center justify-between mb-4">
@@ -275,10 +285,10 @@ export default function TemplatesPage() {
 
       {/* Templates Section */}
       <section>
-        <div className="flex items-center justify-between mb-8">
+        <div className="flex items-center justify-between mb-6">
           <div>
-            <h2 className="text-3xl font-bold mb-2">Templates</h2>
-            <p className="text-gray-400">{templates.length} templates</p>
+            <h3 className="text-lg font-semibold text-gray-100">Templates</h3>
+            <p className="text-sm text-gray-500 mt-0.5">{templates.length} templates</p>
           </div>
 
           {!isCreating && !editingId && (
diff --git a/apps/web/src/pages/TodosPage.tsx b/apps/web/src/pages/TodosPage.tsx
index ad8aa70..84ee291 100644
--- a/apps/web/src/pages/TodosPage.tsx
+++ b/apps/web/src/pages/TodosPage.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
 import { todosAPI, searchAPI, type TimeEstimate } from '../api/client';
-import { CheckCircle, Search, X } from 'lucide-react';
+import { CheckCircle, Search, X, ListChecks } from 'lucide-react';
 import TodoCard from '../components/TodoCard';
 
 export default function TodosPage() {
@@ -187,10 +187,13 @@ export default function TodosPage() {
 
   return (
     <div>
-      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
+      <div className="page-header flex-col md:flex-row gap-4">
         <div>
-          <h2 className="text-3xl font-bold mb-2">Todos</h2>
-          <p className="text-gray-400">
+          <div className="flex items-center gap-2.5 mb-1">
+            <ListChecks className="w-5 h-5" style={{ color: '#9b8dd4' }} />
+            <h2 className="page-title">Todos</h2>
+          </div>
+          <p className="page-subtitle">
             {pendingCount} pending · {completedCount} completed
           </p>
         </div>
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index c7b903f..192e60d 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -5,6 +5,18 @@ export default {
     extend: {
       colors: {
         accent: '#7261af',
+        'accent-light': '#9b8dd4',
+        surface: {
+          900: '#070b0f',
+          800: '#0c1117',
+          700: '#111923',
+          600: '#171f2d',
+          500: '#1e2a3a',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
       },
     },
   },
