diff --git a/internal/ui/static/index.html b/internal/ui/static/index.html
index 20195b2..485b9b3 100644
--- a/internal/ui/static/index.html
+++ b/internal/ui/static/index.html
@@ -62,6 +62,12 @@
             --remote-title-bg: linear-gradient(90deg, #e8c4c4, #d4a5a5, #e8d4d4, #e8c4c4);
             --remote-title-text: #4a1a1a;
             --remote-title-icon: #7a3a3a;
+            --shadow: 0 1px 2px rgba(0,0,0,0.05);
+            --dialog-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            --status-bar-bg: rgba(0,0,0,0.5);
+            --status-bar-text: #ccc;
+            --overlay-bg: rgba(0,0,0,0.7);
+            --overlay-text: #ffffff;
         }
 
         @media (prefers-color-scheme: dark) {
@@ -114,6 +120,12 @@
                 --remote-title-bg: linear-gradient(90deg, #4a3030, #3d2828, #5a3a3a, #4a3030);
                 --remote-title-text: #e8c4c4;
                 --remote-title-icon: #c4a0a0;
+                --shadow: 0 1px 2px rgba(0,0,0,0.3);
+                --dialog-shadow: 0 4px 24px rgba(0,0,0,0.4);
+                --status-bar-bg: rgba(255,255,255,0.15);
+                --status-bar-text: #c9d1d9;
+                --overlay-bg: rgba(0,0,0,0.85);
+                --overlay-text: #c9d1d9;
             }
         }
 
@@ -360,7 +372,7 @@
                 background: var(--active-bg);
                 border-left-color: var(--active-color);
                 font-weight: 500;
-                box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+                box-shadow: var(--shadow);
             }
 
         .wt-item-main {
@@ -428,7 +440,7 @@
         }
 
         .wt-action-btn:hover {
-            background-color: rgba(0,0,0,0.1);
+            background: var(--hover-bg);
             color: var(--text-primary);
         }
 
@@ -470,11 +482,46 @@
             flex: 1;
             display: flex;
             overflow-x: auto;
+            overflow-y: hidden;
             height: 100%;
             align-items: flex-end;
             gap: 4px;
         }
 
+        #tabs-container::-webkit-scrollbar,
+        #tabs-container::-webkit-scrollbar:horizontal {
+            -webkit-appearance: none;
+            height: 2px;
+            width: 0;
+            background: transparent;
+        }
+
+        #tabs-container::-webkit-scrollbar-track,
+        #tabs-container::-webkit-scrollbar-track-piece {
+            background: transparent;
+            border: none;
+        }
+
+        #tabs-container::-webkit-scrollbar-thumb,
+        #tabs-container::-webkit-scrollbar-thumb:horizontal {
+            background: var(--text-muted);
+            border-radius: 1px;
+            border: none;
+        }
+
+        #tabs-container::-webkit-scrollbar-thumb:hover,
+        #tabs-container::-webkit-scrollbar-thumb:active {
+            background: var(--text-secondary);
+        }
+
+        #tabs-container::-webkit-scrollbar-button,
+        #tabs-container::-webkit-scrollbar-corner {
+            display: none;
+            width: 0;
+            height: 0;
+            background: transparent;
+        }
+
         .tab {
             padding: 6px 12px;
             cursor: pointer;
@@ -482,6 +529,12 @@
             border-bottom: none;
             border-radius: 4px 4px 0 0;
             user-select: none;
+            color: var(--text-secondary);
+            margin-bottom: -1px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
         }
 
         /* Drag and drop visual feedback */
@@ -495,28 +548,21 @@
             box-shadow: inset 3px 0 0 var(--active-color);
             background: var(--active-bg);
         }
-            color: var(--text-secondary);
-            margin-bottom: -1px;
-            height: 32px;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
 
-            .tab:hover {
-                background: var(--hover-bg);
-            }
+        .tab:hover {
+            background: var(--hover-bg);
+        }
 
