diff --git a/web/src/routes/dashboard/devices/[deviceId]/+page.svelte b/web/src/routes/dashboard/devices/[deviceId]/+page.svelte
index 158b5c2..a76b134 100644
--- a/web/src/routes/dashboard/devices/[deviceId]/+page.svelte
+++ b/web/src/routes/dashboard/devices/[deviceId]/+page.svelte
@@ -1,20 +1,27 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import { listDeviceSessions } from '$lib/api/devices.remote';
+	import {
+		listDevices,
+		listDeviceSessions,
+		listSessionSteps,
+		getDeviceStats
+	} from '$lib/api/devices.remote';
 	import { dashboardWs } from '$lib/stores/dashboard-ws.svelte';
 	import { onMount } from 'svelte';
 
 	const deviceId = page.params.deviceId!;
 
-	// Goal input
-	let goal = $state('');
-	let status = $state<'idle' | 'running' | 'completed' | 'failed'>('idle');
+	// Tabs
+	let activeTab = $state<'overview' | 'sessions' | 'run'>('overview');
 
-	// Real-time steps from WebSocket
-	let currentGoal = $state('');
-	let steps = $state<Array<{ step: number; action: string; reasoning: string; result?: string }>>([]);
+	// Device data from DB
+	const allDevices = await listDevices();
+	const deviceData = allDevices.find((d) => d.deviceId === deviceId);
 
-	// Session history from DB
+	// Device stats
+	const stats = await getDeviceStats(deviceId);
+
+	// Session history
 	interface Session {
 		id: string;
 		goal: string;
@@ -23,12 +30,44 @@
 		startedAt: string;
 		completedAt: string | null;
 	}
+	interface Step {
+		id: string;
+		stepNumber: number;
+		action: unknown;
+		reasoning: string | null;
+		result: string | null;
+	}
 	const initialSessions = await listDeviceSessions(deviceId);
 	let sessions = $state<Session[]>(initialSessions as Session[]);
