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 278395c..c0a41ea 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/components/service/details/deployment-progress.tsx b/web/components/service/details/deployment-progress.tsx
index 375c532..8e8e87c 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 e776a8e..b7ca45c 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 5bc2672..517dda7 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>