diff --git a/web/app/(dashboard)/dashboard/projects/[slug]/[env]/services/[serviceId]/page.tsx b/web/app/(dashboard)/dashboard/projects/[slug]/[env]/services/[serviceId]/page.tsx
index 278395c1..c0a41eaa 100644
--- a/web/app/(dashboard)/dashboard/projects/[slug]/[env]/services/[serviceId]/page.tsx
+++ b/web/app/(dashboard)/dashboard/projects/[slug]/[env]/services/[serviceId]/page.tsx
@@ -126,6 +126,8 @@ export default function DeploymentsPage() {
 
 	return (
 		<div>
+			<ServiceDetailsOverview service={service} />
+
 			<DeploymentProgress
 				service={service}
 				changes={pendingChanges}
@@ -143,8 +145,6 @@ export default function DeploymentsPage() {
 				barMode={barState.mode}
 			/>
 
-			<ServiceDetailsOverview service={service} />
-
 			<div className="mt-4">
 				<RolloutHistory
 					serviceId={service.id}
diff --git a/web/app/(dashboard)/dashboard/servers/[id]/layout.tsx b/web/app/(dashboard)/dashboard/servers/[id]/layout.tsx
new file mode 100644
index 00000000..136d50ef
--- /dev/null
+++ b/web/app/(dashboard)/dashboard/servers/[id]/layout.tsx
@@ -0,0 +1,32 @@
+import { notFound } from "next/navigation";
+import { SetBreadcrumbs } from "@/components/core/breadcrumb-data";
+import { ServerTabs } from "@/components/server/server-tabs";
+import { getServerDetails } from "@/db/queries";
+
+export default async function ServerLayout({
+	params,
+	children,
+}: {
+	params: Promise<{ id: string }>;
+	children: React.ReactNode;
+}) {
+	const { id } = await params;
+	const server = await getServerDetails(id);
+
+	if (!server) {
+		notFound();
+	}
+
+	return (
+		<>
+			<SetBreadcrumbs
+				items={[
+					{ label: "Dashboard", href: "/dashboard" },
+					{ label: server.name, href: `/dashboard/servers/${id}` },
+				]}
+			/>
+			<ServerTabs serverId={id} />
+			{children}
+		</>
+	);
+}
diff --git a/web/app/(dashboard)/dashboard/servers/[id]/loading.tsx b/web/app/(dashboard)/dashboard/servers/[id]/loading.tsx
index b59bad0b..629e0d32 100644
--- a/web/app/(dashboard)/dashboard/servers/[id]/loading.tsx
+++ b/web/app/(dashboard)/dashboard/servers/[id]/loading.tsx
@@ -1,24 +1,29 @@
-import { SetBreadcrumbs } from "@/components/core/breadcrumb-data";
 import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Loading() {
 	return (
 		<>
-			<SetBreadcrumbs items={[{ label: "Dashboard", href: "/dashboard" }]} />
-			<div
-				aria-hidden="true"
-				className="container max-w-7xl mx-auto px-4 py-6 space-y-6"
-			>
-				<div className="flex items-center gap-3">
-					<Skeleton className="h-6 w-44" />
-					<Skeleton className="size-3 rounded-full" />
-					<Skeleton className="h-5 w-16 rounded-md" />
+			<div aria-hidden="true" className="space-y-6 px-4 py-2">
+				<div className="grid min-h-72 overflow-hidden rounded-xl border lg:grid-cols-[minmax(0,1.2fr)_minmax(360px,0.8fr)]">
+					<div className="flex flex-col gap-4 p-4">
+						<div className="flex items-start justify-between gap-4">
+							<Skeleton className="h-7 w-24" />
+							<Skeleton className="h-7 w-44" />
+						</div>
+						<Skeleton className="min-h-40 flex-1 rounded-lg" />
+					</div>
+					<div className="space-y-3 border-t p-3 lg:border-t-0 lg:border-l">
+						<Skeleton className="h-7 w-48" />
+						<Skeleton className="h-4 w-full" />
+						<Skeleton className="h-4 w-full" />
+						<Skeleton className="h-4 w-full" />
+						<Skeleton className="mt-4 h-24 w-full" />
+					</div>
 				</div>
 
-				<Skeleton className="h-32 rounded-xl" />
-				<Skeleton className="h-40 rounded-xl" />
-				<Skeleton className="h-36 rounded-xl" />
-				<Skeleton className="h-[420px] rounded-lg" />
+				<div className="mx-auto max-w-5xl">
+					<Skeleton className="h-36 rounded-xl" />
+				</div>
 			</div>
 			<div aria-live="polite" className="sr-only">
 				Loading server details
diff --git a/web/app/(dashboard)/dashboard/servers/[id]/logs/page.tsx b/web/app/(dashboard)/dashboard/servers/[id]/logs/page.tsx
new file mode 100644
index 00000000..f81d0ca9
--- /dev/null
+++ b/web/app/(dashboard)/dashboard/servers/[id]/logs/page.tsx
@@ -0,0 +1,15 @@
+import { LogViewer } from "@/components/logs/log-viewer";
+
+export default async function ServerLogsPage({
+	params,
+}: {
+	params: Promise<{ id: string }>;
+}) {
+	const { id } = await params;
+
+	return (
+		<div className="px-4 py-2">
+			<LogViewer variant="server-logs" serverId={id} />
+		</div>
+	);
+}
diff --git a/web/app/(dashboard)/dashboard/servers/[id]/page.tsx b/web/app/(dashboard)/dashboard/servers/[id]/page.tsx
index ca9ad179..4eb0acce 100644
--- a/web/app/(dashboard)/dashboard/servers/[id]/page.tsx
+++ b/web/app/(dashboard)/dashboard/servers/[id]/page.tsx
@@ -1,10 +1,6 @@
 import { notFound } from "next/navigation";
-import { SetBreadcrumbs } from "@/components/core/breadcrumb-data";
-import { LogViewer } from "@/components/logs/log-viewer";
 import { AgentUpdateNudge } from "@/components/server/agent-update-nudge";
-import { ServerDangerZone } from "@/components/server/server-danger-zone";
-import { ServerHeader } from "@/components/server/server-header";
-import { ServerHealthDetails } from "@/components/server/server-health-details";
+import { ServerDetailsOverview } from "@/components/server/server-details-overview";
 import { ServerServices } from "@/components/server/server-services";
 import {
 	Card,
@@ -14,8 +10,7 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
-import { getServerDetails, metricSnapshotToHealthStats } from "@/db/queries";
-import { formatRelativeTime } from "@/lib/date";
+import { getServerDetails } from "@/db/queries";
 import { queryNodeMetricsSnapshot } from "@/lib/victoria-metrics";
 
 async function getLatestAgentVersion(): Promise<string | null> {
@@ -56,15 +51,57 @@ export default async function ServerDetailPage({
 		currentVersion && latestVersion && currentVersion !== latestVersion;
 
 	return (
-		<>
-			<SetBreadcrumbs
-				items={[
-					{ label: "Dashboard", href: "/dashboard" },
-					{ label: server.name, href: `/dashboard/servers/${id}` },
-				]}
-			/>
-			<div className="container max-w-7xl mx-auto px-4 py-6 space-y-6">
-				<ServerHeader server={server} />
+		<div className="space-y-6 px-4 py-2">
+			{isUnregistered && (
+				<Card className="border-amber-500/50 bg-amber-500/5">
+					<CardHeader>
+						<CardTitle>Complete Server Setup</CardTitle>
+						<CardDescription>
+							Run the following command on your server to install and register
+							the agent
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-4">
+						<div className="space-y-2">
+							<Label>Agent Token</Label>
+							<code className="block p-3 bg-muted rounded-lg text-sm break-all font-mono">
+								{server.agentToken}
+							</code>
+							<p className="text-xs text-muted-foreground">
+								This token expires in 24 hours and can only be used once.
+							</p>
+						</div>
+						<div className="space-y-2">
+							<Label>Install Command</Label>
+							<code className="block p-3 bg-muted rounded-lg text-sm break-all font-mono">
+								{`sudo CONTROL_PLANE_URL=${process.env.APP_URL} REGISTRATION_TOKEN=${server.agentToken} bash -c "$(curl -fsSL ${process.env.APP_URL}/setup.sh)"`}
+							</code>
+						</div>
+					</CardContent>
+				</Card>
+			)}
+
+			<div>
+				<ServerDetailsOverview
+					server={{
+						id: server.id,
+						name: server.name,
+						status: server.status,
+						isProxy: server.isProxy,
+						publicIp: server.publicIp,
+						privateIp: server.privateIp,
+						wireguardIp: server.wireguardIp,
+						lastHeartbeat: server.lastHeartbeat,
+						resourcesCpu: server.resourcesCpu,
+						resourcesMemory: server.resourcesMemory,
+						resourcesDisk: server.resourcesDisk,
+						meta: server.meta,
+						networkHealth: server.networkHealth,
+						containerHealth: server.containerHealth,
+						agentHealth: server.agentHealth,
+					}}
+					initialMetrics={metricsSnapshot}
+				/>
 
 				{hasUpdate && (
 					<AgentUpdateNudge
@@ -77,123 +114,11 @@ export default async function ServerDetailPage({
 						upgradeError={server.agentUpgradeError}
 					/>
 				)}
+			</div>
 
-				{isUnregistered && (
-					<Card className="border-amber-500/50 bg-amber-500/5">
-						<CardHeader>
-							<CardTitle>Complete Server Setup</CardTitle>
-							<CardDescription>
-								Run the following command on your server to install and register
-								the agent
-							</CardDescription>
-						</CardHeader>
-						<CardContent className="space-y-4">
-							<div className="space-y-2">
-								<Label>Agent Token</Label>
-								<code className="block p-3 bg-muted rounded-lg text-sm break-all font-mono">
-									{server.agentToken}
-								</code>
-								<p className="text-xs text-muted-foreground">
-									This token expires in 24 hours and can only be used once.
-								</p>
-							</div>
-							<div className="space-y-2">
-								<Label>Install Command</Label>
-								<code className="block p-3 bg-muted rounded-lg text-sm break-all font-mono">
-									{`sudo CONTROL_PLANE_URL=${process.env.APP_URL} REGISTRATION_TOKEN=${server.agentToken} bash -c "$(curl -fsSL ${process.env.APP_URL}/setup.sh)"`}
-								</code>
-							</div>
-						</CardContent>
-					</Card>
-				)}
-
-				<Card>
-					<CardHeader>
-						<CardTitle>Server Details</CardTitle>
-					</CardHeader>
-					<CardContent>
-						<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-							<div>
-								<p className="text-sm text-muted-foreground">Public IP</p>
-								<p className="font-mono">{server.publicIp || "—"}</p>
-							</div>
-							<div>
-								<p className="text-sm text-muted-foreground">Private IP</p>
-								<p className="font-mono">{server.privateIp || "—"}</p>
-							</div>
-							<div>
-								<p className="text-sm text-muted-foreground">WireGuard IP</p>
-								<p className="font-mono">{server.wireguardIp || "—"}</p>
-							</div>
-							<div>
-								<p className="text-sm text-muted-foreground">Last Heartbeat</p>
-								<p>
-									{server.lastHeartbeat
-										? formatRelativeTime(server.lastHeartbeat)
-										: "Never seen"}
-								</p>
-							</div>
-							<div>
-								<p className="text-sm text-muted-foreground">CPU</p>
-								<p>
-									{server.resourcesCpu !== null
-										? `${server.resourcesCpu} cores`
-										: "—"}
-								</p>
-							</div>
-							<div>
-								<p className="text-sm text-muted-foreground">Memory</p>
-								<p>
-									{server.resourcesMemory !== null
-										? `${Math.round((server.resourcesMemory / 1024) * 10) / 10} GB`
-										: "—"}
-								</p>
-							</div>
-							<div>
-								<p className="text-sm text-muted-foreground">Disk</p>
-								<p>
-									{server.resourcesDisk !== null
-										? `${server.resourcesDisk} GB`
-										: "—"}
-								</p>
-							</div>
-							{server.meta && (
-								<>
-									<div>
-										<p className="text-sm text-muted-foreground">OS / Arch</p>
-										<p>
-											{server.meta.os || "—"} / {server.meta.arch || "—"}
-										</p>
-									</div>
-									<div>
-										<p className="text-sm text-muted-foreground">Hostname</p>
-										<p className="font-mono">{server.meta.hostname || "—"}</p>
-									</div>
-								</>
-							)}
-						</div>
-					</CardContent>
-				</Card>
-
-				<ServerHealthDetails
-					serverId={id}
-					initialData={{
-						healthStats: metricSnapshotToHealthStats(metricsSnapshot),
-						networkHealth: server.networkHealth,
-						containerHealth: server.containerHealth,
-						agentHealth: server.agentHealth,
-					}}
-				/>
-
+			<div className="mx-auto max-w-5xl">
 				<ServerServices serverId={id} />
-
-				<div className="space-y-2">
-					<h3 className="text-sm font-medium">Agent Logs</h3>
-					<LogViewer variant="server-logs" serverId={id} />
-				</div>
-
-				<ServerDangerZone serverId={id} serverName={server.name} />
 			</div>
-		</>
+		</div>
 	);
 }
diff --git a/web/app/(dashboard)/dashboard/servers/[id]/settings/page.tsx b/web/app/(dashboard)/dashboard/servers/[id]/settings/page.tsx
new file mode 100644
index 00000000..37b203b6
--- /dev/null
+++ b/web/app/(dashboard)/dashboard/servers/[id]/settings/page.tsx
@@ -0,0 +1,22 @@
+import { notFound } from "next/navigation";
+import { ServerDangerZone } from "@/components/server/server-danger-zone";
+import { getServerDetails } from "@/db/queries";
+
+export default async function ServerSettingsPage({
+	params,
+}: {
+	params: Promise<{ id: string }>;
+}) {
+	const { id } = await params;
+	const server = await getServerDetails(id);
+
+	if (!server) {
+		notFound();
+	}
+
+	return (
+		<div className="mx-auto max-w-5xl px-4 py-2">
+			<ServerDangerZone serverId={id} serverName={server.name} />
+		</div>
+	);
+}
diff --git a/web/components/server/agent-update-nudge.tsx b/web/components/server/agent-update-nudge.tsx
index 3764beea..f9a3e22b 100644
--- a/web/components/server/agent-update-nudge.tsx
+++ b/web/components/server/agent-update-nudge.tsx
@@ -63,19 +63,23 @@ export function AgentUpdateNudge({
 
 	return (
 		<>
-			<button
-				type="button"
-				className="flex items-center gap-2 rounded-lg border border-amber-500/50 bg-amber-500/5 px-4 py-3 text-sm text-amber-700 dark:text-amber-400 hover:bg-amber-500/10 transition-colors w-full"
-				onClick={() => setOpen(true)}
-			>
-				<ArrowUpCircle className="size-4 shrink-0" />
-				<span>
-					Agent update available:{" "}
-					<span className="font-mono">{currentVersion}</span>
-					{" → "}
-					<span className="font-mono">{latestVersion}</span>
-				</span>
-			</button>
+			<div className="mx-auto max-w-5xl rounded-b-lg border border-amber-500/40 border-t-0 bg-amber-500/5">
+				<div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-3 py-2">
+					<div className="flex items-center gap-2">
+						<span className="size-2 rounded-full bg-amber-500" />
+						<span className="text-sm font-medium">
+							Agent update available:{" "}
+							<span className="font-mono">{currentVersion}</span>
+							{" → "}
+							<span className="font-mono">{latestVersion}</span>
+						</span>
+					</div>
+					<Button size="sm" onClick={() => setOpen(true)}>
+						<ArrowUpCircle className="size-4" data-icon="inline-start" />
+						Update
+					</Button>
+				</div>
+			</div>
 
 			<Dialog open={open} onOpenChange={setOpen}>
 				<DialogContent className="sm:max-w-lg">
diff --git a/web/components/server/server-details-overview.tsx b/web/components/server/server-details-overview.tsx
new file mode 100644
index 00000000..f540d5be
--- /dev/null
+++ b/web/components/server/server-details-overview.tsx
@@ -0,0 +1,533 @@
+"use client";
+
+import { type ReactNode, useMemo, useState } from "react";
+import {
+	CartesianGrid,
+	Line,
+	LineChart,
+	ResponsiveContainer,
+	Tooltip,
+	XAxis,
+	YAxis,
+} from "recharts";
+import useSWR from "swr";
+import { ServerHeader } from "@/components/server/server-header";
+import { Card } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { Server } from "@/db/types";
+import {
+	formatCompactDateTime,
+	formatRelativeTime,
+	getTimestamp,
+} from "@/lib/date";
+import { fetcher } from "@/lib/fetcher";
+import { cn } from "@/lib/utils";
+import type {
+	NodeMetricPoint,
+	NodeMetricsHistory,
+	NodeMetricsSnapshot,
+} from "@/lib/victoria-metrics";
+
+type ServerOverview = Pick<
+	Server,
+	| "id"
+	| "name"
+	| "status"
+	| "isProxy"
+	| "publicIp"
+	| "privateIp"
+	| "wireguardIp"
+	| "lastHeartbeat"
+	| "resourcesCpu"
+	| "resourcesMemory"
+	| "resourcesDisk"
+	| "meta"
+	| "networkHealth"
+	| "containerHealth"
+	| "agentHealth"
+>;
+
+type ServerMetricMode = "cpu" | "memory" | "disk";
+
+type ServerMetricsResponse = {
+	current: NodeMetricsSnapshot | null;
+	history: NodeMetricsHistory;
+	range: string;
+	enabled?: boolean;
+};
+
+type ClusterHealthResponse = {
+	servers: Array<{
+		id: string;
+		networkHealth: Server["networkHealth"];
+		containerHealth: Server["containerHealth"];
+		agentHealth: Server["agentHealth"];
+	}>;
+};
+
+type ChartRow = {
+	timestamp: string;
+	percent?: number;
+	bytes?: number;
+};
+
+type TooltipPayload = {
+	dataKey?: string;
+	name?: string;
+	value?: unknown;
+};
+
+type ServerMetricsTooltipProps = {
+	active?: boolean;
+	label?: string | number;
+	payload?: readonly TooltipPayload[];
+};
+
+const MODE_OPTIONS: Array<{ value: ServerMetricMode; label: string }> = [
+	{ value: "cpu", label: "CPU" },
+	{ value: "memory", label: "Memory" },
+	{ value: "disk", label: "Disk" },
+];
+
+export function ServerDetailsOverview({
+	server,
+	initialMetrics,
+}: {
+	server: ServerOverview;
+	initialMetrics: NodeMetricsSnapshot | null;
+}) {
+	const metricsUrl = `/api/servers/${server.id}/metrics?range=24h`;
+	const {
+		data: metrics,
+		error: metricsError,
+		isLoading,
+	} = useSWR<ServerMetricsResponse>(metricsUrl, fetcher, {
+		refreshInterval: 60000,
+	});
+	const { data: clusterHealth } = useSWR<ClusterHealthResponse>(
+		"/api/cluster-health",
+		fetcher,
+		{ refreshInterval: 10000 },
+	);
+	const liveHealth = clusterHealth?.servers.find(
+		(item) => item.id === server.id,
+	);
+
+	return (
+		<Card className="gap-0 border border-border py-0 ring-0">
+			<div className="grid items-stretch lg:grid-cols-[minmax(0,1.2fr)_minmax(360px,0.8fr)]">
+				<ServerMetricsPanel
+					metrics={metrics}
+					initialMetrics={initialMetrics}
+					error={metricsError}
+					isLoading={isLoading}
+				/>
+				<ServerOverviewPanel
+					server={server}
+					networkHealth={liveHealth?.networkHealth ?? server.networkHealth}
+					containerHealth={
+						liveHealth?.containerHealth ?? server.containerHealth
+					}
+					agentHealth={liveHealth?.agentHealth ?? server.agentHealth}
+				/>
+			</div>
+		</Card>
+	);
+}
+
+function ServerMetricsPanel({
+	metrics,
+	initialMetrics,
+	error,
+	isLoading,
+}: {
+	metrics?: ServerMetricsResponse;
+	initialMetrics: NodeMetricsSnapshot | null;
+	error?: unknown;
+	isLoading: boolean;
+}) {
+	const [mode, setMode] = useState<ServerMetricMode>("cpu");
+	const rows = useMemo(
+		() => buildChartRows(metrics?.history, mode),
+		[metrics, mode],
+	);
+	const current = metrics?.current ?? initialMetrics;
+	const isUnavailable = Boolean(error) || metrics?.enabled === false;
+	const percent = getCurrentPercent(current, mode);
+	const bytes = getCurrentBytes(current, mode);
+
+	return (
+		<div className="flex h-full min-h-72 flex-col gap-4 p-4">
+			<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+				<div className="min-w-0">
+					{isLoading && !metrics && !current ? (
+						<div className="flex flex-nowrap items-end gap-x-5">
+							<Skeleton className="h-7 w-24" />
+							{mode !== "cpu" ? <Skeleton className="h-7 w-20" /> : null}
+						</div>
+					) : (
+						<div className="flex flex-nowrap items-end gap-x-5">
+							<MetricSummary
+								value={formatPercent(percent)}
+								label={mode.toUpperCase()}
+							/>
+							{mode !== "cpu" ? (
+								<MetricSummary
+									value={formatBytes(bytes)}
+									label={`${mode} used`}
+								/>
+							) : null}
+						</div>
+					)}
+				</div>
+				<ServerMetricTabs
+					value={mode}
+					onChange={setMode}
+					disabled={isLoading || isUnavailable}
+				/>
+			</div>
+
+			<div className="min-h-40 min-w-0 flex-1">
+				{isLoading && !metrics ? (
+					<Skeleton className="h-full rounded-lg" />
+				) : isUnavailable ? (
+					<MetricsState message="Server metrics unavailable" />
+				) : rows.length === 0 ? (
+					<MetricsState message="No resource metrics in this range" />
+				) : (
+					<ResponsiveContainer
+						width="100%"
+						height="100%"
+						minWidth={1}
+						minHeight={1}
+						initialDimension={{ width: 1, height: 1 }}
+					>
+						<LineChart
+							data={rows}
+							margin={{
+								top: 8,
+								right: mode === "cpu" ? 4 : 12,
+								left: 0,
+								bottom: 0,
+							}}
+						>
+							<CartesianGrid
+								strokeDasharray="3 3"
+								vertical={false}
+								stroke="var(--border)"
+							/>
+							<XAxis
+								dataKey="timestamp"
+								minTickGap={32}
+								tickLine={false}
+								axisLine={false}
+								tickFormatter={(value) => formatCompactDateTime(value)}
+								className="text-xs"
+							/>
+							<YAxis
+								yAxisId="percent"
+								width={48}
+								domain={[0, 100]}
+								tickLine={false}
+								axisLine={false}
+								tickFormatter={(value) => `${value}%`}
+								className="text-xs"
+							/>
+							{mode !== "cpu" ? (
+								<YAxis
+									yAxisId="bytes"
+									orientation="right"
+									width={46}
+									tickLine={false}
+									axisLine={false}
+									tickFormatter={formatBytesCompact}
+									className="text-xs"
+								/>
+							) : null}
+							<Tooltip
+								cursor={{ strokeDasharray: "3 3" }}
+								content={(props) => (
+									<ServerMetricsTooltip
+										{...(props as unknown as ServerMetricsTooltipProps)}
+									/>
+								)}
+							/>
+							<Line
+								yAxisId="percent"
+								type="monotone"
+								dataKey="percent"
+								name="Usage"
+								stroke="var(--chart-1)"
+								strokeWidth={2}
+								dot={false}
+								connectNulls
+								isAnimationActive={false}
+							/>
+							{mode !== "cpu" ? (
+								<Line
+									yAxisId="bytes"
+									type="monotone"
+									dataKey="bytes"
+									name="Used"
+									stroke="var(--chart-3)"
+									strokeWidth={2}
+									dot={false}
+									connectNulls
+									isAnimationActive={false}
+								/>
+							) : null}
+						</LineChart>
+					</ResponsiveContainer>
+				)}
+			</div>
+		</div>
+	);
+}
+
+function ServerMetricTabs({
+	value,
+	onChange,
+	disabled,
+}: {
+	value: ServerMetricMode;
+	onChange: (value: ServerMetricMode) => void;
+	disabled: boolean;
+}) {
+	return (
+		<div className="flex w-full self-start rounded-md border border-border bg-muted/30 p-0.5 sm:w-auto">
+			{MODE_OPTIONS.map((option) => {
+				const isSelected = value === option.value;
+				return (
+					<button
+						key={option.value}
+						type="button"
+						aria-pressed={isSelected}
+						disabled={disabled}
+						onClick={() => onChange(option.value)}
+						className={cn(
+							"flex-1 rounded-[5px] px-2 py-0.5 text-xs font-medium transition-colors sm:flex-none",
+							isSelected
+								? "bg-background text-foreground shadow-sm"
+								: "text-muted-foreground hover:text-foreground",
+							disabled && "cursor-not-allowed opacity-50",
+						)}
+					>
+						{option.label}
+					</button>
+				);
+			})}
+		</div>
+	);
+}
+
+function ServerOverviewPanel({
+	server,
+	networkHealth,
+	containerHealth,
+	agentHealth,
+}: {
+	server: ServerOverview;
+	networkHealth: Server["networkHealth"];
+	containerHealth: Server["containerHealth"];
+	agentHealth: Server["agentHealth"];
+}) {
+	return (
+		<div className="flex min-w-0 flex-col border-border border-t font-mono lg:border-t-0 lg:border-l">
+			<div className="space-y-1.5 px-3 py-2.5 text-sm">
+				<div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-base">
+					<div className="font-sans">
+						<ServerHeader server={server} />
+					</div>
+					<span className="text-muted-foreground">
+						{server.lastHeartbeat
+							? formatRelativeTime(server.lastHeartbeat)
+							: "Never seen"}
+					</span>
+				</div>
+				<ConfigRow label="Network">
+					{formatHealth(
+						networkHealth?.tunnelUp,
+						`${networkHealth?.peerCount ?? 0} peers`,
+					)}
+				</ConfigRow>
+				<ConfigRow label="Containers">
+					{formatHealth(
+						containerHealth?.runtimeResponsive,
+						`${containerHealth?.runningContainers ?? 0} running`,
+					)}
+				</ConfigRow>
+				<ConfigRow label="Agent">{agentHealth?.version ?? "Unknown"}</ConfigRow>
+			</div>
+
+			<div className="flex-1 divide-y divide-border border-border border-t text-sm">
+				<div className="space-y-1.5 px-3 py-2.5">
+					<ConfigRow label="Public IP">{server.publicIp || "—"}</ConfigRow>
+					<ConfigRow label="Private IP">{server.privateIp || "—"}</ConfigRow>
+					<ConfigRow label="WireGuard IP">
+						{server.wireguardIp || "—"}
+					</ConfigRow>
+				</div>
+				<div className="space-y-1.5 px-3 py-2.5">
+					<ConfigRow label="CPU">
+						{server.resourcesCpu !== null
+							? `${server.resourcesCpu} cores`
+							: "—"}
+					</ConfigRow>
+					<ConfigRow label="Memory">
+						{server.resourcesMemory !== null
+							? `${Math.round((server.resourcesMemory / 1024) * 10) / 10} GB`
+							: "—"}
+					</ConfigRow>
+					<ConfigRow label="Disk">
+						{server.resourcesDisk !== null ? `${server.resourcesDisk} GB` : "—"}
+					</ConfigRow>
+				</div>
+				{server.meta ? (
+					<div className="space-y-1.5 px-3 py-2.5">
+						<ConfigRow label="OS / Arch">
+							{server.meta.os || "—"} / {server.meta.arch || "—"}
+						</ConfigRow>
+						<ConfigRow label="Hostname">
+							{server.meta.hostname || "—"}
+						</ConfigRow>
+					</div>
+				) : null}
+			</div>
+		</div>
+	);
+}
+
+function ConfigRow({
+	label,
+	children,
+}: {
+	label: string;
+	children: ReactNode;
+}) {
+	return (
+		<div className="flex items-baseline justify-between gap-4">
+			<span className="shrink-0 text-muted-foreground">{label}</span>
+			<span className="min-w-0 truncate text-right font-medium">
+				{children}
+			</span>
+		</div>
+	);
+}
+
+function MetricSummary({ value, label }: { value: string; label: string }) {
+	return (
+		<div className="shrink-0">
+			<p className="font-mono text-xl font-semibold tabular-nums tracking-tight">
+				{value}
+			</p>
+			<p className="text-sm text-muted-foreground">{label}</p>
+		</div>
+	);
+}
+
+function MetricsState({ message }: { message: string }) {
+	return (
+		<div className="flex h-full min-h-40 items-center justify-center rounded-lg border border-dashed text-sm text-muted-foreground">
+			{message}
+		</div>
+	);
+}
+
+function ServerMetricsTooltip({
+	active,
+	label,
+	payload,
+}: ServerMetricsTooltipProps) {
+	if (!active || !payload?.length) return null;
+	return (
+		<div className="min-w-40 rounded-lg border bg-popover p-3 text-popover-foreground shadow-md">
+			<p className="mb-2 text-xs text-muted-foreground">
+				{formatCompactDateTime(label)}
+			</p>
+			<div className="space-y-1 text-sm">
+				{payload.map((item) => (
+					<div
+						key={item.dataKey}
+						className="flex items-center justify-between gap-5"
+					>
+						<span className="text-muted-foreground">
+							{item.name ?? (item.dataKey === "bytes" ? "Used" : "Usage")}
+						</span>
+						<span className="font-mono font-medium tabular-nums">
+							{item.dataKey === "bytes"
+								? formatBytes(Number(item.value))
+								: formatPercent(Number(item.value))}
+						</span>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
+
+function buildChartRows(
+	history: NodeMetricsHistory | undefined,
+	mode: ServerMetricMode,
+): ChartRow[] {
+	if (!history) return [];
+	const percentPoints = history[`${mode}UsagePercent`];
+	const bytePoints = mode === "cpu" ? [] : history[`${mode}UsedBytes`];
+	const rows = new Map<string, ChartRow>();
+	addPoints(rows, percentPoints, "percent");
+	addPoints(rows, bytePoints, "bytes");
+	return Array.from(rows.values()).sort(
+		(a, b) => getTimestamp(a.timestamp, 0) - getTimestamp(b.timestamp, 0),
+	);
+}
+
+function addPoints(
+	rows: Map<string, ChartRow>,
+	points: NodeMetricPoint[],
+	key: "percent" | "bytes",
+) {
+	for (const point of points) {
+		const row = rows.get(point.timestamp) ?? { timestamp: point.timestamp };
+		row[key] = point.value;
+		rows.set(point.timestamp, row);
+	}
+}
+
+function getCurrentPercent(
+	current: NodeMetricsSnapshot | null,
+	mode: ServerMetricMode,
+) {
+	return current?.[`${mode}UsagePercent`] ?? null;
+}
+
+function getCurrentBytes(
+	current: NodeMetricsSnapshot | null,
+	mode: ServerMetricMode,
+) {
+	return mode === "cpu" ? null : (current?.[`${mode}UsedBytes`] ?? null);
+}
+
+function formatHealth(healthy: boolean | undefined, detail: string) {
+	if (healthy === undefined) return "Unknown";
+	return healthy ? detail : `${detail} · unavailable`;
+}
+
+function formatPercent(value: number | null) {
+	return value === null || !Number.isFinite(value)
+		? "—"
+		: `${value.toFixed(1)}%`;
+}
+
+function formatBytes(value: number | null) {
+	if (value === null || !Number.isFinite(value)) return "—";
+	if (value >= 1024 ** 4) return `${(value / 1024 ** 4).toFixed(2)} TB`;
+	if (value >= 1024 ** 3) return `${(value / 1024 ** 3).toFixed(2)} GB`;
+	if (value >= 1024 ** 2) return `${(value / 1024 ** 2).toFixed(1)} MB`;
+	return `${Math.round(value / 1024)} KB`;
+}
+
+function formatBytesCompact(value: number) {
+	if (value >= 1024 ** 4) return `${(value / 1024 ** 4).toFixed(1)}T`;
+	if (value >= 1024 ** 3) return `${(value / 1024 ** 3).toFixed(1)}G`;
+	if (value >= 1024 ** 2) return `${(value / 1024 ** 2).toFixed(0)}M`;
+	return `${Math.round(value / 1024)}K`;
+}
diff --git a/web/components/server/server-health-details.tsx b/web/components/server/server-health-details.tsx
deleted file mode 100644
index de6973e0..00000000
--- a/web/components/server/server-health-details.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-"use client";
-
-import {
-	Activity,
-	Container,
-	Cpu,
-	HardDrive,
-	MemoryStick,
-	Network,
-} from "lucide-react";
-import useSWR from "swr";
-import { HealthIndicator } from "@/components/cluster/health-indicator";
-import { ResourceBar } from "@/components/cluster/resource-bar";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import type { HealthStats, Server } from "@/db/types";
-import { fetcher } from "@/lib/fetcher";
-
-type ServerHealthData = {
-	healthStats: HealthStats | null;
-	networkHealth: Server["networkHealth"];
-	containerHealth: Server["containerHealth"];
-	agentHealth: Server["agentHealth"];
-};
-
-type ClusterHealthResponse = {
-	servers: Array<
-		ServerHealthData & {
-			id: string;
-			name: string;
-			status: string;
-		}
-	>;
-};
-
-interface ServerHealthDetailsProps {
-	serverId: string;
-	initialData: ServerHealthData;
-}
-
-export function ServerHealthDetails({
-	serverId,
-	initialData,
-}: ServerHealthDetailsProps) {
-	const { data } = useSWR<ClusterHealthResponse>(
-		"/api/cluster-health",
-		fetcher,
-		{
-			refreshInterval: 10000,
-		},
-	);
-
-	const serverData = data?.servers?.find((s) => s.id === serverId);
-	const healthStats = serverData?.healthStats ?? initialData.healthStats;
-	const networkHealth = serverData?.networkHealth ?? initialData.networkHealth;
-	const containerHealth =
-		serverData?.containerHealth ?? initialData.containerHealth;
-	const agentHealth = serverData?.agentHealth ?? initialData.agentHealth;
-
-	if (!healthStats && !networkHealth && !containerHealth && !agentHealth) {
-		return null;
-	}
-
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>System Health</CardTitle>
-			</CardHeader>
-			<CardContent className="space-y-4">
-				{healthStats && (
-					<div className="grid gap-4 sm:grid-cols-3">
-						<ResourceBar
-							value={healthStats.cpuUsagePercent}
-							label="CPU"
-							icon={<Cpu className="size-4" />}
-						/>
-						<ResourceBar
-							value={healthStats.memoryUsagePercent}
-							label="Memory"
-							icon={<MemoryStick className="size-4" />}
-						/>
-						<ResourceBar
-							value={healthStats.diskUsagePercent}
-							label="Disk"
-							icon={<HardDrive className="size-4" />}
-						/>
-					</div>
-				)}
-
-				{(networkHealth || containerHealth || agentHealth) && (
-					<>
-						<Separator />
-						<div className="grid gap-4 sm:grid-cols-3">
-							<HealthIndicator
-								healthy={networkHealth?.tunnelUp}
-								label="Network"
-								detail={`${networkHealth?.peerCount ?? 0} peers`}
-								icon={<Network className="size-4" />}
-							/>
-							<HealthIndicator
-								healthy={containerHealth?.runtimeResponsive}
-								label="Containers"
-								detail={`${containerHealth?.runningContainers ?? 0} running`}
-								icon={<Container className="size-4" />}
-							/>
-							<HealthIndicator
-								healthy={!!agentHealth}
-								label="Agent"
-								detail={agentHealth?.version ?? "Unknown"}
-								icon={<Activity className="size-4" />}
-							/>
-						</div>
-					</>
-				)}
-			</CardContent>
-		</Card>
-	);
-}
diff --git a/web/components/server/server-tabs.tsx b/web/components/server/server-tabs.tsx
new file mode 100644
index 00000000..feeea00c
--- /dev/null
+++ b/web/components/server/server-tabs.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+export function ServerTabs({ serverId }: { serverId: string }) {
+	const pathname = usePathname();
+	const basePath = `/dashboard/servers/${serverId}`;
+	const tabs = [
+		{ name: "Overview", href: basePath },
+		{ name: "Logs", href: `${basePath}/logs` },
+		{ name: "Settings", href: `${basePath}/settings` },
+	];
+
+	return (
+		<div className="overflow-x-auto px-4 py-3">
+			<nav
+				aria-label="Server sections"
+				className="inline-flex w-max items-center rounded-lg bg-muted p-[3px]"
+			>
+				{tabs.map((tab) => {
+					const isActive =
+						tab.href === basePath
+							? pathname === basePath
+							: pathname.startsWith(tab.href);
+
+					return (
+						<Link
+							key={tab.href}
+							href={tab.href}
+							aria-current={isActive ? "page" : undefined}
+							className={cn(
+								"shrink-0 whitespace-nowrap rounded-md border border-transparent px-3 py-1.5 text-sm font-medium transition-all",
+								isActive
+									? "bg-background text-foreground shadow-sm dark:border-input dark:bg-input/30"
+									: "text-muted-foreground hover:text-foreground",
+							)}
+						>
+							{tab.name}
+						</Link>
+					);
+				})}
+			</nav>
+		</div>
+	);
+}
diff --git a/web/components/service/details/deployment-progress.tsx b/web/components/service/details/deployment-progress.tsx
index 375c5327..8e8e87c8 100644
--- a/web/components/service/details/deployment-progress.tsx
+++ b/web/components/service/details/deployment-progress.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { Loader2, XCircle } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
@@ -13,6 +12,7 @@ import type {
 	ServiceWithDetails as Service,
 } from "@/db/types";
 import type { ConfigChange } from "@/lib/service-config";
+import { cn } from "@/lib/utils";
 
 type StageInfo = {
 	id: string;
@@ -168,6 +168,19 @@ export function getBarState(
 	return { mode: "hidden" };
 }
 
+function StageProgress({ current, total }: { current: number; total: number }) {
+	const progress = total > 0 ? Math.min((current + 1) / total, 1) : 0;
+
+	return (
+		<div className="h-0.5 w-full bg-border/60">
+			<div
+				className="h-full bg-blue-500 transition-[width] duration-500 ease-out"
+				style={{ width: `${progress * 100}%` }}
+			/>
+		</div>
+	);
+}
+
 interface DeploymentProgressProps {
 	service: Service;
 	changes: ConfigChange[];
@@ -253,19 +266,17 @@ export const DeploymentProgress = memo(function DeploymentProgress({
 	let content: React.ReactNode = null;
 
 	if (barState.mode === "building") {
+		const buildStageIndex = ACTIVE_BUILD_STATUSES.indexOf(barState.buildStatus);
+
 		content = (
-			<div className="rounded-lg border bg-card p-4">
-				<div className="flex items-center justify-between gap-4">
-					<div className="flex items-center gap-3">
-						<div className="p-2 rounded-md bg-blue-500/10 text-blue-600 dark:text-blue-400">
-							<Loader2 className="size-4 animate-spin" />
-						</div>
-						<div>
-							<p className="font-medium text-foreground">Building</p>
-							<p className="text-sm text-muted-foreground">
-								{BUILD_STATUS_LABELS[barState.buildStatus] || "Building"}
-							</p>
-						</div>
+			<div className="mx-auto max-w-5xl overflow-hidden rounded-b-lg border border-blue-500/40 border-t-0 bg-blue-500/5">
+				<div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-3 py-2">
+					<div className="flex min-w-0 items-center gap-2 text-sm">
+						<span className="size-2 animate-pulse rounded-full bg-blue-500" />
+						<span className="font-medium">Building</span>
+						<span className="truncate text-muted-foreground">
+							{BUILD_STATUS_LABELS[barState.buildStatus] || "Building"}
+						</span>
 					</div>
 					<Button
 						variant="outline"
@@ -279,45 +290,48 @@ export const DeploymentProgress = memo(function DeploymentProgress({
 						View Logs
 					</Button>
 				</div>
+				<StageProgress
+					current={buildStageIndex}
+					total={ACTIVE_BUILD_STATUSES.length}
+				/>
 			</div>
 		);
 	}
 
 	if (barState.mode === "deploying") {
-		const currentStage = STAGES[barState.stageIndex];
 		const isMigrating = !!service.migrationStatus;
 		const isMigrationFailed = service.migrationStatus === "failed";
 
-		let status = currentStage?.label || "Deploying";
-		if (barState.stage === "health_check" && !service.healthCheckCmd) {
-			status = "Starting container";
-		}
-		if (isMigrating && service.migrationStatus) {
-			status =
-				MIGRATION_STAGES[service.migrationStatus] ||
-				service.migrationStatus ||
-				"Migrating";
-		}
+		const migrationStatus =
+			isMigrating && service.migrationStatus
+				? MIGRATION_STAGES[service.migrationStatus] || service.migrationStatus
+				: null;
 
 		content = (
-			<div className="rounded-lg border bg-card p-4">
-				<div className="flex items-center justify-between gap-4">
-					<div className="flex items-center gap-3">
-						{isMigrationFailed ? (
-							<div className="p-2 rounded-md bg-rose-500/10 text-rose-600 dark:text-rose-400">
-								<XCircle className="size-4" />
-							</div>
-						) : (
-							<div className="p-2 rounded-md bg-blue-500/10 text-blue-600 dark:text-blue-400">
-								<Loader2 className="size-4 animate-spin" />
-							</div>
-						)}
-						<div>
-							<p className="font-medium text-foreground">
-								{isMigrating ? "Migrating" : "Deploying"}
-							</p>
-							<p className="text-sm text-muted-foreground">{status}</p>
-						</div>
+			<div
+				className={cn(
+					"mx-auto max-w-5xl overflow-hidden rounded-b-lg border border-t-0",
+					isMigrationFailed
+						? "border-red-500/40 bg-red-500/5"
+						: "border-blue-500/40 bg-blue-500/5",
+				)}
+			>
+				<div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-3 py-2">
+					<div className="flex min-w-0 items-center gap-2 text-sm">
+						<span
+							className={cn(
+								"size-2 rounded-full",
+								isMigrationFailed ? "bg-red-500" : "animate-pulse bg-blue-500",
+							)}
+						/>
+						<span className="font-medium">
+							{isMigrating ? "Migrating" : "Deploying"}
+						</span>
+						{migrationStatus ? (
+							<span className="truncate text-muted-foreground">
+								{migrationStatus}
+							</span>
+						) : null}
 					</div>
 					{isMigrating ? (
 						<Button
@@ -330,7 +344,7 @@ export const DeploymentProgress = memo(function DeploymentProgress({
 						</Button>
 					) : (
 						<Button
-							variant="outline"
+							variant="destructive"
 							size="sm"
 							onClick={handleAbort}
 							disabled={isAborting}
@@ -339,6 +353,9 @@ export const DeploymentProgress = memo(function DeploymentProgress({
 						</Button>
 					)}
 				</div>
+				{!isMigrating ? (
+					<StageProgress current={barState.stageIndex} total={STAGES.length} />
+				) : null}
 			</div>
 		);
 	}
@@ -351,9 +368,7 @@ export const DeploymentProgress = memo(function DeploymentProgress({
 				opacity: isVisible ? 1 : 0,
 			}}
 		>
-			<div className="overflow-hidden">
-				{content && <div className="pb-4">{content}</div>}
-			</div>
+			<div className="overflow-hidden">{content}</div>
 		</div>
 	);
 });
diff --git a/web/components/service/details/pending-changes-banner.tsx b/web/components/service/details/pending-changes-banner.tsx
index e776a8e2..b7ca45c6 100644
--- a/web/components/service/details/pending-changes-banner.tsx
+++ b/web/components/service/details/pending-changes-banner.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AlertTriangle, ArrowRight, Rocket } from "lucide-react";
+import { Rocket } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { memo, useState } from "react";
 import { useSWRConfig } from "swr";
@@ -72,60 +72,59 @@ export const PendingChangesBanner = memo(function PendingChangesBanner({
 			}}
 		>
 			<div className="overflow-hidden">
-				<div className="pb-4">
-					<div className="rounded-lg border bg-card p-4">
-						<div className="flex items-start justify-between gap-4">
-							<div className="flex items-start gap-3 min-w-0">
-								<div className="p-2 rounded-md bg-amber-500/10 text-amber-600 dark:text-amber-400 shrink-0">
-									<AlertTriangle className="size-4" />
-								</div>
-								<div className="min-w-0">
-									<p className="font-medium text-foreground">
-										{hasChanges
-											? `${changes.length} pending change${changes.length !== 1 ? "s" : ""}`
-											: "Ready to deploy"}
-									</p>
-									{hasChanges ? (
-										<div className="mt-2 space-y-1.5">
-											{changes.map((change, index) => (
-												<div
-													key={`${change.field}:${change.from}:${change.to}:${index}`}
-													className="flex items-center gap-2 text-sm"
-												>
-													<span className="font-medium shrink-0 text-muted-foreground">
-														{change.field}:
-													</span>
-													<span className="text-muted-foreground truncate">
-														{change.from}
-													</span>
-													<ArrowRight className="size-3 shrink-0 text-muted-foreground" />
-													<span className="text-foreground truncate">
-														{change.to}
-													</span>
-												</div>
-											))}
-										</div>
-									) : (
-										<p className="text-sm text-muted-foreground mt-1">
-											This service has no active deployments.
-										</p>
-									)}
-								</div>
-							</div>
-							<Button
-								size="sm"
-								onClick={handleDeploy}
-								disabled={isDeploying || totalReplicas === 0}
-							>
-								{isDeploying ? (
-									<Spinner className="size-4" />
-								) : (
-									<Rocket className="size-4" data-icon="inline-start" />
-								)}
-								{isGithubWithNoDeployments ? "Build" : "Deploy"}
-							</Button>
+				<div className="mx-auto max-w-5xl rounded-b-lg border border-amber-500/40 border-t-0 bg-amber-500/5">
+					<div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-3 py-2">
+						<div className="flex items-center gap-2">
+							<span className="size-2 rounded-full bg-amber-500" />
+							<span className="text-sm font-medium">
+								{hasChanges
+									? `${changes.length} pending change${changes.length !== 1 ? "s" : ""}`
+									: "Ready to deploy"}
+							</span>
 						</div>
+						<Button
+							size="sm"
+							onClick={handleDeploy}
+							disabled={isDeploying || totalReplicas === 0}
+						>
+							{isDeploying ? (
+								<Spinner className="size-4" />
+							) : (
+								<Rocket className="size-4" data-icon="inline-start" />
+							)}
+							{isGithubWithNoDeployments ? "Build" : "Deploy"}
+						</Button>
 					</div>
+					{hasChanges ? (
+						<div className="space-y-1.5 border-amber-500/20 border-t px-3 py-2.5 font-mono text-sm">
+							{changes.map((change, index) => (
+								<div
+									key={`${change.field}:${change.from}:${change.to}:${index}`}
+									className="flex items-baseline justify-between gap-4"
+								>
+									<span className="shrink-0 text-muted-foreground">
+										{change.field}
+									</span>
+									<span className="flex min-w-0 items-baseline justify-end gap-1.5">
+										<span
+											className="truncate text-muted-foreground"
+											title={change.from}
+										>
+											{change.from}
+										</span>
+										<span className="shrink-0 text-muted-foreground">→</span>
+										<span className="truncate font-medium" title={change.to}>
+											{change.to}
+										</span>
+									</span>
+								</div>
+							))}
+						</div>
+					) : (
+						<p className="border-amber-500/20 border-t px-3 py-2.5 text-sm text-muted-foreground">
+							This service has no active deployments.
+						</p>
+					)}
 				</div>
 			</div>
 		</div>
diff --git a/web/components/service/details/service-details-overview.tsx b/web/components/service/details/service-details-overview.tsx
index 5bc2672b..019f8f41 100644
--- a/web/components/service/details/service-details-overview.tsx
+++ b/web/components/service/details/service-details-overview.tsx
@@ -440,16 +440,31 @@ function ServiceConfigPanel({
 
 	return (
 		<div className="flex min-w-0 flex-col border-border border-t font-mono lg:border-t-0 lg:border-l">
-			<div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1 px-3 py-2">
-				<div className="flex items-center gap-2">
-					<span className={cn("size-2 rounded-full", statusClasses.dot)} />
-					<span className={cn("font-bold", statusClasses.text)}>
-						{overview.status.label}
+			<div className="space-y-1.5 px-3 py-2.5 text-sm">
+				<div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-base">
+					<div className="flex items-center gap-2">
+						<span className={cn("size-2 rounded-full", statusClasses.dot)} />
+						<span className={cn("font-bold", statusClasses.text)}>
+							{overview.status.label}
+						</span>
+					</div>
+					<span className="text-muted-foreground tabular-nums">
+						{formatInstanceSummary(overview)}
 					</span>
 				</div>
-				<span className="text-sm text-muted-foreground tabular-nums">
-					{formatInstanceSummary(overview)}
-				</span>
+				{overview.serverSummaries.length === 0 ? (
+					<p className="text-muted-foreground">No servers configured</p>
+				) : (
+					overview.serverSummaries.map((server) => (
+						<ConfigRow key={server.id} label={server.name}>
+							<span className="tabular-nums">
+								{server.configured > 0
+									? `${server.running}/${server.configured} running`
+									: `${server.running} running`}
+							</span>
+						</ConfigRow>
+					))
+				)}
 			</div>
 
 			<div className="flex-1 divide-y divide-border border-border border-t text-sm">
@@ -457,6 +472,13 @@ function ServiceConfigPanel({
 					<ConfigRow label="Source">
 						<SourcePrimary source={overview.source} />
 					</ConfigRow>
+					{service.volumes && service.volumes.length > 0 ? (
+						<ConfigRow label="Volumes">
+							{service.volumes
+								.map((volume) => `${volume.name} → ${volume.containerPath}`)
+								.join(", ")}
+						</ConfigRow>
+					) : null}
 					{overview.source.branch ? (
 						<ConfigRow label="Branch">{overview.source.branch}</ConfigRow>
 					) : null}
@@ -465,31 +487,15 @@ function ServiceConfigPanel({
 							{service.githubRootDir}
 						</ConfigRow>
 					) : null}
-					<ConfigRow label="Start command" muted={!service.startCommand}>
-						{service.startCommand ? "Custom" : "Image default"}
-					</ConfigRow>
-					<ConfigRow label="Health check" muted={!service.healthCheckCmd}>
-						{service.healthCheckCmd ? "Configured" : "None"}
-					</ConfigRow>
-					<ConfigRow label="Resources" muted={!hasResourceLimits}>
-						{hasResourceLimits ? formatResources(service) : "Not set"}
-					</ConfigRow>
-				</div>
-
-				<div className="space-y-1.5 px-3 py-2.5">
-					{overview.serverSummaries.length === 0 ? (
-						<p className="text-muted-foreground">No servers configured</p>
-					) : (
-						overview.serverSummaries.map((server) => (
-							<ConfigRow key={server.id} label={server.name}>
-								<span className="tabular-nums">
-									{server.configured > 0
-										? `${server.running}/${server.configured} running`
-										: `${server.running} running`}
-								</span>
-							</ConfigRow>
-						))
-					)}
+					{service.startCommand ? (
+						<ConfigRow label="Start command">Custom</ConfigRow>
+					) : null}
+					{service.healthCheckCmd ? (
+						<ConfigRow label="Health check">Configured</ConfigRow>
+					) : null}
+					{hasResourceLimits ? (
+						<ConfigRow label="Resources">{formatResources(service)}</ConfigRow>
+					) : null}
 				</div>
 
 				<div className="space-y-1.5 px-3 py-2.5">
@@ -513,21 +519,14 @@ function ServiceConfigPanel({
 function ConfigRow({
 	label,
 	children,
-	muted = false,
 }: {
 	label: string;
 	children: ReactNode;
-	muted?: boolean;
 }) {
 	return (
 		<div className="flex items-baseline justify-between gap-4">
 			<span className="shrink-0 text-muted-foreground">{label}</span>
-			<span
-				className={cn(
-					"min-w-0 truncate text-right font-medium",
-					muted && "font-normal text-muted-foreground",
-				)}
-			>
+			<span className="min-w-0 truncate text-right font-medium">
 				{children}
 			</span>
 		</div>
@@ -566,7 +565,7 @@ function EndpointPrimary({ endpoint }: { endpoint: EndpointItem }) {
 				href={endpoint.href}
 				target="_blank"
 				rel="noopener noreferrer"
-				className="hover:text-primary"
+				className="text-primary underline decoration-primary/40 underline-offset-4 transition-colors hover:decoration-primary focus-visible:decoration-primary focus-visible:outline-none"
 			>
 				{endpoint.label}
 			</a>
diff --git a/web/db/queries.ts b/web/db/queries.ts
index 7f70e81b..0144dc7c 100644
--- a/web/db/queries.ts
+++ b/web/db/queries.ts
@@ -1,4 +1,5 @@
 import { and, eq, isNotNull, isNull } from "drizzle-orm";
+import { cache } from "react";
 import { db } from "@/db";
 import {
 	deployments,
@@ -96,7 +97,7 @@ export async function listServers() {
 	return db.select().from(servers).orderBy(servers.createdAt);
 }
 
-export async function getServerDetails(id: string) {
+export const getServerDetails = cache(async (id: string) => {
 	const serverResults = await db
 		.select({
 			id: servers.id,
@@ -126,7 +127,7 @@ export async function getServerDetails(id: string) {
 
 	const server = serverResults[0];
 	return server ? { ...server, healthStats: null } : null;
-}
+});
 
 export async function getClusterHealth() {
 	const allServers = await db