+	let expandedSession = $state<string | null>(null);
+	let sessionSteps = $state<Map<string, Step[]>>(new Map());
+
+	// Run tab state
+	let goal = $state('');
+	let runStatus = $state<'idle' | 'running' | 'completed' | 'failed'>('idle');
+	let currentGoal = $state('');
+	let steps = $state<Array<{ step: number; action: string; reasoning: string }>>([]);
+
+	// Real-time battery from WS
+	let liveBattery = $state<number | null>(null);
+	let liveCharging = $state(false);
+
+	async function toggleSession(sessionId: string) {
+		if (expandedSession === sessionId) {
+			expandedSession = null;
+			return;
+		}
+		expandedSession = sessionId;
+		if (!sessionSteps.has(sessionId)) {
+			const loadedSteps = await listSessionSteps(deviceId, sessionId);
+			sessionSteps.set(sessionId, loadedSteps as Step[]);
+			sessionSteps = new Map(sessionSteps);
+		}
+	}
 
 	async function submitGoal() {
 		if (!goal.trim()) return;
-		status = 'running';
+		runStatus = 'running';
 		currentGoal = goal;
 		steps = [];
 
@@ -39,18 +78,26 @@
 		});
 
 		if (!res.ok) {
-			status = 'failed';
+			runStatus = 'failed';
 		}
 	}
 
 	onMount(() => {
 		const unsub = dashboardWs.subscribe((msg) => {
 			switch (msg.type) {
+				case 'device_status': {
+					if (msg.deviceId === deviceId) {
+						liveBattery = msg.batteryLevel as number;
+						liveCharging = msg.isCharging as boolean;
+					}
+					break;
+				}
 				case 'goal_started': {
 					if (msg.deviceId === deviceId) {
-						status = 'running';
+						runStatus = 'running';
 						currentGoal = msg.goal as string;
 						steps = [];
+						activeTab = 'run';
 					}
 					break;
 				}
@@ -71,8 +118,7 @@
 				}
 				case 'goal_completed': {
 					const success = msg.success as boolean;
-					status = success ? 'completed' : 'failed';
-					// Refresh session history
+					runStatus = success ? 'completed' : 'failed';
 					listDeviceSessions(deviceId).then((s) => {
 						sessions = s as Session[];
 					});
@@ -86,103 +132,272 @@
 	function formatTime(iso: string) {
 		return new Date(iso).toLocaleString();
 	}
+
+	function relativeTime(iso: string) {
+		const diff = Date.now() - new Date(iso).getTime();
+		const mins = Math.floor(diff / 60000);
+		if (mins < 1) return 'just now';
+		if (mins < 60) return `${mins}m ago`;
+		const hrs = Math.floor(mins / 60);
+		if (hrs < 24) return `${hrs}h ago`;
+		const days = Math.floor(hrs / 24);
+		return `${days}d ago`;
+	}
+
+	const battery = $derived(liveBattery ?? (deviceData?.batteryLevel as number | null));
+	const charging = $derived(liveCharging || (deviceData?.isCharging as boolean));
 </script>
 
+<!-- Header -->
 <div class="mb-6 flex items-center gap-3">
 	<a href="/dashboard/devices" class="text-neutral-400 hover:text-neutral-600">&larr;</a>
-	<h2 class="text-2xl font-bold">Device: {deviceId.slice(0, 8)}...</h2>
+	<div>
+		<h2 class="text-2xl font-bold">{deviceData?.model ?? deviceId.slice(0, 8)}</h2>
+		{#if deviceData?.manufacturer}
+			<p class="text-sm text-neutral-500">{deviceData.manufacturer}</p>
+		{/if}
+	</div>
+	<span
+		class="ml-2 inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs
+			{deviceData?.status === 'online'
+			? 'bg-green-50 text-green-700'
+			: 'bg-neutral-100 text-neutral-500'}"
+	>
+		<span
+			class="inline-block h-1.5 w-1.5 rounded-full {deviceData?.status === 'online'
+				? 'bg-green-500'
+				: 'bg-neutral-300'}"
+		></span>
+		{deviceData?.status === 'online' ? 'Online' : 'Offline'}
+	</span>
+</div>
+
+<!-- Tabs -->
+<div class="mb-6 flex gap-1 rounded-lg bg-neutral-100 p-1">
+	{#each [['overview', 'Overview'], ['sessions', 'Sessions'], ['run', 'Run']] as [tab, label]}
+		<button
+			onclick={() => (activeTab = tab as typeof activeTab)}
+			class="flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors
+				{activeTab === tab
+				? 'bg-white text-neutral-900 shadow-sm'
+				: 'text-neutral-500 hover:text-neutral-700'}"
+		>
+			{label}
+			{#if tab === 'run' && runStatus === 'running'}
+				<span class="ml-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-amber-500"
+				></span>
+			{/if}
+		</button>
+	{/each}
 </div>
 
 <div class="max-w-3xl">
-	<!-- Goal Input -->
-	<div class="mb-8 rounded-lg border border-neutral-200 p-6">
-		<h3 class="mb-3 font-semibold">Send a Goal</h3>
-		<div class="flex gap-3">
-			<input
-				type="text"
-				bind:value={goal}
-				placeholder="e.g., Open YouTube and search for lofi beats"
-				class="flex-1 rounded border border-neutral-300 px-3 py-2 text-sm focus:border-neutral-500 focus:outline-none"
-				disabled={status === 'running'}
-				onkeydown={(e) => e.key === 'Enter' && submitGoal()}
-			/>
-			<button
-				onclick={submitGoal}
-				disabled={status === 'running'}
-				class="rounded bg-neutral-800 px-4 py-2 text-sm text-white hover:bg-neutral-700 disabled:opacity-50"
-			>
-				{status === 'running' ? 'Running...' : 'Run'}
-			</button>
-		</div>
-	</div>
-
-	<!-- Live Steps -->
-	{#if steps.length > 0 || status === 'running'}
-		<div class="mb-8 rounded-lg border border-neutral-200">
-			<div class="flex items-center justify-between border-b border-neutral-200 px-6 py-4">
-				<h3 class="font-semibold">
-					{currentGoal ? `Goal: ${currentGoal}` : 'Current Run'}
+	<!-- Overview Tab -->
+	{#if activeTab === 'overview'}
+		<div class="grid gap-4 sm:grid-cols-2">
+			<!-- Device Specs -->
+			<div class="rounded-lg border border-neutral-200 p-5">
+				<h3 class="mb-3 text-sm font-semibold uppercase tracking-wide text-neutral-500">
+					Device Info
 				</h3>
-				{#if status === 'running'}
-					<span class="flex items-center gap-2 text-sm text-amber-600">
-						<span class="inline-block h-2 w-2 animate-pulse rounded-full bg-amber-500"></span>
-						Running
-					</span>
-				{:else if status === 'completed'}
-					<span class="text-sm text-green-600">Completed</span>
-				{:else if status === 'failed'}
-					<span class="text-sm text-red-600">Failed</span>
-				{/if}
-			</div>
-			{#if steps.length > 0}
-				<div class="divide-y divide-neutral-100">
-					{#each steps as s (s.step)}
-						<div class="px-6 py-3">
-							<div class="flex items-baseline gap-2">
-								<span class="shrink-0 rounded bg-neutral-100 px-1.5 py-0.5 text-xs font-mono text-neutral-500">
-									{s.step}
-								</span>
-								<span class="text-sm font-medium font-mono">{s.action}</span>
-							</div>
-							{#if s.reasoning}
-								<p class="mt-1 text-sm text-neutral-500 pl-8">{s.reasoning}</p>
-							{/if}
+				<dl class="space-y-2">
+					{#if deviceData?.model}
+						<div class="flex justify-between text-sm">
+							<dt class="text-neutral-500">Model</dt>
+							<dd class="font-medium">{deviceData.model}</dd>
 						</div>
-					{/each}
-				</div>
-			{:else}
-				<div class="px-6 py-4 text-sm text-neutral-400">Waiting for first step...</div>
-			{/if}
-		</div>
-	{/if}
-
-	<!-- Session History -->
-	{#if sessions.length > 0}
-		<div class="rounded-lg border border-neutral-200">
-			<div class="border-b border-neutral-200 px-6 py-4">
-				<h3 class="font-semibold">Session History</h3>
+					{/if}
+					{#if deviceData?.manufacturer}
+						<div class="flex justify-between text-sm">
+							<dt class="text-neutral-500">Manufacturer</dt>
+							<dd class="font-medium">{deviceData.manufacturer}</dd>
+						</div>
+					{/if}
+					{#if deviceData?.androidVersion}
+						<div class="flex justify-between text-sm">
+							<dt class="text-neutral-500">Android</dt>
+							<dd class="font-medium">{deviceData.androidVersion}</dd>
+						</div>
+					{/if}
+					{#if deviceData?.screenWidth && deviceData?.screenHeight}
+						<div class="flex justify-between text-sm">
+							<dt class="text-neutral-500">Resolution</dt>
+							<dd class="font-medium">{deviceData.screenWidth} x {deviceData.screenHeight}</dd>
+						</div>
+					{/if}
+					{#if battery !== null && battery >= 0}
+						<div class="flex justify-between text-sm">
+							<dt class="text-neutral-500">Battery</dt>
+							<dd class="font-medium {battery <= 20 ? 'text-red-600' : ''}">
+								{battery}%{charging ? ' (Charging)' : ''}
+							</dd>
+						</div>
+					{/if}
+					<div class="flex justify-between text-sm">
+						<dt class="text-neutral-500">Last seen</dt>
+						<dd class="font-medium">
+							{deviceData ? relativeTime(deviceData.lastSeen) : '—'}
+						</dd>
+					</div>
+				</dl>
 			</div>
-			<div class="divide-y divide-neutral-100">
+
+			<!-- Stats -->
+			<div class="rounded-lg border border-neutral-200 p-5">
+				<h3 class="mb-3 text-sm font-semibold uppercase tracking-wide text-neutral-500">
+					Stats
+				</h3>
+				<div class="grid grid-cols-3 gap-3 text-center">
+					<div>
+						<p class="text-2xl font-bold">{stats?.totalSessions ?? 0}</p>
+						<p class="text-xs text-neutral-500">Sessions</p>
+					</div>
+					<div>
+						<p class="text-2xl font-bold">{stats?.successRate ?? 0}%</p>
+						<p class="text-xs text-neutral-500">Success</p>
+					</div>
+					<div>
+						<p class="text-2xl font-bold">{stats?.avgSteps ?? 0}</p>
+						<p class="text-xs text-neutral-500">Avg Steps</p>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Sessions Tab -->
+	{:else if activeTab === 'sessions'}
+		{#if sessions.length === 0}
+			<p class="text-sm text-neutral-400">No sessions yet. Go to the Run tab to send a goal.</p>
+		{:else}
+			<div class="divide-y divide-neutral-100 rounded-lg border border-neutral-200">
 				{#each sessions as sess (sess.id)}
-					<div class="px-6 py-3">
-						<div class="flex items-center justify-between">
-							<p class="text-sm font-medium">{sess.goal}</p>
+					<div>
+						<button
+							onclick={() => toggleSession(sess.id)}
+							class="flex w-full items-center justify-between px-5 py-3 text-left hover:bg-neutral-50"
+						>
+							<div class="min-w-0 flex-1">
+								<p class="truncate text-sm font-medium">{sess.goal}</p>
+								<p class="mt-0.5 text-xs text-neutral-400">
+									{formatTime(sess.startedAt)} &middot; {sess.stepsUsed} steps
+								</p>
+							</div>
 							<span
-								class="rounded px-2 py-0.5 text-xs {sess.status === 'completed'
+								class="ml-3 shrink-0 rounded px-2 py-0.5 text-xs {sess.status === 'completed'
 									? 'bg-green-50 text-green-700'
 									: sess.status === 'running'
 										? 'bg-amber-50 text-amber-700'
 										: 'bg-red-50 text-red-700'}"
 							>
-								{sess.status === 'completed' ? 'Success' : sess.status === 'running' ? 'Running' : 'Failed'}
+								{sess.status === 'completed'
+									? 'Success'
+									: sess.status === 'running'
+										? 'Running'
+										: 'Failed'}
 							</span>
-						</div>
-						<p class="mt-1 text-xs text-neutral-400">
-							{formatTime(sess.startedAt)} &middot; {sess.stepsUsed} steps
-						</p>
+						</button>
+						{#if expandedSession === sess.id}
+							<div class="border-t border-neutral-100 bg-neutral-50 px-5 py-3">
+								{#if sessionSteps.has(sess.id)}
+									<div class="space-y-2">
+										{#each sessionSteps.get(sess.id) ?? [] as s (s.id)}
+											<div class="flex items-baseline gap-2">
+												<span
+													class="shrink-0 rounded bg-neutral-200 px-1.5 py-0.5 font-mono text-[10px] text-neutral-500"
+												>
+													{s.stepNumber}
+												</span>
+												<div class="min-w-0">
+													<span class="font-mono text-xs font-medium"
+														>{JSON.stringify(s.action)}</span
+													>
+													{#if s.reasoning}
+														<p class="truncate text-xs text-neutral-400">
+															{s.reasoning}
+														</p>
+													{/if}
+												</div>
+											</div>
+										{/each}
+									</div>
+								{:else}
+									<p class="text-xs text-neutral-400">Loading steps...</p>
+								{/if}
+							</div>
+						{/if}
 					</div>
 				{/each}
 			</div>
+		{/if}
+
+		<!-- Run Tab -->
+	{:else if activeTab === 'run'}
+		<!-- Goal Input -->
+		<div class="mb-6 rounded-lg border border-neutral-200 p-5">
+			<h3 class="mb-3 text-sm font-semibold">Send a Goal</h3>
+			<div class="flex gap-3">
+				<input
+					type="text"
+					bind:value={goal}
+					placeholder="e.g., Open YouTube and search for lofi beats"
+					class="flex-1 rounded border border-neutral-300 px-3 py-2 text-sm focus:border-neutral-500 focus:outline-none"
+					disabled={runStatus === 'running'}
+					onkeydown={(e) => e.key === 'Enter' && submitGoal()}
+				/>
+				<button
+					onclick={submitGoal}
+					disabled={runStatus === 'running'}
+					class="rounded bg-neutral-800 px-4 py-2 text-sm text-white hover:bg-neutral-700 disabled:opacity-50"
+				>
+					{runStatus === 'running' ? 'Running...' : 'Run'}
+				</button>
+			</div>
 		</div>
+
+		<!-- Live Steps -->
+		{#if steps.length > 0 || runStatus === 'running'}
+			<div class="rounded-lg border border-neutral-200">
+				<div
+					class="flex items-center justify-between border-b border-neutral-200 px-5 py-3"
+				>
+					<h3 class="text-sm font-semibold">
+						{currentGoal ? `Goal: ${currentGoal}` : 'Current Run'}
+					</h3>
+					{#if runStatus === 'running'}
+						<span class="flex items-center gap-1.5 text-xs text-amber-600">
+							<span
+								class="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-amber-500"
+							></span>
+							Running
+						</span>
+					{:else if runStatus === 'completed'}
+						<span class="text-xs text-green-600">Completed</span>
+					{:else if runStatus === 'failed'}
+						<span class="text-xs text-red-600">Failed</span>
+					{/if}
+				</div>
+				{#if steps.length > 0}
+					<div class="divide-y divide-neutral-100">
+						{#each steps as s (s.step)}
+							<div class="px-5 py-2.5">
+								<div class="flex items-baseline gap-2">
+									<span
+										class="shrink-0 rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-[10px] text-neutral-500"
+									>
+										{s.step}
+									</span>
+									<span class="font-mono text-xs font-medium">{s.action}</span>
+								</div>
+								{#if s.reasoning}
+									<p class="mt-0.5 pl-7 text-xs text-neutral-500">{s.reasoning}</p>
+								{/if}
+							</div>
+						{/each}
+					</div>
+				{:else}
+					<div class="px-5 py-3 text-xs text-neutral-400">Waiting for first step...</div>
+				{/if}
+			</div>
+		{/if}
 	{/if}
 </div>