diff --git a/frontend/src/lib/components/TerminalTab.svelte b/frontend/src/lib/components/TerminalTab.svelte
index 5c516c2..621dc6e 100644
--- a/frontend/src/lib/components/TerminalTab.svelte
+++ b/frontend/src/lib/components/TerminalTab.svelte
@@ -148,8 +148,8 @@
 			cursorStyle: 'bar',
 			cursorInactiveStyle: 'outline',
 			fontFamily: "'JetBrains Mono Variable', 'JetBrains Mono', monospace",
-			fontSize: 13,
-			lineHeight: 1.4,
+			fontSize: 14,
+			lineHeight: 1.35,
 			letterSpacing: 0,
 			theme: TERM_THEME,
 			allowProposedApi: true,
@@ -360,6 +360,11 @@
 		padding: 12px 4px 12px 16px;
 		height: 100%;
 	}
+	/* Paint xterm's own background to cover any fractional-pixel gaps */
+	.terminal-container :global(.xterm-viewport),
+	.terminal-container :global(.xterm-screen) {
+		background-color: #0a0c0b !important;
+	}
 	.terminal-container :global(.xterm-viewport) {
 		scrollbar-width: thin;
 		scrollbar-color: rgba(94, 140, 88, 0.18) transparent;
@@ -383,27 +388,50 @@
 	.tab-scroll::-webkit-scrollbar {
 		display: none;
 	}
+	.term-tab {
+		position: relative;
+	}
+	.term-tab::after {
+		content: '';
+		position: absolute;
+		right: 0;
+		top: 25%;
+		bottom: 25%;
+		width: 1px;
+		background: var(--color-border);
+	}
+	.term-tab:last-child::after {
+		display: none;
+	}
+	.term-tab-active::after {
+		display: none;
+	}
+	/* Hide separator on tab right before active tab */
+	.term-tab:has(+ .term-tab-active)::after {
+		display: none;
+	}
 </style>
 
 <div class="flex flex-1 flex-col min-h-0">
 	{#if !isRunning}
 		<div class="flex flex-1 items-center justify-center">
-			<div class="flex flex-col items-center gap-4 text-center">
-				<div class="flex h-14 w-14 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)]" style="animation: iconFloat 3s ease-in-out infinite">
-					<svg class="text-[var(--color-text-muted)]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+			<div class="flex flex-col items-center gap-5 text-center">
+				<div class="flex h-16 w-16 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)]" style="animation: iconFloat 3s ease-in-out infinite">
+					<svg class="text-[var(--color-text-muted)]" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
 						<polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" />
 					</svg>
 				</div>
-				<div class="flex flex-col gap-1">
-					<span class="text-ui font-medium text-[var(--color-text-secondary)]">Terminal unavailable</span>
-					<span class="text-meta text-[var(--color-text-muted)]">Start the capsule to connect</span>
+				<div class="flex flex-col gap-1.5">
+					<span class="text-body font-medium text-[var(--color-text-secondary)]">Terminal unavailable</span>
+					<span class="text-ui text-[var(--color-text-muted)]">Start the capsule to connect</span>
 				</div>
 			</div>
 		</div>
 	{:else}
-		<!-- Session tab bar -->
-		<div class="flex items-center border-b border-[var(--color-border)] bg-[var(--color-bg-1)]">
-			<div class="tab-scroll flex flex-1 items-center overflow-x-auto">
+		<!-- Unified session bar: tabs + status integrated into one row (hidden when no sessions) -->
+		<div class="flex items-stretch bg-[var(--color-bg-1)]" style:display={sessions.length === 0 ? 'none' : 'flex'}>
+			<!-- Tabs -->
+			<div class="tab-scroll flex items-stretch overflow-x-auto">
 				{#each sessions as session (session.id)}
 					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
@@ -412,30 +440,34 @@
 						role="tab"
 						tabindex="0"
 						aria-selected={session.id === activeSessionId}
-						class="group relative flex shrink-0 cursor-pointer items-center gap-2 border-r border-[var(--color-border)] px-3.5 py-2 text-label transition-colors
+						class="term-tab group flex shrink-0 cursor-pointer items-center gap-2.5 px-5 py-2.5 text-meta transition-colors
 							{session.id === activeSessionId
-								? 'bg-[var(--color-bg-0)] text-[var(--color-text-primary)]'
-								: 'bg-[var(--color-bg-1)] text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-2)] hover:text-[var(--color-text-secondary)]'}"
+								? 'term-tab-active bg-[var(--color-bg-0)] text-[var(--color-text-primary)]'
+								: 'bg-[var(--color-bg-1)] text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-2)] hover:text-[var(--color-text-secondary)] border-b border-b-[var(--color-border)]'}"
 					>
-						{#if session.id === activeSessionId}
-							<span class="absolute inset-x-0 bottom-0 h-px bg-[var(--color-accent)]"></span>
+						{#if session.state === 'connected'}
+							<span class="relative flex h-[7px] w-[7px] shrink-0">
+								<span class="animate-status-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-accent)]"></span>
+								<span class="relative inline-flex h-[7px] w-[7px] rounded-full bg-[var(--color-accent)]"></span>
+							</span>
+						{:else if session.state === 'connecting'}
+							<svg class="animate-spin shrink-0 text-[var(--color-text-tertiary)]" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
+						{:else if session.state === 'error'}
+							<span class="h-[7px] w-[7px] shrink-0 rounded-full bg-[var(--color-red)]"></span>
+						{:else}
+							<span class="h-[7px] w-[7px] shrink-0 rounded-full bg-[var(--color-text-muted)]"></span>
 						{/if}
 
-						<span class="h-[6px] w-[6px] shrink-0 rounded-full {statusDot(session.state)}"></span>
-
 						<span class="font-mono">
-							bash
-							{#if session.ptyPid}
-								<span class="text-[var(--color-text-muted)]">:{session.ptyPid}</span>
-							{/if}
+							bash{#if session.ptyPid}<span class="text-[var(--color-text-muted)]">:{session.ptyPid}</span>{/if}
 						</span>
 
 						<button
 							onclick={(e) => { e.stopPropagation(); closeSession(session.id); }}
-							class="ml-0.5 flex h-4 w-4 items-center justify-center rounded-[2px] text-[var(--color-text-muted)] opacity-0 transition-all group-hover:opacity-100 hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-secondary)]"
+							class="ml-0.5 flex h-5 w-5 items-center justify-center rounded-[3px] text-[var(--color-text-muted)] opacity-0 transition-all group-hover:opacity-100 hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-secondary)]"
 							title="Close session"
 						>
-							<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+							<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
 								<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
 							</svg>
 						</button>
@@ -443,74 +475,49 @@
 				{/each}
 			</div>
 
+			<!-- New tab button -->
 			<button
 				onclick={createSession}
-				class="flex shrink-0 items-center gap-1.5 px-3 py-2 text-label font-medium text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-bg-2)] hover:text-[var(--color-text-secondary)]"
+				class="flex shrink-0 items-center justify-center aspect-square self-stretch border-b border-[var(--color-border)] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-bg-2)] hover:text-[var(--color-text-primary)]"
 				title="New terminal session"
 			>
-				<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 					<line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
 				</svg>
 			</button>
-		</div>
 
-		<!-- Status bar for active session -->
-		{#if activeSession}
-			<div class="flex items-center justify-between border-b border-[var(--color-border)] bg-[var(--color-bg-1)] px-4 py-1.5">
-				<div class="flex items-center gap-2.5">
-					{#if activeSession.state === 'connected'}
-						<span class="flex items-center gap-1.5 rounded-[3px] border border-[var(--color-accent)]/25 bg-[var(--color-accent-glow-mid)] px-2 py-0.5 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-accent-mid)]">
-							<span class="relative flex h-[5px] w-[5px] shrink-0">
-								<span class="animate-status-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-accent)]"></span>
-								<span class="relative inline-flex h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]"></span>
-							</span>
-							Live
-						</span>
-					{:else if activeSession.state === 'connecting'}
-						<span class="flex items-center gap-1.5 rounded-[3px] border border-[var(--color-border)] bg-[var(--color-bg-2)] px-2 py-0.5 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]">
-							<svg class="animate-spin" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
-							Connecting
-						</span>
-					{:else if activeSession.state === 'error'}
-						<span class="flex items-center gap-1.5 rounded-[3px] border border-[var(--color-red)]/25 bg-[var(--color-red)]/8 px-2 py-0.5 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-red)]">
-							Error
-						</span>
-						{#if activeSession.errorMessage}
-							<span class="text-meta text-[var(--color-red)]/80">{activeSession.errorMessage}</span>
-						{/if}
-					{:else if activeSession.state === 'disconnected'}
-						<span class="flex items-center gap-1.5 rounded-[3px] border border-[var(--color-border)] bg-[var(--color-bg-2)] px-2 py-0.5 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">
-							Disconnected
-						</span>
+			<!-- Spacer fills remaining width with bg-1, has bottom border like inactive area -->
+			<div class="flex-1 border-b border-[var(--color-border)] bg-[var(--color-bg-1)]"></div>
+
+			<!-- Right-side status info (reconnect button, pty tag) -->
+			{#if activeSession}
+				<div class="flex items-center gap-3 border-b border-[var(--color-border)] bg-[var(--color-bg-1)] pr-4">
+					{#if activeSession.state === 'error' && activeSession.errorMessage}
+						<span class="text-meta text-[var(--color-red)]/70">{activeSession.errorMessage}</span>
+					{/if}
+
+					{#if (activeSession.state === 'disconnected' || activeSession.state === 'error') && activeSession.ptyTag}
+						<button
+							onclick={() => activeSession && reconnectSession(activeSession.id)}
+							class="flex items-center gap-1.5 rounded-[var(--radius-button)] border border-[var(--color-border)] bg-[var(--color-bg-3)] px-3 py-1 text-meta font-medium text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-primary)]"
+						>
+							<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<polyline points="1 4 1 10 7 10" /><polyline points="23 20 23 14 17 14" />
+								<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" />
+							</svg>
+							Reconnect
+						</button>
 					{/if}
 
 					{#if activeSession.ptyTag}
-						<span class="h-3 w-px bg-[var(--color-border)]"></span>
-						<span class="font-mono text-badge text-[var(--color-text-muted)]">{activeSession.ptyTag}</span>
+						<span class="font-mono text-label text-[var(--color-text-muted)]">{activeSession.ptyTag}</span>
 					{/if}
 				</div>
-
-				<div class="flex items-center gap-2">
-					{#if activeSession.state === 'disconnected' || activeSession.state === 'error'}
-						{#if activeSession.ptyTag}
-							<button
-								onclick={() => activeSession && reconnectSession(activeSession.id)}
-								class="flex items-center gap-1.5 rounded-[var(--radius-button)] border border-[var(--color-border)] bg-[var(--color-bg-3)] px-2.5 py-1 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-primary)]"
-							>
-								<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-									<polyline points="1 4 1 10 7 10" /><polyline points="23 20 23 14 17 14" />
-									<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" />
-								</svg>
-								Reconnect
-							</button>
-						{/if}
-					{/if}
-				</div>
-			</div>
-		{/if}
+			{/if}
+		</div>
 
 		<!-- Terminal surfaces -->
-		<div class="relative flex-1 min-h-0" bind:this={containerRef}>
+		<div class="relative flex-1 min-h-0 bg-[var(--color-bg-0)]" bind:this={containerRef}>
 			{#each sessions as session (session.id)}
 				<div
 					data-session-id={session.id}
@@ -521,21 +528,21 @@
 
 			{#if sessions.length === 0}
 				<div class="flex h-full items-center justify-center">
-					<div class="flex flex-col items-center gap-4 text-center">
-						<div class="flex h-14 w-14 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)]" style="animation: iconFloat 3s ease-in-out infinite">
-							<svg class="text-[var(--color-text-muted)]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+					<div class="flex flex-col items-center gap-5 text-center">
+						<div class="flex h-16 w-16 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)]" style="animation: iconFloat 3s ease-in-out infinite">
+							<svg class="text-[var(--color-text-muted)]" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
 								<polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" />
 							</svg>
 						</div>
-						<div class="flex flex-col gap-1">
-							<span class="text-ui font-medium text-[var(--color-text-secondary)]">No active sessions</span>
-							<span class="text-meta text-[var(--color-text-muted)]">All terminal sessions have been closed</span>
+						<div class="flex flex-col gap-1.5">
+							<span class="text-body font-medium text-[var(--color-text-secondary)]">No active sessions</span>
+							<span class="text-ui text-[var(--color-text-muted)]">All terminal sessions have been closed</span>
 						</div>
 						<button
 							onclick={createSession}
-							class="mt-1 flex items-center gap-2 rounded-[var(--radius-button)] border border-[var(--color-accent)]/30 bg-[var(--color-accent-glow-mid)] px-4 py-2 text-meta font-semibold text-[var(--color-accent-bright)] transition-all duration-150 hover:border-[var(--color-accent)]/50 hover:bg-[var(--color-accent)]/15 hover:-translate-y-px active:translate-y-0"
+							class="mt-1 flex items-center gap-2 rounded-[var(--radius-button)] border border-[var(--color-accent)]/30 bg-[var(--color-accent-glow-mid)] px-5 py-2.5 text-ui font-semibold text-[var(--color-accent-bright)] transition-all duration-150 hover:border-[var(--color-accent)]/50 hover:bg-[var(--color-accent)]/15 hover:-translate-y-px active:translate-y-0"
 						>
-							<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 								<line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
 							</svg>
 							New session