diff --git a/server/claude-sdk.js b/server/claude-sdk.js
index d5e4cc8..ea47c37 100644
--- a/server/claude-sdk.js
+++ b/server/claude-sdk.js
@@ -538,7 +538,7 @@ async function queryClaudeSDK(command, options = {}, ws) {
       return { behavior: 'deny', message: decision.message ?? 'User denied tool use' };
     };
 
-    // Set stream-close timeout for interactive tools (Query constructor reads it synchronously)
+    // Set stream-close timeout for interactive tools (Query constructor reads it synchronously). Claude Agent SDK has a default of 5s and this overrides it
     const prevStreamTimeout = process.env.CLAUDE_CODE_STREAM_CLOSE_TIMEOUT;
     process.env.CLAUDE_CODE_STREAM_CLOSE_TIMEOUT = '300000';
 
diff --git a/src/components/DiffViewer.jsx b/src/components/DiffViewer.jsx
index a624c0b..a6d963a 100644
--- a/src/components/DiffViewer.jsx
+++ b/src/components/DiffViewer.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 function DiffViewer({ diff, fileName, isMobile, wrapText }) {
   if (!diff) {
     return (
-      <div className="p-4 text-center text-gray-500 dark:text-gray-400 text-sm">
+      <div className="p-4 text-center text-muted-foreground text-sm">
         No diff available
       </div>
     );
@@ -17,13 +17,13 @@ function DiffViewer({ diff, fileName, isMobile, wrapText }) {
     return (
       <div
         key={index}
-        className={`font-mono text-xs p-2 ${
+        className={`font-mono text-xs px-3 py-0.5 ${
           isMobile && wrapText ? 'whitespace-pre-wrap break-all' : 'whitespace-pre overflow-x-auto'
         } ${
-          isAddition ? 'bg-green-50 dark:bg-green-950 text-green-700 dark:text-green-300' :
-          isDeletion ? 'bg-red-50 dark:bg-red-950 text-red-700 dark:text-red-300' :
-          isHeader ? 'bg-blue-50 dark:bg-blue-950 text-blue-700 dark:text-blue-300' :
-          'text-gray-600 dark:text-gray-400'
+          isAddition ? 'bg-green-50 dark:bg-green-950/50 text-green-700 dark:text-green-300' :
+          isDeletion ? 'bg-red-50 dark:bg-red-950/50 text-red-700 dark:text-red-300' :
+          isHeader ? 'bg-primary/5 text-primary' :
+          'text-muted-foreground/70'
         }`}
       >
         {line}
diff --git a/src/components/FileTree.jsx b/src/components/FileTree.jsx
index 643d8eb..c966fcf 100644
--- a/src/components/FileTree.jsx
+++ b/src/components/FileTree.jsx
@@ -3,12 +3,263 @@ import { useTranslation } from 'react-i18next';
 import { ScrollArea } from './ui/scroll-area';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
-import { Folder, FolderOpen, File, FileText, FileCode, List, TableProperties, Eye, Search, X } from 'lucide-react';
+import {
+  Folder, FolderOpen, File, FileText, FileCode, List, TableProperties, Eye, Search, X,
+  ChevronRight,
+  FileJson, FileType, FileSpreadsheet, FileArchive,
+  Hash, Braces, Terminal, Database, Globe, Palette, Music2, Video, Archive,
+  Lock, Shield, Settings, Image, BookOpen, Cpu, Box, Gem, Coffee,
+  Flame, Hexagon, FileCode2, Code2, Cog, FileWarning, Binary, SquareFunction,
+  Scroll, FlaskConical, NotebookPen, FileCheck, Workflow, Blocks
+} from 'lucide-react';
 import { cn } from '../lib/utils';
 import CodeEditor from './CodeEditor';
 import ImageViewer from './ImageViewer';
 import { api } from '../utils/api';
 
+// ─── File Icon Registry ──────────────────────────────────────────────
+// Maps file extensions (and special filenames) to { icon, colorClass } pairs.
+// Uses lucide-react icons mapped semantically to file types.
+
+const ICON_SIZE = 'w-4 h-4 flex-shrink-0';
+
+const FILE_ICON_MAP = {
+  // ── JavaScript / TypeScript ──
+  js:   { icon: FileCode,   color: 'text-yellow-500' },
+  jsx:  { icon: FileCode,   color: 'text-yellow-500' },
+  mjs:  { icon: FileCode,   color: 'text-yellow-500' },
+  cjs:  { icon: FileCode,   color: 'text-yellow-500' },
+  ts:   { icon: FileCode2,  color: 'text-blue-500' },
+  tsx:  { icon: FileCode2,  color: 'text-blue-500' },
+  mts:  { icon: FileCode2,  color: 'text-blue-500' },
+
+  // ── Python ──
+  py:   { icon: Code2,      color: 'text-emerald-500' },
+  pyw:  { icon: Code2,      color: 'text-emerald-500' },
+  pyi:  { icon: Code2,      color: 'text-emerald-400' },
+  ipynb:{ icon: NotebookPen, color: 'text-orange-500' },
+
+  // ── Rust ──
+  rs:   { icon: Cog,        color: 'text-orange-600' },
+  toml: { icon: Settings,   color: 'text-gray-500' },
+
+  // ── Go ──
+  go:   { icon: Hexagon,    color: 'text-cyan-500' },
+
+  // ── Ruby ──
+  rb:   { icon: Gem,        color: 'text-red-500' },
+  erb:  { icon: Gem,        color: 'text-red-400' },
+
+  // ── PHP ──
+  php:  { icon: Blocks,     color: 'text-violet-500' },
+
+  // ── Java / Kotlin ──
+  java: { icon: Coffee,     color: 'text-red-600' },
+  jar:  { icon: Coffee,     color: 'text-red-500' },
+  kt:   { icon: Hexagon,    color: 'text-violet-500' },
+  kts:  { icon: Hexagon,    color: 'text-violet-400' },
+
+  // ── C / C++ ──
+  c:    { icon: Cpu,        color: 'text-blue-600' },
+  h:    { icon: Cpu,        color: 'text-blue-400' },
+  cpp:  { icon: Cpu,        color: 'text-blue-700' },
+  hpp:  { icon: Cpu,        color: 'text-blue-500' },
+  cc:   { icon: Cpu,        color: 'text-blue-700' },
+
+  // ── C# ──
+  cs:   { icon: Hexagon,    color: 'text-purple-600' },
+
+  // ── Swift ──
+  swift:{ icon: Flame,      color: 'text-orange-500' },
+
+  // ── Lua ──
+  lua:  { icon: SquareFunction, color: 'text-blue-500' },
+
+  // ── R ──
+  r:    { icon: FlaskConical, color: 'text-blue-600' },
+
+  // ── Web ──
+  html: { icon: Globe,      color: 'text-orange-600' },
+  htm:  { icon: Globe,      color: 'text-orange-600' },
+  css:  { icon: Hash,       color: 'text-blue-500' },
+  scss: { icon: Hash,       color: 'text-pink-500' },
+  sass: { icon: Hash,       color: 'text-pink-400' },
+  less: { icon: Hash,       color: 'text-indigo-500' },
+  vue:  { icon: FileCode2,  color: 'text-emerald-500' },
+  svelte:{ icon: FileCode2, color: 'text-orange-500' },
+
+  // ── Data / Config ──
+  json: { icon: Braces,     color: 'text-yellow-600' },
+  jsonc:{ icon: Braces,     color: 'text-yellow-500' },
+  json5:{ icon: Braces,     color: 'text-yellow-500' },
+  yaml: { icon: Settings,   color: 'text-purple-400' },
+  yml:  { icon: Settings,   color: 'text-purple-400' },
+  xml:  { icon: FileCode,   color: 'text-orange-500' },
+  csv:  { icon: FileSpreadsheet, color: 'text-green-600' },
+  tsv:  { icon: FileSpreadsheet, color: 'text-green-500' },
+  sql:  { icon: Database,   color: 'text-blue-500' },
+  graphql:{ icon: Workflow,  color: 'text-pink-500' },
+  gql:  { icon: Workflow,   color: 'text-pink-500' },
+  proto:{ icon: Box,        color: 'text-green-500' },
+  env:  { icon: Shield,     color: 'text-yellow-600' },
+
+  // ── Documents ──
+  md:   { icon: BookOpen,   color: 'text-blue-500' },
+  mdx:  { icon: BookOpen,   color: 'text-blue-400' },
+  txt:  { icon: FileText,   color: 'text-gray-500' },
+  doc:  { icon: FileText,   color: 'text-blue-600' },
+  docx: { icon: FileText,   color: 'text-blue-600' },
+  pdf:  { icon: FileCheck,  color: 'text-red-600' },
+  rtf:  { icon: FileText,   color: 'text-gray-500' },
+  tex:  { icon: Scroll,     color: 'text-teal-600' },
+  rst:  { icon: FileText,   color: 'text-gray-400' },
+
+  // ── Shell / Scripts ──
+  sh:   { icon: Terminal,   color: 'text-green-500' },
+  bash: { icon: Terminal,   color: 'text-green-500' },
+  zsh:  { icon: Terminal,   color: 'text-green-400' },
+  fish: { icon: Terminal,   color: 'text-green-400' },
+  ps1:  { icon: Terminal,   color: 'text-blue-400' },
+  bat:  { icon: Terminal,   color: 'text-gray-500' },
+  cmd:  { icon: Terminal,   color: 'text-gray-500' },
+
+  // ── Images ──
+  png:  { icon: Image,      color: 'text-purple-500' },
+  jpg:  { icon: Image,      color: 'text-purple-500' },
+  jpeg: { icon: Image,      color: 'text-purple-500' },
+  gif:  { icon: Image,      color: 'text-purple-400' },
+  webp: { icon: Image,      color: 'text-purple-400' },
+  ico:  { icon: Image,      color: 'text-purple-400' },
+  bmp:  { icon: Image,      color: 'text-purple-400' },
+  tiff: { icon: Image,      color: 'text-purple-400' },
+  svg:  { icon: Palette,    color: 'text-amber-500' },
+
+  // ── Audio ──
+  mp3:  { icon: Music2,     color: 'text-pink-500' },
+  wav:  { icon: Music2,     color: 'text-pink-500' },
+  ogg:  { icon: Music2,     color: 'text-pink-400' },
+  flac: { icon: Music2,     color: 'text-pink-400' },
+  aac:  { icon: Music2,     color: 'text-pink-400' },
+  m4a:  { icon: Music2,     color: 'text-pink-400' },
+
+  // ── Video ──
+  mp4:  { icon: Video,      color: 'text-rose-500' },
+  mov:  { icon: Video,      color: 'text-rose-500' },
+  avi:  { icon: Video,      color: 'text-rose-500' },
+  webm: { icon: Video,      color: 'text-rose-400' },
+  mkv:  { icon: Video,      color: 'text-rose-400' },
+
+  // ── Fonts ──
+  ttf:  { icon: FileType,   color: 'text-red-500' },
+  otf:  { icon: FileType,   color: 'text-red-500' },
+  woff: { icon: FileType,   color: 'text-red-400' },
+  woff2:{ icon: FileType,   color: 'text-red-400' },
+  eot:  { icon: FileType,   color: 'text-red-400' },
+
+  // ── Archives ──
+  zip:  { icon: Archive,    color: 'text-amber-600' },
+  tar:  { icon: Archive,    color: 'text-amber-600' },
+  gz:   { icon: Archive,    color: 'text-amber-600' },
+  bz2:  { icon: Archive,    color: 'text-amber-600' },
+  rar:  { icon: Archive,    color: 'text-amber-500' },
+  '7z': { icon: Archive,    color: 'text-amber-500' },
+
+  // ── Lock files ──
+  lock: { icon: Lock,       color: 'text-gray-500' },
+
+  // ── Binary / Executable ──
+  exe:  { icon: Binary,     color: 'text-gray-500' },
+  bin:  { icon: Binary,     color: 'text-gray-500' },
+  dll:  { icon: Binary,     color: 'text-gray-400' },
+  so:   { icon: Binary,     color: 'text-gray-400' },
+  dylib:{ icon: Binary,     color: 'text-gray-400' },
+  wasm: { icon: Binary,     color: 'text-purple-500' },
+
+  // ── Misc config ──
+  ini:  { icon: Settings,   color: 'text-gray-500' },
+  cfg:  { icon: Settings,   color: 'text-gray-500' },
+  conf: { icon: Settings,   color: 'text-gray-500' },
+  log:  { icon: Scroll,     color: 'text-gray-400' },
+  map:  { icon: File,       color: 'text-gray-400' },
+};
+
+// Special full-filename matches (highest priority)
+const FILENAME_ICON_MAP = {
+  'Dockerfile':       { icon: Box,       color: 'text-blue-500' },
+  'docker-compose.yml': { icon: Box,     color: 'text-blue-500' },
+  'docker-compose.yaml': { icon: Box,    color: 'text-blue-500' },
+  '.dockerignore':    { icon: Box,       color: 'text-gray-500' },
+  '.gitignore':       { icon: Settings,  color: 'text-gray-500' },
+  '.gitmodules':      { icon: Settings,  color: 'text-gray-500' },
+  '.gitattributes':   { icon: Settings,  color: 'text-gray-500' },
+  '.editorconfig':    { icon: Settings,  color: 'text-gray-500' },
+  '.prettierrc':      { icon: Settings,  color: 'text-pink-400' },
+  '.prettierignore':  { icon: Settings,  color: 'text-gray-500' },
+  '.eslintrc':        { icon: Settings,  color: 'text-violet-500' },
+  '.eslintrc.js':     { icon: Settings,  color: 'text-violet-500' },
+  '.eslintrc.json':   { icon: Settings,  color: 'text-violet-500' },
+  '.eslintrc.cjs':    { icon: Settings,  color: 'text-violet-500' },
+  'eslint.config.js': { icon: Settings,  color: 'text-violet-500' },
+  'eslint.config.mjs':{ icon: Settings,  color: 'text-violet-500' },
+  '.env':             { icon: Shield,    color: 'text-yellow-600' },
+  '.env.local':       { icon: Shield,    color: 'text-yellow-600' },
+  '.env.development': { icon: Shield,    color: 'text-yellow-500' },
+  '.env.production':  { icon: Shield,    color: 'text-yellow-600' },
+  '.env.example':     { icon: Shield,    color: 'text-yellow-400' },
+  'package.json':     { icon: Braces,    color: 'text-green-500' },
+  'package-lock.json':{ icon: Lock,      color: 'text-gray-500' },
+  'yarn.lock':        { icon: Lock,      color: 'text-blue-400' },
+  'pnpm-lock.yaml':   { icon: Lock,      color: 'text-orange-400' },
+  'bun.lockb':        { icon: Lock,      color: 'text-gray-400' },
+  'Cargo.toml':       { icon: Cog,       color: 'text-orange-600' },
+  'Cargo.lock':       { icon: Lock,      color: 'text-orange-400' },
+  'Gemfile':          { icon: Gem,       color: 'text-red-500' },
+  'Gemfile.lock':     { icon: Lock,      color: 'text-red-400' },
+  'Makefile':         { icon: Terminal,   color: 'text-gray-500' },
+  'CMakeLists.txt':   { icon: Cog,       color: 'text-blue-500' },
+  'tsconfig.json':    { icon: Braces,    color: 'text-blue-500' },
+  'jsconfig.json':    { icon: Braces,    color: 'text-yellow-500' },
+  'vite.config.ts':   { icon: Flame,     color: 'text-purple-500' },
+  'vite.config.js':   { icon: Flame,     color: 'text-purple-500' },
+  'webpack.config.js':{ icon: Cog,       color: 'text-blue-500' },
+  'tailwind.config.js':{ icon: Hash,     color: 'text-cyan-500' },
+  'tailwind.config.ts':{ icon: Hash,     color: 'text-cyan-500' },
+  'postcss.config.js':{ icon: Cog,       color: 'text-red-400' },
+  'babel.config.js':  { icon: Settings,  color: 'text-yellow-500' },
+  '.babelrc':         { icon: Settings,  color: 'text-yellow-500' },
+  'README.md':        { icon: BookOpen,  color: 'text-blue-500' },
+  'LICENSE':          { icon: FileCheck,  color: 'text-gray-500' },
+  'LICENSE.md':       { icon: FileCheck,  color: 'text-gray-500' },
+  'CHANGELOG.md':     { icon: Scroll,    color: 'text-blue-400' },
+  'requirements.txt': { icon: FileText,  color: 'text-emerald-400' },
+  'go.mod':           { icon: Hexagon,   color: 'text-cyan-500' },
+  'go.sum':           { icon: Lock,      color: 'text-cyan-400' },
+};
+
+function getFileIconData(filename) {
+  // 1. Exact filename match
+  if (FILENAME_ICON_MAP[filename]) {
+    return FILENAME_ICON_MAP[filename];
+  }
+
+  // 2. Check for .env prefix pattern
+  if (filename.startsWith('.env')) {
+    return { icon: Shield, color: 'text-yellow-600' };
+  }
+
+  // 3. Extension-based lookup
+  const ext = filename.split('.').pop()?.toLowerCase();
+  if (ext && FILE_ICON_MAP[ext]) {
+    return FILE_ICON_MAP[ext];
+  }
+
+  // 4. Fallback
+  return { icon: File, color: 'text-muted-foreground' };
+}
+
+
+// ─── Component ───────────────────────────────────────────────────────
+
 function FileTree({ selectedProject }) {
   const { t } = useTranslation();
   const [files, setFiles] = useState([]);
@@ -16,7 +267,7 @@ function FileTree({ selectedProject }) {
   const [expandedDirs, setExpandedDirs] = useState(new Set());
   const [selectedFile, setSelectedFile] = useState(null);
   const [selectedImage, setSelectedImage] = useState(null);
-  const [viewMode, setViewMode] = useState('detailed'); // 'simple', 'detailed', 'compact'
+  const [viewMode, setViewMode] = useState('detailed');
   const [searchQuery, setSearchQuery] = useState('');
   const [filteredFiles, setFilteredFiles] = useState([]);
 
@@ -26,7 +277,6 @@ function FileTree({ selectedProject }) {
     }
   }, [selectedProject]);
 
-  // Load view mode preference from localStorage
   useEffect(() => {
     const savedViewMode = localStorage.getItem('file-tree-view-mode');
     if (savedViewMode && ['simple', 'detailed', 'compact'].includes(savedViewMode)) {
@@ -34,7 +284,6 @@ function FileTree({ selectedProject }) {
     }
   }, []);
 
-  // Filter files based on search query
   useEffect(() => {
     if (!searchQuery.trim()) {
       setFilteredFiles(files);
@@ -42,7 +291,6 @@ function FileTree({ selectedProject }) {
       const filtered = filterFiles(files, searchQuery.toLowerCase());
       setFilteredFiles(filtered);
 
-      // Auto-expand directories that contain matches
       const expandMatches = (items) => {
         items.forEach(item => {
           if (item.type === 'directory' && item.children && item.children.length > 0) {
@@ -55,7 +303,6 @@ function FileTree({ selectedProject }) {
     }
   }, [files, searchQuery]);
 
-  // Recursively filter files and directories based on search query
   const filterFiles = (items, query) => {
     return items.reduce((filtered, item) => {
       const matchesName = item.name.toLowerCase().includes(query);
@@ -65,9 +312,6 @@ function FileTree({ selectedProject }) {
         filteredChildren = filterFiles(item.children, query);
       }
 
-      // Include item if:
-      // 1. It matches the search query, or
-      // 2. It's a directory with matching children
       if (matchesName || filteredChildren.length > 0) {
         filtered.push({
           ...item,
@@ -83,14 +327,14 @@ function FileTree({ selectedProject }) {
     setLoading(true);
     try {
       const response = await api.getFiles(selectedProject.name);
-      
+
       if (!response.ok) {
         const errorText = await response.text();
         console.error('❌ File fetch failed:', response.status, errorText);
         setFiles([]);
         return;
       }
-      
+
       const data = await response.json();
       setFiles(data);
     } catch (error) {
@@ -111,13 +355,11 @@ function FileTree({ selectedProject }) {
     setExpandedDirs(newExpanded);
   };
 
-  // Change view mode and save preference
   const changeViewMode = (mode) => {
     setViewMode(mode);
     localStorage.setItem('file-tree-view-mode', mode);
   };
 
-  // Format file size
   const formatFileSize = (bytes) => {
     if (!bytes || bytes === 0) return '0 B';
     const k = 1024;
@@ -126,7 +368,6 @@ function FileTree({ selectedProject }) {
     return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
   };
 
-  // Format date as relative time
   const formatRelativeTime = (date) => {
     if (!date) return '-';
     const now = new Date();
@@ -140,65 +381,6 @@ function FileTree({ selectedProject }) {
     return past.toLocaleDateString();
   };
 
-  const renderFileTree = (items, level = 0) => {
-    return items.map((item) => (
-      <div key={item.path} className="select-none">
-        <Button
-          variant="ghost"
-          className={cn(
-            "w-full justify-start p-2 h-auto font-normal text-left hover:bg-accent",
-          )}
-          style={{ paddingLeft: `${level * 16 + 12}px` }}
-          onClick={() => {
-            if (item.type === 'directory') {
-              toggleDirectory(item.path);
-            } else if (isImageFile(item.name)) {
-              // Open image in viewer
-              setSelectedImage({
-                name: item.name,
-                path: item.path,
-                projectPath: selectedProject.path,
-                projectName: selectedProject.name
-              });
-            } else {
-              // Open file in editor
-              setSelectedFile({
-                name: item.name,
-                path: item.path,
-                projectPath: selectedProject.path,
-                projectName: selectedProject.name
-              });
-            }
-          }}
-        >
-          <div className="flex items-center gap-2 min-w-0 w-full">
-            {item.type === 'directory' ? (
-              expandedDirs.has(item.path) ? (
-                <FolderOpen className="w-4 h-4 text-blue-500 flex-shrink-0" />
-              ) : (
-                <Folder className="w-4 h-4 text-muted-foreground flex-shrink-0" />
-              )
-            ) : (
-              getFileIcon(item.name)
-            )}
-            <span className="text-sm truncate text-foreground">
-              {item.name}
-            </span>
-          </div>
-        </Button>
-        
-        {item.type === 'directory' && 
-         expandedDirs.has(item.path) && 
-         item.children && 
-         item.children.length > 0 && (
-          <div>
-            {renderFileTree(item.children, level + 1)}
-          </div>
-        )}
-      </div>
-    ));
-  };
-
   const isImageFile = (filename) => {
     const ext = filename.split('.').pop()?.toLowerCase();
     const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'ico', 'bmp'];
@@ -206,208 +388,289 @@ function FileTree({ selectedProject }) {
   };
 
   const getFileIcon = (filename) => {
-    const ext = filename.split('.').pop()?.toLowerCase();
-    
-    const codeExtensions = ['js', 'jsx', 'ts', 'tsx', 'py', 'java', 'cpp', 'c', 'php', 'rb', 'go', 'rs'];
-    const docExtensions = ['md', 'txt', 'doc', 'pdf'];
-    const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'ico', 'bmp'];
-    
-    if (codeExtensions.includes(ext)) {
-      return <FileCode className="w-4 h-4 text-green-500 flex-shrink-0" />;
-    } else if (docExtensions.includes(ext)) {
-      return <FileText className="w-4 h-4 text-blue-500 flex-shrink-0" />;
-    } else if (imageExtensions.includes(ext)) {
-      return <File className="w-4 h-4 text-purple-500 flex-shrink-0" />;
+    const { icon: Icon, color } = getFileIconData(filename);
+    return <Icon className={cn(ICON_SIZE, color)} />;
+  };
+
+  // ── Click handler shared across all view modes ──
+  const handleItemClick = (item) => {
+    if (item.type === 'directory') {
+      toggleDirectory(item.path);
+    } else if (isImageFile(item.name)) {
+      setSelectedImage({
+        name: item.name,
+        path: item.path,
+        projectPath: selectedProject.path,
+        projectName: selectedProject.name
+      });
     } else {
-      return <File className="w-4 h-4 text-muted-foreground flex-shrink-0" />;
+      setSelectedFile({
+        name: item.name,
+        path: item.path,
+        projectPath: selectedProject.path,
+        projectName: selectedProject.name
+      });
     }
   };
 
-  // Render detailed view with table-like layout
+  // ── Indent guide + folder/file icon rendering ──
+  const renderIndentGuides = (level) => {
+    if (level === 0) return null;
+    return (
+      <span className="flex items-center flex-shrink-0" aria-hidden="true">
+        {Array.from({ length: level }).map((_, i) => (
+          <span
+            key={i}
+            className="inline-block w-4 h-full border-l border-border/50"
+          />
+        ))}
+      </span>
+    );
+  };
+
+  const renderItemIcons = (item) => {
+    const isDir = item.type === 'directory';
+    const isOpen = expandedDirs.has(item.path);
+
+    if (isDir) {
+      return (
+        <span className="flex items-center gap-0.5 flex-shrink-0">
+          <ChevronRight
+            className={cn(
+              'w-3.5 h-3.5 text-muted-foreground/70 transition-transform duration-150',
+              isOpen && 'rotate-90'
+            )}
+          />
+          {isOpen ? (
+            <FolderOpen className="w-4 h-4 text-blue-500 flex-shrink-0" />
+          ) : (
+            <Folder className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+          )}
+        </span>
+      );
+    }
+
+    return (
+      <span className="flex items-center flex-shrink-0 ml-[18px]">
+        {getFileIcon(item.name)}
+      </span>
+    );
+  };
+
+  // ─── Simple (Tree) View ────────────────────────────────────────────
+  const renderFileTree = (items, level = 0) => {
+    return items.map((item) => {
+      const isDir = item.type === 'directory';
+      const isOpen = isDir && expandedDirs.has(item.path);
+
+      return (
+        <div key={item.path} className="select-none">
+          <div
+            className={cn(
+              'group flex items-center gap-1.5 py-[3px] pr-2 cursor-pointer rounded-sm',
+              'hover:bg-accent/60 transition-colors duration-100',
+              isDir && isOpen && 'border-l-2 border-primary/30',
+              isDir && !isOpen && 'border-l-2 border-transparent',
+              !isDir && 'border-l-2 border-transparent',
+            )}
+            style={{ paddingLeft: `${level * 16 + 4}px` }}
+            onClick={() => handleItemClick(item)}
+          >
+            {renderItemIcons(item)}
+            <span className={cn(
+              'text-[13px] leading-tight truncate',
+              isDir ? 'font-medium text-foreground' : 'text-foreground/90'
+            )}>
+              {item.name}
+            </span>
+          </div>
+
+          {isDir && isOpen && item.children && item.children.length > 0 && (
+            <div className="relative">
+              <span
+                className="absolute top-0 bottom-0 border-l border-border/40"
+                style={{ left: `${level * 16 + 14}px` }}
+                aria-hidden="true"
+              />
+              {renderFileTree(item.children, level + 1)}
+            </div>
+          )}
+        </div>
+      );
+    });
+  };
+
+  // ─── Detailed View ────────────────────────────────────────────────
   const renderDetailedView = (items, level = 0) => {
-    return items.map((item) => (
-      <div key={item.path} className="select-none">
-        <div
-          className={cn(
-            "grid grid-cols-12 gap-2 p-2 hover:bg-accent cursor-pointer items-center",
-          )}
-          style={{ paddingLeft: `${level * 16 + 12}px` }}
-          onClick={() => {
-            if (item.type === 'directory') {
-              toggleDirectory(item.path);
-            } else if (isImageFile(item.name)) {
-              setSelectedImage({
-                name: item.name,
-                path: item.path,
-                projectPath: selectedProject.path,
-                projectName: selectedProject.name
-              });
-            } else {
-              setSelectedFile({
-                name: item.name,
-                path: item.path,
-                projectPath: selectedProject.path,
-                projectName: selectedProject.name
-              });
-            }
-          }}
-        >
-          <div className="col-span-5 flex items-center gap-2 min-w-0">
-            {item.type === 'directory' ? (
-              expandedDirs.has(item.path) ? (
-                <FolderOpen className="w-4 h-4 text-blue-500 flex-shrink-0" />
-              ) : (
-                <Folder className="w-4 h-4 text-muted-foreground flex-shrink-0" />
-              )
-            ) : (
-              getFileIcon(item.name)
+    return items.map((item) => {
+      const isDir = item.type === 'directory';
+      const isOpen = isDir && expandedDirs.has(item.path);
+
+      return (
+        <div key={item.path} className="select-none">
+          <div
+            className={cn(
+              'group grid grid-cols-12 gap-2 py-[3px] pr-2 hover:bg-accent/60 cursor-pointer items-center rounded-sm transition-colors duration-100',
+              isDir && isOpen && 'border-l-2 border-primary/30',
+              isDir && !isOpen && 'border-l-2 border-transparent',
+              !isDir && 'border-l-2 border-transparent',
             )}
-            <span className="text-sm truncate text-foreground">
-              {item.name}
-            </span>
-          </div>
-          <div className="col-span-2 text-sm text-muted-foreground">
-            {item.type === 'file' ? formatFileSize(item.size) : '-'}
-          </div>
-          <div className="col-span-3 text-sm text-muted-foreground">
-            {formatRelativeTime(item.modified)}
-          </div>
-          <div className="col-span-2 text-sm text-muted-foreground font-mono">
-            {item.permissionsRwx || '-'}
+            style={{ paddingLeft: `${level * 16 + 4}px` }}
+            onClick={() => handleItemClick(item)}
+          >
+            <div className="col-span-5 flex items-center gap-1.5 min-w-0">
+              {renderItemIcons(item)}
+              <span className={cn(
+                'text-[13px] leading-tight truncate',
+                isDir ? 'font-medium text-foreground' : 'text-foreground/90'
+              )}>
+                {item.name}
+              </span>
+            </div>
+            <div className="col-span-2 text-xs text-muted-foreground tabular-nums">
+              {item.type === 'file' ? formatFileSize(item.size) : ''}
+            </div>
+            <div className="col-span-3 text-xs text-muted-foreground">
+              {formatRelativeTime(item.modified)}
+            </div>
+            <div className="col-span-2 text-xs text-muted-foreground font-mono">
+              {item.permissionsRwx || ''}
+            </div>
           </div>
+
+          {isDir && isOpen && item.children && (
+            <div className="relative">
+              <span
+                className="absolute top-0 bottom-0 border-l border-border/40"
+                style={{ left: `${level * 16 + 14}px` }}
+                aria-hidden="true"
+              />
+              {renderDetailedView(item.children, level + 1)}
+            </div>
+          )}
         </div>
-        
-        {item.type === 'directory' && 
-         expandedDirs.has(item.path) && 
-         item.children && 
-         renderDetailedView(item.children, level + 1)}
-      </div>
-    ));
+      );
+    });
   };
 
-  // Render compact view with inline details
+  // ─── Compact View ──────────────────────────────────────────────────
   const renderCompactView = (items, level = 0) => {
-    return items.map((item) => (
-      <div key={item.path} className="select-none">
-        <div
-          className={cn(
-            "flex items-center justify-between p-2 hover:bg-accent cursor-pointer",
+    return items.map((item) => {
+      const isDir = item.type === 'directory';
+      const isOpen = isDir && expandedDirs.has(item.path);
+
+      return (
+        <div key={item.path} className="select-none">
+          <div
+            className={cn(
+              'group flex items-center justify-between py-[3px] pr-2 hover:bg-accent/60 cursor-pointer rounded-sm transition-colors duration-100',
+              isDir && isOpen && 'border-l-2 border-primary/30',
+              isDir && !isOpen && 'border-l-2 border-transparent',
+              !isDir && 'border-l-2 border-transparent',
+            )}
+            style={{ paddingLeft: `${level * 16 + 4}px` }}
+            onClick={() => handleItemClick(item)}
+          >
+            <div className="flex items-center gap-1.5 min-w-0">
+              {renderItemIcons(item)}
+              <span className={cn(
+                'text-[13px] leading-tight truncate',
+                isDir ? 'font-medium text-foreground' : 'text-foreground/90'
+              )}>
+                {item.name}
+              </span>
+            </div>
+            <div className="flex items-center gap-3 text-xs text-muted-foreground flex-shrink-0 ml-2">
+              {item.type === 'file' && (
+                <>
+                  <span className="tabular-nums">{formatFileSize(item.size)}</span>
+                  <span className="font-mono">{item.permissionsRwx}</span>
+                </>
+              )}
+            </div>
+          </div>
+
+          {isDir && isOpen && item.children && (
+            <div className="relative">
+              <span
+                className="absolute top-0 bottom-0 border-l border-border/40"
+                style={{ left: `${level * 16 + 14}px` }}
+                aria-hidden="true"
+              />
+              {renderCompactView(item.children, level + 1)}
+            </div>
           )}
-          style={{ paddingLeft: `${level * 16 + 12}px` }}
-          onClick={() => {
-            if (item.type === 'directory') {
-              toggleDirectory(item.path);
-            } else if (isImageFile(item.name)) {
-              setSelectedImage({
-                name: item.name,
-                path: item.path,
-                projectPath: selectedProject.path,
-                projectName: selectedProject.name
-              });
-            } else {
-              setSelectedFile({
-                name: item.name,
-                path: item.path,
-                projectPath: selectedProject.path,
-                projectName: selectedProject.name
-              });
-            }
-          }}
-        >
-          <div className="flex items-center gap-2 min-w-0">
-            {item.type === 'directory' ? (
-              expandedDirs.has(item.path) ? (
-                <FolderOpen className="w-4 h-4 text-blue-500 flex-shrink-0" />
-              ) : (
-                <Folder className="w-4 h-4 text-muted-foreground flex-shrink-0" />
-              )
-            ) : (
-              getFileIcon(item.name)
-            )}
-            <span className="text-sm truncate text-foreground">
-              {item.name}
-            </span>
-          </div>
-          <div className="flex items-center gap-3 text-xs text-muted-foreground">
-            {item.type === 'file' && (
-              <>
-                <span>{formatFileSize(item.size)}</span>
-                <span className="font-mono">{item.permissionsRwx}</span>
-              </>
-            )}
-          </div>
         </div>
-        
-        {item.type === 'directory' && 
-         expandedDirs.has(item.path) && 
-         item.children && 
-         renderCompactView(item.children, level + 1)}
-      </div>
-    ));
+      );
+    });
   };
 
+  // ─── Loading state ─────────────────────────────────────────────────
   if (loading) {
     return (
       <div className="h-full flex items-center justify-center">
-        <div className="text-gray-500 dark:text-gray-400">
+        <div className="text-muted-foreground text-sm">
           {t('fileTree.loading')}
         </div>
       </div>
     );
   }
 
+  // ─── Main render ───────────────────────────────────────────────────
   return (
     <div className="h-full flex flex-col bg-card">
-      {/* Header with Search and View Mode Toggle */}
-      <div className="p-4 border-b border-border space-y-3">
+      {/* Header */}
+      <div className="px-3 pt-3 pb-2 border-b border-border space-y-2">
         <div className="flex items-center justify-between">
-          <h3 className="text-sm font-medium text-foreground">{t('fileTree.files')}</h3>
-          <div className="flex gap-1">
+          <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            {t('fileTree.files')}
+          </h3>
+          <div className="flex gap-0.5">
             <Button
               variant={viewMode === 'simple' ? 'default' : 'ghost'}
               size="sm"
-              className="h-8 w-8 p-0"
+              className="h-7 w-7 p-0"
               onClick={() => changeViewMode('simple')}
               title={t('fileTree.simpleView')}
             >
-              <List className="w-4 h-4" />
+              <List className="w-3.5 h-3.5" />
             </Button>
             <Button
               variant={viewMode === 'compact' ? 'default' : 'ghost'}
               size="sm"
-              className="h-8 w-8 p-0"
+              className="h-7 w-7 p-0"
               onClick={() => changeViewMode('compact')}
               title={t('fileTree.compactView')}
             >
-              <Eye className="w-4 h-4" />
+              <Eye className="w-3.5 h-3.5" />
             </Button>
             <Button
               variant={viewMode === 'detailed' ? 'default' : 'ghost'}
               size="sm"
-              className="h-8 w-8 p-0"
+              className="h-7 w-7 p-0"
               onClick={() => changeViewMode('detailed')}
               title={t('fileTree.detailedView')}
             >
-              <TableProperties className="w-4 h-4" />
+              <TableProperties className="w-3.5 h-3.5" />
             </Button>
           </div>
         </div>
 
         {/* Search Bar */}
         <div className="relative">
-          <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
           <Input
             type="text"
             placeholder={t('fileTree.searchPlaceholder')}
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-8 pr-8 h-8 text-sm"
+            className="pl-7 pr-7 h-7 text-xs"
           />
           {searchQuery && (
             <Button
               variant="ghost"
               size="sm"
-              className="absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0 hover:bg-accent"
+              className="absolute right-0.5 top-1/2 transform -translate-y-1/2 h-5 w-5 p-0 hover:bg-accent"
               onClick={() => setSearchQuery('')}
               title={t('fileTree.clearSearch')}
             >
@@ -419,8 +682,8 @@ function FileTree({ selectedProject }) {
 
       {/* Column Headers for Detailed View */}
       {viewMode === 'detailed' && filteredFiles.length > 0 && (
-        <div className="px-4 pt-2 pb-1 border-b border-border">
-          <div className="grid grid-cols-12 gap-2 px-2 text-xs font-medium text-muted-foreground">
+        <div className="px-3 pt-1.5 pb-1 border-b border-border">
+          <div className="grid grid-cols-12 gap-2 px-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
             <div className="col-span-5">{t('fileTree.name')}</div>
             <div className="col-span-2">{t('fileTree.size')}</div>
             <div className="col-span-3">{t('fileTree.modified')}</div>
@@ -429,7 +692,7 @@ function FileTree({ selectedProject }) {
         </div>
       )}
 
-      <ScrollArea className="flex-1 p-4">
+      <ScrollArea className="flex-1 px-2 py-1">
         {files.length === 0 ? (
           <div className="text-center py-8">
             <div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-3">
@@ -451,14 +714,14 @@ function FileTree({ selectedProject }) {
             </p>
           </div>
         ) : (
-          <div className={viewMode === 'detailed' ? '' : 'space-y-1'}>
+          <div>
             {viewMode === 'simple' && renderFileTree(filteredFiles)}
             {viewMode === 'compact' && renderCompactView(filteredFiles)}
             {viewMode === 'detailed' && renderDetailedView(filteredFiles)}
           </div>
         )}
       </ScrollArea>
-      
+
       {/* Code Editor Modal */}
       {selectedFile && (
         <CodeEditor
@@ -467,7 +730,7 @@ function FileTree({ selectedProject }) {
           projectPath={selectedFile.projectPath}
         />
       )}
-      
+
       {/* Image Viewer Modal */}
       {selectedImage && (
         <ImageViewer
@@ -479,4 +742,4 @@ function FileTree({ selectedProject }) {
   );
 }
 
-export default FileTree;
\ No newline at end of file
+export default FileTree;
diff --git a/src/components/GitPanel.jsx b/src/components/GitPanel.jsx
index 6d3df1b..3f03b6b 100644
--- a/src/components/GitPanel.jsx
+++ b/src/components/GitPanel.jsx
@@ -640,36 +640,36 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
   const renderCommitItem = (commit) => {
     const isExpanded = expandedCommits.has(commit.hash);
     const diff = commitDiffs[commit.hash];
-    
+
     return (
-      <div key={commit.hash} className="border-b border-gray-200 dark:border-gray-700 last:border-0">
-        <div 
-          className="flex items-start p-3 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer"
+      <div key={commit.hash} className="border-b border-border last:border-0">
+        <div
+          className="flex items-start p-3 hover:bg-accent/50 cursor-pointer transition-colors"
           onClick={() => toggleCommitExpanded(commit.hash)}
         >
-          <div className="mr-2 mt-1 p-0.5 hover:bg-gray-200 dark:hover:bg-gray-700 rounded">
+          <div className="mr-2 mt-1 p-0.5 hover:bg-accent rounded">
             {isExpanded ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
           </div>
           <div className="flex-1 min-w-0">
             <div className="flex items-start justify-between gap-2">
               <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium text-gray-900 dark:text-white truncate">
+                <p className="text-sm font-medium text-foreground truncate">
                   {commit.message}
                 </p>
-                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                <p className="text-xs text-muted-foreground mt-1">
                   {commit.author} • {commit.date}
                 </p>
               </div>
-              <span className="text-xs font-mono text-gray-400 dark:text-gray-500 flex-shrink-0">
+              <span className="text-xs font-mono text-muted-foreground/60 flex-shrink-0">
                 {commit.hash.substring(0, 7)}
               </span>
             </div>
           </div>
         </div>
         {isExpanded && diff && (
-          <div className="bg-gray-50 dark:bg-gray-900">
+          <div className="bg-muted/50">
             <div className="max-h-96 overflow-y-auto p-2">
-              <div className="text-xs font-mono text-gray-600 dark:text-gray-400 mb-2">
+              <div className="text-xs font-mono text-muted-foreground mb-2">
                 {commit.stats}
               </div>
               <DiffViewer diff={diff} fileName="commit" isMobile={isMobile} wrapText={wrapText} />
@@ -684,22 +684,20 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
     const isExpanded = expandedFiles.has(filePath);
     const isSelected = selectedFiles.has(filePath);
     const diff = gitDiff[filePath];
-    
+
     return (
-      <div key={filePath} className="border-b border-gray-200 dark:border-gray-700 last:border-0">
-        <div className={`flex items-center hover:bg-gray-50 dark:hover:bg-gray-800 ${isMobile ? 'px-2 py-1.5' : 'px-3 py-2'}`}>
+      <div key={filePath} className="border-b border-border last:border-0">
+        <div className={`flex items-center hover:bg-accent/50 transition-colors ${isMobile ? 'px-2 py-1.5' : 'px-3 py-2'}`}>
           <input
             type="checkbox"
             checked={isSelected}
             onChange={() => toggleFileSelected(filePath)}
             onClick={(e) => e.stopPropagation()}
-            className={`rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-800 dark:checked:bg-blue-600 ${isMobile ? 'mr-1.5' : 'mr-2'}`}
+            className={`rounded border-border text-primary focus:ring-primary/40 bg-background checked:bg-primary ${isMobile ? 'mr-1.5' : 'mr-2'}`}
           />
-          <div
-            className="flex items-center flex-1"
-          >
+          <div className="flex items-center flex-1">
             <div
-              className={`p-0.5 hover:bg-gray-200 dark:hover:bg-gray-700 rounded cursor-pointer ${isMobile ? 'mr-1' : 'mr-2'}`}
+              className={`p-0.5 hover:bg-accent rounded cursor-pointer ${isMobile ? 'mr-1' : 'mr-2'}`}
               onClick={(e) => {
                 e.stopPropagation();
                 toggleFileExpanded(filePath);
@@ -708,7 +706,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
               <ChevronRight className={`w-3 h-3 transition-transform duration-200 ease-in-out ${isExpanded ? 'rotate-90' : 'rotate-0'}`} />
             </div>
             <span
-              className={`flex-1 truncate ${isMobile ? 'text-xs' : 'text-sm'} cursor-pointer hover:text-blue-600 dark:hover:text-blue-400 hover:underline`}
+              className={`flex-1 truncate ${isMobile ? 'text-xs' : 'text-sm'} cursor-pointer hover:text-primary hover:underline`}
               onClick={(e) => {
                 e.stopPropagation();
                 handleFileOpen(filePath);
@@ -722,16 +720,16 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                 <button
                   onClick={(e) => {
                     e.stopPropagation();
-                    setConfirmAction({ 
-                      type: 'discard', 
+                    setConfirmAction({
+                      type: 'discard',
                       file: filePath,
-                      message: `Discard all changes to "${filePath}"? This action cannot be undone.` 
+                      message: `Discard all changes to "${filePath}"? This action cannot be undone.`
                     });
                   }}
-                  className={`${isMobile ? 'px-2 py-1 text-xs' : 'p-1'} hover:bg-red-100 dark:hover:bg-red-900 rounded text-red-600 dark:text-red-400 font-medium flex items-center gap-1`}
+                  className={`${isMobile ? 'px-2 py-1 text-xs' : 'p-1'} hover:bg-destructive/10 rounded text-destructive font-medium flex items-center gap-1`}
                   title="Discard changes"
                 >
-                  <Trash2 className={`${isMobile ? 'w-3 h-3' : 'w-3 h-3'}`} />
+                  <Trash2 className="w-3 h-3" />
                   {isMobile && <span>Discard</span>}
                 </button>
               )}
@@ -739,25 +737,25 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                 <button
                   onClick={(e) => {
                     e.stopPropagation();
-                    setConfirmAction({ 
-                      type: 'delete', 
+                    setConfirmAction({
+                      type: 'delete',
                       file: filePath,
-                      message: `Delete untracked file "${filePath}"? This action cannot be undone.` 
+                      message: `Delete untracked file "${filePath}"? This action cannot be undone.`
                     });
                   }}
-                  className={`${isMobile ? 'px-2 py-1 text-xs' : 'p-1'} hover:bg-red-100 dark:hover:bg-red-900 rounded text-red-600 dark:text-red-400 font-medium flex items-center gap-1`}
+                  className={`${isMobile ? 'px-2 py-1 text-xs' : 'p-1'} hover:bg-destructive/10 rounded text-destructive font-medium flex items-center gap-1`}
                   title="Delete untracked file"
                 >
-                  <Trash2 className={`${isMobile ? 'w-3 h-3' : 'w-3 h-3'}`} />
+                  <Trash2 className="w-3 h-3" />
                   {isMobile && <span>Delete</span>}
                 </button>
               )}
-              <span 
-                className={`inline-flex items-center justify-center w-5 h-5 rounded text-xs font-bold border ${
-                  status === 'M' ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800' :
-                  status === 'A' ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 border-green-200 dark:border-green-800' :
-                  status === 'D' ? 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 border-red-200 dark:border-red-800' :
-                  'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300 border-gray-300 dark:border-gray-600'
+              <span
+                className={`inline-flex items-center justify-center w-5 h-5 rounded text-[10px] font-bold border ${
+                  status === 'M' ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800/50' :
+                  status === 'A' ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300 border-green-200 dark:border-green-800/50' :
+                  status === 'D' ? 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300 border-red-200 dark:border-red-800/50' :
+                  'bg-muted text-muted-foreground border-border'
                 }`}
                 title={getStatusLabel(status)}
               >
@@ -766,25 +764,25 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
             </div>
           </div>
         </div>
-        <div className={`bg-gray-50 dark:bg-gray-900 transition-all duration-400 ease-in-out overflow-hidden ${
-          isExpanded && diff 
-            ? 'max-h-[600px] opacity-100 translate-y-0' 
+        <div className={`bg-muted/50 transition-all duration-400 ease-in-out overflow-hidden ${
+          isExpanded && diff
+            ? 'max-h-[600px] opacity-100 translate-y-0'
             : 'max-h-0 opacity-0 -translate-y-1'
         }`}>
             {/* Operation header */}
-            <div className="flex items-center justify-between p-2 border-b border-gray-200 dark:border-gray-700">
+            <div className="flex items-center justify-between p-2 border-b border-border">
               <div className="flex items-center gap-2">
-                <span 
-                  className={`inline-flex items-center justify-center w-5 h-5 rounded text-xs font-bold border ${
-                    status === 'M' ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800' :
-                    status === 'A' ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 border-green-200 dark:border-green-800' :
-                    status === 'D' ? 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 border-red-200 dark:border-red-800' :
-                    'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300 border-gray-300 dark:border-gray-600'
+                <span
+                  className={`inline-flex items-center justify-center w-5 h-5 rounded text-[10px] font-bold border ${
+                    status === 'M' ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800/50' :
+                    status === 'A' ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300 border-green-200 dark:border-green-800/50' :
+                    status === 'D' ? 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300 border-red-200 dark:border-red-800/50' :
+                    'bg-muted text-muted-foreground border-border'
                   }`}
                 >
                   {status}
                 </span>
-                <span className="text-sm font-medium text-gray-900 dark:text-white">
+                <span className="text-sm font-medium text-foreground">
                   {getStatusLabel(status)}
                 </span>
               </div>
@@ -794,7 +792,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                     e.stopPropagation();
                     setWrapText(!wrapText);
                   }}
-                  className="text-xs text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
+                  className="text-xs text-muted-foreground hover:text-foreground transition-colors"
                   title={wrapText ? "Switch to horizontal scroll" : "Switch to text wrap"}
                 >
                   {wrapText ? '↔️ Scroll' : '↩️ Wrap'}
@@ -811,7 +809,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
 
   if (!selectedProject) {
     return (
-      <div className="h-full flex items-center justify-center text-gray-500 dark:text-gray-400">
+      <div className="h-full flex items-center justify-center text-muted-foreground">
         <p>Select a project to view source control</p>
       </div>
     );
@@ -820,13 +818,13 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
   return (
     <div className="h-full flex flex-col bg-background">
       {/* Header */}
-      <div className={`flex items-center justify-between border-b border-gray-200 dark:border-gray-700 ${isMobile ? 'px-3 py-2' : 'px-4 py-3'}`}>
+      <div className={`flex items-center justify-between border-b border-border/60 ${isMobile ? 'px-3 py-2' : 'px-4 py-3'}`}>
         <div className="relative" ref={dropdownRef}>
           <button
             onClick={() => setShowBranchDropdown(!showBranchDropdown)}
-            className={`flex items-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors ${isMobile ? 'space-x-1 px-2 py-1' : 'space-x-2 px-3 py-1.5'}`}
+            className={`flex items-center hover:bg-accent rounded-lg transition-colors ${isMobile ? 'space-x-1 px-2 py-1' : 'space-x-2 px-3 py-1.5'}`}
           >
-            <GitBranch className={`text-gray-600 dark:text-gray-400 ${isMobile ? 'w-3 h-3' : 'w-4 h-4'}`} />
+            <GitBranch className={`text-muted-foreground ${isMobile ? 'w-3 h-3' : 'w-4 h-4'}`} />
             <div className="flex items-center gap-1">
               <span className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>{currentBranch}</span>
               {/* Remote status indicators */}
@@ -838,47 +836,47 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                     </span>
                   )}
                   {remoteStatus.behind > 0 && (
-                    <span className="text-blue-600 dark:text-blue-400" title={`${remoteStatus.behind} commit${remoteStatus.behind !== 1 ? 's' : ''} behind`}>
+                    <span className="text-primary" title={`${remoteStatus.behind} commit${remoteStatus.behind !== 1 ? 's' : ''} behind`}>
                       ↓{remoteStatus.behind}
                     </span>
                   )}
                   {remoteStatus.isUpToDate && (
-                    <span className="text-gray-500 dark:text-gray-400" title="Up to date with remote">
+                    <span className="text-muted-foreground" title="Up to date with remote">
                       ✓
                     </span>
                   )}
                 </div>
               )}
             </div>
-            <ChevronDown className={`w-3 h-3 text-gray-500 transition-transform ${showBranchDropdown ? 'rotate-180' : ''}`} />
+            <ChevronDown className={`w-3 h-3 text-muted-foreground transition-transform ${showBranchDropdown ? 'rotate-180' : ''}`} />
           </button>
-          
+
           {/* Branch Dropdown */}
           {showBranchDropdown && (
-            <div className="absolute top-full left-0 mt-1 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+            <div className="absolute top-full left-0 mt-1 w-64 bg-card rounded-xl shadow-lg border border-border z-50 overflow-hidden">
               <div className="py-1 max-h-64 overflow-y-auto">
                 {branches.map(branch => (
                   <button
                     key={branch}
                     onClick={() => switchBranch(branch)}
-                    className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 ${
-                      branch === currentBranch ? 'bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100' : 'text-gray-700 dark:text-gray-300'
+                    className={`w-full text-left px-4 py-2 text-sm hover:bg-accent transition-colors ${
+                      branch === currentBranch ? 'bg-accent/50 text-foreground' : 'text-muted-foreground'
                     }`}
                   >
                     <div className="flex items-center space-x-2">
-                      {branch === currentBranch && <Check className="w-3 h-3 text-green-600 dark:text-green-400" />}
+                      {branch === currentBranch && <Check className="w-3 h-3 text-primary" />}
                       <span className={branch === currentBranch ? 'font-medium' : ''}>{branch}</span>
                     </div>
                   </button>
                 ))}
               </div>
-              <div className="border-t border-gray-200 dark:border-gray-700 py-1">
+              <div className="border-t border-border py-1">
                 <button
                   onClick={() => {
                     setShowNewBranchModal(true);
                     setShowBranchDropdown(false);
                   }}
-                  className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center space-x-2"
+                  className="w-full text-left px-4 py-2 text-sm hover:bg-accent transition-colors flex items-center space-x-2"
                 >
                   <Plus className="w-3 h-3" />
                   <span>Create new branch</span>
@@ -895,12 +893,12 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
               {/* Publish button - show when branch doesn't exist on remote */}
               {!remoteStatus?.hasUpstream && (
                 <button
-                  onClick={() => setConfirmAction({ 
-                    type: 'publish', 
-                    message: `Publish branch "${currentBranch}" to ${remoteStatus.remoteName}?` 
+                  onClick={() => setConfirmAction({
+                    type: 'publish',
+                    message: `Publish branch "${currentBranch}" to ${remoteStatus.remoteName}?`
                   })}
                   disabled={isPublishing}
-                  className="px-2 py-1 text-xs bg-purple-600 text-white rounded hover:bg-purple-700 disabled:opacity-50 flex items-center gap-1"
+                  className="px-2.5 py-1 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 flex items-center gap-1 transition-colors"
                   title={`Publish branch "${currentBranch}" to ${remoteStatus.remoteName}`}
                 >
                   <Upload className={`w-3 h-3 ${isPublishing ? 'animate-pulse' : ''}`} />
@@ -914,41 +912,41 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                   {/* Pull button - show when behind (primary action) */}
                   {remoteStatus.behind > 0 && (
                     <button
-                      onClick={() => setConfirmAction({ 
-                        type: 'pull', 
-                        message: `Pull ${remoteStatus.behind} commit${remoteStatus.behind !== 1 ? 's' : ''} from ${remoteStatus.remoteName}?` 
+                      onClick={() => setConfirmAction({
+                        type: 'pull',
+                        message: `Pull ${remoteStatus.behind} commit${remoteStatus.behind !== 1 ? 's' : ''} from ${remoteStatus.remoteName}?`
                       })}
                       disabled={isPulling}
-                      className="px-2 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50 flex items-center gap-1"
+                      className="px-2.5 py-1 text-xs bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 flex items-center gap-1 transition-colors"
                       title={`Pull ${remoteStatus.behind} commit${remoteStatus.behind !== 1 ? 's' : ''} from ${remoteStatus.remoteName}`}
                     >
                       <Download className={`w-3 h-3 ${isPulling ? 'animate-pulse' : ''}`} />
                       <span>{isPulling ? 'Pulling...' : `Pull ${remoteStatus.behind}`}</span>
                     </button>
                   )}
-                  
+
                   {/* Push button - show when ahead (primary action when ahead only) */}
                   {remoteStatus.ahead > 0 && (
                     <button
-                      onClick={() => setConfirmAction({ 
-                        type: 'push', 
-                        message: `Push ${remoteStatus.ahead} commit${remoteStatus.ahead !== 1 ? 's' : ''} to ${remoteStatus.remoteName}?` 
+                      onClick={() => setConfirmAction({
+                        type: 'push',
+                        message: `Push ${remoteStatus.ahead} commit${remoteStatus.ahead !== 1 ? 's' : ''} to ${remoteStatus.remoteName}?`
                       })}
                       disabled={isPushing}
-                      className="px-2 py-1 text-xs bg-orange-600 text-white rounded hover:bg-orange-700 disabled:opacity-50 flex items-center gap-1"
+                      className="px-2.5 py-1 text-xs bg-orange-600 text-white rounded-lg hover:bg-orange-700 disabled:opacity-50 flex items-center gap-1 transition-colors"
                       title={`Push ${remoteStatus.ahead} commit${remoteStatus.ahead !== 1 ? 's' : ''} to ${remoteStatus.remoteName}`}
                     >
                       <Upload className={`w-3 h-3 ${isPushing ? 'animate-pulse' : ''}`} />
                       <span>{isPushing ? 'Pushing...' : `Push ${remoteStatus.ahead}`}</span>
                     </button>
                   )}
-                  
+
                   {/* Fetch button - show when ahead only or when diverged (secondary action) */}
                   {(remoteStatus.ahead > 0 || (remoteStatus.behind > 0 && remoteStatus.ahead > 0)) && (
                     <button
                       onClick={handleFetch}
                       disabled={isFetching}
-                      className="px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 flex items-center gap-1"
+                      className="px-2.5 py-1 text-xs bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 flex items-center gap-1 transition-colors"
                       title={`Fetch from ${remoteStatus.remoteName}`}
                     >
                       <RefreshCw className={`w-3 h-3 ${isFetching ? 'animate-spin' : ''}`} />
@@ -967,42 +965,43 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
               fetchRemoteStatus();
             }}
             disabled={isLoading}
-            className={`hover:bg-gray-100 dark:hover:bg-gray-800 rounded ${isMobile ? 'p-1' : 'p-1.5'}`}
+            className={`hover:bg-accent rounded-lg transition-colors ${isMobile ? 'p-1' : 'p-1.5'}`}
           >
-            <RefreshCw className={`${isLoading ? 'animate-spin' : ''} ${isMobile ? 'w-3 h-3' : 'w-4 h-4'}`} />
+            <RefreshCw className={`text-muted-foreground ${isLoading ? 'animate-spin' : ''} ${isMobile ? 'w-3 h-3' : 'w-4 h-4'}`} />
           </button>
         </div>
       </div>
 
       {/* Git Repository Not Found Message */}
       {gitStatus?.error ? (
-        <div className="flex-1 flex flex-col items-center justify-center text-gray-500 dark:text-gray-400 px-6 py-12">
-          <GitBranch className="w-20 h-20 mb-6 opacity-30" />
-          <h3 className="text-xl font-medium mb-3 text-center">{gitStatus.error}</h3>
+        <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground px-6 py-12">
+          <div className="w-16 h-16 rounded-2xl bg-muted/50 flex items-center justify-center mb-6">
+            <GitBranch className="w-8 h-8 opacity-40" />
+          </div>
+          <h3 className="text-lg font-medium mb-3 text-center text-foreground">{gitStatus.error}</h3>
           {gitStatus.details && (
             <p className="text-sm text-center leading-relaxed mb-6 max-w-md">{gitStatus.details}</p>
           )}
-          {/* // ! This can be a custom component that can be reused for " Tip: Create a new project..." as well */}
-          <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 max-w-md">
-            <p className="text-sm text-blue-700 dark:text-blue-300 text-center">
-              <strong>Tip:</strong> Run <code className="bg-blue-100 dark:bg-blue-900 px-2 py-1 rounded font-mono text-xs">git init</code> in your project directory to initialize git source control.
+          <div className="p-4 bg-primary/5 rounded-xl border border-primary/10 max-w-md">
+            <p className="text-sm text-primary text-center">
+              <strong>Tip:</strong> Run <code className="bg-primary/10 px-2 py-1 rounded-md font-mono text-xs">git init</code> in your project directory to initialize git source control.
             </p>
           </div>
         </div>
       ) : (
         <>
           {/* Tab Navigation - Only show when git is available and no files expanded */}
-          <div className={`flex border-b border-gray-200 dark:border-gray-700 transition-all duration-300 ease-in-out ${
-            expandedFiles.size === 0 
-              ? 'max-h-16 opacity-100 translate-y-0' 
+          <div className={`flex border-b border-border/60 transition-all duration-300 ease-in-out ${
+            expandedFiles.size === 0
+              ? 'max-h-16 opacity-100 translate-y-0'
               : 'max-h-0 opacity-0 -translate-y-2 overflow-hidden'
           }`}>
             <button
               onClick={() => setActiveView('changes')}
               className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
                 activeView === 'changes'
-                  ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
+                  ? 'text-primary border-b-2 border-primary'
+                  : 'text-muted-foreground hover:text-foreground'
               }`}
             >
               <div className="flex items-center justify-center gap-2">
@@ -1014,8 +1013,8 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
               onClick={() => setActiveView('history')}
               className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
                 activeView === 'history'
-                  ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
+                  ? 'text-primary border-b-2 border-primary'
+                  : 'text-muted-foreground hover:text-foreground'
               }`}
             >
               <div className="flex items-center justify-center gap-2">
@@ -1035,10 +1034,10 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                   : 'max-h-0 opacity-0 -translate-y-2 overflow-hidden'
               }`}>
                 {isMobile && isCommitAreaCollapsed ? (
-                  <div className="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
+                  <div className="px-4 py-2 border-b border-border/60">
                       <button
                         onClick={() => setIsCommitAreaCollapsed(false)}
-                        className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700"
+                        className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
                       >
                         <GitCommit className="w-4 h-4" />
                         <span>Commit {selectedFiles.size} file{selectedFiles.size !== 1 ? 's' : ''}</span>
@@ -1048,27 +1047,27 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                   ) : (
                 <>
                   {/* Commit Message Input */}
-                  <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+                  <div className="px-4 py-3 border-b border-border/60">
                     {/* Mobile collapse button */}
                     {isMobile && (
                       <div className="flex items-center justify-between mb-2">
-                        <span className="text-sm font-medium">Commit Changes</span>
+                        <span className="text-sm font-medium text-foreground">Commit Changes</span>
                         <button
                           onClick={() => setIsCommitAreaCollapsed(true)}
-                          className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
+                          className="p-1 hover:bg-accent rounded-lg transition-colors"
                         >
                           <ChevronDown className="w-4 h-4 rotate-180" />
                         </button>
                       </div>
                     )}
-                    
+
                     <div className="relative">
                       <textarea
                         ref={textareaRef}
                         value={commitMessage}
                         onChange={(e) => setCommitMessage(e.target.value)}
                         placeholder="Message (Ctrl+Enter to commit)"
-                        className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 resize-none pr-20"
+                        className="w-full px-3 py-2 text-sm border border-border rounded-xl bg-background text-foreground placeholder:text-muted-foreground resize-none pr-20 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30"
                         rows="3"
                         onKeyDown={(e) => {
                           if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
@@ -1080,7 +1079,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                         <button
                           onClick={generateCommitMessage}
                           disabled={selectedFiles.size === 0 || isGeneratingMessage}
-                          className="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 disabled:opacity-50 disabled:cursor-not-allowed"
+                          className="p-1.5 text-muted-foreground hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                           title="Generate commit message"
                         >
                           {isGeneratingMessage ? (
@@ -1099,16 +1098,16 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                       </div>
                     </div>
                     <div className="flex items-center justify-between mt-2">
-                      <span className="text-xs text-gray-500">
+                      <span className="text-xs text-muted-foreground">
                         {selectedFiles.size} file{selectedFiles.size !== 1 ? 's' : ''} selected
                       </span>
                       <button
-                        onClick={() => setConfirmAction({ 
-                          type: 'commit', 
-                          message: `Commit ${selectedFiles.size} file${selectedFiles.size !== 1 ? 's' : ''} with message: "${commitMessage.trim()}"?` 
+                        onClick={() => setConfirmAction({
+                          type: 'commit',
+                          message: `Commit ${selectedFiles.size} file${selectedFiles.size !== 1 ? 's' : ''} with message: "${commitMessage.trim()}"?`
                         })}
                         disabled={!commitMessage.trim() || selectedFiles.size === 0 || isCommitting}
-                        className="px-3 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-1"
+                        className="px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-1 transition-colors"
                       >
                         <Check className="w-3 h-3" />
                         <span>{isCommitting ? 'Committing...' : 'Commit'}</span>
@@ -1123,12 +1122,12 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
 
           {/* File Selection Controls - Only show in changes view and when git is working and no files expanded */}
           {activeView === 'changes' && gitStatus && !gitStatus.error && (
-            <div className={`border-b border-gray-200 dark:border-gray-700 flex items-center justify-between transition-all duration-300 ease-in-out ${isMobile ? 'px-3 py-1.5' : 'px-4 py-2'} ${
-              expandedFiles.size === 0 
-                ? 'max-h-16 opacity-100 translate-y-0' 
+            <div className={`border-b border-border/60 flex items-center justify-between transition-all duration-300 ease-in-out ${isMobile ? 'px-3 py-1.5' : 'px-4 py-2'} ${
+              expandedFiles.size === 0
+                ? 'max-h-16 opacity-100 translate-y-0'
                 : 'max-h-0 opacity-0 -translate-y-2 overflow-hidden'
             }`}>
-              <span className={`text-gray-600 dark:text-gray-400 ${isMobile ? 'text-xs' : 'text-xs'}`}>
+              <span className="text-xs text-muted-foreground">
                 {selectedFiles.size} of {(gitStatus?.modified?.length || 0) + (gitStatus?.added?.length || 0) + (gitStatus?.deleted?.length || 0) + (gitStatus?.untracked?.length || 0)} {isMobile ? '' : 'files'} selected
               </span>
               <div className={`flex ${isMobile ? 'gap-1' : 'gap-2'}`}>
@@ -1142,14 +1141,14 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                     ]);
                     setSelectedFiles(allFiles);
                   }}
-                  className={`text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 ${isMobile ? 'text-xs' : 'text-xs'}`}
+                  className="text-xs text-primary hover:text-primary/80 transition-colors"
                 >
                   {isMobile ? 'All' : 'Select All'}
                 </button>
-                <span className="text-gray-300 dark:text-gray-600">|</span>
+                <span className="text-border">|</span>
                 <button
                   onClick={() => setSelectedFiles(new Set())}
-                  className={`text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 ${isMobile ? 'text-xs' : 'text-xs'}`}
+                  className="text-xs text-primary hover:text-primary/80 transition-colors"
                 >
                   {isMobile ? 'None' : 'Deselect All'}
                 </button>
@@ -1159,42 +1158,42 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
 
           {/* Status Legend Toggle - Hide on mobile by default */}
           {!gitStatus?.error && !isMobile && (
-            <div className="border-b border-gray-200 dark:border-gray-700">
+            <div className="border-b border-border/60">
               <button
                 onClick={() => setShowLegend(!showLegend)}
-                className="w-full px-4 py-2 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-750 text-xs text-gray-600 dark:text-gray-400 flex items-center justify-center gap-1"
+                className="w-full px-4 py-2 bg-muted/30 hover:bg-muted/50 text-xs text-muted-foreground flex items-center justify-center gap-1 transition-colors"
               >
                 <Info className="w-3 h-3" />
                 <span>File Status Guide</span>
                 {showLegend ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
               </button>
-              
+
               {showLegend && (
-                <div className="px-4 py-3 bg-gray-50 dark:bg-gray-800 text-xs">
+                <div className="px-4 py-3 bg-muted/30 text-xs">
                   <div className={`${isMobile ? 'grid grid-cols-2 gap-3 justify-items-center' : 'flex justify-center gap-6'}`}>
                     <div className="flex items-center gap-2">
-                      <span className="inline-flex items-center justify-center w-5 h-5 bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300 rounded border border-yellow-200 dark:border-yellow-800 font-bold text-xs">
+                      <span className="inline-flex items-center justify-center w-5 h-5 bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300 rounded border border-yellow-200 dark:border-yellow-800/50 font-bold text-[10px]">
                         M
                       </span>
-                      <span className="text-gray-600 dark:text-gray-400 italic">Modified</span>
+                      <span className="text-muted-foreground italic">Modified</span>
                     </div>
                     <div className="flex items-center gap-2">
-                      <span className="inline-flex items-center justify-center w-5 h-5 bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 rounded border border-green-200 dark:border-green-800 font-bold text-xs">
+                      <span className="inline-flex items-center justify-center w-5 h-5 bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300 rounded border border-green-200 dark:border-green-800/50 font-bold text-[10px]">
                         A
                       </span>
-                      <span className="text-gray-600 dark:text-gray-400 italic">Added</span>
+                      <span className="text-muted-foreground italic">Added</span>
                     </div>
                     <div className="flex items-center gap-2">
-                      <span className="inline-flex items-center justify-center w-5 h-5 bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 rounded border border-red-200 dark:border-red-800 font-bold text-xs">
+                      <span className="inline-flex items-center justify-center w-5 h-5 bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300 rounded border border-red-200 dark:border-red-800/50 font-bold text-[10px]">
                         D
                       </span>
-                      <span className="text-gray-600 dark:text-gray-400 italic">Deleted</span>
+                      <span className="text-muted-foreground italic">Deleted</span>
                     </div>
                     <div className="flex items-center gap-2">
-                      <span className="inline-flex items-center justify-center w-5 h-5 bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300 rounded border border-gray-300 dark:border-gray-600 font-bold text-xs">
+                      <span className="inline-flex items-center justify-center w-5 h-5 bg-muted text-muted-foreground rounded border border-border font-bold text-[10px]">
                         U
                       </span>
-                      <span className="text-gray-600 dark:text-gray-400 italic">Untracked</span>
+                      <span className="text-muted-foreground italic">Untracked</span>
                     </div>
                   </div>
                 </div>
@@ -1209,19 +1208,21 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
         <div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-mobile-nav' : ''}`}>
           {isLoading ? (
             <div className="flex items-center justify-center h-32">
-              <RefreshCw className="w-6 h-6 animate-spin text-gray-400" />
+              <RefreshCw className="w-5 h-5 animate-spin text-muted-foreground" />
             </div>
           ) : gitStatus?.hasCommits === false ? (
             <div className="flex flex-col items-center justify-center p-8 text-center">
-              <GitBranch className="w-16 h-16 mb-4 opacity-30 text-gray-400 dark:text-gray-500" />
-              <h3 className="text-lg font-medium mb-2 text-gray-900 dark:text-white">No commits yet</h3>
-              <p className="text-sm text-gray-500 dark:text-gray-400 mb-6 max-w-md">
+              <div className="w-14 h-14 rounded-2xl bg-muted/50 flex items-center justify-center mb-4">
+                <GitBranch className="w-7 h-7 text-muted-foreground/50" />
+              </div>
+              <h3 className="text-lg font-medium mb-2 text-foreground">No commits yet</h3>
+              <p className="text-sm text-muted-foreground mb-6 max-w-md">
                 This repository doesn't have any commits yet. Create your first commit to start tracking changes.
               </p>
               <button
                 onClick={createInitialCommit}
                 disabled={isCreatingInitialCommit}
-                className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+                className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors"
               >
                 {isCreatingInitialCommit ? (
                   <>
@@ -1237,8 +1238,8 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
               </button>
             </div>
           ) : !gitStatus || (!gitStatus.modified?.length && !gitStatus.added?.length && !gitStatus.deleted?.length && !gitStatus.untracked?.length) ? (
-            <div className="flex flex-col items-center justify-center h-32 text-gray-500 dark:text-gray-400">
-              <GitCommit className="w-12 h-12 mb-2 opacity-50" />
+            <div className="flex flex-col items-center justify-center h-32 text-muted-foreground">
+              <GitCommit className="w-10 h-10 mb-2 opacity-40" />
               <p className="text-sm">No changes detected</p>
             </div>
           ) : (
@@ -1257,11 +1258,11 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
         <div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-mobile-nav' : ''}`}>
           {isLoading ? (
             <div className="flex items-center justify-center h-32">
-              <RefreshCw className="w-6 h-6 animate-spin text-gray-400" />
+              <RefreshCw className="w-5 h-5 animate-spin text-muted-foreground" />
             </div>
           ) : recentCommits.length === 0 ? (
-            <div className="flex flex-col items-center justify-center h-32 text-gray-500 dark:text-gray-400">
-              <History className="w-12 h-12 mb-2 opacity-50" />
+            <div className="flex flex-col items-center justify-center h-32 text-muted-foreground">
+              <History className="w-10 h-10 mb-2 opacity-40" />
               <p className="text-sm">No commits found</p>
             </div>
           ) : (
@@ -1275,12 +1276,12 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
       {/* New Branch Modal */}
       {showNewBranchModal && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-          <div className="fixed inset-0 bg-black bg-opacity-50" onClick={() => setShowNewBranchModal(false)} />
-          <div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full">
+          <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setShowNewBranchModal(false)} />
+          <div className="relative bg-card border border-border rounded-xl shadow-2xl max-w-md w-full overflow-hidden">
             <div className="p-6">
-              <h3 className="text-lg font-semibold mb-4">Create New Branch</h3>
+              <h3 className="text-lg font-semibold text-foreground mb-4">Create New Branch</h3>
               <div className="mb-4">
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                <label className="block text-sm font-medium text-foreground/80 mb-2">
                   Branch Name
                 </label>
                 <input
@@ -1293,11 +1294,11 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                     }
                   }}
                   placeholder="feature/new-feature"
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full px-3 py-2 border border-border rounded-xl bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30"
                   autoFocus
                 />
               </div>
-              <div className="text-xs text-gray-500 dark:text-gray-400 mb-4">
+              <div className="text-xs text-muted-foreground mb-4">
                 This will create a new branch from the current branch ({currentBranch})
               </div>
               <div className="flex justify-end space-x-3">
@@ -1306,14 +1307,14 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                     setShowNewBranchModal(false);
                     setNewBranchName('');
                   }}
-                  className="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md"
+                  className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors"
                 >
                   Cancel
                 </button>
                 <button
                   onClick={createBranch}
                   disabled={!newBranchName.trim() || isCreatingBranch}
-                  className="px-4 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2"
+                  className="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2 transition-colors"
                 >
                   {isCreatingBranch ? (
                     <>
@@ -1336,44 +1337,44 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
       {/* Confirmation Modal */}
       {confirmAction && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-          <div className="fixed inset-0 bg-black bg-opacity-50" onClick={() => setConfirmAction(null)} />
-          <div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full">
+          <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setConfirmAction(null)} />
+          <div className="relative bg-card border border-border rounded-xl shadow-2xl max-w-md w-full overflow-hidden">
             <div className="p-6">
               <div className="flex items-center mb-4">
                 <div className={`p-2 rounded-full mr-3 ${
-                  (confirmAction.type === 'discard' || confirmAction.type === 'delete') ? 'bg-red-100 dark:bg-red-900' : 'bg-yellow-100 dark:bg-yellow-900'
+                  (confirmAction.type === 'discard' || confirmAction.type === 'delete') ? 'bg-red-100 dark:bg-red-900/30' : 'bg-yellow-100 dark:bg-yellow-900/30'
                 }`}>
                   <AlertTriangle className={`w-5 h-5 ${
                     (confirmAction.type === 'discard' || confirmAction.type === 'delete') ? 'text-red-600 dark:text-red-400' : 'text-yellow-600 dark:text-yellow-400'
                   }`} />
                 </div>
-                <h3 className="text-lg font-semibold">
-                  {confirmAction.type === 'discard' ? 'Discard Changes' : 
+                <h3 className="text-lg font-semibold text-foreground">
+                  {confirmAction.type === 'discard' ? 'Discard Changes' :
                    confirmAction.type === 'delete' ? 'Delete File' :
-                   confirmAction.type === 'commit' ? 'Confirm Commit' : 
-                   confirmAction.type === 'pull' ? 'Confirm Pull' : 
+                   confirmAction.type === 'commit' ? 'Confirm Commit' :
+                   confirmAction.type === 'pull' ? 'Confirm Pull' :
                    confirmAction.type === 'publish' ? 'Publish Branch' : 'Confirm Push'}
                 </h3>
               </div>
-              
-              <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">
+
+              <p className="text-sm text-muted-foreground mb-6">
                 {confirmAction.message}
               </p>
-              
+
               <div className="flex justify-end space-x-3">
                 <button
                   onClick={() => setConfirmAction(null)}
-                  className="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md"
+                  className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors"
                 >
                   Cancel
                 </button>
                 <button
                   onClick={confirmAndExecute}
-                  className={`px-4 py-2 text-sm text-white rounded-md ${
+                  className={`px-4 py-2 text-sm text-white rounded-lg transition-colors ${
                     (confirmAction.type === 'discard' || confirmAction.type === 'delete')
-                      ? 'bg-red-600 hover:bg-red-700' 
+                      ? 'bg-red-600 hover:bg-red-700'
                       : confirmAction.type === 'commit'
-                      ? 'bg-blue-600 hover:bg-blue-700'
+                      ? 'bg-primary hover:bg-primary/90'
                       : confirmAction.type === 'pull'
                       ? 'bg-green-600 hover:bg-green-700'
                       : confirmAction.type === 'publish'
diff --git a/src/components/MobileNav.jsx b/src/components/MobileNav.jsx
index 9940b42..6c26579 100644
--- a/src/components/MobileNav.jsx
+++ b/src/components/MobileNav.jsx
@@ -1,74 +1,90 @@
 import React from 'react';
-import { MessageSquare, Folder, Terminal, GitBranch, Globe, CheckSquare } from 'lucide-react';
+import { MessageSquare, Folder, Terminal, GitBranch, ClipboardCheck } from 'lucide-react';
 import { useTasksSettings } from '../contexts/TasksSettingsContext';
+import { useTaskMaster } from '../contexts/TaskMasterContext';
 
 function MobileNav({ activeTab, setActiveTab, isInputFocused }) {
-  const { tasksEnabled } = useTasksSettings();
+  const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings();
+  const shouldShowTasksTab = Boolean(tasksEnabled && isTaskMasterInstalled);
+
   const navItems = [
     {
       id: 'chat',
       icon: MessageSquare,
+      label: 'Chat',
       onClick: () => setActiveTab('chat')
     },
     {
       id: 'shell',
       icon: Terminal,
+      label: 'Shell',
       onClick: () => setActiveTab('shell')
     },
     {
       id: 'files',
       icon: Folder,
+      label: 'Files',
       onClick: () => setActiveTab('files')
     },
     {
       id: 'git',
       icon: GitBranch,
+      label: 'Git',
       onClick: () => setActiveTab('git')
     },
-    // Conditionally add tasks tab if enabled
-    ...(tasksEnabled ? [{
+    ...(shouldShowTasksTab ? [{
       id: 'tasks',
-      icon: CheckSquare,
+      icon: ClipboardCheck,
+      label: 'Tasks',
       onClick: () => setActiveTab('tasks')
     }] : [])
   ];
 
   return (
     <div
-      className={`fixed bottom-0 left-0 right-0 bg-background border-t border-border z-50 ios-bottom-safe transform transition-transform duration-300 ease-in-out shadow-lg ${
+      className={`fixed bottom-0 left-0 right-0 z-50 px-3 pb-[max(8px,env(safe-area-inset-bottom))] transform transition-transform duration-300 ease-in-out ${
         isInputFocused ? 'translate-y-full' : 'translate-y-0'
       }`}
     >
-      <div className="flex items-center justify-around py-1">
-        {navItems.map((item) => {
-          const Icon = item.icon;
-          const isActive = activeTab === item.id;
-          
-          return (
-            <button
-              key={item.id}
-              onClick={item.onClick}
-              onTouchStart={(e) => {
-                e.preventDefault();
-                item.onClick();
-              }}
-              className={`flex items-center justify-center p-2 rounded-lg min-h-[40px] min-w-[40px] relative touch-manipulation ${
-                isActive
-                  ? 'text-blue-600 dark:text-blue-400'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
-              }`}
-              aria-label={item.id}
-            >
-              <Icon className="w-5 h-5" />
-              {isActive && (
-                <div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-6 h-0.5 bg-blue-600 dark:bg-blue-400 rounded-full" />
-              )}
-            </button>
-          );
-        })}
+      <div className="nav-glass mobile-nav-float rounded-2xl border border-border/30">
+        <div className="flex items-center justify-around px-1 py-1.5 gap-0.5">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = activeTab === item.id;
+
+            return (
+              <button
+                key={item.id}
+                onClick={item.onClick}
+                onTouchStart={(e) => {
+                  e.preventDefault();
+                  item.onClick();
+                }}
+                className={`flex flex-col items-center justify-center gap-0.5 px-3 py-2 rounded-xl flex-1 relative touch-manipulation transition-all duration-200 active:scale-95 ${
+                  isActive
+                    ? 'text-primary'
+                    : 'text-muted-foreground hover:text-foreground'
+                }`}
+                aria-label={item.label}
+                aria-current={isActive ? 'page' : undefined}
+              >
+                {isActive && (
+                  <div className="absolute inset-0 bg-primary/8 dark:bg-primary/12 rounded-xl" />
+                )}
+                <Icon
+                  className={`relative z-10 transition-all duration-200 ${isActive ? 'w-5 h-5' : 'w-[18px] h-[18px]'}`}
+                  strokeWidth={isActive ? 2.4 : 1.8}
+                />
+                <span className={`relative z-10 text-[10px] font-medium transition-all duration-200 ${isActive ? 'opacity-100' : 'opacity-60'}`}>
+                  {item.label}
+                </span>
+              </button>
+            );
+          })}
+        </div>
       </div>
     </div>
   );
 }
 
-export default MobileNav;
\ No newline at end of file
+export default MobileNav;
diff --git a/src/components/app/AppContent.tsx b/src/components/app/AppContent.tsx
index df2f818..100129d 100644
--- a/src/components/app/AppContent.tsx
+++ b/src/components/app/AppContent.tsx
@@ -74,7 +74,7 @@ export default function AppContent() {
   return (
     <div className="fixed inset-0 flex bg-background">
       {!isMobile ? (
-        <div className="h-full flex-shrink-0 border-r border-border bg-card">
+        <div className="h-full flex-shrink-0 border-r border-border/50">
           <Sidebar {...sidebarSharedProps} />
         </div>
       ) : (
@@ -83,7 +83,7 @@ export default function AppContent() {
             }`}
         >
           <button
-            className="fixed inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-150 ease-out"
+            className="fixed inset-0 bg-background/60 backdrop-blur-sm transition-opacity duration-150 ease-out"
             onClick={(event) => {
               event.stopPropagation();
               setSidebarOpen(false);
@@ -96,7 +96,7 @@ export default function AppContent() {
             aria-label={t('versionUpdate.ariaLabels.closeSidebar')}
           />
           <div
-            className={`relative w-[85vw] max-w-sm sm:w-80 h-full bg-card border-r border-border transform transition-transform duration-150 ease-out ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'
+            className={`relative w-[85vw] max-w-sm sm:w-80 h-full bg-card border-r border-border/40 transform transition-transform duration-150 ease-out ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'
               }`}
             onClick={(event) => event.stopPropagation()}
             onTouchStart={(event) => event.stopPropagation()}
diff --git a/src/components/chat/view/ChatInterface.tsx b/src/components/chat/view/ChatInterface.tsx
index 58bed6d..2926440 100644
--- a/src/components/chat/view/ChatInterface.tsx
+++ b/src/components/chat/view/ChatInterface.tsx
@@ -254,8 +254,8 @@ function ChatInterface({
 
     return (
       <div className="flex items-center justify-center h-full">
-        <div className="text-center text-gray-500 dark:text-gray-400">
-          <p>
+        <div className="text-center text-muted-foreground">
+          <p className="text-sm">
             {t('projectSelection.startChatWithProvider', {
               provider: selectedProviderLabel,
               defaultValue: 'Select a project to start chatting with {{provider}}',
diff --git a/src/components/chat/view/subcomponents/ChatComposer.tsx b/src/components/chat/view/subcomponents/ChatComposer.tsx
index fafc2c7..8a9bb44 100644
--- a/src/components/chat/view/subcomponents/ChatComposer.tsx
+++ b/src/components/chat/view/subcomponents/ChatComposer.tsx
@@ -201,9 +201,9 @@ export default function ChatComposer({
 
       {!hasQuestionPanel && <form onSubmit={onSubmit as (event: FormEvent<HTMLFormElement>) => void} className="relative max-w-4xl mx-auto">
         {isDragActive && (
-          <div className="absolute inset-0 bg-blue-500/20 border-2 border-dashed border-blue-500 rounded-lg flex items-center justify-center z-50">
-            <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg">
-              <svg className="w-8 h-8 text-blue-500 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div className="absolute inset-0 bg-primary/15 border-2 border-dashed border-primary/50 rounded-2xl flex items-center justify-center z-50">
+            <div className="bg-card rounded-xl p-4 shadow-lg border border-border/30">
+              <svg className="w-8 h-8 text-primary mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
@@ -217,7 +217,7 @@ export default function ChatComposer({
         )}
 
         {attachedImages.length > 0 && (
-          <div className="mb-2 p-2 bg-gray-50 dark:bg-gray-800 rounded-lg">
+          <div className="mb-2 p-2 bg-muted/40 rounded-xl">
             <div className="flex flex-wrap gap-2">
               {attachedImages.map((file, index) => (
                 <ImageAttachment
@@ -233,14 +233,14 @@ export default function ChatComposer({
         )}
 
         {showFileDropdown && filteredFiles.length > 0 && (
-          <div className="absolute bottom-full left-0 right-0 mb-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg max-h-48 overflow-y-auto z-50 backdrop-blur-sm">
+          <div className="absolute bottom-full left-0 right-0 mb-2 bg-card/95 backdrop-blur-md border border-border/50 rounded-xl shadow-lg max-h-48 overflow-y-auto z-50">
             {filteredFiles.map((file, index) => (
               <div
                 key={file.path}
-                className={`px-4 py-3 cursor-pointer border-b border-gray-100 dark:border-gray-700 last:border-b-0 touch-manipulation ${
+                className={`px-4 py-3 cursor-pointer border-b border-border/30 last:border-b-0 touch-manipulation ${
                   index === selectedFileIndex
-                    ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
-                    : 'hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
+                    ? 'bg-primary/8 text-primary'
+                    : 'hover:bg-accent/50 text-foreground'
                 }`}
                 onMouseDown={(event) => {
                   event.preventDefault();
@@ -253,7 +253,7 @@ export default function ChatComposer({
                 }}
               >
                 <div className="font-medium text-sm">{file.name}</div>
-                <div className="text-xs text-gray-500 dark:text-gray-400 font-mono">{file.path}</div>
+                <div className="text-xs text-muted-foreground font-mono">{file.path}</div>
               </div>
             ))}
           </div>
@@ -271,7 +271,7 @@ export default function ChatComposer({
 
         <div
           {...getRootProps()}
-          className={`relative bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-600 focus-within:ring-2 focus-within:ring-blue-500 dark:focus-within:ring-blue-500 focus-within:border-blue-500 transition-all duration-200 overflow-hidden ${
+          className={`relative bg-card/80 backdrop-blur-sm rounded-2xl shadow-sm border border-border/50 focus-within:shadow-md focus-within:border-primary/30 focus-within:ring-1 focus-within:ring-primary/15 transition-all duration-200 overflow-hidden ${
             isTextareaExpanded ? 'chat-input-expanded' : ''
           }`}
         >
@@ -296,17 +296,17 @@ export default function ChatComposer({
               onInput={onTextareaInput}
               placeholder={placeholder}
               disabled={isLoading}
-              className="chat-input-placeholder block w-full pl-12 pr-20 sm:pr-40 py-1.5 sm:py-4 bg-transparent rounded-2xl focus:outline-none text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 disabled:opacity-50 resize-none min-h-[50px] sm:min-h-[80px] max-h-[40vh] sm:max-h-[300px] overflow-y-auto text-base leading-6 transition-all duration-200"
+              className="chat-input-placeholder block w-full pl-12 pr-20 sm:pr-40 py-1.5 sm:py-4 bg-transparent rounded-2xl focus:outline-none text-foreground placeholder-muted-foreground/50 disabled:opacity-50 resize-none min-h-[50px] sm:min-h-[80px] max-h-[40vh] sm:max-h-[300px] overflow-y-auto text-base leading-6 transition-all duration-200"
               style={{ height: '50px' }}
             />
 
             <button
               type="button"
               onClick={openImagePicker}
-              className="absolute left-2 top-1/2 transform -translate-y-1/2 p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
+              className="absolute left-2 top-1/2 transform -translate-y-1/2 p-2 hover:bg-accent/60 rounded-xl transition-colors"
               title={t('input.attachImages')}
             >
-              <svg className="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-5 h-5 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
@@ -331,15 +331,15 @@ export default function ChatComposer({
                 event.preventDefault();
                 onSubmit(event);
               }}
-              className="absolute right-2 top-1/2 transform -translate-y-1/2 w-12 h-12 sm:w-12 sm:h-12 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed rounded-full flex items-center justify-center transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:ring-offset-gray-800"
+              className="absolute right-2 top-1/2 transform -translate-y-1/2 w-10 h-10 sm:w-11 sm:h-11 bg-primary hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed rounded-xl flex items-center justify-center transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-1 focus:ring-offset-background"
             >
-              <svg className="w-4 h-4 sm:w-5 sm:h-5 text-white transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+              <svg className="w-4 h-4 sm:w-[18px] sm:h-[18px] text-primary-foreground transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
               </svg>
             </button>
 
             <div
-              className={`absolute bottom-1 left-12 right-14 sm:right-40 text-xs text-gray-400 dark:text-gray-500 pointer-events-none hidden sm:block transition-opacity duration-200 ${
+              className={`absolute bottom-1 left-12 right-14 sm:right-40 text-xs text-muted-foreground/50 pointer-events-none hidden sm:block transition-opacity duration-200 ${
                 input.trim() ? 'opacity-0' : 'opacity-100'
               }`}
             >
diff --git a/src/components/chat/view/subcomponents/ChatInputControls.tsx b/src/components/chat/view/subcomponents/ChatInputControls.tsx
index d4b9a70..fa76380 100644
--- a/src/components/chat/view/subcomponents/ChatInputControls.tsx
+++ b/src/components/chat/view/subcomponents/ChatInputControls.tsx
@@ -38,31 +38,31 @@ export default function ChatInputControls({
   const { t } = useTranslation('chat');
 
   return (
-    <div className="flex items-center justify-center gap-3">
+    <div className="flex items-center justify-center gap-2 sm:gap-3 flex-wrap">
       <button
         type="button"
         onClick={onModeSwitch}
-        className={`px-3 py-1.5 rounded-lg text-sm font-medium border transition-all duration-200 ${
+        className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-lg text-xs sm:text-sm font-medium border transition-all duration-200 ${
           permissionMode === 'default'
-            ? 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-600'
+            ? 'bg-muted/50 text-muted-foreground border-border/60 hover:bg-muted'
             : permissionMode === 'acceptEdits'
-              ? 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 border-green-300 dark:border-green-600 hover:bg-green-100 dark:hover:bg-green-900/30'
+              ? 'bg-green-50 dark:bg-green-900/15 text-green-700 dark:text-green-300 border-green-300/60 dark:border-green-600/40 hover:bg-green-100 dark:hover:bg-green-900/25'
               : permissionMode === 'bypassPermissions'
-                ? 'bg-orange-50 dark:bg-orange-900/20 text-orange-700 dark:text-orange-300 border-orange-300 dark:border-orange-600 hover:bg-orange-100 dark:hover:bg-orange-900/30'
-                : 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-600 hover:bg-blue-100 dark:hover:bg-blue-900/30'
+                ? 'bg-orange-50 dark:bg-orange-900/15 text-orange-700 dark:text-orange-300 border-orange-300/60 dark:border-orange-600/40 hover:bg-orange-100 dark:hover:bg-orange-900/25'
+                : 'bg-primary/5 text-primary border-primary/20 hover:bg-primary/10'
         }`}
         title={t('input.clickToChangeMode')}
       >
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1.5">
           <div
-            className={`w-2 h-2 rounded-full ${
+            className={`w-1.5 h-1.5 rounded-full ${
               permissionMode === 'default'
-                ? 'bg-gray-500'
+                ? 'bg-muted-foreground'
                 : permissionMode === 'acceptEdits'
                   ? 'bg-green-500'
                   : permissionMode === 'bypassPermissions'
                     ? 'bg-orange-500'
-                    : 'bg-blue-500'
+                    : 'bg-primary'
             }`}
           />
           <span>
@@ -83,10 +83,10 @@ export default function ChatInputControls({
       <button
         type="button"
         onClick={onToggleCommandMenu}
-        className="relative w-8 h-8 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-full flex items-center justify-center transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:ring-offset-gray-800"
+        className="relative w-7 h-7 sm:w-8 sm:h-8 text-muted-foreground hover:text-foreground rounded-lg flex items-center justify-center transition-colors hover:bg-accent/60"
         title={t('input.showAllCommands')}
       >
-        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg className="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -96,8 +96,7 @@ export default function ChatInputControls({
         </svg>
         {slashCommandsCount > 0 && (
           <span
-            className="absolute -top-1 -right-1 bg-blue-600 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center"
-            style={{ fontSize: '10px' }}
+            className="absolute -top-1 -right-1 bg-primary text-primary-foreground text-[10px] font-bold rounded-full w-4 h-4 sm:w-5 sm:h-5 flex items-center justify-center"
           >
             {slashCommandsCount}
           </span>
@@ -108,11 +107,11 @@ export default function ChatInputControls({
         <button
           type="button"
           onClick={onClearInput}
-          className="w-8 h-8 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-full flex items-center justify-center transition-all duration-200 group shadow-sm"
+          className="w-7 h-7 sm:w-8 sm:h-8 bg-card hover:bg-accent/60 border border-border/50 rounded-lg flex items-center justify-center transition-all duration-200 group shadow-sm"
           title={t('input.clearInput', { defaultValue: 'Clear input' })}
         >
           <svg
-            className="w-4 h-4 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100 transition-colors"
+            className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-muted-foreground group-hover:text-foreground transition-colors"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -125,10 +124,10 @@ export default function ChatInputControls({
       {isUserScrolledUp && hasMessages && (
         <button
           onClick={onScrollToBottom}
-          className="w-8 h-8 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg flex items-center justify-center transition-all duration-200 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:ring-offset-gray-800"
+          className="w-7 h-7 sm:w-8 sm:h-8 bg-primary hover:bg-primary/90 text-primary-foreground rounded-lg shadow-sm flex items-center justify-center transition-all duration-200 hover:scale-105"
           title={t('input.scrollToBottom', { defaultValue: 'Scroll to bottom' })}
         >
-          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg className="w-3.5 h-3.5 sm:w-4 sm:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
           </svg>
         </button>
diff --git a/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx b/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
index 35d0572..b3543e9 100644
--- a/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
+++ b/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Check, ChevronDown } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import SessionProviderLogo from '../../../SessionProviderLogo';
 import NextTaskBanner from '../../../NextTaskBanner.jsx';
@@ -23,6 +24,54 @@ interface ProviderSelectionEmptyStateProps {
   setInput: React.Dispatch<React.SetStateAction<string>>;
 }
 
+type ProviderDef = {
+  id: SessionProvider;
+  name: string;
+  infoKey: string;
+  accent: string;
+  ring: string;
+  check: string;
+};
+
+const PROVIDERS: ProviderDef[] = [
+  {
+    id: 'claude',
+    name: 'Claude Code',
+    infoKey: 'providerSelection.providerInfo.anthropic',
+    accent: 'border-primary',
+    ring: 'ring-primary/15',
+    check: 'bg-primary text-primary-foreground',
+  },
+  {
+    id: 'cursor',
+    name: 'Cursor',
+    infoKey: 'providerSelection.providerInfo.cursorEditor',
+    accent: 'border-violet-500 dark:border-violet-400',
+    ring: 'ring-violet-500/15',
+    check: 'bg-violet-500 text-white',
+  },
+  {
+    id: 'codex',
+    name: 'Codex',
+    infoKey: 'providerSelection.providerInfo.openai',
+    accent: 'border-emerald-600 dark:border-emerald-400',
+    ring: 'ring-emerald-600/15',
+    check: 'bg-emerald-600 dark:bg-emerald-500 text-white',
+  },
+];
+
+function getModelConfig(p: SessionProvider) {
+  if (p === 'claude') return CLAUDE_MODELS;
+  if (p === 'codex') return CODEX_MODELS;
+  return CURSOR_MODELS;
+}
+
+function getModelValue(p: SessionProvider, c: string, cu: string, co: string) {
+  if (p === 'claude') return c;
+  if (p === 'codex') return co;
+  return cu;
+}
+
 export default function ProviderSelectionEmptyState({
   selectedSession,
   currentSessionId,
@@ -41,185 +90,133 @@ export default function ProviderSelectionEmptyState({
   setInput,
 }: ProviderSelectionEmptyStateProps) {
   const { t } = useTranslation('chat');
-  // Reuse one translated prompt so task-start behavior stays consistent across empty and session states.
   const nextTaskPrompt = t('tasks.nextTaskPrompt', { defaultValue: 'Start the next task' });
 
-  const selectProvider = (nextProvider: SessionProvider) => {
-    setProvider(nextProvider);
-    localStorage.setItem('selected-provider', nextProvider);
+  const selectProvider = (next: SessionProvider) => {
+    setProvider(next);
+    localStorage.setItem('selected-provider', next);
     setTimeout(() => textareaRef.current?.focus(), 100);
   };
 
-  return (
-    <div className="flex items-center justify-center h-full">
-      {!selectedSession && !currentSessionId && (
-        <div className="text-center px-6 sm:px-4 py-8">
-          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">{t('providerSelection.title')}</h2>
-          <p className="text-gray-600 dark:text-gray-400 mb-8">{t('providerSelection.description')}</p>
+  const handleModelChange = (value: string) => {
+    if (provider === 'claude') { setClaudeModel(value); localStorage.setItem('claude-model', value); }
+    else if (provider === 'codex') { setCodexModel(value); localStorage.setItem('codex-model', value); }
+    else { setCursorModel(value); localStorage.setItem('cursor-model', value); }
+  };
 
-          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
-            <button
-              onClick={() => selectProvider('claude')}
-              className={`group relative w-64 h-32 bg-white dark:bg-gray-800 rounded-xl border-2 transition-all duration-200 hover:scale-105 hover:shadow-xl ${
-                provider === 'claude'
-                  ? 'border-blue-500 shadow-lg ring-2 ring-blue-500/20'
-                  : 'border-gray-200 dark:border-gray-700 hover:border-blue-400'
-              }`}
-            >
-              <div className="flex flex-col items-center justify-center h-full gap-3">
-                <SessionProviderLogo provider="claude" className="w-10 h-10" />
-                <div>
-                  <p className="font-semibold text-gray-900 dark:text-white">Claude Code</p>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('providerSelection.providerInfo.anthropic')}</p>
-                </div>
-              </div>
-              {provider === 'claude' && (
-                <div className="absolute top-2 right-2">
-                  <div className="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center">
-                    <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
-                    </svg>
-                  </div>
-                </div>
-              )}
-            </button>
+  const modelConfig = getModelConfig(provider);
+  const currentModel = getModelValue(provider, claudeModel, cursorModel, codexModel);
 
-            <button
-              onClick={() => selectProvider('cursor')}
-              className={`group relative w-64 h-32 bg-white dark:bg-gray-800 rounded-xl border-2 transition-all duration-200 hover:scale-105 hover:shadow-xl ${
-                provider === 'cursor'
-                  ? 'border-purple-500 shadow-lg ring-2 ring-purple-500/20'
-                  : 'border-gray-200 dark:border-gray-700 hover:border-purple-400'
-              }`}
-            >
-              <div className="flex flex-col items-center justify-center h-full gap-3">
-                <SessionProviderLogo provider="cursor" className="w-10 h-10" />
-                <div>
-                  <p className="font-semibold text-gray-900 dark:text-white">Cursor</p>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('providerSelection.providerInfo.cursorEditor')}</p>
-                </div>
-              </div>
-              {provider === 'cursor' && (
-                <div className="absolute top-2 right-2">
-                  <div className="w-5 h-5 bg-purple-500 rounded-full flex items-center justify-center">
-                    <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
-                    </svg>
-                  </div>
-                </div>
-              )}
-            </button>
-
-            <button
-              onClick={() => selectProvider('codex')}
-              className={`group relative w-64 h-32 bg-white dark:bg-gray-800 rounded-xl border-2 transition-all duration-200 hover:scale-105 hover:shadow-xl ${
-                provider === 'codex'
-                  ? 'border-gray-800 dark:border-gray-300 shadow-lg ring-2 ring-gray-800/20 dark:ring-gray-300/20'
-                  : 'border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-400'
-              }`}
-            >
-              <div className="flex flex-col items-center justify-center h-full gap-3">
-                <SessionProviderLogo provider="codex" className="w-10 h-10" />
-                <div>
-                  <p className="font-semibold text-gray-900 dark:text-white">Codex</p>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('providerSelection.providerInfo.openai')}</p>
-                </div>
-              </div>
-              {provider === 'codex' && (
-                <div className="absolute top-2 right-2">
-                  <div className="w-5 h-5 bg-gray-800 dark:bg-gray-300 rounded-full flex items-center justify-center">
-                    <svg className="w-3 h-3 text-white dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
-                    </svg>
-                  </div>
-                </div>
-              )}
-            </button>
+  /* ── New session — provider picker ── */
+  if (!selectedSession && !currentSessionId) {
+    return (
+      <div className="flex items-center justify-center h-full px-4">
+        <div className="w-full max-w-md">
+          {/* Heading */}
+          <div className="text-center mb-8">
+            <h2 className="text-lg sm:text-xl font-semibold text-foreground tracking-tight">
+              {t('providerSelection.title')}
+            </h2>
+            <p className="text-[13px] text-muted-foreground mt-1">
+              {t('providerSelection.description')}
+            </p>
           </div>
 
-          <div className={`mb-6 transition-opacity duration-200 ${provider ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{t('providerSelection.selectModel')}</label>
-            {provider === 'claude' ? (
-              <select
-                value={claudeModel}
-                onChange={(e) => {
-                  const newModel = e.target.value;
-                  setClaudeModel(newModel);
-                  localStorage.setItem('claude-model', newModel);
-                }}
-                className="pl-4 pr-10 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 min-w-[140px]"
-              >
-                {CLAUDE_MODELS.OPTIONS.map(({ value, label }) => (
-                  <option key={value} value={value}>
-                    {label}
-                  </option>
-                ))}
-              </select>
-            ) : provider === 'codex' ? (
-              <select
-                value={codexModel}
-                onChange={(e) => {
-                  const newModel = e.target.value;
-                  setCodexModel(newModel);
-                  localStorage.setItem('codex-model', newModel);
-                }}
-                className="pl-4 pr-10 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-gray-500 min-w-[140px]"
-              >
-                {CODEX_MODELS.OPTIONS.map(({ value, label }) => (
-                  <option key={value} value={value}>
-                    {label}
-                  </option>
-                ))}
-              </select>
-            ) : (
-              <select
-                value={cursorModel}
-                onChange={(e) => {
-                  const newModel = e.target.value;
-                  setCursorModel(newModel);
-                  localStorage.setItem('cursor-model', newModel);
-                }}
-                className="pl-4 pr-10 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 min-w-[140px]"
-                disabled={provider !== 'cursor'}
-              >
-                {CURSOR_MODELS.OPTIONS.map(({ value, label }) => (
-                  <option key={value} value={value}>
-                    {label}
-                  </option>
-                ))}
-              </select>
-            )}
+          {/* Provider cards — horizontal row, equal width */}
+          <div className="grid grid-cols-3 gap-2 sm:gap-2.5 mb-6">
+            {PROVIDERS.map((p) => {
+              const active = provider === p.id;
+              return (
+                <button
+                  key={p.id}
+                  onClick={() => selectProvider(p.id)}
+                  className={`
+                    relative flex flex-col items-center gap-2.5 pt-5 pb-4 px-2
+                    rounded-xl border-[1.5px] transition-all duration-150
+                    active:scale-[0.97]
+                    ${active
+                      ? `${p.accent} ${p.ring} ring-2 bg-card shadow-sm`
+                      : 'border-border bg-card/60 hover:bg-card hover:border-border/80'
+                    }
+                  `}
+                >
+                  <SessionProviderLogo
+                    provider={p.id}
+                    className={`w-9 h-9 transition-transform duration-150 ${active ? 'scale-110' : ''}`}
+                  />
+                  <div className="text-center">
+                    <p className="text-[13px] font-semibold text-foreground leading-none">{p.name}</p>
+                    <p className="text-[10px] text-muted-foreground mt-1 leading-tight">{t(p.infoKey)}</p>
+                  </div>
+                  {/* Check badge */}
+                  {active && (
+                    <div className={`absolute -top-1 -right-1 w-[18px] h-[18px] rounded-full ${p.check} flex items-center justify-center shadow-sm`}>
+                      <Check className="w-2.5 h-2.5" strokeWidth={3} />
+                    </div>
+                  )}
+                </button>
+              );
+            })}
           </div>
 
-          <p className="text-sm text-gray-500 dark:text-gray-400">
-            {provider === 'claude'
-              ? t('providerSelection.readyPrompt.claude', { model: claudeModel })
-              : provider === 'cursor'
-                ? t('providerSelection.readyPrompt.cursor', { model: cursorModel })
-                : provider === 'codex'
-                  ? t('providerSelection.readyPrompt.codex', { model: codexModel })
-                  : t('providerSelection.readyPrompt.default')}
-          </p>
+          {/* Model picker — appears after provider is chosen */}
+          <div className={`transition-all duration-200 ${provider ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-1 pointer-events-none'}`}>
+            <div className="flex items-center justify-center gap-2 mb-5">
+              <span className="text-xs text-muted-foreground">{t('providerSelection.selectModel')}</span>
+              <div className="relative">
+                <select
+                  value={currentModel}
+                  onChange={(e) => handleModelChange(e.target.value)}
+                  tabIndex={-1}
+                  className="appearance-none pl-3 pr-7 py-1.5 text-xs font-medium bg-muted/50 border border-border/60 rounded-lg text-foreground cursor-pointer hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-primary/20"
+                >
+                  {modelConfig.OPTIONS.map(({ value, label }: { value: string; label: string }) => (
+                    <option key={value} value={value}>{label}</option>
+                  ))}
+                </select>
+                <ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 w-3 h-3 text-muted-foreground pointer-events-none" />
+              </div>
+            </div>
 
+            <p className="text-center text-xs text-muted-foreground/70">
+              {provider === 'claude'
+                ? t('providerSelection.readyPrompt.claude', { model: claudeModel })
+                : provider === 'cursor'
+                  ? t('providerSelection.readyPrompt.cursor', { model: cursorModel })
+                  : provider === 'codex'
+                    ? t('providerSelection.readyPrompt.codex', { model: codexModel })
+                    : t('providerSelection.readyPrompt.default')}
+            </p>
+          </div>
+
+          {/* Task banner */}
           {provider && tasksEnabled && isTaskMasterInstalled && (
-            <div className="mt-4 px-4 sm:px-0">
+            <div className="mt-5">
               <NextTaskBanner onStartTask={() => setInput(nextTaskPrompt)} onShowAllTasks={onShowAllTasks} />
             </div>
           )}
         </div>
-      )}
-      {selectedSession && (
-        <div className="text-center text-gray-500 dark:text-gray-400 px-6 sm:px-4">
-          <p className="font-bold text-lg sm:text-xl mb-3">{t('session.continue.title')}</p>
-          <p className="text-sm sm:text-base leading-relaxed">{t('session.continue.description')}</p>
+      </div>
+    );
+  }
+
+  /* ── Existing session — continue prompt ── */
+  if (selectedSession) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center px-6 max-w-md">
+          <p className="text-lg font-semibold text-foreground mb-1.5">{t('session.continue.title')}</p>
+          <p className="text-sm text-muted-foreground leading-relaxed">{t('session.continue.description')}</p>
 
           {tasksEnabled && isTaskMasterInstalled && (
-            <div className="mt-4 px-4 sm:px-0">
+            <div className="mt-5">
               <NextTaskBanner onStartTask={() => setInput(nextTaskPrompt)} onShowAllTasks={onShowAllTasks} />
             </div>
           )}
         </div>
-      )}
-    </div>
-  );
+      </div>
+    );
+  }
+
+  return null;
 }
diff --git a/src/components/main-content/view/subcomponents/MainContentHeader.tsx b/src/components/main-content/view/subcomponents/MainContentHeader.tsx
index d1cc74a..a04c81b 100644
--- a/src/components/main-content/view/subcomponents/MainContentHeader.tsx
+++ b/src/components/main-content/view/subcomponents/MainContentHeader.tsx
@@ -13,9 +13,9 @@ export default function MainContentHeader({
   onMenuClick,
 }: MainContentHeaderProps) {
   return (
-    <div className="bg-background border-b border-border p-2 sm:p-3 pwa-header-safe flex-shrink-0">
-      <div className="flex items-center justify-between relative">
-        <div className="flex items-center space-x-2 min-w-0 flex-1">
+    <div className="bg-background border-b border-border/60 px-3 py-1.5 sm:px-4 sm:py-2 pwa-header-safe flex-shrink-0">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2 min-w-0 flex-1">
           {isMobile && <MobileMenuButton onMenuClick={onMenuClick} />}
           <MainContentTitle
             activeTab={activeTab}
diff --git a/src/components/main-content/view/subcomponents/MainContentStateView.tsx b/src/components/main-content/view/subcomponents/MainContentStateView.tsx
index ada5c52..0c1d6b6 100644
--- a/src/components/main-content/view/subcomponents/MainContentStateView.tsx
+++ b/src/components/main-content/view/subcomponents/MainContentStateView.tsx
@@ -1,3 +1,4 @@
+import { Folder } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import MobileMenuButton from './MobileMenuButton';
 import type { MainContentStateViewProps } from '../../types/types';
@@ -10,17 +11,17 @@ export default function MainContentStateView({ mode, isMobile, onMenuClick }: Ma
   return (
     <div className="h-full flex flex-col">
       {isMobile && (
-        <div className="bg-background border-b border-border p-2 sm:p-3 pwa-header-safe flex-shrink-0">
+        <div className="bg-background/80 backdrop-blur-sm border-b border-border/50 p-2 sm:p-3 pwa-header-safe flex-shrink-0">
           <MobileMenuButton onMenuClick={onMenuClick} compact />
         </div>
       )}
 
       {isLoading ? (
         <div className="flex-1 flex items-center justify-center">
-          <div className="text-center text-gray-500 dark:text-gray-400">
-            <div className="w-12 h-12 mx-auto mb-4">
+          <div className="text-center text-muted-foreground">
+            <div className="w-10 h-10 mx-auto mb-4">
               <div
-                className="w-full h-full rounded-full border-4 border-gray-200 border-t-blue-500"
+                className="w-full h-full rounded-full border-[3px] border-muted border-t-primary"
                 style={{
                   animation: 'spin 1s linear infinite',
                   WebkitAnimation: 'spin 1s linear infinite',
@@ -28,22 +29,20 @@ export default function MainContentStateView({ mode, isMobile, onMenuClick }: Ma
                 }}
               />
             </div>
-            <h2 className="text-xl font-semibold mb-2">{t('mainContent.loading')}</h2>
-            <p>{t('mainContent.settingUpWorkspace')}</p>
+            <h2 className="text-lg font-semibold text-foreground mb-1">{t('mainContent.loading')}</h2>
+            <p className="text-sm">{t('mainContent.settingUpWorkspace')}</p>
           </div>
         </div>
       ) : (
         <div className="flex-1 flex items-center justify-center">
-          <div className="text-center text-gray-500 dark:text-gray-400 max-w-md mx-auto px-6">
-            <div className="w-16 h-16 mx-auto mb-6 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
-              <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-5l-2-2H5a2 2 0 00-2 2z" />
-              </svg>
+          <div className="text-center max-w-md mx-auto px-6">
+            <div className="w-14 h-14 mx-auto mb-5 bg-muted/50 rounded-2xl flex items-center justify-center">
+              <Folder className="w-7 h-7 text-muted-foreground" />
             </div>
-            <h2 className="text-2xl font-semibold mb-3 text-gray-900 dark:text-white">{t('mainContent.chooseProject')}</h2>
-            <p className="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">{t('mainContent.selectProjectDescription')}</p>
-            <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
-              <p className="text-sm text-blue-700 dark:text-blue-300">
+            <h2 className="text-xl font-semibold mb-2 text-foreground">{t('mainContent.chooseProject')}</h2>
+            <p className="text-sm text-muted-foreground mb-5 leading-relaxed">{t('mainContent.selectProjectDescription')}</p>
+            <div className="bg-primary/5 rounded-xl p-3.5 border border-primary/10">
+              <p className="text-sm text-primary">
                 <strong>{t('mainContent.tip')}:</strong> {isMobile ? t('mainContent.createProjectMobile') : t('mainContent.createProjectDesktop')}
               </p>
             </div>
diff --git a/src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx b/src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx
index f1938be..af263b6 100644
--- a/src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx
+++ b/src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx
@@ -1,3 +1,4 @@
+import { MessageSquare, Terminal, Folder, GitBranch, ClipboardCheck, type LucideIcon } from 'lucide-react';
 import Tooltip from '../../../Tooltip';
 import type { AppTab } from '../../../../types/app';
 import type { Dispatch, SetStateAction } from 'react';
@@ -12,50 +13,22 @@ type MainContentTabSwitcherProps = {
 type TabDefinition = {
   id: AppTab;
   labelKey: string;
-  iconPath: string;
+  icon: LucideIcon;
 };
 
 const BASE_TABS: TabDefinition[] = [
-  {
-    id: 'chat',
-    labelKey: 'tabs.chat',
-    iconPath:
-      'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z',
-  },
-  {
-    id: 'shell',
-    labelKey: 'tabs.shell',
-    iconPath: 'M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2z',
-  },
-  {
-    id: 'files',
-    labelKey: 'tabs.files',
-    iconPath: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-5l-2-2H5a2 2 0 00-2 2z',
-  },
-  {
-    id: 'git',
-    labelKey: 'tabs.git',
-    iconPath: 'M13 10V3L4 14h7v7l9-11h-7z',
-  },
+  { id: 'chat', labelKey: 'tabs.chat', icon: MessageSquare },
+  { id: 'shell', labelKey: 'tabs.shell', icon: Terminal },
+  { id: 'files', labelKey: 'tabs.files', icon: Folder },
+  { id: 'git', labelKey: 'tabs.git', icon: GitBranch },
 ];
 
 const TASKS_TAB: TabDefinition = {
   id: 'tasks',
   labelKey: 'tabs.tasks',
-  iconPath:
-    'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4',
+  icon: ClipboardCheck,
 };
 
-function getButtonClasses(tabId: AppTab, activeTab: AppTab) {
-  const base = 'relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md transition-all duration-200';
-
-  if (tabId === activeTab) {
-    return `${base} bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm`;
-  }
-
-  return `${base} text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-700`;
-}
-
 export default function MainContentTabSwitcher({
   activeTab,
   setActiveTab,
@@ -66,19 +39,27 @@ export default function MainContentTabSwitcher({
   const tabs = shouldShowTasksTab ? [...BASE_TABS, TASKS_TAB] : BASE_TABS;
 
   return (
-    <div className="relative flex bg-gray-100 dark:bg-gray-800 rounded-lg p-1">
-      {tabs.map((tab) => (
-        <Tooltip key={tab.id} content={t(tab.labelKey)} position="bottom">
-          <button onClick={() => setActiveTab(tab.id)} className={getButtonClasses(tab.id, activeTab)}>
-            <span className="flex items-center gap-1 sm:gap-1.5">
-              <svg className="w-3 sm:w-3.5 h-3 sm:h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={tab.iconPath} />
-              </svg>
-              <span className="hidden md:hidden lg:inline">{t(tab.labelKey)}</span>
-            </span>
-          </button>
-        </Tooltip>
-      ))}
+    <div className="inline-flex items-center bg-muted/60 rounded-lg p-[3px] gap-[2px]">
+      {tabs.map((tab) => {
+        const Icon = tab.icon;
+        const isActive = tab.id === activeTab;
+
+        return (
+          <Tooltip key={tab.id} content={t(tab.labelKey)} position="bottom">
+            <button
+              onClick={() => setActiveTab(tab.id)}
+              className={`relative flex items-center gap-1.5 px-2.5 py-[5px] text-xs font-medium rounded-md transition-all duration-150 ${
+                isActive
+                  ? 'bg-background text-foreground shadow-sm'
+                  : 'text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              <Icon className="w-3.5 h-3.5" strokeWidth={isActive ? 2.2 : 1.8} />
+              <span className="hidden lg:inline">{t(tab.labelKey)}</span>
+            </button>
+          </Tooltip>
+        );
+      })}
     </div>
   );
 }
diff --git a/src/components/main-content/view/subcomponents/MainContentTitle.tsx b/src/components/main-content/view/subcomponents/MainContentTitle.tsx
index 174c467..75cf91c 100644
--- a/src/components/main-content/view/subcomponents/MainContentTitle.tsx
+++ b/src/components/main-content/view/subcomponents/MainContentTitle.tsx
@@ -55,22 +55,22 @@ export default function MainContentTitle({
       <div className="min-w-0 flex-1">
         {activeTab === 'chat' && selectedSession ? (
           <div className="min-w-0">
-            <h2 className="text-sm sm:text-base font-semibold text-gray-900 dark:text-white whitespace-nowrap overflow-x-auto scrollbar-hide">
+            <h2 className="text-sm font-semibold text-foreground whitespace-nowrap overflow-x-auto scrollbar-hide leading-tight">
               {getSessionTitle(selectedSession)}
             </h2>
-            <div className="text-xs text-gray-500 dark:text-gray-400 truncate">{selectedProject.displayName}</div>
+            <div className="text-[11px] text-muted-foreground truncate leading-tight">{selectedProject.displayName}</div>
           </div>
         ) : showChatNewSession ? (
           <div className="min-w-0">
-            <h2 className="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">{t('mainContent.newSession')}</h2>
-            <div className="text-xs text-gray-500 dark:text-gray-400 truncate">{selectedProject.displayName}</div>
+            <h2 className="text-sm font-semibold text-foreground leading-tight">{t('mainContent.newSession')}</h2>
+            <div className="text-[11px] text-muted-foreground truncate leading-tight">{selectedProject.displayName}</div>
           </div>
         ) : (
           <div className="min-w-0">
-            <h2 className="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
+            <h2 className="text-sm font-semibold text-foreground leading-tight">
               {getTabTitle(activeTab, shouldShowTasksTab, t)}
             </h2>
-            <div className="text-xs text-gray-500 dark:text-gray-400 truncate">{selectedProject.displayName}</div>
+            <div className="text-[11px] text-muted-foreground truncate leading-tight">{selectedProject.displayName}</div>
           </div>
         )}
       </div>
diff --git a/src/components/main-content/view/subcomponents/MobileMenuButton.tsx b/src/components/main-content/view/subcomponents/MobileMenuButton.tsx
index 2333e4b..4aef6c1 100644
--- a/src/components/main-content/view/subcomponents/MobileMenuButton.tsx
+++ b/src/components/main-content/view/subcomponents/MobileMenuButton.tsx
@@ -5,8 +5,8 @@ export default function MobileMenuButton({ onMenuClick, compact = false }: Mobil
   const { handleMobileMenuClick, handleMobileMenuTouchEnd } = useMobileMenuHandlers(onMenuClick);
 
   const buttonClasses = compact
-    ? 'p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 pwa-menu-button'
-    : 'p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 touch-manipulation active:scale-95 pwa-menu-button flex-shrink-0';
+    ? 'p-1.5 text-muted-foreground hover:text-foreground rounded-lg hover:bg-accent/60 pwa-menu-button'
+    : 'p-1.5 text-muted-foreground hover:text-foreground rounded-lg hover:bg-accent/60 touch-manipulation active:scale-95 pwa-menu-button flex-shrink-0';
 
   return (
     <button
diff --git a/src/components/sidebar/view/subcomponents/SidebarCollapsed.tsx b/src/components/sidebar/view/subcomponents/SidebarCollapsed.tsx
index a98756c..c1cc969 100644
--- a/src/components/sidebar/view/subcomponents/SidebarCollapsed.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarCollapsed.tsx
@@ -1,4 +1,4 @@
-import { Settings, Sparkles } from 'lucide-react';
+import { Settings, Sparkles, PanelLeftOpen } from 'lucide-react';
 import type { TFunction } from 'i18next';
 
 type SidebarCollapsedProps = {
@@ -17,41 +17,39 @@ export default function SidebarCollapsed({
   t,
 }: SidebarCollapsedProps) {
   return (
-    <div className="h-full flex flex-col items-center py-4 gap-4 bg-card">
+    <div className="h-full flex flex-col items-center py-3 gap-1 bg-background/80 backdrop-blur-sm w-12">
+      {/* Expand button with brand logo */}
       <button
         onClick={onExpand}
-        className="p-2 hover:bg-accent rounded-md transition-colors duration-200 group"
+        className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors group"
         aria-label={t('common:versionUpdate.ariaLabels.showSidebar')}
         title={t('common:versionUpdate.ariaLabels.showSidebar')}
       >
-        <svg
-          className="w-5 h-5 text-foreground group-hover:scale-110 transition-transform"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7M5 5l7 7-7 7" />
-        </svg>
+        <PanelLeftOpen className="w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors" />
       </button>
 
+      <div className="nav-divider w-6 my-1" />
+
+      {/* Settings */}
       <button
         onClick={onShowSettings}
-        className="p-2 hover:bg-accent rounded-md transition-colors duration-200"
+        className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors group"
         aria-label={t('actions.settings')}
         title={t('actions.settings')}
       >
-        <Settings className="w-5 h-5 text-muted-foreground hover:text-foreground transition-colors" />
+        <Settings className="w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors" />
       </button>
 
+      {/* Update indicator */}
       {updateAvailable && (
         <button
           onClick={onShowVersionModal}
-          className="relative p-2 hover:bg-accent rounded-md transition-colors duration-200"
+          className="relative w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors"
           aria-label={t('common:versionUpdate.ariaLabels.updateAvailable')}
           title={t('common:versionUpdate.ariaLabels.updateAvailable')}
         >
-          <Sparkles className="w-5 h-5 text-blue-500" />
-          <span className="absolute top-1 right-1 w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
+          <Sparkles className="w-4 h-4 text-blue-500" />
+          <span className="absolute top-1.5 right-1.5 w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse" />
         </button>
       )}
     </div>
diff --git a/src/components/sidebar/view/subcomponents/SidebarContent.tsx b/src/components/sidebar/view/subcomponents/SidebarContent.tsx
index 37b9874..5741925 100644
--- a/src/components/sidebar/view/subcomponents/SidebarContent.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarContent.tsx
@@ -49,7 +49,7 @@ export default function SidebarContent({
 }: SidebarContentProps) {
   return (
     <div
-      className="h-full flex flex-col bg-card md:select-none md:w-80"
+      className="h-full flex flex-col bg-background/80 backdrop-blur-sm md:select-none md:w-72"
       style={isPWA && isMobile ? { paddingTop: '44px' } : {}}
     >
       <SidebarHeader
@@ -67,7 +67,7 @@ export default function SidebarContent({
         t={t}
       />
 
-      <ScrollArea className="flex-1 md:px-2 md:py-3 overflow-y-auto overscroll-contain">
+      <ScrollArea className="flex-1 md:px-1.5 md:py-2 overflow-y-auto overscroll-contain">
         <SidebarProjectList {...projectListProps} />
       </ScrollArea>
 
diff --git a/src/components/sidebar/view/subcomponents/SidebarFooter.tsx b/src/components/sidebar/view/subcomponents/SidebarFooter.tsx
index de9dcbc..b9b8fc2 100644
--- a/src/components/sidebar/view/subcomponents/SidebarFooter.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarFooter.tsx
@@ -1,7 +1,6 @@
-import { Settings } from 'lucide-react';
+import { Settings, ArrowUpCircle } from 'lucide-react';
 import type { TFunction } from 'i18next';
 import type { ReleaseInfo } from '../../../../types/sharedTypes';
-import { Button } from '../../../ui/button';
 
 type SidebarFooterProps = {
   updateAvailable: boolean;
@@ -21,74 +20,81 @@ export default function SidebarFooter({
   t,
 }: SidebarFooterProps) {
   return (
-    <>
+    <div className="flex-shrink-0">
+      {/* Update banner */}
       {updateAvailable && (
-        <div className="md:p-2 border-t border-border/50 flex-shrink-0">
-          <div className="hidden md:block">
-            <Button
-              variant="ghost"
-              className="w-full justify-start gap-3 p-3 h-auto font-normal text-left hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors duration-200 border border-blue-200 dark:border-blue-700 rounded-lg mb-2"
+        <>
+          <div className="nav-divider" />
+          {/* Desktop update */}
+          <div className="hidden md:block px-2 py-1.5">
+            <button
+              className="w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-left hover:bg-blue-50/80 dark:hover:bg-blue-900/15 transition-colors group"
               onClick={onShowVersionModal}
             >
-              <div className="relative">
-                <svg className="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
-                </svg>
-                <div className="absolute -top-1 -right-1 w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
+              <div className="relative flex-shrink-0">
+                <ArrowUpCircle className="w-4 h-4 text-blue-500 dark:text-blue-400" />
+                <span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse" />
               </div>
               <div className="min-w-0 flex-1">
-                <div className="text-sm font-medium text-blue-700 dark:text-blue-300">
-                  {releaseInfo?.title || `Version ${latestVersion}`}
-                </div>
-                <div className="text-xs text-blue-600 dark:text-blue-400">{t('version.updateAvailable')}</div>
-              </div>
-            </Button>
-          </div>
-
-          <div className="md:hidden p-3 pb-2">
-            <button
-              className="w-full h-12 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-xl flex items-center justify-start gap-3 px-4 active:scale-[0.98] transition-all duration-150"
-              onClick={onShowVersionModal}
-            >
-              <div className="relative">
-                <svg className="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
-                </svg>
-                <div className="absolute -top-1 -right-1 w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
-              </div>
-              <div className="min-w-0 flex-1 text-left">
-                <div className="text-sm font-medium text-blue-700 dark:text-blue-300">
-                  {releaseInfo?.title || `Version ${latestVersion}`}
-                </div>
-                <div className="text-xs text-blue-600 dark:text-blue-400">{t('version.updateAvailable')}</div>
+                <span className="text-xs font-medium text-blue-600 dark:text-blue-300 truncate block">
+                  {releaseInfo?.title || `v${latestVersion}`}
+                </span>
+                <span className="text-[10px] text-blue-500/70 dark:text-blue-400/60">
+                  {t('version.updateAvailable')}
+                </span>
               </div>
             </button>
           </div>
-        </div>
+
+          {/* Mobile update */}
+          <div className="md:hidden px-3 py-2">
+            <button
+              className="w-full h-11 bg-blue-50/80 dark:bg-blue-900/15 border border-blue-200/60 dark:border-blue-700/40 rounded-xl flex items-center gap-3 px-3.5 active:scale-[0.98] transition-all"
+              onClick={onShowVersionModal}
+            >
+              <div className="relative flex-shrink-0">
+                <ArrowUpCircle className="w-4.5 h-4.5 text-blue-500 dark:text-blue-400" />
+                <span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse" />
+              </div>
+              <div className="min-w-0 flex-1 text-left">
+                <span className="text-sm font-medium text-blue-600 dark:text-blue-300 truncate block">
+                  {releaseInfo?.title || `v${latestVersion}`}
+                </span>
+                <span className="text-xs text-blue-500/70 dark:text-blue-400/60">
+                  {t('version.updateAvailable')}
+                </span>
+              </div>
+            </button>
+          </div>
+        </>
       )}
 
-      <div className="md:p-2 md:border-t md:border-border flex-shrink-0">
-        <div className="md:hidden p-4 pb-20 border-t border-border/50">
-          <button
-            className="w-full h-14 bg-muted/50 hover:bg-muted/70 rounded-2xl flex items-center justify-start gap-4 px-4 active:scale-[0.98] transition-all duration-150"
-            onClick={onShowSettings}
-          >
-            <div className="w-10 h-10 rounded-2xl bg-background/80 flex items-center justify-center">
-              <Settings className="w-5 h-5 text-muted-foreground" />
-            </div>
-            <span className="text-lg font-medium text-foreground">{t('actions.settings')}</span>
-          </button>
-        </div>
+      {/* Settings */}
+      <div className="nav-divider" />
 
-        <Button
-          variant="ghost"
-          className="hidden md:flex w-full justify-start gap-2 p-2 h-auto font-normal text-muted-foreground hover:text-foreground hover:bg-accent transition-colors duration-200"
+      {/* Desktop settings */}
+      <div className="hidden md:block px-2 py-1.5">
+        <button
+          className="w-full flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent/60 transition-colors"
           onClick={onShowSettings}
         >
-          <Settings className="w-3 h-3" />
+          <Settings className="w-3.5 h-3.5" />
           <span className="text-xs">{t('actions.settings')}</span>
-        </Button>
+        </button>
       </div>
-    </>
+
+      {/* Mobile settings */}
+      <div className="md:hidden p-3 pb-20">
+        <button
+          className="w-full h-12 bg-muted/40 hover:bg-muted/60 rounded-xl flex items-center gap-3.5 px-4 active:scale-[0.98] transition-all"
+          onClick={onShowSettings}
+        >
+          <div className="w-8 h-8 rounded-xl bg-background/80 flex items-center justify-center">
+            <Settings className="w-4.5 h-4.5 text-muted-foreground" />
+          </div>
+          <span className="text-base font-medium text-foreground">{t('actions.settings')}</span>
+        </button>
+      </div>
+    </div>
   );
 }
diff --git a/src/components/sidebar/view/subcomponents/SidebarHeader.tsx b/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
index 4b0ea22..20da7d9 100644
--- a/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
@@ -1,4 +1,4 @@
-import { FolderPlus, MessageSquare, RefreshCw, Search, X } from 'lucide-react';
+import { FolderPlus, Plus, RefreshCw, Search, X, PanelLeftClose } from 'lucide-react';
 import type { TFunction } from 'i18next';
 import { Button } from '../../../ui/button';
 import { Input } from '../../../ui/input';
@@ -33,155 +33,159 @@ export default function SidebarHeader({
   onCollapseSidebar,
   t,
 }: SidebarHeaderProps) {
+  const LogoBlock = () => (
+    <div className="flex items-center gap-2.5 min-w-0">
+      <div className="w-7 h-7 bg-primary/90 rounded-lg flex items-center justify-center shadow-sm flex-shrink-0">
+        <svg className="w-3.5 h-3.5 text-primary-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+        </svg>
+      </div>
+      <h1 className="text-sm font-semibold text-foreground tracking-tight truncate">{t('app.title')}</h1>
+    </div>
+  );
+
   return (
-    <>
+    <div className="flex-shrink-0">
+      {/* Desktop header */}
       <div
-        className="md:p-4 md:border-b md:border-border"
+        className="hidden md:block px-3 pt-3 pb-2"
         style={isPWA && isMobile ? { paddingTop: '44px' } : {}}
       >
-        <div className="hidden md:flex items-center justify-between">
+        <div className="flex items-center justify-between gap-2">
           {IS_PLATFORM ? (
             <a
               href="https://cloudcli.ai/dashboard"
-              className="flex items-center gap-3 hover:opacity-80 transition-opacity group"
+              className="flex items-center gap-2.5 min-w-0 hover:opacity-80 transition-opacity"
               title={t('tooltips.viewEnvironments')}
             >
-              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center shadow-sm group-hover:shadow-md transition-shadow">
-                <MessageSquare className="w-4 h-4 text-primary-foreground" />
-              </div>
-              <div>
-                <h1 className="text-lg font-bold text-foreground">{t('app.title')}</h1>
-                <p className="text-sm text-muted-foreground">{t('app.subtitle')}</p>
-              </div>
+              <LogoBlock />
             </a>
           ) : (
-            <div className="flex items-center gap-3">
-              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center shadow-sm">
-                <MessageSquare className="w-4 h-4 text-primary-foreground" />
-              </div>
-              <div>
-                <h1 className="text-lg font-bold text-foreground">{t('app.title')}</h1>
-                <p className="text-sm text-muted-foreground">{t('app.subtitle')}</p>
-              </div>
-            </div>
+            <LogoBlock />
           )}
 
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-8 w-8 px-0 hover:bg-accent transition-colors duration-200"
-            onClick={onCollapseSidebar}
-            title={t('tooltips.hideSidebar')}
-          >
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-            </svg>
-          </Button>
-        </div>
-
-        <div
-          className="md:hidden p-3 border-b border-border"
-          style={isPWA && isMobile ? { paddingTop: '16px' } : {}}
-        >
-          <div className="flex items-center justify-between">
-            {IS_PLATFORM ? (
-              <a
-                href="https://cloudcli.ai/dashboard"
-                className="flex items-center gap-3 active:opacity-70 transition-opacity"
-                title={t('tooltips.viewEnvironments')}
-              >
-                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-                  <MessageSquare className="w-4 h-4 text-primary-foreground" />
-                </div>
-                <div>
-                  <h1 className="text-lg font-semibold text-foreground">{t('app.title')}</h1>
-                  <p className="text-sm text-muted-foreground">{t('projects.title')}</p>
-                </div>
-              </a>
-            ) : (
-              <div className="flex items-center gap-3">
-                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-                  <MessageSquare className="w-4 h-4 text-primary-foreground" />
-                </div>
-                <div>
-                  <h1 className="text-lg font-semibold text-foreground">{t('app.title')}</h1>
-                  <p className="text-sm text-muted-foreground">{t('projects.title')}</p>
-                </div>
-              </div>
-            )}
-
-            <div className="flex gap-2">
-              <button
-                className="w-8 h-8 rounded-md bg-background border border-border flex items-center justify-center active:scale-95 transition-all duration-150"
-                onClick={onRefresh}
-                disabled={isRefreshing}
-              >
-                <RefreshCw className={`w-4 h-4 text-foreground ${isRefreshing ? 'animate-spin' : ''}`} />
-              </button>
-              <button
-                className="w-8 h-8 rounded-md bg-primary text-primary-foreground flex items-center justify-center active:scale-95 transition-all duration-150"
-                onClick={onCreateProject}
-              >
-                <FolderPlus className="w-4 h-4" />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {!isLoading && !isMobile && (
-        <div className="px-3 md:px-4 py-2 border-b border-border">
-          <div className="flex gap-2">
+          <div className="flex items-center gap-0.5 flex-shrink-0">
             <Button
-              variant="default"
+              variant="ghost"
               size="sm"
-              className="flex-1 h-8 text-xs bg-primary hover:bg-primary/90 transition-all duration-200"
-              onClick={onCreateProject}
-              title={t('tooltips.createProject')}
-            >
-              <FolderPlus className="w-3.5 h-3.5 mr-1.5" />
-              {t('projects.newProject')}
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-8 w-8 px-0 hover:bg-accent transition-colors duration-200 group"
+              className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground hover:bg-accent/80 rounded-lg"
               onClick={onRefresh}
               disabled={isRefreshing}
               title={t('tooltips.refresh')}
             >
               <RefreshCw
                 className={`w-3.5 h-3.5 ${
-                  isRefreshing ? 'animate-spin' : 'group-hover:rotate-180 transition-transform duration-300'
+                  isRefreshing ? 'animate-spin' : ''
                 }`}
               />
             </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground hover:bg-accent/80 rounded-lg"
+              onClick={onCreateProject}
+              title={t('tooltips.createProject')}
+            >
+              <Plus className="w-3.5 h-3.5" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground hover:bg-accent/80 rounded-lg"
+              onClick={onCollapseSidebar}
+              title={t('tooltips.hideSidebar')}
+            >
+              <PanelLeftClose className="w-3.5 h-3.5" />
+            </Button>
           </div>
         </div>
-      )}
 
-      {projectsCount > 0 && !isLoading && (
-        <div className="px-3 md:px-4 py-2 border-b border-border">
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+        {/* Search bar */}
+        {projectsCount > 0 && !isLoading && (
+          <div className="relative mt-2.5">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground/50 pointer-events-none" />
             <Input
               type="text"
               placeholder={t('projects.searchPlaceholder')}
               value={searchFilter}
               onChange={(event) => onSearchFilterChange(event.target.value)}
-              className="pl-9 h-9 text-sm bg-muted/50 border-0 focus:bg-background focus:ring-1 focus:ring-primary/20"
+              className="nav-search-input pl-9 pr-8 h-9 text-xs rounded-xl border-0 placeholder:text-muted-foreground/40 focus-visible:ring-0 focus-visible:ring-offset-0 transition-all duration-200"
             />
             {searchFilter && (
               <button
                 onClick={onClearSearchFilter}
-                className="absolute right-2 top-1/2 transform -translate-y-1/2 p-1 hover:bg-accent rounded"
+                className="absolute right-2.5 top-1/2 -translate-y-1/2 p-0.5 hover:bg-accent rounded-md"
               >
                 <X className="w-3 h-3 text-muted-foreground" />
               </button>
             )}
           </div>
+        )}
+      </div>
+
+      {/* Desktop divider */}
+      <div className="hidden md:block nav-divider" />
+
+      {/* Mobile header */}
+      <div
+        className="md:hidden p-3 pb-2"
+        style={isPWA && isMobile ? { paddingTop: '16px' } : {}}
+      >
+        <div className="flex items-center justify-between">
+          {IS_PLATFORM ? (
+            <a
+              href="https://cloudcli.ai/dashboard"
+              className="flex items-center gap-2.5 active:opacity-70 transition-opacity min-w-0"
+              title={t('tooltips.viewEnvironments')}
+            >
+              <LogoBlock />
+            </a>
+          ) : (
+            <LogoBlock />
+          )}
+
+          <div className="flex gap-1.5 flex-shrink-0">
+            <button
+              className="w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center active:scale-95 transition-all"
+              onClick={onRefresh}
+              disabled={isRefreshing}
+            >
+              <RefreshCw className={`w-4 h-4 text-muted-foreground ${isRefreshing ? 'animate-spin' : ''}`} />
+            </button>
+            <button
+              className="w-8 h-8 rounded-lg bg-primary/90 text-primary-foreground flex items-center justify-center active:scale-95 transition-all"
+              onClick={onCreateProject}
+            >
+              <FolderPlus className="w-4 h-4" />
+            </button>
+          </div>
         </div>
-      )}
-    </>
+
+        {/* Mobile search */}
+        {projectsCount > 0 && !isLoading && (
+          <div className="relative mt-2.5">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 pointer-events-none" />
+            <Input
+              type="text"
+              placeholder={t('projects.searchPlaceholder')}
+              value={searchFilter}
+              onChange={(event) => onSearchFilterChange(event.target.value)}
+              className="nav-search-input pl-10 pr-9 h-10 text-sm rounded-xl border-0 placeholder:text-muted-foreground/40 focus-visible:ring-0 focus-visible:ring-offset-0 transition-all duration-200"
+            />
+            {searchFilter && (
+              <button
+                onClick={onClearSearchFilter}
+                className="absolute right-2.5 top-1/2 -translate-y-1/2 p-1 hover:bg-accent rounded-md"
+              >
+                <X className="w-3.5 h-3.5 text-muted-foreground" />
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Mobile divider */}
+      <div className="md:hidden nav-divider" />
+    </div>
   );
 }
diff --git a/src/components/sidebar/view/subcomponents/SidebarModals.tsx b/src/components/sidebar/view/subcomponents/SidebarModals.tsx
index 312f389..a93d11b 100644
--- a/src/components/sidebar/view/subcomponents/SidebarModals.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarModals.tsx
@@ -84,12 +84,16 @@ export default function SidebarModals({
           document.body,
         )}
 
-      <TypedSettings
-        isOpen={showSettings}
-        onClose={onCloseSettings}
-        projects={settingsProjects}
-        initialTab={settingsInitialTab}
-      />
+      {showSettings &&
+        ReactDOM.createPortal(
+          <TypedSettings
+            isOpen={showSettings}
+            onClose={onCloseSettings}
+            projects={settingsProjects}
+            initialTab={settingsInitialTab}
+          />,
+          document.body,
+        )}
 
       {deleteConfirmation &&
         ReactDOM.createPortal(
diff --git a/src/index.css b/src/index.css
index 66615c9..a418694 100644
--- a/src/index.css
+++ b/src/index.css
@@ -43,7 +43,19 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 221.2 83.2% 53.3%;
     --radius: 0.5rem;
-    
+
+    /* Nav design tokens */
+    --nav-glass-bg: 0 0% 100% / 0.7;
+    --nav-glass-blur: 20px;
+    --nav-glass-saturate: 1.8;
+    --nav-tab-glow: 221.2 83.2% 53.3% / 0.18;
+    --nav-tab-ring: 221.2 83.2% 53.3% / 0.10;
+    --nav-float-shadow: 0 0% 0% / 0.06;
+    --nav-float-ring: 214.3 31.8% 91.4% / 0.5;
+    --nav-divider-color: 214.3 31.8% 91.4% / 0.5;
+    --nav-input-bg: 210 40% 96.1% / 0.5;
+    --nav-input-focus-ring: 221.2 83.2% 53.3% / 0.22;
+
     /* Safe area CSS variables */
     --safe-area-inset-top: env(safe-area-inset-top);
     --safe-area-inset-right: env(safe-area-inset-right);
@@ -51,9 +63,10 @@
     --safe-area-inset-left: env(safe-area-inset-left);
 
     /* Mobile navigation dimensions - Single source of truth */
-    --mobile-nav-height: 60px;
-    --mobile-nav-padding: 12px;
-    --mobile-nav-total: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
+    /* Floating nav: ~52px bar + 8px bottom margin + 12px px-3 top spacing */
+    --mobile-nav-height: 52px;
+    --mobile-nav-padding: 20px;
+    --mobile-nav-total: calc(var(--mobile-nav-height) + var(--mobile-nav-padding) + env(safe-area-inset-bottom, 0px));
 
     /* Header safe area dimensions */
     --header-safe-area-top: env(safe-area-inset-top, 0px);
@@ -91,6 +104,18 @@
     --border: 217.2 32.6% 17.5%;
     --input: 220 13% 46%;
     --ring: 217.2 91.2% 59.8%;
+
+    /* Nav design tokens — dark overrides */
+    --nav-glass-bg: 217.2 91.2% 8% / 0.55;
+    --nav-glass-blur: 24px;
+    --nav-glass-saturate: 1.6;
+    --nav-tab-glow: 217.2 91.2% 59.8% / 0.25;
+    --nav-tab-ring: 217.2 91.2% 59.8% / 0.15;
+    --nav-float-shadow: 0 0% 0% / 0.35;
+    --nav-float-ring: 217.2 32.6% 17.5% / 0.3;
+    --nav-divider-color: 217.2 32.6% 17.5% / 0.5;
+    --nav-input-bg: 217.2 32.6% 17.5% / 0.5;
+    --nav-input-focus-ring: 217.2 91.2% 59.8% / 0.25;
   }
 }
 
@@ -240,6 +265,42 @@
     transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
                 opacity 300ms ease-in-out;
   }
+
+  /* Nav glass surface — uses theme tokens */
+  .nav-glass {
+    background: hsl(var(--nav-glass-bg));
+    backdrop-filter: blur(var(--nav-glass-blur)) saturate(var(--nav-glass-saturate));
+    -webkit-backdrop-filter: blur(var(--nav-glass-blur)) saturate(var(--nav-glass-saturate));
+  }
+
+  /* Nav tab active pill glow — uses theme tokens */
+  .nav-tab-active {
+    box-shadow: 0 1px 8px hsl(var(--nav-tab-glow)),
+                0 0 0 1px hsl(var(--nav-tab-ring));
+  }
+
+  /* Floating mobile nav bar — uses theme tokens */
+  .mobile-nav-float {
+    box-shadow: 0 -1px 20px hsl(var(--nav-float-shadow)),
+                0 0 0 1px hsl(var(--nav-float-ring));
+  }
+
+  /* Subtle sidebar divider — uses theme tokens */
+  .nav-divider {
+    height: 1px;
+    background: linear-gradient(90deg, transparent, hsl(var(--nav-divider-color)) 20%, hsl(var(--nav-divider-color)) 80%, transparent);
+  }
+
+  /* Nav search input surface — uses theme tokens */
+  .nav-search-input {
+    background: hsl(var(--nav-input-bg));
+    border: none;
+  }
+
+  .nav-search-input:focus-within {
+    background: hsl(var(--background));
+    box-shadow: 0 0 0 2px hsl(var(--nav-input-focus-ring));
+  }
   
   /* Modal and dropdown transitions */
   .modal-transition {