diff --git a/components/AtlasChat.tsx b/components/AtlasChat.tsx
index 26c11c9..8345df1 100644
--- a/components/AtlasChat.tsx
+++ b/components/AtlasChat.tsx
@@ -8,7 +8,7 @@ import {
 } from "@assistant-ui/react";
 import { Thread } from "@/components/assistant-ui/thread";
 import { Button } from "@/components/ui/button";
-import { FileText, RotateCcw } from "lucide-react";
+import { RotateCcw } from "lucide-react";
 
 // ---------------------------------------------------------------------------
 // Props
@@ -91,29 +91,18 @@ function AtlasChatInner({
   };
 
   return (
-    <div className="flex flex-col rounded-2xl border border-border/60 bg-card shadow-sm overflow-hidden" style={{ height: "520px" }}>
-      {/* Header */}
-      <div className="flex items-center justify-between px-5 py-3.5 border-b border-border/60 bg-gradient-to-r from-violet-50/80 to-indigo-50/50 dark:from-violet-950/30 dark:to-indigo-950/20 shrink-0">
-        <div className="flex items-center gap-3">
-          <div className="w-7 h-7 rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center text-white text-xs font-bold shadow-sm">
-            A
-          </div>
-          <div>
-            <p className="text-sm font-semibold text-foreground">Atlas</p>
-            <p className="text-xs text-muted-foreground">Product Requirements</p>
-          </div>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={handleReset}
-            className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
-            title="Start over"
-          >
-            <RotateCcw className="w-3.5 h-3.5" />
-          </Button>
-        </div>
+    <div className="flex flex-col rounded-2xl overflow-hidden bg-[#fdfdfd] dark:bg-[#141414] ring-1 ring-[#e5e5e5] dark:ring-[#2a2a2a]" style={{ height: "600px" }}>
+      {/* Minimal header bar */}
+      <div className="flex items-center justify-end px-4 py-2.5 shrink-0 border-b border-[#e5e5e5] dark:border-[#2a2a2a]">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleReset}
+          className="h-7 w-7 p-0 text-[#9a9a9a] dark:text-[#6b6b6b] hover:text-[#0d0d0d] dark:hover:text-white"
+          title="Start over"
+        >
+          <RotateCcw className="w-3.5 h-3.5" />
+        </Button>
       </div>
 
       {/* Thread */}
diff --git a/components/assistant-ui/thread.tsx b/components/assistant-ui/thread.tsx
index 3b7504d..2b8bfdc 100644
--- a/components/assistant-ui/thread.tsx
+++ b/components/assistant-ui/thread.tsx
@@ -19,28 +19,44 @@ import {
 } from "lucide-react";
 import type { FC } from "react";
 import { MarkdownText } from "./markdown-text";
-import { cn } from "@/lib/utils";
 
 // ---------------------------------------------------------------------------
-// Thread root
+// Thread root — Grok-style layout
+// When empty: logo + composer centered. When not empty: viewport + composer bottom.
 // ---------------------------------------------------------------------------
 
 export const Thread: FC = () => (
-  <ThreadPrimitive.Root className="flex flex-col h-full">
-    <ThreadPrimitive.Viewport className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
-      <ThreadPrimitive.Empty>
-        <ThreadWelcome />
-      </ThreadPrimitive.Empty>
+  <ThreadPrimitive.Root className="flex flex-col h-full bg-[#fdfdfd] dark:bg-[#141414] px-4">
 
+    {/* Empty state: centered welcome + composer */}
+    <ThreadPrimitive.Empty>
+      <div className="flex h-full flex-col items-center justify-center gap-6">
+        <div className="flex flex-col items-center gap-2 text-center">
+          <div className="w-10 h-10 rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center text-white font-bold text-base shadow-sm">
+            A
+          </div>
+          <p className="text-sm font-medium text-[#0d0d0d] dark:text-white">Atlas</p>
+          <p className="text-xs text-[#9a9a9a] dark:text-[#6b6b6b] max-w-xs">
+            Your product strategist. Let&apos;s define what you&apos;re building.
+          </p>
+        </div>
+        <div className="w-full max-w-2xl">
+          <Composer />
+        </div>
+      </div>
+    </ThreadPrimitive.Empty>
+
+    {/* Messages viewport */}
+    <ThreadPrimitive.Viewport className="flex-1 overflow-y-auto py-6 space-y-6">
       <ThreadPrimitive.Messages
         components={{ UserMessage, AssistantMessage }}
       />
-
       <ThreadPrimitive.Suggestions
         components={{ Suggestion: FollowupSuggestion }}
       />
     </ThreadPrimitive.Viewport>
 
+    {/* Scroll to bottom */}
     <div className="relative">
       <ThreadScrollToBottom />
       <Composer />
@@ -54,26 +70,43 @@ export const Thread: FC = () => (
 
 const ThreadScrollToBottom: FC = () => (
   <ThreadPrimitive.ScrollToBottom asChild>
-    <button className="absolute -top-10 right-4 flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background shadow-sm hover:bg-accent transition-colors">
+    <button className="absolute -top-10 right-4 flex h-8 w-8 items-center justify-center rounded-full bg-[#0d0d0d] dark:bg-white text-white dark:text-[#0d0d0d] shadow hover:opacity-80 transition-opacity">
       <ArrowDownIcon className="h-3.5 w-3.5" />
     </button>
   </ThreadPrimitive.ScrollToBottom>
 );
 
 // ---------------------------------------------------------------------------
-// Welcome screen (shown when thread is empty)
+// Composer — Grok pill style with inverted send button
 // ---------------------------------------------------------------------------
 
-const ThreadWelcome: FC = () => (
-  <div className="flex flex-col items-center justify-center py-8 text-center gap-2">
-    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center text-white font-bold text-lg shadow-sm">
-      A
+const Composer: FC = () => (
+  <ComposerPrimitive.Root className="group/composer mx-auto w-full max-w-2xl mb-3">
+    <div className="flex items-end gap-2 rounded-[26px] bg-[#f8f8f8] dark:bg-[#212121] ring-1 ring-[#e5e5e5] dark:ring-[#2a2a2a] px-4 py-3 transition-shadow focus-within:ring-[#c5c5c5] dark:focus-within:ring-[#3a3a3a]">
+      <ComposerPrimitive.Input
+        placeholder="What do you want to build?"
+        rows={1}
+        autoFocus
+        className="flex-1 resize-none bg-transparent text-[#0d0d0d] dark:text-white placeholder:text-[#9a9a9a] dark:placeholder:text-[#6b6b6b] text-sm leading-relaxed outline-none min-h-[24px] max-h-[120px]"
+      />
+      {/* Send button (hidden while running) */}
+      <ThreadPrimitive.If running={false}>
+        <ComposerPrimitive.Send asChild>
+          <button className="h-8 w-8 rounded-full bg-[#0d0d0d] dark:bg-white text-white dark:text-[#0d0d0d] flex items-center justify-center shrink-0 hover:opacity-80 transition-opacity disabled:opacity-30 disabled:cursor-not-allowed">
+            <ArrowUpIcon className="h-3.5 w-3.5" />
+          </button>
+        </ComposerPrimitive.Send>
+      </ThreadPrimitive.If>
+      {/* Cancel button (shown while running) */}
+      <ThreadPrimitive.If running>
+        <ComposerPrimitive.Cancel asChild>
+          <button className="h-8 w-8 rounded-full bg-[#0d0d0d] dark:bg-white text-white dark:text-[#0d0d0d] flex items-center justify-center shrink-0 hover:opacity-80 transition-opacity">
+            <SquareIcon className="h-3 w-3 fill-current" />
+          </button>
+        </ComposerPrimitive.Cancel>
+      </ThreadPrimitive.If>
     </div>
-    <p className="text-sm font-medium text-foreground">Atlas</p>
-    <p className="text-xs text-muted-foreground max-w-xs">
-      Your product requirements guide. Let's define what you're building.
-    </p>
-  </div>
+  </ComposerPrimitive.Root>
 );
 
 // ---------------------------------------------------------------------------
@@ -82,58 +115,27 @@ const ThreadWelcome: FC = () => (
 
 const FollowupSuggestion: FC<{ suggestion: { prompt: string } }> = ({ suggestion }) => (
   <ThreadPrimitive.Suggestion prompt={suggestion.prompt} send asChild>
-    <button className="text-xs px-3 py-1.5 rounded-full border border-violet-200 dark:border-violet-800 text-violet-700 dark:text-violet-300 hover:bg-violet-50 dark:hover:bg-violet-950/40 transition-colors">
+    <button className="text-xs px-3 py-1.5 rounded-full ring-1 ring-[#e5e5e5] dark:ring-[#2a2a2a] text-[#9a9a9a] dark:text-[#6b6b6b] hover:ring-[#c5c5c5] dark:hover:ring-[#3a3a3a] hover:text-[#0d0d0d] dark:hover:text-white transition-all">
       {suggestion.prompt}
     </button>
   </ThreadPrimitive.Suggestion>
 );
 
 // ---------------------------------------------------------------------------
-// Composer (input area)
-// ---------------------------------------------------------------------------
-
-const Composer: FC = () => (
-  <ComposerPrimitive.Root className="flex items-end gap-2 px-4 py-3 border-t border-border/60 bg-muted/20">
-    <ComposerPrimitive.Input
-      placeholder="Reply to Atlas…"
-      rows={1}
-      autoFocus
-      className="flex-1 resize-none bg-background border border-border/60 rounded-xl px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500/30 min-h-[40px] max-h-[120px] leading-relaxed"
-    />
-    <ThreadPrimitive.If running={false}>
-      <ComposerPrimitive.Send asChild>
-        <button className="h-10 w-10 rounded-xl bg-violet-600 hover:bg-violet-700 text-white flex items-center justify-center shrink-0 transition-colors disabled:opacity-40 disabled:cursor-not-allowed">
-          <ArrowUpIcon className="h-4 w-4" />
-        </button>
-      </ComposerPrimitive.Send>
-    </ThreadPrimitive.If>
-    <ThreadPrimitive.If running>
-      <ComposerPrimitive.Cancel asChild>
-        <button className="h-10 w-10 rounded-xl bg-violet-600 hover:bg-violet-700 text-white flex items-center justify-center shrink-0 transition-colors">
-          <SquareIcon className="h-3.5 w-3.5 fill-white" />
-        </button>
-      </ComposerPrimitive.Cancel>
-    </ThreadPrimitive.If>
-  </ComposerPrimitive.Root>
-);
-
-// ---------------------------------------------------------------------------
-// User message
+// User message — subtle right-aligned bubble
 // ---------------------------------------------------------------------------
 
 const UserMessage: FC = () => (
-  <MessagePrimitive.Root className="flex justify-end gap-2 group">
-    <div className="max-w-[82%]">
-      <MessagePrimitive.Content
-        components={{ Text: UserText }}
-      />
+  <MessagePrimitive.Root className="flex justify-end group">
+    <div className="max-w-[72%]">
+      <MessagePrimitive.Content components={{ Text: UserText }} />
       <UserActionBar />
     </div>
   </MessagePrimitive.Root>
 );
 
 const UserText: FC<{ text: string }> = ({ text }) => (
-  <div className="bg-violet-600 text-white rounded-2xl rounded-tr-sm px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap">
+  <div className="bg-[#0d0d0d] dark:bg-white text-white dark:text-[#0d0d0d] rounded-[20px] rounded-tr-[6px] px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap">
     {text}
   </div>
 );
@@ -145,7 +147,7 @@ const UserActionBar: FC = () => (
     className="flex items-center gap-1 mt-1 justify-end opacity-0 group-hover:opacity-100 transition-opacity"
   >
     <ActionBarPrimitive.Edit asChild>
-      <button className="text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-0.5 rounded hover:bg-muted transition-colors">
+      <button className="text-[10px] text-[#9a9a9a] dark:text-[#6b6b6b] hover:text-[#0d0d0d] dark:hover:text-white px-1.5 py-0.5 rounded transition-colors">
         Edit
       </button>
     </ActionBarPrimitive.Edit>
@@ -153,16 +155,16 @@ const UserActionBar: FC = () => (
 );
 
 // ---------------------------------------------------------------------------
-// Assistant message
+// Assistant message — plain text, no bubble, small avatar
 // ---------------------------------------------------------------------------
 
 const AssistantMessage: FC = () => (
-  <MessagePrimitive.Root className="flex justify-start gap-2.5 group">
-    <div className="w-7 h-7 rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center text-white text-xs font-bold shrink-0 mt-0.5 shadow-sm">
+  <MessagePrimitive.Root className="flex justify-start gap-3 group">
+    <div className="w-6 h-6 rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center text-white text-[10px] font-bold shrink-0 mt-1 shadow-sm">
       A
     </div>
-    <div className="max-w-[82%]">
-      <div className="bg-muted/60 rounded-2xl rounded-tl-sm px-4 py-3 text-sm">
+    <div className="flex-1 min-w-0 max-w-[80%]">
+      <div className="text-sm text-[#0d0d0d] dark:text-white leading-relaxed">
         <MessagePrimitive.Content components={{ Text: AssistantText }} />
       </div>
       <AssistantActionBar />
@@ -171,16 +173,18 @@ const AssistantMessage: FC = () => (
   </MessagePrimitive.Root>
 );
 
-const AssistantText: FC = () => <MarkdownText />;
+const AssistantText: FC = () => (
+  <MarkdownText />
+);
 
 const AssistantActionBar: FC = () => (
   <ActionBarPrimitive.Root
     hideWhenRunning
     autohide="not-last"
-    className="flex items-center gap-1 mt-1 opacity-0 group-hover:opacity-100 transition-opacity"
+    className="flex items-center gap-2 mt-1.5 opacity-0 group-hover:opacity-100 transition-opacity"
   >
     <ActionBarPrimitive.Copy asChild>
-      <button className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-0.5 rounded hover:bg-muted transition-colors">
+      <button className="flex items-center gap-1 text-[10px] text-[#9a9a9a] dark:text-[#6b6b6b] hover:text-[#0d0d0d] dark:hover:text-white px-1.5 py-0.5 rounded transition-colors">
         <MessagePrimitive.If copied>
           <CheckIcon className="h-2.5 w-2.5" />
           Copied
@@ -192,7 +196,7 @@ const AssistantActionBar: FC = () => (
       </button>
     </ActionBarPrimitive.Copy>
     <ActionBarPrimitive.Reload asChild>
-      <button className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-0.5 rounded hover:bg-muted transition-colors">
+      <button className="flex items-center gap-1 text-[10px] text-[#9a9a9a] dark:text-[#6b6b6b] hover:text-[#0d0d0d] dark:hover:text-white px-1.5 py-0.5 rounded transition-colors">
         <RefreshCwIcon className="h-2.5 w-2.5" />
         Retry
       </button>
@@ -201,7 +205,7 @@ const AssistantActionBar: FC = () => (
 );
 
 // ---------------------------------------------------------------------------
-// Branch picker (for regenerated responses)
+// Branch picker
 // ---------------------------------------------------------------------------
 
 const BranchPicker: FC = () => (
@@ -210,15 +214,15 @@ const BranchPicker: FC = () => (
     className="flex items-center gap-1 mt-1 opacity-0 group-hover:opacity-100 transition-opacity"
   >
     <BranchPickerPrimitive.Previous asChild>
-      <button className="text-muted-foreground hover:text-foreground transition-colors">
+      <button className="text-[#9a9a9a] dark:text-[#6b6b6b] hover:text-[#0d0d0d] dark:hover:text-white transition-colors">
         <ChevronLeftIcon className="h-3 w-3" />
       </button>
     </BranchPickerPrimitive.Previous>
-    <span className="text-[10px] text-muted-foreground">
+    <span className="text-[10px] text-[#9a9a9a] dark:text-[#6b6b6b]">
       <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
     </span>
     <BranchPickerPrimitive.Next asChild>
-      <button className="text-muted-foreground hover:text-foreground transition-colors">
+      <button className="text-[#9a9a9a] dark:text-[#6b6b6b] hover:text-[#0d0d0d] dark:hover:text-white transition-colors">
         <ChevronRightIcon className="h-3 w-3" />
       </button>
     </BranchPickerPrimitive.Next>