Feat: Refine design language and use theme tokens across most pages.

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}}',

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'
               }`}
             >

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>

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;
 }