-            .tab.active {
-                background: var(--main-bg);
-                border-color: var(--border-color);
-                color: var(--text-primary);
-                border-top: 2px solid var(--active-color);
-            }
+        .tab.active {
+            background: var(--main-bg);
+            border-color: var(--border-color);
+            color: var(--text-primary);
+            border-top: 2px solid var(--active-color);
+        }
 
         /* Inline rename input */
         .tab-rename-input {
-            background: var(--bg-primary);
+            background: var(--main-bg);
             border: 1px solid var(--border-color);
             border-radius: 3px;
             padding: 1px 4px;
@@ -613,8 +659,8 @@
             position: absolute;
             bottom: 0;
             right: 0;
-            background: rgba(0,0,0,0.5);
-            color: #ccc;
+            background: var(--status-bar-bg);
+            color: var(--status-bar-text);
             padding: 2px 8px;
             font-size: 11px;
             z-index: 10;
@@ -623,8 +669,8 @@
             border-top-left-radius: 4px;
         }
         #status-bar:hover {
-            background: rgba(0,0,0,0.7);
-            color: #fff;
+            background: var(--hover-bg);
+            color: var(--text-primary);
         }
 
         /* Resource Monitor Modal */
@@ -634,46 +680,14 @@
             padding: 0;
             border: 1px solid var(--modal-border);
             border-radius: 10px;
-            box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+            box-shadow: var(--dialog-shadow);
         }
         #modal-monitor::backdrop {
             background: var(--modal-backdrop);
         }
-        #modal-monitor .monitor-titlebar {
-            display: flex;
-            align-items: center;
-            padding: 10px 12px;
-            border-bottom: 1px solid var(--border-color);
-            background: var(--hover-bg);
+        #modal-monitor .modal-titlebar {
             border-radius: 10px 10px 0 0;
         }
-        #modal-monitor .monitor-close-btn {
-            width: 14px;
-            height: 14px;
-            border-radius: 50%;
-            background: #ff5f57;
-            border: none;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            color: var(--text-secondary);
-            padding: 0;
-            flex-shrink: 0;
-            transition: opacity 0.15s;
-        }
-        #modal-monitor .monitor-close-btn:hover {
-            opacity: 0.85;
-        }
-        #modal-monitor .monitor-close-btn:active {
-            opacity: 0.7;
-        }
-        #modal-monitor .monitor-title {
-            margin-left: 10px;
-            font-size: 13px;
-            font-weight: 500;
-            color: var(--text-primary);
-        }
         #modal-monitor .monitor-summary {
             display: flex;
             gap: 12px;
@@ -807,8 +821,12 @@
         dialog {
             border: 1px solid var(--button-border);
             border-radius: 6px;
-            padding: 20px;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            padding: 0;
+            box-shadow: var(--dialog-shadow);
+            background: var(--main-bg);
+            color: var(--text-primary);
+            max-height: 90vh;
+            overflow-y: auto;
             width: 400px;
         }
 
@@ -848,18 +866,76 @@
             margin-top: 4px;
         }
 
-        /* LLM Settings Dialog */
+        /* Unified Modal Header & Body */
+        .modal-titlebar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px 12px;
+            border-bottom: 1px solid var(--border-color);
+            background: var(--hover-bg);
+            border-radius: 6px 6px 0 0;
+        }
+        .modal-title {
+            font-size: 13px;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+        .modal-close-btn {
+            width: 20px;
+            height: 20px;
+            border-radius: 4px;
+            background: none;
+            border: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            color: var(--text-muted);
+            padding: 0;
+            flex-shrink: 0;
+            transition: background 0.15s, color 0.15s;
+        }
+        .modal-close-btn:hover {
+            background: var(--border-color);
+            color: var(--danger-text);
+        }
+        .modal-close-btn:active {
+            opacity: 0.7;
+        }
+        .modal-body {
+            padding: 20px;
+        }
+
+        /* Connection Overlay */
+        #connection-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: var(--overlay-bg);
+            color: var(--overlay-text);
+            z-index: 9999;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            font-family: sans-serif;
+        }
+        #connection-overlay .conn-title {
+            font-size: 24px;
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+        #connection-overlay .conn-sub {
+            color: var(--overlay-text);
+        }
+
+        /* LLM Settings Dialog overrides */
         #dialog-llm-settings {
             width: 420px;
             max-width: 90vw;
-            padding: 24px;
-            border: 1px solid var(--border-color);
             border-radius: 8px;
