diff --git a/apps/web/src/app/(v2)/chat/threads/page.tsx b/apps/web/src/app/(v2)/chat/threads/page.tsx
index b632b3f0..84566c10 100644
--- a/apps/web/src/app/(v2)/chat/threads/page.tsx
+++ b/apps/web/src/app/(v2)/chat/threads/page.tsx
@@ -16,6 +16,7 @@ import { MANAGER_GRAPH_ID } from "@open-swe/shared/constants";
 import { useThreadsStatus } from "@/hooks/useThreadsStatus";
 import { cn } from "@/lib/utils";
 import { threadsToMetadata } from "@/lib/thread-utils";
+import { OpenSWELogoSVG } from "@/components/icons/openswe";
 
 type FilterStatus =
   | "all"
@@ -109,10 +110,10 @@ function AllThreadsPageContent() {
             <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="text-muted-foreground font-mono text-sm">
-              All Threads
-            </span>
+            <OpenSWELogoSVG
+              width={120}
+              height={18}
+            />
           </div>
           <div className="ml-auto flex items-center gap-4">
             <div className="flex items-center gap-2">
@@ -129,7 +130,7 @@ function AllThreadsPageContent() {
       </div>
 
       {/* Search and Filters */}
-      <div className="border-border bg-muted/50 border-b px-4 py-3 dark:bg-gray-950">
+      <div className="border-border bg-muted/50 border-b px-4 py-3">
         <div className="flex items-center gap-3">
           <div className="relative max-w-md flex-1">
             <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
@@ -137,7 +138,7 @@ function AllThreadsPageContent() {
               placeholder="Search threads..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="border-border bg-background text-foreground placeholder:text-muted-foreground pl-10 dark:bg-gray-900"
+              className="border-border bg-background text-foreground placeholder:text-muted-foreground pl-10"
             />
           </div>
           <div className="flex items-center gap-1">
@@ -162,7 +163,7 @@ function AllThreadsPageContent() {
                 className={cn(
                   "h-7 text-xs",
                   statusFilter === status
-                    ? "bg-muted text-foreground dark:bg-gray-700"
+                    ? "bg-muted text-foreground"
                     : "text-muted-foreground hover:bg-muted hover:text-foreground",
                 )}
                 onClick={() => setStatusFilter(status)}
@@ -172,7 +173,7 @@ function AllThreadsPageContent() {
                   : status.charAt(0).toUpperCase() + status.slice(1)}
                 <Badge
                   variant="secondary"
-                  className="bg-muted/70 text-muted-foreground ml-1 text-xs dark:bg-gray-800"
+                  className="bg-muted/70 text-muted-foreground ml-1 text-xs"
                 >
                   {statusCounts[status]}
                 </Badge>
@@ -197,7 +198,7 @@ function AllThreadsPageContent() {
                       </h2>
                       <Badge
                         variant="secondary"
-                        className="bg-muted/70 text-muted-foreground text-xs dark:bg-gray-800"
+                        className="bg-muted/70 text-muted-foreground text-xs"
                       >
                         {threads.length}
                       </Badge>
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index e06aab7c..bcf8fb66 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -41,38 +41,38 @@
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.439 0 0);
+  --background: oklch(0.29 0.005 280);
+  --foreground: oklch(0.92 0.01 280);
+  --card: oklch(0.32 0.005 280);
+  --card-foreground: oklch(0.92 0.01 280);
+  --popover: oklch(0.32 0.005 280);
+  --popover-foreground: oklch(0.92 0.01 280);
+  --primary: oklch(0.92 0.01 280);
+  --primary-foreground: oklch(0.24 0.005 280);
+  --secondary: oklch(0.38 0.005 280);
+  --secondary-foreground: oklch(0.92 0.01 280);
+  --muted: oklch(0.35 0.005 280);
+  --muted-foreground: oklch(0.65 0.01 280);
+  --accent: oklch(0.38 0.005 280);
+  --accent-foreground: oklch(0.92 0.01 280);
+  --destructive: oklch(0.55 0.15 20);
+  --destructive-foreground: oklch(0.95 0.01 280);
+  --border: oklch(0.42 0.005 280);
+  --input: oklch(0.42 0.005 280);
+  --ring: oklch(0.5 0.01 280);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar: oklch(0.3 0.005 280);
+  --sidebar-foreground: oklch(0.92 0.01 280);
   --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
+  --sidebar-primary-foreground: oklch(0.92 0.01 280);
+  --sidebar-accent: oklch(0.38 0.005 280);
+  --sidebar-accent-foreground: oklch(0.92 0.01 280);
+  --sidebar-border: oklch(0.42 0.005 280);
+  --sidebar-ring: oklch(0.5 0.01 280);
 }
 
 @theme inline {
@@ -167,6 +167,6 @@
   }
 
   .dark .scrollbar-pretty-auto::-webkit-scrollbar-thumb {
-    background-color: rgb(75 85 99);
+    background-color: rgb(95 105 119);
   }
 }
diff --git a/apps/web/src/components/gen-ui/action-step.tsx b/apps/web/src/components/gen-ui/action-step.tsx
index 57c45b5e..45bb1789 100644
--- a/apps/web/src/components/gen-ui/action-step.tsx
+++ b/apps/web/src/components/gen-ui/action-step.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { JSX, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
 import {
   Terminal,
   FileText,
@@ -165,7 +166,7 @@ function MatchCaseIcon({ matchCase }: { matchCase: boolean }) {
             "rounded-sm border border-gray-300 px-1 py-[2px] text-xs dark:border-gray-600",
             matchCase
               ? "border-blue-500 bg-blue-500/80 text-white"
-              : "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200",
+              : "dark:bg-muted dark:text-muted-foreground bg-muted text-gray-800",
           )}
         >
           <p className="font-mono">Aa</p>
@@ -554,7 +555,7 @@ function ActionItem(props: ActionItemProps) {
       props.output
     ) {
       return (
-        <div className="bg-muted text-foreground/90 overflow-x-auto p-2 dark:bg-gray-900">
+        <div className="bg-muted text-foreground/90 overflow-x-auto p-2">
           <pre className="text-xs font-normal whitespace-pre-wrap">
             {props.output}
           </pre>
@@ -577,7 +578,7 @@ function ActionItem(props: ActionItemProps) {
       }
 
       return (
-        <div className="bg-muted overflow-x-auto p-2 dark:bg-gray-900">
+        <div className="bg-muted overflow-x-auto p-2">
           {hasArgs && (
             <div className="mb-3">
               <div className="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase">
@@ -623,7 +624,7 @@ function ActionItem(props: ActionItemProps) {
       );
     } else if (props.actionType === "get_url_content" && props.output) {
       return (
-        <div className="bg-muted text-foreground/90 overflow-x-auto p-2 dark:bg-gray-900">
+        <div className="bg-muted text-foreground/90 overflow-x-auto p-2">
           <pre className="text-xs font-normal whitespace-pre-wrap">
             {props.output}
           </pre>
@@ -631,7 +632,7 @@ function ActionItem(props: ActionItemProps) {
       );
     } else if (props.actionType === "apply-patch" && props.diff) {
       return (
-        <div className="bg-muted overflow-x-auto p-2 dark:bg-gray-900">
+        <div className="bg-muted overflow-x-auto p-2">
           <pre
             className="text-foreground/90 text-xs font-normal whitespace-pre-wrap"
             dangerouslySetInnerHTML={{ __html: formatDiff(props.diff) }}
@@ -664,7 +665,7 @@ function ActionItem(props: ActionItemProps) {
       props.scratchpad.length > 0
     ) {
       return (
-        <div className="bg-muted overflow-x-auto p-2 dark:bg-gray-900">
+        <div className="bg-muted overflow-x-auto p-2">
           <ul className="list-disc pl-5 text-xs font-normal">
             {props.scratchpad.map((note, i) => (
               <li
@@ -684,7 +685,7 @@ function ActionItem(props: ActionItemProps) {
 
   return (
     <div className="border-border mb-2 overflow-hidden rounded-md border last:mb-0">
-      <div className="border-border flex w-full items-center border-b bg-gray-50 p-2 dark:bg-gray-800">
+      <div className="border-border bg-muted/50 flex w-full items-center border-b p-2">
         {renderHeaderIcon()}
         {renderHeaderContent()}
         <div className="ml-auto flex items-center gap-2">
@@ -707,15 +708,24 @@ function ActionItem(props: ActionItemProps) {
         </div>
       </div>
 
-      {renderContent()}
+      <AnimatePresence>
+        {expanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2, ease: "easeInOut" }}
+            className="overflow-hidden"
+          >
+            {renderContent()}
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }
 
 export function ActionStep(props: ActionStepProps) {
-  const [showReasoning, setShowReasoning] = useState(true);
-  const [showSummary, setShowSummary] = useState(true);
-
   const reasoningText =
     "reasoningText" in props ? props.reasoningText : undefined;
   const summaryText = "summaryText" in props ? props.summaryText : undefined;
@@ -724,21 +734,41 @@ export function ActionStep(props: ActionStepProps) {
     (action: ActionItemProps) => action.status === "done",
   );
 
+  const [showReasoning, setShowReasoning] = useState(!!reasoningText);
+  const [showSummary, setShowSummary] = useState(!!summaryText);
+
   return (
-    <div className="border-border overflow-hidden rounded-md border">
-      <div className="border-b border-blue-300 bg-blue-100/50 p-2 dark:border-blue-800 dark:bg-blue-900/50">
+    <div className="border-border bg-muted overflow-hidden rounded-md border">
+      <div className="bg-muted dark:bg-muted border-b border-l-4 border-gray-200 border-l-gray-500 p-2 dark:border-gray-600 dark:border-l-gray-400">
         <button
           onClick={() => setShowReasoning(!showReasoning)}
-          className="flex cursor-pointer items-center gap-1 text-xs font-normal text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+          className="flex cursor-pointer items-center gap-1.5 text-xs font-medium text-gray-700 transition-colors duration-200 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-200"
         >
-          <MessageSquare className="h-3 w-3" />
-          {showReasoning ? "Hide reasoning" : "Show reasoning"}
+          <ChevronDown
+            className={cn(
+              "h-3 w-3 transition-transform duration-200",
+              showReasoning && "rotate-180",
+            )}
+          />
+          <span>{showReasoning ? "Hide reasoning" : "Show reasoning"}</span>
         </button>
-        {showReasoning && (
-          <BasicMarkdownText className="mt-1 text-xs font-normal text-blue-700 dark:text-blue-300">
-            {reasoningText || "No reasoning provided."}
-          </BasicMarkdownText>
-        )}
+        <AnimatePresence>
+          {showReasoning && (
+            <motion.div
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: "auto", opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              transition={{ duration: 0.2, ease: "easeInOut" }}
+              className="overflow-hidden"
+            >
+              <div className="mt-3 rounded-md bg-gray-50/50 px-3 py-2 dark:bg-gray-800/30">
+                <BasicMarkdownText className="text-xs leading-relaxed text-gray-700 dark:text-gray-300">
+                  {reasoningText || "No reasoning provided."}
+                </BasicMarkdownText>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
       </div>
 
       <div className="p-2">
@@ -751,19 +781,36 @@ export function ActionStep(props: ActionStepProps) {
       </div>
 
       {summaryText && anyActionDone && (
-        <div className="border-t border-green-300 bg-green-100/50 p-2 dark:border-green-800 dark:bg-green-900/50">
+        <div className="bg-muted dark:bg-muted border-t border-gray-300 p-2 dark:border-gray-600">
           <button
             onClick={() => setShowSummary(!showSummary)}
-            className="flex cursor-pointer items-center gap-1 text-xs font-normal text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300"
+            className="flex cursor-pointer items-center gap-1.5 text-xs font-medium text-gray-600 transition-colors duration-200 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
           >
-            <FileText className="h-3 w-3" />
-            {showSummary ? "Hide summary" : "Show summary"}
+            <ChevronDown
+              className={cn(
+                "h-3 w-3 transition-transform duration-200",
+                showSummary && "rotate-180",
+              )}
+            />
+            <span>{showSummary ? "Hide summary" : "Show summary"}</span>
           </button>
-          {showSummary && (
-            <span className="text-green-700 dark:text-green-300">
-              <BasicMarkdownText>{summaryText}</BasicMarkdownText>
-            </span>
-          )}
+          <AnimatePresence>
+            {showSummary && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: "auto", opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.2, ease: "easeInOut" }}
+                className="overflow-hidden"
+              >
+                <div className="mt-3 rounded-md bg-gray-50/50 px-3 py-2 dark:bg-gray-800/30">
+                  <BasicMarkdownText className="text-xs leading-relaxed text-gray-700 dark:text-gray-300">
+                    {summaryText}
+                  </BasicMarkdownText>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
         </div>
       )}
     </div>
diff --git a/apps/web/src/components/gen-ui/code-review-started.tsx b/apps/web/src/components/gen-ui/code-review-started.tsx
index 7ea91f5b..2b71a13b 100644
--- a/apps/web/src/components/gen-ui/code-review-started.tsx
+++ b/apps/web/src/components/gen-ui/code-review-started.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { Sparkles } from "lucide-react";
+import { FileSearch } from "lucide-react";
 import { Badge } from "../ui/badge";
-import { Check } from "lucide-react";
+import { Clock } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 type CodeReviewStartedProps = {
@@ -13,36 +13,34 @@ export function CodeReviewStarted({ status = "done" }: CodeReviewStartedProps) {
   return (
     <div
       className={cn(
-        "group via-background to-background dark:via-background dark:to-background rounded-xl border bg-gradient-to-br from-blue-50/50 transition-shadow dark:from-blue-950/20",
+        "dark:border-muted-foreground/20 dark:bg-muted/30 rounded-lg border border-blue-200/60 bg-blue-50/30 shadow-sm transition-shadow",
         "shadow-sm hover:shadow-md",
       )}
     >
       {/* Header */}
       <div
         className={cn(
-          "relative flex items-center bg-gradient-to-r from-blue-50 to-blue-50/50 p-4 backdrop-blur-sm dark:from-blue-950/30 dark:to-blue-950/10",
-          "rounded-xl",
+          "dark:bg-muted/40 relative flex items-center bg-blue-50/50 p-3",
+          "rounded-lg",
         )}
       >
-        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 shadow-md dark:bg-blue-600">
-          <Sparkles className="h-4 w-4 text-white" />
+        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-blue-500/90 dark:bg-blue-600">
+          <FileSearch className="h-3.5 w-3.5 text-white" />
         </div>
 
         <div className="ml-3 flex-1">
           <div className="flex items-center gap-2">
-            <h3 className="text-foreground text-sm font-semibold">
-              Code review started
-            </h3>
+            <h3 className="text-foreground text-sm font-medium">Code review</h3>
             <Badge
               variant="secondary"
-              className="border-blue-200 bg-blue-100 text-blue-700 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300"
+              className="border-blue-200/60 bg-blue-100/80 text-blue-700 dark:border-blue-700/40 dark:bg-blue-900/50 dark:text-blue-300"
             >
-              <Check className="h-3 w-3" />
-              In Progress
+              <Clock className="h-3 w-3" />
+              In progress
             </Badge>
           </div>
-          <p className="text-muted-foreground mt-1 text-xs">
-            Analyzing code for best practices and potential improvements
+          <p className="text-muted-foreground/80 mt-1 text-xs">
+            Analyzing code quality
           </p>
         </div>
       </div>
diff --git a/apps/web/src/components/gen-ui/conversation-summary.tsx b/apps/web/src/components/gen-ui/conversation-summary.tsx
index dd9e4427..4a5302c7 100644
--- a/apps/web/src/components/gen-ui/conversation-summary.tsx
+++ b/apps/web/src/components/gen-ui/conversation-summary.tsx
@@ -1,5 +1,6 @@
 import { FileText, ChevronDown, Check } from "lucide-react";
 import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
 import { MarkdownText } from "../thread/markdown-text";
 import { cn } from "@/lib/utils";
 import { Button } from "../ui/button";
@@ -15,18 +16,18 @@ export function ConversationHistorySummary({ summary }: { summary: string }) {
   return (
     <div
       className={cn(
-        "group via-background to-background dark:via-background dark:to-background rounded-xl border bg-gradient-to-br from-blue-50/50 transition-shadow dark:from-blue-950/20",
+        "group via-background to-background dark:via-background dark:to-background rounded-xl border bg-gradient-to-br from-gray-50/50 transition-shadow dark:from-gray-900/20",
         "shadow-sm hover:shadow-md",
       )}
     >
       {/* Header */}
       <div
         className={cn(
-          "relative flex items-center bg-gradient-to-r from-blue-50 to-blue-50/50 p-4 backdrop-blur-sm dark:from-blue-950/30 dark:to-blue-950/10",
+          "relative flex items-center bg-gradient-to-r from-gray-50 to-gray-50/50 p-4 backdrop-blur-sm dark:from-gray-900/20 dark:to-gray-900/10",
           "rounded-xl",
         )}
       >
-        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 shadow-md dark:bg-blue-600">
+        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-500 shadow-md dark:bg-gray-600">
           <FileText className="h-4 w-4 text-white" />
         </div>
 
@@ -37,7 +38,7 @@ export function ConversationHistorySummary({ summary }: { summary: string }) {
             </h3>
             <Badge
               variant="secondary"
-              className="border-blue-200 bg-blue-100 text-blue-700 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300"
+              className="border-gray-200 bg-gray-100 text-gray-700 dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-300"
             >
               <Check className="h-3 w-3" />
               Complete
@@ -64,13 +65,23 @@ export function ConversationHistorySummary({ summary }: { summary: string }) {
       </div>
 
       {/* Content */}
-      {expanded && (
-        <div className="p-4">
-          <div className="text-sm">
-            <MarkdownText>{summary}</MarkdownText>
-          </div>
-        </div>
-      )}
+      <AnimatePresence>
+        {expanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2, ease: "easeInOut" }}
+            className="overflow-hidden"
+          >
+            <div className="p-4">
+              <div className="text-sm">
+                <MarkdownText>{summary}</MarkdownText>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }
diff --git a/apps/web/src/components/gen-ui/pull-request-opened.tsx b/apps/web/src/components/gen-ui/pull-request-opened.tsx
index f9458174..9fd34322 100644
--- a/apps/web/src/components/gen-ui/pull-request-opened.tsx
+++ b/apps/web/src/components/gen-ui/pull-request-opened.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
 import {
   GitPullRequest,
   Loader2,
@@ -43,7 +44,7 @@ export function PullRequestOpened({
         return (
           <Badge
             variant="secondary"
-            className="border-purple-200 bg-purple-100 text-purple-700 dark:border-purple-800 dark:bg-purple-950 dark:text-purple-300"
+            className="border-gray-200 bg-gray-100 text-gray-700 dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-300"
           >
             <Clock className="h-3 w-3" />
             Preparing
@@ -53,7 +54,7 @@ export function PullRequestOpened({
         return (
           <Badge
             variant="secondary"
-            className="border-purple-200 bg-purple-100 text-purple-700 dark:border-purple-800 dark:bg-purple-950 dark:text-purple-300"
+            className="border-gray-200 bg-gray-100 text-gray-700 dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-300"
           >
             <Loader2 className="h-3 w-3 animate-spin" />
             Opening
@@ -64,7 +65,7 @@ export function PullRequestOpened({
           return (
             <Badge
               variant="secondary"
-              className="border-slate-200 bg-slate-100 text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"
+              className="border-slate-200 bg-slate-100 text-slate-700 dark:border-slate-700 dark:bg-slate-800/50 dark:text-slate-300"
             >
               <GitPullRequestDraft className="h-3 w-3" />
               Draft
@@ -74,7 +75,7 @@ export function PullRequestOpened({
         return (
           <Badge
             variant="secondary"
-            className="border-emerald-200 bg-emerald-100 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300"
+            className="border-emerald-200 bg-emerald-100 text-emerald-700 dark:border-emerald-700 dark:bg-emerald-800/50 dark:text-emerald-300"
           >
             <Check className="h-3 w-3" />
             Opened
@@ -110,18 +111,18 @@ export function PullRequestOpened({
   return (
     <div
       className={cn(
-        "group via-background to-background dark:via-background dark:to-background rounded-xl border bg-gradient-to-br from-purple-50/50 transition-shadow dark:from-purple-950/20",
+        "group via-background to-background dark:via-background dark:to-background rounded-xl border bg-gradient-to-br from-gray-50/50 transition-shadow dark:from-gray-900/20",
         "shadow-sm hover:shadow-md",
       )}
     >
       {/* Header */}
       <div
         className={cn(
-          "relative flex items-center bg-gradient-to-r from-purple-50 to-purple-50/50 p-4 backdrop-blur-sm dark:from-purple-950/30 dark:to-purple-950/10",
+          "relative flex items-center bg-gradient-to-r from-gray-50 to-gray-50/50 p-4 backdrop-blur-sm dark:from-gray-900/20 dark:to-gray-900/10",
           "rounded-xl",
         )}
       >
-        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-purple-500 shadow-md dark:bg-purple-600">
+        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-500 shadow-md dark:bg-gray-600">
           {isDraft ? (
             <GitPullRequestDraft className="h-4 w-4 text-white" />
           ) : (
@@ -178,18 +179,28 @@ export function PullRequestOpened({
       </div>
 
       {/* Content */}
-      {expanded && description && status === "done" && (
-        <div className="border-t p-4">
-          <div className="bg-muted/30 rounded-lg p-3">
-            <h4 className="text-muted-foreground mb-2 text-xs font-medium">
-              Description
-            </h4>
-            <pre className="text-foreground text-sm whitespace-pre-wrap">
-              {description}
-            </pre>
-          </div>
-        </div>
-      )}
+      <AnimatePresence>
+        {expanded && description && status === "done" && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2, ease: "easeInOut" }}
+            className="overflow-hidden"
+          >
+            <div className="border-t p-4">
+              <div className="rounded-lg bg-gray-50/50 p-3 dark:bg-gray-800/30">
+                <h4 className="text-muted-foreground mb-2 text-xs font-medium">
+                  Description
+                </h4>
+                <pre className="text-foreground text-sm whitespace-pre-wrap">
+                  {description}
+                </pre>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }
diff --git a/apps/web/src/components/gen-ui/push-changes.tsx b/apps/web/src/components/gen-ui/push-changes.tsx
index 7c7d7fc6..366b17f7 100644
--- a/apps/web/src/components/gen-ui/push-changes.tsx
+++ b/apps/web/src/components/gen-ui/push-changes.tsx
@@ -72,16 +72,16 @@ export function PushChanges({
   return (
     <div className="overflow-hidden rounded-md border border-gray-200">
       {reasoningText && (
-        <div className="border-b border-blue-100 bg-blue-50 p-2">
+        <div className="border-b border-blue-200 bg-blue-50 p-2 dark:border-blue-800/50 dark:bg-blue-950/20">
           <button
             onClick={() => setShowReasoning(!showReasoning)}
-            className="flex items-center gap-1 text-xs font-normal text-blue-700 hover:text-blue-800"
+            className="flex items-center gap-1 text-xs font-normal text-blue-700 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-200"
           >
             <MessageSquare className="h-3 w-3" />
             {showReasoning ? "Hide reasoning" : "Show reasoning"}
           </button>
           {showReasoning && (
-            <BasicMarkdownText className="mt-1 text-xs font-normal text-blue-800">
+            <BasicMarkdownText className="mt-1 text-xs font-normal text-blue-800 dark:text-blue-200">
               {reasoningText}
             </BasicMarkdownText>
           )}
diff --git a/apps/web/src/components/gen-ui/replanning-step.tsx b/apps/web/src/components/gen-ui/replanning-step.tsx
index 0af524ec..ca8a315f 100644
--- a/apps/web/src/components/gen-ui/replanning-step.tsx
+++ b/apps/web/src/components/gen-ui/replanning-step.tsx
@@ -34,7 +34,9 @@ export function ReplanningStep({
       case "generating":
         return <Loader2 className="h-3.5 w-3.5 animate-spin text-gray-500" />;
       case "done":
-        return <CheckCircle className="h-3.5 w-3.5 text-green-500" />;
+        return (
+          <CheckCircle className="h-3.5 w-3.5 text-green-600 dark:text-green-400" />
+        );
     }
   };
 
@@ -52,16 +54,16 @@ export function ReplanningStep({
   return (
     <div className="overflow-hidden rounded-md border border-gray-200">
       {reasoningText && (
-        <div className="border-b border-blue-100 bg-blue-50 p-2">
+        <div className="border-b border-blue-200 bg-blue-50 p-2 dark:border-blue-800/50 dark:bg-blue-950/20">
           <button
             onClick={() => setShowReasoning(!showReasoning)}
-            className="flex items-center gap-1 text-xs font-normal text-blue-700 hover:text-blue-800"
+            className="flex items-center gap-1 text-xs font-normal text-blue-700 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-200"
           >
             <MessageSquare className="h-3 w-3" />
             {showReasoning ? "Hide reasoning" : "Show reasoning"}
           </button>
           {showReasoning && (
-            <BasicMarkdownText className="mt-1 text-xs font-normal text-blue-800">
+            <BasicMarkdownText className="mt-1 text-xs font-normal text-blue-800 dark:text-blue-200">
               {reasoningText}
             </BasicMarkdownText>
           )}
diff --git a/apps/web/src/components/gen-ui/task-review.tsx b/apps/web/src/components/gen-ui/task-review.tsx
index 4be30231..a0eb5426 100644
--- a/apps/web/src/components/gen-ui/task-review.tsx
+++ b/apps/web/src/components/gen-ui/task-review.tsx
@@ -42,7 +42,7 @@ export function MarkTaskCompleted({
         );
       case "done":
         return (
-          <CheckCircle className="h-3.5 w-3.5 text-green-500 dark:text-green-400" />
+          <CheckCircle className="h-3.5 w-3.5 text-green-600 dark:text-green-400" />
         );
     }
   };
@@ -61,16 +61,16 @@ export function MarkTaskCompleted({
   return (
     <div className="overflow-hidden rounded-md border border-gray-200 dark:border-gray-800">
       {reasoningText && (
-        <div className="border-b border-blue-100 bg-blue-50 p-2 dark:border-blue-800 dark:bg-blue-900/50">
+        <div className="border-b border-blue-200 bg-blue-50 p-2 dark:border-blue-800/50 dark:bg-blue-950/20">
           <button
             onClick={() => setShowReasoning(!showReasoning)}
-            className="flex items-center gap-1 text-xs font-normal text-blue-700 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+            className="flex items-center gap-1 text-xs font-normal text-blue-700 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-200"
           >
             <MessageSquare className="h-3 w-3" />
             {showReasoning ? "Hide reasoning" : "Show reasoning"}
           </button>
           {showReasoning && (
-            <BasicMarkdownText className="mt-1 text-xs font-normal text-blue-800 dark:text-blue-400">
+            <BasicMarkdownText className="mt-1 text-xs font-normal text-blue-800 dark:text-blue-200">
               {reasoningText}
             </BasicMarkdownText>
           )}
@@ -185,10 +185,10 @@ export function MarkTaskIncomplete({
   return (
     <div className="overflow-hidden rounded-md border border-gray-200 dark:border-gray-800">
       {reasoningText && (
-        <div className="border-b border-blue-100 bg-blue-50 p-2 dark:border-blue-800 dark:bg-blue-900/50">
+        <div className="border-b border-blue-200 bg-blue-50 p-2 dark:border-blue-800/50 dark:bg-blue-950/20">
           <button
             onClick={() => setShowReasoning(!showReasoning)}
-            className="flex items-center gap-1 text-xs font-normal text-blue-700 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+            className="flex items-center gap-1 text-xs font-normal text-blue-700 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-200"
           >
             <MessageSquare className="h-3 w-3" />
             {showReasoning ? "Hide reasoning" : "Show reasoning"}
diff --git a/apps/web/src/components/gen-ui/task-summary.tsx b/apps/web/src/components/gen-ui/task-summary.tsx
index 7f2e1e11..ab9136db 100644
--- a/apps/web/src/components/gen-ui/task-summary.tsx
+++ b/apps/web/src/components/gen-ui/task-summary.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { useState } from "react";
-import { CheckCircle, Loader2, FileText, MinusCircle } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
+import { CheckCircle, Loader2, ChevronDown, MinusCircle } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { BasicMarkdownText } from "../thread/markdown-text";
 
@@ -29,9 +30,13 @@ export function TaskSummary({
         );
       case "done":
         if (completed === false) {
-          return <MinusCircle className="size-3.5 text-amber-500" />;
+          return (
+            <MinusCircle className="size-3.5 text-amber-500 dark:text-amber-400" />
+          );
         }
-        return <CheckCircle className="size-3.5 text-green-500" />;
+        return (
+          <CheckCircle className="size-3.5 text-green-600 dark:text-green-400" />
+        );
     }
   };
 
@@ -52,7 +57,7 @@ export function TaskSummary({
   return (
     <div className="border-border overflow-hidden rounded-md border">
       <div
-        className={"flex items-center border-b bg-gray-50 p-2 dark:bg-gray-800"}
+        className={"bg-muted/50 flex items-center border-b p-2"}
         onClick={
           status === "done" && summaryText
             ? () => setExpanded(!expanded)
@@ -68,36 +73,60 @@ export function TaskSummary({
       {summaryText && (
         <div
           className={cn(
-            "border-t p-2",
+            "border-t border-l-4 p-2",
             completed === false
-              ? "border-amber-300 bg-amber-100/50 dark:border-amber-800 dark:bg-amber-900/50"
-              : "border-green-300 bg-green-100/50 dark:border-green-800 dark:bg-green-900/50",
+              ? "border-amber-300 border-l-amber-500 bg-amber-100/50 dark:border-amber-700/50 dark:border-l-amber-400/70 dark:bg-amber-900/30"
+              : "border-green-200/80 border-l-green-500/80 bg-green-50/60 dark:border-green-800/30 dark:border-l-green-400/70 dark:bg-green-950/10",
           )}
         >
           <button
             onClick={() => setShowSummary(!showSummary)}
             className={cn(
-              "flex cursor-pointer items-center gap-1 text-xs font-normal",
+              "flex cursor-pointer items-center gap-1.5 text-xs font-medium transition-colors duration-200",
               completed === false
-                ? "text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300"
+                ? "text-amber-600 hover:text-amber-700 dark:text-amber-400/90 dark:hover:text-amber-300"
                 : "text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300",
             )}
           >
-            <FileText className="h-3 w-3" />
-            {showSummary ? "Hide reflection" : "Show reflection"}
-          </button>
-          {showSummary && (
-            <BasicMarkdownText
+            <ChevronDown
               className={cn(
-                "mt-1 text-xs",
-                completed === false
-                  ? "text-amber-700 dark:text-amber-300"
-                  : "text-green-700 dark:text-green-300",
+                "h-3 w-3 transition-transform duration-200",
+                showSummary && "rotate-180",
               )}
-            >
-              {summaryText}
-            </BasicMarkdownText>
-          )}
+            />
+            <span>{showSummary ? "Hide reflection" : "Show reflection"}</span>
+          </button>
+          <AnimatePresence>
+            {showSummary && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: "auto", opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.2, ease: "easeInOut" }}
+                className="overflow-hidden"
+              >
+                <div
+                  className={cn(
+                    "mt-3 rounded-md px-3 py-2",
+                    completed === false
+                      ? "bg-amber-50/50 dark:bg-amber-900/20"
+                      : "bg-green-50/50 dark:bg-green-900/20",
+                  )}
+                >
+                  <BasicMarkdownText
+                    className={cn(
+                      "text-xs leading-relaxed",
+                      completed === false
+                        ? "text-amber-700 dark:text-amber-300/90"
+                        : "text-green-700 dark:text-green-300",
+                    )}
+                  >
+                    {summaryText}
+                  </BasicMarkdownText>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
         </div>
       )}
     </div>
diff --git a/apps/web/src/components/github/auth-status.tsx b/apps/web/src/components/github/auth-status.tsx
index 2640f1cd..fd561a94 100644
--- a/apps/web/src/components/github/auth-status.tsx
+++ b/apps/web/src/components/github/auth-status.tsx
@@ -72,7 +72,7 @@ function AuthStatusContent() {
     if (!showGetStarted && !showInstallApp && !showLoading) {
       router.push("/chat");
     }
-  }, [showGetStarted, showInstallApp, showLoading]);
+  }, [showGetStarted, showInstallApp, showLoading, router]);
 
   if (showGetStarted) {
     return (
@@ -172,6 +172,7 @@ function AuthStatusContent() {
       </div>
     );
   }
+  return null;
 }
 
 export default function AuthStatus() {
diff --git a/apps/web/src/components/github/repo-branch-selectors/index.tsx b/apps/web/src/components/github/repo-branch-selectors/index.tsx
index 134bf6a4..aeb8afea 100644
--- a/apps/web/src/components/github/repo-branch-selectors/index.tsx
+++ b/apps/web/src/components/github/repo-branch-selectors/index.tsx
@@ -6,9 +6,9 @@ export function RepositoryBranchSelectors() {
   const [threadId] = useQueryState("threadId");
   const chatStarted = !!threadId;
   const defaultButtonStyles =
-    "bg-inherit border-none text-muted-foreground hover:text-muted-foreground/70 text-xs p-0 px-0 py-0 !p-0 !px-0 !py-0 h-fit hover:bg-inherit shadow-none";
+    "bg-inherit border-none text-foreground hover:text-foreground/80 text-xs p-0 px-0 py-0 !p-0 !px-0 !py-0 h-fit hover:bg-inherit shadow-none";
   const defaultStylesChatStarted =
-    "hover:bg-inherit cursor-default hover:cursor-default text-muted-foreground hover:border-gray-300 hover:ring-inherit shadow-none p-0 px-0 py-0 !p-0 !px-0 !py-0";
+    "hover:bg-inherit cursor-default hover:cursor-default text-foreground hover:border-gray-300 hover:ring-inherit shadow-none p-0 px-0 py-0 !p-0 !px-0 !py-0";
 
   return (
     <div className="flex items-center gap-1 rounded-md border border-gray-200 p-1 dark:border-gray-700">
diff --git a/apps/web/src/components/icons/openswe.tsx b/apps/web/src/components/icons/openswe.tsx
new file mode 100644
index 00000000..2efc4469
--- /dev/null
+++ b/apps/web/src/components/icons/openswe.tsx
@@ -0,0 +1,28 @@
+export function OpenSWELogoSVG({
+  className,
+  width = 130,
+  height = 20,
+  style,
+}: {
+  width?: number;
+  height?: number;
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 1625 250"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+    >
+      <path
+        d="M364.304 0C432.97 0.000167489 488.822 56.0546 488.822 124.948C488.822 193.303 433.839 249.019 365.911 249.886L364.304 249.896H125.272C57.1425 249.896 1.62615 194.714 0.762695 126.561L0.75293 124.948C0.75293 56.0545 56.606 0 125.272 0H364.304ZM775.651 72.8857C787.045 72.8858 796.964 75.6804 805.367 81.3047L806.154 81.8291C814.227 87.3158 820.502 94.731 824.981 104.049C829.606 113.597 831.906 124.463 831.906 136.625C831.906 148.64 829.643 159.466 825.096 169.083C820.548 178.7 814.123 186.327 805.819 191.938C797.491 197.565 787.751 200.364 776.642 200.364C764.955 200.364 755.07 197.603 747.043 192.025V249.896H718.296V76.1885H743.74V83.4922C744.652 82.7383 745.593 82.0165 746.563 81.3262C754.468 75.6803 764.185 72.8857 775.651 72.8857ZM122.818 41.4277C117.969 41.3047 113.355 42.2977 109.691 44.5635C106.076 46.7998 103.335 50.3053 102.191 55.3506C102.188 55.7526 102.116 56.154 101.919 56.541C101.701 56.9674 101.375 57.2931 101.004 57.5654C98.4372 59.4477 96.1759 61.5624 94.2793 64.1162C92.0112 67.2918 90.6805 71.6095 90.6455 75.8623C90.6177 79.2465 91.4103 82.5103 93.1201 85.1025C93.3727 82.7485 93.9713 80.3739 96.0781 78.4629L96.7324 77.8682L97.4023 78.4453C101.794 82.228 108.379 83.4986 113.312 80.7637L114.102 80.3262L114.617 81.0664C120.696 89.7868 122.954 100.143 124.879 110.454C126.815 120.825 128.414 131.128 133.045 140.146C135.497 144.228 137.917 148.302 140.904 151.851L141.511 152.556L141.561 152.611L141.601 152.675C142.204 153.611 143.216 154.642 144.476 155.756C145.731 156.866 147.147 157.986 148.547 159.141C149.926 160.278 151.285 161.443 152.336 162.588C153.361 163.705 154.234 164.947 154.415 166.25L154.424 166.312L154.425 166.373C154.475 169.831 154.304 173.237 154.665 176.566C154.999 179.647 155.782 182.52 157.564 185.03L157.935 185.528L157.997 185.608L158.042 185.7C159.331 188.315 158.34 190.884 156.609 192.608C154.932 194.281 152.396 195.351 150.021 195.098C148.576 195.278 147.095 195.128 145.659 194.866C144.198 194.6 142.672 194.194 141.282 193.875C138.433 193.222 136.045 192.918 134.104 193.962C133.525 194.526 132.841 194.782 132.193 194.903C131.538 195.026 130.823 195.024 130.283 195.042C129.11 195.08 128.487 195.212 128.068 195.918C127.871 196.364 127.545 196.791 127.277 197.126C127.121 197.321 126.973 197.498 126.837 197.667C128.16 196.832 129.742 196.243 131.708 196.903L132.526 197.179L132.374 198.028C132.31 198.386 132.347 198.581 132.385 198.683C132.42 198.779 132.484 198.87 132.617 198.974C132.763 199.087 132.967 199.196 133.255 199.322C133.483 199.422 133.912 199.592 134.21 199.731L134.806 200.011L134.786 200.668C134.774 201.08 134.703 201.476 134.64 201.809C134.619 201.917 134.598 202.017 134.58 202.112C134.663 202.01 134.749 201.909 134.836 201.81C135.459 201.1 136.264 200.393 137.47 200.079L138.119 199.91L138.522 200.447C139.229 201.39 139.882 201.906 140.477 202.17C141.06 202.429 141.665 202.481 142.346 202.367C143.045 202.25 143.813 201.959 144.688 201.534C145.569 201.107 146.482 200.585 147.516 200.022C149.541 198.919 151.917 197.718 154.683 197.312C157.485 196.901 160.619 197.314 164.16 199.298L163.622 201.169C161.577 201.067 159.906 201.249 158.548 202.216C159.373 201.874 160.116 201.685 160.804 201.621C162.144 201.497 163.158 201.86 163.997 202.281C164.381 202.474 164.796 202.717 165.101 202.882C165.436 203.064 165.73 203.205 166.025 203.299C166.556 203.468 167.182 203.515 168.125 203.136C169.859 202.229 171.741 201.125 173.677 200.36C175.666 199.575 177.826 199.097 180.213 199.475L180.334 201.423C178.537 201.941 177.628 202.891 176.848 204.102C176.429 204.751 176.086 205.41 175.632 206.195C175.213 206.92 174.729 207.689 174.097 208.438C177.619 208.039 179.606 207.227 181.427 206.154C182.466 205.541 183.432 204.857 184.656 204.051C185.857 203.26 187.242 202.395 189.029 201.49C192.125 199.618 195.238 201.029 197.615 201.961C198.896 202.463 199.987 202.854 201.005 202.901C201.947 202.946 202.847 202.695 203.77 201.793L203.776 201.786L203.783 201.78C204.52 201.086 205.371 200.889 206.104 200.825C206.302 200.808 206.501 200.8 206.69 200.796C206.534 200.522 206.35 200.297 206.141 200.11C205.681 199.701 205.048 199.409 204.224 199.218C202.524 198.823 200.379 198.917 198.043 198.93C195.825 198.942 193.392 198.881 191.533 197.973C190.567 197.5 189.737 196.792 189.172 195.757C188.613 194.733 188.353 193.463 188.39 191.924L188.402 191.412L188.825 191.122C191.298 189.433 192.292 186.971 192.695 184.078C192.898 182.624 192.946 181.091 192.965 179.522C192.983 177.975 192.973 176.368 193.067 174.858L193.167 173.274L194.553 174.048C197.708 175.807 201.05 177.199 204.437 178.594C207.594 179.895 210.796 181.201 213.83 182.797L214.435 183.12L214.667 183.247L214.807 183.472C216.394 186.027 218.382 188.922 220.756 191.119C222.952 193.152 225.384 194.498 228.061 194.532C228.158 194.251 228.258 193.971 228.371 193.666L228.66 192.885L229.48 193.028C230.027 193.124 230.627 193.288 231.13 193.412C231.666 193.544 232.135 193.642 232.553 193.665C232.965 193.687 233.255 193.631 233.469 193.518C233.666 193.412 233.897 193.206 234.101 192.737L234.703 191.354L235.742 192.447C238.303 195.141 242.152 195.147 245.982 194.379C246.036 194.307 246.045 194.267 246.046 194.258C246.05 194.228 246.055 194.119 245.925 193.892C245.641 193.395 244.984 192.78 244.039 192.05C243.585 191.699 243.097 191.345 242.599 190.984C242.106 190.627 241.602 190.261 241.137 189.901C240.673 189.542 240.226 189.171 239.852 188.799C239.486 188.435 239.136 188.018 238.922 187.557L238.658 186.987L239.056 186.502C239.08 186.473 239.124 186.414 239.093 186.211C239.057 185.979 238.931 185.643 238.663 185.197C238.129 184.308 237.201 183.246 236.092 182.12C234.992 181.003 233.778 179.885 232.695 178.867C231.671 177.904 230.711 176.981 230.181 176.286C228.17 174.082 227.183 171.432 226.393 168.855C225.58 166.207 224.986 163.705 223.788 161.438L223.77 161.403L223.754 161.366C217.589 147.052 210.56 132.933 200.733 120.905L200.729 120.898L200.723 120.893C195.52 114.307 189.704 108.276 183.75 102.317C177.807 96.3701 171.71 90.4785 166.011 84.2217V84.2207C161.689 79.7501 158.965 74.3515 156.423 69.0098C153.856 63.6167 151.483 58.3047 147.85 53.7393L147.825 53.708L147.804 53.6758C142.893 46.4078 132.561 41.6751 122.818 41.4277ZM621.66 33.2607C637.659 33.2608 651.424 36.7806 662.91 43.8662H662.909C674.45 50.8664 683.272 60.6611 689.369 73.2246L689.938 74.4082C695.727 86.6966 698.607 100.839 698.607 116.812C698.607 133.299 695.538 147.835 689.37 160.396L689.371 160.396C683.274 172.963 674.45 182.797 662.908 189.871H662.906C651.421 196.882 637.657 200.364 621.66 200.364C605.663 200.364 591.899 196.882 580.413 189.871L580.409 189.869C568.942 182.795 560.12 172.963 553.95 160.4L553.948 160.396C547.854 147.836 544.822 133.299 544.822 116.812C544.822 100.326 547.854 85.7897 553.948 73.2295L553.95 73.2246C560.12 60.6623 568.941 50.8671 580.409 43.8662C591.896 36.7805 605.661 33.2607 621.66 33.2607ZM907.67 72.8857C920.154 72.8857 930.812 75.8226 939.591 81.7471C948.435 87.5931 954.979 95.8711 959.23 106.536C963.482 117.202 965.068 129.725 964.032 144.072L963.965 145H878.116C879.088 152.879 881.514 159.18 885.337 163.958C890.392 170.277 897.781 173.489 907.67 173.489C914.05 173.489 919.475 172.093 923.986 169.345L924.414 169.076C928.796 166.265 932.196 162.29 934.611 157.115L934.978 156.33L935.808 156.581L962.004 164.506L963.07 164.829L962.635 165.854C958.008 176.75 950.83 185.241 941.109 191.298C931.481 197.343 920.84 200.364 909.211 200.364C897.029 200.364 886.286 197.726 877.015 192.417C867.756 187.116 860.508 179.755 855.284 170.352L855.281 170.347C850.127 160.934 847.564 150.124 847.563 137.946C847.563 124.83 850.084 113.4 855.162 103.691C860.233 93.9232 867.294 86.3339 876.34 80.9512C885.392 75.5646 895.847 72.8858 907.67 72.8857ZM1223.37 33.4814C1234.34 33.5556 1244.16 35.4456 1252.81 39.1738L1253.62 39.5215C1261.92 43.1652 1268.9 48.3909 1274.55 55.1963C1280.38 62.2249 1284.48 70.6961 1286.86 80.5859L1287.11 81.623L1286.06 81.8057L1257.55 86.7588L1256.6 86.9238L1256.4 85.9795C1255.26 80.5511 1253.05 75.9778 1249.8 72.2305L1249.79 72.2148C1246.59 68.3771 1242.64 65.4635 1237.95 63.4697L1237.94 63.4678C1233.3 61.4673 1228.33 60.391 1223.02 60.2461C1217.85 60.1743 1213.06 60.9643 1208.63 62.6055L1208.63 62.6094C1204.29 64.1745 1200.8 66.4349 1198.14 69.374L1197.68 69.9229C1195.43 72.6949 1194.32 75.8749 1194.32 79.499C1194.32 83.1705 1195.42 86.1057 1197.57 88.3896C1199.81 90.6973 1202.58 92.5651 1205.91 93.9834C1208.96 95.1894 1212.04 96.2281 1215.14 97.1006L1216.47 97.4648L1216.48 97.4678H1216.48L1244.87 105.39L1246.36 105.796C1249.9 106.783 1253.79 108.052 1258.05 109.6C1262.98 111.393 1267.72 113.894 1272.26 117.097C1276.87 120.345 1280.64 124.607 1283.57 129.864H1283.57C1286.61 135.193 1288.1 141.906 1288.1 149.943C1288.1 158.305 1286.34 165.705 1282.8 172.111C1279.35 178.408 1274.66 183.657 1268.74 187.853C1262.84 192.035 1256.09 195.164 1248.51 197.247L1248.51 197.246C1241 199.326 1233.14 200.364 1224.91 200.364C1213.2 200.364 1202.6 198.326 1193.14 194.229L1193.14 194.228C1183.75 190.13 1175.99 184.273 1169.86 176.656L1169.86 176.648C1163.8 168.944 1159.96 159.828 1158.32 149.327L1158.16 148.335L1159.16 148.185L1186.67 144.002L1187.57 143.865L1187.79 144.748C1190.09 153.929 1194.77 160.979 1201.82 165.965L1202.49 166.428C1209.49 171.131 1217.5 173.489 1226.56 173.489C1232.1 173.489 1237.31 172.625 1242.19 170.904C1247.04 169.189 1250.93 166.704 1253.89 163.468L1253.9 163.46C1256.87 160.282 1258.36 156.386 1258.36 151.705C1258.36 149.616 1258.01 147.726 1257.33 146.022L1257.33 146.01C1256.64 144.235 1255.62 142.665 1254.25 141.295L1254.24 141.286L1254.23 141.276C1252.93 139.908 1251.19 138.649 1248.99 137.514L1248.98 137.505L1248.96 137.495C1246.84 136.292 1244.34 135.255 1241.46 134.392V134.393L1200.52 122.284V122.286C1196.96 121.247 1193.11 119.876 1188.98 118.178L1188.97 118.174L1188.96 118.17C1184.83 116.369 1180.9 113.934 1177.16 110.872L1177.16 110.865L1177.15 110.857C1173.44 107.68 1170.39 103.681 1167.99 98.8789L1167.98 98.8701L1167.98 98.8623C1165.62 93.9224 1164.47 87.8948 1164.47 80.8203C1164.47 70.4468 1167.09 61.6778 1172.37 54.5771L1172.37 54.5752C1177.7 47.444 1184.83 42.1256 1193.72 38.6143L1193.72 38.6133C1202.66 35.1124 1212.55 33.4073 1223.37 33.4814ZM1223.82 199.358H1223.82H1223.82ZM623.139 199.354H623.14C623.63 199.348 624.119 199.338 624.605 199.324H624.604C624.118 199.338 623.629 199.348 623.139 199.354ZM344.5 50.0254C303.369 50.0254 270.025 83.3685 270.025 124.5C270.025 165.631 303.369 198.976 344.5 198.976C385.631 198.976 418.976 165.631 418.976 124.5C418.976 83.3686 385.631 50.0254 344.5 50.0254ZM1046.67 72.7764C1055.58 72.7764 1063.01 74.2598 1068.92 77.2891C1074.76 80.2847 1079.43 84.1212 1082.91 88.8096C1086.35 93.4439 1088.9 98.3865 1090.55 103.635C1092.18 108.821 1093.22 113.765 1093.67 118.462L1093.85 120.136C1094.25 123.953 1094.45 127.14 1094.45 129.69V197.062H1065.59V138.826C1065.59 135.129 1065.34 131.021 1064.83 126.501C1064.32 122.057 1063.14 117.793 1061.28 113.706L1061.27 113.696L1061.27 113.687C1059.62 109.851 1057.16 106.674 1053.9 104.142L1053.23 103.638C1049.79 101.091 1045.03 99.7617 1038.85 99.7617C1035.59 99.7617 1032.36 100.294 1029.15 101.361C1026.01 102.408 1023.14 104.227 1020.52 106.844C1018.01 109.348 1015.95 112.87 1014.37 117.468L1014.37 117.473L1013.43 117.143L1014.37 117.473C1012.81 121.952 1012.01 127.773 1012.01 134.975V197.062H983.149V76.1885H1008.81V87.7754C1011.5 84.9581 1014.55 82.4688 1017.95 80.3096L1018.69 79.8447C1026.38 75.1145 1035.72 72.7764 1046.67 72.7764ZM1413.47 37.2969L1444.1 148.27L1474.61 37.2979L1474.82 36.5635H1504.76L1504.38 37.8438L1458.16 196.343L1457.95 197.062H1430.25L1430.04 196.339L1398.53 86.9746L1367.24 196.338L1367.03 197.062H1339.33L1339.12 196.343L1292.78 37.8438L1292.41 36.5635H1322.35L1322.55 37.2969L1353.18 148.273L1383.7 37.5176L1383.9 36.7891L1384.65 36.7832L1412.5 36.5635L1413.27 36.5576L1413.47 37.2969ZM1624.75 63.4385H1548.91V100.514H1611.54V127.389H1548.91V170.187H1624.75V197.062H1520.38V36.5635H1624.75V63.4385ZM935.152 193.479C935.501 193.308 935.847 193.132 936.193 192.953C935.847 193.132 935.501 193.308 935.152 193.479ZM936.518 192.783C936.773 192.649 937.029 192.514 937.283 192.376C937.029 192.514 936.773 192.649 936.518 192.783ZM937.587 192.209C937.893 192.04 938.199 191.869 938.504 191.694C938.199 191.869 937.893 192.04 937.587 192.209ZM938.593 191.644C938.66 191.605 938.728 191.568 938.795 191.529C939.094 191.355 939.393 191.178 939.69 190.998V190.997C939.326 191.217 938.96 191.432 938.593 191.644ZM874.192 189.502C874.456 189.677 874.721 189.849 874.988 190.021C874.449 189.675 873.916 189.321 873.392 188.96L874.192 189.502ZM943.198 188.715C942.631 189.114 942.054 189.504 941.468 189.885L942.341 189.307C942.629 189.112 942.915 188.914 943.198 188.715ZM944.778 187.557L944.87 187.488C944.903 187.463 944.934 187.437 944.967 187.412C944.904 187.46 944.841 187.509 944.778 187.557ZM945.659 186.873C945.687 186.851 945.714 186.828 945.742 186.806C945.714 186.828 945.687 186.851 945.659 186.873ZM946.423 186.255C946.458 186.226 946.492 186.197 946.527 186.168C946.492 186.197 946.458 186.226 946.423 186.255ZM1269.98 185.687C1270.12 185.577 1270.26 185.466 1270.39 185.355C1270.26 185.466 1270.12 185.577 1269.98 185.687ZM947.228 185.577C947.259 185.55 947.29 185.523 947.321 185.496C947.29 185.523 947.259 185.55 947.228 185.577ZM1272.62 183.457C1272 184.021 1271.36 184.57 1270.71 185.104C1270.74 185.08 1270.77 185.058 1270.79 185.035C1271.13 184.758 1271.47 184.478 1271.8 184.193C1271.96 184.051 1272.12 183.907 1272.29 183.763C1272.4 183.662 1272.51 183.559 1272.62 183.457ZM1274.03 182.12C1274.23 181.922 1274.43 181.721 1274.63 181.52C1274.43 181.721 1274.23 181.922 1274.03 182.12ZM771.688 98.6611C765.102 98.6612 759.831 100.27 755.791 103.404L755.783 103.411C751.71 106.501 748.659 110.873 746.658 116.585C744.721 122.254 743.74 128.929 743.74 136.625C743.74 144.242 744.72 150.914 746.656 156.657C748.655 162.368 751.74 166.78 755.89 169.947C760.074 173.012 765.605 174.59 772.569 174.59C779.296 174.59 784.754 172.91 789.02 169.624C793.329 166.303 796.525 161.808 798.596 156.097L798.599 156.09C800.753 150.272 801.838 143.788 801.838 136.625C801.838 129.536 800.753 123.127 798.6 117.384L798.599 117.38C796.457 111.599 793.155 107.068 788.702 103.746L788.693 103.739C784.281 100.378 778.637 98.6611 771.688 98.6611ZM621.646 60.2471C611.16 60.1759 602.531 62.4895 595.693 67.1191C588.829 71.7668 583.627 78.3158 580.099 86.8096L580.1 86.8105C576.636 95.3246 574.89 105.318 574.89 116.812C574.89 128.306 576.636 138.261 580.098 146.699L580.426 147.477C583.875 155.449 588.93 161.67 595.584 166.176H595.583C602.505 170.813 611.182 173.234 621.674 173.379C632.159 173.45 640.788 171.136 647.626 166.507L647.63 166.504C654.567 161.856 659.766 155.307 663.22 146.815L663.223 146.809C666.757 138.296 668.54 128.305 668.54 116.812C668.54 105.32 666.758 95.4047 663.226 87.043L663.221 87.0332C659.767 78.6158 654.569 72.102 647.63 67.4521L647.626 67.4492C640.993 62.9584 632.678 60.5446 622.624 60.2666L621.646 60.2471ZM923.633 170.708C923.228 170.934 922.817 171.149 922.399 171.354C922.812 171.151 923.219 170.939 923.619 170.716L923.633 170.708ZM748.779 163.507C748.817 163.568 748.856 163.628 748.895 163.688C748.763 163.478 748.631 163.266 748.504 163.051L748.779 163.507ZM653.766 162.848C653.948 162.673 654.128 162.495 654.307 162.316C654.128 162.495 653.948 162.673 653.766 162.848ZM654.527 162.095C654.625 161.996 654.722 161.897 654.818 161.798C654.722 161.897 654.625 161.996 654.527 162.095ZM655.049 161.557C655.148 161.453 655.247 161.348 655.345 161.243C655.247 161.348 655.148 161.453 655.049 161.557ZM655.545 161.026C655.657 160.904 655.769 160.78 655.88 160.656C655.769 160.78 655.657 160.904 655.545 161.026ZM656.047 160.471C656.159 160.344 656.271 160.216 656.382 160.088C656.271 160.216 656.159 160.344 656.047 160.471ZM656.557 159.884C656.67 159.75 656.783 159.616 656.896 159.481C656.783 159.616 656.67 159.75 656.557 159.884ZM657.04 159.309C657.2 159.114 657.358 158.918 657.515 158.721C657.358 158.918 657.2 159.114 657.04 159.309ZM1259.33 152.82C1259.33 152.753 1259.34 152.685 1259.34 152.617V152.604C1259.34 152.676 1259.33 152.748 1259.33 152.82ZM662.21 151.404C662.003 151.806 661.793 152.203 661.577 152.595L661.976 151.857C662.055 151.707 662.132 151.556 662.21 151.404ZM1287.06 151.869C1287.07 151.793 1287.07 151.716 1287.07 151.64C1287.07 151.716 1287.07 151.793 1287.06 151.869ZM302.304 95.002C306.087 91.2187 312.148 91.1006 316.073 94.6475L316.446 95.002L343.393 121.948L316.446 148.895C312.541 152.799 306.209 152.799 302.304 148.895C298.399 144.989 298.399 138.657 302.304 134.752L315.107 121.948L302.304 109.145L301.949 108.771C298.402 104.846 298.521 98.7852 302.304 95.002ZM579.854 148.656C580.004 148.987 580.158 149.315 580.313 149.64C580.154 149.306 579.997 148.97 579.844 148.631L579.854 148.656ZM664.648 145.938C664.485 146.359 664.319 146.777 664.146 147.191L664.479 146.376C664.536 146.231 664.592 146.084 664.648 145.938ZM375.989 126.889C381.273 127.157 385.475 131.526 385.475 136.876C385.474 142.226 381.272 146.594 375.989 146.862L375.475 146.876H355.185C349.662 146.876 345.185 142.398 345.185 136.876C345.185 131.353 349.662 126.876 355.185 126.876H375.475L375.989 126.889ZM802.622 142.061L802.632 141.95C802.643 141.814 802.651 141.677 802.661 141.54C802.648 141.714 802.636 141.887 802.622 142.061ZM802.686 141.198C802.704 140.929 802.72 140.658 802.735 140.387C802.72 140.658 802.704 140.929 802.686 141.198ZM802.746 140.187C802.76 139.917 802.772 139.646 802.783 139.375C802.772 139.646 802.76 139.917 802.746 140.187ZM1283.58 132.037C1283.79 132.466 1283.98 132.902 1284.17 133.348C1283.98 132.902 1283.78 132.466 1283.58 132.037ZM908.771 98.1104C898.128 98.1104 890.388 101.408 885.344 107.854L885.34 107.857C882.263 111.746 880.09 116.772 878.852 122.968H934.968C933.969 115.894 931.997 110.468 929.105 106.628C924.871 101.006 918.17 98.1104 908.771 98.1104ZM800.658 120.405V120.404C800.555 120.052 800.447 119.703 800.337 119.355C800.447 119.703 800.555 120.053 800.658 120.405ZM669.508 119.359C669.511 119.23 669.516 119.1 669.519 118.97V118.937C669.516 119.078 669.511 119.219 669.508 119.359ZM800.26 119.116C800.163 118.817 800.065 118.52 799.963 118.225C800.065 118.52 800.163 118.817 800.26 119.116ZM799.908 118.067C799.787 117.721 799.664 117.375 799.536 117.033C799.664 117.375 799.787 117.721 799.908 118.067ZM1259.52 111.232C1259.81 111.35 1260.1 111.469 1260.39 111.592C1259.8 111.343 1259.21 111.104 1258.61 110.877L1259.52 111.232ZM886.586 104.948C886.478 105.056 886.37 105.164 886.264 105.274C886.37 105.164 886.478 105.056 886.586 104.948ZM887.146 104.406C887.021 104.523 886.898 104.641 886.775 104.761C886.898 104.641 887.021 104.523 887.146 104.406ZM887.782 103.83C887.617 103.974 887.453 104.121 887.292 104.27C887.454 104.121 887.617 103.974 887.782 103.83ZM888.423 103.291C888.242 103.437 888.065 103.588 887.889 103.739C888.065 103.588 888.242 103.437 888.423 103.291ZM1088.89 101.876C1089.1 102.442 1089.3 103.012 1089.48 103.585C1089.31 103.061 1089.14 102.54 1088.95 102.022C1088.93 101.973 1088.91 101.925 1088.89 101.876ZM754.394 103.234C754.371 103.253 754.35 103.272 754.327 103.291C754.477 103.166 754.629 103.042 754.782 102.921L754.394 103.234ZM1088.22 100.138C1088.43 100.649 1088.63 101.163 1088.82 101.681C1088.75 101.479 1088.67 101.277 1088.59 101.076C1088.47 100.762 1088.35 100.449 1088.22 100.137V100.138ZM760.492 99.5957C760.33 99.6601 760.169 99.7263 760.01 99.7939L760.493 99.5957C760.655 99.5312 760.819 99.4685 760.983 99.4072L760.492 99.5957ZM1036.46 98.8545C1036.21 98.8743 1035.95 98.8968 1035.7 98.9229H1035.7C1035.95 98.8968 1036.21 98.8742 1036.46 98.8545ZM1037.17 98.8076C1036.96 98.8189 1036.76 98.8322 1036.55 98.8477C1036.76 98.8322 1036.96 98.8189 1037.17 98.8076ZM1037.93 98.7764C1037.75 98.7818 1037.57 98.7881 1037.38 98.7969C1037.57 98.7882 1037.75 98.7818 1037.93 98.7764ZM1038.22 98.7676C1038.19 98.7683 1038.15 98.7697 1038.11 98.7705C1038.36 98.7646 1038.61 98.7617 1038.85 98.7617C1038.64 98.7617 1038.43 98.7633 1038.22 98.7676ZM918.501 98.3643H918.502H918.501ZM916.271 97.8154H916.272C916.034 97.7666 915.793 97.7215 915.55 97.6777C915.792 97.7214 916.033 97.7667 916.271 97.8154ZM915.422 97.6553C915.215 97.619 915.007 97.5834 914.798 97.5508C915.007 97.5835 915.215 97.6189 915.422 97.6553ZM914.649 97.5283C914.404 97.4912 914.157 97.456 913.907 97.4238C914.157 97.456 914.404 97.4911 914.649 97.5283ZM1086.04 95.5459C1086.2 95.8463 1086.36 96.1475 1086.51 96.4502C1086.2 95.8446 1085.88 95.2438 1085.54 94.6475L1086.04 95.5459ZM870.694 86.0684C870.648 86.1052 870.602 86.1417 870.556 86.1787C870.062 86.5766 869.576 86.9837 869.097 87.3984L869.821 86.7822C870.11 86.5414 870.401 86.3033 870.694 86.0684ZM872.268 84.8584C872.05 85.0194 871.835 85.1826 871.62 85.3467C871.835 85.1826 872.05 85.0194 872.268 84.8584ZM873.063 84.2803C872.886 84.4071 872.709 84.5362 872.533 84.665C872.709 84.5362 872.886 84.4071 873.063 84.2803ZM873.958 83.6562C873.759 83.7922 873.561 83.93 873.364 84.0684C873.561 83.93 873.759 83.7922 873.958 83.6562ZM662.828 83.7061L662.741 83.5234C662.68 83.398 662.616 83.2739 662.554 83.1494C662.646 83.334 662.737 83.5197 662.828 83.7061ZM874.404 83.3535C874.337 83.3986 874.27 83.4449 874.203 83.4902C874.412 83.3494 874.622 83.2105 874.833 83.0723C874.69 83.1659 874.546 83.2586 874.404 83.3535ZM875.209 82.8262C875.169 82.8519 875.13 82.8785 875.09 82.9043C875.305 82.7652 875.522 82.6286 875.739 82.4922C875.562 82.6033 875.385 82.7133 875.209 82.8262ZM876.851 81.8105C876.556 81.9857 876.265 82.1639 875.975 82.3438C876.265 82.1639 876.556 81.9857 876.851 81.8105ZM1017.73 81.6416C1017.64 81.7007 1017.55 81.7617 1017.46 81.8213C1017.57 81.7508 1017.67 81.6792 1017.78 81.6094L1017.73 81.6416ZM1193.37 80.9248C1193.38 81.0057 1193.39 81.0858 1193.4 81.166C1193.39 81.0716 1193.38 80.9771 1193.37 80.8818L1193.37 80.9248ZM1019.4 80.5859C1019.33 80.6271 1019.26 80.6675 1019.19 80.709C1019.26 80.6675 1019.33 80.6271 1019.4 80.5859ZM932.25 78.7773C933.143 79.185 934.019 79.6177 934.879 80.0762C934.592 79.9233 934.304 79.7732 934.014 79.626C933.724 79.4788 933.431 79.3348 933.138 79.1934C932.844 79.0518 932.548 78.9132 932.25 78.7773ZM1019.94 80.2578C1019.92 80.2709 1019.9 80.2847 1019.88 80.2979C1019.97 80.2403 1020.07 80.1837 1020.17 80.127C1020.09 80.1709 1020.02 80.2135 1019.94 80.2578ZM880.245 79.9531C880.072 80.0398 879.9 80.1291 879.729 80.2178C880 80.078 880.272 79.9398 880.546 79.8047C880.446 79.8542 880.345 79.903 880.245 79.9531ZM1020.68 79.832C1020.63 79.8608 1020.58 79.8909 1020.53 79.9199C1020.66 79.8435 1020.8 79.7683 1020.94 79.6934C1020.85 79.7399 1020.77 79.785 1020.68 79.832ZM881.114 79.5273C881.014 79.5754 880.914 79.6252 880.814 79.6738C881.088 79.5406 881.363 79.4099 881.64 79.2812C881.464 79.3628 881.289 79.4439 881.114 79.5273ZM1021.6 79.3359C1021.46 79.4067 1021.33 79.4786 1021.2 79.5508C1021.33 79.4786 1021.46 79.4068 1021.6 79.3359ZM881.992 79.1172C881.941 79.1405 881.891 79.165 881.84 79.1885C882.184 79.0299 882.53 78.8741 882.878 78.7227L881.992 79.1172ZM1022.31 78.9717C1022.19 79.0293 1022.08 79.0879 1021.96 79.1465C1022.08 79.0878 1022.19 79.0294 1022.31 78.9717ZM1022.99 78.6318C1022.93 78.6603 1022.88 78.6901 1022.82 78.7188C1022.88 78.69 1022.93 78.6603 1022.99 78.6318ZM885.835 77.54C885.707 77.5871 885.579 77.6336 885.451 77.6816C885.579 77.6337 885.707 77.5871 885.835 77.54ZM886.501 77.2988C886.425 77.3257 886.349 77.3536 886.272 77.3809C886.383 77.3414 886.493 77.3015 886.604 77.2627L886.501 77.2988ZM890.256 76.1221C889.937 76.2098 889.62 76.3006 889.305 76.3936C889.936 76.2078 890.573 76.0323 891.215 75.8672L890.256 76.1221ZM1032.14 75.3965C1032.09 75.4084 1032.05 75.4216 1032 75.4336C1032.34 75.3487 1032.69 75.2658 1033.04 75.1875L1032.14 75.3965ZM893.305 75.3701C893.226 75.3874 893.147 75.4043 893.068 75.4219C893.147 75.4043 893.226 75.3873 893.305 75.3701ZM894.141 75.1934C894.088 75.204 894.036 75.2148 893.984 75.2256C894.068 75.2083 894.152 75.1908 894.235 75.1738C894.204 75.1802 894.172 75.1869 894.141 75.1934ZM897.253 74.6426C897.144 74.659 897.035 74.6764 896.927 74.6934C897.035 74.6764 897.144 74.659 897.253 74.6426ZM899.181 74.3809C899.153 74.3842 899.125 74.3882 899.098 74.3916C899.245 74.3737 899.392 74.3558 899.54 74.3389C899.42 74.3526 899.3 74.3665 899.181 74.3809ZM900.276 74.2588C900.1 74.277 899.924 74.2959 899.749 74.3154C899.924 74.2958 900.1 74.277 900.276 74.2588ZM900.911 74.1963C900.815 74.2053 900.72 74.2142 900.624 74.2236C900.72 74.2142 900.815 74.2053 900.911 74.1963ZM901.692 74.127C901.604 74.1342 901.516 74.1418 901.428 74.1494C901.516 74.1418 901.604 74.1342 901.692 74.127ZM902.303 74.0791C902.272 74.0813 902.242 74.0837 902.212 74.0859C902.28 74.0808 902.349 74.0762 902.417 74.0713C902.379 74.074 902.341 74.0763 902.303 74.0791ZM903.4 74.0068C903.364 74.0089 903.328 74.0115 903.292 74.0137C903.328 74.0115 903.364 74.0089 903.4 74.0068ZM1042.38 73.9023C1042.17 73.9152 1041.96 73.9296 1041.75 73.9443C1041.96 73.9296 1042.17 73.9152 1042.38 73.9023ZM1043.61 73.8389C1043.3 73.852 1042.99 73.8675 1042.68 73.8848C1042.99 73.8674 1043.3 73.852 1043.61 73.8389ZM615.708 59.4746C615.514 59.4914 615.321 59.5087 615.128 59.5273C615.321 59.5088 615.514 59.4914 615.708 59.4746ZM616.099 59.4414C616.044 59.4458 615.989 59.4506 615.935 59.4551C616.223 59.4313 616.513 59.4094 616.805 59.3896L616.099 59.4414ZM1195.75 38.9189C1195.19 39.1207 1194.64 39.3294 1194.09 39.5449L1194.92 39.2266C1195.19 39.1223 1195.47 39.0197 1195.75 38.9189ZM1210.78 35.2637C1210.62 35.2861 1210.45 35.3096 1210.29 35.333C1210.55 35.296 1210.81 35.2602 1211.07 35.2256C1210.97 35.2384 1210.88 35.2506 1210.78 35.2637ZM1211.72 35.1416C1211.62 35.1539 1211.52 35.1671 1211.42 35.1797C1211.71 35.1424 1212 35.1066 1212.29 35.0723C1212.1 35.0949 1211.91 35.1176 1211.72 35.1416ZM1213.6 34.9287C1213.23 34.967 1212.85 35.0078 1212.48 35.0508C1212.85 35.0077 1213.23 34.967 1213.6 34.9287ZM611.827 34.7373C611.509 34.7692 611.193 34.8038 610.877 34.8389C611.193 34.8039 611.509 34.7691 611.827 34.7373ZM613.42 34.5928C613.059 34.6226 612.699 34.6546 612.341 34.6885C612.699 34.6547 613.059 34.6226 613.42 34.5928ZM614.397 34.5156C614.191 34.5305 613.986 34.5483 613.78 34.5645C614.149 34.5355 614.518 34.5082 614.89 34.4834C614.725 34.4943 614.561 34.5038 614.397 34.5156ZM616.466 34.3916C616.108 34.4096 615.751 34.4294 615.396 34.4512C615.751 34.4293 616.108 34.4097 616.466 34.3916ZM617.263 34.3525C617.152 34.3572 617.041 34.3631 616.931 34.3682C617.393 34.347 617.857 34.3283 618.323 34.3135C617.969 34.3248 617.615 34.3376 617.263 34.3525ZM619.851 34.2764C619.392 34.2842 618.936 34.2948 618.481 34.3086C618.936 34.2948 619.392 34.2842 619.851 34.2764ZM621.66 34.2607C621.166 34.2607 620.675 34.2647 620.186 34.2715C620.675 34.2647 621.166 34.2607 621.66 34.2607ZM1273.38 182.759C1273.57 182.578 1273.75 182.396 1273.94 182.212C1273.75 182.396 1273.57 182.578 1273.38 182.759ZM1283.47 131.812L1283.23 131.331C1283.31 131.491 1283.39 131.652 1283.47 131.814C1283.47 131.814 1283.47 131.812 1283.47 131.812ZM871.44 85.4834C871.395 85.5187 871.348 85.5534 871.303 85.5889C871.099 85.7473 870.896 85.9073 870.694 86.0684C870.941 85.8711 871.19 85.6765 871.44 85.4834Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/src/components/plan/plan-viewer.tsx b/apps/web/src/components/plan/plan-viewer.tsx
index 989414e8..8098c6c8 100644
--- a/apps/web/src/components/plan/plan-viewer.tsx
+++ b/apps/web/src/components/plan/plan-viewer.tsx
@@ -5,6 +5,7 @@ import { TooltipIconButton } from "../ui/tooltip-icon-button";
 import { Dispatch, SetStateAction, useState } from "react";
 import { Textarea } from "../ui/textarea";
 import { Button } from "../ui/button";
+import { MarkdownText } from "../thread/markdown-text";
 
 interface PlanViewerProps {
   planItems: PlanItem[];
@@ -166,7 +167,7 @@ export function PlanViewer({
                       className="text-foreground"
                     />
                   ) : (
-                    <p
+                    <MarkdownText
                       className={cn("text-sm leading-relaxed", {
                         "text-foreground": status === "current",
                         "text-foreground/80":
@@ -175,7 +176,7 @@ export function PlanViewer({
                       })}
                     >
                       {planItems[item.index].plan}
-                    </p>
+                    </MarkdownText>
                   )}
 
                   {/* Summary for completed tasks */}
@@ -184,9 +185,9 @@ export function PlanViewer({
                       <p className="mb-1 text-xs font-medium text-green-700 dark:text-green-300">
                         Summary:
                       </p>
-                      <p className="text-xs text-green-600 dark:text-green-400">
+                      <MarkdownText className="text-xs text-green-600 dark:text-green-400">
                         {item.summary}
-                      </p>
+                      </MarkdownText>
                     </div>
                   )}
                 </div>
diff --git a/apps/web/src/components/plan/proposed-plan.tsx b/apps/web/src/components/plan/proposed-plan.tsx
index bedb6577..f361e860 100644
--- a/apps/web/src/components/plan/proposed-plan.tsx
+++ b/apps/web/src/components/plan/proposed-plan.tsx
@@ -1,8 +1,8 @@
 import { PlanViewer } from "./plan-viewer";
-import { Button } from "../ui/button";
 import { useProposedPlan } from "../thread/agent-inbox/hooks/useProposedPlan";
 import { PlanItem } from "@open-swe/shared/open-swe/types";
 import { useStream } from "@langchain/langgraph-sdk/react";
+import { X, ArrowDown } from "lucide-react";
 
 export function ProposedPlan({
   originalPlanItems,
@@ -28,21 +28,32 @@ export function ProposedPlan({
         setPlanItems={setPlanItems}
         isProposedPlan={true}
       />
-      <div className="flex w-full flex-row items-center justify-center gap-2">
-        <Button
-          onClick={handleResumePlan}
-          className="w-full"
-          variant="brand"
-        >
-          {changesMade ? "Submit" : "Approve"}
-        </Button>
-        <Button
-          onClick={handleRejectPlan}
-          className="w-full"
-          variant="destructive"
-        >
-          Reject
-        </Button>
+      <div className="py-8">
+        <div className="flex items-center justify-center gap-8">
+          <button
+            onClick={handleRejectPlan}
+            className="group flex cursor-pointer flex-col items-center gap-2 transition-all"
+          >
+            <div className="rounded-full border-2 border-dashed border-red-500 p-3 transition-all group-hover:border-solid group-hover:bg-red-50 dark:group-hover:bg-red-950/50">
+              <X className="h-5 w-5 text-red-500" />
+            </div>
+            <span className="text-muted-foreground text-xs group-hover:text-red-600 dark:group-hover:text-red-400">
+              Reject
+            </span>
+          </button>
+
+          <button
+            onClick={handleResumePlan}
+            className="group flex cursor-pointer flex-col items-center gap-2 transition-all"
+          >
+            <div className="rounded-full border-2 border-dashed border-green-500 p-3 transition-all group-hover:border-solid group-hover:bg-green-50 dark:group-hover:bg-green-950/50">
+              <ArrowDown className="h-5 w-5 text-green-500" />
+            </div>
+            <span className="text-muted-foreground text-xs group-hover:text-green-600 dark:group-hover:text-green-400">
+              {changesMade ? "Submit changes" : "Continue"}
+            </span>
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/apps/web/src/components/tasks/index.tsx b/apps/web/src/components/tasks/index.tsx
index b5397126..ca6bd19b 100644
--- a/apps/web/src/components/tasks/index.tsx
+++ b/apps/web/src/components/tasks/index.tsx
@@ -102,10 +102,12 @@ export function TasksSidebar({
     switch (state) {
       case "completed":
         return (
-          <CheckCircle2 className="h-4 w-4 text-green-600 dark:text-green-400" />
+          <CheckCircle2 className="h-4 w-4 text-green-500 dark:text-green-400/80" />
         );
       case "current":
-        return <Play className="h-4 w-4 text-blue-500 dark:text-blue-400" />;
+        return (
+          <Play className="h-4 w-4 text-orange-600 dark:text-orange-400" />
+        );
       default:
         return <Circle className="h-4 w-4 text-gray-400 dark:text-gray-500" />;
     }
@@ -140,7 +142,7 @@ export function TasksSidebar({
   return (
     <div
       className={cn(
-        "fixed top-0 right-0 z-10 h-screen border-l border-gray-200 bg-white shadow-lg transition-all duration-300 dark:border-gray-700 dark:bg-gray-900",
+        "dark:bg-background fixed top-0 right-0 z-10 h-screen bg-white shadow-lg transition-all duration-300",
         isOpen ? "w-80 md:w-xl" : "w-0 overflow-hidden border-l-0",
       )}
     >
@@ -161,7 +163,7 @@ export function TasksSidebar({
               variant="ghost"
               size="sm"
               onClick={onClose}
-              className="h-8 w-8 p-0 hover:bg-gray-100 dark:hover:bg-gray-800"
+              className="h-8 w-8 p-0 hover:bg-gray-100 dark:hover:bg-gray-700/50"
             >
               <PanelLeftClose className="h-4 w-4" />
             </Button>
@@ -174,7 +176,7 @@ export function TasksSidebar({
                 Task
               </label>
               <select
-                className="w-full rounded border border-gray-200 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
+                className="bg-muted dark:bg-muted w-full rounded border border-gray-200 px-2 py-1 text-sm dark:border-gray-600 dark:text-gray-200"
                 value={currentTask.id}
                 onChange={(e) => {
                   const newTaskIndex = taskPlan.tasks.findIndex(
@@ -205,12 +207,12 @@ export function TasksSidebar({
               Plan Revision
             </label>
             <div className="flex items-center gap-2">
-              <div className="flex flex-1 items-center gap-1 rounded border border-gray-200 bg-gray-50 px-2 py-1 dark:border-gray-600 dark:bg-gray-800">
+              <div className="bg-muted dark:bg-muted flex flex-1 items-center gap-1 rounded border border-gray-200 px-2 py-1 dark:border-gray-600">
                 <div className="flex items-center gap-1">
                   {currentRevision?.createdBy === "agent" ? (
-                    <Bot className="h-3 w-3 text-blue-500" />
+                    <Bot className="h-3 w-3 text-gray-600 dark:text-gray-400" />
                   ) : (
-                    <User className="h-3 w-3 text-green-500" />
+                    <User className="h-3 w-3 text-green-500 dark:text-green-400/80" />
                   )}
                   <Clock className="h-3 w-3 text-gray-500 dark:text-gray-400" />
                 </div>
@@ -278,7 +280,7 @@ export function TasksSidebar({
 
           {/* Filter controls */}
           <div className="flex items-center gap-2">
-            <div className="flex items-center gap-1 rounded border border-gray-200 bg-gray-50 px-2 py-1 dark:border-gray-600 dark:bg-gray-800">
+            <div className="bg-muted dark:bg-muted flex items-center gap-1 rounded border border-gray-200 px-2 py-1 dark:border-gray-600">
               <Filter className="h-3 w-3 text-gray-500 dark:text-gray-400" />
               <select
                 className="border-none bg-transparent text-xs outline-none dark:text-gray-300"
@@ -312,11 +314,11 @@ export function TasksSidebar({
                     className={cn(
                       "rounded-lg border p-3",
                       state === "current" &&
-                        "border-blue-200 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/20",
+                        "border-orange-200 bg-orange-50 dark:border-orange-800/50 dark:bg-orange-950/20",
                       state === "completed" &&
-                        "border-green-200 bg-green-50 dark:border-green-700 dark:bg-green-900/20",
+                        "border-green-200/80 bg-green-50/60 dark:border-green-800/30 dark:bg-green-950/15",
                       state === "remaining" &&
-                        "border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800",
+                        "bg-muted dark:bg-muted border-gray-200 dark:border-gray-700",
                     )}
                   >
                     <div className="flex items-start gap-3">
@@ -340,11 +342,11 @@ export function TasksSidebar({
                               className={cn(
                                 "rounded-full px-2 py-1 text-xs",
                                 state === "completed" &&
-                                  "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+                                  "bg-green-100/70 text-green-600 dark:bg-green-900/20 dark:text-green-300/90",
                                 state === "current" &&
-                                  "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+                                  "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300",
                                 state === "remaining" &&
-                                  "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300",
+                                  "bg-muted dark:bg-muted text-gray-700 dark:text-gray-300",
                               )}
                             >
                               {state === "completed"
@@ -373,7 +375,7 @@ export function TasksSidebar({
                                 <Button
                                   variant="ghost"
                                   size="sm"
-                                  className="h-6 p-0 text-xs text-green-700 dark:text-green-400"
+                                  className="h-6 p-0 text-xs text-green-600 dark:text-green-300/90"
                                 >
                                   {isExpanded ? (
                                     <ChevronDown className="mr-1 h-3 w-3" />
@@ -384,7 +386,7 @@ export function TasksSidebar({
                                 </Button>
                               </CollapsibleTrigger>
                               <CollapsibleContent className="mt-2">
-                                <div className="rounded border border-green-200 bg-green-50 p-2 text-xs text-green-800 dark:border-green-700 dark:bg-green-900/30 dark:text-green-400">
+                                <div className="rounded border border-green-200/80 bg-green-50/60 p-2 text-xs text-green-700 dark:border-green-800/30 dark:bg-green-950/15 dark:text-green-300/90">
                                   <BasicMarkdownText>
                                     {item.summary}
                                   </BasicMarkdownText>
@@ -412,7 +414,7 @@ export function TaskPlanView({ taskPlan, onTaskChange }: TaskPlanViewProps) {
 
   if (taskPlan.tasks.length === 0) {
     return (
-      <div className="w-full rounded border border-gray-200 bg-gray-50 p-2 dark:border-gray-700 dark:bg-gray-800">
+      <div className="bg-muted dark:bg-muted w-full rounded border border-gray-200 p-2 dark:border-gray-700">
         <div className="text-center text-xs text-gray-500 dark:text-gray-400">
           No tasks available
         </div>
diff --git a/apps/web/src/components/tasks/progress-bar.tsx b/apps/web/src/components/tasks/progress-bar.tsx
index 041437ea..2b55b157 100644
--- a/apps/web/src/components/tasks/progress-bar.tsx
+++ b/apps/web/src/components/tasks/progress-bar.tsx
@@ -20,7 +20,7 @@ import {
   HoverCardContent,
   HoverCardTrigger,
 } from "@/components/ui/hover-card";
-import { InlineMarkdownText } from "../thread/markdown-text";
+import { InlineMarkdownText } from "@/components/thread/markdown-text";
 
 interface ProgressBarProps {
   taskPlan?: TaskPlan;
@@ -39,7 +39,7 @@ export function ProgressBar({
     return (
       <div
         className={cn(
-          "w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 sm:mt-4 dark:border-gray-700 dark:bg-gray-800",
+          "w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 sm:mt-4 dark:border-gray-600/50 dark:bg-gray-700/30",
           className,
         )}
       >
@@ -73,7 +73,7 @@ export function ProgressBar({
     return (
       <div
         className={cn(
-          "w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 sm:mt-4 dark:border-gray-700 dark:bg-gray-800",
+          "w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 sm:mt-4 dark:border-gray-600/50 dark:bg-gray-700/30",
           className,
         )}
       >
@@ -105,7 +105,7 @@ export function ProgressBar({
   const getSegmentColor = (state: string) => {
     switch (state) {
       case "completed":
-        return "bg-green-400 dark:bg-green-500";
+        return "bg-green-500/90 dark:bg-green-400/80";
       case "current":
         return "bg-blue-400 dark:bg-blue-500";
       default:
@@ -116,7 +116,7 @@ export function ProgressBar({
   return (
     <div
       className={cn(
-        "bg-muted/70 w-full overflow-hidden rounded-lg px-1 py-1.5 sm:px-3 dark:bg-gray-800",
+        "dark:bg-muted w-full overflow-hidden rounded-lg bg-gray-50 px-1 py-1.5 sm:px-3",
         className,
       )}
     >
@@ -140,11 +140,12 @@ export function ProgressBar({
               </TooltipTrigger>
               <TooltipContent
                 side="top"
-                className="max-w-xs p-2 text-xs"
+                className="bg-popover text-popover-foreground max-w-xs border p-2 text-xs before:hidden after:hidden"
+                sideOffset={5}
               >
                 <div className="space-y-1">
-                  <p className="font-medium">Plan Progress</p>
-                  <p>
+                  <p className="text-foreground font-medium">Plan Progress</p>
+                  <p className="text-muted-foreground">
                     Shows the current progress of the AI agent's plan execution.
                   </p>
                 </div>
@@ -165,7 +166,7 @@ export function ProgressBar({
               variant="outline"
               size="sm"
               onClick={onOpenSidebar}
-              className="h-6 border-blue-200 text-xs hover:bg-blue-50 dark:border-blue-700 dark:hover:bg-blue-900/20"
+              className="hover:bg-muted/80 hover:border-muted-foreground/50 h-6 text-xs"
             >
               <List className="size-3" />
               <span className="hidden sm:inline">Tasks</span>
@@ -176,9 +177,9 @@ export function ProgressBar({
       </div>
 
       {showLegend && (
-        <div className="mb-2 flex flex-wrap items-center gap-2 rounded border border-gray-200 bg-gray-50 px-2 py-1 text-xs sm:gap-3 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200">
+        <div className="mb-2 flex flex-wrap items-center gap-2 rounded border border-gray-200 bg-gray-50 px-2 py-1 text-xs sm:gap-3 dark:border-gray-600/50 dark:bg-gray-700/30 dark:text-gray-200">
           <div className="flex items-center gap-1">
-            <div className="h-2 w-2 rounded-full bg-green-400 dark:bg-green-500"></div>
+            <div className="h-2 w-2 rounded-full bg-green-500/90 dark:bg-green-400/80"></div>
             <span>Completed</span>
           </div>
           <div className="flex items-center gap-1">
diff --git a/apps/web/src/components/thread/ContentBlocksPreview.tsx b/apps/web/src/components/thread/ContentBlocksPreview.tsx
index 14fe4aa1..d6068442 100644
--- a/apps/web/src/components/thread/ContentBlocksPreview.tsx
+++ b/apps/web/src/components/thread/ContentBlocksPreview.tsx
@@ -22,7 +22,7 @@ export const ContentBlocksPreview: React.FC<ContentBlocksPreviewProps> = ({
 }) => {
   if (!blocks.length) return null;
   return (
-    <div className={cn("flex flex-wrap gap-2 pb-1", className)}>
+    <div className={cn("flex flex-wrap gap-2 pb-3", className)}>
       {blocks.map((block, idx) => (
         <MultimodalPreview
           key={idx}
diff --git a/apps/web/src/components/thread/MultimodalPreview.tsx b/apps/web/src/components/thread/MultimodalPreview.tsx
index 0f6582c7..43ccdc7e 100644
--- a/apps/web/src/components/thread/MultimodalPreview.tsx
+++ b/apps/web/src/components/thread/MultimodalPreview.tsx
@@ -26,9 +26,14 @@ export const MultimodalPreview: React.FC<MultimodalPreviewProps> = ({
     block.mime_type.startsWith("image/")
   ) {
     const url = `data:${block.mime_type};base64,${block.data}`;
-    let imgClass: string = "rounded-md object-cover h-16 w-16 text-lg";
-    if (size === "sm") imgClass = "rounded-md object-cover h-10 w-10 text-base";
-    if (size === "lg") imgClass = "rounded-md object-cover h-24 w-24 text-xl";
+    let imgClass: string =
+      "rounded-md object-cover h-16 w-16 text-lg shadow-sm ring-1 ring-border";
+    if (size === "sm")
+      imgClass =
+        "rounded-md object-cover h-10 w-10 text-base shadow-sm ring-1 ring-border";
+    if (size === "lg")
+      imgClass =
+        "rounded-md object-cover h-24 w-24 text-xl shadow-sm ring-1 ring-border";
     return (
       <div className={cn("relative inline-block", className)}>
         <Image
@@ -41,11 +46,11 @@ export const MultimodalPreview: React.FC<MultimodalPreviewProps> = ({
         {removable && (
           <button
             type="button"
-            className="absolute top-1 right-1 z-10 cursor-pointer rounded-full p-1 text-white hover:bg-gray-800"
+            className="bg-destructive/90 text-destructive-foreground hover:bg-destructive absolute -top-2 -right-2 z-10 cursor-pointer rounded-full p-1 shadow-sm"
             onClick={onRemove}
             aria-label="Remove image"
           >
-            <XIcon className="h-4 w-4" />
+            <XIcon className="h-3 w-3" />
           </button>
         )}
       </div>
@@ -63,20 +68,20 @@ export const MultimodalPreview: React.FC<MultimodalPreviewProps> = ({
     return (
       <div
         className={cn(
-          "relative flex items-center justify-start gap-2 rounded-md border-[1px] border-gray-800 bg-inherit px-3 py-2",
+          "border-border bg-card/50 relative flex items-center justify-start gap-2 rounded-md border px-3 py-2",
           className,
         )}
       >
         <div className="flex flex-shrink-0 flex-col items-start justify-start">
           <File
             className={cn(
-              "text-teal-700",
+              "text-primary",
               size === "sm" ? "h-5 w-5" : "h-7 w-7",
             )}
           />
         </div>
         <span
-          className={cn("min-w-0 flex-1 text-sm break-all text-gray-300")}
+          className={cn("text-foreground min-w-0 flex-1 text-sm break-all")}
           style={{ wordBreak: "break-all", whiteSpace: "pre-wrap" }}
         >
           {String(filename)}
@@ -84,7 +89,7 @@ export const MultimodalPreview: React.FC<MultimodalPreviewProps> = ({
         {removable && (
           <button
             type="button"
-            className="cursor-pointer self-start rounded-full p-1 text-teal-700 hover:bg-gray-800"
+            className="text-muted-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer self-start rounded-full p-1"
             onClick={onRemove}
             aria-label="Remove PDF"
           >
@@ -99,7 +104,7 @@ export const MultimodalPreview: React.FC<MultimodalPreviewProps> = ({
   return (
     <div
       className={cn(
-        "flex items-center gap-2 rounded-md border-[1px] border-gray-800 bg-inherit px-3 py-2 text-gray-500",
+        "border-border bg-card/50 text-muted-foreground flex items-center gap-2 rounded-md border px-3 py-2",
         className,
       )}
     >
@@ -108,7 +113,7 @@ export const MultimodalPreview: React.FC<MultimodalPreviewProps> = ({
       {removable && (
         <button
           type="button"
-          className="cursor-pointer self-start rounded-full p-1 text-gray-500 hover:bg-gray-800"
+          className="text-muted-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer self-start rounded-full p-1"
           onClick={onRemove}
           aria-label="Remove file"
         >
diff --git a/apps/web/src/components/thread/markdown-text.tsx b/apps/web/src/components/thread/markdown-text.tsx
index 41963535..70f328d5 100644
--- a/apps/web/src/components/thread/markdown-text.tsx
+++ b/apps/web/src/components/thread/markdown-text.tsx
@@ -47,7 +47,7 @@ const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
   };
 
   return (
-    <div className="flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white">
+    <div className="bg-muted text-foreground flex items-center justify-between gap-4 rounded-t-lg border-b px-4 py-2 text-sm font-semibold">
       <span className="lowercase [&>span]:text-xs">{language}</span>
       <TooltipIconButton
         tooltip="Copy"
@@ -196,7 +196,7 @@ const defaultComponents: any = {
   pre: ({ className, ...props }: { className?: string }) => (
     <pre
       className={cn(
-        "w-full overflow-x-auto rounded-lg bg-black text-white",
+        "bg-muted text-foreground w-full overflow-x-auto rounded-lg",
         className,
       )}
       {...props}
@@ -321,12 +321,17 @@ const InlineMarkdownTextImpl: FC<{ children: string; className?: string }> = ({
       if (match) {
         // If it's a code block, render as plain text to keep it inline
         return (
-          <span className={cn("font-mono", className)}>{String(children)}</span>
+          <span className={cn("font-mono text-sm", className)}>
+            {String(children)}
+          </span>
         );
       }
       return (
         <code
-          className={cn("bg-muted rounded px-1 py-0.5 font-mono", className)}
+          className={cn(
+            "bg-muted rounded px-1 py-0.5 font-mono text-sm",
+            className,
+          )}
           {...props}
         >
           {children}
diff --git a/apps/web/src/components/thread/messages/tool-calls.tsx b/apps/web/src/components/thread/messages/tool-calls.tsx
index cdfb451f..958bf1be 100644
--- a/apps/web/src/components/thread/messages/tool-calls.tsx
+++ b/apps/web/src/components/thread/messages/tool-calls.tsx
@@ -24,11 +24,11 @@ export function ToolCalls({
             key={idx}
             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="border-border bg-card border-b px-4 py-2">
               <h3 className="text-foreground font-medium">
                 {tc.name}
                 {tc.id && (
-                  <code className="bg-muted ml-2 rounded px-2 py-1 text-sm dark:bg-gray-700">
+                  <code className="bg-muted ml-2 rounded px-2 py-1 text-sm">
                     {tc.id}
                   </code>
                 )}
@@ -44,7 +44,7 @@ export function ToolCalls({
                       </td>
                       <td className="text-foreground/80 px-4 py-2 text-sm">
                         {isComplexValue(value) ? (
-                          <code className="bg-muted/70 rounded px-2 py-1 font-mono text-sm break-all dark:bg-gray-800">
+                          <code className="bg-muted/70 rounded px-2 py-1 font-mono text-sm break-all">
                             {JSON.stringify(value, null, 2)}
                           </code>
                         ) : (
@@ -98,12 +98,12 @@ export function ToolResult({ message }: { message: ToolMessage }) {
   return (
     <div className="mx-auto grid grid-rows-[1fr_auto] gap-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="border-border bg-card border-b px-4 py-2">
           <div className="flex flex-wrap items-center justify-between gap-2">
             {message.name ? (
               <h3 className="text-foreground font-medium">
                 Tool Result:{" "}
-                <code className="bg-muted rounded px-2 py-1 dark:bg-gray-700">
+                <code className="bg-muted rounded px-2 py-1">
                   {message.name}
                 </code>
               </h3>
@@ -111,14 +111,14 @@ export function ToolResult({ message }: { message: ToolMessage }) {
               <h3 className="text-foreground font-medium">Tool Result</h3>
             )}
             {message.tool_call_id && (
-              <code className="bg-muted text-foreground ml-2 rounded px-2 py-1 text-sm dark:bg-gray-700">
+              <code className="bg-muted text-foreground ml-2 rounded px-2 py-1 text-sm">
                 {message.tool_call_id}
               </code>
             )}
           </div>
         </div>
         <motion.div
-          className="bg-muted min-w-full dark:bg-gray-700"
+          className="bg-muted min-w-full"
           initial={false}
           animate={{ height: "auto" }}
           transition={{ duration: 0.3 }}
@@ -152,9 +152,9 @@ export function ToolResult({ message }: { message: ToolMessage }) {
                             <td className="text-foreground px-4 py-2 text-sm font-medium whitespace-nowrap">
                               {key}
                             </td>
-                            <td className="text-foreground/80 px-4 py-2 text-sm">
+                            <td className="text-foreground px-4 py-2 text-sm">
                               {isComplexValue(value) ? (
-                                <code className="bg-muted/70 rounded px-2 py-1 font-mono text-sm break-all dark:bg-gray-800">
+                                <code className="bg-muted/70 rounded px-2 py-1 font-mono text-sm break-all">
                                   {JSON.stringify(value, null, 2)}
                                 </code>
                               ) : (
@@ -167,7 +167,7 @@ export function ToolResult({ message }: { message: ToolMessage }) {
                     </tbody>
                   </table>
                 ) : (
-                  <code className="text-foreground/80 block text-sm">
+                  <code className="text-foreground block text-sm">
                     {displayedContent}
                   </code>
                 )}
@@ -180,7 +180,7 @@ export function ToolResult({ message }: { message: ToolMessage }) {
               parsedContent.length > 5)) && (
             <motion.button
               onClick={() => setIsExpanded(!isExpanded)}
-              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"
+              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"
               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 beb3c308..f05f36a1 100644
--- a/apps/web/src/components/v2/default-view.tsx
+++ b/apps/web/src/components/v2/default-view.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
-import { FilePlus2, Archive, ListChecks } from "lucide-react";
+import { Archive, ListChecks } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { TerminalInput } from "./terminal-input";
 import { useFileUpload } from "@/hooks/useFileUpload";
@@ -12,7 +12,6 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "../ui/tooltip";
-import { Label } from "../ui/label";
 import { ContentBlocksPreview } from "../thread/ContentBlocksPreview";
 import { ThemeToggle } from "../theme-toggle";
 import { ThreadCard, ThreadCardLoading } from "./thread-card";
@@ -32,6 +31,7 @@ import { useState, useMemo } from "react";
 import { threadsToMetadata } from "@/lib/thread-utils";
 import { Settings, BookOpen } from "lucide-react";
 import NextLink from "next/link";
+import { OpenSWELogoSVG } from "../icons/openswe";
 
 function OpenSettingsButton() {
   return (
@@ -89,7 +89,6 @@ export function DefaultView({ threads, threadsLoading }: DefaultViewProps) {
   const {
     contentBlocks,
     setContentBlocks,
-    handleFileUpload,
     dropRef,
     removeBlock,
     dragOver,
@@ -121,10 +120,10 @@ export function DefaultView({ threads, threadsLoading }: DefaultViewProps) {
       <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="text-muted-foreground font-mono text-sm">
-              Open SWE
-            </span>
+            <OpenSWELogoSVG
+              width={120}
+              height={18}
+            />
           </div>
           <div className="flex items-center gap-4">
             <InstallationSelector />
@@ -148,7 +147,7 @@ export function DefaultView({ threads, threadsLoading }: DefaultViewProps) {
           {/* Terminal Chat Input */}
           <Card
             className={cn(
-              "border-border bg-card py-0 dark:bg-gray-950",
+              "border-border bg-card py-0",
               dragOver
                 ? "border-primary border-2 border-dotted"
                 : "border border-solid",
@@ -160,14 +159,6 @@ export function DefaultView({ threads, threadsLoading }: DefaultViewProps) {
                 blocks={contentBlocks}
                 onRemove={removeBlock}
               />
-              <input
-                id="file-input"
-                type="file"
-                onChange={handleFileUpload}
-                multiple
-                accept="image/jpeg,image/png,image/gif,image/webp,application/pdf"
-                className="hidden"
-              />
               <div className="space-y-3">
                 <TerminalInput
                   placeholder="Describe your coding task or ask a question..."
@@ -183,27 +174,13 @@ export function DefaultView({ threads, threadsLoading }: DefaultViewProps) {
                   setAutoAcceptPlan={setAutoAccept}
                 />
                 <div className="flex items-center gap-2">
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger>
-                        <Label
-                          htmlFor="file-input"
-                          className="text-muted-foreground hover:text-foreground flex cursor-pointer items-center justify-center rounded-full bg-inherit"
-                        >
-                          <FilePlus2 className="size-4" />
-                        </Label>
-                      </TooltipTrigger>
-                      <TooltipContent side="bottom">
-                        Attach files
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
                   <TooltipIconButton
-                    variant={autoAccept ? "brand" : "ghost"}
+                    variant={autoAccept ? "default" : "ghost"}
                     tooltip="Automatically accept the plan"
                     className={cn(
+                      "transition-colors duration-200",
                       autoAccept
-                        ? "text-secondary"
+                        ? "bg-primary hover:bg-primary/90"
                         : "text-muted-foreground hover:text-foreground",
                     )}
                     onClick={() => setAutoAccept((prev) => !prev)}
diff --git a/apps/web/src/components/v2/diagnose-error-action.tsx b/apps/web/src/components/v2/diagnose-error-action.tsx
index 75098c15..9547ce70 100644
--- a/apps/web/src/components/v2/diagnose-error-action.tsx
+++ b/apps/web/src/components/v2/diagnose-error-action.tsx
@@ -1,13 +1,16 @@
 "use client";
 
 import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
 import {
   AlertTriangle,
   Loader2,
   CheckCircle,
   MessageSquare,
+  ChevronDown,
 } from "lucide-react";
 import { BasicMarkdownText } from "../thread/markdown-text";
+import { cn } from "@/lib/utils";
 
 type DiagnoseErrorActionProps = {
   status: "loading" | "generating" | "done";
@@ -31,7 +34,9 @@ export function DiagnoseErrorAction({
           <Loader2 className="text-muted-foreground size-3.5 animate-spin" />
         );
       case "done":
-        return <CheckCircle className="size-3.5 text-green-500" />;
+        return (
+          <CheckCircle className="size-3.5 text-green-600 dark:text-green-400" />
+        );
     }
   };
 
@@ -49,19 +54,36 @@ export function DiagnoseErrorAction({
   return (
     <div className="border-border overflow-hidden rounded-md border">
       {reasoningText && (
-        <div className="border-b border-blue-100 bg-blue-50 p-2 dark:border-blue-800 dark:bg-blue-950">
+        <div className="border-b border-l-4 border-blue-200 border-l-blue-500 bg-blue-50 p-2 dark:border-blue-800/50 dark:border-l-blue-400 dark:bg-blue-950/20">
           <button
             onClick={() => setShowReasoning(!showReasoning)}
-            className="flex items-center gap-1 text-xs font-normal text-blue-700 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+            className="flex cursor-pointer items-center gap-1.5 text-xs font-medium text-blue-700 transition-colors duration-200 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-200"
           >
-            <MessageSquare className="h-3 w-3" />
-            {showReasoning ? "Hide reasoning" : "Show reasoning"}
+            <ChevronDown
+              className={cn(
+                "h-3 w-3 transition-transform duration-200",
+                showReasoning && "rotate-180",
+              )}
+            />
+            <span>{showReasoning ? "Hide reasoning" : "Show reasoning"}</span>
           </button>
-          {showReasoning && (
-            <BasicMarkdownText className="mt-1 text-xs font-normal text-blue-800 dark:text-blue-300">
-              {reasoningText}
-            </BasicMarkdownText>
-          )}
+          <AnimatePresence>
+            {showReasoning && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: "auto", opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.2, ease: "easeInOut" }}
+                className="overflow-hidden"
+              >
+                <div className="mt-3 rounded-md bg-blue-50/50 px-3 py-2 dark:bg-blue-900/20">
+                  <BasicMarkdownText className="text-xs leading-relaxed text-blue-800 dark:text-blue-200">
+                    {reasoningText}
+                  </BasicMarkdownText>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
         </div>
       )}
 
diff --git a/apps/web/src/components/v2/manager-chat.tsx b/apps/web/src/components/v2/manager-chat.tsx
index 84895ae5..f856d217 100644
--- a/apps/web/src/components/v2/manager-chat.tsx
+++ b/apps/web/src/components/v2/manager-chat.tsx
@@ -5,15 +5,7 @@ import { useState } from "react";
 import { StickToBottom } from "use-stick-to-bottom";
 import { TooltipIconButton } from "../ui/tooltip-icon-button";
 import { AnimatePresence, motion } from "framer-motion";
-import {
-  Bot,
-  Copy,
-  CopyCheck,
-  Send,
-  User,
-  Loader2,
-  AlertCircle,
-} from "lucide-react";
+import { Bot, Copy, CopyCheck, ArrowUp, User, AlertCircle } from "lucide-react";
 import { Textarea } from "../ui/textarea";
 import { Button } from "../ui/button";
 import { cn } from "@/lib/utils";
@@ -21,6 +13,7 @@ import { isAIMessageSDK } from "@/lib/langchain-messages";
 import { BasicMarkdownText } from "../thread/markdown-text";
 import { ErrorState } from "./types";
 import { CollapsibleAlert } from "./collapsible-alert";
+import { Loader2 } from "lucide-react";
 
 function MessageCopyButton({ content }: { content: string }) {
   const [copied, setCopied] = useState(false);
@@ -102,7 +95,7 @@ export function ManagerChat({
   errorState,
 }: ManagerChatProps) {
   return (
-    <div className="border-border bg-muted/30 flex h-full w-1/3 flex-col border-r dark:bg-gray-950">
+    <div className="border-border bg-muted/30 flex h-full w-1/3 flex-col border-r">
       <div className="relative flex-1">
         <StickToBottom
           className="absolute inset-0"
@@ -119,16 +112,16 @@ export function ManagerChat({
                   return (
                     <div
                       key={message.id}
-                      className="group flex gap-3"
+                      className="group bg-muted flex gap-3 rounded-lg p-3"
                     >
                       <div className="flex-shrink-0">
                         {message.type === "human" ? (
-                          <div className="bg-muted flex h-6 w-6 items-center justify-center rounded-full dark:bg-gray-700">
+                          <div className="bg-muted flex h-6 w-6 items-center justify-center rounded-full">
                             <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-100 dark:bg-blue-900">
-                            <Bot className="h-3 w-3 text-blue-700 dark:text-blue-400" />
+                          <div className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-950/50">
+                            <Bot className="h-3 w-3 text-blue-700 dark:text-blue-300" />
                           </div>
                         )}
                       </div>
@@ -166,13 +159,13 @@ export function ManagerChat({
         </StickToBottom>
       </div>
 
-      <div className="border-border bg-muted/30 border-t p-4 dark:bg-gray-950">
+      <div className="border-border bg-muted/30 border-t p-4">
         <div className="flex gap-2">
           <Textarea
             value={chatInput}
             onChange={(e) => setChatInput(e.target.value)}
             placeholder="Type your message..."
-            className="border-border bg-background text-foreground placeholder:text-muted-foreground min-h-[60px] flex-1 resize-none text-sm dark:bg-gray-900"
+            className="border-border bg-background text-foreground placeholder:text-muted-foreground min-h-[60px] flex-1 resize-none text-sm"
             onKeyDown={(e) => {
               if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && !isLoading) {
                 e.preventDefault();
@@ -180,22 +173,26 @@ export function ManagerChat({
               }
             }}
           />
-          <Button
-            onClick={isLoading ? cancelRun : handleSendMessage}
-            disabled={isLoading ? false : !chatInput.trim()}
-            size={isLoading ? "sm" : "icon"}
-            variant={isLoading ? "destructive" : "brand"}
-            className={cn(isLoading ? "h-12 px-4 py-2" : "")}
-          >
-            {isLoading ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Cancel
-              </>
-            ) : (
-              <Send className="size-4" />
-            )}
-          </Button>
+          {isLoading ? (
+            <TooltipIconButton
+              className="size-8 rounded-full border border-white/20 transition-all duration-200 hover:border-white/30 disabled:border-transparent"
+              variant="destructive"
+              onClick={cancelRun}
+              tooltip="Cancel run"
+            >
+              <Loader2 className="size-4 animate-spin" />
+            </TooltipIconButton>
+          ) : (
+            <Button
+              onClick={handleSendMessage}
+              disabled={!chatInput.trim()}
+              size="icon"
+              variant="brand"
+              className="size-8 rounded-full border border-white/20 transition-all duration-200 hover:border-white/30 disabled:border-transparent"
+            >
+              <ArrowUp className="size-4" />
+            </Button>
+          )}
         </div>
         <div className="text-muted-foreground mt-2 text-xs">
           Press Cmd+Enter to send
diff --git a/apps/web/src/components/v2/quick-actions.tsx b/apps/web/src/components/v2/quick-actions.tsx
index fedbf974..4e01380a 100644
--- a/apps/web/src/components/v2/quick-actions.tsx
+++ b/apps/web/src/components/v2/quick-actions.tsx
@@ -41,7 +41,7 @@ function DevReadmePromptQuickAction({
   return (
     <Card
       onClick={() => setQuickActionPrompt(DEV_README_PROMPT)}
-      className="border-border bg-card hover:bg-muted cursor-pointer py-3 transition-shadow hover:shadow-lg dark:bg-gray-950"
+      className="border-border bg-card hover:bg-muted/30 dark:hover:bg-muted/20 hover:shadow-primary/2 cursor-pointer py-3 transition-all duration-200 hover:shadow-sm"
     >
       <CardHeader className="px-3">
         <CardTitle className="text-foreground text-sm">
@@ -71,7 +71,7 @@ export function QuickActions({ setQuickActionPrompt }: QuickActionsProps) {
         />
         <Card
           onClick={() => setQuickActionPrompt(GENERATE_RULES_PROMPT)}
-          className="border-border bg-card hover:bg-muted cursor-pointer py-3 transition-shadow hover:shadow-lg dark:bg-gray-950"
+          className="border-border bg-card hover:bg-muted/30 dark:hover:bg-muted/20 hover:shadow-primary/2 cursor-pointer py-3 transition-all duration-200 hover:shadow-sm"
         >
           <CardHeader className="px-3">
             <CardTitle className="text-foreground text-sm">
diff --git a/apps/web/src/components/v2/terminal-input.tsx b/apps/web/src/components/v2/terminal-input.tsx
index 8874a249..ec20077c 100644
--- a/apps/web/src/components/v2/terminal-input.tsx
+++ b/apps/web/src/components/v2/terminal-input.tsx
@@ -4,11 +4,10 @@ import type React from "react";
 import { v4 as uuidv4 } from "uuid";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { Textarea } from "@/components/ui/textarea";
-import { Loader2, Send } from "lucide-react";
+import { ArrowUp, Loader2 } from "lucide-react";
 import { RepositoryBranchSelectors } from "../github/repo-branch-selectors";
 import { Button } from "../ui/button";
 import { useStream } from "@langchain/langgraph-sdk/react";
-import { StreamMode } from "@langchain/langgraph-sdk";
 import { useRouter } from "next/navigation";
 import { useGitHubAppProvider } from "@/providers/GitHubApp";
 import { GraphState } from "@open-swe/shared/open-swe/types";
@@ -18,7 +17,6 @@ import { DEFAULT_CONFIG_KEY, useConfigStore } from "@/hooks/useConfigStore";
 import {
   API_KEY_REQUIRED_MESSAGE,
   MANAGER_GRAPH_ID,
-  OPEN_SWE_STREAM_MODE,
 } from "@open-swe/shared/constants";
 import { ManagerGraphUpdate } from "@open-swe/shared/open-swe/manager/types";
 import { useDraftStorage } from "@/hooks/useDraftStorage";
@@ -106,7 +104,7 @@ export function TerminalInput({
             },
             ifNotExists: "create",
             streamResumable: true,
-            streamMode: OPEN_SWE_STREAM_MODE as StreamMode[],
+            streamMode: ["values", "messages-tuple", "custom"],
           },
         );
 
@@ -172,9 +170,9 @@ export function TerminalInput({
   }, [draftToLoad, setMessage]);
 
   return (
-    <div className="border-border bg-muted rounded-md border p-2 font-mono text-xs dark:bg-black">
+    <div className="border-border bg-muted hover:border-muted-foreground/50 hover:bg-muted/80 focus-within:border-muted-foreground/70 focus-within:bg-muted/80 focus-within:shadow-muted-foreground/20 rounded-md border p-2 font-mono text-xs transition-all duration-200 focus-within:shadow-md">
       <div className="text-foreground flex items-center gap-1">
-        <div className="flex items-center gap-1 rounded-md border border-gray-200 p-1 dark:border-gray-700">
+        <div className="border-border bg-background/50 flex items-center gap-1 rounded-md border p-1 transition-colors duration-200">
           <span className="text-muted-foreground">open-swe</span>
           <span className="text-muted-foreground/70">@</span>
           <span className="text-muted-foreground">github</span>
@@ -191,12 +189,12 @@ export function TerminalInput({
           disabled={disabled || !message.trim() || !selectedRepository}
           size="icon"
           variant="brand"
-          className="ml-auto size-8"
+          className="ml-auto size-8 rounded-full border border-white/20 transition-all duration-200 hover:border-white/30 disabled:border-transparent"
         >
           {loading ? (
-            <Loader2 className="size-4 animate-spin" />
+            <Loader2 className="h-4 w-4 animate-spin" />
           ) : (
-            <Send className="size-4" />
+            <ArrowUp className="size-4" />
           )}
         </Button>
       </div>
@@ -209,7 +207,7 @@ export function TerminalInput({
           onKeyDown={handleKeyPress}
           placeholder={placeholder}
           disabled={disabled}
-          className="text-foreground placeholder:text-muted-foreground max-h-[50vh] min-h-[80px] flex-1 resize-none border-none bg-transparent p-0 font-mono text-xs shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+          className="text-foreground placeholder:text-muted-foreground focus:placeholder:text-muted-foreground/60 max-h-[50vh] min-h-[80px] flex-1 resize-none border-none bg-transparent p-0 font-mono text-xs shadow-none transition-all duration-200 focus-visible:ring-0 focus-visible:ring-offset-0"
           rows={6}
           onPaste={onPaste}
         />
diff --git a/apps/web/src/components/v2/thread-card.tsx b/apps/web/src/components/v2/thread-card.tsx
index b3e7145d..167c13ce 100644
--- a/apps/web/src/components/v2/thread-card.tsx
+++ b/apps/web/src/components/v2/thread-card.tsx
@@ -3,11 +3,11 @@ import {
   CheckCircle,
   GitBranch,
   GitPullRequest,
-  Loader2,
   AlertCircle,
   Pause,
   XCircle,
   Clock,
+  Loader2,
 } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
 import { useRouter } from "next/navigation";
@@ -76,19 +76,19 @@ export function ThreadCard({
   const getStatusColor = (status: ThreadUIStatus) => {
     switch (status) {
       case "running":
-        return "dark:bg-blue-950 bg-blue-100 dark:text-blue-400 text-blue-700";
+        return "bg-blue-100 dark:bg-blue-950/50 text-blue-700 dark:text-blue-300";
       case "completed":
-        return "dark:bg-green-950 bg-green-100 dark:text-green-400 text-green-700";
+        return "bg-green-100 dark:bg-green-950/50 text-green-700 dark:text-green-300";
       case "error":
-        return "dark:bg-red-950 bg-red-100 dark:text-red-400 text-red-700";
+        return "bg-red-100 dark:bg-red-950/50 text-red-700 dark:text-red-300";
       case "paused":
-        return "dark:bg-yellow-950 bg-yellow-100 dark:text-yellow-400 text-yellow-700";
+        return "bg-yellow-100 dark:bg-yellow-950/50 text-yellow-700 dark:text-yellow-300";
       case "failed":
-        return "dark:bg-red-950 bg-red-100 dark:text-red-400 text-red-700";
+        return "bg-red-100 dark:bg-red-950/50 text-red-700 dark:text-red-300";
       case "pending":
-        return "dark:bg-yellow-950 bg-yellow-100 dark:text-yellow-400 text-yellow-700";
+        return "bg-yellow-100 dark:bg-yellow-950/50 text-yellow-700 dark:text-yellow-300";
       default:
-        return "dark:bg-gray-800 bg-gray-200 dark:text-gray-400 text-gray-700";
+        return "bg-gray-200 dark:bg-muted text-gray-700 dark:text-muted-foreground";
     }
   };
 
@@ -129,7 +129,7 @@ export function ThreadCard({
   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"
+      className="border-border bg-card hover:bg-muted/50 hover:shadow-primary/3 hover:border-primary/10 group cursor-pointer px-0 py-3 transition-all duration-200 hover:shadow-md"
       onClick={() => {
         router.push(`/chat/${thread.id}`);
       }}
@@ -137,7 +137,7 @@ export function ThreadCard({
       <CardHeader>
         <div className="flex items-start justify-between gap-2">
           <div className="min-w-0 flex-1">
-            <CardTitle className="text-foreground truncate text-sm">
+            <CardTitle className="text-foreground line-clamp-2 text-sm leading-tight">
               <InlineMarkdownText>{threadTitle}</InlineMarkdownText>
             </CardTitle>
             <div className="mt-1 flex items-center gap-1">
@@ -150,9 +150,9 @@ export function ThreadCard({
           <Badge
             variant="secondary"
             className={cn(
-              "text-xs",
+              "text-xs transition-all duration-300 group-hover:scale-105",
               isStatusLoading
-                ? "bg-gray-200 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
+                ? "dark:bg-muted dark:text-muted-foreground bg-gray-200 text-gray-600"
                 : getStatusColor(displayStatus),
             )}
           >
@@ -160,7 +160,9 @@ export function ThreadCard({
               {isStatusLoading ? (
                 <Loader2 className="h-4 w-4 animate-spin" />
               ) : (
-                getStatusIcon(displayStatus)
+                <div className="transition-transform duration-300 group-hover:rotate-12">
+                  {getStatusIcon(displayStatus)}
+                </div>
               )}
               <span className="capitalize">
                 {isStatusLoading ? "Loading..." : displayStatus}
@@ -187,13 +189,13 @@ export function ThreadCard({
               <Button
                 variant="ghost"
                 size="sm"
-                className="text-muted-foreground hover:text-foreground h-5 w-5 p-0"
+                className="text-muted-foreground hover:text-foreground h-5 w-5 p-0 transition-all duration-200 hover:scale-110 hover:bg-orange-100 dark:hover:bg-orange-950"
                 onClick={(e) => {
                   e.stopPropagation();
                   window.open(thread.githubIssue!.url, "_blank");
                 }}
               >
-                <Bug className="h-3 w-3" />
+                <Bug className="h-3 w-3 transition-colors duration-200" />
               </Button>
             )}
             {thread.pullRequest && (
@@ -201,15 +203,21 @@ export function ThreadCard({
                 variant="ghost"
                 size="sm"
                 className={cn(
-                  "h-5 w-5 p-0 hover:text-gray-300",
+                  "h-5 w-5 p-0 transition-all duration-200 hover:scale-110 hover:text-gray-300",
                   getPRStatusColor(thread.pullRequest.status),
+                  thread.pullRequest.status === "merged" &&
+                    "hover:bg-purple-100 dark:hover:bg-purple-950",
+                  thread.pullRequest.status === "open" &&
+                    "hover:bg-green-100 dark:hover:bg-green-950",
+                  thread.pullRequest.status === "closed" &&
+                    "hover:bg-red-100 dark:hover:bg-red-950",
                 )}
                 onClick={(e) => {
                   e.stopPropagation();
                   window.open(thread.pullRequest!.url, "_blank");
                 }}
               >
-                <GitPullRequest className="h-3 w-3" />
+                <GitPullRequest className="h-3 w-3 transition-colors duration-200" />
               </Button>
             )}
           </div>
@@ -221,7 +229,7 @@ export function ThreadCard({
 
 export function ThreadCardLoading() {
   return (
-    <Card className="border-border bg-card px-0 py-3 dark:bg-gray-950">
+    <Card className="border-border bg-card px-0 py-3">
       <CardHeader>
         <div className="flex items-start justify-between">
           <div className="min-w-0 flex-1">
diff --git a/apps/web/src/components/v2/thread-switcher.tsx b/apps/web/src/components/v2/thread-switcher.tsx
index 6239bdb9..88c34df5 100644
--- a/apps/web/src/components/v2/thread-switcher.tsx
+++ b/apps/web/src/components/v2/thread-switcher.tsx
@@ -47,7 +47,7 @@ export function ThreadSwitcher({
         <Button
           variant="outline"
           size="sm"
-          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"
+          className="border-border bg-card text-muted-foreground hover:bg-muted hover:text-foreground h-7 gap-1 text-xs"
         >
           <Layers3 className="h-3 w-3" />
           <span className="hidden sm:inline">Switch Thread</span>
@@ -55,7 +55,7 @@ export function ThreadSwitcher({
       </SheetTrigger>
       <SheetContent
         side="right"
-        className="border-border bg-background w-80 sm:w-96 dark:border-gray-800 dark:bg-gray-950"
+        className="border-border bg-background w-80 sm:w-96"
       >
         <SheetHeader className="pb-4">
           <SheetTitle className="text-foreground text-base">
@@ -70,7 +70,7 @@ export function ThreadSwitcher({
               router.push("/chat");
               setOpen(false);
             }}
-            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"
+            className="border-border bg-card text-foreground hover:bg-muted h-8 w-full justify-start gap-2 text-xs"
             variant="outline"
           >
             <Plus className="h-3 w-3" />
@@ -79,7 +79,7 @@ export function ThreadSwitcher({
 
           {/* Current Thread */}
           <div className="space-y-2">
-            <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase dark:text-gray-500">
+            <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
               Current Thread
             </h3>
             <ThreadCard thread={currentThread} />
@@ -88,7 +88,7 @@ export function ThreadSwitcher({
           {/* Other Threads */}
           {otherThreads.length > 0 && (
             <div className="h-full space-y-2">
-              <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase dark:text-gray-500">
+              <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
                 Other Threads
               </h3>
               <ScrollArea className="h-full">
diff --git a/apps/web/src/components/v2/thread-view-loading.tsx b/apps/web/src/components/v2/thread-view-loading.tsx
index 321fb72e..8a4601a8 100644
--- a/apps/web/src/components/v2/thread-view-loading.tsx
+++ b/apps/web/src/components/v2/thread-view-loading.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Card, CardHeader } from "@/components/ui/card";
 import { ArrowLeft, Loader2 } from "lucide-react";
 
 interface ThreadViewLoadingProps {
@@ -18,35 +18,35 @@ export function LoadingActionsCardContent() {
       {Array.from({ length: 8 }, (_, i) => (
         <div
           key={i}
-          className="border-border bg-muted/30 space-y-2 rounded-lg border p-3 dark:bg-gray-900"
+          className="border-border bg-muted/30 space-y-2 rounded-lg border p-3"
         >
           {isEven(i) ? (
-            <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 className="bg-background space-y-1 rounded p-2">
+              <div className="bg-muted h-2 w-32 animate-pulse rounded"></div>
+              <div className="bg-muted h-2 w-48 animate-pulse rounded"></div>
             </div>
           ) : (
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <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 className="bg-muted h-4 w-4 animate-pulse rounded"></div>
+                <div className="bg-muted h-3 w-40 animate-pulse rounded"></div>
               </div>
               <div className="flex items-center gap-2">
-                <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 className="bg-muted h-3 w-16 animate-pulse rounded"></div>
+                <div className="bg-muted h-4 w-4 animate-pulse rounded"></div>
               </div>
             </div>
           )}
         </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 className="bg-muted h-12 animate-pulse rounded"></div>
+        <div className="bg-muted h-7 w-16 animate-pulse rounded"></div>
       </div>
 
       <div className="flex gap-2 pt-3">
-        <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 className="bg-muted h-8 flex-1 animate-pulse rounded"></div>
+        <div className="bg-muted h-8 flex-1 animate-pulse rounded"></div>
       </div>
     </div>
   );
@@ -54,12 +54,12 @@ export function LoadingActionsCardContent() {
 
 export function LoadingActionsCard() {
   return (
-    <Card className="border-border bg-card dark:bg-gray-950">
+    <Card className="border-border bg-card">
       <CardHeader className="p-3">
         <div className="flex items-center gap-2">
-          <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="text-muted-foreground h-3 w-3 animate-spin" />
+          <div className="bg-muted h-4 w-32 animate-pulse rounded"></div>
+          <div className="ml-auto flex items-center gap-2">
+            <Loader2 className="h-3 w-3 animate-spin" />
             <span className="text-muted-foreground text-xs">
               Loading actions...
             </span>
@@ -77,7 +77,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="text-muted-foreground flex items-center gap-2">
+        <div className="text-muted-foreground flex items-center gap-3">
           <Loader2 className="h-4 w-4 animate-spin" />
           <span className="text-sm">Loading conversation...</span>
         </div>
@@ -89,18 +89,18 @@ export function LoadingChatSection() {
           className="flex gap-3"
         >
           <div className="flex-shrink-0">
-            <div className="bg-muted h-6 w-6 animate-pulse rounded-full dark:bg-gray-700"></div>
+            <div className="bg-muted h-6 w-6 animate-pulse rounded-full"></div>
           </div>
           <div className="flex-1 space-y-2">
             <div className="flex items-center gap-2">
-              <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 className="bg-muted h-3 w-16 animate-pulse rounded"></div>
+              <div className="bg-muted h-3 w-12 animate-pulse rounded"></div>
             </div>
             <div className="space-y-1">
-              <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>
+              <div className="bg-muted h-3 w-full animate-pulse rounded"></div>
+              <div className="bg-muted h-3 w-3/4 animate-pulse rounded"></div>
               {i === 1 && (
-                <div className="bg-muted h-3 w-1/2 animate-pulse rounded dark:bg-gray-700"></div>
+                <div className="bg-muted h-3 w-1/2 animate-pulse rounded"></div>
               )}
             </div>
           </div>
@@ -124,30 +124,30 @@ export function ThreadViewLoading({ onBackToHome }: ThreadViewLoadingProps) {
             <ArrowLeft className="h-3 w-3" />
           </Button>
           <div className="flex min-w-0 flex-1 items-center gap-2">
-            <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>
+            <div className="bg-muted h-2 w-2 animate-pulse rounded-full"></div>
+            <div className="bg-muted h-3 w-48 animate-pulse rounded"></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 className="bg-muted h-3 w-24 animate-pulse rounded"></div>
           </div>
-          <div className="bg-muted/70 h-7 w-28 animate-pulse rounded dark:bg-gray-800"></div>
+          <div className="bg-muted/70 h-7 w-28 animate-pulse rounded"></div>
         </div>
       </div>
 
       <div className="flex h-full w-full pt-12">
-        <div className="border-border bg-muted/30 flex h-full w-1/3 flex-col border-r dark:bg-gray-950">
+        <div className="border-border bg-muted/30 flex h-full w-1/3 flex-col border-r">
           <LoadingChatSection />
 
-          <div className="border-border bg-muted/30 border-t p-4 dark:bg-gray-950">
+          <div className="border-border bg-muted/30 border-t p-4">
             <div className="flex gap-2">
-              <div className="border-border bg-background flex-1 rounded-md border p-3 dark:bg-gray-900">
+              <div className="border-border bg-background flex-1 rounded-md border p-3">
                 <div className="space-y-2">
-                  <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 className="bg-muted h-3 w-1/3 animate-pulse rounded"></div>
+                  <div className="bg-muted h-3 w-1/2 animate-pulse rounded"></div>
                 </div>
               </div>
-              <div className="bg-muted h-10 w-10 animate-pulse self-end rounded dark:bg-gray-700"></div>
+              <div className="bg-muted h-10 w-10 animate-pulse self-end rounded"></div>
             </div>
-            <div className="bg-muted mt-2 h-3 w-32 animate-pulse rounded dark:bg-gray-700"></div>
+            <div className="bg-muted mt-2 h-3 w-32 animate-pulse rounded"></div>
           </div>
         </div>
 
diff --git a/apps/web/src/components/v2/thread-view.tsx b/apps/web/src/components/v2/thread-view.tsx
index 044546e8..f47aa535 100644
--- a/apps/web/src/components/v2/thread-view.tsx
+++ b/apps/web/src/components/v2/thread-view.tsx
@@ -346,7 +346,7 @@ export function ThreadView({
               }
             >
               <div className="flex flex-shrink-0 items-center gap-3">
-                <TabsList className="bg-muted/70 dark:bg-gray-800">
+                <TabsList className="bg-muted/70">
                   <TabsTrigger value="planner">Planner</TabsTrigger>
                   <TabsTrigger value="programmer">Programmer</TabsTrigger>
                 </TabsList>
@@ -390,7 +390,7 @@ export function ThreadView({
                 value="planner"
                 className="mb-2"
               >
-                <Card className="border-border bg-card relative h-full p-0 dark:bg-gray-950">
+                <Card className="border-border bg-card relative h-full p-0">
                   <CardContent className="h-full p-0">
                     <StickToBottom
                       className="absolute inset-0 h-full"
@@ -403,7 +403,6 @@ export function ThreadView({
                             {plannerSession ? (
                               <div className="scrollbar-pretty-auto overflow-y-auto px-2">
                                 <ActionsRenderer<PlannerGraphState>
-                                  taskPlan={programmerTaskPlan}
                                   runId={plannerSession.runId}
                                   customNodeEvents={customPlannerNodeEvents}
                                   setCustomNodeEvents={
@@ -437,7 +436,7 @@ export function ThreadView({
                 value="programmer"
                 className="mb-2"
               >
-                <Card className="border-border bg-card relative h-full p-0 dark:bg-gray-950">
+                <Card className="border-border bg-card relative h-full p-0">
                   <CardContent className="h-full p-0">
                     <StickToBottom
                       className="absolute inset-0 h-full"