diff --git a/apps/web/src/app/(v2)/chat/[thread_id]/page.tsx b/apps/web/src/app/(v2)/chat/[thread_id]/page.tsx
index 64cbfc9e..1751df3b 100644
--- a/apps/web/src/app/(v2)/chat/[thread_id]/page.tsx
+++ b/apps/web/src/app/(v2)/chat/[thread_id]/page.tsx
@@ -29,7 +29,9 @@ export default function ThreadPage({
     reconnectOnMount: true,
   });
 
-  const { threads, threadsLoading } = useThreads<GraphState>();
+  const { threads, threadsLoading } = useThreads<GraphState>(
+    process.env.NEXT_PUBLIC_MANAGER_ASSISTANT_ID,
+  );
   // Find the thread by ID
   const thread = threads?.find((t) => t.thread_id === thread_id);
 
@@ -37,7 +39,7 @@ export default function ThreadPage({
     router.push("/chat");
   };
 
-  if (!thread || threadsLoading || !threadsLoading) {
+  if (!thread || threadsLoading) {
     return <ThreadViewLoading onBackToHome={handleBackToHome} />;
   }
 
@@ -46,17 +48,12 @@ export default function ThreadPage({
     threads?.map(threadToDisplayInfo) ?? [];
   const currentDisplayThread = threadToDisplayInfo(thread);
 
-  const handleThreadSelect = (selectedThread: ThreadDisplayInfo) => {
-    router.push(`/chat/${selectedThread.id}`);
-  };
-
   return (
-    <div className="h-screen bg-black">
+    <div className="bg-background fixed inset-0">
       <ThreadView
         stream={stream}
         displayThread={currentDisplayThread}
         allDisplayThreads={displayThreads}
-        onThreadSelect={handleThreadSelect}
         onBackToHome={handleBackToHome}
       />
     </div>
diff --git a/apps/web/src/app/(v2)/chat/page.tsx b/apps/web/src/app/(v2)/chat/page.tsx
index 089b33ae..4d04aefc 100644
--- a/apps/web/src/app/(v2)/chat/page.tsx
+++ b/apps/web/src/app/(v2)/chat/page.tsx
@@ -18,7 +18,7 @@ export default function ChatPage() {
     threads?.map(threadToDisplayInfo) ?? [];
 
   return (
-    <div className="h-screen overflow-y-hidden bg-black">
+    <div className="bg-background h-screen overflow-y-hidden">
       <Suspense>
         <Toaster />
         <GitHubAppProvider>
diff --git a/apps/web/src/app/(v2)/chat/threads/page.tsx b/apps/web/src/app/(v2)/chat/threads/page.tsx
index 2ed0e6ac..fefbb930 100644
--- a/apps/web/src/app/(v2)/chat/threads/page.tsx
+++ b/apps/web/src/app/(v2)/chat/threads/page.tsx
@@ -3,32 +3,23 @@
 import type React from "react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
-import {
-  ArrowLeft,
-  Search,
-  Filter,
-  CheckCircle,
-  XCircle,
-  Loader2,
-  GitBranch,
-  GitPullRequest,
-  Bug,
-  Calendar,
-  Clock,
-} from "lucide-react";
+import { ArrowLeft, Search, Filter } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { ThreadDisplayInfo, threadToDisplayInfo } from "@/components/v2/types";
 import { useThreads } from "@/hooks/useThreads";
 import { GraphState } from "@open-swe/shared/open-swe/types";
+import { ThreadCard } from "@/components/v2/thread-card";
+import { ThemeToggle } from "@/components/theme-toggle";
 
 type FilterStatus = "all" | "running" | "completed" | "failed" | "pending";
 
 export default function AllThreadsPage() {
   const router = useRouter();
-  const { threads } = useThreads<GraphState>();
+  const { threads } = useThreads<GraphState>(
+    process.env.NEXT_PUBLIC_MANAGER_ASSISTANT_ID,
+  );
   const [searchQuery, setSearchQuery] = useState("");
   const [statusFilter, setStatusFilter] = useState<FilterStatus>("all");
 
@@ -36,51 +27,6 @@ export default function AllThreadsPage() {
   const displayThreads: ThreadDisplayInfo[] =
     threads?.map(threadToDisplayInfo) ?? [];
 
-  const getStatusColor = (status: ThreadDisplayInfo["status"]) => {
-    switch (status) {
-      case "running":
-        return "bg-blue-950 text-blue-400";
-      case "completed":
-        return "bg-green-950 text-green-400";
-      case "failed":
-        return "bg-red-950 text-red-400";
-      case "pending":
-        return "bg-yellow-950 text-yellow-400";
-      default:
-        return "bg-gray-800 text-gray-400";
-    }
-  };
-
-  const getStatusIcon = (status: ThreadDisplayInfo["status"]) => {
-    switch (status) {
-      case "running":
-        return <Loader2 className="h-4 w-4 animate-spin" />;
-      case "completed":
-        return <CheckCircle className="h-4 w-4" />;
-      case "failed":
-        return <XCircle className="h-4 w-4" />;
-      case "pending":
-        return <Clock className="h-4 w-4" />;
-      default:
-        return null;
-    }
-  };
-
-  const getPRStatusColor = (status: string) => {
-    switch (status) {
-      case "merged":
-        return "text-purple-400";
-      case "open":
-        return "text-green-400";
-      case "draft":
-        return "text-gray-400";
-      case "closed":
-        return "text-red-400";
-      default:
-        return "text-gray-400";
-    }
-  };
-
   // Filter and search threads
   const filteredThreads = displayThreads.filter((thread) => {
     const matchesSearch =
@@ -107,50 +53,51 @@ export default function AllThreadsPage() {
     pending: displayThreads.filter((t) => t.status === "pending").length,
   };
 
-  const handleThreadClick = (thread: ThreadDisplayInfo) => {
-    router.push(`/chat/${thread.id}`);
-  };
-
   return (
-    <div className="flex h-screen flex-col bg-black">
+    <div className="bg-background flex h-screen flex-col">
       {/* Header */}
-      <div className="border-b border-gray-900 bg-black px-4 py-3">
+      <div className="border-border bg-card border-b px-4 py-3">
         <div className="flex items-center gap-3">
           <Button
             variant="ghost"
             size="sm"
-            className="h-6 w-6 p-0 text-gray-600 hover:bg-gray-900 hover:text-gray-400"
+            className="text-muted-foreground hover:bg-muted hover:text-foreground h-6 w-6 p-0"
             onClick={() => router.push("/chat")}
           >
             <ArrowLeft className="h-3 w-3" />
           </Button>
           <div className="flex items-center gap-2">
             <div className="h-2 w-2 rounded-full bg-green-500"></div>
-            <span className="font-mono text-sm text-gray-400">All Threads</span>
-          </div>
-          <div className="ml-auto flex items-center gap-2">
-            <span className="text-xs text-gray-600">
-              {filteredThreads.length} threads
+            <span className="text-muted-foreground font-mono text-sm">
+              All Threads
             </span>
           </div>
+          <div className="ml-auto flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <span className="text-muted-foreground text-xs">
+                {filteredThreads.length} threads
+              </span>
+            </div>
+            <ThemeToggle />
+          </div>
         </div>
       </div>
 
       {/* Search and Filters */}
-      <div className="border-b border-gray-900 bg-gray-950 px-4 py-3">
+      <div className="border-border bg-muted/50 border-b px-4 py-3 dark:bg-gray-950">
         <div className="flex items-center gap-3">
           <div className="relative max-w-md flex-1">
-            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-500" />
+            <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
             <Input
               placeholder="Search threads..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="border-gray-700 bg-gray-900 pl-10 text-gray-300 placeholder:text-gray-600"
+              className="border-border bg-background text-foreground placeholder:text-muted-foreground pl-10 dark:bg-gray-900"
             />
           </div>
           <div className="flex items-center gap-1">
-            <Filter className="h-4 w-4 text-gray-500" />
-            <span className="mr-2 text-xs text-gray-500">Filter:</span>
+            <Filter className="text-muted-foreground h-4 w-4" />
+            <span className="text-muted-foreground mr-2 text-xs">Filter:</span>
             {(
               [
                 "all",
@@ -166,8 +113,8 @@ export default function AllThreadsPage() {
                 size="sm"
                 className={`h-7 text-xs ${
                   statusFilter === status
-                    ? "bg-gray-700 text-gray-200"
-                    : "text-gray-500 hover:bg-gray-800 hover:text-gray-300"
+                    ? "bg-muted text-foreground dark:bg-gray-700"
+                    : "text-muted-foreground hover:bg-muted hover:text-foreground"
                 }`}
                 onClick={() => setStatusFilter(status)}
               >
@@ -176,7 +123,7 @@ export default function AllThreadsPage() {
                   : status.charAt(0).toUpperCase() + status.slice(1)}
                 <Badge
                   variant="secondary"
-                  className="ml-1 bg-gray-800 text-xs text-gray-400"
+                  className="bg-muted/70 text-muted-foreground ml-1 text-xs dark:bg-gray-800"
                 >
                   {statusCounts[status]}
                 </Badge>
@@ -197,12 +144,12 @@ export default function AllThreadsPage() {
                 return (
                   <div key={status}>
                     <div className="mb-3 flex items-center gap-2">
-                      <h2 className="text-base font-semibold text-gray-300 capitalize">
+                      <h2 className="text-foreground text-base font-semibold capitalize">
                         {status} Threads
                       </h2>
                       <Badge
                         variant="secondary"
-                        className="bg-gray-800 text-xs text-gray-400"
+                        className="bg-muted/70 text-muted-foreground text-xs dark:bg-gray-800"
                       >
                         {threads.length}
                       </Badge>
@@ -212,10 +159,6 @@ export default function AllThreadsPage() {
                         <ThreadCard
                           key={thread.id}
                           thread={thread}
-                          onClick={() => handleThreadClick(thread)}
-                          getStatusColor={getStatusColor}
-                          getStatusIcon={getStatusIcon}
-                          getPRStatusColor={getPRStatusColor}
                         />
                       ))}
                     </div>
@@ -230,10 +173,6 @@ export default function AllThreadsPage() {
                 <ThreadCard
                   key={thread.id}
                   thread={thread}
-                  onClick={() => handleThreadClick(thread)}
-                  getStatusColor={getStatusColor}
-                  getStatusIcon={getStatusIcon}
-                  getPRStatusColor={getPRStatusColor}
                 />
               ))}
             </div>
@@ -241,8 +180,8 @@ export default function AllThreadsPage() {
 
           {filteredThreads.length === 0 && (
             <div className="py-12 text-center">
-              <div className="mb-2 text-gray-500">No threads found</div>
-              <div className="text-xs text-gray-600">
+              <div className="text-muted-foreground mb-2">No threads found</div>
+              <div className="text-muted-foreground/70 text-xs">
                 {searchQuery
                   ? "Try adjusting your search query"
                   : "No threads match the selected filter"}
@@ -254,95 +193,3 @@ export default function AllThreadsPage() {
     </div>
   );
 }
-
-interface ThreadCardProps {
-  thread: ThreadDisplayInfo;
-  onClick: () => void;
-  getStatusColor: (status: ThreadDisplayInfo["status"]) => string;
-  getStatusIcon: (status: ThreadDisplayInfo["status"]) => React.ReactNode;
-  getPRStatusColor: (status: string) => string;
-}
-
-function ThreadCard({
-  thread,
-  onClick,
-  getStatusColor,
-  getStatusIcon,
-  getPRStatusColor,
-}: ThreadCardProps) {
-  return (
-    <Card
-      className="cursor-pointer border-gray-800 bg-gray-950 transition-shadow hover:bg-gray-900 hover:shadow-lg"
-      onClick={onClick}
-    >
-      <CardHeader className="p-3 pb-2">
-        <div className="flex items-start justify-between">
-          <div className="min-w-0 flex-1">
-            <CardTitle className="truncate text-sm font-medium text-gray-300">
-              {thread.title}
-            </CardTitle>
-            <div className="mt-1 flex items-center gap-1">
-              <GitBranch className="h-2 w-2 text-gray-600" />
-              <span className="truncate text-xs text-gray-500">
-                {thread.repository}
-              </span>
-            </div>
-          </div>
-          <Badge
-            variant="secondary"
-            className={`${getStatusColor(thread.status)} text-xs`}
-          >
-            <div className="flex items-center gap-1">
-              {getStatusIcon(thread.status)}
-              <span className="capitalize">{thread.status}</span>
-            </div>
-          </Badge>
-        </div>
-      </CardHeader>
-      <CardContent className="p-3 pt-0">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <span className="text-xs text-gray-600">
-              {thread.taskCount} tasks
-            </span>
-            <span className="text-xs text-gray-600">•</span>
-            <div className="flex items-center gap-1">
-              <Calendar className="h-2 w-2 text-gray-600" />
-              <span className="text-xs text-gray-600">
-                {thread.lastActivity}
-              </span>
-            </div>
-          </div>
-          <div className="flex items-center gap-1">
-            {thread.githubIssue && (
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-5 w-5 p-0 text-gray-500 hover:text-gray-300"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  window.open(thread.githubIssue!.url, "_blank");
-                }}
-              >
-                <Bug className="h-3 w-3" />
-              </Button>
-            )}
-            {thread.pullRequest && (
-              <Button
-                variant="ghost"
-                size="sm"
-                className={`h-5 w-5 p-0 hover:text-gray-300 ${getPRStatusColor(thread.pullRequest.status)}`}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  window.open(thread.pullRequest!.url, "_blank");
-                }}
-              >
-                <GitPullRequest className="h-3 w-3" />
-              </Button>
-            )}
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 60afd2ed..db5adfa1 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -3,6 +3,7 @@ import "./globals.css";
 import { Inter } from "next/font/google";
 import React from "react";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
+import { ThemeProvider } from "@/components/theme-provider";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -26,9 +27,17 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html
+      lang="en"
+      suppressHydrationWarning
+    >
       <body className={inter.className}>
-        <NuqsAdapter>{children}</NuqsAdapter>
+        <ThemeProvider
+          defaultTheme="system"
+          storageKey="theme"
+        >
+          <NuqsAdapter>{children}</NuqsAdapter>
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/apps/web/src/components/gen-ui/action-step.tsx b/apps/web/src/components/gen-ui/action-step.tsx
index 8c0164ba..6597ee6d 100644
--- a/apps/web/src/components/gen-ui/action-step.tsx
+++ b/apps/web/src/components/gen-ui/action-step.tsx
@@ -54,10 +54,12 @@ export function ActionStep(props: ActionStepProps) {
     switch (props.status) {
       case "loading":
         return (
-          <div className="h-3.5 w-3.5 rounded-full border border-gray-600" />
+          <div className="border-border h-3.5 w-3.5 rounded-full border" />
         );
       case "generating":
-        return <Loader2 className="h-3.5 w-3.5 animate-spin text-gray-400" />;
+        return (
+          <Loader2 className="text-muted-foreground h-3.5 w-3.5 animate-spin" />
+        );
       case "done":
         return props.success ? (
           <CheckCircle className="h-3.5 w-3.5 text-green-500" />
@@ -106,13 +108,13 @@ export function ActionStep(props: ActionStepProps) {
   const renderHeaderIcon = () => {
     if (props.status === "loading" || !("actionType" in props)) {
       // In loading state, we don't know the type yet, use a generic icon
-      return <Loader2 className="mr-2 h-3.5 w-3.5 text-gray-400" />;
+      return <Loader2 className="text-muted-foreground mr-2 h-3.5 w-3.5" />;
     }
 
     return props.actionType === "shell" ? (
-      <Terminal className="mr-2 h-3.5 w-3.5 text-gray-400" />
+      <Terminal className="text-muted-foreground mr-2 h-3.5 w-3.5" />
     ) : (
-      <FileCode className="mr-2 h-3.5 w-3.5 text-gray-400" />
+      <FileCode className="text-muted-foreground mr-2 h-3.5 w-3.5" />
     );
   };
 
@@ -120,7 +122,7 @@ export function ActionStep(props: ActionStepProps) {
   const renderHeaderContent = () => {
     if (props.status === "loading" || !("actionType" in props)) {
       return (
-        <span className="text-xs font-normal text-gray-300">
+        <span className="text-foreground/80 text-xs font-normal">
           Preparing action...
         </span>
       );
@@ -130,18 +132,18 @@ export function ActionStep(props: ActionStepProps) {
       return (
         <div className="flex-1">
           {props.workdir && (
-            <div className="mb-0.5 text-xs font-normal text-gray-400">
+            <div className="text-muted-foreground mb-0.5 text-xs font-normal">
               {props.workdir}
             </div>
           )}
-          <code className="text-xs font-normal text-gray-300">
+          <code className="text-foreground/80 text-xs font-normal">
             {props.command.join(" ")}
           </code>
         </div>
       );
     } else {
       return (
-        <code className="flex-1 text-xs font-normal text-gray-300">
+        <code className="text-foreground/80 flex-1 text-xs font-normal">
           {props.file}
         </code>
       );
@@ -156,12 +158,12 @@ export function ActionStep(props: ActionStepProps) {
 
     if (props.actionType === "shell" && props.output) {
       return (
-        <div className="overflow-x-auto bg-gray-900 p-2 text-gray-200">
+        <div className="bg-muted text-foreground/90 overflow-x-auto p-2 dark:bg-gray-900">
           <pre className="text-xs font-normal whitespace-pre-wrap">
             {props.output}
           </pre>
           {props.errorCode !== undefined && !props.success && (
-            <div className="mt-1 text-xs text-red-400">
+            <div className="mt-1 text-xs text-red-500 dark:text-red-400">
               Exit code: {props.errorCode}
             </div>
           )}
@@ -169,23 +171,25 @@ export function ActionStep(props: ActionStepProps) {
       );
     } else if (props.actionType === "apply-patch" && props.diff) {
       return (
-        <div className="overflow-x-auto bg-gray-900 p-2">
+        <div className="bg-muted overflow-x-auto p-2 dark:bg-gray-900">
           <pre
-            className="text-xs font-normal whitespace-pre-wrap text-gray-200"
+            className="text-foreground/90 text-xs font-normal whitespace-pre-wrap"
             dangerouslySetInnerHTML={{ __html: formatDiff(props.diff) }}
           />
 
           {!props.success && props.errorMessage && (
-            <div className="mt-2 rounded border border-red-700/30 bg-red-900/30 p-2 text-xs text-red-400">
+            <div className="mt-2 rounded border border-red-700/30 bg-red-100/30 p-2 text-xs text-red-600 dark:bg-red-900/30 dark:text-red-400">
               {props.errorMessage}
             </div>
           )}
 
           {!props.success && props.fixedDiff && (
             <div className="mt-2">
-              <div className="mb-1 text-xs text-gray-400">Fixed diff:</div>
+              <div className="text-muted-foreground mb-1 text-xs">
+                Fixed diff:
+              </div>
               <pre
-                className="text-xs font-normal whitespace-pre-wrap text-gray-200"
+                className="text-foreground/90 text-xs font-normal whitespace-pre-wrap"
                 dangerouslySetInnerHTML={{
                   __html: formatDiff(props.fixedDiff),
                 }}
@@ -200,36 +204,36 @@ export function ActionStep(props: ActionStepProps) {
   };
 
   return (
-    <div className="overflow-hidden rounded-md border border-gray-700">
+    <div className="border-border overflow-hidden rounded-md border">
       {props.reasoningText && (
-        <div className="border-b border-blue-800 bg-blue-900/50 p-2">
+        <div className="border-b border-blue-300 bg-blue-100/50 p-2 dark:border-blue-800 dark:bg-blue-900/50">
           <button
             onClick={() => setShowReasoning(!showReasoning)}
-            className="flex items-center gap-1 text-xs font-normal text-blue-400 hover:text-blue-300"
+            className="flex items-center gap-1 text-xs font-normal text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
           >
             <MessageSquare className="h-3 w-3" />
             {showReasoning ? "Hide reasoning" : "Show reasoning"}
           </button>
           {showReasoning && (
-            <p className="mt-1 text-xs font-normal text-blue-300">
+            <p className="mt-1 text-xs font-normal text-blue-700 dark:text-blue-300">
               {props.reasoningText}
             </p>
           )}
         </div>
       )}
 
-      <div className="flex items-center border-b border-gray-700 bg-gray-800 p-2">
+      <div className="border-border bg-card flex items-center border-b p-2 dark:bg-gray-800">
         {renderHeaderIcon()}
         {renderHeaderContent()}
         <div className="flex items-center gap-2">
-          <span className="text-xs font-normal text-gray-400">
+          <span className="text-muted-foreground text-xs font-normal">
             {getStatusText()}
           </span>
           {getStatusIcon()}
           {shouldShowToggle() && (
             <button
               onClick={() => setExpanded(!expanded)}
-              className="text-gray-400 hover:text-gray-300"
+              className="text-muted-foreground hover:text-foreground"
             >
               {expanded ? (
                 <ChevronUp className="h-3.5 w-3.5" />
@@ -244,16 +248,16 @@ export function ActionStep(props: ActionStepProps) {
       {renderContent()}
 
       {props.summaryText && props.status === "done" && (
-        <div className="border-t border-green-800 bg-green-900/50 p-2">
+        <div className="border-t border-green-300 bg-green-100/50 p-2 dark:border-green-800 dark:bg-green-900/50">
           <button
             onClick={() => setShowSummary(!showSummary)}
-            className="flex items-center gap-1 text-xs font-normal text-green-400 hover:text-green-300"
+            className="flex items-center gap-1 text-xs font-normal text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300"
           >
             <FileText className="h-3 w-3" />
             {showSummary ? "Hide summary" : "Show summary"}
           </button>
           {showSummary && (
-            <p className="mt-1 text-xs font-normal text-green-300">
+            <p className="mt-1 text-xs font-normal text-green-700 dark:text-green-300">
               {props.summaryText}
             </p>
           )}
@@ -268,11 +272,11 @@ function formatDiff(diff: string) {
     .split("\n")
     .map((line) => {
       if (line.startsWith("+")) {
-        return `<span class="text-green-400">${line}</span>`;
+        return `<span class="text-green-600 dark:text-green-400">${line}</span>`;
       } else if (line.startsWith("-")) {
-        return `<span class="text-red-400">${line}</span>`;
+        return `<span class="text-red-600 dark:text-red-400">${line}</span>`;
       } else if (line.startsWith("@")) {
-        return `<span class="text-blue-400">${line}</span>`;
+        return `<span class="text-blue-600 dark:text-blue-400">${line}</span>`;
       }
       return line;
     })
diff --git a/apps/web/src/components/plan/plan-viewer.tsx b/apps/web/src/components/plan/plan-viewer.tsx
index e030d708..49313f51 100644
--- a/apps/web/src/components/plan/plan-viewer.tsx
+++ b/apps/web/src/components/plan/plan-viewer.tsx
@@ -38,11 +38,11 @@ export function PlanViewer({
   return (
     <div className={cn("w-full space-y-3", className)}>
       <div className="mb-4 flex items-center gap-2">
-        <h3 className="text-sm font-medium text-white">
+        <h3 className="text-foreground text-sm font-medium">
           {isProposedPlan ? "Proposed" : "Execution"} Plan
         </h3>
         {!isProposedPlan && (
-          <span className="text-xs text-gray-400">
+          <span className="text-muted-foreground text-xs">
             {planItems.filter((item) => item.completed).length} of{" "}
             {planItems.length} completed
           </span>
@@ -61,47 +61,47 @@ export function PlanViewer({
                 className={cn(
                   "flex items-start gap-3 rounded-lg border p-3 transition-colors",
                   {
-                    "border-green-800 bg-green-900/30": status === "completed",
-                    "border-blue-800 bg-blue-900/30": status === "current",
-                    "border-gray-800 bg-gray-900/30": [
-                      "remaining",
-                      "proposed",
-                    ].includes(status),
+                    "border-green-300 bg-green-100/30 dark:border-green-800 dark:bg-green-900/30":
+                      status === "completed",
+                    "border-blue-300 bg-blue-100/30 dark:border-blue-800 dark:bg-blue-900/30":
+                      status === "current",
+                    "border-border bg-muted/30 dark:border-gray-800 dark:bg-gray-900/30":
+                      ["remaining", "proposed"].includes(status),
                   },
                 )}
               >
                 {/* Status Icon */}
                 <div className="mt-0.5 flex-shrink-0">
                   {status === "completed" && (
-                    <Check className="h-4 w-4 text-green-400" />
+                    <Check className="h-4 w-4 text-green-600 dark:text-green-400" />
                   )}
                   {status === "current" && (
-                    <Play className="h-4 w-4 text-blue-400" />
+                    <Play className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                   )}
                   {["remaining", "proposed"].includes(status) && (
-                    <Clock className="h-4 w-4 text-gray-500" />
+                    <Clock className="text-muted-foreground h-4 w-4" />
                   )}
                 </div>
 
                 {/* Task Content */}
                 <div className="min-w-0 flex-1">
-                  <div className="mb-1 flex items-center justify-between text-gray-400">
+                  <div className="text-muted-foreground mb-1 flex items-center justify-between">
                     <div className="flex items-center gap-2">
                       <span className="text-xs font-medium">
                         Step {item.index + 1}
                       </span>
                       {status === "current" && (
-                        <span className="rounded-full bg-blue-900/50 px-2 py-0.5 text-xs text-blue-300">
+                        <span className="rounded-full bg-blue-100/50 px-2 py-0.5 text-xs text-blue-700 dark:bg-blue-900/50 dark:text-blue-300">
                           In Progress
                         </span>
                       )}
                       {status === "completed" && (
-                        <span className="rounded-full bg-green-900/50 px-2 py-0.5 text-xs text-green-300">
+                        <span className="rounded-full bg-green-100/50 px-2 py-0.5 text-xs text-green-700 dark:bg-green-900/50 dark:text-green-300">
                           Done
                         </span>
                       )}
                       {status === "proposed" && (
-                        <span className="rounded-full bg-gray-800 px-2 py-0.5 text-xs text-gray-300">
+                        <span className="bg-muted text-foreground/80 rounded-full px-2 py-0.5 text-xs dark:bg-gray-800 dark:text-gray-300">
                           Proposed
                         </span>
                       )}
@@ -162,13 +162,13 @@ export function PlanViewer({
                           });
                         });
                       }}
-                      className="text-gray-200"
+                      className="text-foreground/90 dark:text-gray-200"
                     />
                   ) : (
                     <p
                       className={cn("text-sm leading-relaxed", {
-                        "text-white": status === "current",
-                        "text-gray-300":
+                        "text-foreground": status === "current",
+                        "text-foreground/80":
                           status === "completed" ||
                           ["remaining", "proposed"].includes(status),
                       })}
@@ -179,11 +179,13 @@ export function PlanViewer({
 
                   {/* Summary for completed tasks */}
                   {item.summary && status === "completed" && (
-                    <div className="mt-2 rounded border border-green-800 bg-green-900/30 p-2">
-                      <p className="mb-1 text-xs font-medium text-green-300">
+                    <div className="mt-2 rounded border border-green-300 bg-green-100/30 p-2 dark:border-green-800 dark:bg-green-900/30">
+                      <p className="mb-1 text-xs font-medium text-green-700 dark:text-green-300">
                         Summary:
                       </p>
-                      <p className="text-xs text-green-400">{item.summary}</p>
+                      <p className="text-xs text-green-600 dark:text-green-400">
+                        {item.summary}
+                      </p>
                     </div>
                   )}
                 </div>
@@ -193,7 +195,7 @@ export function PlanViewer({
         {isProposedPlan && (
           <div
             key="add-new-plan-item"
-            className="flex items-start gap-3 rounded-lg border border-gray-800 bg-gray-900/30 p-3 transition-colors"
+            className="border-border bg-muted/30 flex items-start gap-3 rounded-lg border p-3 transition-colors dark:border-gray-800 dark:bg-gray-900/30"
           >
             <Textarea
               placeholder="Add new plan item"
@@ -214,7 +216,7 @@ export function PlanViewer({
                 ]);
                 setNewPlanItem("");
               }}
-              className="mt-auto bg-inherit text-gray-200 transition-colors hover:bg-gray-800 hover:text-gray-100"
+              className="text-foreground/90 hover:bg-muted hover:text-foreground mt-auto bg-inherit transition-colors dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-100"
               size="sm"
               variant="outline"
             >
diff --git a/apps/web/src/components/theme-provider.tsx b/apps/web/src/components/theme-provider.tsx
new file mode 100644
index 00000000..4ab85347
--- /dev/null
+++ b/apps/web/src/components/theme-provider.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light" | "system";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(defaultTheme);
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem(storageKey) as Theme | null;
+    if (savedTheme) {
+      setTheme(savedTheme);
+    }
+  }, [storageKey]);
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+      root.classList.add(systemTheme);
+    } else {
+      root.classList.add(theme);
+    }
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider
+      {...props}
+      value={value}
+    >
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+
+  return context;
+};
diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
new file mode 100644
index 00000000..27f42f4c
--- /dev/null
+++ b/apps/web/src/components/theme-toggle.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { useTheme } from "@/components/theme-provider";
+import { Moon, Sun } from "lucide-react";
+import { TooltipIconButton } from "./ui/tooltip-icon-button";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <TooltipIconButton
+      tooltip="Toggle theme"
+      variant="ghost"
+      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      aria-label="Toggle theme"
+    >
+      {theme === "light" ? (
+        <Moon className="size-4" />
+      ) : (
+        <Sun className="size-4" />
+      )}
+    </TooltipIconButton>
+  );
+}
diff --git a/apps/web/src/components/thread/index.tsx b/apps/web/src/components/thread/index.tsx
index b1742c41..b324ff91 100644
--- a/apps/web/src/components/thread/index.tsx
+++ b/apps/web/src/components/thread/index.tsx
@@ -24,6 +24,7 @@ import {
   Settings,
   FilePlus2,
 } from "lucide-react";
+import { ThemeToggle } from "../theme-toggle";
 import { useQueryState, parseAsBoolean, parseAsString } from "nuqs";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 import TaskListSidebar from "../task-list-sidebar";
@@ -395,6 +396,7 @@ export function Thread() {
                 >
                   <Settings className="size-4" />
                 </TooltipIconButton>
+                <ThemeToggle />
                 <GitHubOAuthButton />
               </div>
             </div>
diff --git a/apps/web/src/components/thread/messages/tool-calls.tsx b/apps/web/src/components/thread/messages/tool-calls.tsx
index c1024ab6..cdfb451f 100644
--- a/apps/web/src/components/thread/messages/tool-calls.tsx
+++ b/apps/web/src/components/thread/messages/tool-calls.tsx
@@ -22,29 +22,29 @@ export function ToolCalls({
         return (
           <div
             key={idx}
-            className="overflow-hidden rounded-lg border border-gray-700"
+            className="border-border overflow-hidden rounded-lg border"
           >
-            <div className="border-b border-gray-700 bg-gray-800 px-4 py-2">
-              <h3 className="font-medium text-gray-100">
+            <div className="border-border bg-card border-b px-4 py-2 dark:bg-gray-800">
+              <h3 className="text-foreground font-medium">
                 {tc.name}
                 {tc.id && (
-                  <code className="ml-2 rounded bg-gray-700 px-2 py-1 text-sm">
+                  <code className="bg-muted ml-2 rounded px-2 py-1 text-sm dark:bg-gray-700">
                     {tc.id}
                   </code>
                 )}
               </h3>
             </div>
             {hasArgs ? (
-              <table className="min-w-full divide-y divide-gray-700">
-                <tbody className="divide-y divide-gray-700">
+              <table className="divide-border min-w-full divide-y">
+                <tbody className="divide-border divide-y">
                   {Object.entries(args).map(([key, value], argIdx) => (
                     <tr key={argIdx}>
-                      <td className="px-4 py-2 text-sm font-medium whitespace-nowrap text-gray-100">
+                      <td className="text-foreground px-4 py-2 text-sm font-medium whitespace-nowrap">
                         {key}
                       </td>
-                      <td className="px-4 py-2 text-sm text-gray-300">
+                      <td className="text-foreground/80 px-4 py-2 text-sm">
                         {isComplexValue(value) ? (
-                          <code className="rounded bg-gray-800 px-2 py-1 font-mono text-sm break-all">
+                          <code className="bg-muted/70 rounded px-2 py-1 font-mono text-sm break-all dark:bg-gray-800">
                             {JSON.stringify(value, null, 2)}
                           </code>
                         ) : (
@@ -56,7 +56,9 @@ export function ToolCalls({
                 </tbody>
               </table>
             ) : (
-              <code className="block p-3 text-sm">{"{}"}</code>
+              <code className="text-foreground/80 block p-3 text-sm">
+                {"{}"}
+              </code>
             )}
           </div>
         );
@@ -95,28 +97,28 @@ export function ToolResult({ message }: { message: ToolMessage }) {
 
   return (
     <div className="mx-auto grid grid-rows-[1fr_auto] gap-2">
-      <div className="overflow-hidden rounded-lg border border-gray-700">
-        <div className="border-b border-gray-700 bg-gray-800 px-4 py-2">
+      <div className="border-border overflow-hidden rounded-lg border">
+        <div className="border-border bg-card border-b px-4 py-2 dark:bg-gray-800">
           <div className="flex flex-wrap items-center justify-between gap-2">
             {message.name ? (
-              <h3 className="font-medium text-gray-100">
+              <h3 className="text-foreground font-medium">
                 Tool Result:{" "}
-                <code className="rounded bg-gray-700 px-2 py-1">
+                <code className="bg-muted rounded px-2 py-1 dark:bg-gray-700">
                   {message.name}
                 </code>
               </h3>
             ) : (
-              <h3 className="font-medium text-gray-100">Tool Result</h3>
+              <h3 className="text-foreground font-medium">Tool Result</h3>
             )}
             {message.tool_call_id && (
-              <code className="ml-2 rounded bg-gray-700 px-2 py-1 text-sm text-gray-100">
+              <code className="bg-muted text-foreground ml-2 rounded px-2 py-1 text-sm dark:bg-gray-700">
                 {message.tool_call_id}
               </code>
             )}
           </div>
         </div>
         <motion.div
-          className="min-w-full bg-gray-700"
+          className="bg-muted min-w-full dark:bg-gray-700"
           initial={false}
           animate={{ height: "auto" }}
           transition={{ duration: 0.3 }}
@@ -134,8 +136,8 @@ export function ToolResult({ message }: { message: ToolMessage }) {
                 transition={{ duration: 0.2 }}
               >
                 {isJsonContent ? (
-                  <table className="min-w-full divide-y divide-gray-700">
-                    <tbody className="divide-y divide-gray-700">
+                  <table className="divide-border min-w-full divide-y">
+                    <tbody className="divide-border divide-y">
                       {(Array.isArray(parsedContent)
                         ? isExpanded
                           ? parsedContent
@@ -147,12 +149,12 @@ export function ToolResult({ message }: { message: ToolMessage }) {
                           : [item[0], item[1]];
                         return (
                           <tr key={argIdx}>
-                            <td className="px-4 py-2 text-sm font-medium whitespace-nowrap text-gray-100">
+                            <td className="text-foreground px-4 py-2 text-sm font-medium whitespace-nowrap">
                               {key}
                             </td>
-                            <td className="px-4 py-2 text-sm text-gray-300">
+                            <td className="text-foreground/80 px-4 py-2 text-sm">
                               {isComplexValue(value) ? (
-                                <code className="rounded bg-gray-800 px-2 py-1 font-mono text-sm break-all">
+                                <code className="bg-muted/70 rounded px-2 py-1 font-mono text-sm break-all dark:bg-gray-800">
                                   {JSON.stringify(value, null, 2)}
                                 </code>
                               ) : (
@@ -165,7 +167,7 @@ export function ToolResult({ message }: { message: ToolMessage }) {
                     </tbody>
                   </table>
                 ) : (
-                  <code className="block text-sm text-gray-300">
+                  <code className="text-foreground/80 block text-sm">
                     {displayedContent}
                   </code>
                 )}
@@ -178,7 +180,7 @@ export function ToolResult({ message }: { message: ToolMessage }) {
               parsedContent.length > 5)) && (
             <motion.button
               onClick={() => setIsExpanded(!isExpanded)}
-              className="flex w-full cursor-pointer items-center justify-center border-t-[1px] border-gray-700 py-2 text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-800 hover:text-gray-200"
+              className="border-border text-muted-foreground hover:bg-muted hover:text-foreground flex w-full cursor-pointer items-center justify-center border-t-[1px] py-2 transition-all duration-200 ease-in-out dark:hover:bg-gray-800 dark:hover:text-gray-200"
               initial={{ scale: 1 }}
               whileHover={{ scale: 1.02 }}
               whileTap={{ scale: 0.98 }}
diff --git a/apps/web/src/components/v2/default-view.tsx b/apps/web/src/components/v2/default-view.tsx
index fa4b5056..b2850471 100644
--- a/apps/web/src/components/v2/default-view.tsx
+++ b/apps/web/src/components/v2/default-view.tsx
@@ -31,6 +31,9 @@ import {
 } from "../ui/tooltip";
 import { Label } from "../ui/label";
 import { ContentBlocksPreview } from "../thread/ContentBlocksPreview";
+import { TooltipIconButton } from "../ui/tooltip-icon-button";
+import { ThemeToggle } from "../theme-toggle";
+import { ThreadCard } from "./thread-card";
 
 interface DefaultViewProps {
   threads: ThreadDisplayInfo[];
@@ -51,49 +54,6 @@ export function DefaultView({ threads }: DefaultViewProps) {
     handlePaste,
   } = useFileUpload();
 
-  const getStatusColor = (status: ThreadDisplayInfo["status"]) => {
-    switch (status) {
-      case "running":
-        return "bg-blue-950 text-blue-400";
-      case "completed":
-        return "bg-green-950 text-green-400";
-      case "failed":
-        return "bg-red-950 text-red-400";
-      case "pending":
-        return "bg-yellow-950 text-yellow-400";
-      default:
-        return "bg-gray-800 text-gray-400";
-    }
-  };
-
-  const getStatusIcon = (status: ThreadDisplayInfo["status"]) => {
-    switch (status) {
-      case "running":
-        return <Loader2 className="h-4 w-4 animate-spin" />;
-      case "completed":
-        return <CheckCircle className="h-4 w-4" />;
-      case "failed":
-        return <XCircle className="h-4 w-4" />;
-      default:
-        return null;
-    }
-  };
-
-  const getPRStatusColor = (status: string) => {
-    switch (status) {
-      case "merged":
-        return "text-purple-400";
-      case "open":
-        return "text-green-400";
-      case "draft":
-        return "text-gray-400";
-      case "closed":
-        return "text-red-400";
-      default:
-        return "text-gray-400";
-    }
-  };
-
   if (!apiUrl || !assistantId) {
     return <div>Missing API URL or Assistant ID</div>;
   }
@@ -101,15 +61,20 @@ export function DefaultView({ threads }: DefaultViewProps) {
   return (
     <div className="flex flex-1 flex-col">
       {/* Header */}
-      <div className="border-b border-gray-900 bg-black px-4 py-2">
+      <div className="border-border bg-card border-b px-4 py-2">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
             <div className="h-2 w-2 rounded-full bg-green-500"></div>
-            <span className="font-mono text-sm text-gray-400">Open SWE</span>
+            <span className="text-muted-foreground font-mono text-sm">
+              Open SWE
+            </span>
           </div>
-          <div className="flex items-center gap-2">
-            <span className="text-xs text-gray-600">ready</span>
-            <div className="h-1 w-1 rounded-full bg-gray-600"></div>
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <span className="text-muted-foreground text-xs">ready</span>
+              <div className="bg-muted h-1 w-1 rounded-full"></div>
+            </div>
+            <ThemeToggle />
           </div>
         </div>
       </div>
@@ -120,7 +85,7 @@ export function DefaultView({ threads }: DefaultViewProps) {
           {/* Terminal Chat Input */}
           <Card
             className={cn(
-              "border-gray-800 bg-gray-950 py-0",
+              "border-border bg-card py-0 dark:bg-gray-950",
               dragOver
                 ? "border-primary border-2 border-dotted"
                 : "border border-solid",
@@ -155,7 +120,7 @@ export function DefaultView({ threads }: DefaultViewProps) {
                       <TooltipTrigger>
                         <Label
                           htmlFor="file-input"
-                          className="flex cursor-pointer items-center justify-center rounded-full bg-inherit text-gray-500 hover:text-gray-300"
+                          className="text-muted-foreground hover:text-foreground flex cursor-pointer items-center justify-center rounded-full bg-inherit"
                         >
                           <FilePlus2 className="size-4" />
                         </Label>
@@ -171,13 +136,13 @@ export function DefaultView({ threads }: DefaultViewProps) {
           {/* Recent & Running Threads */}
           <div>
             <div className="mb-3 flex items-center justify-between">
-              <h2 className="text-base font-semibold text-gray-300">
+              <h2 className="text-foreground text-base font-semibold">
                 Recent & Running Threads
               </h2>
               <Button
                 variant="outline"
                 size="sm"
-                className="h-7 border-gray-700 bg-gray-900 text-xs text-gray-400 hover:bg-gray-800 hover:text-gray-300"
+                className="border-border text-muted-foreground hover:text-foreground h-7 text-xs"
                 onClick={() => router.push("/chat/threads")}
               >
                 View All
@@ -186,117 +151,46 @@ export function DefaultView({ threads }: DefaultViewProps) {
 
             <div className="grid gap-3 md:grid-cols-2">
               {threads.slice(0, 4).map((thread) => (
-                <Card
+                <ThreadCard
                   key={thread.id}
-                  className="cursor-pointer border-gray-800 bg-gray-950 px-0 py-3 transition-shadow hover:bg-gray-900 hover:shadow-lg"
-                  onClick={() => {
-                    router.push(`/chat/${thread.id}`);
-                  }}
-                >
-                  <CardHeader>
-                    <div className="flex items-start justify-between">
-                      <div className="min-w-0 flex-1">
-                        <CardTitle className="truncate text-sm font-medium text-gray-300">
-                          {thread.title}
-                        </CardTitle>
-                        <div className="mt-1 flex items-center gap-1">
-                          <GitBranch className="h-2 w-2 text-gray-600" />
-                          <span className="truncate text-xs text-gray-500">
-                            {thread.repository}
-                          </span>
-                        </div>
-                      </div>
-                      <Badge
-                        variant="secondary"
-                        className={`${getStatusColor(thread.status)} text-xs`}
-                      >
-                        <div className="flex items-center gap-1">
-                          {getStatusIcon(thread.status)}
-                          <span className="capitalize">{thread.status}</span>
-                        </div>
-                      </Badge>
-                    </div>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <span className="text-xs text-gray-600">
-                          {thread.taskCount === 0
-                            ? "No tasks"
-                            : `${thread.taskCount} tasks`}
-                        </span>
-                        <span className="text-xs text-gray-600">•</span>
-                        <span className="text-xs text-gray-600">
-                          {thread.lastActivity}
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-1">
-                        {thread.githubIssue && (
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="h-5 w-5 p-0 text-gray-500 hover:text-gray-300"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              window.open(thread.githubIssue!.url, "_blank");
-                            }}
-                          >
-                            <Bug className="h-3 w-3" />
-                          </Button>
-                        )}
-                        {thread.pullRequest && (
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className={`h-5 w-5 p-0 hover:text-gray-300 ${getPRStatusColor(thread.pullRequest.status)}`}
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              window.open(thread.pullRequest!.url, "_blank");
-                            }}
-                          >
-                            <GitPullRequest className="h-3 w-3" />
-                          </Button>
-                        )}
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
+                  thread={thread}
+                />
               ))}
             </div>
           </div>
 
           {/* Quick Actions */}
           <div>
-            <h2 className="mb-3 text-base font-semibold text-gray-300">
+            <h2 className="text-foreground mb-3 text-base font-semibold">
               Quick Actions
             </h2>
             <div className="grid gap-3 md:grid-cols-3">
-              <Card className="cursor-pointer border-gray-800 bg-gray-950 py-3 transition-shadow hover:bg-gray-900 hover:shadow-lg">
+              <Card className="border-border bg-card hover:bg-muted cursor-pointer py-3 transition-shadow hover:shadow-lg dark:bg-gray-950">
                 <CardHeader className="px-3">
-                  <CardTitle className="text-sm text-gray-300">
+                  <CardTitle className="text-foreground text-sm">
                     Debug Code
                   </CardTitle>
-                  <CardDescription className="text-xs text-gray-500">
+                  <CardDescription className="text-muted-foreground text-xs">
                     Find and fix issues in your codebase
                   </CardDescription>
                 </CardHeader>
               </Card>
-              <Card className="cursor-pointer border-gray-800 bg-gray-950 py-3 transition-shadow hover:bg-gray-900 hover:shadow-lg">
+              <Card className="border-border bg-card hover:bg-muted cursor-pointer py-3 transition-shadow hover:shadow-lg dark:bg-gray-950">
                 <CardHeader className="px-3">
-                  <CardTitle className="text-sm text-gray-300">
+                  <CardTitle className="text-foreground text-sm">
                     Add Feature
                   </CardTitle>
-                  <CardDescription className="text-xs text-gray-500">
+                  <CardDescription className="text-muted-foreground text-xs">
                     Implement new functionality
                   </CardDescription>
                 </CardHeader>
               </Card>
-              <Card className="cursor-pointer border-gray-800 bg-gray-950 py-3 transition-shadow hover:bg-gray-900 hover:shadow-lg">
+              <Card className="border-border bg-card hover:bg-muted cursor-pointer py-3 transition-shadow hover:shadow-lg dark:bg-gray-950">
                 <CardHeader className="px-3">
-                  <CardTitle className="text-sm text-gray-300">
+                  <CardTitle className="text-foreground text-sm">
                     Refactor Code
                   </CardTitle>
-                  <CardDescription className="text-xs text-gray-500">
+                  <CardDescription className="text-muted-foreground text-xs">
                     Improve code structure and performance
                   </CardDescription>
                 </CardHeader>
diff --git a/apps/web/src/components/v2/terminal-input.tsx b/apps/web/src/components/v2/terminal-input.tsx
index e0dfb7b5..9432cbbf 100644
--- a/apps/web/src/components/v2/terminal-input.tsx
+++ b/apps/web/src/components/v2/terminal-input.tsx
@@ -106,19 +106,19 @@ export function TerminalInput({
   };
 
   return (
-    <div className="rounded-md border border-gray-600 bg-black p-2 font-mono text-xs">
-      <div className="flex items-start gap-1 text-gray-300">
+    <div className="border-border bg-muted rounded-md border p-2 font-mono text-xs dark:bg-black">
+      <div className="text-foreground flex items-start gap-1">
         {/* User@Host */}
-        <span className="text-gray-400">open-swe</span>
-        <span className="text-gray-500">@</span>
-        <span className="text-gray-400">github</span>
-        <span className="text-gray-500">:</span>
+        <span className="text-muted-foreground">open-swe</span>
+        <span className="text-muted-foreground/70">@</span>
+        <span className="text-muted-foreground">github</span>
+        <span className="text-muted-foreground/70">:</span>
 
         {/* Repository & Branch Selectors */}
         <RepositoryBranchSelectors />
 
         {/* Prompt */}
-        <span className="text-gray-400">$</span>
+        <span className="text-muted-foreground">$</span>
       </div>
 
       {/* Multiline Input */}
@@ -129,7 +129,7 @@ export function TerminalInput({
           onKeyDown={handleKeyPress}
           placeholder={placeholder}
           disabled={disabled}
-          className="min-h-[40px] flex-1 resize-none border-none bg-transparent p-0 font-mono text-xs text-white placeholder:text-gray-600 focus-visible:ring-0 focus-visible:ring-offset-0"
+          className="text-foreground placeholder:text-muted-foreground min-h-[40px] flex-1 resize-none border-none bg-transparent p-0 font-mono text-xs focus-visible:ring-0 focus-visible:ring-offset-0"
           rows={3}
           onPaste={onPaste}
         />
@@ -137,7 +137,7 @@ export function TerminalInput({
           onClick={handleSend}
           disabled={disabled || !message.trim()}
           size="sm"
-          className="h-7 w-7 self-end bg-gray-700 p-0 hover:bg-gray-600"
+          className="bg-muted-foreground/20 hover:bg-muted-foreground/30 h-7 w-7 self-end p-0 dark:bg-gray-700 hover:dark:bg-gray-600"
         >
           {loading ? (
             <Loader2 className="size-3 animate-spin" />
@@ -148,7 +148,9 @@ export function TerminalInput({
       </div>
 
       {/* Help text */}
-      <div className="mt-1 text-xs text-gray-600">Press Cmd+Enter to send</div>
+      <div className="text-muted-foreground mt-1 text-xs">
+        Press Cmd+Enter to send
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/components/v2/thread-card.tsx b/apps/web/src/components/v2/thread-card.tsx
new file mode 100644
index 00000000..c8aa5a1b
--- /dev/null
+++ b/apps/web/src/components/v2/thread-card.tsx
@@ -0,0 +1,138 @@
+import {
+  Bug,
+  CheckCircle,
+  GitBranch,
+  GitPullRequest,
+  Loader2,
+  XCircle,
+} from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { ThreadDisplayInfo } from "./types";
+import { useRouter } from "next/navigation";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+
+export function ThreadCard({ thread }: { thread: ThreadDisplayInfo }) {
+  const router = useRouter();
+
+  const getStatusColor = (status: ThreadDisplayInfo["status"]) => {
+    switch (status) {
+      case "running":
+        return "dark:bg-blue-950 bg-blue-100 dark:text-blue-400 text-blue-700";
+      case "completed":
+        return "dark:bg-green-950 bg-green-100 dark:text-green-400 text-green-700";
+      case "failed":
+        return "dark:bg-red-950 bg-red-100 dark:text-red-400 text-red-700";
+      case "pending":
+        return "dark:bg-yellow-950 bg-yellow-100 dark:text-yellow-400 text-yellow-700";
+      default:
+        return "dark:bg-gray-800 bg-gray-200 dark:text-gray-400 text-gray-700";
+    }
+  };
+
+  const getStatusIcon = (status: ThreadDisplayInfo["status"]) => {
+    switch (status) {
+      case "running":
+        return <Loader2 className="h-4 w-4 animate-spin" />;
+      case "completed":
+        return <CheckCircle className="h-4 w-4" />;
+      case "failed":
+        return <XCircle className="h-4 w-4" />;
+      default:
+        return null;
+    }
+  };
+
+  const getPRStatusColor = (status: string) => {
+    switch (status) {
+      case "merged":
+        return "dark:text-purple-400 text-purple-600";
+      case "open":
+        return "dark:text-green-400 text-green-600";
+      case "draft":
+        return "dark:text-gray-400 text-gray-600";
+      case "closed":
+        return "dark:text-red-400 text-red-600";
+      default:
+        return "dark:text-gray-400 text-gray-600";
+    }
+  };
+
+  return (
+    <Card
+      key={thread.id}
+      className="border-border bg-card hover:bg-muted cursor-pointer px-0 py-3 transition-shadow hover:shadow-lg dark:bg-gray-950"
+      onClick={() => {
+        router.push(`/chat/${thread.id}`);
+      }}
+    >
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <div className="min-w-0 flex-1">
+            <CardTitle className="text-foreground truncate text-sm font-medium">
+              {thread.title}
+            </CardTitle>
+            <div className="mt-1 flex items-center gap-1">
+              <GitBranch className="text-muted-foreground h-2 w-2" />
+              <span className="text-muted-foreground truncate text-xs">
+                {thread.repository}
+              </span>
+            </div>
+          </div>
+          <Badge
+            variant="secondary"
+            className={`${getStatusColor(thread.status)} text-xs`}
+          >
+            <div className="flex items-center gap-1">
+              {getStatusIcon(thread.status)}
+              <span className="capitalize">{thread.status}</span>
+            </div>
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <span className="text-muted-foreground text-xs">
+              {thread.taskCount === 0
+                ? "No tasks"
+                : `${thread.taskCount} tasks`}
+            </span>
+            <span className="text-muted-foreground text-xs">•</span>
+            <span className="text-muted-foreground text-xs">
+              {thread.lastActivity}
+            </span>
+          </div>
+          <div className="flex items-center gap-1">
+            {thread.githubIssue && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-muted-foreground hover:text-foreground h-5 w-5 p-0"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  window.open(thread.githubIssue!.url, "_blank");
+                }}
+              >
+                <Bug className="h-3 w-3" />
+              </Button>
+            )}
+            {thread.pullRequest && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className={`h-5 w-5 p-0 hover:text-gray-300 ${getPRStatusColor(thread.pullRequest.status)}`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  window.open(thread.pullRequest!.url, "_blank");
+                }}
+              >
+                <GitPullRequest className="h-3 w-3" />
+              </Button>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/web/src/components/v2/thread-switcher.tsx b/apps/web/src/components/v2/thread-switcher.tsx
index 7b4d5d91..31ea8aa2 100644
--- a/apps/web/src/components/v2/thread-switcher.tsx
+++ b/apps/web/src/components/v2/thread-switcher.tsx
@@ -21,67 +21,21 @@ import {
   Bug,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { getThreadTitle } from "@/lib/thread";
-import { getActivePlanItems } from "@open-swe/shared/open-swe/tasks";
 import { ThreadDisplayInfo } from "./types";
+import { ThreadCard } from "./thread-card";
 
 interface ThreadSwitcherProps {
   currentThread: ThreadDisplayInfo;
   allThreads: ThreadDisplayInfo[];
-  onThreadSelect: (thread: ThreadDisplayInfo) => void;
-  onNewChat: () => void;
 }
 
 export function ThreadSwitcher({
   currentThread,
   allThreads,
-  onThreadSelect,
-  onNewChat,
 }: ThreadSwitcherProps) {
   const [open, setOpen] = useState(false);
   const router = useRouter();
 
-  const getStatusIcon = (status: ThreadDisplayInfo["status"]) => {
-    switch (status) {
-      case "running":
-        return <Loader2 className="h-3 w-3 animate-spin text-blue-400" />;
-      case "completed":
-        return <CheckCircle className="h-3 w-3 text-green-400" />;
-      case "failed":
-        return <XCircle className="h-3 w-3 text-red-400" />;
-      default:
-        return <div className="h-3 w-3 rounded-full bg-gray-700" />;
-    }
-  };
-
-  const getStatusColor = (status: ThreadDisplayInfo["status"]) => {
-    switch (status) {
-      case "running":
-        return "bg-blue-950 text-blue-400";
-      case "completed":
-        return "bg-green-950 text-green-400";
-      case "failed":
-        return "bg-red-950 text-red-400";
-      default:
-        return "bg-gray-800 text-gray-400";
-    }
-  };
-
-  const getPRStatusColor = (status: string) => {
-    switch (status) {
-      case "merged":
-        return "text-purple-400";
-      case "open":
-        return "text-green-400";
-      case "draft":
-        return "text-gray-400";
-      case "closed":
-        return "text-red-400";
-      default:
-        return "text-gray-400";
-    }
-  };
-
   const otherThreads = allThreads.filter((t) => t.id !== currentThread.id);
   const runningCount = otherThreads.filter(
     (t) => t.status === "running",
@@ -96,14 +50,14 @@ export function ThreadSwitcher({
         <Button
           variant="outline"
           size="sm"
-          className="h-7 gap-1 border-gray-700 bg-gray-900 text-xs text-gray-400 hover:bg-gray-800 hover:text-gray-300"
+          className="border-border bg-card text-muted-foreground hover:bg-muted hover:text-foreground h-7 gap-1 text-xs dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-300"
         >
           <Layers3 className="h-3 w-3" />
           <span className="hidden sm:inline">Switch Thread</span>
           {runningCount > 0 && (
             <Badge
               variant="secondary"
-              className="h-4 bg-blue-950 px-1 text-xs text-blue-400"
+              className="h-4 bg-blue-100 px-1 text-xs text-blue-700 dark:bg-blue-950 dark:text-blue-400"
             >
               {runningCount}
             </Badge>
@@ -112,22 +66,22 @@ export function ThreadSwitcher({
       </SheetTrigger>
       <SheetContent
         side="right"
-        className="w-80 border-gray-800 bg-gray-950 sm:w-96"
+        className="border-border bg-background w-80 sm:w-96 dark:border-gray-800 dark:bg-gray-950"
       >
         <SheetHeader className="pb-4">
-          <SheetTitle className="text-base text-gray-300">
+          <SheetTitle className="text-foreground text-base">
             All Threads
           </SheetTitle>
         </SheetHeader>
 
-        <div className="space-y-3">
+        <div className="mx-2 h-full space-y-3">
           {/* New Chat Button */}
           <Button
             onClick={() => {
               router.push("/chat");
               setOpen(false);
             }}
-            className="h-8 w-full justify-start gap-2 border-gray-700 bg-gray-900 text-xs text-gray-300 hover:bg-gray-800"
+            className="border-border bg-card text-foreground hover:bg-muted h-8 w-full justify-start gap-2 text-xs dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800"
             variant="outline"
           >
             <Plus className="h-3 w-3" />
@@ -136,146 +90,25 @@ export function ThreadSwitcher({
 
           {/* Current Thread */}
           <div className="space-y-2">
-            <h3 className="text-xs font-medium tracking-wide text-gray-500 uppercase">
+            <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase dark:text-gray-500">
               Current Thread
             </h3>
-            <div className="rounded-lg border-2 border-blue-800 bg-blue-950 p-3">
-              <div className="flex items-start gap-2">
-                {getStatusIcon(currentThread.status)}
-                <div className="min-w-0 flex-1">
-                  <div className="truncate text-xs font-medium text-gray-300">
-                    {currentThread.title}
-                  </div>
-                  <div className="mt-1 flex items-center gap-1">
-                    <GitBranch className="h-2 w-2 text-gray-600" />
-                    <span className="truncate text-xs text-gray-500">
-                      {currentThread.repository}
-                    </span>
-                  </div>
-                  <div className="mt-2 flex items-center justify-between">
-                    <Badge
-                      variant="secondary"
-                      className={`${getStatusColor(currentThread.status)} text-xs`}
-                    >
-                      {currentThread.status}
-                    </Badge>
-                    <div className="flex items-center gap-1">
-                      {currentThread.githubIssue && (
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-5 w-5 p-0 text-gray-500 hover:text-gray-300"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            // TODO: Open issue in GitHub
-                            alert("Open issue in github not implemented.");
-                          }}
-                        >
-                          <Bug className="h-3 w-3" />
-                        </Button>
-                      )}
-                      {/* TODO: Add PR info to state, then hook this up. */}
-                      {/* {currentThread.pullRequest && (
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className={`h-5 w-5 p-0 hover:text-gray-300 ${getPRStatusColor(currentThread.pullRequest.status)}`}
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            window.open(currentThread.pullRequest!.url, "_blank")
-                          }}
-                        >
-                          <GitPullRequest className="h-3 w-3" />
-                        </Button>
-                      )} */}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+            <ThreadCard thread={currentThread} />
           </div>
 
           {/* Other Threads */}
           {otherThreads.length > 0 && (
-            <div className="space-y-2">
-              <h3 className="text-xs font-medium tracking-wide text-gray-500 uppercase">
+            <div className="h-full space-y-2">
+              <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase dark:text-gray-500">
                 Other Threads
               </h3>
-              <ScrollArea className="h-96">
+              <ScrollArea className="h-full">
                 <div className="space-y-1">
                   {otherThreads.map((thread) => (
-                    <Button
+                    <ThreadCard
+                      thread={thread}
                       key={thread.id}
-                      variant="ghost"
-                      className="h-auto w-full justify-start p-3 text-left text-gray-400 hover:bg-gray-800"
-                      onClick={() => {
-                        router.push(`/chat/${thread.id}`);
-                        setOpen(false);
-                      }}
-                    >
-                      <div className="flex w-full items-start gap-2">
-                        {getStatusIcon(thread.status)}
-                        <div className="min-w-0 flex-1">
-                          <div className="truncate text-xs font-medium text-gray-300">
-                            {thread.title}
-                          </div>
-                          <div className="mt-1 flex items-center gap-1">
-                            <GitBranch className="h-2 w-2 text-gray-600" />
-                            <span className="truncate text-xs text-gray-500">
-                              {thread.repository}
-                            </span>
-                          </div>
-                          <div className="mt-1 flex items-center justify-between">
-                            {thread.taskCount && (
-                              <div className="flex items-center gap-2">
-                                <span className="text-xs text-gray-600">
-                                  {thread.taskCount} tasks
-                                </span>
-                                <Badge
-                                  variant="secondary"
-                                  className={`${getStatusColor(thread.status)} text-xs`}
-                                >
-                                  {thread.status}
-                                </Badge>
-                              </div>
-                            )}
-
-                            <div className="flex items-center gap-1">
-                              {thread.githubIssue && (
-                                <Button
-                                  variant="ghost"
-                                  size="sm"
-                                  className="h-4 w-4 p-0 text-gray-600 hover:text-gray-400"
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    // TODO: Open issue in GitHub
-                                    alert(
-                                      "Open issue in github not implemented.",
-                                    );
-                                  }}
-                                >
-                                  <Bug className="h-2 w-2" />
-                                </Button>
-                              )}
-                              {/* TODO: Add PR info to state, then hook this up. */}
-                              {/* {thread.pullRequest && (
-                                <Button
-                                  variant="ghost"
-                                  size="sm"
-                                  className={`h-4 w-4 p-0 hover:text-gray-400 ${getPRStatusColor(thread.pullRequest.status)}`}
-                                  onClick={(e) => {
-                                    e.stopPropagation()
-                                    window.open(thread.pullRequest!.url, "_blank")
-                                  }}
-                                >
-                                  <GitPullRequest className="h-2 w-2" />
-                                </Button>
-                              )} */}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </Button>
+                    />
                   ))}
                 </div>
               </ScrollArea>
diff --git a/apps/web/src/components/v2/thread-view-loading.tsx b/apps/web/src/components/v2/thread-view-loading.tsx
index 23345ea3..3c354f09 100644
--- a/apps/web/src/components/v2/thread-view-loading.tsx
+++ b/apps/web/src/components/v2/thread-view-loading.tsx
@@ -12,13 +12,15 @@ const isEven = (num: number) => num % 2 === 0;
 
 export function LoadingActionsSection() {
   return (
-    <Card className="border-gray-800 bg-gray-950">
+    <Card className="border-border bg-card dark:bg-gray-950">
       <CardHeader className="p-3">
         <div className="flex items-center gap-2">
-          <div className="h-4 w-32 animate-pulse rounded bg-gray-700"></div>
+          <div className="bg-muted h-4 w-32 animate-pulse rounded dark:bg-gray-700"></div>
           <div className="ml-auto flex items-center gap-1">
-            <Loader2 className="h-3 w-3 animate-spin text-gray-500" />
-            <span className="text-xs text-gray-500">Loading actions...</span>
+            <Loader2 className="text-muted-foreground h-3 w-3 animate-spin" />
+            <span className="text-muted-foreground text-xs">
+              Loading actions...
+            </span>
           </div>
         </div>
       </CardHeader>
@@ -26,35 +28,35 @@ export function LoadingActionsSection() {
         {Array.from({ length: 8 }, (_, i) => (
           <div
             key={i}
-            className="space-y-2 rounded-lg border border-gray-800 bg-gray-900 p-3"
+            className="border-border bg-muted/30 space-y-2 rounded-lg border p-3 dark:bg-gray-900"
           >
             {isEven(i) ? (
-              <div className="space-y-1 rounded bg-black p-2">
-                <div className="h-2 w-32 animate-pulse rounded bg-gray-700"></div>
-                <div className="h-2 w-48 animate-pulse rounded bg-gray-700"></div>
+              <div className="bg-background space-y-1 rounded p-2 dark:bg-black">
+                <div className="bg-muted h-2 w-32 animate-pulse rounded dark:bg-gray-700"></div>
+                <div className="bg-muted h-2 w-48 animate-pulse rounded dark:bg-gray-700"></div>
               </div>
             ) : (
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
-                  <div className="h-4 w-4 animate-pulse rounded bg-gray-700"></div>
-                  <div className="h-3 w-40 animate-pulse rounded bg-gray-700"></div>
+                  <div className="bg-muted h-4 w-4 animate-pulse rounded dark:bg-gray-700"></div>
+                  <div className="bg-muted h-3 w-40 animate-pulse rounded dark:bg-gray-700"></div>
                 </div>
                 <div className="flex items-center gap-2">
-                  <div className="h-3 w-16 animate-pulse rounded bg-gray-700"></div>
-                  <div className="h-4 w-4 animate-pulse rounded bg-gray-700"></div>
+                  <div className="bg-muted h-3 w-16 animate-pulse rounded dark:bg-gray-700"></div>
+                  <div className="bg-muted h-4 w-4 animate-pulse rounded dark:bg-gray-700"></div>
                 </div>
               </div>
             )}
           </div>
         ))}
-        <div className="space-y-2 rounded-lg border-2 border-dashed border-gray-700 p-3">
-          <div className="h-12 animate-pulse rounded bg-gray-800"></div>
-          <div className="h-7 w-16 animate-pulse rounded bg-gray-800"></div>
+        <div className="border-border space-y-2 rounded-lg border-2 border-dashed p-3">
+          <div className="bg-muted h-12 animate-pulse rounded dark:bg-gray-800"></div>
+          <div className="bg-muted h-7 w-16 animate-pulse rounded dark:bg-gray-800"></div>
         </div>
 
         <div className="flex gap-2 pt-3">
-          <div className="h-8 flex-1 animate-pulse rounded bg-gray-700"></div>
-          <div className="h-8 flex-1 animate-pulse rounded bg-gray-700"></div>
+          <div className="bg-muted h-8 flex-1 animate-pulse rounded dark:bg-gray-700"></div>
+          <div className="bg-muted h-8 flex-1 animate-pulse rounded dark:bg-gray-700"></div>
         </div>
       </CardContent>
     </Card>
@@ -65,7 +67,7 @@ export function LoadingChatSection() {
   return (
     <div className="flex-1 space-y-4 overflow-y-auto p-4">
       <div className="flex items-center justify-center py-8">
-        <div className="flex items-center gap-2 text-gray-500">
+        <div className="text-muted-foreground flex items-center gap-2">
           <Loader2 className="h-4 w-4 animate-spin" />
           <span className="text-sm">Loading conversation...</span>
         </div>
@@ -77,18 +79,18 @@ export function LoadingChatSection() {
           className="flex gap-3"
         >
           <div className="flex-shrink-0">
-            <div className="h-6 w-6 animate-pulse rounded-full bg-gray-700"></div>
+            <div className="bg-muted h-6 w-6 animate-pulse rounded-full dark:bg-gray-700"></div>
           </div>
           <div className="flex-1 space-y-2">
             <div className="flex items-center gap-2">
-              <div className="h-3 w-16 animate-pulse rounded bg-gray-700"></div>
-              <div className="h-3 w-12 animate-pulse rounded bg-gray-700"></div>
+              <div className="bg-muted h-3 w-16 animate-pulse rounded dark:bg-gray-700"></div>
+              <div className="bg-muted h-3 w-12 animate-pulse rounded dark:bg-gray-700"></div>
             </div>
             <div className="space-y-1">
-              <div className="h-3 w-full animate-pulse rounded bg-gray-700"></div>
-              <div className="h-3 w-3/4 animate-pulse rounded bg-gray-700"></div>
+              <div className="bg-muted h-3 w-full animate-pulse rounded dark:bg-gray-700"></div>
+              <div className="bg-muted h-3 w-3/4 animate-pulse rounded dark:bg-gray-700"></div>
               {i === 1 && (
-                <div className="h-3 w-1/2 animate-pulse rounded bg-gray-700"></div>
+                <div className="bg-muted h-3 w-1/2 animate-pulse rounded dark:bg-gray-700"></div>
               )}
             </div>
           </div>
@@ -100,42 +102,42 @@ export function LoadingChatSection() {
 
 export function ThreadViewLoading({ onBackToHome }: ThreadViewLoadingProps) {
   return (
-    <div className="flex h-screen flex-1 flex-col bg-black">
-      <div className="absolute top-0 right-0 left-0 z-10 border-b border-gray-900 bg-black px-4 py-2">
+    <div className="bg-background flex h-screen flex-1 flex-col">
+      <div className="border-border bg-card absolute top-0 right-0 left-0 z-10 border-b px-4 py-2">
         <div className="flex items-center gap-3">
           <Button
             variant="ghost"
             size="sm"
-            className="h-6 w-6 p-0 text-gray-600 hover:bg-gray-900 hover:text-gray-400"
+            className="text-muted-foreground hover:bg-muted hover:text-foreground h-6 w-6 p-0"
             onClick={onBackToHome}
           >
             <ArrowLeft className="h-3 w-3" />
           </Button>
           <div className="flex min-w-0 flex-1 items-center gap-2">
-            <div className="h-2 w-2 animate-pulse rounded-full bg-gray-700"></div>
-            <div className="h-3 w-48 animate-pulse rounded bg-gray-700"></div>
-            <span className="text-xs text-gray-600">•</span>
-            <div className="h-3 w-24 animate-pulse rounded bg-gray-700"></div>
+            <div className="bg-muted h-2 w-2 animate-pulse rounded-full dark:bg-gray-700"></div>
+            <div className="bg-muted h-3 w-48 animate-pulse rounded dark:bg-gray-700"></div>
+            <span className="text-muted-foreground text-xs">•</span>
+            <div className="bg-muted h-3 w-24 animate-pulse rounded dark:bg-gray-700"></div>
           </div>
-          <div className="h-7 w-28 animate-pulse rounded bg-gray-800"></div>
+          <div className="bg-muted/70 h-7 w-28 animate-pulse rounded dark:bg-gray-800"></div>
         </div>
       </div>
 
       <div className="flex h-full w-full pt-12">
-        <div className="flex h-full w-1/3 flex-col border-r border-gray-900 bg-gray-950">
+        <div className="border-border bg-muted/30 flex h-full w-1/3 flex-col border-r dark:bg-gray-950">
           <LoadingChatSection />
 
-          <div className="border-t border-gray-800 bg-gray-950 p-4">
+          <div className="border-border bg-muted/30 border-t p-4 dark:bg-gray-950">
             <div className="flex gap-2">
-              <div className="flex-1 rounded-md border border-gray-700 bg-gray-900 p-3">
+              <div className="border-border bg-background flex-1 rounded-md border p-3 dark:bg-gray-900">
                 <div className="space-y-2">
-                  <div className="h-3 w-1/3 animate-pulse rounded bg-gray-700"></div>
-                  <div className="h-3 w-1/2 animate-pulse rounded bg-gray-700"></div>
+                  <div className="bg-muted h-3 w-1/3 animate-pulse rounded dark:bg-gray-700"></div>
+                  <div className="bg-muted h-3 w-1/2 animate-pulse rounded dark:bg-gray-700"></div>
                 </div>
               </div>
-              <div className="h-10 w-10 animate-pulse self-end rounded bg-gray-700"></div>
+              <div className="bg-muted h-10 w-10 animate-pulse self-end rounded dark:bg-gray-700"></div>
             </div>
-            <div className="mt-2 h-3 w-32 animate-pulse rounded bg-gray-700"></div>
+            <div className="bg-muted mt-2 h-3 w-32 animate-pulse rounded dark:bg-gray-700"></div>
           </div>
         </div>
 
diff --git a/apps/web/src/components/v2/thread-view.tsx b/apps/web/src/components/v2/thread-view.tsx
index 4d05bcdc..ad2edbd0 100644
--- a/apps/web/src/components/v2/thread-view.tsx
+++ b/apps/web/src/components/v2/thread-view.tsx
@@ -13,6 +13,7 @@ import { useStream } from "@langchain/langgraph-sdk/react";
 import { ManagerGraphState } from "@open-swe/shared/open-swe/manager/types";
 import { PlannerGraphState } from "@open-swe/shared/open-swe/planner/types";
 import { ActionsRenderer } from "./actions-renderer";
+import { ThemeToggle } from "../theme-toggle";
 
 const PROGRAMMER_ASSISTANT_ID = process.env.NEXT_PUBLIC_PROGRAMMER_ASSISTANT_ID;
 const PLANNER_ASSISTANT_ID = process.env.NEXT_PUBLIC_PLANNER_ASSISTANT_ID;
@@ -21,7 +22,6 @@ interface ThreadViewProps {
   stream: ReturnType<typeof useStream<ManagerGraphState>>;
   displayThread: ThreadDisplayInfo;
   allDisplayThreads: ThreadDisplayInfo[];
-  onThreadSelect: (thread: ThreadDisplayInfo) => void;
   onBackToHome: () => void;
 }
 
@@ -29,7 +29,6 @@ export function ThreadView({
   stream,
   displayThread,
   allDisplayThreads,
-  onThreadSelect,
   onBackToHome,
 }: ThreadViewProps) {
   const [chatInput, setChatInput] = useState("");
@@ -50,14 +49,14 @@ export function ThreadView({
   };
 
   return (
-    <div className="flex h-screen flex-1 flex-col bg-black">
+    <div className="bg-background flex h-screen flex-1 flex-col">
       {/* Header */}
-      <div className="absolute top-0 right-0 left-0 z-10 border-b border-gray-900 bg-black px-4 py-2">
+      <div className="border-border bg-card absolute top-0 right-0 left-0 z-10 border-b px-4 py-2">
         <div className="flex items-center gap-3">
           <Button
             variant="ghost"
             size="sm"
-            className="h-6 w-6 p-0 text-gray-600 hover:bg-gray-900 hover:text-gray-400"
+            className="text-muted-foreground hover:bg-muted hover:text-foreground h-6 w-6 p-0"
             onClick={onBackToHome}
           >
             <ArrowLeft className="h-3 w-3" />
@@ -72,28 +71,27 @@ export function ThreadView({
                     : "bg-red-500"
               }`}
             ></div>
-            <span className="truncate font-mono text-sm text-gray-400">
+            <span className="text-muted-foreground truncate font-mono text-sm">
               {displayThread.title}
             </span>
-            <span className="text-xs text-gray-600">•</span>
-            <GitBranch className="h-3 w-3 text-gray-600" />
-            <span className="truncate text-xs text-gray-600">
+            <span className="text-muted-foreground text-xs">•</span>
+            <GitBranch className="text-muted-foreground h-3 w-3" />
+            <span className="text-muted-foreground truncate text-xs">
               {displayThread.repository}
             </span>
           </div>
           <ThreadSwitcher
             currentThread={displayThread}
             allThreads={allDisplayThreads}
-            onThreadSelect={onThreadSelect}
-            onNewChat={onBackToHome}
           />
+          <ThemeToggle />
         </div>
       </div>
 
       {/* Main Content - Split Layout */}
       <div className="flex h-full w-full pt-12">
         {/* Left Side - Chat Interface */}
-        <div className="flex h-full w-1/3 flex-col border-r border-gray-900 bg-gray-950">
+        <div className="border-border bg-muted/30 flex h-full w-1/3 flex-col border-r dark:bg-gray-950">
           {/* Chat Messages */}
           <div className="flex-1 space-y-4 overflow-y-auto p-4">
             {stream.messages.map((message) => (
@@ -103,22 +101,22 @@ export function ThreadView({
               >
                 <div className="flex-shrink-0">
                   {message.type === "human" ? (
-                    <div className="flex h-6 w-6 items-center justify-center rounded-full bg-gray-700">
-                      <User className="h-3 w-3 text-gray-400" />
+                    <div className="bg-muted flex h-6 w-6 items-center justify-center rounded-full dark:bg-gray-700">
+                      <User className="text-muted-foreground h-3 w-3" />
                     </div>
                   ) : (
-                    <div className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-900">
-                      <Bot className="h-3 w-3 text-blue-400" />
+                    <div className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
+                      <Bot className="h-3 w-3 text-blue-700 dark:text-blue-400" />
                     </div>
                   )}
                 </div>
                 <div className="flex-1 space-y-1">
                   <div className="flex items-center gap-2">
-                    <span className="text-xs font-medium text-gray-400">
-                      {message.type === "human" ? "You" : "AI Agent"}
+                    <span className="text-muted-foreground text-xs font-medium">
+                      {message.type === "human" ? "You" : "Agent"}
                     </span>
                   </div>
-                  <div className="text-sm leading-relaxed text-gray-300">
+                  <div className="text-foreground text-sm leading-relaxed">
                     {getMessageContentString(message.content)}
                   </div>
                 </div>
@@ -127,13 +125,13 @@ export function ThreadView({
           </div>
 
           {/* Chat Input - Fixed at bottom */}
-          <div className="border-t border-gray-800 bg-gray-950 p-4">
+          <div className="border-border bg-muted/30 border-t p-4 dark:bg-gray-950">
             <div className="flex gap-2">
               <Textarea
                 value={chatInput}
                 onChange={(e) => setChatInput(e.target.value)}
                 placeholder="Type your message..."
-                className="min-h-[60px] flex-1 resize-none border-gray-700 bg-gray-900 text-sm text-gray-300 placeholder:text-gray-600"
+                className="border-border bg-background text-foreground placeholder:text-muted-foreground min-h-[60px] flex-1 resize-none text-sm dark:bg-gray-900"
                 onKeyDown={(e) => {
                   if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
                     e.preventDefault();
@@ -145,12 +143,12 @@ export function ThreadView({
                 onClick={handleSendMessage}
                 disabled={!chatInput.trim()}
                 size="sm"
-                className="h-10 w-10 self-end bg-gray-700 p-0 hover:bg-gray-600"
+                className="bg-muted hover:bg-muted/80 h-10 w-10 self-end p-0 dark:bg-gray-700 hover:dark:bg-gray-600"
               >
                 <Send className="h-4 w-4" />
               </Button>
             </div>
-            <div className="mt-2 text-xs text-gray-600">
+            <div className="text-muted-foreground mt-2 text-xs">
               Press Cmd+Enter to send
             </div>
           </div>
@@ -163,17 +161,12 @@ export function ThreadView({
               defaultValue="planner"
               className="w-full"
             >
-              <TabsList>
+              <TabsList className="bg-muted/70 dark:bg-gray-800">
                 <TabsTrigger value="planner">Planner</TabsTrigger>
                 <TabsTrigger value="programmer">Programmer</TabsTrigger>
               </TabsList>
               <TabsContent value="planner">
-                <Card className="border-gray-800 bg-gray-950 px-0 py-4">
-                  <CardHeader>
-                    <CardTitle className="text-base text-gray-300">
-                      Planning Actions
-                    </CardTitle>
-                  </CardHeader>
+                <Card className="border-border bg-card px-0 py-4 dark:bg-gray-950">
                   <CardContent className="space-y-2 p-3 pt-0">
                     {plannerThreadId &&
                       plannerRunId &&
@@ -190,12 +183,7 @@ export function ThreadView({
                 </Card>
               </TabsContent>
               <TabsContent value="programmer">
-                <Card className="border-gray-800 bg-gray-950 px-0 py-4">
-                  <CardHeader>
-                    <CardTitle className="text-base text-gray-300">
-                      Code Actions
-                    </CardTitle>
-                  </CardHeader>
+                <Card className="border-border bg-card px-0 py-4 dark:bg-gray-950">
                   <CardContent className="space-y-2 p-3 pt-0">
                     {programmerSession && PROGRAMMER_ASSISTANT_ID && (
                       <ActionsRenderer<PlannerGraphState>
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index 3e9748d1..8b8f360d 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -1,6 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ["class"],
+  darkMode: "class",
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
   content: [
     "./index.html",
     "./src/**/*.{ts,tsx,js,jsx}",