-            box-shadow: 0 4px 24px rgba(0,0,0,0.15);
-        }
-
-        #dialog-llm-settings::backdrop {
-            background: var(--modal-backdrop);
         }
 
         /* Remote Access Warning */
@@ -933,7 +1009,7 @@
             button.primary {
                 background: var(--primary-button-bg);
                 color: white;
-                border: 1px solid rgba(27,31,35,0.15);
+                border: 1px solid var(--button-border);
             }
 
                 button.primary:hover {
@@ -999,9 +1075,9 @@
 </head>
 <body>
     <div id="app">
-        <div id="connection-overlay" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); color:white; z-index:9999; align-items:center; justify-content:center; flex-direction:column; font-family:sans-serif;">
-            <div style="font-size: 24px; font-weight: bold; margin-bottom: 10px;">Connection Lost</div>
-            <div style="color: #ccc;">Backend server unreachable. Retrying...</div>
+        <div id="connection-overlay" style="display:none;">
+            <div class="conn-title">Connection Lost</div>
+            <div class="conn-sub">Backend server unreachable. Retrying...</div>
         </div>
 
         <!-- Sidebar: Worktrees -->
@@ -1071,119 +1147,159 @@
 
     <!-- Modal: Create Worktree -->
     <dialog id="modal-create-wt">
-        <h3>Create Worktree</h3>
-        <div class="form-group">
-            <label>Task Description</label>
-            <div style="display:flex; gap:8px; align-items:center;">
-                <input id="wtTask" style="flex:1;" placeholder="e.g. fix login bug" oninput="onTaskDescChange()" />
-                <button type="button" id="btnAIGenerate" onclick="generateBranchName()">AI Generate</button>
-            </div>
-        </div>
-        <div class="form-group">
-            <label>Branch Name</label>
-            <input id="wtBranchName" placeholder="auto-generated or enter manually" />
-            <div class="muted" id="wtBranchPreview">Branch name preview</div>
-        </div>
-        <div class="form-group">
-            <label>Base Ref</label>
-            <select id="wtBaseSelect" onchange="onBaseRefChange()"></select>
-            <input id="wtBaseCustom" placeholder="custom ref" style="display:none; margin-top:4px" />
-        </div>
-        <div class="form-group">
-            <label><input type="checkbox" id="wtAdopt" /> Adopt existing branch/worktree if exists</label>
+        <div class="modal-titlebar">
+            <span class="modal-title">Create Worktree</span>
+            <button class="modal-close-btn" onclick="closeModal('modal-create-wt')" title="Close">
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <line x1="1" y1="1" x2="9" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                    <line x1="9" y1="1" x2="1" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                </svg>
+            </button>
         </div>
-        <div class="form-actions">
-            <button type="button" id="btnLLMSettings" onclick="openLLMSettingsDialog()" style="display:none;">LLM Settings</button>
-            <div style="flex:1;"></div>
-            <button onclick="closeModal('modal-create-wt')">Cancel</button>
-            <button class="primary" onclick="doCreateWorktree()">Create</button>
+        <div class="modal-body">
+            <div class="form-group">
+                <label>Task Description</label>
+                <div style="display:flex; gap:8px; align-items:center;">
+                    <input id="wtTask" style="flex:1;" placeholder="e.g. fix login bug" oninput="onTaskDescChange()" />
+                    <button type="button" id="btnAIGenerate" onclick="generateBranchName()">AI Generate</button>
+                </div>
+            </div>
+            <div class="form-group">
+                <label>Branch Name</label>
+                <input id="wtBranchName" placeholder="auto-generated or enter manually" />
+                <div class="muted" id="wtBranchPreview">Branch name preview</div>
+            </div>
+            <div class="form-group">
+                <label>Base Ref</label>
+                <select id="wtBaseSelect" onchange="onBaseRefChange()"></select>
+                <input id="wtBaseCustom" placeholder="custom ref" style="display:none; margin-top:4px" />
+            </div>
+            <div class="form-group">
+                <label><input type="checkbox" id="wtAdopt" /> Adopt existing branch/worktree if exists</label>
+            </div>
+            <div class="form-actions">
+                <button type="button" id="btnLLMSettings" onclick="openLLMSettingsDialog()" style="display:none;">LLM Settings</button>
+                <div style="flex:1;"></div>
+                <button onclick="closeModal('modal-create-wt')">Cancel</button>
+                <button class="primary" onclick="doCreateWorktree()">Create</button>
+            </div>
         </div>
     </dialog>
 
     <!-- LLM Settings Dialog -->
     <dialog id="dialog-llm-settings">
