diff --git a/web/src/App.tsx b/web/src/App.tsx
index ecefe3051..6a432d864 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -199,7 +199,7 @@ export default function App() {
         className={`
           fixed inset-y-0 left-0 md:relative md:inset-auto z-40 md:z-auto
           h-full shrink-0 transition-all duration-200 pt-safe md:pt-0
-          ${sidebarOpen ? "w-full md:w-[260px] translate-x-0" : "w-0 -translate-x-full md:w-0 md:-translate-x-full"}
+          ${sidebarOpen ? "w-full md:w-[288px] translate-x-0" : "w-0 -translate-x-full md:w-0 md:-translate-x-full"}
           overflow-hidden
         `}
       >
diff --git a/web/src/components/ChatView.tsx b/web/src/components/ChatView.tsx
index 346224d9a..c3b1e9fcb 100644
--- a/web/src/components/ChatView.tsx
+++ b/web/src/components/ChatView.tsx
@@ -56,10 +56,10 @@ export function ChatView({ sessionId }: { sessionId: string }) {
   const showCliBanner = connStatus === "connected" && !cliConnected;
 
   return (
-    <div className="flex flex-col h-full min-h-0">
+    <div className="flex flex-col h-full min-h-0 bg-cc-bg chat-grain">
       {/* CLI disconnected / reconnecting / error banner */}
       {showCliBanner && (
-        <div className="px-4 py-2.5 bg-gradient-to-r from-cc-warning/8 to-cc-warning/4 border-b border-cc-warning/15 flex items-center justify-center gap-3 animate-[fadeSlideIn_0.3s_ease-out]">
+        <div className="mx-3.5 mt-2.5 px-3.5 py-2 kanna-panel border-cc-warning/20 bg-cc-warning/5 flex items-center justify-center gap-3 animate-[fadeSlideIn_0.3s_ease-out]">
           {reconnectError ? (
             <>
               <span className="w-1.5 h-1.5 rounded-full bg-cc-error shrink-0" />
@@ -99,7 +99,7 @@ export function ChatView({ sessionId }: { sessionId: string }) {
 
       {/* WebSocket disconnected banner */}
       {connStatus === "disconnected" && (
-        <div className="px-4 py-2.5 bg-gradient-to-r from-cc-warning/8 to-cc-warning/4 border-b border-cc-warning/15 flex items-center justify-center gap-2 animate-[fadeSlideIn_0.3s_ease-out]">
+        <div className="mx-3.5 mt-2.5 px-3.5 py-2 kanna-panel border-cc-warning/20 bg-cc-warning/5 flex items-center justify-center gap-2 animate-[fadeSlideIn_0.3s_ease-out]">
           <span className="w-3 h-3 rounded-full border-2 border-cc-warning/30 border-t-cc-warning animate-spin" />
           <span className="text-xs text-cc-warning font-medium">
             Reconnecting to session...
@@ -112,7 +112,7 @@ export function ChatView({ sessionId }: { sessionId: string }) {
 
       {/* AI auto-resolved notification (most recent only) */}
       {aiResolved && aiResolved.length > 0 && (
-        <div className="shrink-0 border-t border-cc-border bg-cc-card">
+        <div className="shrink-0 border-t border-cc-border bg-cc-card/80 backdrop-blur-sm">
           <AiValidationBadge
             entry={aiResolved[aiResolved.length - 1]}
             onDismiss={() => clearAiResolvedPermissions(sessionId)}
@@ -122,7 +122,7 @@ export function ChatView({ sessionId }: { sessionId: string }) {
 
       {/* Permission banners */}
       {perms.length > 0 && (
-        <div className="shrink-0 max-h-[60dvh] overflow-y-auto border-t border-cc-border bg-cc-card">
+        <div className="shrink-0 max-h-[60dvh] overflow-y-auto border-t border-cc-border bg-cc-card/90 backdrop-blur-sm">
           {perms.map((p) => (
             <PermissionBanner key={p.request_id} permission={p} sessionId={sessionId} />
           ))}
diff --git a/web/src/components/Composer.tsx b/web/src/components/Composer.tsx
index d76aa65e5..40fd590c2 100644
--- a/web/src/components/Composer.tsx
+++ b/web/src/components/Composer.tsx
@@ -343,7 +343,7 @@ export function Composer({ sessionId }: { sessionId: string }) {
   const canSend = text.trim().length > 0 && isConnected;
 
   return (
-    <div className="shrink-0 px-0 sm:px-6 pt-0 sm:pt-3 pb-5 sm:pb-4 bg-cc-input-bg sm:bg-transparent">
+    <div className="shrink-0 px-0 sm:px-6 pt-0 sm:pt-3 pb-5 sm:pb-4 bg-cc-input-bg/80 sm:bg-transparent backdrop-blur-sm">
       <div className="max-w-3xl mx-auto">
         {/* Image thumbnails */}
         {images.length > 0 && (
@@ -414,7 +414,7 @@ export function Composer({ sessionId }: { sessionId: string }) {
         )}
 
         {/* Input container: flat separator on mobile, card on desktop */}
-        <div className={`relative overflow-visible transition-all duration-200 border-t border-cc-separator sm:border sm:border-cc-border sm:bg-cc-input-bg/95 sm:rounded-[16px] sm:backdrop-blur-sm composer-card ${
+        <div className={`relative overflow-visible transition-all duration-200 border-t border-cc-separator sm:border sm:border-cc-border sm:bg-cc-input-bg/95 sm:rounded-[14px] sm:backdrop-blur-sm composer-card ${
           isPlan
             ? "sm:border-cc-primary/40 sm:shadow-[0_10px_30px_rgba(217,119,87,0.08)]"
             : "sm:focus-within:border-cc-primary/25"
@@ -423,7 +423,7 @@ export function Composer({ sessionId }: { sessionId: string }) {
           {slashMenuOpen && filteredCommands.length > 0 && (
             <div
               ref={menuRef}
-              className="absolute left-2 right-2 bottom-full mb-1 max-h-[240px] overflow-y-auto bg-cc-card border border-cc-border rounded-[10px] shadow-lg z-20 py-1"
+              className="absolute left-2 right-2 bottom-full mb-1 max-h-[240px] overflow-y-auto bg-cc-card border border-cc-border rounded-[12px] shadow-xl z-20 py-1"
             >
               {filteredCommands.map((cmd, i) => (
                 <button
@@ -468,7 +468,7 @@ export function Composer({ sessionId }: { sessionId: string }) {
           />
 
           {savePromptOpen && (
-            <div className="absolute left-2 right-2 bottom-full mb-1 bg-cc-card border border-cc-border rounded-[10px] shadow-lg z-20 p-3 space-y-2">
+            <div className="absolute left-2 right-2 bottom-full mb-1 bg-cc-card border border-cc-border rounded-[12px] shadow-xl z-20 p-3 space-y-2">
               <div className="text-xs font-semibold text-cc-fg">Save prompt</div>
               <input
                 value={savePromptName}
@@ -611,7 +611,7 @@ export function Composer({ sessionId }: { sessionId: string }) {
           </div>
 
           {/* Textarea row */}
-          <div className="px-3 sm:px-3 pt-1 sm:pt-2.5">
+          <div className="px-3 sm:px-3 pt-1.5 sm:pt-2.5">
             <textarea
               ref={textareaRef}
               value={text}
@@ -626,7 +626,7 @@ export function Composer({ sessionId }: { sessionId: string }) {
                 : "Waiting for CLI connection..."}
               disabled={!isConnected}
               rows={1}
-              className="w-full px-1 py-1.5 text-base sm:text-sm bg-transparent resize-none outline-none text-cc-fg font-sans-ui placeholder:text-cc-muted disabled:opacity-50 overflow-y-auto"
+              className="w-full px-1 py-1.5 text-base sm:text-sm bg-transparent resize-none outline-none text-cc-fg font-sans-ui placeholder:text-cc-muted disabled:opacity-50 overflow-y-auto leading-relaxed"
               style={{ minHeight: "36px", maxHeight: "200px" }}
             />
           </div>
@@ -663,7 +663,7 @@ export function Composer({ sessionId }: { sessionId: string }) {
           </div>
 
           {/* Desktop action bar: + bookmark mode spacer model send (hidden on mobile) */}
-          <div className="hidden sm:flex items-center gap-1.5 px-2.5 pb-2">
+          <div className="hidden sm:flex items-center gap-1.5 px-2.5 pb-2.5 border-t border-cc-border/70">
             {/* + button (image upload) */}
             <button
               onClick={() => fileInputRef.current?.click()}
diff --git a/web/src/components/MessageBubble.tsx b/web/src/components/MessageBubble.tsx
index 7493e5aaa..27001aea5 100644
--- a/web/src/components/MessageBubble.tsx
+++ b/web/src/components/MessageBubble.tsx
@@ -7,9 +7,9 @@ import { ToolBlock, getToolIcon, getToolLabel, getPreview, ToolIcon } from "./To
 export function MessageBubble({ message }: { message: ChatMessage }) {
   if (message.role === "system") {
     return (
-      <div className="flex items-center gap-3 py-1 min-w-0">
+      <div className="flex items-center gap-3 py-2 min-w-0">
         <div className="shrink-0 flex-1 h-px bg-cc-border" />
-        <span className="text-[11px] text-cc-muted italic font-mono-code px-1 min-w-0 break-words text-center">
+        <span className="text-[11px] text-cc-muted italic font-mono-code px-2 min-w-0 break-words text-center tracking-wide">
           {message.content}
         </span>
         <div className="shrink-0 flex-1 h-px bg-cc-border" />
@@ -20,7 +20,7 @@ export function MessageBubble({ message }: { message: ChatMessage }) {
   if (message.role === "user") {
     return (
       <div className="flex justify-end animate-[userSlideIn_0.3s_ease-out]">
-        <div className="max-w-[85%] sm:max-w-[80%] px-3.5 sm:px-4 py-2.5 rounded-[16px] rounded-br-[6px] user-bubble-gradient text-cc-fg shadow-[0_1px_3px_rgba(0,0,0,0.04)]">
+        <div className="max-w-[85%] sm:max-w-[76%] px-3.5 sm:px-4 py-2.5 rounded-[14px] rounded-br-[5px] user-bubble-gradient text-cc-fg border border-cc-border/50 shadow-[0_4px_16px_rgba(20,25,36,0.08)]">
           {message.images && message.images.length > 0 && (
             <div className="flex gap-2 flex-wrap mb-2">
               {message.images.map((img, i) => (
@@ -43,7 +43,7 @@ export function MessageBubble({ message }: { message: ChatMessage }) {
 
   // Assistant message
   return (
-    <div className="animate-[fadeSlideIn_0.3s_ease-out]">
+    <div className="animate-[fadeSlideIn_0.3s_ease-out] py-0.5">
       <AssistantMessage message={message} />
     </div>
   );
@@ -144,8 +144,8 @@ function AssistantAvatar() {
   return (
     <div className="w-6 h-6 rounded-full avatar-ring flex items-center justify-center shrink-0 mt-0.5">
       <div className="avatar-inner w-full h-full rounded-full flex items-center justify-center">
-        <svg viewBox="0 0 16 16" fill="currentColor" className="w-3 h-3 text-cc-primary">
-          <path d="M8 2L10.5 6.5L15 8L10.5 9.5L8 14L5.5 9.5L1 8L5.5 6.5L8 2Z" />
+        <svg viewBox="0 0 16 16" fill="currentColor" className="w-3.5 h-3.5 text-cc-primary">
+          <path d="M8 2.2l1.9 3.8L14 7l-3 2.9.7 4.1L8 12.2 4.3 14l.7-4.1L2 7l4.1-1L8 2.2z" />
         </svg>
       </div>
     </div>
@@ -154,7 +154,7 @@ function AssistantAvatar() {
 
 function MarkdownContent({ text, showCursor = false }: { text: string; showCursor?: boolean }) {
   return (
-    <div className="markdown-body text-[14px] sm:text-[15px] text-cc-fg leading-relaxed overflow-hidden">
+    <div className="markdown-body text-[14px] sm:text-[15px] text-cc-fg/95 leading-relaxed overflow-hidden">
       <Markdown
         remarkPlugins={[remarkGfm]}
         components={{
@@ -391,7 +391,7 @@ function ThinkingBlock({ text }: { text: string }) {
 
   return (
     <div>
-      <div className="markdown-body text-[13px] text-cc-fg/40 leading-relaxed italic">
+      <div className="markdown-body text-[13px] text-cc-fg/55 leading-relaxed italic">
         <Markdown
           remarkPlugins={[remarkGfm]}
           components={{
@@ -400,7 +400,7 @@ function ThinkingBlock({ text }: { text: string }) {
             ol: ({ children }) => <ol className="list-decimal pl-4 mb-2 space-y-0.5">{children}</ol>,
             li: ({ children }) => <li>{children}</li>,
             code: ({ children }) => (
-              <code className="px-1 py-0.5 rounded bg-cc-fg/[0.03] text-cc-fg/40 font-mono-code text-[12px] not-italic">
+              <code className="px-1 py-0.5 rounded bg-cc-fg/[0.03] text-cc-fg/55 font-mono-code text-[12px] not-italic">
                 {children}
               </code>
             ),
@@ -412,7 +412,7 @@ function ThinkingBlock({ text }: { text: string }) {
       {isLong && !expanded && (
         <button
           onClick={() => setExpanded(true)}
-          className="text-[11px] text-cc-muted/40 hover:text-cc-muted/70 cursor-pointer transition-colors"
+          className="text-[11px] text-cc-muted/60 hover:text-cc-muted/85 cursor-pointer transition-colors"
         >
           Show more
         </button>
diff --git a/web/src/components/MessageFeed.tsx b/web/src/components/MessageFeed.tsx
index 83f5dee4d..3193b9ab9 100644
--- a/web/src/components/MessageFeed.tsx
+++ b/web/src/components/MessageFeed.tsx
@@ -916,13 +916,13 @@ export function MessageFeed({ sessionId }: { sessionId: string }) {
   return (
     <div className="flex-1 min-h-0 relative overflow-hidden">
       {/* Top fade — softens the scroll edge under the top bar */}
-      <div className="pointer-events-none absolute top-0 inset-x-0 h-6 bg-gradient-to-b from-cc-bg to-transparent z-10" />
+      <div className="pointer-events-none absolute top-0 inset-x-0 h-7 bg-gradient-to-b from-cc-bg to-transparent z-10" />
       <div
         ref={containerRef}
         onScroll={handleScroll}
-        className="h-full overflow-y-auto overflow-x-hidden overscroll-y-contain px-4 sm:px-6 py-5 sm:py-8"
+        className="h-full overflow-y-auto overflow-x-hidden overscroll-y-contain px-3.5 sm:px-5 py-4 sm:py-5"
       >
-        <div className="max-w-3xl mx-auto space-y-5 sm:space-y-7">
+        <div className="max-w-[860px] mx-auto space-y-4 sm:space-y-[18px]">
           {canLoadResumeHistory && !resumeHistoryLoaded && (
             <div className="rounded-xl border border-cc-border bg-cc-card p-3">
               <div className="flex items-center justify-between gap-3">
diff --git a/web/src/components/ProjectGroup.tsx b/web/src/components/ProjectGroup.tsx
index b3ba652b4..f643f278a 100644
--- a/web/src/components/ProjectGroup.tsx
+++ b/web/src/components/ProjectGroup.tsx
@@ -56,12 +56,12 @@ export function ProjectGroup({
     : "";
 
   return (
-    <div className={!isFirst ? "mt-3 pt-3 border-t border-cc-separator" : ""}>
+    <div className={!isFirst ? "mt-2.5 pt-2.5 border-t border-cc-separator/70" : ""}>
       {/* Group header */}
       <button
         onClick={() => onToggleCollapse(group.key)}
         aria-expanded={!isCollapsed}
-        className="w-full px-2 py-1 flex items-center gap-1.5 hover:bg-cc-hover rounded-md transition-colors cursor-pointer group/header"
+        className="w-full px-2.5 py-[5px] flex items-center gap-1.5 hover:bg-cc-hover rounded-lg transition-colors cursor-pointer group/header"
       >
         <svg
           viewBox="0 0 16 16"
@@ -70,7 +70,7 @@ export function ProjectGroup({
         >
           <path d="M6 4l4 4-4 4" />
         </svg>
-        <span className="text-[11px] font-semibold text-cc-fg/60 truncate uppercase tracking-wide">
+        <span className="text-[11px] font-semibold text-cc-fg/70 truncate uppercase tracking-wide">
           {group.label}
         </span>
 
@@ -92,7 +92,7 @@ export function ProjectGroup({
 
       {/* Collapsed preview */}
       {isCollapsed && collapsedPreview && (
-        <div className="text-[10px] text-cc-muted/70 truncate pl-5 pb-0.5">
+        <div className="text-[10px] text-cc-muted/70 truncate pl-6 pb-0.5">
           {collapsedPreview}
         </div>
       )}
diff --git a/web/src/components/SessionItem.tsx b/web/src/components/SessionItem.tsx
index b83f51713..6f0611aa3 100644
--- a/web/src/components/SessionItem.tsx
+++ b/web/src/components/SessionItem.tsx
@@ -63,7 +63,7 @@ function StatusDot({ status }: { status: DerivedStatus }) {
 function BackendBadge({ type }: { type: "claude" | "codex" }) {
   if (type === "codex") {
     return (
-      <span className="text-[9px] font-semibold px-1.5 py-0.5 rounded bg-sky-500/15 text-sky-500 leading-none">
+      <span className="text-[9px] font-semibold px-1.5 py-0.5 rounded bg-sky-500/15 text-sky-600 dark:text-sky-300 leading-none">
         CX
       </span>
     );
@@ -185,10 +185,10 @@ export function SessionItem({
             onStartRename(s.id, label);
           }
         }}
-        className={`w-full flex items-center gap-2 py-2 pl-2.5 pr-12 min-h-[44px] rounded-lg transition-all duration-100 cursor-pointer relative ${
+        className={`w-full flex items-center gap-2 py-1.5 pl-2.5 pr-12 min-h-[44px] rounded-lg transition-all duration-100 cursor-pointer relative border ${
           isActive
-            ? "bg-cc-active"
-            : "hover:bg-cc-hover"
+            ? "bg-cc-active border-cc-primary/30"
+            : "border-transparent hover:bg-cc-hover hover:border-cc-border/60"
         }`}
       >
         {/* Left accent edge for active state */}
@@ -228,7 +228,7 @@ export function SessionItem({
         ) : (
           <div className="flex-1 min-w-0">
             <span
-              className={`text-[12.5px] font-medium truncate block leading-snug ${
+              className={`text-[12.5px] font-medium truncate block leading-snug tracking-tight ${
                 isActive ? "text-cc-fg" : "text-cc-fg/90"
               } ${isRecentlyRenamed ? "animate-name-appear" : ""}`}
               onAnimationEnd={() => onClearRecentlyRenamed(s.id)}
@@ -236,7 +236,7 @@ export function SessionItem({
               {label}
             </span>
             {cwdTail && (
-              <span className="text-[10px] text-cc-muted/70 truncate block leading-tight mt-px">
+              <span className="text-[10px] text-cc-muted/75 truncate block leading-tight mt-px">
                 {cwdTail}
               </span>
             )}
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index 0659b245a..c8f0d419b 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -482,11 +482,11 @@ export function Sidebar() {
   };
 
   return (
-    <aside aria-label="Session sidebar" className="w-full md:w-[260px] h-full flex flex-col bg-cc-sidebar">
+    <aside aria-label="Session sidebar" className="w-full md:w-[288px] h-full flex flex-col bg-cc-sidebar border-r border-cc-border/80">
       {/* Header */}
-      <div className="p-3.5 pb-2">
+      <div className="px-3.5 pt-3 pb-2 border-b border-cc-border/60 bg-cc-card/45 backdrop-blur-sm">
         <div className="flex items-center gap-2.5">
-          <img src={logoSrc} alt="" className="w-6 h-6" />
+          <img src={logoSrc} alt="" className="w-6 h-6 rounded" />
           <span className="text-[13px] font-semibold text-cc-fg tracking-tight">The Companion</span>
           <button
             onClick={handleNewSession}
@@ -565,7 +565,7 @@ export function Sidebar() {
             ))}
 
             {cronSessions.length > 0 && (
-              <div className="mt-3 pt-3 border-t border-cc-separator">
+              <div className="mt-2.5 pt-2.5 border-t border-cc-separator/70">
                 <button
                   onClick={() => setShowCronSessions(!showCronSessions)}
                   aria-expanded={showCronSessions}
@@ -595,7 +595,7 @@ export function Sidebar() {
             )}
 
             {agentSessions.length > 0 && (
-              <div className="mt-3 pt-3 border-t border-cc-separator">
+              <div className="mt-2.5 pt-2.5 border-t border-cc-separator/70">
                 <button
                   onClick={() => setShowAgentSessions(!showAgentSessions)}
                   aria-expanded={showAgentSessions}
@@ -625,7 +625,7 @@ export function Sidebar() {
             )}
 
             {archivedSessions.length > 0 && (
-              <div className="mt-3 pt-3 border-t border-cc-separator">
+              <div className="mt-2.5 pt-2.5 border-t border-cc-separator/70">
                 <div className="flex items-center">
                   <button
                     onClick={() => setShowArchived(!showArchived)}
@@ -684,10 +684,10 @@ export function Sidebar() {
       </div>
 
       {/* Footer */}
-      <div className="px-2 py-1.5 pb-safe bg-cc-sidebar-footer border-t border-cc-border/30">
+      <div className="px-2.5 py-2 pb-safe bg-cc-sidebar-footer border-t border-cc-border/60">
         <nav className="flex flex-col gap-1.5" aria-label="Navigation">
           {NAV_SECTIONS.map((section) => (
-            <section key={section.id} className="rounded-lg border border-cc-border/30 bg-cc-card/20 p-0.5">
+            <section key={section.id} className="rounded-xl border border-cc-border/40 bg-cc-card/45 p-1">
               <span className="px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-cc-muted/75 block">
                 {section.label}
               </span>
@@ -713,7 +713,7 @@ export function Sidebar() {
                       }}
                       title={item.label}
                       aria-current={isActive ? "page" : undefined}
-                      className={`group flex min-h-[44px] md:min-h-[34px] w-full items-center gap-2 rounded-md px-2 py-1 md:py-0.5 text-left transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cc-primary/60 ${
+                      className={`group flex min-h-[44px] md:min-h-[36px] w-full items-center gap-2 rounded-lg px-2.5 py-1 md:py-0.5 text-left transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cc-primary/60 ${
                         isActive
                           ? "bg-cc-active text-cc-fg"
                           : "text-cc-muted hover:text-cc-fg hover:bg-cc-hover"
@@ -736,7 +736,7 @@ export function Sidebar() {
             </section>
           ))}
         </nav>
-        <div className="mt-1.5 rounded-lg border border-cc-border/30 bg-cc-card/20 px-1.5 py-0.5">
+        <div className="mt-1.5 rounded-xl border border-cc-border/40 bg-cc-card/45 px-1.5 py-1">
           <div className="flex items-center justify-between">
             <span className="px-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-cc-muted/75">
               Resources
diff --git a/web/src/components/TopBar.tsx b/web/src/components/TopBar.tsx
index 99fe73062..d8686daed 100644
--- a/web/src/components/TopBar.tsx
+++ b/web/src/components/TopBar.tsx
@@ -132,8 +132,8 @@ export function TopBar() {
   }, [showWorkspaceControls, workspaceTabs, activeTab, cwd, quickTerminalOpen, quickTerminalTabs.length, openQuickTerminal, defaultTerminalOpts, setActiveTab, markChatTabReentry, currentSessionId]);
 
   return (
-    <header className="relative shrink-0 h-11 px-4 bg-cc-bg">
-      <div className="h-full flex items-center gap-1 min-w-0">
+    <header className="relative shrink-0 h-12 px-3.5 bg-cc-bg/90 backdrop-blur-sm border-b border-cc-border/70">
+      <div className="h-full flex items-center gap-0.5 min-w-0">
         <button
           onClick={() => setSidebarOpen(!sidebarOpen)}
           className={`flex items-center justify-center w-8 h-8 rounded-md transition-colors cursor-pointer shrink-0 ${
@@ -153,10 +153,10 @@ export function TopBar() {
           <div className="flex-1 flex items-center justify-start md:justify-center gap-0.5 min-w-0 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
               <button
                 onClick={() => activateWorkspaceTab("chat")}
-                className={`h-full px-3 text-[12px] font-medium transition-colors cursor-pointer flex items-center gap-1.5 border-b-[1.5px] shrink-0 ${
+                className={`h-7 px-2.5 text-[11.5px] font-medium transition-colors cursor-pointer flex items-center gap-1.5 border rounded-md shrink-0 ${
                   activeTab === "chat"
-                    ? "text-cc-fg border-cc-primary"
-                    : "text-cc-muted hover:text-cc-fg border-transparent"
+                    ? "text-cc-fg border-cc-primary/40 bg-cc-card shadow-[0_1px_0_rgba(0,0,0,0.03)]"
+                    : "text-cc-muted/90 hover:text-cc-fg border-transparent hover:bg-cc-hover"
                 }`}
                 title={sessionName || "Session"}
                 aria-label="Session tab"
@@ -174,10 +174,10 @@ export function TopBar() {
               </button>
               <button
                 onClick={() => activateWorkspaceTab("diff")}
-                className={`h-full px-3 text-[12px] font-medium transition-colors cursor-pointer flex items-center gap-1.5 border-b-[1.5px] shrink-0 ${
+                className={`h-7 px-2.5 text-[11.5px] font-medium transition-colors cursor-pointer flex items-center gap-1.5 border rounded-md shrink-0 ${
                   activeTab === "diff"
-                    ? "text-cc-fg border-cc-primary"
-                    : "text-cc-muted hover:text-cc-fg border-transparent"
+                    ? "text-cc-fg border-cc-primary/40 bg-cc-card shadow-[0_1px_0_rgba(0,0,0,0.03)]"
+                    : "text-cc-muted/90 hover:text-cc-fg border-transparent hover:bg-cc-hover"
                 }`}
                 aria-label="Diffs tab"
               >
@@ -191,12 +191,12 @@ export function TopBar() {
               <button
                 onClick={() => activateWorkspaceTab("terminal")}
                 disabled={!cwd}
-                className={`h-full px-3 text-[12px] font-medium transition-colors flex items-center border-b-[1.5px] shrink-0 ${
+                className={`h-7 px-2.5 text-[11.5px] font-medium transition-colors flex items-center border rounded-md shrink-0 ${
                   !cwd
                     ? "text-cc-muted/50 border-transparent cursor-not-allowed"
                     : activeTab === "terminal"
-                      ? "text-cc-fg border-cc-primary cursor-pointer"
-                      : "text-cc-muted hover:text-cc-fg border-transparent cursor-pointer"
+                      ? "text-cc-fg border-cc-primary/40 bg-cc-card shadow-[0_1px_0_rgba(0,0,0,0.03)] cursor-pointer"
+                      : "text-cc-muted/90 hover:text-cc-fg border-transparent hover:bg-cc-hover cursor-pointer"
                 }`}
                 title={terminalButtonTitle}
                 aria-label="Shell tab"
@@ -205,10 +205,10 @@ export function TopBar() {
               </button>
               <button
                 onClick={() => activateWorkspaceTab("processes")}
-                className={`h-full px-3 text-[12px] font-medium transition-colors cursor-pointer flex items-center gap-1.5 border-b-[1.5px] shrink-0 ${
+                className={`h-7 px-2.5 text-[11.5px] font-medium transition-colors cursor-pointer flex items-center gap-1.5 border rounded-md shrink-0 ${
                   activeTab === "processes"
-                    ? "text-cc-fg border-cc-primary"
-                    : "text-cc-muted hover:text-cc-fg border-transparent"
+                    ? "text-cc-fg border-cc-primary/40 bg-cc-card shadow-[0_1px_0_rgba(0,0,0,0.03)]"
+                    : "text-cc-muted/90 hover:text-cc-fg border-transparent hover:bg-cc-hover"
                 }`}
                 aria-label="Processes tab"
               >
@@ -222,12 +222,12 @@ export function TopBar() {
               <button
                 onClick={() => activateWorkspaceTab("editor")}
                 disabled={!cwd}
-                className={`h-full px-3 text-[12px] font-medium transition-colors flex items-center border-b-[1.5px] shrink-0 ${
+                className={`h-7 px-2.5 text-[11.5px] font-medium transition-colors flex items-center border rounded-md shrink-0 ${
                   !cwd
                     ? "text-cc-muted/50 border-transparent cursor-not-allowed"
                     : activeTab === "editor"
-                      ? "text-cc-fg border-cc-primary cursor-pointer"
-                      : "text-cc-muted hover:text-cc-fg border-transparent cursor-pointer"
+                      ? "text-cc-fg border-cc-primary/40 bg-cc-card shadow-[0_1px_0_rgba(0,0,0,0.03)] cursor-pointer"
+                      : "text-cc-muted/90 hover:text-cc-fg border-transparent hover:bg-cc-hover cursor-pointer"
                 }`}
                 title={!cwd ? "Editor unavailable while session is reconnecting" : "Editor"}
                 aria-label="Editor tab"
@@ -236,10 +236,10 @@ export function TopBar() {
               </button>
               <button
                 onClick={() => activateWorkspaceTab("browser")}
-                className={`h-full px-3 text-[12px] font-medium transition-colors cursor-pointer flex items-center border-b-[1.5px] shrink-0 ${
+                className={`h-7 px-2.5 text-[11.5px] font-medium transition-colors cursor-pointer flex items-center border rounded-md shrink-0 ${
                   activeTab === "browser"
-                    ? "text-cc-fg border-cc-primary"
-                    : "text-cc-muted hover:text-cc-fg border-transparent"
+                    ? "text-cc-fg border-cc-primary/40 bg-cc-card shadow-[0_1px_0_rgba(0,0,0,0.03)]"
+                    : "text-cc-muted/90 hover:text-cc-fg border-transparent hover:bg-cc-hover"
                 }`}
                 title="Browser preview"
                 aria-label="Browser tab"
diff --git a/web/src/index.css b/web/src/index.css
index be4bdee09..7eb698121 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -18,25 +18,25 @@
 
 @theme {
   /* Light Mode (default) */
-  --color-cc-bg: #faf9f6;
-  --color-cc-fg: #141413;
+  --color-cc-bg: #f5f7fb;
+  --color-cc-fg: #141925;
   --color-cc-card: #ffffff;
-  --color-cc-primary: #d97757;
-  --color-cc-primary-hover: #e08b6b;
-  --color-cc-user-bubble: #f0efe8;
-  --color-cc-border: rgba(31,30,29,0.12);
-  --color-cc-muted: #6f6e69;
-  --color-cc-sidebar: #f5f4ef;
+  --color-cc-primary: #e86442;
+  --color-cc-primary-hover: #d85535;
+  --color-cc-user-bubble: #eef2f7;
+  --color-cc-border: rgba(20,25,37,0.11);
+  --color-cc-muted: #5f697d;
+  --color-cc-sidebar: #eef2f8;
   --color-cc-input-bg: #ffffff;
-  --color-cc-code-bg: #f5f4ef;
-  --color-cc-code-fg: #2d2d2d;
-  --color-cc-hover: rgba(31,30,29,0.05);
-  --color-cc-active: rgba(31,30,29,0.09);
-  --color-cc-success: #2d7d46;
+  --color-cc-code-bg: #f3f5f9;
+  --color-cc-code-fg: #283140;
+  --color-cc-hover: rgba(20,25,37,0.055);
+  --color-cc-active: rgba(32,52,94,0.11);
+  --color-cc-success: #23824f;
   --color-cc-error: #c53030;
-  --color-cc-warning: #b7791f;
-  --color-cc-sidebar-footer: #edece5;
-  --color-cc-separator: rgba(31,30,29,0.10);
+  --color-cc-warning: #b4741a;
+  --color-cc-sidebar-footer: #eef2f8;
+  --color-cc-separator: rgba(23,26,34,0.08);
   --color-cc-info: #2b6cb0;
   --color-cc-merged: #805ad5;
 }
@@ -180,25 +180,25 @@
 
 /* Dark mode overrides */
 .dark {
-  --color-cc-bg: #262624;
-  --color-cc-fg: #faf9f5;
-  --color-cc-card: #141413;
-  --color-cc-primary: #d97757;
-  --color-cc-primary-hover: #e08b6b;
-  --color-cc-user-bubble: #30302e;
-  --color-cc-border: rgba(222,220,209,0.15);
-  --color-cc-muted: #c2c0b6;
-  --color-cc-sidebar: #1e1e1c;
-  --color-cc-input-bg: #141413;
-  --color-cc-code-bg: #141413;
-  --color-cc-code-fg: #d4d4d4;
-  --color-cc-hover: rgba(222,220,209,0.06);
-  --color-cc-active: rgba(222,220,209,0.10);
+  --color-cc-bg: #171921;
+  --color-cc-fg: #f5f7fb;
+  --color-cc-card: #1f2330;
+  --color-cc-primary: #f27a59;
+  --color-cc-primary-hover: #ff8a6a;
+  --color-cc-user-bubble: #262d3c;
+  --color-cc-border: rgba(215,223,243,0.14);
+  --color-cc-muted: #aab4cc;
+  --color-cc-sidebar: #171c27;
+  --color-cc-input-bg: #1b202c;
+  --color-cc-code-bg: #161b25;
+  --color-cc-code-fg: #d6def3;
+  --color-cc-hover: rgba(215,223,243,0.08);
+  --color-cc-active: rgba(103,142,214,0.16);
   --color-cc-success: #48bb78;
   --color-cc-error: #fc8181;
   --color-cc-warning: #f6e05e;
-  --color-cc-sidebar-footer: #141413;
-  --color-cc-separator: rgba(222,220,209,0.08);
+  --color-cc-sidebar-footer: #151a24;
+  --color-cc-separator: rgba(215,223,243,0.09);
   --color-cc-info: #63b3ed;
   --color-cc-merged: #b794f4;
 }
@@ -234,7 +234,7 @@
 }
 
 .font-sans-ui {
-  font-family: system-ui, -apple-system, sans-serif;
+  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", "Noto Sans", sans-serif;
 }
 
 .font-mono-code {
@@ -245,11 +245,11 @@
 
 /* Subtle inner glow for the composer card on desktop */
 .composer-card {
-  box-shadow: 0 10px 30px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.06);
+  box-shadow: 0 10px 24px rgba(26, 34, 52, 0.08), inset 0 1px 0 rgba(255,255,255,0.08);
   transition: box-shadow 200ms ease, border-color 200ms ease;
 }
 .composer-card:focus-within {
-  box-shadow: 0 12px 36px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.08);
+  box-shadow: 0 14px 30px rgba(37, 51, 83, 0.13), inset 0 1px 0 rgba(255,255,255,0.1);
 }
 
 /* Thinking block expand/collapse animation */
@@ -281,7 +281,20 @@
 
 /* User bubble subtle gradient */
 .user-bubble-gradient {
-  background: linear-gradient(135deg, var(--color-cc-user-bubble), color-mix(in srgb, var(--color-cc-user-bubble) 85%, var(--color-cc-primary) 15%));
+  background: linear-gradient(140deg, var(--color-cc-user-bubble), color-mix(in srgb, var(--color-cc-user-bubble) 90%, var(--color-cc-primary) 10%));
+}
+
+.chat-grain {
+  background-image: radial-gradient(circle at 1px 1px, rgba(96, 113, 148, 0.08) 1px, transparent 0);
+  background-size: 18px 18px;
+}
+
+@layer components {
+  .kanna-panel {
+    border: 1px solid var(--color-cc-border);
+    border-radius: 14px;
+    background: color-mix(in srgb, var(--color-cc-card) 94%, var(--color-cc-bg) 6%);
+  }
 }
 
 /* Generation stats pulsing bar */