-        <h3>LLM Settings</h3>
-        <div id="llm-settings-error" style="color:var(--danger-text);display:none;"></div>
-        <div class="form-group">
-            <label>Protocol</label>
-            <select id="llmProtocol" onchange="onLLMProtocolChange()">
-                <option value="openai">OpenAI</option>
-                <option value="anthropic">Anthropic</option>
-            </select>
-        </div>
-        <div class="form-group">
-            <label>Model</label>
-            <input id="llmModel" placeholder="e.g. deepseek-chat" />
-            <div class="muted" id="llm-model-hint">Enter model name manually</div>
-        </div>
-        <div class="form-group">
-            <label>API Address</label>
-            <input id="llmAPIAddress" type="url" placeholder="https://api.deepseek.com/v1/chat/completions" />
-            <div class="muted">Full URL including path</div>
-        </div>
-        <div class="form-group">
-            <label>API Key</label>
-            <input id="llmAPIKey" type="password" placeholder="sk-..." />
-            <div id="llm-api-key-masked" class="muted"></div>
-        </div>
-        <div class="form-group">
-            <label><input type="checkbox" id="llmReasoningSplit" /> Enable reasoning_split (for providers that support it)</label>
+        <div class="modal-titlebar">
+            <span class="modal-title">LLM Settings</span>
+            <button class="modal-close-btn" onclick="closeLLMSettingsDialog()" title="Close">
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <line x1="1" y1="1" x2="9" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                    <line x1="9" y1="1" x2="1" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                </svg>
+            </button>
         </div>
-        <div class="form-actions">
-            <button type="button" onclick="testLLMConnection()">Test Connection</button>
-            <span id="llm-test-result" style="font-size:12px;flex:1;"></span>
-            <button onclick="closeLLMSettingsDialog()">Cancel</button>
-            <button class="primary" onclick="saveLLMSettings()">Save</button>
+        <div class="modal-body">
+            <div id="llm-settings-error" style="color:var(--danger-text);display:none;"></div>
+            <div class="form-group">
+                <label>Protocol</label>
+                <select id="llmProtocol" onchange="onLLMProtocolChange()">
+                    <option value="openai">OpenAI</option>
+                    <option value="anthropic">Anthropic</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label>Model</label>
+                <input id="llmModel" placeholder="e.g. deepseek-chat" />
+                <div class="muted" id="llm-model-hint">Enter model name manually</div>
+            </div>
+            <div class="form-group">
+                <label>API Address</label>
+                <input id="llmAPIAddress" type="url" placeholder="https://api.deepseek.com/v1/chat/completions" />
+                <div class="muted">Full URL including path</div>
+            </div>
+            <div class="form-group">
+                <label>API Key</label>
+                <input id="llmAPIKey" type="password" placeholder="sk-..." />
+                <div id="llm-api-key-masked" class="muted"></div>
+            </div>
+            <div class="form-group">
+                <label><input type="checkbox" id="llmReasoningSplit" /> Enable reasoning_split (for providers that support it)</label>
+            </div>
+            <div class="form-actions">
+                <button type="button" onclick="testLLMConnection()">Test Connection</button>
+                <span id="llm-test-result" style="font-size:12px;flex:1;"></span>
+                <button onclick="closeLLMSettingsDialog()">Cancel</button>
+                <button class="primary" onclick="saveLLMSettings()">Save</button>
+            </div>
         </div>
     </dialog>
 
     <!-- Modal: Import Worktree -->
     <dialog id="modal-import-wt" style="width: 80vw; max-width: 900px;">
-        <h3>Import Worktree</h3>
-        <div id="import-candidates" style="margin-bottom: 15px; max-height: 200px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 6px; display: none;">
-            <!-- filled by JS -->
-        </div>
-        <div class="form-group">
-            <label>Or manually by Branch/Name/Path</label>
-            <input id="wtImportName" placeholder="e.g. feature/foo or /abs/path" />
+        <div class="modal-titlebar">
+            <span class="modal-title">Import Worktree</span>
+            <button class="modal-close-btn" onclick="closeModal('modal-import-wt')" title="Close">
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <line x1="1" y1="1" x2="9" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                    <line x1="9" y1="1" x2="1" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                </svg>
+            </button>
         </div>
-        <div class="form-actions">
-            <button onclick="closeModal('modal-import-wt')">Cancel</button>
-            <button class="primary" onclick="doImportWorktree()">Import</button>
+        <div class="modal-body">
+            <div id="import-candidates" style="margin-bottom: 15px; max-height: 200px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 6px; display: none;">
+                <!-- filled by JS -->
+            </div>
+            <div class="form-group">
+                <label>Or manually by Branch/Name/Path</label>
+                <input id="wtImportName" placeholder="e.g. feature/foo or /abs/path" />
+            </div>
+            <div class="form-actions">
+                <button onclick="closeModal('modal-import-wt')">Cancel</button>
+                <button class="primary" onclick="doImportWorktree()">Import</button>
+            </div>
         </div>
     </dialog>
 
     <!-- Modal: Start Instance -->
     <dialog id="modal-start-instance">
-        <h3>Start Instance</h3>
-        <div class="form-group">
-            <label>Template <span id="template-edit-btn" class="wt-action-btn" style="display:inline-flex;vertical-align:middle;opacity:0.6" title="Edit templates" onclick="openTagsDir(event)"><svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></span></label>
-            <select id="tagSelect" onchange="onTagChange()"></select>
-        </div>
-        <div class="form-group">
-            <label>Or Custom Command</label>
-            <input id="cmd" placeholder="e.g. echo hello && zsh" />
-        </div>
-        <div class="form-group">
-            <label>Name (Optional)</label>
-            <input id="instName" placeholder="e.g. build-server" />
+        <div class="modal-titlebar">
+            <span class="modal-title">Start Instance</span>
+            <button class="modal-close-btn" onclick="closeModal('modal-start-instance')" title="Close">
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <line x1="1" y1="1" x2="9" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                    <line x1="9" y1="1" x2="1" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                </svg>
+            </button>
         </div>
-        <div class="form-actions">
-            <button onclick="closeModal('modal-start-instance')">Cancel</button>
-            <button class="primary" onclick="doStartInstance()">Start</button>
+        <div class="modal-body">
+            <div class="form-group">
+                <label>Template <span id="template-edit-btn" class="wt-action-btn" style="display:inline-flex;vertical-align:middle;opacity:0.6" title="Edit templates" onclick="openTagsDir(event)"><svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></span></label>
+                <select id="tagSelect" onchange="onTagChange()"></select>
+            </div>
+            <div class="form-group">
+                <label>Or Custom Command</label>
+                <input id="cmd" placeholder="e.g. echo hello && zsh" />
+            </div>
+            <div class="form-group">
+                <label>Name (Optional)</label>
+                <input id="instName" placeholder="e.g. build-server" />
+            </div>
+            <div class="form-actions">
+                <button onclick="closeModal('modal-start-instance')">Cancel</button>
+                <button class="primary" onclick="doStartInstance()">Start</button>
+            </div>
         </div>
     </dialog>
 
     <!-- Modal: Resource Monitor -->
     <dialog id="modal-monitor">
-        <div class="monitor-titlebar">
-            <button class="monitor-close-btn" onclick="closeMonitorModal()" title="Close">
+        <div class="modal-titlebar">
+            <span class="modal-title">Resource Monitor</span>
+            <button class="modal-close-btn" onclick="closeMonitorModal()" title="Close">
                 <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <line x1="1" y1="1" x2="9" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                     <line x1="9" y1="1" x2="1" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                 </svg>
             </button>
-            <span class="monitor-title">Resource Monitor</span>
         </div>
         <div class="monitor-summary" id="monitor-summary">
             <!-- filled by JS -->
@@ -2207,7 +2323,7 @@ <h3>Start Instance</h3>
                     }
                     list.style.display = 'block';
                 } catch (e) {
-                    list.innerHTML = `<div style="padding:8px;color:#cb2431">Error: ${e.message}</div>`;
+                    list.innerHTML = `<div style="padding:8px;color:var(--danger-text)">Error: ${e.message}</div>`;
                     list.style.display = 'block';
                 }
             }