diff --git a/apps/api/src/db/repo/routes.ts b/apps/api/src/db/repo/routes.ts
index 3ac9d59..7fefd74 100644
--- a/apps/api/src/db/repo/routes.ts
+++ b/apps/api/src/db/repo/routes.ts
@@ -198,12 +198,6 @@ export const listRoutesByDeployment = async (deploymentId: string): Promise<Rout
 	return rows.map(mapRoute);
 };
 
-export const listRoutesByDeployment = async (deploymentId: string): Promise<Route[]> => {
-	const db = await getDb();
-	const rows = await db.select().from(routes).where(eq(routes.deploymentId, deploymentId)).execute();
-	return rows.map(mapRoute);
-};
-
 export const deleteRoute = async (id: string): Promise<void> => {
 	const db = await getDb();
 	await db.delete(routes).where(eq(routes.id, id)).execute();
diff --git a/apps/web/src/components/databases/CreateDatabaseDialog.tsx b/apps/web/src/components/databases/CreateDatabaseDialog.tsx
index 04a05cf..62cbfbc 100644
--- a/apps/web/src/components/databases/CreateDatabaseDialog.tsx
+++ b/apps/web/src/components/databases/CreateDatabaseDialog.tsx
@@ -230,14 +230,14 @@ export function CreateDatabaseDialog({
 						</p>
 					)}
 
-					<div className="flex justify-end gap-2 border-t border-border/40 pt-4">
-						<Button variant="ghost" onClick={() => onOpenChange(false)} className="text-xs text-muted-foreground">
+					<div className="flex flex-col-reverse sm:flex-row justify-end gap-2 border-t border-border/40 pt-4">
+						<Button variant="ghost" onClick={() => onOpenChange(false)} className="text-xs text-muted-foreground w-full sm:w-auto">
 							Cancel
 						</Button>
 						<Button
 							disabled={isCreating || !name.trim() || (!allowAnywhere && !cidrs.trim())}
 							onClick={create}
-							className="bg-orange-500 hover:bg-orange-600 text-white font-medium text-xs px-5 shadow-md"
+							className="bg-orange-500 hover:bg-orange-600 text-white font-medium text-xs px-5 shadow-md w-full sm:w-auto"
 						>
 							{isCreating ? "Provisioning..." : "Provision Database"}
 						</Button>
diff --git a/apps/web/src/components/databases/DatabaseCard.tsx b/apps/web/src/components/databases/DatabaseCard.tsx
index 5888d79..e02e4c4 100644
--- a/apps/web/src/components/databases/DatabaseCard.tsx
+++ b/apps/web/src/components/databases/DatabaseCard.tsx
@@ -48,8 +48,7 @@ export function DatabaseCard({ database, project, onChanged, onDelete }: Databas
 			onChanged();
 		} catch (err) {
 			setActionError(err instanceof Error ? err.message : "Action failed");
-		}
-		fontFinally: {
+		} finally {
 			setIsBusy(false);
 		}
 	};
@@ -62,8 +61,7 @@ export function DatabaseCard({ database, project, onChanged, onDelete }: Databas
 
 	return (
 		<Card className="border-border/60 bg-card/60 backdrop-blur-sm shadow-xl hover:border-orange-500/30 transition-all overflow-hidden flex flex-col justify-between">
-			<CardContent className="space-y-5 p-6">
-				{/* Top Header Row */}
+			<CardContent className="space-y-5 p-4 sm:p-6">
 				<div className="flex items-start justify-between gap-4">
 					<div className="space-y-1.5">
 						<div className="flex items-center gap-2">
@@ -79,7 +77,7 @@ export function DatabaseCard({ database, project, onChanged, onDelete }: Databas
 							<Database className="h-4 w-4 text-orange-400" />
 							{database.name}
 						</h3>
-						<p className="text-xs text-muted-foreground flex items-center gap-1.5">
+						<p className="text-xs text-muted-foreground flex items-center gap-1.5 flex-wrap">
 							<span>{project ? `Project: ${project.name}` : "Standalone Database"}</span>
 							<span>·</span>
 							<span className="font-mono text-zinc-400">{database.databaseName}</span>
@@ -92,13 +90,12 @@ export function DatabaseCard({ database, project, onChanged, onDelete }: Databas
 						disabled={isBusy}
 						aria-label={`Delete ${database.name}`}
 						onClick={() => onDelete(database)}
-						className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg"
+						className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg shrink-0"
 					>
 						<Trash2 className="h-4 w-4" />
 					</Button>
 				</div>
 
-				{/* Endpoints Grid */}
 				<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
 					<div className="rounded-xl border border-border/80 bg-black/40 p-3 space-y-1">
 						<div className="flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground">
@@ -125,7 +122,6 @@ export function DatabaseCard({ database, project, onChanged, onDelete }: Databas
 					</div>
 				</div>
 
-				{/* Storage Meter */}
 				<div className="space-y-1.5">
 					<div className="flex justify-between text-xs font-medium">
 						<span className="text-muted-foreground">Disk Storage Usage</span>
@@ -152,7 +148,6 @@ export function DatabaseCard({ database, project, onChanged, onDelete }: Databas
 					</div>
 				</div>
 
-				{/* Connection String Box */}
 				<div className="rounded-xl border border-border/80 bg-black/50 p-3.5 space-y-2">
 					<div className="flex items-center justify-between gap-3">
 						<div className="min-w-0 flex-1">
@@ -170,6 +165,7 @@ export function DatabaseCard({ database, project, onChanged, onDelete }: Databas
 								variant="ghost"
 								size="icon"
 								onClick={reveal}
+								aria-label={credentials ? "Hide credentials" : "Reveal credentials"}
 								className="h-8 w-8 text-muted-foreground hover:text-foreground rounded-lg"
 							>
 								{credentials ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
@@ -181,6 +177,7 @@ export function DatabaseCard({ database, project, onChanged, onDelete }: Databas
 									variant="ghost"
 									size="sm"
 									onClick={() => handleCopyConnection(connString)}
+									aria-label="Copy connection string"
 									className="h-8 text-xs text-emerald-400 hover:bg-emerald-500/10 gap-1 px-2 rounded-lg"
 								>
 									{copiedConnection ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
@@ -197,9 +194,8 @@ export function DatabaseCard({ database, project, onChanged, onDelete }: Databas
 					)}
 				</div>
 
-				{/* Action Row */}
-				<div className="flex items-center justify-between border-t border-border/40 pt-4">
-					<div className="flex gap-2">
+				<div className="flex flex-wrap items-center justify-between gap-2 border-t border-border/40 pt-4">
+					<div className="flex flex-wrap gap-2">
 						{database.status === "stopped" ? (
 							<Button
 								size="sm"
diff --git a/apps/web/src/components/layout/Header.tsx b/apps/web/src/components/layout/Header.tsx
index a1a1cff..49ea2cc 100644
--- a/apps/web/src/components/layout/Header.tsx
+++ b/apps/web/src/components/layout/Header.tsx
@@ -10,37 +10,39 @@ interface HeaderProps {
 
 export function Header({ currentProject, currentProjectId, location, setSidebarOpen }: HeaderProps) {
 	return (
-		<header className="h-14 border-b border-[#1a1a1f] bg-[#0c0c0e] flex items-center px-4 sm:px-6 gap-2 text-xs text-zinc-500">
-			<button
-				onClick={() => setSidebarOpen(true)}
-				className="lg:hidden p-1.5 -ml-1 mr-1 rounded-md hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 transition-colors"
-				aria-label="Open sidebar"
-			>
-				<Menu className="h-4.5 w-4.5" />
-			</button>
+		<header className="h-14 border-b border-[#1a1a1f] bg-[#0c0c0e] flex items-center justify-between px-3.5 sm:px-6 gap-2 text-xs text-zinc-500 sticky top-0 z-30">
+			<div className="flex items-center gap-1.5 sm:gap-2 min-w-0">
+				<button
+					onClick={() => setSidebarOpen(true)}
+					className="lg:hidden p-2 -ml-1 mr-1 rounded-lg hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 transition-colors"
+					aria-label="Open sidebar"
+				>
+					<Menu className="h-5 w-5" />
+				</button>
 
-			<Link to="/" className="hover:text-zinc-200 transition-colors">
-				Workspace
-			</Link>
-			<ChevronRight className="h-3 w-3 text-zinc-600" />
-			{currentProject ? (
-				<>
-					<Link
-						to="/project/$projectId"
-						params={{ projectId: currentProjectId! }}
-						search={{ tab: "deployments" }}
-						className="hover:text-zinc-200 transition-colors font-medium text-zinc-300"
-					>
-						{currentProject.name}
-					</Link>
-					<ChevronRight className="h-3 w-3 text-zinc-600" />
-					<span className="text-zinc-100 font-bold uppercase tracking-wider text-[10px] bg-zinc-800 px-1.5 py-0.5 rounded">
-						{new URLSearchParams(location.search).get("tab") || "deployments"}
-					</span>
-				</>
-			) : (
-				<span className="text-zinc-300 font-medium">Dashboard</span>
-			)}
+				<Link to="/" className="hover:text-zinc-200 transition-colors shrink-0">
+					Workspace
+				</Link>
+				<ChevronRight className="h-3 w-3 text-zinc-600 shrink-0" />
+				{currentProject ? (
+					<>
+						<Link
+							to="/project/$projectId"
+							params={{ projectId: currentProjectId! }}
+							search={{ tab: "deployments" }}
+							className="hover:text-zinc-200 transition-colors font-medium text-zinc-300 truncate max-w-[110px] sm:max-w-[200px]"
+						>
+							{currentProject.name}
+						</Link>
+						<ChevronRight className="h-3 w-3 text-zinc-600 shrink-0" />
+						<span className="text-zinc-100 font-bold uppercase tracking-wider text-[9px] sm:text-[10px] bg-zinc-800 px-1.5 py-0.5 rounded shrink-0">
+							{new URLSearchParams(location.search).get("tab") || "deployments"}
+						</span>
+					</>
+				) : (
+					<span className="text-zinc-300 font-medium truncate">Dashboard</span>
+				)}
+			</div>
 		</header>
 	);
 }
diff --git a/apps/web/src/components/project/alerts/AlertsTab.tsx b/apps/web/src/components/project/alerts/AlertsTab.tsx
index 8589ef2..2c06095 100644
--- a/apps/web/src/components/project/alerts/AlertsTab.tsx
+++ b/apps/web/src/components/project/alerts/AlertsTab.tsx
@@ -78,7 +78,7 @@ export function AlertsTab({ projectId }: AlertsTabProps) {
 	return (
 		<div className="space-y-6">
 			{alerts.length === 0 ? (
-				<div className="flex flex-col items-center justify-center border border-dashed border-border rounded-2xl p-12 text-center bg-card/20 backdrop-blur-sm relative overflow-hidden group min-h-[350px]">
+				<div className="flex flex-col items-center justify-center border border-dashed border-border rounded-2xl p-6 sm:p-12 text-center bg-card/20 backdrop-blur-sm relative overflow-hidden group min-h-[350px]">
 					<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent opacity-50 pointer-events-none" />
 					<div className="relative w-16 h-16 rounded-2xl bg-gradient-to-b from-[#1a1a1f] to-[#121215] border border-border flex items-center justify-center mb-6 shadow-xl group-hover:border-primary/30 transition-colors duration-300">
 						<div className="absolute inset-0 bg-primary/10 rounded-2xl blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
@@ -98,7 +98,7 @@ export function AlertsTab({ projectId }: AlertsTabProps) {
 				</div>
 			) : (
 				<div className="space-y-4">
-					<div className="flex items-center justify-between">
+					<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
 						<div>
 							<h2 className="text-lg font-semibold text-foreground">Alert Rules</h2>
 							<p className="text-sm text-muted-foreground">
@@ -107,7 +107,7 @@ export function AlertsTab({ projectId }: AlertsTabProps) {
 						</div>
 						<Button
 							onClick={() => setIsOpen(true)}
-							className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold flex items-center gap-1.5 px-4 h-9 rounded-xl transition-all shadow-md"
+							className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold flex items-center justify-center gap-1.5 px-4 h-9 rounded-xl transition-all shadow-md w-full sm:w-auto"
 						>
 							<Plus className="h-4.5 w-4.5" /> Add Rule
 						</Button>
@@ -119,15 +119,15 @@ export function AlertsTab({ projectId }: AlertsTabProps) {
 							return (
 								<div
 									key={a.id}
-									className="flex items-center justify-between p-4 rounded-xl border border-border bg-card/40 hover:bg-card/80 transition-all gap-4 group"
+									className="flex items-start sm:items-center justify-between p-3.5 sm:p-4 rounded-xl border border-border bg-card/40 hover:bg-card/80 transition-all gap-3 group"
 								>
-									<div className="flex items-center gap-4">
-										<div className="w-10 h-10 rounded-xl bg-primary/10 text-primary flex items-center justify-center shrink-0 border border-primary/15">
+									<div className="flex items-start sm:items-center gap-3 sm:gap-4 min-w-0">
+										<div className="w-10 h-10 rounded-xl bg-primary/10 text-primary flex items-center justify-center shrink-0 border border-primary/15 mt-0.5 sm:mt-0">
 											<Icon className="h-5 w-5" />
 										</div>
-										<div>
+										<div className="min-w-0">
 											<div className="flex items-center gap-2 flex-wrap">
-												<span className="font-semibold text-sm capitalize text-foreground">
+												<span className="font-semibold text-sm capitalize text-foreground truncate">
 													{a.type.replace("_", " ")}
 												</span>
 												<Badge
@@ -137,8 +137,9 @@ export function AlertsTab({ projectId }: AlertsTabProps) {
 													{a.channel}
 												</Badge>
 											</div>
-											<p className="text-xs text-muted-foreground mt-1">
-												Triggers when <span className="capitalize">{a.type.replace("_", " ")}</span> exceeds{" "}
+											<p className="text-xs text-muted-foreground mt-1 leading-relaxed">
+												Triggers when{" "}
+												<span className="capitalize">{a.type.replace("_", " ")}</span> exceeds{" "}
 												<span className="font-semibold text-foreground">
 													{a.threshold}
 													{getUnit(a.type)}
@@ -146,7 +147,7 @@ export function AlertsTab({ projectId }: AlertsTabProps) {
 											</p>
 										</div>
 									</div>
-									<div className="flex items-center gap-4">
+									<div className="flex items-center gap-2 shrink-0">
 										<button
 											type="button"
 											onClick={() => api.toggleAlert(a.id, !a.enabled).then(() => refetch())}
@@ -165,7 +166,7 @@ export function AlertsTab({ projectId }: AlertsTabProps) {
 										<Button
 											variant="ghost"
 											size="icon"
-											className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg opacity-80 group-hover:opacity-100 transition-all"
+											className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg opacity-100 sm:opacity-80 sm:group-hover:opacity-100 transition-all"
 											onClick={() => setDeletingAlertId(a.id)}
 										>
 											<Trash2 className="h-4 w-4" />
diff --git a/apps/web/src/components/project/create/BuildStrategySection.tsx b/apps/web/src/components/project/create/BuildStrategySection.tsx
index b108576..5073431 100644
--- a/apps/web/src/components/project/create/BuildStrategySection.tsx
+++ b/apps/web/src/components/project/create/BuildStrategySection.tsx
@@ -71,7 +71,6 @@ export function BuildStrategySection({
 				<p className="text-xs text-zinc-400 mt-1">Select how Dequel builds and manages your application containers.</p>
 			</div>
 
-			{/* Build Strategy Selection Cards (Railpack vs Docker Compose) */}
 			<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
 				<button
 					type="button"
@@ -118,16 +117,13 @@ export function BuildStrategySection({
 				</button>
 			</div>
 
-			{/* Railpack Configuration */}
 			{buildType === "railpack" && (
 				<div className="space-y-6 pt-4 border-t border-[#1a1a22]">
-					{/* Framework Preset Select (with SVG logos) */}
 					<div className="space-y-1.5">
 						<label className="block text-xs font-semibold text-zinc-300">Application Preset</label>
 						<FrameworkSelect selectedPresetId={selectedPresetId} onSelectPreset={onSelectPreset} />
 					</div>
 
-					{/* Project Type Card Selection (Web Service vs Static Site) */}
 					<div className="space-y-2">
 						<label className="block text-xs font-semibold text-zinc-300">Project Type</label>
 						<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
@@ -177,10 +173,9 @@ export function BuildStrategySection({
 						</div>
 					</div>
 
-					{/* Detailed Build Commands */}
 					<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
 						<div className="space-y-1.5">
-							<label className="block text-xs font-semibold text-zinc-300 flex items-center gap-1.5">
+							<label className="text-xs font-semibold text-zinc-300 flex items-center gap-1.5">
 								<Terminal className="h-3.5 w-3.5 text-orange-400" />
 								Build Command
 							</label>
@@ -193,7 +188,7 @@ export function BuildStrategySection({
 						</div>
 
 						<div className="space-y-1.5">
-							<label className="block text-xs font-semibold text-zinc-300 flex items-center gap-1.5">
+							<label className="text-xs font-semibold text-zinc-300 flex items-center gap-1.5">
 								<FolderCode className="h-3.5 w-3.5 text-emerald-400" />
 								Output Directory
 							</label>
@@ -206,7 +201,7 @@ export function BuildStrategySection({
 						</div>
 
 						<div className="space-y-1.5">
-							<label className="block text-xs font-semibold text-zinc-300 flex items-center gap-1.5">
+							<label className="text-xs font-semibold text-zinc-300 flex items-center gap-1.5">
 								<Sliders className="h-3.5 w-3.5 text-blue-400" />
 								Install Command
 							</label>
@@ -220,7 +215,7 @@ export function BuildStrategySection({
 
 						{projectType === "web" && (
 							<div className="space-y-1.5">
-								<label className="block text-xs font-semibold text-zinc-300 flex items-center gap-1.5">
+								<label className="text-xs font-semibold text-zinc-300 flex items-center gap-1.5">
 									<Play className="h-3.5 w-3.5 text-purple-400" />
 									Start Command
 								</label>
@@ -256,10 +251,9 @@ export function BuildStrategySection({
 				</div>
 			)}
 
-			{/* Docker Compose Service Gateway Mapping */}
 			{buildType === "compose" && (
 				<div className="space-y-4 pt-4 border-t border-[#1a1a22]">
-					<div className="flex items-center justify-between">
+					<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
 						<div>
 							<h4 className="text-xs font-bold text-zinc-200">Compose Ingress Service Mapping</h4>
 							<p className="text-[11px] text-zinc-400 mt-0.5">
@@ -269,7 +263,7 @@ export function BuildStrategySection({
 						<Button
 							type="button"
 							onClick={addComposeServiceRow}
-							className="bg-[#1c1c24] hover:bg-[#262632] text-orange-400 text-xs border border-[#2e2e3c]"
+							className="bg-[#1c1c24] hover:bg-[#262632] text-orange-400 text-xs border border-[#2e2e3c] w-full sm:w-auto"
 						>
 							<Plus className="h-3.5 w-3.5 mr-1" /> Add Service
 						</Button>
diff --git a/apps/web/src/components/project/create/CreateProjectDialog.tsx b/apps/web/src/components/project/create/CreateProjectDialog.tsx
index f93e5a3..dc5c8a7 100644
--- a/apps/web/src/components/project/create/CreateProjectDialog.tsx
+++ b/apps/web/src/components/project/create/CreateProjectDialog.tsx
@@ -342,18 +342,18 @@ export function CreateProjectDialog({ open, onOpenChange }: CreateProjectDialogP
 							/>
 						)}
 
-						<DialogFooter className="pt-4 border-t border-[#1a1a1f] flex justify-between items-center sm:space-x-0 select-none">
-							<div className="text-zinc-500 text-[10px]">
+						<DialogFooter className="pt-4 border-t border-[#1a1a1f] flex flex-col-reverse sm:flex-row justify-between items-stretch sm:items-center gap-3 sm:space-x-0 select-none">
+							<div className="text-zinc-500 text-[10px] text-center sm:text-left">
 								{step === 1 && "Step 1 of 3: General & Git settings"}
 								{step === 2 && "Step 2 of 3: Staging env variables"}
 								{step === 3 && "Step 3 of 3: Port, resource limits & Databases"}
 							</div>
-							<div className="flex gap-2">
+							<div className="flex gap-2 justify-end">
 								{step > 1 && (
 									<Button
 										type="button"
 										variant="outline"
-										className="border-[#222227] text-zinc-400 hover:bg-[#1a1a1f] h-9"
+										className="border-[#222227] text-zinc-400 hover:bg-[#1a1a1f] h-9 flex-1 sm:flex-none"
 										onClick={() => setStep(step - 1)}
 									>
 										Back
@@ -363,7 +363,7 @@ export function CreateProjectDialog({ open, onOpenChange }: CreateProjectDialogP
 									<Button
 										type="button"
 										variant="outline"
-										className="border-[#222227] text-zinc-400 hover:bg-[#1a1a1f] h-9"
+										className="border-[#222227] text-zinc-400 hover:bg-[#1a1a1f] h-9 flex-1 sm:flex-none"
 										onClick={() => handleOpenChange(false)}
 									>
 										Cancel
@@ -374,7 +374,7 @@ export function CreateProjectDialog({ open, onOpenChange }: CreateProjectDialogP
 									<Button
 										type="button"
 										onClick={() => setStep(step + 1)}
-										className="bg-amber-500 hover:bg-amber-600 text-white font-medium h-9"
+										className="bg-amber-500 hover:bg-amber-600 text-white font-medium h-9 flex-1 sm:flex-none"
 										disabled={step === 1 && !name.trim()}
 									>
 										Continue
@@ -382,7 +382,7 @@ export function CreateProjectDialog({ open, onOpenChange }: CreateProjectDialogP
 								) : (
 									<Button
 										type="submit"
-										className="bg-gradient-to-r from-amber-500 to-rose-500 hover:from-amber-600 hover:to-rose-600 text-white font-medium h-9 px-6 shadow-lg shadow-amber-500/10 border-0"
+										className="bg-gradient-to-r from-amber-500 to-rose-500 hover:from-amber-600 hover:to-rose-600 text-white font-medium h-9 px-6 shadow-lg shadow-amber-500/10 border-0 flex-1 sm:flex-none"
 										disabled={!name.trim() || createProject.isPending}
 									>
 										Configure & Create
diff --git a/apps/web/src/components/project/deployments/DeploymentsTab.tsx b/apps/web/src/components/project/deployments/DeploymentsTab.tsx
index 26008a8..b1f0fb7 100644
--- a/apps/web/src/components/project/deployments/DeploymentsTab.tsx
+++ b/apps/web/src/components/project/deployments/DeploymentsTab.tsx
@@ -15,6 +15,7 @@ import { Button } from "../../ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "../../ui/card";
 import { Input } from "../../ui/input";
 import { ClearCacheToggle } from "./clear-cache-toggle";
+import { SwitchToGitCard } from "./SwitchToGitCard";
 import { DeploymentHistory } from "./deployment-history";
 import { ManualDeployDialog } from "./manual-deploy-dialog";
 
@@ -52,6 +53,7 @@ export function DeploymentsTab({ projectId }: DeploymentsTabProps) {
 	const [webhookLoading, setWebhookLoading] = useState(false);
 	const [webhookChecked, setWebhookChecked] = useState(false);
 	const [webhookError, setWebhookError] = useState<string | null>(null);
+	const [showManualDeployDialog, setShowManualDeployDialog] = useState(false);
 
 	useEffect(() => {
 		if (!project?.repoUrl) return;
@@ -127,7 +129,7 @@ export function DeploymentsTab({ projectId }: DeploymentsTabProps) {
 		if (project.repoBranch) form.set("branch", project.repoBranch);
 		setIsAutoDeploying(true);
 		createDeployment.mutateAsync(form).finally(() => setIsAutoDeploying(false));
-	}, [totalDeployments, project?.repoUrl, project?.repoBranch, projectId, createDeployment]);
+	}, [totalDeployments, project?.repoUrl, project?.repoBranch, projectId, createDeployment, isLoading]);
 
 	const canEditSource = totalDeployments === 0;
 	const canUpdateDeployment = sourceType === "upload" || sourceType === "compose";
@@ -171,8 +173,6 @@ export function DeploymentsTab({ projectId }: DeploymentsTabProps) {
 		setShowGitSwitch(false);
 	};
 
-	const [showManualDeployDialog, setShowManualDeployDialog] = useState(false);
-
 	const handleManualDeploy = async (form: FormData) => {
 		form.set("sourceType", "git");
 		if (projectId) form.set("projectId", projectId);
@@ -207,16 +207,16 @@ export function DeploymentsTab({ projectId }: DeploymentsTabProps) {
 					{sourceType === "git" ? (
 						<div className="space-y-4">
 							<div className="p-4 rounded-lg bg-[#141417]/50 border border-[#222227] space-y-3">
-								<div className="flex items-center justify-between">
-									<div className="space-y-1">
+								<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+									<div className="space-y-1 min-w-0">
 										<div className="text-xs text-muted-foreground font-medium uppercase tracking-wider">
 											Repository URL
 										</div>
-										<div className="text-sm font-mono text-zinc-200">
+										<div className="text-sm font-mono text-zinc-200 break-all">
 											{project?.repoUrl || "No repository configured"}
 										</div>
 									</div>
-									<div className="text-right space-y-1">
+									<div className="text-left sm:text-right space-y-1 shrink-0">
 										<div className="text-xs text-muted-foreground font-medium uppercase tracking-wider">Branch</div>
 										<div className="text-xs bg-[#1a1a20] border border-[#33333b] text-zinc-300 px-2 py-1 rounded font-mono inline-block">
 											{project?.repoBranch || "main"}
@@ -224,7 +224,7 @@ export function DeploymentsTab({ projectId }: DeploymentsTabProps) {
 									</div>
 								</div>
 								{webhookError && <p className="text-xs text-red-400">{webhookError}</p>}
-								<div className="pt-2 flex justify-end gap-2">
+								<div className="pt-2 flex flex-col sm:flex-row justify-end gap-2">
 									{webhookChecked && (
 										<Button
 											type="button"
@@ -234,18 +234,18 @@ export function DeploymentsTab({ projectId }: DeploymentsTabProps) {
 											disabled={webhookLoading}
 											className={
 												webhookActive
-													? "border-emerald-500/30 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20"
-													: "border-zinc-700 text-zinc-400 hover:border-zinc-600"
+													? "w-full sm:w-auto border-emerald-500/30 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20"
+													: "w-full sm:w-auto border-zinc-700 text-zinc-400 hover:border-zinc-600"
 											}
 										>
-											<Webhook className="h-3.5 w-3.5 mr-1.5" />
+											<Webhook className="h-3.5 w-3.5 mr-1.5 shrink-0" />
 											{webhookLoading ? "Loading..." : webhookActive ? "Auto-deploy on" : "Enable auto-deploy"}
 										</Button>
 									)}
 									<Button
 										type="button"
 										onClick={() => setShowManualDeployDialog(true)}
-										className="bg-amber-600 hover:bg-amber-700 text-white font-medium flex items-center gap-2 shadow-lg shadow-amber-500/10"
+										className="w-full sm:w-auto bg-amber-600 hover:bg-amber-700 text-white font-medium flex items-center justify-center gap-2 shadow-lg shadow-amber-500/10"
 									>
 										<Play className="h-4 w-4 fill-current" /> Manual Deploy...
 									</Button>
@@ -254,7 +254,7 @@ export function DeploymentsTab({ projectId }: DeploymentsTabProps) {
 						</div>
 					) : (
 						<form onSubmit={handleDeploy} className="space-y-3">
-							<div className="flex gap-2">
+							<div className="flex flex-wrap gap-2">
 								{(["git", "upload", "compose"] as const).map((type) => (
 									<Button
 										key={type}
@@ -274,20 +274,23 @@ export function DeploymentsTab({ projectId }: DeploymentsTabProps) {
 								className="file:mr-3 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-medium file:bg-primary file:text-primary-foreground"
 							/>
 							<ClearCacheToggle checked={clearCache} onChange={setClearCache} id="clearCacheUpload" />
-							<div className="flex gap-2">
+							<div className="flex flex-col sm:flex-row gap-2">
 								<Input
 									placeholder="Environment (e.g. production)"
 									value={environment}
 									onChange={(e) => setEnvironment(e.target.value)}
 									className="flex-1"
 								/>
-								<Button type="submit" disabled={createDeployment.isPending || !canUpdateDeployment || isAutoDeploying}>
+								<Button
+									type="submit"
+									disabled={createDeployment.isPending || !canUpdateDeployment || isAutoDeploying}
+									className="w-full sm:w-auto"
+								>
 									{createDeployment.isPending || isAutoDeploying ? (
 										"Deploying..."
 									) : (
 										<>
-											<Play className="mr-1.5 h-4 w-4" />
-											Update
+											<Play className="mr-1.5 h-4 w-4" /> Update
 										</>
 									)}
 								</Button>
@@ -303,41 +306,15 @@ export function DeploymentsTab({ projectId }: DeploymentsTabProps) {
 			</Card>
 
 			{showGitSwitch && (
-				<Card className="border-primary/30 bg-primary/5">
-					<CardHeader className="pb-2">
-						<CardTitle className="text-sm text-foreground">Switch deployment source to Git?</CardTitle>
-					</CardHeader>
-					<CardContent className="space-y-3">
-						<p className="text-xs text-foreground">
-							Enter the git repository URL to create a new deployment from source.
-						</p>
-						<Input
-							placeholder="https://github.com/user/repo.git"
-							value={switchGitUrl}
-							onChange={(e) => setSwitchGitUrl(e.target.value)}
-							className="text-sm"
-						/>
-						<Input
-							placeholder="Branch (optional)"
-							value={switchBranch}
-							onChange={(e) => setSwitchBranch(e.target.value)}
-							className="text-sm"
-						/>
-						<div className="flex justify-end gap-2">
-							<Button type="button" size="sm" variant="outline" onClick={() => setShowGitSwitch(false)}>
-								Cancel
-							</Button>
-							<Button
-								type="button"
-								size="sm"
-								onClick={handleSwitchToGit}
-								disabled={!switchGitUrl.trim() || createDeployment.isPending || isAutoDeploying}
-							>
-								{createDeployment.isPending ? "Switching..." : "Switch"}
-							</Button>
-						</div>
-					</CardContent>
-				</Card>
+				<SwitchToGitCard
+					switchGitUrl={switchGitUrl}
+					setSwitchGitUrl={setSwitchGitUrl}
+					switchBranch={switchBranch}
+					setSwitchBranch={setSwitchBranch}
+					onCancel={() => setShowGitSwitch(false)}
+					onSwitch={handleSwitchToGit}
+					isPending={createDeployment.isPending || isAutoDeploying}
+				/>
 			)}
 
 			{totalDeployments > 0 && (
diff --git a/apps/web/src/components/project/deployments/SwitchToGitCard.tsx b/apps/web/src/components/project/deployments/SwitchToGitCard.tsx
new file mode 100644
index 0000000..12ba840
--- /dev/null
+++ b/apps/web/src/components/project/deployments/SwitchToGitCard.tsx
@@ -0,0 +1,68 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../../ui/card";
+import { Input } from "../../ui/input";
+import { Button } from "../../ui/button";
+
+interface SwitchToGitCardProps {
+	switchGitUrl: string;
+	setSwitchGitUrl: (v: string) => void;
+	switchBranch: string;
+	setSwitchBranch: (v: string) => void;
+	onCancel: () => void;
+	onSwitch: () => void;
+	isPending: boolean;
+}
+
+export function SwitchToGitCard({
+	switchGitUrl,
+	setSwitchGitUrl,
+	switchBranch,
+	setSwitchBranch,
+	onCancel,
+	onSwitch,
+	isPending,
+}: SwitchToGitCardProps) {
+	return (
+		<Card className="border-primary/30 bg-primary/5">
+			<CardHeader className="pb-2">
+				<CardTitle className="text-sm text-foreground">
+					Switch deployment source to Git?
+				</CardTitle>
+			</CardHeader>
+			<CardContent className="space-y-3">
+				<p className="text-xs text-foreground">
+					Enter the git repository URL to create a new deployment from source.
+				</p>
+				<Input
+					placeholder="https://github.com/user/repo.git"
+					value={switchGitUrl}
+					onChange={(e) => setSwitchGitUrl(e.target.value)}
+					className="text-sm"
+				/>
+				<Input
+					placeholder="Branch (optional)"
+					value={switchBranch}
+					onChange={(e) => setSwitchBranch(e.target.value)}
+					className="text-sm"
+				/>
+				<div className="flex justify-end gap-2">
+					<Button
+						type="button"
+						size="sm"
+						variant="outline"
+						onClick={onCancel}
+					>
+						Cancel
+					</Button>
+					<Button
+						type="button"
+						size="sm"
+						onClick={onSwitch}
+						disabled={!switchGitUrl.trim() || isPending}
+					>
+						{isPending ? "Switching..." : "Switch"}
+					</Button>
+				</div>
+			</CardContent>
+		</Card>
+	);
+}
diff --git a/apps/web/src/components/project/deployments/deployment-history.tsx b/apps/web/src/components/project/deployments/deployment-history.tsx
index e676617..4c5e548 100644
--- a/apps/web/src/components/project/deployments/deployment-history.tsx
+++ b/apps/web/src/components/project/deployments/deployment-history.tsx
@@ -44,143 +44,235 @@ export function DeploymentHistory({
 
 	return (
 		<>
-			<div className="rounded-xl border border-border bg-card overflow-hidden overflow-x-auto">
-				<Table className="min-w-[650px] md:min-w-full">
-					<TableHeader>
-						<TableRow>
-							<TableHead>Status</TableHead>
-							<TableHead>Deployment</TableHead>
-							<TableHead>Source</TableHead>
-							<TableHead>Branch</TableHead>
-							<TableHead>Duration</TableHead>
-							<TableHead>Age</TableHead>
-							<TableHead className="w-24"></TableHead>
-						</TableRow>
-					</TableHeader>
-					<TableBody>
-						{deployments.map((dep) => (
-							<TableRow
-								key={dep.id}
-								className={cn("cursor-pointer transition-all", selectedId === dep.id && "bg-primary/5")}
-								onClick={() => onSelect(selectedId === dep.id ? null : dep.id)}
-							>
-								<TableCell>
-									<div className="flex items-center gap-2">
-										<StatusBadge status={dep.status} />
-										{dep.status === "running" && (
-											<span className="inline-flex items-center rounded-full bg-emerald-500/10 px-1.5 py-0.5 text-[9px] font-bold text-emerald-400 uppercase tracking-tight border border-emerald-500/20 animate-pulse select-none">
-												Active
-											</span>
-										)}
-									</div>
-								</TableCell>
-								<TableCell className="font-mono text-xs text-muted-foreground">
+			<div className="rounded-xl border border-border bg-card overflow-hidden">
+				<div className="md:hidden divide-y divide-border">
+					{deployments.map((dep) => (
+						<div
+							key={dep.id}
+							onClick={() => onSelect(selectedId === dep.id ? null : dep.id)}
+							className={cn(
+								"p-3.5 space-y-2.5 cursor-pointer transition-all active:bg-primary/10",
+								selectedId === dep.id && "bg-primary/5 border-l-2 border-l-amber-500",
+							)}
+						>
+							<div className="flex items-center justify-between gap-2">
+								<div className="flex items-center gap-2">
+									<StatusBadge status={dep.status} />
+									{dep.status === "running" && (
+										<span className="inline-flex items-center rounded-full bg-emerald-500/10 px-1.5 py-0.5 text-[9px] font-bold text-emerald-400 uppercase tracking-tight border border-emerald-500/20 animate-pulse select-none">
+											Active
+										</span>
+									)}
+								</div>
+								<div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
+									{dep.status === "running" && dep.imageTag && dep.sourceType !== "image" && (
+										<Button
+											variant="ghost"
+											size="icon"
+											className="h-8 w-8 text-muted-foreground"
+											onClick={() => onRedeploy(dep.id)}
+											title="Redeploy"
+										>
+											<RefreshCw className="h-3.5 w-3.5" />
+										</Button>
+									)}
+									{(dep.status === "pending" || dep.status === "building") && (
+										<Button
+											variant="ghost"
+											size="icon"
+											className="h-8 w-8 text-red-500 hover:text-red-400"
+											onClick={() => setCancelConfirmId(dep.id)}
+											title="Cancel deployment"
+										>
+											<svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
+										</Button>
+									)}
+									{dep.imageTag && dep.status !== "running" && dep.status !== "pending" && dep.status !== "building" && dep.status !== "deploying" && (
+										<Button
+											variant="ghost"
+											size="icon"
+											className="h-8 w-8 text-muted-foreground"
+											onClick={() => onRollback(dep.id)}
+											title="Rollback"
+										>
+											<History className="h-3.5 w-3.5" />
+										</Button>
+									)}
+									{dep.status !== "running" && (
+										<Button
+											variant="ghost"
+											size="icon"
+											className="h-8 w-8 text-muted-foreground hover:text-red-500"
+											onClick={() => setDeleteConfirmId(dep.id)}
+											title="Delete deployment"
+										>
+											<svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+										</Button>
+									)}
+								</div>
+							</div>
+
+							<div className="flex items-center justify-between text-xs">
+								<span className="font-mono text-zinc-300 truncate max-w-[180px]">
 									{depDisplayName(projectName, dep.id)}
-								</TableCell>
-								<TableCell className="text-xs text-muted-foreground">{dep.sourceType}</TableCell>
-								<TableCell>
+								</span>
+								<span className="text-[11px] text-zinc-500 font-mono">
+									{formatTimeAgo(dep.createdAt)}
+								</span>
+							</div>
+
+							<div className="flex items-center justify-between text-xs text-muted-foreground pt-1 border-t border-border/40">
+								<div className="flex items-center gap-2">
 									{dep.branch ? (
-										<Badge variant="outline" className="text-xs">
-											{dep.branch}
-										</Badge>
-									) : (
-										<span className="text-muted-foreground">—</span>
-									)}
-								</TableCell>
-								<TableCell>
-									<DeploymentDuration deployment={dep} />
-								</TableCell>
-								<TableCell className="text-xs text-muted-foreground">{formatTimeAgo(dep.createdAt)}</TableCell>
-								<TableCell className="text-right">
-									<div className="flex items-center justify-end gap-1">
-										{dep.status === "running" && dep.imageTag && dep.sourceType !== "image" && (
-											<Button
-												variant="ghost"
-												size="icon"
-												className="h-7 w-7 text-muted-foreground"
-												onClick={(e) => {
-													e.stopPropagation();
-													onRedeploy(dep.id);
-												}}
-												title="Redeploy (rebuild from source)"
-											>
-												<RefreshCw className="h-3.5 w-3.5" />
-											</Button>
-										)}
-										{(dep.status === "pending" || dep.status === "building") && (
-											<Button
-												variant="ghost"
-												size="icon"
-												className="h-7 w-7 text-red-500 hover:text-red-400"
-												onClick={(e) => {
-													e.stopPropagation();
-													setCancelConfirmId(dep.id);
-												}}
-												title="Cancel deployment"
-											>
-												<svg
-													className="h-3.5 w-3.5"
-													viewBox="0 0 24 24"
-													fill="none"
-													stroke="currentColor"
-													strokeWidth="2"
-													strokeLinecap="round"
-													strokeLinejoin="round"
-												>
-													<circle cx="12" cy="12" r="10" />
-													<line x1="8" y1="12" x2="16" y2="12" />
-												</svg>
-											</Button>
+										<Badge variant="outline" className="text-[10px] px-1.5 py-0">{dep.branch}</Badge>
+									) : null}
+									<span className="text-[11px] capitalize">{dep.sourceType}</span>
+								</div>
+								<DeploymentDuration deployment={dep} />
+							</div>
+						</div>
+					))}
+				</div>
+
+				<div className="hidden md:block overflow-x-auto">
+					<Table className="w-full">
+						<TableHeader>
+							<TableRow>
+								<TableHead>Status</TableHead>
+								<TableHead>Deployment</TableHead>
+								<TableHead>Source</TableHead>
+								<TableHead>Branch</TableHead>
+								<TableHead>Duration</TableHead>
+								<TableHead>Age</TableHead>
+								<TableHead className="w-24"></TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{deployments.map((dep) => (
+								<TableRow
+									key={dep.id}
+									className={cn("cursor-pointer transition-all", selectedId === dep.id && "bg-primary/5")}
+									onClick={() => onSelect(selectedId === dep.id ? null : dep.id)}
+								>
+									<TableCell>
+										<div className="flex items-center gap-2">
+											<StatusBadge status={dep.status} />
+											{dep.status === "running" && (
+												<span className="inline-flex items-center rounded-full bg-emerald-500/10 px-1.5 py-0.5 text-[9px] font-bold text-emerald-400 uppercase tracking-tight border border-emerald-500/20 animate-pulse select-none">
+													Active
+												</span>
+											)}
+										</div>
+									</TableCell>
+									<TableCell className="font-mono text-xs text-muted-foreground">
+										{depDisplayName(projectName, dep.id)}
+									</TableCell>
+									<TableCell className="text-xs text-muted-foreground">{dep.sourceType}</TableCell>
+									<TableCell>
+										{dep.branch ? (
+											<Badge variant="outline" className="text-xs">
+												{dep.branch}
+											</Badge>
+										) : (
+											<span className="text-muted-foreground">—</span>
 										)}
-										{dep.imageTag &&
-											dep.status !== "running" &&
-											dep.status !== "pending" &&
-											dep.status !== "building" &&
-											dep.status !== "deploying" && (
+									</TableCell>
+									<TableCell>
+										<DeploymentDuration deployment={dep} />
+									</TableCell>
+									<TableCell className="text-xs text-muted-foreground">{formatTimeAgo(dep.createdAt)}</TableCell>
+									<TableCell className="text-right">
+										<div className="flex items-center justify-end gap-1">
+											{dep.status === "running" && dep.imageTag && dep.sourceType !== "image" && (
 												<Button
 													variant="ghost"
 													size="icon"
 													className="h-7 w-7 text-muted-foreground"
 													onClick={(e) => {
 														e.stopPropagation();
-														onRollback(dep.id);
+														onRedeploy(dep.id);
 													}}
-													title="Rollback to this version"
+													title="Redeploy (rebuild from source)"
 												>
-													<History className="h-3.5 w-3.5" />
+													<RefreshCw className="h-3.5 w-3.5" />
 												</Button>
 											)}
-										{dep.status !== "running" && (
-											<Button
-												variant="ghost"
-												size="icon"
-												className="h-7 w-7 text-muted-foreground hover:text-red-500"
-												onClick={(e) => {
-													e.stopPropagation();
-													setDeleteConfirmId(dep.id);
-												}}
-												title="Delete deployment"
-											>
-												<svg
-													className="h-3.5 w-3.5"
-													viewBox="0 0 24 24"
-													fill="none"
-													stroke="currentColor"
-													strokeWidth="2"
-													strokeLinecap="round"
-													strokeLinejoin="round"
+											{(dep.status === "pending" || dep.status === "building") && (
+												<Button
+													variant="ghost"
+													size="icon"
+													className="h-7 w-7 text-red-500 hover:text-red-400"
+													onClick={(e) => {
+														e.stopPropagation();
+														setCancelConfirmId(dep.id);
+													}}
+													title="Cancel deployment"
 												>
-													<polyline points="3 6 5 6 21 6" />
-													<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-												</svg>
-											</Button>
-										)}
-									</div>
-								</TableCell>
-							</TableRow>
-						))}
-					</TableBody>
-				</Table>
+													<svg
+														className="h-3.5 w-3.5"
+														viewBox="0 0 24 24"
+														fill="none"
+														stroke="currentColor"
+														strokeWidth="2"
+														strokeLinecap="round"
+														strokeLinejoin="round"
+													>
+														<circle cx="12" cy="12" r="10" />
+														<line x1="8" y1="12" x2="16" y2="12" />
+													</svg>
+												</Button>
+											)}
+											{dep.imageTag &&
+												dep.status !== "running" &&
+												dep.status !== "pending" &&
+												dep.status !== "building" &&
+												dep.status !== "deploying" && (
+													<Button
+														variant="ghost"
+														size="icon"
+														className="h-7 w-7 text-muted-foreground"
+														onClick={(e) => {
+															e.stopPropagation();
+															onRollback(dep.id);
+														}}
+														title="Rollback to this version"
+													>
+														<History className="h-3.5 w-3.5" />
+													</Button>
+												)}
+											{dep.status !== "running" && (
+												<Button
+													variant="ghost"
+													size="icon"
+													className="h-7 w-7 text-muted-foreground hover:text-red-500"
+													onClick={(e) => {
+														e.stopPropagation();
+														setDeleteConfirmId(dep.id);
+													}}
+													title="Delete deployment"
+												>
+													<svg
+														className="h-3.5 w-3.5"
+														viewBox="0 0 24 24"
+														fill="none"
+														stroke="currentColor"
+														strokeWidth="2"
+														strokeLinecap="round"
+														strokeLinejoin="round"
+													>
+														<polyline points="3 6 5 6 21 6" />
+														<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+													</svg>
+												</Button>
+											)}
+										</div>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				</div>
+
 				{totalPages > 1 && (
 					<div className="flex items-center justify-between px-4 py-3 border-t border-border">
 						<span className="text-xs text-muted-foreground">{totalDeployments} total deployments</span>
diff --git a/apps/web/src/components/project/deployments/deployment-logs.tsx b/apps/web/src/components/project/deployments/deployment-logs.tsx
index 522f73e..0995616 100644
--- a/apps/web/src/components/project/deployments/deployment-logs.tsx
+++ b/apps/web/src/components/project/deployments/deployment-logs.tsx
@@ -84,18 +84,37 @@ export function DeploymentLogs({ deployment }: { deployment: any }) {
 		});
 	}, [logs]);
 
+	const [copied, setCopied] = useState(false);
+	const copyAllLogs = () => {
+		const fullText = logs.map(l => `[${l.stage}]-[${fmtLogTs((l as any).timestamp || l.createdAt)}] ${l.message}`).join("\n");
+		navigator.clipboard.writeText(fullText);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 1500);
+	};
+
 	return (
 		<Card>
 			<CardHeader className="pb-3">
-				<CardTitle className="text-sm flex items-center justify-between w-full">
-					<span className="flex items-center gap-2">
-						<Terminal className="h-4 w-4" />
-						Build Logs — {deployment.id.slice(0, 8)}
-					</span>
-					<span className="text-xs font-normal text-muted-foreground flex items-center gap-2 select-none">
-						<span>Duration:</span>
-						<DeploymentDuration deployment={deployment} />
+				<CardTitle className="text-sm flex flex-col sm:flex-row sm:items-center justify-between gap-2.5 w-full">
+					<span className="flex items-center gap-2 truncate">
+						<Terminal className="h-4 w-4 shrink-0 text-amber-500" />
+						<span className="truncate">Build Logs — {deployment.id.slice(0, 8)}</span>
 					</span>
+					<div className="flex items-center gap-3 text-xs font-normal text-muted-foreground select-none shrink-0 justify-between sm:justify-end">
+						<span className="flex items-center gap-1.5">
+							<span>Duration:</span>
+							<DeploymentDuration deployment={deployment} />
+						</span>
+						{logs.length > 0 && (
+							<button
+								type="button"
+								onClick={copyAllLogs}
+								className="text-[11px] px-2 py-0.5 rounded bg-secondary/50 hover:bg-secondary text-zinc-300 hover:text-white transition-colors flex items-center gap-1"
+							>
+								{copied ? "Copied" : "Copy"}
+							</button>
+						)}
+					</div>
 				</CardTitle>
 			</CardHeader>
 			<CardContent>
@@ -110,9 +129,7 @@ export function DeploymentLogs({ deployment }: { deployment: any }) {
 						{logs.map((log, i) => (
 							<div key={i} className={`log-line ${isErrorLogLine(log.message) ? "error" : ""}`}>
 								<span className="log-stage">
-									[{log.stage}
-									]-[
-									{fmtLogTs((log as any).timestamp || log.createdAt)}]
+									[{log.stage}]-[{fmtLogTs((log as any).timestamp || log.createdAt)}]
 								</span>
 								<span className="log-msg">{log.message}</span>
 							</div>
diff --git a/apps/web/src/components/project/domains/AddDomainDialog.tsx b/apps/web/src/components/project/domains/AddDomainDialog.tsx
new file mode 100644
index 0000000..ca719a2
--- /dev/null
+++ b/apps/web/src/components/project/domains/AddDomainDialog.tsx
@@ -0,0 +1,108 @@
+import React from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "../../ui/dialog";
+import { Input } from "../../ui/input";
+import { Button } from "../../ui/button";
+
+interface AddDomainDialogProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	domain: string;
+	setDomain: (v: string) => void;
+	targetService: string;
+	setTargetService: (v: string) => void;
+	targetPort: string;
+	setTargetPort: (v: string) => void;
+	isCompose: boolean;
+	isAdding: boolean;
+	onAdd: (e: React.FormEvent) => Promise<void>;
+}
+
+export function AddDomainDialog({
+	open,
+	onOpenChange,
+	domain,
+	setDomain,
+	targetService,
+	setTargetService,
+	targetPort,
+	setTargetPort,
+	isCompose,
+	isAdding,
+	onAdd,
+}: AddDomainDialogProps) {
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="sm:max-w-[420px] bg-card border-border text-foreground rounded-2xl shadow-2xl">
+				<DialogHeader>
+					<DialogTitle className="text-lg font-bold text-foreground">
+						Add Custom Domain
+					</DialogTitle>
+					<DialogDescription className="text-xs text-muted-foreground">
+						Attach domain endpoints to route external web requests to your container proxy.
+					</DialogDescription>
+				</DialogHeader>
+				<form onSubmit={onAdd} className="space-y-4 pt-2">
+					<div className="grid gap-2">
+						<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+							Domain Address
+						</label>
+						<Input
+							placeholder="e.g. app.mycompany.com"
+							value={domain}
+							onChange={(e) => setDomain(e.target.value)}
+							className="h-10 bg-[#0d0d11] border-input focus:ring-2 focus:ring-primary text-sm font-semibold rounded-lg font-mono"
+							required
+						/>
+					</div>
+
+					{isCompose && (
+						<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
+							<div className="grid gap-1.5">
+								<label className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
+									Service Name
+								</label>
+								<Input
+									placeholder="e.g. api or web"
+									value={targetService}
+									onChange={(e) => setTargetService(e.target.value)}
+									className="h-9 bg-[#0d0d11] border-input text-xs font-mono rounded-lg"
+								/>
+							</div>
+							<div className="grid gap-1.5">
+								<label className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
+									Service Port
+								</label>
+								<Input
+									placeholder="e.g. 8080"
+									type="number"
+									value={targetPort}
+									onChange={(e) => setTargetPort(e.target.value)}
+									className="h-9 bg-[#0d0d11] border-input text-xs font-mono rounded-lg"
+								/>
+							</div>
+						</div>
+					)}
+
+					<div className="flex justify-end gap-2 pt-2 border-t border-border/40">
+						<Button
+							type="button"
+							variant="ghost"
+							onClick={() => onOpenChange(false)}
+							className="h-10 text-xs px-4 rounded-xl hover:bg-[#1a1a21]"
+							disabled={isAdding}
+						>
+							Cancel
+						</Button>
+						<Button
+							type="submit"
+							disabled={isAdding}
+							className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold h-10 text-xs px-5 rounded-xl shadow-lg hover:shadow-primary/20 transition-all"
+						>
+							{isAdding ? "Adding..." : "Add Domain"}
+						</Button>
+					</div>
+				</form>
+			</DialogContent>
+		</Dialog>
+	);
+}
diff --git a/apps/web/src/components/project/domains/DeleteDomainDialog.tsx b/apps/web/src/components/project/domains/DeleteDomainDialog.tsx
new file mode 100644
index 0000000..1ae53dc
--- /dev/null
+++ b/apps/web/src/components/project/domains/DeleteDomainDialog.tsx
@@ -0,0 +1,50 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "../../ui/dialog";
+import { Button } from "../../ui/button";
+
+interface DeleteDomainDialogProps {
+	domain: string | undefined;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	onConfirm: () => Promise<void>;
+}
+
+export function DeleteDomainDialog({
+	domain,
+	open,
+	onOpenChange,
+	onConfirm,
+}: DeleteDomainDialogProps) {
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="sm:max-w-[400px] bg-card border-border text-foreground rounded-2xl shadow-2xl">
+				<DialogHeader>
+					<DialogTitle className="text-lg font-bold text-foreground">
+						Remove Domain
+					</DialogTitle>
+					<DialogDescription className="text-xs text-muted-foreground mt-2">
+						Are you sure you want to remove domain{" "}
+						<span className="font-semibold text-foreground font-mono">
+							{domain}
+						</span>
+						? This will stop routing incoming traffic from this path to your running container service.
+					</DialogDescription>
+				</DialogHeader>
+				<DialogFooter className="flex justify-end gap-2 pt-4 border-t border-border/40">
+					<Button
+						variant="ghost"
+						onClick={() => onOpenChange(false)}
+						className="h-9 text-xs px-4 rounded-lg hover:bg-[#1a1a21]"
+					>
+						Cancel
+					</Button>
+					<Button
+						onClick={onConfirm}
+						className="bg-destructive hover:bg-destructive/90 text-destructive-foreground font-semibold text-xs h-9 px-4 rounded-lg transition-all"
+					>
+						Remove Domain
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
diff --git a/apps/web/src/components/project/domains/DnsInstructionsCard.tsx b/apps/web/src/components/project/domains/DnsInstructionsCard.tsx
new file mode 100644
index 0000000..0368a9d
--- /dev/null
+++ b/apps/web/src/components/project/domains/DnsInstructionsCard.tsx
@@ -0,0 +1,161 @@
+import { Card, CardContent } from "../../ui/card";
+import { Button } from "../../ui/button";
+import { X, Globe, Copy, Check } from "lucide-react";
+
+interface DnsInstructionsCardProps {
+	lastAdded: string;
+	onDismiss: () => void;
+	hasBaseDomain: boolean;
+	dnsName: string;
+	baseDomain: string;
+	serverIp: { ip: string } | undefined;
+	copiedTarget: boolean;
+	onCopy: (text: string) => void;
+}
+
+export function DnsInstructionsCard({
+	lastAdded,
+	onDismiss,
+	hasBaseDomain,
+	dnsName,
+	baseDomain,
+	serverIp,
+	copiedTarget,
+	onCopy,
+}: DnsInstructionsCardProps) {
+	return (
+		<Card className="border-primary/30 bg-primary/5 shadow-md shadow-primary/5">
+			<CardContent className="p-4 sm:p-5 relative">
+				<Button
+					variant="ghost"
+					size="icon"
+					className="absolute top-2 right-2 h-6 w-6 text-muted-foreground hover:text-foreground"
+					onClick={onDismiss}
+				>
+					<X className="h-4 w-4" />
+				</Button>
+				<div className="flex items-start gap-3.5">
+					<Globe className="h-5 w-5 text-primary mt-0.5 shrink-0" />
+					<div className="space-y-2.5 text-sm w-full min-w-0">
+						<p className="font-semibold text-foreground break-all">
+							DNS Configuration Required for{" "}
+							<code className="text-primary font-mono">
+								{lastAdded}
+							</code>
+						</p>
+						{hasBaseDomain ? (
+							<>
+								<p className="text-xs text-muted-foreground">
+									Add a CNAME record at your DNS domain registrar:
+								</p>
+								<div className="rounded-lg border border-border bg-[#070709] overflow-x-auto text-[10px] font-mono w-full">
+									<table className="w-full min-w-[300px]">
+										<thead>
+											<tr className="bg-[#0b0b0f] text-left">
+												<th className="px-3 py-1.5 text-muted-foreground font-semibold">
+													Type
+												</th>
+												<th className="px-3 py-1.5 text-muted-foreground font-semibold">
+													Host/Name
+												</th>
+												<th className="px-3 py-1.5 text-muted-foreground font-semibold">
+													Target/Value
+												</th>
+											</tr>
+										</thead>
+										<tbody>
+											<tr className="border-t border-border/40">
+												<td className="px-3 py-2 text-foreground font-bold">
+													CNAME
+												</td>
+												<td className="px-3 py-2 text-foreground">
+													{dnsName}
+												</td>
+												<td className="px-3 py-2 text-foreground flex items-center justify-between gap-2">
+													<span className="truncate max-w-[140px] sm:max-w-[200px]">
+														{baseDomain}
+													</span>
+													<button
+														type="button"
+														onClick={() => onCopy(baseDomain)}
+														className={`p-1 transition-colors ${copiedTarget ? "text-emerald-400" : "text-muted-foreground hover:text-foreground"}`}
+													>
+														{copiedTarget ? (
+															<Check className="h-3 w-3" />
+														) : (
+															<Copy className="h-3 w-3" />
+														)}
+													</button>
+												</td>
+											</tr>
+										</tbody>
+									</table>
+								</div>
+								<p className="text-xs text-muted-foreground">
+									Or point an A record directly to target IP:{" "}
+									<code className="text-primary font-mono font-bold bg-[#0d0d11] px-1.5 py-0.5 rounded border border-border/50">
+										{serverIp?.ip ?? "../.."}
+									</code>
+								</p>
+							</>
+						) : (
+							<>
+								<p className="text-xs text-muted-foreground">
+									Add an A record at your DNS domain registrar:
+								</p>
+								<div className="rounded-lg border border-border bg-[#070709] overflow-x-auto text-[10px] font-mono w-full">
+									<table className="w-full min-w-[300px]">
+										<thead>
+											<tr className="bg-[#0b0b0f] text-left">
+												<th className="px-3 py-1.5 text-muted-foreground font-semibold">
+													Type
+												</th>
+												<th className="px-3 py-1.5 text-muted-foreground font-semibold">
+													Host/Name
+												</th>
+												<th className="px-3 py-1.5 text-muted-foreground font-semibold">
+													Value
+												</th>
+											</tr>
+										</thead>
+										<tbody>
+											<tr className="border-t border-border/40">
+												<td className="px-3 py-2 text-foreground font-bold">
+													A
+												</td>
+												<td className="px-3 py-2 text-foreground">
+													{dnsName}
+												</td>
+												<td className="px-3 py-2 text-foreground flex items-center justify-between gap-2">
+													<span>
+														{serverIp?.ip ?? "../.."}
+													</span>
+													{serverIp?.ip && (
+														<button
+															type="button"
+															onClick={() => onCopy(serverIp.ip)}
+															className={`p-1 transition-colors ${copiedTarget ? "text-emerald-400" : "text-muted-foreground hover:text-foreground"}`}
+														>
+															{copiedTarget ? (
+																<Check className="h-3 w-3" />
+															) : (
+																<Copy className="h-3 w-3" />
+															)}
+														</button>
+													)}
+												</td>
+											</tr>
+										</tbody>
+									</table>
+								</div>
+							</>
+						)}
+						<p className="text-[10px] text-muted-foreground/80 leading-relaxed">
+							DNS changes can take up to 48 hours to propagate globally. Dequel will validate SSL cert status automatically.
+						</p>
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+	);
+}
diff --git a/apps/web/src/components/project/domains/DomainsTab.tsx b/apps/web/src/components/project/domains/DomainsTab.tsx
index f888d22..15de201 100644
--- a/apps/web/src/components/project/domains/DomainsTab.tsx
+++ b/apps/web/src/components/project/domains/DomainsTab.tsx
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { Check, Copy, Globe, Plus, Trash2, X } from "lucide-react";
+import { Globe, Plus, Trash2 } from "lucide-react";
 import type React from "react";
 import { useState } from "react";
 import * as api from "../../../api/client";
@@ -7,10 +7,10 @@ import { useProject } from "../../../hooks/useProjects";
 import { StatusBadge } from "../../StatusBadge";
 import { Badge } from "../../ui/badge";
 import { Button } from "../../ui/button";
-import { Card, CardContent } from "../../ui/card";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../../ui/dialog";
-import { Input } from "../../ui/input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../ui/table";
+import { AddDomainDialog } from "./AddDomainDialog";
+import { DeleteDomainDialog } from "./DeleteDomainDialog";
+import { DnsInstructionsCard } from "./DnsInstructionsCard";
 
 interface DomainsTabProps {
 	projectId: string;
@@ -88,7 +88,7 @@ export function DomainsTab({ projectId }: DomainsTabProps) {
 	return (
 		<div className="space-y-6">
 			{domains.length === 0 ? (
-				<div className="flex flex-col items-center justify-center border border-dashed border-border rounded-2xl p-12 text-center bg-card/20 backdrop-blur-sm relative overflow-hidden group min-h-[350px]">
+				<div className="flex flex-col items-center justify-center border border-dashed border-border rounded-2xl p-6 sm:p-12 text-center bg-card/20 backdrop-blur-sm relative overflow-hidden group min-h-[350px]">
 					<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent opacity-50 pointer-events-none" />
 					<div className="relative w-16 h-16 rounded-2xl bg-gradient-to-b from-[#1a1a1f] to-[#121215] border border-border flex items-center justify-center mb-6 shadow-xl group-hover:border-primary/30 transition-colors duration-300">
 						<div className="absolute inset-0 bg-primary/10 rounded-2xl blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
@@ -108,304 +108,185 @@ export function DomainsTab({ projectId }: DomainsTabProps) {
 				</div>
 			) : (
 				<div className="space-y-4">
-					<div className="flex items-center justify-between">
+					<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
 						<div>
 							<h2 className="text-lg font-semibold text-foreground">Domains</h2>
 							<p className="text-sm text-muted-foreground">Domains and subdomains linked to project endpoints.</p>
 						</div>
 						<Button
 							onClick={() => setIsAddOpen(true)}
-							className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold flex items-center gap-1.5 px-4 h-9 rounded-xl transition-all text-xs shadow-md"
+							className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold flex items-center justify-center gap-1.5 px-4 h-9 rounded-xl transition-all text-xs shadow-md w-full sm:w-auto"
 						>
 							<Plus className="h-4.5 w-4.5" /> Add Domain
 						</Button>
 					</div>
 
 					{lastAdded && (
-						<Card className="border-primary/30 bg-primary/5 shadow-md shadow-primary/5">
-							<CardContent className="p-5 relative">
-								<Button
-									variant="ghost"
-									size="icon"
-									className="absolute top-2 right-2 h-6 w-6 text-muted-foreground hover:text-foreground"
-									onClick={() => setLastAdded("")}
-								>
-									<X className="h-4 w-4" />
-								</Button>
-								<div className="flex items-start gap-3.5">
-									<Globe className="h-5 w-5 text-primary mt-0.5 shrink-0" />
-									<div className="space-y-2.5 text-sm w-full">
-										<p className="font-semibold text-foreground">
-											DNS Configuration Required for <code className="text-primary font-mono">{lastAdded}</code>
-										</p>
-										{hasBaseDomain ? (
-											<>
-												<p className="text-xs text-muted-foreground">
-													Add a CNAME record at your DNS domain registrar:
-												</p>
-												<div className="rounded-lg border border-border bg-[#070709] overflow-hidden text-[10px] font-mono w-full">
-													<table className="w-full">
-														<thead>
-															<tr className="bg-[#0b0b0f] text-left">
-																<th className="px-3 py-1.5 text-muted-foreground font-semibold">Type</th>
-																<th className="px-3 py-1.5 text-muted-foreground font-semibold">Host/Name</th>
-																<th className="px-3 py-1.5 text-muted-foreground font-semibold">Target/Value</th>
-															</tr>
-														</thead>
-														<tbody>
-															<tr className="border-t border-border/40">
-																<td className="px-3 py-2 text-foreground font-bold">CNAME</td>
-																<td className="px-3 py-2 text-foreground">{dnsName}</td>
-																<td className="px-3 py-2 text-foreground flex items-center justify-between">
-																	<span className="truncate max-w-[200px]">{baseDomain}</span>
-																	<button
-																		type="button"
-																		onClick={() => copyText(baseDomain)}
-																		className={`p-1 transition-colors ${copiedTarget ? "text-emerald-400" : "text-muted-foreground hover:text-foreground"}`}
-																	>
-																		{copiedTarget ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
-																	</button>
-																</td>
-															</tr>
-														</tbody>
-													</table>
-												</div>
-												<p className="text-xs text-muted-foreground">
-													Or point an A record directly to target IP:{" "}
-													<code className="text-primary font-mono font-bold bg-[#0d0d11] px-1.5 py-0.5 rounded border border-border/50">
-														{serverIp?.ip ?? "../.."}
-													</code>
-												</p>
-											</>
-										) : (
-											<>
-												<p className="text-xs text-muted-foreground">Add an A record at your DNS domain registrar:</p>
-												<div className="rounded-lg border border-border bg-[#070709] overflow-hidden text-[10px] font-mono w-full">
-													<table className="w-full">
-														<thead>
-															<tr className="bg-[#0b0b0f] text-left">
-																<th className="px-3 py-1.5 text-muted-foreground font-semibold">Type</th>
-																<th className="px-3 py-1.5 text-muted-foreground font-semibold">Host/Name</th>
-																<th className="px-3 py-1.5 text-muted-foreground font-semibold">Value</th>
-															</tr>
-														</thead>
-														<tbody>
-															<tr className="border-t border-border/40">
-																<td className="px-3 py-2 text-foreground font-bold">A</td>
-																<td className="px-3 py-2 text-foreground">{dnsName}</td>
-																<td className="px-3 py-2 text-foreground flex items-center justify-between">
-																	<span>{serverIp?.ip ?? "../.."}</span>
-																	{serverIp?.ip && (
-																		<button
-																			type="button"
-																			onClick={() => copyText(serverIp.ip)}
-																			className={`p-1 transition-colors ${copiedTarget ? "text-emerald-400" : "text-muted-foreground hover:text-foreground"}`}
-																		>
-																			{copiedTarget ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
-																		</button>
-																	)}
-																</td>
-															</tr>
-														</tbody>
-													</table>
-												</div>
-											</>
-										)}
-										<p className="text-[10px] text-muted-foreground/80 leading-relaxed">
-											DNS changes can take up to 48 hours to propagate globally. Dequel will validate ssl cert status
-											automatically.
-										</p>
-									</div>
-								</div>
-							</CardContent>
-						</Card>
+						<DnsInstructionsCard
+							lastAdded={lastAdded}
+							onDismiss={() => setLastAdded("")}
+							hasBaseDomain={hasBaseDomain}
+							dnsName={dnsName}
+							baseDomain={baseDomain}
+							serverIp={serverIp}
+							copiedTarget={copiedTarget}
+							onCopy={copyText}
+						/>
 					)}
 
-					<div className="rounded-xl border border-border bg-card/35 backdrop-blur-sm overflow-hidden overflow-x-auto">
-						<Table className="min-w-[600px] md:min-w-full">
-							<TableHeader className="bg-[#0b0b0f]/50">
-								<TableRow className="border-border hover:bg-transparent">
-									<TableHead className="text-xs font-semibold py-3">Domain</TableHead>
-									<TableHead className="text-xs font-semibold py-3">Type</TableHead>
-									<TableHead className="text-xs font-semibold py-3">Validation</TableHead>
-									<TableHead className="text-xs font-semibold py-3">SSL</TableHead>
-									<TableHead className="text-xs font-semibold py-3">DNS</TableHead>
-									<TableHead className="text-xs font-semibold py-3">TLS</TableHead>
-									<TableHead className="w-12 text-right pr-6"></TableHead>
-								</TableRow>
-							</TableHeader>
-							<TableBody>
-								{domains.map((d) => (
-									<TableRow key={d.id} className="border-border hover:bg-[#121217]/30 group transition-all">
-										<TableCell className="font-semibold py-3.5 text-foreground">{d.domain}</TableCell>
-										<TableCell className="py-3.5">
+					<div className="rounded-xl border border-border bg-card/35 backdrop-blur-sm overflow-hidden">
+						<div className="md:hidden divide-y divide-border">
+							{domains.map((d) => {
+								const st = domainStatuses?.find((s) => s.domain === d.domain);
+								return (
+									<div key={d.id} className="p-3.5 space-y-2.5">
+										<div className="flex items-center justify-between gap-2">
+											<span className="font-semibold text-foreground text-sm break-all">
+												{d.domain}
+											</span>
+											<Button
+												variant="ghost"
+												size="icon"
+												className="h-8 w-8 text-muted-foreground hover:text-destructive shrink-0"
+												onClick={() => setDeletingDomId(d.id)}
+											>
+												<Trash2 className="h-3.5 w-3.5" />
+											</Button>
+										</div>
+										<div className="flex flex-wrap items-center gap-2 text-xs">
 											<Badge
 												variant="outline"
 												className="text-[10px] uppercase border-border text-muted-foreground bg-secondary/10 px-2 py-0.5"
 											>
 												{d.type}
 											</Badge>
-										</TableCell>
-										<TableCell className="py-3.5">
 											<StatusBadge status={d.validationStatus} />
-										</TableCell>
-										<TableCell className="py-3.5">
 											<StatusBadge status={d.sslStatus} />
-										</TableCell>
-										{(() => {
-											const st = domainStatuses?.find((s) => s.domain === d.domain);
-											return (
-												<>
-													<TableCell className="py-3.5">
-														{st ? (
-															<span className="inline-flex items-center gap-1.5 text-xs">
-																<span
-																	className={`h-1.5 w-1.5 rounded-full ${st.dnsOk ? "bg-emerald-400" : "bg-red-400"}`}
-																/>
-																<span className={st.dnsOk ? "text-emerald-400" : "text-red-400"}>
-																	{st.dnsOk ? "Resolved" : "Unresolved"}
+										</div>
+										{st && (
+											<div className="flex items-center gap-4 text-xs pt-1 border-t border-border/40">
+												<span className="inline-flex items-center gap-1.5">
+													<span className={`h-1.5 w-1.5 rounded-full ${st.dnsOk ? "bg-emerald-400" : "bg-red-400"}`} />
+													<span className={st.dnsOk ? "text-emerald-400 text-[11px]" : "text-red-400 text-[11px]"}>
+														DNS {st.dnsOk ? "Resolved" : "Unresolved"}
+													</span>
+												</span>
+												<span className="inline-flex items-center gap-1.5">
+													<span className={`h-1.5 w-1.5 rounded-full ${st.tlsOk ? "bg-emerald-400" : "bg-amber-400"}`} />
+													<span className={st.tlsOk ? "text-emerald-400 text-[11px]" : "text-amber-400 text-[11px]"}>
+														TLS {st.tlsOk ? "Secured" : "Pending"}
+													</span>
+												</span>
+											</div>
+										)}
+									</div>
+								);
+							})}
+						</div>
+
+						<div className="hidden md:block overflow-x-auto">
+							<Table className="w-full">
+								<TableHeader className="bg-[#0b0b0f]/50">
+									<TableRow className="border-border hover:bg-transparent">
+										<TableHead className="text-xs font-semibold py-3">Domain</TableHead>
+										<TableHead className="text-xs font-semibold py-3">Type</TableHead>
+										<TableHead className="text-xs font-semibold py-3">Validation</TableHead>
+										<TableHead className="text-xs font-semibold py-3">SSL</TableHead>
+										<TableHead className="text-xs font-semibold py-3">DNS</TableHead>
+										<TableHead className="text-xs font-semibold py-3">TLS</TableHead>
+										<TableHead className="w-12 text-right pr-6"></TableHead>
+									</TableRow>
+								</TableHeader>
+								<TableBody>
+									{domains.map((d) => (
+										<TableRow key={d.id} className="border-border hover:bg-[#121217]/30 group transition-all">
+											<TableCell className="font-semibold py-3.5 text-foreground">{d.domain}</TableCell>
+											<TableCell className="py-3.5">
+												<Badge
+													variant="outline"
+													className="text-[10px] uppercase border-border text-muted-foreground bg-secondary/10 px-2 py-0.5"
+												>
+													{d.type}
+												</Badge>
+											</TableCell>
+											<TableCell className="py-3.5">
+												<StatusBadge status={d.validationStatus} />
+											</TableCell>
+											<TableCell className="py-3.5">
+												<StatusBadge status={d.sslStatus} />
+											</TableCell>
+											{(() => {
+												const st = domainStatuses?.find((s) => s.domain === d.domain);
+												return (
+													<>
+														<TableCell className="py-3.5">
+															{st ? (
+																<span className="inline-flex items-center gap-1.5 text-xs">
+																	<span className={`h-1.5 w-1.5 rounded-full ${st.dnsOk ? "bg-emerald-400" : "bg-red-400"}`} />
+																	<span className={st.dnsOk ? "text-emerald-400 text-[11px]" : "text-red-400 text-[11px]"}>
+																		{st.dnsOk ? "Resolved" : "Unresolved"}
+																	</span>
 																</span>
-															</span>
-														) : (
-															<span className="text-xs text-muted-foreground">—</span>
-														)}
-													</TableCell>
-													<TableCell className="py-3.5">
-														{st ? (
-															<span className="inline-flex items-center gap-1.5 text-xs">
-																<span
-																	className={`h-1.5 w-1.5 rounded-full ${st.tlsOk ? "bg-emerald-400" : "bg-amber-400"}`}
-																/>
-																<span className={st.tlsOk ? "text-emerald-400" : "text-amber-400"}>
-																	{st.tlsOk ? "Secured" : "Pending"}
+															) : (
+																<span className="text-xs text-muted-foreground">—</span>
+															)}
+														</TableCell>
+														<TableCell className="py-3.5">
+															{st ? (
+																<span className="inline-flex items-center gap-1.5 text-xs">
+																	<span className={`h-1.5 w-1.5 rounded-full ${st.tlsOk ? "bg-emerald-400" : "bg-amber-400"}`} />
+																	<span className={st.tlsOk ? "text-emerald-400 text-[11px]" : "text-amber-400 text-[11px]"}>
+																		{st.tlsOk ? "Secured" : "Pending"}
+																	</span>
 																</span>
-															</span>
-														) : (
-															<span className="text-xs text-muted-foreground">—</span>
-														)}
-													</TableCell>
-												</>
-											);
-										})()}
-										<TableCell className="py-3.5 pr-6 text-right">
-											<Button
-												variant="ghost"
-												size="icon"
-												className="h-7 w-7 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-md transition-all opacity-80 group-hover:opacity-100"
-												onClick={() => setDeletingDomId(d.id)}
-											>
-												<Trash2 className="h-3.5 w-3.5" />
-											</Button>
-										</TableCell>
-									</TableRow>
-								))}
-							</TableBody>
-						</Table>
+															) : (
+																<span className="text-xs text-muted-foreground">—</span>
+															)}
+														</TableCell>
+													</>
+												);
+											})()}
+											<TableCell className="py-3.5 pr-6 text-right">
+												<Button
+													variant="ghost"
+													size="icon"
+													className="h-7 w-7 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-md transition-all opacity-80 group-hover:opacity-100"
+													onClick={() => setDeletingDomId(d.id)}
+												>
+													<Trash2 className="h-3.5 w-3.5" />
+												</Button>
+											</TableCell>
+										</TableRow>
+									))}
+								</TableBody>
+							</Table>
+						</div>
 					</div>
 				</div>
 			)}
 
-			{/* Add Domain Dialog */}
-			<Dialog open={isAddOpen} onOpenChange={setIsAddOpen}>
-				<DialogContent className="sm:max-w-[420px] bg-card border-border text-foreground rounded-2xl shadow-2xl">
-					<DialogHeader>
-						<DialogTitle className="text-lg font-bold text-foreground">Add Custom Domain</DialogTitle>
-						<DialogDescription className="text-xs text-muted-foreground">
-							Attach domain endpoints to route external web requests to your container proxy.
-						</DialogDescription>
-					</DialogHeader>
-					<form onSubmit={add} className="space-y-4 pt-2">
-						<div className="grid gap-2">
-							<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-								Domain Address
-							</label>
-							<Input
-								placeholder="e.g. app.mycompany.com"
-								value={domain}
-								onChange={(e) => setDomain(e.target.value)}
-								className="h-10 bg-[#0d0d11] border-input focus:ring-2 focus:ring-primary text-sm font-semibold rounded-lg font-mono"
-								required
-							/>
-						</div>
-
-						{(project as any)?.buildType === "compose" && (
-							<div className="grid grid-cols-2 gap-3 pt-1">
-								<div className="grid gap-1.5">
-									<label className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
-										Service Name
-									</label>
-									<Input
-										placeholder="e.g. api or web"
-										value={targetService}
-										onChange={(e) => setTargetService(e.target.value)}
-										className="h-9 bg-[#0d0d11] border-input text-xs font-mono rounded-lg"
-									/>
-								</div>
-								<div className="grid gap-1.5">
-									<label className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
-										Service Port
-									</label>
-									<Input
-										placeholder="e.g. 8080"
-										type="number"
-										value={targetPort}
-										onChange={(e) => setTargetPort(e.target.value)}
-										className="h-9 bg-[#0d0d11] border-input text-xs font-mono rounded-lg"
-									/>
-								</div>
-							</div>
-						)}
+			<AddDomainDialog
+				open={isAddOpen}
+				onOpenChange={setIsAddOpen}
+				domain={domain}
+				setDomain={setDomain}
+				targetService={targetService}
+				setTargetService={setTargetService}
+				targetPort={targetPort}
+				setTargetPort={setTargetPort}
+				isCompose={(project as any)?.buildType === "compose"}
+				isAdding={isAdding}
+				onAdd={add}
+			/>
 
-						<div className="flex justify-end gap-2 pt-2 border-t border-border/40">
-							<Button
-								type="button"
-								variant="ghost"
-								onClick={() => setIsAddOpen(false)}
-								className="h-10 text-xs px-4 rounded-xl hover:bg-[#1a1a21]"
-								disabled={isAdding}
-							>
-								Cancel
-							</Button>
-							<Button
-								type="submit"
-								disabled={isAdding}
-								className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold h-10 text-xs px-5 rounded-xl shadow-lg hover:shadow-primary/20 transition-all"
-							>
-								{isAdding ? "Adding..." : "Add Domain"}
-							</Button>
-						</div>
-					</form>
-				</DialogContent>
-			</Dialog>
-
-			{/* Delete Domain Confirmation Dialog */}
-			<Dialog open={deletingDomId !== null} onOpenChange={(open) => !open && setDeletingDomId(null)}>
-				<DialogContent className="sm:max-w-[400px] bg-card border-border text-foreground rounded-2xl shadow-2xl">
-					<DialogHeader>
-						<DialogTitle className="text-lg font-bold text-foreground">Remove Domain</DialogTitle>
-						<DialogDescription className="text-xs text-muted-foreground mt-2">
-							Are you sure you want to remove domain{" "}
-							<span className="font-semibold text-foreground font-mono">{selectedDomToDelete?.domain}</span>? This will
-							stop routing incoming traffic from this path to your running container service.
-						</DialogDescription>
-					</DialogHeader>
-					<DialogFooter className="flex justify-end gap-2 pt-4 border-t border-border/40">
-						<Button
-							variant="ghost"
-							onClick={() => setDeletingDomId(null)}
-							className="h-9 text-xs px-4 rounded-lg hover:bg-[#1a1a21]"
-						>
-							Cancel
-						</Button>
-						<Button
-							onClick={handleDeleteDomain}
-							className="bg-destructive hover:bg-destructive/90 text-destructive-foreground font-semibold text-xs h-9 px-4 rounded-lg transition-all"
-						>
-							Remove Domain
-						</Button>
-					</DialogFooter>
-				</DialogContent>
-			</Dialog>
+			<DeleteDomainDialog
+				domain={selectedDomToDelete?.domain}
+				open={deletingDomId !== null}
+				onOpenChange={(open) => {
+					if (!open) setDeletingDomId(null);
+				}}
+				onConfirm={handleDeleteDomain}
+			/>
 		</div>
 	);
 }
diff --git a/apps/web/src/components/project/envtab/EnvVarTable.tsx b/apps/web/src/components/project/envtab/EnvVarTable.tsx
index cdebba1..f289aa4 100644
--- a/apps/web/src/components/project/envtab/EnvVarTable.tsx
+++ b/apps/web/src/components/project/envtab/EnvVarTable.tsx
@@ -1,5 +1,7 @@
-import { Plus, Upload } from "lucide-react";
+import { Check, Copy, Eye, EyeOff, Lock, Pencil, Plus, Trash2, Upload } from "lucide-react";
+import { Badge } from "../../ui/badge";
 import { Button } from "../../ui/button";
+import { Input } from "../../ui/input";
 import { Table, TableBody, TableHead, TableHeader, TableRow } from "../../ui/table";
 import { EnvVarRow } from "./EnvVarRow";
 
@@ -51,62 +53,173 @@ export function EnvVarTable({
 }: EnvVarTableProps) {
 	return (
 		<div className="space-y-4">
-			<div className="flex items-center justify-between">
+			<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
 				<div>
 					<h2 className="text-lg font-semibold text-foreground">Environment Variables</h2>
 					<p className="text-sm text-muted-foreground">Secure, encrypted settings injected into deployments.</p>
 				</div>
-				<div className="flex items-center gap-2">
+				<div className="flex items-center gap-2 w-full sm:w-auto">
 					<Button
 						variant="outline"
 						onClick={onImport}
-						className="border-border hover:bg-secondary/50 text-foreground font-semibold flex items-center gap-1.5 px-4 h-9 rounded-xl transition-all text-xs"
+						className="border-border hover:bg-secondary/50 text-foreground font-semibold flex items-center justify-center gap-1.5 px-4 h-9 rounded-xl transition-all text-xs flex-1 sm:flex-none"
 					>
 						<Upload className="h-4 w-4" /> Import
 					</Button>
 					<Button
 						onClick={onAdd}
-						className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold flex items-center gap-1.5 px-4 h-9 rounded-xl transition-all text-xs shadow-md"
+						className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold flex items-center justify-center gap-1.5 px-4 h-9 rounded-xl transition-all text-xs shadow-md flex-1 sm:flex-none"
 					>
 						<Plus className="h-4.5 w-4.5" /> Add Variable
 					</Button>
 				</div>
 			</div>
 
-			<div className="rounded-xl border border-border bg-card/35 backdrop-blur-sm overflow-hidden overflow-x-auto">
-				<Table className="min-w-[650px] md:min-w-full">
-					<TableHeader className="bg-[#0b0b0f]/50">
-						<TableRow className="border-border hover:bg-transparent">
-							<TableHead className="text-xs font-semibold py-3">Key</TableHead>
-							<TableHead className="text-xs font-semibold py-3">Value</TableHead>
-							<TableHead className="text-xs font-semibold py-3">Environment</TableHead>
-							<TableHead className="w-32 text-right pr-6"></TableHead>
-						</TableRow>
-					</TableHeader>
-					<TableBody>
-						{envVars.map((ev) => (
-							<EnvVarRow
-								key={ev.id}
-								variable={ev}
-								revealed={revealValues[ev.id]}
-								revealing={!!revealing[ev.id]}
-								editing={editingId === ev.id}
-								editingValue={editingValue}
-								saving={!!savingEdit[ev.id]}
-								copied={copiedId === ev.id}
-								projectId=""
-								onDelete={onDelete}
-								onStartEdit={onStartEdit}
-								onCancelEdit={onCancelEdit}
-								onSaveEdit={onSaveEdit}
-								onReveal={onReveal}
-								onHide={onHide}
-								onCopy={onCopy}
-								onEditingValueChange={onEditingValueChange}
-							/>
-						))}
-					</TableBody>
-				</Table>
+			<div className="rounded-xl border border-border bg-card/35 backdrop-blur-sm overflow-hidden">
+				<div className="md:hidden divide-y divide-border">
+					{envVars.map((ev) => {
+						const isEditing = editingId === ev.id;
+						const isRevealed = revealValues[ev.id];
+						const isRevealing = !!revealing[ev.id];
+						const isSaving = !!savingEdit[ev.id];
+						const isCopied = copiedId === ev.id;
+
+						return (
+							<div key={ev.id} className="p-3.5 space-y-3">
+								<div className="flex items-center justify-between gap-2">
+									<div className="flex items-center gap-2 min-w-0">
+										<Lock className="h-3.5 w-3.5 text-primary opacity-60 shrink-0" />
+										<span className="font-mono text-sm font-semibold text-foreground truncate">
+											{ev.key}
+										</span>
+									</div>
+									<Badge
+										variant="outline"
+										className="text-[10px] uppercase border-primary/20 text-primary bg-primary/5 px-2 py-0.5 shrink-0"
+									>
+										{ev.environment || "all"}
+									</Badge>
+								</div>
+
+								<div className="font-mono text-xs text-muted-foreground bg-black/20 p-2.5 rounded-lg border border-border/40 min-h-[38px] flex items-center">
+									{isEditing ? (
+										<Input
+											value={editingValue}
+											onChange={(e) => onEditingValueChange(e.target.value)}
+											className="h-8 bg-[#09090c] border-input text-xs font-mono w-full"
+											autoFocus
+										/>
+									) : (
+										<span className={isRevealed ? "text-foreground font-semibold break-all" : "opacity-45"}>
+											{isRevealed ?? "••••••••"}
+										</span>
+									)}
+								</div>
+
+								<div className="flex items-center justify-between gap-2 pt-1 border-t border-border/30">
+									<div className="flex items-center gap-1.5">
+										{isEditing ? (
+											<>
+												<Button
+													size="sm"
+													onClick={() => onSaveEdit(ev.id)}
+													disabled={isSaving}
+													className="bg-primary hover:bg-primary/90 text-primary-foreground h-7 text-[10px] px-3 font-semibold rounded-md"
+												>
+													Save
+												</Button>
+												<Button
+													size="sm"
+													variant="ghost"
+													onClick={onCancelEdit}
+													className="h-7 text-[10px] px-2 rounded-md"
+												>
+													Cancel
+												</Button>
+											</>
+										) : (
+											<>
+												<Button
+													variant="ghost"
+													size="icon"
+													className="h-8 w-8 text-muted-foreground hover:text-foreground"
+													onClick={() => onStartEdit(ev.id)}
+													title="Edit value"
+												>
+													<Pencil className="h-3.5 w-3.5" />
+												</Button>
+												<Button
+													variant="ghost"
+													size="icon"
+													className="h-8 w-8 text-muted-foreground hover:text-foreground"
+													onClick={() => (isRevealed ? onHide(ev.id) : onReveal(ev.id))}
+													title={isRevealed ? "Hide value" : "Reveal value"}
+													disabled={isRevealing}
+												>
+													{isRevealed ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+												</Button>
+												<Button
+													variant="ghost"
+													size="icon"
+													className={`h-8 w-8 ${isCopied ? "text-emerald-400 bg-emerald-500/10" : "text-muted-foreground hover:text-foreground"}`}
+													onClick={() => onCopy(ev.id)}
+													title="Copy value"
+													disabled={isRevealing}
+												>
+													{isCopied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+												</Button>
+											</>
+										)}
+									</div>
+									<Button
+										variant="ghost"
+										size="icon"
+										className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+										onClick={() => onDelete(ev.id)}
+									>
+										<Trash2 className="h-3.5 w-3.5" />
+									</Button>
+								</div>
+							</div>
+						);
+					})}
+				</div>
+
+				<div className="hidden md:block overflow-x-auto">
+					<Table className="w-full">
+						<TableHeader className="bg-[#0b0b0f]/50">
+							<TableRow className="border-border hover:bg-transparent">
+								<TableHead className="text-xs font-semibold py-3">Key</TableHead>
+								<TableHead className="text-xs font-semibold py-3">Value</TableHead>
+								<TableHead className="text-xs font-semibold py-3">Environment</TableHead>
+								<TableHead className="w-32 text-right pr-6"></TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{envVars.map((ev) => (
+								<EnvVarRow
+									key={ev.id}
+									variable={ev}
+									revealed={revealValues[ev.id]}
+									revealing={!!revealing[ev.id]}
+									editing={editingId === ev.id}
+									editingValue={editingValue}
+									saving={!!savingEdit[ev.id]}
+									copied={copiedId === ev.id}
+									projectId=""
+									onDelete={onDelete}
+									onStartEdit={onStartEdit}
+									onCancelEdit={onCancelEdit}
+									onSaveEdit={onSaveEdit}
+									onReveal={onReveal}
+									onHide={onHide}
+									onCopy={onCopy}
+									onEditingValueChange={onEditingValueChange}
+								/>
+							))}
+						</TableBody>
+					</Table>
+				</div>
 			</div>
 		</div>
 	);
diff --git a/apps/web/src/components/project/logs/LogDetailSheet.tsx b/apps/web/src/components/project/logs/LogDetailSheet.tsx
new file mode 100644
index 0000000..d6b4742
--- /dev/null
+++ b/apps/web/src/components/project/logs/LogDetailSheet.tsx
@@ -0,0 +1,128 @@
+import { X } from "lucide-react";
+import { cn } from "../../../lib/utils";
+
+interface LogDetailSheetProps {
+	selectedLog: any;
+	onClose: () => void;
+	logSource: "runtime" | "request";
+}
+
+export function LogDetailSheet({
+	selectedLog,
+	onClose,
+	logSource,
+}: LogDetailSheetProps) {
+	if (!selectedLog) return null;
+
+	return (
+		<>
+			<div
+				className="fixed inset-0 bg-black/60 backdrop-blur-xs z-40 lg:hidden"
+				onClick={onClose}
+			/>
+			<div className="fixed inset-y-0 right-0 z-50 w-full max-w-md lg:static lg:w-[360px] lg:z-auto border-l lg:border border-[#27272a] bg-[#111113] lg:rounded-xl p-5 space-y-4 animate-in slide-in-from-right-full lg:slide-in-from-right-3 duration-250 shrink-0 shadow-2xl overflow-y-auto max-h-screen lg:max-h-[500px]">
+				<div className="flex items-center justify-between">
+					<h4 className="text-xs font-bold text-zinc-400 uppercase tracking-wider">
+						Log Event Details
+					</h4>
+					<button
+						onClick={onClose}
+						className="w-7 h-7 rounded-md hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 flex items-center justify-center transition-colors"
+					>
+						<X className="h-4 w-4" />
+					</button>
+				</div>
+
+				<div>
+					<span
+						className={cn(
+							"px-2 py-0.5 rounded text-[10px] font-bold uppercase",
+							selectedLog.level === "error"
+								? "bg-red-500/10 text-red-400 border border-red-500/20"
+								: selectedLog.level === "warning"
+									? "bg-amber-500/10 text-amber-400 border border-amber-500/20"
+									: "bg-blue-500/10 text-blue-400 border border-blue-500/20",
+						)}
+					>
+						{selectedLog.level}
+					</span>
+				</div>
+
+				<div className="space-y-3 font-mono text-[11px]">
+					<div className="space-y-1">
+						<div className="text-zinc-500 text-[10px] uppercase font-sans">
+							Timestamp
+						</div>
+						<div className="text-zinc-300">
+							{new Date(
+								selectedLog.timestamp || selectedLog.createdAt,
+							).toLocaleString()}
+						</div>
+					</div>
+
+					{logSource === "request" && selectedLog.status && (
+						<div className="space-y-1">
+							<div className="text-zinc-500 text-[10px] uppercase font-sans">
+								Status
+							</div>
+							<div className="text-zinc-300">
+								{selectedLog.status}
+							</div>
+						</div>
+					)}
+
+					{logSource === "request" && selectedLog.request && (
+						<div className="space-y-1">
+							<div className="text-zinc-500 text-[10px] uppercase font-sans">
+								Request
+							</div>
+							<div className="text-zinc-300">
+								{selectedLog.request}
+							</div>
+						</div>
+					)}
+
+					{logSource === "request" && selectedLog.duration && (
+						<div className="space-y-1">
+							<div className="text-zinc-500 text-[10px] uppercase font-sans">
+								Duration
+							</div>
+							<div className="text-zinc-300">
+								{selectedLog.duration}
+							</div>
+						</div>
+					)}
+
+					{logSource === "request" && selectedLog.size && (
+						<div className="space-y-1">
+							<div className="text-zinc-500 text-[10px] uppercase font-sans">
+								Size
+							</div>
+							<div className="text-zinc-300">
+								{selectedLog.size}
+							</div>
+						</div>
+					)}
+
+					<div className="space-y-1">
+						<div className="text-zinc-500 text-[10px] uppercase font-sans">
+							Message
+						</div>
+						<div className="text-zinc-300 break-all">
+							{selectedLog.parsedMessage}
+						</div>
+					</div>
+
+					<div className="space-y-1">
+						<div className="text-zinc-500 text-[10px] uppercase font-sans">
+							Raw JSON payload
+						</div>
+						<pre className="p-3 rounded bg-[#070708] border border-[#1e1e22] text-[10px] text-zinc-400 overflow-x-auto whitespace-pre-wrap leading-relaxed max-h-[220px]">
+							{selectedLog.raw}
+						</pre>
+					</div>
+				</div>
+			</div>
+		</>
+	);
+}
diff --git a/apps/web/src/components/project/logs/LogsEventsTable.tsx b/apps/web/src/components/project/logs/LogsEventsTable.tsx
new file mode 100644
index 0000000..13d452d
--- /dev/null
+++ b/apps/web/src/components/project/logs/LogsEventsTable.tsx
@@ -0,0 +1,120 @@
+import { cn } from "../../../lib/utils";
+
+interface LogsEventsTableProps {
+	logSource: "runtime" | "request";
+	isLoading: boolean;
+	filteredLogs: any[];
+	selectedLog: any;
+	onSelectLog: (log: any) => void;
+}
+
+export function LogsEventsTable({
+	logSource,
+	isLoading,
+	filteredLogs,
+	selectedLog,
+	onSelectLog,
+}: LogsEventsTableProps) {
+	return (
+		<div className="flex-1 overflow-hidden border border-[#1a1a1f] bg-[#0c0c0e] rounded-xl">
+			<div className="overflow-x-auto max-h-[500px] overflow-y-auto font-mono text-[11px] leading-relaxed">
+				<table className="w-full text-left border-collapse min-w-[500px] sm:min-w-full">
+					<thead>
+						<tr className="border-b border-[#18181c] bg-[#111113] text-zinc-500 select-none">
+							<th className="py-2.5 px-4 font-semibold w-24">Time</th>
+							<th className="py-2.5 px-3 font-semibold w-20">Level</th>
+							{logSource === "request" && (
+								<>
+									<th className="py-2.5 px-3 font-semibold w-16">Status</th>
+									<th className="py-2.5 px-3 font-semibold w-28">Host</th>
+									<th className="py-2.5 px-3 font-semibold w-36">Request</th>
+								</>
+							)}
+							<th className="py-2.5 px-4 font-semibold">Message</th>
+						</tr>
+					</thead>
+					<tbody className="divide-y divide-[#121216]">
+						{isLoading ? (
+							<tr>
+								<td colSpan={5} className="py-8 text-center text-zinc-600">
+									Loading logs...
+								</td>
+							</tr>
+						) : filteredLogs.length === 0 ? (
+							<tr>
+								<td colSpan={5} className="py-8 text-center text-zinc-500">
+									{logSource === "request" ? "No request logs found." : "No runtime logs found."}
+								</td>
+							</tr>
+						) : (
+							filteredLogs.map((log, idx) => (
+								<tr
+									key={idx}
+									onClick={() => onSelectLog(log)}
+									className={cn(
+										"hover:bg-[#141418] cursor-pointer transition-colors border-l-2",
+										log.level === "error"
+											? "border-l-red-500 hover:border-l-red-400"
+											: log.level === "warning"
+												? "border-l-amber-500 hover:border-l-amber-400"
+												: "border-l-transparent hover:border-l-zinc-700",
+										selectedLog?.id === log.id && "bg-[#16161b] hover:bg-[#16161b]",
+									)}
+								>
+									<td className="py-2 px-4 text-zinc-500 whitespace-nowrap">
+										{new Date(log.timestamp || log.createdAt).toLocaleTimeString()}
+									</td>
+									<td className="py-2 px-3">
+										<span
+											className={cn(
+												"px-1.5 py-0.5 rounded text-[9px] font-bold uppercase",
+												log.level === "error"
+													? "bg-red-500/10 text-red-400 border border-red-500/20"
+													: log.level === "warning"
+														? "bg-amber-500/10 text-amber-400 border border-amber-500/20"
+														: "bg-blue-500/10 text-blue-400 border border-blue-500/20",
+											)}
+										>
+											{log.level}
+										</span>
+									</td>
+									{logSource === "request" && (
+										<>
+											<td className="py-2 px-3">
+												{log.status ? (
+													<span
+														className={cn(
+															"inline-block px-1.5 py-0.5 rounded text-[9px] font-bold font-sans",
+															Number(log.status) >= 500
+																? "bg-red-500/10 text-red-400 border border-red-500/20"
+																: Number(log.status) >= 400
+																	? "bg-amber-500/10 text-amber-400 border border-amber-500/20"
+																	: "bg-emerald-500/10 text-emerald-400 border border-emerald-500/20",
+														)}
+													>
+														{log.status}
+													</span>
+												) : (
+													<span className="text-zinc-600">—</span>
+												)}
+											</td>
+											<td className="py-2 px-3 text-zinc-400 truncate max-w-[110px]">
+												{log.host}
+											</td>
+											<td className="py-2 px-3 text-zinc-400 truncate max-w-[140px]">
+												{log.request}
+											</td>
+										</>
+									)}
+									<td className="py-2 px-4 text-zinc-300 break-all max-w-lg truncate">
+										{log.parsedMessage}
+									</td>
+								</tr>
+							))
+						)}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/web/src/components/project/logs/LogsTab.tsx b/apps/web/src/components/project/logs/LogsTab.tsx
index 9125914..0a0e4b3 100644
--- a/apps/web/src/components/project/logs/LogsTab.tsx
+++ b/apps/web/src/components/project/logs/LogsTab.tsx
@@ -5,14 +5,10 @@ import { useDeployments } from "../../../hooks/useDeployments";
 import { cn } from "../../../lib/utils";
 import { Button } from "../../ui/button";
 import { Input } from "../../ui/input";
-
-function stripAnsi(str: string): string {
-	// Strip full ANSI escape sequences (ESC + bracket + params + terminator)
-	let s = str.replace(/[\u001b\u009b]\[[\d;]*[A-Za-z]/g, "");
-	// Strip orphaned bracket sequences where ESC byte was already removed (e.g. "[35m", "[0m")
-	s = s.replace(/\[(\d+;)*\d*m/g, "");
-	return s;
-}
+import { LogDetailSheet } from "./LogDetailSheet";
+import { LogsEventsTable } from "./LogsEventsTable";
+import { LogsTimelineDistribution } from "./LogsTimelineDistribution";
+import { parseLogEntry } from "./parseLogEntry";
 
 interface LogsTabProps {
 	projectId: string;
@@ -51,62 +47,9 @@ export function LogsTab({ projectId }: LogsTabProps) {
 	const [showWarning, setShowWarning] = useState(true);
 	const [showError, setShowError] = useState(true);
 
-	// Drawer state
 	const [selectedLog, setSelectedLog] = useState<any | null>(null);
 
-	// Parse logs
-	const parsedLogs = logs.map((log) => {
-		let message = stripAnsi(log.message);
-		let level = "info";
-		let status = "";
-		let host = "localhost";
-		let request = "";
-		let duration: string | null = null;
-		let size: string | null = null;
-		let raw = log.message;
-
-		if (message.startsWith("{") && message.endsWith("}")) {
-			try {
-				const obj = JSON.parse(message);
-				if (obj.level) level = obj.level.toLowerCase();
-				if (obj.status) {
-					status = String(obj.status);
-					const statusNum = Number(obj.status);
-					if (statusNum >= 500) level = "error";
-					else if (statusNum >= 400) level = "warning";
-				}
-				if (obj.request) {
-					host = obj.request.host || host;
-					request = `${obj.request.method || ""} ${obj.request.uri || ""}`;
-					duration = obj.duration ? `${(obj.duration * 1000).toFixed(2)}ms` : null;
-					size = obj.size ? `${obj.size} B` : null;
-					message = obj.msg || obj.message || obj.error || message;
-					if (!message || message === '""') {
-						message = `${obj.request.method || ""} ${obj.request.uri || ""}`;
-					}
-				} else {
-					message = obj.msg || obj.message || message;
-				}
-				raw = JSON.stringify(obj, null, 2);
-			} catch {}
-		} else {
-			const upper = message.toUpperCase();
-			if (upper.includes("ERROR") || upper.includes("CRITICAL") || upper.includes("FAIL")) level = "error";
-			else if (upper.includes("WARN")) level = "warning";
-		}
-
-		return {
-			...log,
-			parsedMessage: message,
-			level,
-			status,
-			host,
-			request,
-			duration,
-			size,
-			raw,
-		};
-	});
+	const parsedLogs = logs.map(parseLogEntry);
 
 	const filteredLogs = parsedLogs.filter((log) => {
 		if (searchQuery && !log.message.toLowerCase().includes(searchQuery.toLowerCase())) {
@@ -147,15 +90,13 @@ export function LogsTab({ projectId }: LogsTabProps) {
 
 	return (
 		<div className="space-y-6">
-			{/* Top Filters Header */}
-			<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 p-4 border border-[#1a1a1f] bg-[#0c0c0e] rounded-xl select-none">
-				<div className="flex flex-wrap items-center gap-4">
-					{/* Log Source Selector */}
-					<div className="flex items-center bg-[#141417] p-1 rounded-lg border border-[#222227] mr-2">
+			<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4 p-4 border border-[#1a1a1f] bg-[#0c0c0e] rounded-xl select-none">
+				<div className="flex flex-col sm:flex-row flex-wrap items-stretch sm:items-center gap-3 sm:gap-4">
+					<div className="flex items-center justify-center bg-[#141417] p-1 rounded-lg border border-[#222227]">
 						<button
 							onClick={() => setLogSource("request")}
 							className={cn(
-								"px-3 py-1 text-xs font-semibold rounded-md transition-all",
+								"flex-1 sm:flex-none px-3 py-1 text-xs font-semibold rounded-md transition-all text-center",
 								logSource === "request"
 									? "bg-[#1c1c22] text-amber-500 border border-[#2c2c35] shadow"
 									: "text-zinc-400 hover:text-zinc-200 border border-transparent",
@@ -166,7 +107,7 @@ export function LogsTab({ projectId }: LogsTabProps) {
 						<button
 							onClick={() => setLogSource("runtime")}
 							className={cn(
-								"px-3 py-1 text-xs font-semibold rounded-md transition-all",
+								"flex-1 sm:flex-none px-3 py-1 text-xs font-semibold rounded-md transition-all text-center",
 								logSource === "runtime"
 									? "bg-[#1c1c22] text-amber-500 border border-[#2c2c35] shadow"
 									: "text-zinc-400 hover:text-zinc-200 border border-transparent",
@@ -176,8 +117,7 @@ export function LogsTab({ projectId }: LogsTabProps) {
 						</button>
 					</div>
 
-					{/* Search message */}
-					<div className="relative w-64">
+					<div className="relative w-full sm:w-64">
 						<Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-zinc-500" />
 						<Input
 							placeholder="Search logs..."
@@ -187,7 +127,6 @@ export function LogsTab({ projectId }: LogsTabProps) {
 						/>
 					</div>
 
-					{/* Severity Checkboxes */}
 					<div className="flex items-center gap-3.5 text-xs text-zinc-400 font-medium">
 						<label className="flex items-center gap-1.5 cursor-pointer hover:text-zinc-200">
 							<input
@@ -219,12 +158,12 @@ export function LogsTab({ projectId }: LogsTabProps) {
 					</div>
 				</div>
 
-				<div className="flex items-center gap-3">
+				<div className="flex items-center justify-between sm:justify-end gap-3 pt-2 lg:pt-0 border-t lg:border-t-0 border-[#1a1a1f]">
 					<Button
 						variant="outline"
 						size="sm"
 						onClick={() => refetch()}
-						className="h-8 border-[#222227] text-zinc-450 hover:bg-[#1a1a1f]"
+						className="h-8 border-[#222227] text-zinc-400 hover:bg-[#1a1a1f] flex-1 sm:flex-none"
 					>
 						<RefreshCw className="h-3 w-3 mr-1" /> Reload
 					</Button>
@@ -232,7 +171,7 @@ export function LogsTab({ projectId }: LogsTabProps) {
 						onClick={() => setIsLive(!isLive)}
 						disabled={startDate !== "" || endDate !== ""}
 						className={cn(
-							"h-8 text-xs font-semibold px-3 py-1.5 rounded-lg border flex items-center gap-1.5 transition-all shadow-md",
+							"h-8 text-xs font-semibold px-3 py-1.5 rounded-lg border flex items-center justify-center gap-1.5 transition-all shadow-md flex-1 sm:flex-none",
 							startDate !== "" || endDate !== ""
 								? "bg-[#141417] border-[#222227] text-zinc-650 cursor-not-allowed opacity-55"
 								: isLive
@@ -251,7 +190,6 @@ export function LogsTab({ projectId }: LogsTabProps) {
 				</div>
 			</div>
 
-			{/* Date Range Selection (Only for Request Monitoring) */}
 			{logSource === "request" && (
 				<div className="flex flex-wrap items-center gap-4 bg-[#0a0a0c] border border-[#1a1a1f] p-3 rounded-xl text-xs select-none">
 					<div className="flex items-center gap-2">
@@ -298,203 +236,26 @@ export function LogsTab({ projectId }: LogsTabProps) {
 				</div>
 			)}
 
-			{/* Log count Timeline Chart */}
-			<div className="rounded-xl border border-[#1a1a1f] bg-[#0c0c0e] p-4 space-y-1">
-				<div className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider select-none">
-					{logSource === "request"
-						? "Request Count Distribution (Last 30 Minutes)"
-						: "Log Count Distribution (Last 30 Minutes)"}
-				</div>
-				<div className="h-12 flex items-end gap-1.5 pt-4 select-none">
-					{bins.map((bin, idx) => (
-						<div
-							key={idx}
-							className="flex-1 rounded-sm bg-zinc-800 hover:bg-amber-500/50 transition-colors relative group"
-							style={{
-								height: `${(bin.count / maxCount) * 100}%`,
-								minHeight: "2px",
-							}}
-						>
-							<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 hidden group-hover:block bg-[#111113] border border-[#27272a] text-[10px] text-zinc-200 px-2 py-0.5 rounded shadow-xl whitespace-nowrap z-30 font-mono">
-								{bin.count} logs
-							</div>
-						</div>
-					))}
-				</div>
-			</div>
+			<LogsTimelineDistribution
+				logSource={logSource}
+				bins={bins}
+				maxCount={maxCount}
+			/>
 
-			{/* Logs Table Layout */}
 			<div className="flex gap-4 items-start relative min-h-[400px]">
-				<div className="flex-1 overflow-hidden border border-[#1a1a1f] bg-[#0c0c0e] rounded-xl">
-					<div className="overflow-x-auto max-h-[500px] overflow-y-auto font-mono text-[11px] leading-relaxed">
-						<table className="w-full text-left border-collapse">
-							<thead>
-								<tr className="border-b border-[#18181c] bg-[#111113] text-zinc-500 select-none">
-									<th className="py-2.5 px-4 font-semibold w-24">Time</th>
-									<th className="py-2.5 px-3 font-semibold w-20">Level</th>
-									{logSource === "request" && (
-										<>
-											<th className="py-2.5 px-3 font-semibold w-16">Status</th>
-											<th className="py-2.5 px-3 font-semibold w-28">Host</th>
-											<th className="py-2.5 px-3 font-semibold w-36">Request</th>
-										</>
-									)}
-									<th className="py-2.5 px-4 font-semibold">Message</th>
-								</tr>
-							</thead>
-							<tbody className="divide-y divide-[#121216]">
-								{isLoading ? (
-									<tr>
-										<td colSpan={5} className="py-8 text-center text-zinc-600">
-											Loading logs...
-										</td>
-									</tr>
-								) : filteredLogs.length === 0 ? (
-									<tr>
-										<td colSpan={5} className="py-8 text-center text-zinc-500">
-											{logSource === "request" ? "No request logs found." : "No runtime logs found."}
-										</td>
-									</tr>
-								) : (
-									filteredLogs.map((log, idx) => (
-										<tr
-											key={idx}
-											onClick={() => setSelectedLog(log)}
-											className={cn(
-												"hover:bg-[#141418] cursor-pointer transition-colors border-l-2",
-												log.level === "error"
-													? "border-l-red-500 hover:border-l-red-400"
-													: log.level === "warning"
-														? "border-l-amber-500 hover:border-l-amber-400"
-														: "border-l-transparent hover:border-l-zinc-700",
-												selectedLog?.id === log.id && "bg-[#16161b] hover:bg-[#16161b]",
-											)}
-										>
-											<td className="py-2 px-4 text-zinc-500 whitespace-nowrap">
-												{new Date((log as any).timestamp || log.createdAt).toLocaleTimeString()}
-											</td>
-											<td className="py-2 px-3">
-												<span
-													className={cn(
-														"px-1.5 py-0.5 rounded text-[9px] font-bold uppercase",
-														log.level === "error"
-															? "bg-red-500/10 text-red-400 border border-red-500/20"
-															: log.level === "warning"
-																? "bg-amber-500/10 text-amber-400 border border-amber-500/20"
-																: "bg-blue-500/10 text-blue-400 border border-blue-500/20",
-													)}
-												>
-													{log.level}
-												</span>
-											</td>
-											{logSource === "request" && (
-												<>
-													<td className="py-2 px-3">
-														{log.status ? (
-															<span
-																className={cn(
-																	"inline-block px-1.5 py-0.5 rounded text-[9px] font-bold font-sans",
-																	Number(log.status) >= 500
-																		? "bg-red-500/10 text-red-400 border border-red-500/20"
-																		: Number(log.status) >= 400
-																			? "bg-amber-500/10 text-amber-400 border border-amber-500/20"
-																			: "bg-emerald-500/10 text-emerald-400 border border-emerald-500/20",
-																)}
-															>
-																{log.status}
-															</span>
-														) : (
-															<span className="text-zinc-600">—</span>
-														)}
-													</td>
-													<td className="py-2 px-3 text-zinc-400 truncate max-w-[110px]">{log.host}</td>
-													<td className="py-2 px-3 text-zinc-400 truncate max-w-[140px]">{log.request}</td>
-												</>
-											)}
-											<td className="py-2 px-4 text-zinc-300 break-all max-w-lg truncate">{log.parsedMessage}</td>
-										</tr>
-									))
-								)}
-							</tbody>
-						</table>
-					</div>
-				</div>
-
-				{selectedLog && (
-					<div className="w-[360px] border border-[#27272a] bg-[#111113] rounded-xl p-5 space-y-4 animate-in slide-in-from-right-3 duration-250 shrink-0 shadow-2xl relative">
-						<button
-							onClick={() => setSelectedLog(null)}
-							className="absolute top-4 right-4 w-6 h-6 rounded-md hover:bg-zinc-800 text-zinc-500 hover:text-zinc-250 flex items-center justify-center transition-colors"
-						>
-							<X className="h-3.5 w-3.5" />
-						</button>
-
-						<div>
-							<h4 className="text-xs font-bold text-zinc-400 uppercase tracking-wider mb-2">Log Event Details</h4>
-							<span
-								className={cn(
-									"px-2 py-0.5 rounded text-[10px] font-bold uppercase",
-									selectedLog.level === "error"
-										? "bg-red-500/10 text-red-400 border border-red-500/20"
-										: selectedLog.level === "warning"
-											? "bg-amber-500/10 text-amber-400 border border-amber-500/20"
-											: "bg-blue-500/10 text-blue-400 border border-blue-500/20",
-								)}
-							>
-								{selectedLog.level}
-							</span>
-						</div>
-
-						<div className="space-y-3 font-mono text-[11px]">
-							<div className="space-y-1">
-								<div className="text-zinc-500 text-[10px] uppercase font-sans">Timestamp</div>
-								<div className="text-zinc-300">
-									{new Date((selectedLog as any).timestamp || selectedLog.createdAt).toLocaleString()}
-								</div>
-							</div>
-
-							{logSource === "request" && selectedLog.status && (
-								<div className="space-y-1">
-									<div className="text-zinc-500 text-[10px] uppercase font-sans">Status</div>
-									<div className="text-zinc-300">{selectedLog.status}</div>
-								</div>
-							)}
-
-							{logSource === "request" && selectedLog.request && (
-								<div className="space-y-1">
-									<div className="text-zinc-500 text-[10px] uppercase font-sans">Request</div>
-									<div className="text-zinc-300">{selectedLog.request}</div>
-								</div>
-							)}
-
-							{logSource === "request" && selectedLog.duration && (
-								<div className="space-y-1">
-									<div className="text-zinc-500 text-[10px] uppercase font-sans">Duration</div>
-									<div className="text-zinc-300">{selectedLog.duration}</div>
-								</div>
-							)}
-
-							{logSource === "request" && selectedLog.size && (
-								<div className="space-y-1">
-									<div className="text-zinc-500 text-[10px] uppercase font-sans">Size</div>
-									<div className="text-zinc-300">{selectedLog.size}</div>
-								</div>
-							)}
-
-							<div className="space-y-1">
-								<div className="text-zinc-500 text-[10px] uppercase font-sans">Message</div>
-								<div className="text-zinc-300 break-all">{selectedLog.parsedMessage}</div>
-							</div>
-
-							<div className="space-y-1">
-								<div className="text-zinc-500 text-[10px] uppercase font-sans">Raw JSON payload</div>
-								<pre className="p-3 rounded bg-[#070708] border border-[#1e1e22] text-[10px] text-zinc-400 overflow-x-auto whitespace-pre-wrap leading-relaxed max-h-[220px]">
-									{selectedLog.raw}
-								</pre>
-							</div>
-						</div>
-					</div>
-				)}
+				<LogsEventsTable
+					logSource={logSource}
+					isLoading={isLoading}
+					filteredLogs={filteredLogs}
+					selectedLog={selectedLog}
+					onSelectLog={(log) => setSelectedLog(log)}
+				/>
+
+				<LogDetailSheet
+					selectedLog={selectedLog}
+					onClose={() => setSelectedLog(null)}
+					logSource={logSource}
+				/>
 			</div>
 		</div>
 	);
diff --git a/apps/web/src/components/project/logs/LogsTimelineDistribution.tsx b/apps/web/src/components/project/logs/LogsTimelineDistribution.tsx
new file mode 100644
index 0000000..325b30b
--- /dev/null
+++ b/apps/web/src/components/project/logs/LogsTimelineDistribution.tsx
@@ -0,0 +1,43 @@
+interface Bin {
+	start: number;
+	end: number;
+	count: number;
+}
+
+interface LogsTimelineDistributionProps {
+	logSource: "runtime" | "request";
+	bins: Bin[];
+	maxCount: number;
+}
+
+export function LogsTimelineDistribution({
+	logSource,
+	bins,
+	maxCount,
+}: LogsTimelineDistributionProps) {
+	return (
+		<div className="rounded-xl border border-[#1a1a1f] bg-[#0c0c0e] p-4 space-y-1">
+			<div className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider select-none">
+				{logSource === "request"
+					? "Request Count Distribution (Last 30 Minutes)"
+					: "Log Count Distribution (Last 30 Minutes)"}
+			</div>
+			<div className="h-12 flex items-end gap-1.5 pt-4 select-none">
+				{bins.map((bin, idx) => (
+					<div
+						key={idx}
+						className="flex-1 rounded-sm bg-zinc-800 hover:bg-amber-500/50 transition-colors relative group"
+						style={{
+							height: `${(bin.count / maxCount) * 100}%`,
+							minHeight: "2px",
+						}}
+					>
+						<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 hidden group-hover:block bg-[#111113] border border-[#27272a] text-[10px] text-zinc-200 px-2 py-0.5 rounded shadow-xl whitespace-nowrap z-30 font-mono">
+							{bin.count} logs
+						</div>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
diff --git a/apps/web/src/components/project/logs/parseLogEntry.ts b/apps/web/src/components/project/logs/parseLogEntry.ts
new file mode 100644
index 0000000..f463097
--- /dev/null
+++ b/apps/web/src/components/project/logs/parseLogEntry.ts
@@ -0,0 +1,61 @@
+export function stripAnsi(str: string): string {
+	let s = str.replace(/[\u001b\u009b]\[[\d;]*[A-Za-z]/g, "");
+	s = s.replace(/\[(\d+;)*\d*m/g, "");
+	return s;
+}
+
+export function parseLogEntry(log: { id?: string; message: string; createdAt?: string; timestamp?: string }) {
+	let message = stripAnsi(log.message);
+	let level = "info";
+	let status = "";
+	let host = "localhost";
+	let request = "";
+	let duration: string | null = null;
+	let size: string | null = null;
+	let raw = log.message;
+
+	if (message.startsWith("{") && message.endsWith("}")) {
+		try {
+			const obj = JSON.parse(message);
+			if (obj.level) level = obj.level.toLowerCase();
+			if (obj.status) {
+				status = String(obj.status);
+				const statusNum = Number(obj.status);
+				if (statusNum >= 500) level = "error";
+				else if (statusNum >= 400) level = "warning";
+			}
+			if (obj.request) {
+				host = obj.request.host || host;
+				request = `${obj.request.method || ""} ${obj.request.uri || ""}`;
+				duration = obj.duration ? `${(obj.duration * 1000).toFixed(2)}ms` : null;
+				size = obj.size ? `${obj.size} B` : null;
+				message = obj.msg || obj.message || obj.error || message;
+				if (!message || message === '""') {
+					message = `${obj.request.method || ""} ${obj.request.uri || ""}`;
+				}
+			} else {
+				message = obj.msg || obj.message || message;
+			}
+			raw = JSON.stringify(obj, null, 2);
+		} catch {}
+	} else {
+		const upper = message.toUpperCase();
+		if (upper.includes("ERROR") || upper.includes("CRITICAL") || upper.includes("FAIL")) {
+			level = "error";
+		} else if (upper.includes("WARN")) {
+			level = "warning";
+		}
+	}
+
+	return {
+		...log,
+		parsedMessage: message,
+		level,
+		status,
+		host,
+		request,
+		duration,
+		size,
+		raw,
+	};
+}
diff --git a/apps/web/src/components/project/observability/ObservabilityTab.tsx b/apps/web/src/components/project/observability/ObservabilityTab.tsx
index a07981e..ef65805 100644
--- a/apps/web/src/components/project/observability/ObservabilityTab.tsx
+++ b/apps/web/src/components/project/observability/ObservabilityTab.tsx
@@ -56,15 +56,15 @@ function AreaChart({
 	width = 500,
 	height = 180,
 }: AreaChartProps) {
-	const padding = { top: 20, right: 20, bottom: 30, left: 90 };
+	const padding = { top: 20, right: 15, bottom: 30, left: 55 };
 
 	if (isLoading || points.length === 0) {
 		return (
 			<Card className="border-[#1c1c21] bg-[#0c0c0e]">
-				<CardHeader className="pb-2">
+				<CardHeader className="p-4 pb-2">
 					<CardTitle className="text-xs font-bold text-zinc-400 uppercase tracking-wider">{title}</CardTitle>
 				</CardHeader>
-				<CardContent className="h-[200px] flex items-center justify-center text-zinc-500 text-xs">
+				<CardContent className="h-[180px] flex items-center justify-center text-zinc-500 text-xs p-4">
 					<div className="flex flex-col items-center gap-2">
 						<div className="w-5 h-5 border-2 border-zinc-700 border-t-amber-500 rounded-full animate-spin" />
 						<span>Analyzing metrics...</span>
@@ -109,13 +109,13 @@ function AreaChart({
 
 	return (
 		<Card className="border-[#1c1c21] bg-[#0c0c0e] hover:border-zinc-800 transition-colors">
-			<CardHeader className="pb-1 flex flex-row items-center justify-between">
+			<CardHeader className="p-3.5 sm:p-4 pb-1 flex flex-row items-center justify-between">
 				<CardTitle className="text-xs font-bold text-zinc-400 uppercase tracking-wider">{title}</CardTitle>
 				<span className="text-xs font-mono font-bold text-zinc-350">
 					{formatter(points[points.length - 1]?.y ?? 0)}
 				</span>
 			</CardHeader>
-			<CardContent className="p-0">
+			<CardContent className="p-2 sm:p-4 pt-0">
 				<svg viewBox={`0 0 ${width} ${height}`} className="w-full h-auto overflow-visible select-none">
 					<defs>
 						<linearGradient id={`grad-${title.replace(/\s+/g, "")}`} x1="0" y1="0" x2="0" y2="1">
diff --git a/apps/web/src/components/project/scaling/AutoscalingPolicyCard.tsx b/apps/web/src/components/project/scaling/AutoscalingPolicyCard.tsx
new file mode 100644
index 0000000..7cd0126
--- /dev/null
+++ b/apps/web/src/components/project/scaling/AutoscalingPolicyCard.tsx
@@ -0,0 +1,246 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../../ui/card";
+import { Input } from "../../ui/input";
+import { Button } from "../../ui/button";
+import { TrendingUp, Sliders, Trash2 } from "lucide-react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "../../ui/dialog";
+
+interface ScalingPolicy {
+	minReplicas: number;
+	maxReplicas: number;
+	cpuThresholdPercent: number;
+	cooldownSeconds?: number;
+}
+
+interface AutoscalingPolicyCardProps {
+	policy: ScalingPolicy | null | undefined;
+	isConfiguring: boolean;
+	setIsConfiguring: (v: boolean) => void;
+	minR: number;
+	setMinR: (v: number) => void;
+	maxR: number;
+	setMaxR: (v: number) => void;
+	cpuT: number;
+	setCpuT: (v: number) => void;
+	isSavingPolicy: boolean;
+	onSavePolicy: () => Promise<void>;
+	onDeletePolicy: () => Promise<void>;
+	isDisableOpen: boolean;
+	setIsDisableOpen: (v: boolean) => void;
+}
+
+export function AutoscalingPolicyCard({
+	policy,
+	isConfiguring,
+	setIsConfiguring,
+	minR,
+	setMinR,
+	maxR,
+	setMaxR,
+	cpuT,
+	setCpuT,
+	isSavingPolicy,
+	onSavePolicy,
+	onDeletePolicy,
+	isDisableOpen,
+	setIsDisableOpen,
+}: AutoscalingPolicyCardProps) {
+	return (
+		<>
+			<Card className="bg-card/40 border-border backdrop-blur-sm">
+				<CardHeader className="pb-4">
+					<CardTitle className="text-base font-bold flex items-center gap-2 text-foreground">
+						<TrendingUp className="h-5 w-5 text-primary" /> Auto-scaling Policy
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					{!policy && !isConfiguring ? (
+						<div className="flex flex-col items-center justify-center py-6 text-center">
+							<div className="w-12 h-12 rounded-xl bg-primary/10 text-primary flex items-center justify-center mb-4 border border-primary/15">
+								<Sliders className="h-5 w-5" />
+							</div>
+							<h4 className="text-sm font-semibold text-foreground mb-1">
+								Auto-scaling is not configured
+							</h4>
+							<p className="text-xs text-muted-foreground max-w-sm mb-4 leading-relaxed">
+								Automatically adjust replica counts between min/max limits based on average CPU usage. Perfect for load spikes.
+							</p>
+							<Button
+								onClick={() => setIsConfiguring(true)}
+								className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold flex items-center gap-1.5 px-4 h-9 rounded-lg transition-all shadow-md w-full sm:w-auto"
+							>
+								Configure Auto-scaling
+							</Button>
+						</div>
+					) : isConfiguring || !policy ? (
+						<div className="space-y-5">
+							<div className="grid gap-4 sm:grid-cols-3">
+								<div className="grid gap-2">
+									<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+										Min Replicas
+									</label>
+									<Input
+										type="number"
+										min={1}
+										value={minR}
+										onChange={(e) => setMinR(Number(e.target.value))}
+										className="h-10 bg-[#0d0d11] border-input focus:ring-2 focus:ring-primary text-sm font-semibold rounded-lg"
+									/>
+								</div>
+								<div className="grid gap-2">
+									<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+										Max Replicas
+									</label>
+									<Input
+										type="number"
+										min={1}
+										value={maxR}
+										onChange={(e) => setMaxR(Number(e.target.value))}
+										className="h-10 bg-[#0d0d11] border-input focus:ring-2 focus:ring-primary text-sm font-semibold rounded-lg"
+									/>
+								</div>
+								<div className="grid gap-2">
+									<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+										CPU Target %
+									</label>
+									<div className="relative flex items-center">
+										<Input
+											type="number"
+											min={10}
+											max={100}
+											value={cpuT}
+											onChange={(e) => setCpuT(Number(e.target.value))}
+											className="h-10 bg-[#0d0d11] border-input focus:ring-2 focus:ring-primary pr-8 text-sm font-semibold rounded-lg"
+										/>
+										<span className="absolute right-3 text-xs font-semibold text-muted-foreground">
+											%
+										</span>
+									</div>
+								</div>
+							</div>
+
+							<div className="flex flex-col sm:flex-row justify-end gap-2 pt-2 border-t border-border/40">
+								{policy && (
+									<Button
+										type="button"
+										variant="ghost"
+										onClick={() => setIsConfiguring(false)}
+										className="h-9 text-xs px-4 rounded-lg hover:bg-[#1a1a21] w-full sm:w-auto"
+									>
+										Cancel
+									</Button>
+								)}
+								<Button
+									onClick={onSavePolicy}
+									disabled={isSavingPolicy}
+									className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold h-9 px-5 rounded-lg shadow-md transition-all w-full sm:w-auto"
+								>
+									{isSavingPolicy ? "Saving Policy..." : "Save Policy"}
+								</Button>
+							</div>
+						</div>
+					) : (
+						<div className="space-y-6">
+							<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4 rounded-xl border border-border bg-[#0d0d11]">
+								<div>
+									<div className="text-[10px] uppercase font-semibold text-muted-foreground tracking-wider">
+										Status
+									</div>
+									<div className="text-sm font-bold text-emerald-400 mt-1 flex items-center gap-1.5">
+										<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+										Active
+									</div>
+								</div>
+								<div>
+									<div className="text-[10px] uppercase font-semibold text-muted-foreground tracking-wider">
+										Scale Range
+									</div>
+									<div className="text-sm font-bold text-foreground mt-1">
+										{policy.minReplicas} – {policy.maxReplicas} replicas
+									</div>
+								</div>
+								<div>
+									<div className="text-[10px] uppercase font-semibold text-muted-foreground tracking-wider">
+										CPU Threshold
+									</div>
+									<div className="text-sm font-bold text-foreground mt-1">
+										{policy.cpuThresholdPercent}% utilization
+									</div>
+								</div>
+								<div>
+									<div className="text-[10px] uppercase font-semibold text-muted-foreground tracking-wider">
+										Cooldown
+									</div>
+									<div className="text-sm font-bold text-foreground mt-1">
+										{policy.cooldownSeconds || 60}s between actions
+									</div>
+								</div>
+							</div>
+
+							<div className="space-y-2 px-1">
+								<div className="flex justify-between text-[11px] text-muted-foreground">
+									<span>Min Scale ({policy.minReplicas} Container)</span>
+									<span className="text-primary font-medium">Trigger &gt; {policy.cpuThresholdPercent}% CPU</span>
+									<span>Max Scale ({policy.maxReplicas} Containers)</span>
+								</div>
+								<div className="relative h-2 rounded-full bg-[#15151c] overflow-hidden border border-border">
+									<div className="absolute top-0 bottom-0 left-0 right-0 bg-gradient-to-r from-primary/10 via-primary/30 to-primary/60" />
+									<div
+										className="absolute top-0 bottom-0 bg-primary/80 transition-all duration-500"
+										style={{
+											left: `${(policy.minReplicas / policy.maxReplicas) * 100}%`,
+											right: "0%",
+										}}
+									/>
+								</div>
+							</div>
+
+							<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pt-2 border-t border-border/40">
+								<Button
+									variant="outline"
+									onClick={() => setIsDisableOpen(true)}
+									className="border-destructive/30 hover:border-destructive hover:bg-destructive/10 text-destructive text-xs font-semibold h-9 px-4 rounded-lg flex items-center justify-center gap-1.5 transition-all w-full sm:w-auto"
+								>
+									<Trash2 className="h-4 w-4" /> Disable Auto-scaling
+								</Button>
+								<Button
+									onClick={() => setIsConfiguring(true)}
+									className="bg-secondary hover:bg-secondary/80 text-foreground font-semibold h-9 px-5 rounded-lg border border-border transition-all w-full sm:w-auto"
+								>
+									Edit Scaling Policy
+								</Button>
+							</div>
+						</div>
+					)}
+				</CardContent>
+			</Card>
+
+			<Dialog open={isDisableOpen} onOpenChange={setIsDisableOpen}>
+				<DialogContent className="sm:max-w-[400px] bg-card border-border text-foreground rounded-2xl shadow-2xl">
+					<DialogHeader>
+						<DialogTitle className="text-lg font-bold text-foreground">
+							Disable Auto-scaling
+						</DialogTitle>
+						<DialogDescription className="text-xs text-muted-foreground mt-2">
+							Are you sure you want to disable auto-scaling for this project? This will stop adjusting container replicas automatically based on CPU usage.
+						</DialogDescription>
+					</DialogHeader>
+					<DialogFooter className="flex justify-end gap-2 pt-4 border-t border-border/40">
+						<Button
+							variant="ghost"
+							onClick={() => setIsDisableOpen(false)}
+							className="h-9 text-xs px-4 rounded-lg hover:bg-[#1a1a21]"
+						>
+							Cancel
+						</Button>
+						<Button
+							onClick={onDeletePolicy}
+							className="bg-destructive hover:bg-destructive/90 text-destructive-foreground font-semibold text-xs h-9 px-4 rounded-lg transition-all"
+						>
+							Disable Scaling
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+		</>
+	);
+}
diff --git a/apps/web/src/components/project/scaling/ResourceLimitsCard.tsx b/apps/web/src/components/project/scaling/ResourceLimitsCard.tsx
new file mode 100644
index 0000000..55e890c
--- /dev/null
+++ b/apps/web/src/components/project/scaling/ResourceLimitsCard.tsx
@@ -0,0 +1,170 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../../ui/card";
+import { Input } from "../../ui/input";
+import { Button } from "../../ui/button";
+import { Badge } from "../../ui/badge";
+import { Cpu } from "lucide-react";
+
+export const PRESETS = [
+	{
+		name: "Starter",
+		cpu: "0.25",
+		memory: "256",
+		desc: "Shared CPU / 256MB",
+	},
+	{
+		name: "Standard",
+		cpu: "1",
+		memory: "512",
+		desc: "1 Core / 512MB",
+	},
+	{
+		name: "Professional",
+		cpu: "2",
+		memory: "1024",
+		desc: "2 Cores / 1GB",
+	},
+];
+
+interface ResourceLimitsCardProps {
+	cpuLimit: string;
+	setCpuLimit: (v: string) => void;
+	memoryLimitMb: string;
+	setMemoryLimitMb: (v: string) => void;
+	isSavingLimits: boolean;
+	onSaveLimits: () => Promise<void>;
+	hasLimits: boolean;
+}
+
+export function ResourceLimitsCard({
+	cpuLimit,
+	setCpuLimit,
+	memoryLimitMb,
+	setMemoryLimitMb,
+	isSavingLimits,
+	onSaveLimits,
+	hasLimits,
+}: ResourceLimitsCardProps) {
+	const matchedPreset = PRESETS.find(
+		(p) => p.cpu === cpuLimit && p.memory === memoryLimitMb,
+	);
+
+	return (
+		<Card className="bg-card/40 border-border backdrop-blur-sm">
+			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
+				<div className="space-y-1">
+					<CardTitle className="text-base font-bold flex items-center gap-2 text-foreground">
+						<Cpu className="h-5 w-5 text-primary" /> Resource Allocation
+					</CardTitle>
+					<p className="text-xs text-muted-foreground">
+						Set custom limits or select a package for containers.
+					</p>
+				</div>
+				{hasLimits ? (
+					<Badge
+						variant="outline"
+						className="border-primary/20 text-primary bg-primary/5 uppercase text-[10px]"
+					>
+						{matchedPreset ? matchedPreset.name : "Custom Limit"}
+					</Badge>
+				) : (
+					<Badge
+						variant="outline"
+						className="border-muted text-muted-foreground uppercase text-[10px]"
+					>
+						Unlimited
+					</Badge>
+				)}
+			</CardHeader>
+			<CardContent className="space-y-5">
+				<div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
+					{PRESETS.map((p) => {
+						const isSelected = cpuLimit === p.cpu && memoryLimitMb === p.memory;
+						return (
+							<button
+								key={p.name}
+								type="button"
+								onClick={() => {
+									setCpuLimit(p.cpu);
+									setMemoryLimitMb(p.memory);
+								}}
+								className={`flex flex-col items-start p-3 rounded-xl border text-left transition-all ${
+									isSelected
+										? "border-primary bg-primary/5 shadow-md shadow-primary/5"
+										: "border-border bg-[#0d0d11] hover:border-border/80 hover:bg-[#121217]"
+								}`}
+							>
+								<span className={`text-xs font-semibold ${isSelected ? "text-primary" : "text-foreground"}`}>
+									{p.name}
+								</span>
+								<span className="text-[10px] text-muted-foreground mt-0.5">
+									{p.desc}
+								</span>
+							</button>
+						);
+					})}
+				</div>
+
+				<div className="grid gap-4 sm:grid-cols-2">
+					<div className="grid gap-2">
+						<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+							CPU Limit (cores)
+						</label>
+						<div className="relative flex items-center">
+							<Input
+								type="number"
+								min={0}
+								step="0.1"
+								placeholder="No limit"
+								value={cpuLimit}
+								onChange={(e) => setCpuLimit(e.target.value)}
+								className="h-10 bg-[#0d0d11] border-input focus:ring-2 focus:ring-primary pr-14 text-sm font-semibold rounded-lg"
+							/>
+							<span className="absolute right-3 text-xs font-semibold text-muted-foreground">
+								cores
+							</span>
+						</div>
+					</div>
+					<div className="grid gap-2">
+						<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+							Memory Limit (MB)
+						</label>
+						<div className="relative flex items-center">
+							<Input
+								type="number"
+								min={0}
+								step="64"
+								placeholder="No limit"
+								value={memoryLimitMb}
+								onChange={(e) => setMemoryLimitMb(e.target.value)}
+								className="h-10 bg-[#0d0d11] border-input focus:ring-2 focus:ring-primary pr-12 text-sm font-semibold rounded-lg"
+							/>
+							<span className="absolute right-3 text-xs font-semibold text-muted-foreground">
+								MB
+							</span>
+						</div>
+					</div>
+				</div>
+
+				<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pt-2">
+					<button
+						type="button"
+						onClick={() => {
+							setCpuLimit("");
+							setMemoryLimitMb("");
+						}}
+						className="text-xs text-muted-foreground hover:text-foreground underline transition-colors text-left"
+					>
+						Clear Resource Limits
+					</button>
+					<Button
+						onClick={onSaveLimits}
+						disabled={isSavingLimits}
+						className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold h-9 px-5 rounded-lg shadow-md transition-all w-full sm:w-auto"
+					>
+						{isSavingLimits ? "Saving Limits..." : "Save Limits"}
+					</Button>
+				</div>
+			</CardContent>
+		</Card>
+	);
+}
diff --git a/apps/web/src/components/project/scaling/ScalingTab.tsx b/apps/web/src/components/project/scaling/ScalingTab.tsx
index 7f06c25..9b53bd9 100644
--- a/apps/web/src/components/project/scaling/ScalingTab.tsx
+++ b/apps/web/src/components/project/scaling/ScalingTab.tsx
@@ -1,39 +1,14 @@
 import { useQuery } from "@tanstack/react-query";
-import { Cpu, Sliders, Trash2, TrendingUp } from "lucide-react";
 import { useEffect, useState } from "react";
 import * as api from "../../../api/client";
 import { useProject } from "../../../hooks/useProjects";
-import { Badge } from "../../ui/badge";
-import { Button } from "../../ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "../../ui/card";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../../ui/dialog";
-import { Input } from "../../ui/input";
+import { AutoscalingPolicyCard } from "./AutoscalingPolicyCard";
+import { ResourceLimitsCard } from "./ResourceLimitsCard";
 
 interface ScalingTabProps {
 	projectId: string;
 }
 
-const PRESETS = [
-	{
-		name: "Starter",
-		cpu: "0.25",
-		memory: "256",
-		desc: "Shared CPU / 256MB",
-	},
-	{
-		name: "Standard",
-		cpu: "1",
-		memory: "512",
-		desc: "1 Core / 512MB",
-	},
-	{
-		name: "Professional",
-		cpu: "2",
-		memory: "1024",
-		desc: "2 Cores / 1GB",
-	},
-];
-
 export function ScalingTab({ projectId }: ScalingTabProps) {
 	const { data: project, refetch: refetchProject } = useProject(projectId);
 	const { data: policy, refetch } = useQuery({
@@ -104,307 +79,34 @@ export function ScalingTab({ projectId }: ScalingTabProps) {
 		setIsDisableScalingOpen(false);
 	};
 
-	const matchedPreset = PRESETS.find((p) => p.cpu === cpuLimit && p.memory === memoryLimitMb);
-
 	return (
 		<div className="space-y-6">
-			{/* Resource Limits Card */}
-			<Card className="bg-card/40 border-border backdrop-blur-sm">
-				<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
-					<div className="space-y-1">
-						<CardTitle className="text-base font-bold flex items-center gap-2 text-foreground">
-							<Cpu className="h-5 w-5 text-primary" /> Resource Allocation
-						</CardTitle>
-						<p className="text-xs text-muted-foreground">Set custom limits or select a package for containers.</p>
-					</div>
-					{project?.cpuLimit || project?.memoryLimitMb ? (
-						<Badge variant="outline" className="border-primary/20 text-primary bg-primary/5 uppercase text-[10px]">
-							{matchedPreset ? matchedPreset.name : "Custom Limit"}
-						</Badge>
-					) : (
-						<Badge variant="outline" className="border-muted text-muted-foreground uppercase text-[10px]">
-							Unlimited
-						</Badge>
-					)}
-				</CardHeader>
-				<CardContent className="space-y-5">
-					{/* Preset selection grid */}
-					<div className="grid grid-cols-3 gap-2">
-						{PRESETS.map((p) => {
-							const isSelected = cpuLimit === p.cpu && memoryLimitMb === p.memory;
-							return (
-								<button
-									key={p.name}
-									type="button"
-									onClick={() => {
-										setCpuLimit(p.cpu);
-										setMemoryLimitMb(p.memory);
-									}}
-									className={`flex flex-col items-start p-3 rounded-xl border text-left transition-all ${
-										isSelected
-											? "border-primary bg-primary/5 shadow-md shadow-primary/5"
-											: "border-border bg-[#0d0d11] hover:border-border/80 hover:bg-[#121217]"
-									}`}
-								>
-									<span className={`text-xs font-semibold ${isSelected ? "text-primary" : "text-foreground"}`}>
-										{p.name}
-									</span>
-									<span className="text-[10px] text-muted-foreground mt-0.5">{p.desc}</span>
-								</button>
-							);
-						})}
-					</div>
-
-					<div className="grid gap-4 sm:grid-cols-2">
-						<div className="grid gap-2">
-							<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-								CPU Limit (cores)
-							</label>
-							<div className="relative flex items-center">
-								<Input
-									type="number"
-									min={0}
-									step="0.1"
-									placeholder="No limit"
-									value={cpuLimit}
-									onChange={(e) => setCpuLimit(e.target.value)}
-									className="h-10 bg-[#0d0d11] border-input focus:ring-2 focus:ring-primary pr-14 text-sm font-semibold rounded-lg"
-								/>
-								<span className="absolute right-3 text-xs font-semibold text-muted-foreground">cores</span>
-							</div>
-						</div>
-						<div className="grid gap-2">
-							<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-								Memory Limit (MB)
-							</label>
-							<div className="relative flex items-center">
-								<Input
-									type="number"
-									min={0}
-									step="64"
-									placeholder="No limit"
-									value={memoryLimitMb}
-									onChange={(e) => setMemoryLimitMb(e.target.value)}
-									className="h-10 bg-[#0d0d11] border-input focus:ring-2 focus:ring-primary pr-12 text-sm font-semibold rounded-lg"
-								/>
-								<span className="absolute right-3 text-xs font-semibold text-muted-foreground">MB</span>
-							</div>
-						</div>
-					</div>
-
-					<div className="flex items-center justify-between pt-2">
-						<button
-							type="button"
-							onClick={() => {
-								setCpuLimit("");
-								setMemoryLimitMb("");
-							}}
-							className="text-xs text-muted-foreground hover:text-foreground underline transition-colors"
-						>
-							Clear Resource Limits
-						</button>
-						<Button
-							onClick={saveLimits}
-							disabled={isSavingLimits}
-							className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold h-9 px-5 rounded-lg shadow-md transition-all"
-						>
-							{isSavingLimits ? "Saving Limits..." : "Save Limits"}
-						</Button>
-					</div>
-				</CardContent>
-			</Card>
-
-			{/* Auto-scaling Policy Card */}
-			<Card className="bg-card/40 border-border backdrop-blur-sm">
-				<CardHeader className="pb-4">
-					<CardTitle className="text-base font-bold flex items-center gap-2 text-foreground">
-						<TrendingUp className="h-5 w-5 text-primary" /> Auto-scaling Policy
-					</CardTitle>
-				</CardHeader>
-				<CardContent>
-					{!policy && !isConfiguring ? (
-						<div className="flex flex-col items-center justify-center py-6 text-center">
-							<div className="w-12 h-12 rounded-xl bg-primary/10 text-primary flex items-center justify-center mb-4 border border-primary/15">
-								<Sliders className="h-5 w-5" />
-							</div>
-							<h4 className="text-sm font-semibold text-foreground mb-1">Auto-scaling is not configured</h4>
-							<p className="text-xs text-muted-foreground max-w-sm mb-4 leading-relaxed">
-								Automatically adjust replica counts between min/max limits based on average CPU usage. Perfect for load
-								spikes.
-							</p>
-							<Button
-								onClick={() => setIsConfiguring(true)}
-								className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold flex items-center gap-1.5 px-4 h-9 rounded-lg transition-all shadow-md"
-							>
-								Configure Auto-scaling
-							</Button>
-						</div>
-					) : isConfiguring || !policy ? (
-						<div className="space-y-5">
-							<div className="grid gap-4 sm:grid-cols-3">
-								<div className="grid gap-2">
-									<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-										Min Replicas
-									</label>
-									<Input
-										type="number"
-										min={1}
-										value={minR}
-										onChange={(e) => setMinR(Number(e.target.value))}
-										className="h-10 bg-[#0d0d11] border-input focus:ring-2 focus:ring-primary text-sm font-semibold rounded-lg"
-									/>
-								</div>
-								<div className="grid gap-2">
-									<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-										Max Replicas
-									</label>
-									<Input
-										type="number"
-										min={1}
-										value={maxR}
-										onChange={(e) => setMaxR(Number(e.target.value))}
-										className="h-10 bg-[#0d0d11] border-input focus:ring-2 focus:ring-primary text-sm font-semibold rounded-lg"
-									/>
-								</div>
-								<div className="grid gap-2">
-									<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-										CPU Target %
-									</label>
-									<div className="relative flex items-center">
-										<Input
-											type="number"
-											min={10}
-											max={100}
-											value={cpuT}
-											onChange={(e) => setCpuT(Number(e.target.value))}
-											className="h-10 bg-[#0d0d11] border-input focus:ring-2 focus:ring-primary pr-8 text-sm font-semibold rounded-lg"
-										/>
-										<span className="absolute right-3 text-xs font-semibold text-muted-foreground">%</span>
-									</div>
-								</div>
-							</div>
-
-							<div className="flex justify-end gap-2 pt-2 border-t border-border/40">
-								{policy && (
-									<Button
-										type="button"
-										variant="ghost"
-										onClick={() => setIsConfiguring(false)}
-										className="h-9 text-xs px-4 rounded-lg hover:bg-[#1a1a21]"
-									>
-										Cancel
-									</Button>
-								)}
-								<Button
-									onClick={savePolicy}
-									disabled={isSavingPolicy}
-									className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold h-9 px-5 rounded-lg shadow-md transition-all"
-								>
-									{isSavingPolicy ? "Saving Policy..." : "Save Policy"}
-								</Button>
-							</div>
-						</div>
-					) : (
-						<div className="space-y-6">
-							<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4 rounded-xl border border-border bg-[#0d0d11]">
-								<div>
-									<div className="text-[10px] uppercase font-semibold text-muted-foreground tracking-wider">Status</div>
-									<div className="text-sm font-bold text-emerald-400 mt-1 flex items-center gap-1.5">
-										<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
-										Active
-									</div>
-								</div>
-								<div>
-									<div className="text-[10px] uppercase font-semibold text-muted-foreground tracking-wider">
-										Scale Range
-									</div>
-									<div className="text-sm font-bold text-foreground mt-1">
-										{policy.minReplicas} – {policy.maxReplicas} replicas
-									</div>
-								</div>
-								<div>
-									<div className="text-[10px] uppercase font-semibold text-muted-foreground tracking-wider">
-										CPU Threshold
-									</div>
-									<div className="text-sm font-bold text-foreground mt-1">
-										{policy.cpuThresholdPercent}% utilization
-									</div>
-								</div>
-								<div>
-									<div className="text-[10px] uppercase font-semibold text-muted-foreground tracking-wider">
-										Cooldown
-									</div>
-									<div className="text-sm font-bold text-foreground mt-1">
-										{policy.cooldownSeconds}s between actions
-									</div>
-								</div>
-							</div>
-
-							{/* Visual scale range gauge */}
-							<div className="space-y-2 px-1">
-								<div className="flex justify-between text-[11px] text-muted-foreground">
-									<span>Min Scale ({policy.minReplicas} Container)</span>
-									<span className="text-primary font-medium">Trigger &gt; {policy.cpuThresholdPercent}% CPU</span>
-									<span>Max Scale ({policy.maxReplicas} Containers)</span>
-								</div>
-								<div className="relative h-2 rounded-full bg-[#15151c] overflow-hidden border border-border">
-									<div className="absolute top-0 bottom-0 left-0 right-0 bg-gradient-to-r from-primary/10 via-primary/30 to-primary/60" />
-									<div
-										className="absolute top-0 bottom-0 bg-primary/80 transition-all duration-500"
-										style={{
-											left: `${(policy.minReplicas / policy.maxReplicas) * 100}%`,
-											right: "0%",
-										}}
-									/>
-								</div>
-							</div>
-
-							<div className="flex items-center justify-between pt-2 border-t border-border/40">
-								<Button
-									variant="outline"
-									onClick={() => setIsDisableScalingOpen(true)}
-									className="border-destructive/30 hover:border-destructive hover:bg-destructive/10 text-destructive text-xs font-semibold h-9 px-4 rounded-lg flex items-center gap-1.5 transition-all"
-								>
-									<Trash2 className="h-4 w-4" /> Disable Auto-scaling
-								</Button>
-								<Button
-									onClick={() => setIsConfiguring(true)}
-									className="bg-secondary hover:bg-secondary/80 text-foreground font-semibold h-9 px-5 rounded-lg border border-border transition-all"
-								>
-									Edit Scaling Policy
-								</Button>
-							</div>
-						</div>
-					)}
-				</CardContent>
-			</Card>
-
-			<Dialog open={isDisableScalingOpen} onOpenChange={setIsDisableScalingOpen}>
-				<DialogContent className="sm:max-w-[400px] bg-card border-border text-foreground rounded-2xl shadow-2xl">
-					<DialogHeader>
-						<DialogTitle className="text-lg font-bold text-foreground">Disable Auto-scaling</DialogTitle>
-						<DialogDescription className="text-xs text-muted-foreground mt-2">
-							Are you sure you want to disable auto-scaling for this project? This will stop adjusting container
-							replicas automatically based on CPU usage.
-						</DialogDescription>
-					</DialogHeader>
-					<DialogFooter className="flex justify-end gap-2 pt-4 border-t border-border/40">
-						<Button
-							variant="ghost"
-							onClick={() => setIsDisableScalingOpen(false)}
-							className="h-9 text-xs px-4 rounded-lg hover:bg-[#1a1a21]"
-						>
-							Cancel
-						</Button>
-						<Button
-							onClick={deletePolicy}
-							className="bg-destructive hover:bg-destructive/90 text-destructive-foreground font-semibold text-xs h-9 px-4 rounded-lg transition-all"
-						>
-							Disable Scaling
-						</Button>
-					</DialogFooter>
-				</DialogContent>
-			</Dialog>
+			<ResourceLimitsCard
+				cpuLimit={cpuLimit}
+				setCpuLimit={setCpuLimit}
+				memoryLimitMb={memoryLimitMb}
+				setMemoryLimitMb={setMemoryLimitMb}
+				isSavingLimits={isSavingLimits}
+				onSaveLimits={saveLimits}
+				hasLimits={Boolean(project?.cpuLimit || project?.memoryLimitMb)}
+			/>
+
+			<AutoscalingPolicyCard
+				policy={policy}
+				isConfiguring={isConfiguring}
+				setIsConfiguring={setIsConfiguring}
+				minR={minR}
+				setMinR={setMinR}
+				maxR={maxR}
+				setMaxR={setMaxR}
+				cpuT={cpuT}
+				setCpuT={setCpuT}
+				isSavingPolicy={isSavingPolicy}
+				onSavePolicy={savePolicy}
+				onDeletePolicy={deletePolicy}
+				isDisableOpen={isDisableScalingOpen}
+				setIsDisableOpen={setIsDisableScalingOpen}
+			/>
 		</div>
 	);
 }
diff --git a/apps/web/src/components/project/settings/DeleteProjectCard.tsx b/apps/web/src/components/project/settings/DeleteProjectCard.tsx
index 05ea34a..3e0406e 100644
--- a/apps/web/src/components/project/settings/DeleteProjectCard.tsx
+++ b/apps/web/src/components/project/settings/DeleteProjectCard.tsx
@@ -42,7 +42,7 @@ export function DeleteProjectCard({ projectId }: DeleteProjectCardProps) {
 	return (
 		<Card className="bg-[#0c0c0e]/60 border-red-500/20 rounded-xl overflow-hidden">
 			<CardContent className="p-6 space-y-4">
-				<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-[#222227] pb-5 space-y-4">
+				<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-[#222227] pb-5">
 					<div className="flex items-start gap-3">
 						<div className="p-2 rounded-lg bg-red-500/10 text-red-400 border border-red-500/20">
 							<Trash2 className="h-4 w-4" />
@@ -58,7 +58,7 @@ export function DeleteProjectCard({ projectId }: DeleteProjectCardProps) {
 					<Button
 						variant="destructive"
 						onClick={openDeleteModal}
-						className="bg-red-600 hover:bg-red-700 text-white font-semibold text-xs h-9 px-4 rounded-lg flex items-center gap-1.5 transition-all shadow-md active:scale-95 shrink-0"
+						className="bg-red-600 hover:bg-red-700 text-white font-semibold text-xs h-9 px-4 rounded-lg flex items-center justify-center gap-1.5 transition-all shadow-md active:scale-95 shrink-0 w-full sm:w-auto"
 					>
 						<Trash2 className="h-3.5 w-3.5" />
 						Delete Project
diff --git a/apps/web/src/components/project/settings/ProjectSettingsTab.tsx b/apps/web/src/components/project/settings/ProjectSettingsTab.tsx
index 94501da..e0350fd 100644
--- a/apps/web/src/components/project/settings/ProjectSettingsTab.tsx
+++ b/apps/web/src/components/project/settings/ProjectSettingsTab.tsx
@@ -127,24 +127,24 @@ export function ProjectSettingsTab({ projectId }: ProjectSettingsTabProps) {
 			<Card className="bg-[#0c0c0e]/60 border-[#222227] rounded-xl overflow-hidden">
 				<CardContent className="p-6">
 					<form onSubmit={handleSave} className="space-y-6">
-						<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-[#222227] pb-5">
+						<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-5 border-b border-[#222227]">
 							<div>
 								<h3 className="text-zinc-200 font-bold text-base">Build & Execution Settings</h3>
 								<p className="text-zinc-500 text-xs mt-1">
 									Configure how Dequel resolves, builds, and launches your codebase.
 								</p>
 							</div>
-							<div className="flex items-center gap-3">
+							<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
 								{saveSuccess && (
 									<div className="flex items-center gap-1.5 text-xs text-emerald-400 font-medium">
-										<CheckCircle className="h-4 w-4" />
+										<CheckCircle className="h-4 w-4 shrink-0" />
 										Settings saved successfully
 									</div>
 								)}
 								<Button
 									type="submit"
 									disabled={updateProjectMutation.isPending}
-									className="bg-orange-500 hover:bg-orange-600 disabled:bg-orange-500/50 text-white font-semibold text-xs h-9 px-4 rounded-lg flex items-center gap-1.5 transition-all shadow-md active:scale-95"
+									className="bg-orange-500 hover:bg-orange-600 disabled:bg-orange-500/50 text-white font-semibold text-xs h-9 px-4 rounded-lg flex items-center justify-center gap-1.5 transition-all shadow-md active:scale-95 w-full sm:w-auto"
 								>
 									<Save className="h-3.5 w-3.5" />
 									{updateProjectMutation.isPending ? "Saving..." : "Save Settings"}
diff --git a/apps/web/src/components/project/volumes/VolumesTab.tsx b/apps/web/src/components/project/volumes/VolumesTab.tsx
index b794b00..8917dda 100644
--- a/apps/web/src/components/project/volumes/VolumesTab.tsx
+++ b/apps/web/src/components/project/volumes/VolumesTab.tsx
@@ -55,7 +55,6 @@ export function VolumesTab({ projectId }: VolumesTabProps) {
 
 	return (
 		<div className="space-y-6">
-			{/* Redeployment Warning Banner */}
 			{showRedeployPrompt && latestDeployment && (
 				<div className="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border border-amber-500/20 bg-amber-500/5 gap-3 animate-in fade-in-0 duration-200">
 					<div className="flex items-start gap-3">
@@ -110,7 +109,7 @@ export function VolumesTab({ projectId }: VolumesTabProps) {
 			)}
 
 			{volumes.length === 0 ? (
-				<div className="flex flex-col items-center justify-center border border-dashed border-border rounded-2xl p-12 text-center bg-card/20 backdrop-blur-sm relative overflow-hidden group min-h-[350px]">
+				<div className="flex flex-col items-center justify-center border border-dashed border-border rounded-2xl p-6 sm:p-12 text-center bg-card/20 backdrop-blur-sm relative overflow-hidden group min-h-[350px]">
 					<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent opacity-50 pointer-events-none" />
 					<div className="relative w-16 h-16 rounded-2xl bg-gradient-to-b from-[#1a1a1f] to-[#121215] border border-border flex items-center justify-center mb-6 shadow-xl group-hover:border-primary/30 transition-colors duration-300">
 						<div className="absolute inset-0 bg-primary/10 rounded-2xl blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
@@ -130,64 +129,89 @@ export function VolumesTab({ projectId }: VolumesTabProps) {
 				</div>
 			) : (
 				<div className="space-y-4">
-					<div className="flex items-center justify-between">
+					<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
 						<div>
 							<h2 className="text-lg font-semibold text-foreground">Persistent Volumes</h2>
 							<p className="text-sm text-muted-foreground">Disk volumes mounted to container runtimes.</p>
 						</div>
 						<Button
 							onClick={() => setIsAddOpen(true)}
-							className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold flex items-center gap-1.5 px-4 h-9 rounded-xl transition-all text-xs shadow-md"
+							className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold flex items-center justify-center gap-1.5 px-4 h-9 rounded-xl transition-all text-xs shadow-md w-full sm:w-auto"
 						>
 							<Plus className="h-4.5 w-4.5" /> Add Volume
 						</Button>
 					</div>
 
-					<div className="rounded-xl border border-border bg-card/35 backdrop-blur-sm overflow-hidden overflow-x-auto">
-						<Table className="min-w-[600px] md:min-w-full">
-							<TableHeader className="bg-[#0b0b0f]/50">
-								<TableRow className="border-border hover:bg-transparent">
-									<TableHead className="text-xs font-semibold py-3">Mount Path</TableHead>
-									<TableHead className="text-xs font-semibold py-3">Docker Volume Name</TableHead>
-									<TableHead className="text-xs font-semibold py-3">Created</TableHead>
-									<TableHead className="w-12 text-right pr-6"></TableHead>
-								</TableRow>
-							</TableHeader>
-							<TableBody>
-								{volumes.map((v) => (
-									<TableRow key={v.id} className="border-border hover:bg-[#121217]/30 group transition-all">
-										<TableCell className="font-mono text-sm py-3.5 font-semibold text-foreground">
+					<div className="rounded-xl border border-border bg-card/35 backdrop-blur-sm overflow-hidden">
+						<div className="md:hidden divide-y divide-border">
+							{volumes.map((v) => (
+								<div key={v.id} className="p-3.5 space-y-2">
+									<div className="flex items-center justify-between gap-2">
+										<span className="font-mono text-sm font-semibold text-foreground break-all">
 											{v.mountPath}
-										</TableCell>
-										<TableCell className="font-mono text-xs py-3.5 text-muted-foreground/75">
-											{v.dockerVolumeName ?? "—"}
-										</TableCell>
-										<TableCell className="text-muted-foreground text-xs py-3.5">
-											{new Date(v.createdAt).toLocaleDateString(undefined, {
-												year: "numeric",
-												month: "short",
-												day: "numeric",
-											})}
-										</TableCell>
-										<TableCell className="py-3.5 pr-6 text-right">
-											<Button
-												variant="ghost"
-												size="icon"
-												className="h-7 w-7 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-md transition-all opacity-80 group-hover:opacity-100"
-												onClick={() => setDeletingVolId(v.id)}
-											>
-												<Trash2 className="h-3.5 w-3.5" />
-											</Button>
-										</TableCell>
+										</span>
+										<Button
+											variant="ghost"
+											size="icon"
+											className="h-8 w-8 text-muted-foreground hover:text-destructive shrink-0"
+											onClick={() => setDeletingVolId(v.id)}
+										>
+											<Trash2 className="h-3.5 w-3.5" />
+										</Button>
+									</div>
+									<div className="flex items-center justify-between text-xs text-muted-foreground font-mono">
+										<span className="truncate max-w-[180px]">{v.dockerVolumeName ?? "—"}</span>
+										<span className="text-[11px]">{new Date(v.createdAt).toLocaleDateString()}</span>
+									</div>
+								</div>
+							))}
+						</div>
+
+						<div className="hidden md:block overflow-x-auto">
+							<Table className="w-full">
+								<TableHeader className="bg-[#0b0b0f]/50">
+									<TableRow className="border-border hover:bg-transparent">
+										<TableHead className="text-xs font-semibold py-3">Mount Path</TableHead>
+										<TableHead className="text-xs font-semibold py-3">Docker Volume Name</TableHead>
+										<TableHead className="text-xs font-semibold py-3">Created</TableHead>
+										<TableHead className="w-12 text-right pr-6"></TableHead>
 									</TableRow>
-								))}
-							</TableBody>
-						</Table>
+								</TableHeader>
+								<TableBody>
+									{volumes.map((v) => (
+										<TableRow key={v.id} className="border-border hover:bg-[#121217]/30 group transition-all">
+											<TableCell className="font-mono text-sm py-3.5 font-semibold text-foreground">
+												{v.mountPath}
+											</TableCell>
+											<TableCell className="font-mono text-xs py-3.5 text-muted-foreground/75">
+												{v.dockerVolumeName ?? "—"}
+											</TableCell>
+											<TableCell className="text-muted-foreground text-xs py-3.5">
+												{new Date(v.createdAt).toLocaleDateString(undefined, {
+													year: "numeric",
+													month: "short",
+													day: "numeric",
+												})}
+											</TableCell>
+											<TableCell className="py-3.5 pr-6 text-right">
+												<Button
+													variant="ghost"
+													size="icon"
+													className="h-7 w-7 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-md transition-all opacity-80 group-hover:opacity-100"
+													onClick={() => setDeletingVolId(v.id)}
+												>
+													<Trash2 className="h-3.5 w-3.5" />
+												</Button>
+											</TableCell>
+										</TableRow>
+									))}
+								</TableBody>
+							</Table>
+						</div>
 					</div>
 				</div>
 			)}
 
-			{/* Add Volume Dialog */}
 			<Dialog open={isAddOpen} onOpenChange={setIsAddOpen}>
 				<DialogContent className="sm:max-w-[420px] bg-card border-border text-foreground rounded-2xl shadow-2xl">
 					<DialogHeader>
@@ -232,7 +256,6 @@ export function VolumesTab({ projectId }: VolumesTabProps) {
 				</DialogContent>
 			</Dialog>
 
-			{/* Delete Volume Confirmation Dialog */}
 			<Dialog open={deletingVolId !== null} onOpenChange={(open) => !open && setDeletingVolId(null)}>
 				<DialogContent className="sm:max-w-[400px] bg-card border-border text-foreground rounded-2xl shadow-2xl">
 					<DialogHeader>
diff --git a/apps/web/src/components/settings/ApiKeysSection.tsx b/apps/web/src/components/settings/ApiKeysSection.tsx
index 634bae1..2296cc6 100644
--- a/apps/web/src/components/settings/ApiKeysSection.tsx
+++ b/apps/web/src/components/settings/ApiKeysSection.tsx
@@ -222,53 +222,78 @@ export function ApiKeysSection() {
 					</div>
 				) : (
 					<div className="rounded-xl border border-border/60 overflow-hidden bg-card/30">
-						<Table>
-							<TableHeader className="bg-muted/40">
-								<TableRow className="border-border/60 hover:bg-transparent">
-									<TableHead className="text-xs font-semibold">Token Label</TableHead>
-									<TableHead className="text-xs font-semibold">Key Hash</TableHead>
-									<TableHead className="text-xs font-semibold">Created Date</TableHead>
-									<TableHead className="text-xs font-semibold text-right">Actions</TableHead>
-								</TableRow>
-							</TableHeader>
-							<TableBody>
-								{apiKeys.map((k) => (
-									<TableRow key={k.id} className="border-border/40 hover:bg-muted/20">
-										<TableCell className="font-medium text-foreground text-xs py-3.5">
-											<div className="flex items-center gap-2">
-												<div className="h-2 w-2 rounded-full bg-emerald-500" />
-												<span>{k.name}</span>
-											</div>
-										</TableCell>
-										<TableCell className="font-mono text-xs text-muted-foreground py-3.5">
-											<Badge
-												variant="outline"
-												className="font-mono text-[11px] bg-black/40 text-zinc-400 border-border/60"
-											>
-												dequel_sec_{k.keyHash?.slice(0, 8)}...
-											</Badge>
-										</TableCell>
-										<TableCell className="text-muted-foreground text-xs py-3.5">
-											{new Date(k.createdAt).toLocaleDateString(undefined, {
-												year: "numeric",
-												month: "short",
-												day: "numeric",
-											})}
-										</TableCell>
-										<TableCell className="text-right py-3.5">
-											<Button
-												variant="ghost"
-												size="icon"
-												className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg"
-												onClick={() => setDeletingKeyId(k.id)}
-											>
-												<Trash2 className="h-4 w-4" />
-											</Button>
-										</TableCell>
+						<div className="md:hidden divide-y divide-border/40">
+							{apiKeys.map((k) => (
+								<div key={k.id} className="p-3.5 flex items-center justify-between gap-3">
+									<div className="space-y-1 min-w-0">
+										<div className="flex items-center gap-2">
+											<div className="h-2 w-2 rounded-full bg-emerald-500 shrink-0" />
+											<p className="font-medium text-sm text-foreground truncate">{k.name}</p>
+										</div>
+										<p className="font-mono text-xs text-muted-foreground">dequel_sec_{k.keyHash?.slice(0, 8)}...</p>
+										<p className="text-[11px] text-muted-foreground/70">{new Date(k.createdAt).toLocaleDateString()}</p>
+									</div>
+									<Button
+										variant="ghost"
+										size="icon"
+										className="h-8 w-8 text-muted-foreground hover:text-destructive shrink-0"
+										onClick={() => setDeletingKeyId(k.id)}
+									>
+										<Trash2 className="h-3.5 w-3.5" />
+									</Button>
+								</div>
+							))}
+						</div>
+
+						<div className="hidden md:block overflow-x-auto">
+							<Table className="w-full">
+								<TableHeader className="bg-muted/40">
+									<TableRow className="border-border/60 hover:bg-transparent">
+										<TableHead className="text-xs font-semibold">Token Label</TableHead>
+										<TableHead className="text-xs font-semibold">Key Hash</TableHead>
+										<TableHead className="text-xs font-semibold">Created Date</TableHead>
+										<TableHead className="text-xs font-semibold text-right">Actions</TableHead>
 									</TableRow>
-								))}
-							</TableBody>
-						</Table>
+								</TableHeader>
+								<TableBody>
+									{apiKeys.map((k) => (
+										<TableRow key={k.id} className="border-border/40 hover:bg-muted/20">
+											<TableCell className="font-medium text-foreground text-xs py-3.5">
+												<div className="flex items-center gap-2">
+													<div className="h-2 w-2 rounded-full bg-emerald-500" />
+													<span>{k.name}</span>
+												</div>
+											</TableCell>
+											<TableCell className="font-mono text-xs text-muted-foreground py-3.5">
+												<Badge
+													variant="outline"
+													className="font-mono text-[11px] bg-black/40 text-zinc-400 border-border/60"
+												>
+													dequel_sec_{k.keyHash?.slice(0, 8)}...
+												</Badge>
+											</TableCell>
+											<TableCell className="text-muted-foreground text-xs py-3.5">
+												{new Date(k.createdAt).toLocaleDateString(undefined, {
+													year: "numeric",
+													month: "short",
+													day: "numeric",
+												})}
+											</TableCell>
+											<TableCell className="text-right py-3.5">
+												<Button
+													variant="ghost"
+													size="icon"
+													className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg"
+													onClick={() => setDeletingKeyId(k.id)}
+												>
+													<Trash2 className="h-4 w-4" />
+												</Button>
+											</TableCell>
+										</TableRow>
+									))}
+								</TableBody>
+							</Table>
+						</div>
 					</div>
 				)}
 			</CardContent>
diff --git a/apps/web/src/components/settings/DeleteProjectsSection.tsx b/apps/web/src/components/settings/DeleteProjectsSection.tsx
index b3ffab6..d33b51b 100644
--- a/apps/web/src/components/settings/DeleteProjectsSection.tsx
+++ b/apps/web/src/components/settings/DeleteProjectsSection.tsx
@@ -1,14 +1,14 @@
-import { useState, useMemo } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { AlertTriangle, FolderX, GitBranch, Globe, Search, Trash2 } from "lucide-react";
+import { useMemo, useState } from "react";
+import * as api from "../../api/client";
+import type { Project } from "../../types";
+import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog";
 import { Input } from "../ui/input";
-import { Badge } from "../ui/badge";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "../ui/dialog";
-import { Trash2, AlertTriangle, Search, FolderX, Globe, GitBranch } from "lucide-react";
-import * as api from "../../api/client";
-import type { Project } from "../../types";
 
 export function DeleteProjectsSection() {
 	const queryClient = useQueryClient();
@@ -114,83 +114,145 @@ export function DeleteProjectsSection() {
 						No projects matching &ldquo;{searchQuery}&rdquo;.
 					</div>
 				) : (
-					<div className="rounded-xl border border-border/80 overflow-hidden overflow-x-auto bg-black/20">
-						<Table className="min-w-[600px] md:min-w-full">
-							<TableHeader>
-								<TableRow className="border-border/60 hover:bg-transparent">
-									<TableHead className="text-xs font-semibold">Project</TableHead>
-									<TableHead className="text-xs font-semibold">Type / Source</TableHead>
-									<TableHead className="text-xs font-semibold">Branch / Domain</TableHead>
-									<TableHead className="text-xs font-semibold">Created</TableHead>
-									<TableHead className="w-24 text-right"></TableHead>
-								</TableRow>
-							</TableHeader>
-							<TableBody>
-								{filteredProjects.map((p) => (
-									<TableRow key={p.id} className="border-border/40 hover:bg-white/[0.02]">
-										<TableCell className="font-medium text-xs">
-											<div className="space-y-0.5">
-												<span className="font-bold text-foreground">{p.name}</span>
-												{p.description && (
-													<p className="text-[11px] text-muted-foreground line-clamp-1">{p.description}</p>
-												)}
-											</div>
-										</TableCell>
-										<TableCell>
-											<div className="flex items-center gap-1.5 flex-wrap">
-												<Badge
-													variant="outline"
-													className="text-[10px] uppercase font-mono py-0 px-1.5 bg-muted/20 border-border"
-												>
-													{p.projectType || "web"}
-												</Badge>
-												{p.repoUrl ? (
-													<span
-														className="text-[11px] text-muted-foreground font-mono truncate max-w-[160px]"
-														title={p.repoUrl}
-													>
-														{p.repoUrl.replace(/https?:\/\/github\.com\//, "")}
-													</span>
-												) : (
-													<span className="text-[11px] text-muted-foreground">Upload / Archive</span>
-												)}
-											</div>
-										</TableCell>
-										<TableCell>
-											<div className="space-y-0.5 text-xs">
-												{p.repoBranch && (
-													<div className="flex items-center gap-1 text-muted-foreground font-mono text-[11px]">
-														<GitBranch className="h-3 w-3 text-muted-foreground/70" />
-														<span>{p.repoBranch}</span>
-													</div>
-												)}
-												{p.baseDomain && (
-													<div className="flex items-center gap-1 text-muted-foreground font-mono text-[11px]">
-														<Globe className="h-3 w-3 text-muted-foreground/70" />
-														<span className="truncate max-w-[140px]">{p.baseDomain}</span>
-													</div>
-												)}
-												{!p.repoBranch && !p.baseDomain && <span className="text-muted-foreground/60">—</span>}
+					<div className="rounded-xl border border-border/80 overflow-hidden bg-black/20">
+						{/* Mobile Card List */}
+						<div className="md:hidden divide-y divide-border/40">
+							{filteredProjects.map((p) => (
+								<div key={p.id} className="p-3.5 space-y-2.5">
+									<div className="flex items-start justify-between gap-2">
+										<div className="min-w-0">
+											<span className="font-bold text-foreground text-sm truncate block">{p.name}</span>
+											{p.description && (
+												<p className="text-[11px] text-muted-foreground line-clamp-1 mt-0.5">{p.description}</p>
+											)}
+										</div>
+										<Badge
+											variant="outline"
+											className="text-[10px] uppercase font-mono py-0 px-1.5 bg-muted/20 border-border shrink-0"
+										>
+											{p.projectType || "web"}
+										</Badge>
+									</div>
+
+									<div className="space-y-1 text-xs">
+										{p.repoUrl && (
+											<div className="text-[11px] text-muted-foreground font-mono truncate">
+												{p.repoUrl.replace(/https?:\/\/github\.com\//, "")}
 											</div>
-										</TableCell>
-										<TableCell className="text-xs text-muted-foreground">
+										)}
+										<div className="flex flex-wrap items-center gap-2">
+											{p.repoBranch && (
+												<div className="flex items-center gap-1 text-muted-foreground font-mono text-[11px]">
+													<GitBranch className="h-3 w-3 text-muted-foreground/70" />
+													<span>{p.repoBranch}</span>
+												</div>
+											)}
+											{p.baseDomain && (
+												<div className="flex items-center gap-1 text-muted-foreground font-mono text-[11px]">
+													<Globe className="h-3 w-3 text-muted-foreground/70" />
+													<span className="truncate max-w-[140px]">{p.baseDomain}</span>
+												</div>
+											)}
+										</div>
+									</div>
+
+									<div className="flex items-center justify-between pt-1 border-t border-border/30">
+										<span className="text-[11px] text-muted-foreground">
 											{p.createdAt ? new Date(p.createdAt).toLocaleDateString() : "—"}
-										</TableCell>
-										<TableCell className="text-right">
-											<Button
-												variant="ghost"
-												size="sm"
-												onClick={() => openDeleteModal(p)}
-												className="h-8 px-2.5 text-xs text-red-400 hover:text-red-300 hover:bg-red-500/10 border border-transparent hover:border-red-500/20 rounded-lg transition-colors flex items-center gap-1.5 ml-auto"
-											>
-												<Trash2 className="h-3.5 w-3.5" />
-												<span>Delete</span>
-											</Button>
-										</TableCell>
+										</span>
+										<Button
+											variant="ghost"
+											size="sm"
+											onClick={() => openDeleteModal(p)}
+											className="h-7 px-2.5 text-xs text-red-400 hover:text-red-300 hover:bg-red-500/10 border border-transparent hover:border-red-500/20 rounded-lg transition-colors flex items-center gap-1"
+										>
+											<Trash2 className="h-3.5 w-3.5" />
+											<span>Delete</span>
+										</Button>
+									</div>
+								</div>
+							))}
+						</div>
+
+						{/* Desktop Table */}
+						<div className="hidden md:block overflow-x-auto">
+							<Table className="min-w-[600px] md:min-w-full">
+								<TableHeader>
+									<TableRow className="border-border/60 hover:bg-transparent">
+										<TableHead className="text-xs font-semibold">Project</TableHead>
+										<TableHead className="text-xs font-semibold">Type / Source</TableHead>
+										<TableHead className="text-xs font-semibold">Branch / Domain</TableHead>
+										<TableHead className="text-xs font-semibold">Created</TableHead>
+										<TableHead className="w-24 text-right"></TableHead>
 									</TableRow>
-								))}
-							</TableBody>
-						</Table>
+								</TableHeader>
+								<TableBody>
+									{filteredProjects.map((p) => (
+										<TableRow key={p.id} className="border-border/40 hover:bg-white/[0.02]">
+											<TableCell className="font-medium text-xs">
+												<div className="space-y-0.5">
+													<span className="font-bold text-foreground">{p.name}</span>
+													{p.description && (
+														<p className="text-[11px] text-muted-foreground line-clamp-1">{p.description}</p>
+													)}
+												</div>
+											</TableCell>
+											<TableCell>
+												<div className="flex items-center gap-1.5 flex-wrap">
+													<Badge
+														variant="outline"
+														className="text-[10px] uppercase font-mono py-0 px-1.5 bg-muted/20 border-border"
+													>
+														{p.projectType || "web"}
+													</Badge>
+													{p.repoUrl ? (
+														<span
+															className="text-[11px] text-muted-foreground font-mono truncate max-w-[160px]"
+															title={p.repoUrl}
+														>
+															{p.repoUrl.replace(/https?:\/\/github\.com\//, "")}
+														</span>
+													) : (
+														<span className="text-[11px] text-muted-foreground">Upload / Archive</span>
+													)}
+												</div>
+											</TableCell>
+											<TableCell>
+												<div className="space-y-0.5 text-xs">
+													{p.repoBranch && (
+														<div className="flex items-center gap-1 text-muted-foreground font-mono text-[11px]">
+															<GitBranch className="h-3 w-3 text-muted-foreground/70" />
+															<span>{p.repoBranch}</span>
+														</div>
+													)}
+													{p.baseDomain && (
+														<div className="flex items-center gap-1 text-muted-foreground font-mono text-[11px]">
+															<Globe className="h-3 w-3 text-muted-foreground/70" />
+															<span className="truncate max-w-[140px]">{p.baseDomain}</span>
+														</div>
+													)}
+													{!p.repoBranch && !p.baseDomain && <span className="text-muted-foreground/60">—</span>}
+												</div>
+											</TableCell>
+											<TableCell className="text-xs text-muted-foreground">
+												{p.createdAt ? new Date(p.createdAt).toLocaleDateString() : "—"}
+											</TableCell>
+											<TableCell className="text-right">
+												<Button
+													variant="ghost"
+													size="sm"
+													onClick={() => openDeleteModal(p)}
+													className="h-8 px-2.5 text-xs text-red-400 hover:text-red-300 hover:bg-red-500/10 border border-transparent hover:border-red-500/20 rounded-lg transition-colors flex items-center gap-1.5 ml-auto"
+												>
+													<Trash2 className="h-3.5 w-3.5" />
+													<span>Delete</span>
+												</Button>
+											</TableCell>
+										</TableRow>
+									))}
+								</TableBody>
+							</Table>
+						</div>
 					</div>
 				)}
 			</CardContent>
diff --git a/apps/web/src/components/settings/GithubIntegrationSection.tsx b/apps/web/src/components/settings/GithubIntegrationSection.tsx
index ca6cb0d..d59a47b 100644
--- a/apps/web/src/components/settings/GithubIntegrationSection.tsx
+++ b/apps/web/src/components/settings/GithubIntegrationSection.tsx
@@ -65,13 +65,13 @@ export function GithubIntegrationSection() {
 			<CardHeader className="border-b border-border/40 pb-5">
 				<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
 					<div className="flex items-center gap-3">
-						<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-zinc-900 text-white ring-1 ring-zinc-700">
+						<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-zinc-900 text-white ring-1 ring-zinc-700 shrink-0">
 							<svg className="h-5 w-5 fill-current" viewBox="0 0 24 24">
 								<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
 							</svg>
 						</div>
 						<div>
-							<div className="flex items-center gap-2">
+							<div className="flex items-center gap-2 flex-wrap">
 								<CardTitle className="text-lg font-semibold text-foreground">GitHub OAuth Integration</CardTitle>
 								{data?.configured ? (
 									<Badge
@@ -130,8 +130,8 @@ export function GithubIntegrationSection() {
 							</li>
 							<li>
 								Set <strong>Authorization Callback URL</strong> to:
-								<div className="mt-1.5 flex items-center gap-2">
-									<code className="rounded-xl border border-border/80 bg-black/60 px-3 py-1.5 font-mono text-[11px] text-zinc-300">
+								<div className="mt-1.5 flex flex-wrap items-center gap-2">
+									<code className="rounded-xl border border-border/80 bg-black/60 px-3 py-1.5 font-mono text-[11px] text-zinc-300 break-all">
 										{callbackUrl}
 									</code>
 									<Button
@@ -220,7 +220,7 @@ export function GithubIntegrationSection() {
 						</div>
 					</div>
 
-					<div className="flex items-center justify-between pt-2 border-t border-border/40">
+					<div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 pt-2 border-t border-border/40">
 						{saveResult ? (
 							<p
 								className={`text-xs font-medium ${saveResult.startsWith("error") ? "text-red-400" : "text-emerald-400"}`}
@@ -233,7 +233,7 @@ export function GithubIntegrationSection() {
 						<Button
 							type="submit"
 							size="sm"
-							className="bg-orange-500 hover:bg-orange-600 text-white font-medium text-xs px-5 shadow-md"
+							className="bg-orange-500 hover:bg-orange-600 text-white font-medium text-xs px-5 shadow-md w-full sm:w-auto"
 						>
 							Save Integration Settings
 						</Button>
diff --git a/apps/web/src/components/settings/ServersSection.tsx b/apps/web/src/components/settings/ServersSection.tsx
index 23b30e6..9f787eb 100644
--- a/apps/web/src/components/settings/ServersSection.tsx
+++ b/apps/web/src/components/settings/ServersSection.tsx
@@ -1,17 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import {
-	Check,
-	Copy,
-	HardDrive,
-	KeyRound,
-	Plus,
-	RefreshCw,
-	Server,
-	ShieldAlert,
-	Terminal,
-	Trash2,
-	Wifi,
-} from "lucide-react";
+import { Plus, RefreshCw, Server, Trash2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import * as api from "../../api/client";
 import { StatusBadge } from "../StatusBadge";
@@ -19,8 +7,9 @@ import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog";
-import { Input } from "../ui/input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table";
+import { AddServerForm } from "./servers/AddServerForm";
+import { ServerPreparationOutput } from "./servers/ServerPreparationOutput";
 
 export function ServersSection() {
 	const { data: servers = [], refetch } = useQuery({
@@ -32,18 +21,7 @@ export function ServersSection() {
 		queryFn: () => api.listSshKeys().catch(() => []),
 	});
 
-	const [activeTab, setActiveTab] = useState<"ssh" | "agent">("ssh");
 	const [isAdding, setIsAdding] = useState(false);
-	const [name, setName] = useState("");
-	const [host, setHost] = useState("");
-	const [port, setPort] = useState("22");
-	const [sshUser, setSshUser] = useState("root");
-	const [selectedKeyId, setSelectedKeyId] = useState("");
-	const [agentName, setAgentName] = useState("");
-	const [registrationCommand, setRegistrationCommand] = useState("");
-	const [registrationError, setRegistrationError] = useState("");
-	const [copiedCommand, setCopiedCommand] = useState(false);
-
 	const [deletingServerId, setDeletingServerId] = useState<string | null>(null);
 	const [preparingId, setPreparingId] = useState<string | null>(null);
 	const [prepareLogs, setPrepareLogs] = useState<{ stage: string; message: string }[]>([]);
@@ -94,48 +72,6 @@ export function ServersSection() {
 		refetch();
 	};
 
-	const addSshServer = async (e: React.FormEvent) => {
-		e.preventDefault();
-		if (!name.trim() || !host.trim()) return;
-		await api.createServer({
-			name: name.trim(),
-			host: host.trim(),
-			port: Number(port) || 22,
-			mode: "ssh",
-			sshUser: sshUser.trim() || "root",
-			sshKeyId: selectedKeyId || undefined,
-		});
-		setName("");
-		setHost("");
-		setPort("22");
-		setSshUser("root");
-		setSelectedKeyId("");
-		setIsAdding(false);
-		refetch();
-	};
-
-	const createRegistration = async (e: React.FormEvent) => {
-		e.preventDefault();
-		if (!agentName.trim()) return;
-		setRegistrationError("");
-		try {
-			const result = await api.createAgentRegistrationToken({ name: agentName.trim() });
-			const controlPlane = window.location.origin;
-			setRegistrationCommand(
-				`docker run -d --name dequel-agent --cap-add=NET_ADMIN --device /dev/net/tun --restart unless-stopped -e DEQUEL_CONTROL_PLANE=${controlPlane} -e DEQUEL_REGISTRATION_TOKEN=${result.token} -v dequel-agent-data:/root/.dequel -v /var/run/docker.sock:/var/run/docker.sock ghcr.io/lftobs/dequel/agent:latest`,
-			);
-		} catch (err) {
-			setRegistrationError(err instanceof Error ? err.message : "Could not create registration token");
-		}
-	};
-
-	const handleCopyCommand = () => {
-		if (!registrationCommand) return;
-		navigator.clipboard.writeText(registrationCommand);
-		setCopiedCommand(true);
-		setTimeout(() => setCopiedCommand(false), 2000);
-	};
-
 	return (
 		<Card className="border-border/60 bg-card/60 backdrop-blur-sm shadow-xl overflow-hidden">
 			<CardHeader className="border-b border-border/40 pb-5">
@@ -147,8 +83,7 @@ export function ServersSection() {
 						<div>
 							<CardTitle className="text-lg font-semibold text-foreground">Cluster Infrastructure Nodes</CardTitle>
 							<p className="text-xs text-muted-foreground mt-0.5">
-								Connect remote cloud servers (Hetzner, AWS, DigitalOcean) or homelab nodes for automated container
-								deployment.
+								Connect remote cloud servers (Hetzner, AWS, DigitalOcean) or homelab nodes for automated container deployment.
 							</p>
 						</div>
 					</div>
@@ -165,205 +100,14 @@ export function ServersSection() {
 
 			<CardContent className="pt-6 space-y-6">
 				{isAdding && (
-					<div className="rounded-2xl border border-border/80 bg-background/40 p-5 space-y-5 shadow-inner">
-						<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-border/40 pb-4">
-							<span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-								Select Connection Method
-							</span>
-							<div className="flex rounded-xl bg-black/40 p-1 border border-border/60">
-								<button
-									type="button"
-									onClick={() => setActiveTab("ssh")}
-									className={`flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-lg transition-all ${
-										activeTab === "ssh"
-											? "bg-orange-500 text-white shadow"
-											: "text-muted-foreground hover:text-foreground"
-									}`}
-								>
-									<HardDrive className="h-3.5 w-3.5" />
-									Direct SSH
-								</button>
-								<button
-									type="button"
-									onClick={() => setActiveTab("agent")}
-									className={`flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-lg transition-all ${
-										activeTab === "agent"
-											? "bg-orange-500 text-white shadow"
-											: "text-muted-foreground hover:text-foreground"
-									}`}
-								>
-									<Wifi className="h-3.5 w-3.5" />
-									WireGuard P2P Agent
-								</button>
-							</div>
-						</div>
-
-						{activeTab === "ssh" ? (
-							<form onSubmit={addSshServer} className="space-y-4">
-								<p className="text-xs text-muted-foreground leading-relaxed">
-									Connect directly to any cloud VPS over SSH. Dequel manages container orchestration without requiring
-									static agent installation.
-								</p>
-								<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3">
-									<div className="space-y-1">
-										<label htmlFor="server-name" className="text-xs font-medium text-foreground">
-											Server Name
-										</label>
-										<Input
-											id="server-name"
-											placeholder="prod-node-1"
-											value={name}
-											onChange={(e) => setName(e.target.value)}
-											className="bg-card border-border/80 text-xs"
-											required
-										/>
-									</div>
-									<div className="space-y-1">
-										<label htmlFor="server-host" className="text-xs font-medium text-foreground">
-											Host IP / Domain
-										</label>
-										<Input
-											id="server-host"
-											placeholder="192.168.1.10"
-											value={host}
-											onChange={(e) => setHost(e.target.value)}
-											className="bg-card border-border/80 text-xs"
-											required
-										/>
-									</div>
-									<div className="space-y-1">
-										<label htmlFor="server-port" className="text-xs font-medium text-foreground">
-											SSH Port
-										</label>
-										<Input
-											id="server-port"
-											type="number"
-											placeholder="22"
-											value={port}
-											onChange={(e) => setPort(e.target.value)}
-											className="bg-card border-border/80 text-xs"
-										/>
-									</div>
-									<div className="space-y-1">
-										<label htmlFor="server-user" className="text-xs font-medium text-foreground">
-											SSH User
-										</label>
-										<Input
-											id="server-user"
-											placeholder="root"
-											value={sshUser}
-											onChange={(e) => setSshUser(e.target.value)}
-											className="bg-card border-border/80 text-xs"
-										/>
-									</div>
-								</div>
-
-								<div className="space-y-1.5">
-									<label
-										htmlFor="server-ssh-key"
-										className="text-xs font-medium text-foreground flex items-center gap-1.5"
-									>
-										<KeyRound className="h-3.5 w-3.5 text-orange-400" />
-										Attached SSH Key
-									</label>
-									<select
-										id="server-ssh-key"
-										className="w-full rounded-xl border border-border/80 bg-card px-3 py-2 text-xs font-mono text-foreground focus:outline-none focus:ring-1 focus:ring-orange-500/50"
-										value={selectedKeyId}
-										onChange={(e) => setSelectedKeyId(e.target.value)}
-									>
-										<option value="">No key selected (Inline key fallback)</option>
-										{sshKeys.map((k) => (
-											<option key={k.id} value={k.id}>
-												{k.name} ({k.fingerprint || "SSH Key"})
-											</option>
-										))}
-									</select>
-								</div>
-
-								<div className="flex justify-end gap-2 pt-2 border-t border-border/40">
-									<Button
-										type="button"
-										variant="ghost"
-										size="sm"
-										onClick={() => setIsAdding(false)}
-										className="text-xs text-muted-foreground"
-									>
-										Cancel
-									</Button>
-									<Button
-										type="submit"
-										size="sm"
-										className="bg-orange-500 hover:bg-orange-600 text-white text-xs font-medium px-4"
-									>
-										Add SSH Server
-									</Button>
-								</div>
-							</form>
-						) : (
-							<form onSubmit={createRegistration} className="space-y-4">
-								<p className="text-xs text-muted-foreground leading-relaxed">
-									Deploy a lightweight agent for firewalled nodes or local homelabs behind NAT. Establishes a secure P2P
-									WireGuard tunnel.
-								</p>
-								<div className="flex flex-col sm:flex-row items-end gap-3">
-									<div className="space-y-1 flex-1">
-										<label htmlFor="agent-server-name" className="text-xs font-medium text-foreground">
-											Agent Server Name
-										</label>
-										<Input
-											id="agent-server-name"
-											placeholder="homelab-node-1"
-											value={agentName}
-											onChange={(e) => setAgentName(e.target.value)}
-											className="bg-card border-border/80 text-xs"
-											required
-										/>
-									</div>
-									<Button
-										type="submit"
-										size="sm"
-										variant="outline"
-										className="text-xs border-orange-500/40 text-orange-400 hover:bg-orange-500/10"
-									>
-										Generate Agent Command
-									</Button>
-								</div>
-
-								{registrationCommand && (
-									<div className="space-y-2 pt-2">
-										<div className="flex items-center justify-between text-xs text-muted-foreground font-semibold uppercase tracking-wider">
-											<span>Run Docker Command on Target Server</span>
-										</div>
-										<div className="relative rounded-2xl border border-border/80 bg-black/60 p-4 font-mono text-xs text-zinc-300">
-											<p className="break-all pr-20">{registrationCommand}</p>
-											<Button
-												type="button"
-												variant="ghost"
-												size="sm"
-												onClick={handleCopyCommand}
-												className="absolute right-3 top-3 h-8 bg-card/80 hover:bg-card text-xs text-zinc-300 gap-1.5 px-3 rounded-lg border border-border/40"
-											>
-												{copiedCommand ? (
-													<Check className="h-3.5 w-3.5 text-emerald-400" />
-												) : (
-													<Copy className="h-3.5 w-3.5" />
-												)}
-												{copiedCommand ? "Copied" : "Copy"}
-											</Button>
-										</div>
-									</div>
-								)}
-
-								{registrationError && (
-									<p role="alert" className="text-xs text-red-400 flex items-center gap-1.5">
-										<ShieldAlert className="h-3.5 w-3.5" />
-										{registrationError}
-									</p>
-								)}
-							</form>
-						)}
-					</div>
+					<AddServerForm
+						sshKeys={sshKeys}
+						onServerAdded={() => {
+							setIsAdding(false);
+							refetch();
+						}}
+						onCancel={() => setIsAdding(false)}
+					/>
 				)}
 
 				{servers.length === 0 ? (
@@ -386,115 +130,117 @@ export function ServersSection() {
 					</div>
 				) : (
 					<div className="rounded-xl border border-border/60 overflow-hidden bg-card/30">
-						<Table>
-							<TableHeader className="bg-muted/40">
-								<TableRow className="border-border/60 hover:bg-transparent">
-									<TableHead className="text-xs font-semibold">Node Name</TableHead>
-									<TableHead className="text-xs font-semibold">Connection String</TableHead>
-									<TableHead className="text-xs font-semibold">Status</TableHead>
-									<TableHead className="text-xs font-semibold text-right">Actions</TableHead>
-								</TableRow>
-							</TableHeader>
-							<TableBody>
-								{servers.map((s) => (
-									<TableRow key={s.id} className="border-border/40 hover:bg-muted/20">
-										<TableCell className="font-medium text-foreground text-xs py-3.5">
-											<div className="flex items-center gap-2">
-												<Server className="h-4 w-4 text-orange-400" />
-												<span>{s.name}</span>
-											</div>
-										</TableCell>
-										<TableCell className="font-mono text-xs text-muted-foreground py-3.5">
-											<Badge
+						<div className="md:hidden divide-y divide-border/40">
+							{servers.map((s) => (
+								<div key={s.id} className="p-3.5 space-y-2.5">
+									<div className="flex items-center justify-between gap-2">
+										<div className="flex items-center gap-2 min-w-0">
+											<Server className="h-4 w-4 text-orange-400 shrink-0" />
+											<span className="font-semibold text-foreground text-sm truncate">{s.name}</span>
+										</div>
+										<StatusBadge status={s.status || "active"} />
+									</div>
+									<p className="text-xs font-mono text-muted-foreground break-all">
+										{s.mode === "agent" ? `WireGuard P2P ${s.agentVersion || ""}` : `SSH (${s.sshUser || "root"}@${s.host}:${s.port})`}
+									</p>
+									<div className="flex items-center justify-end gap-2 pt-1 border-t border-border/30">
+										{s.mode !== "local" && (
+											<Button
 												variant="outline"
-												className="font-mono text-[11px] bg-black/40 text-zinc-300 border-border/60"
+												size="sm"
+												className="h-8 text-xs flex-1 sm:flex-none border-border/60 hover:bg-orange-500/10 hover:text-orange-400 gap-1.5"
+												disabled={preparingId !== null}
+												onClick={() => handlePrepare(s.id)}
 											>
-												{s.mode === "agent"
-													? `WireGuard P2P ${s.agentVersion || ""}`
-													: `SSH (${s.sshUser || "root"}@${s.host}:${s.port})`}
-											</Badge>
-										</TableCell>
-										<TableCell className="py-3.5">
-											<StatusBadge status={s.status || "active"} />
-										</TableCell>
-										<TableCell className="text-right py-3.5">
-											<div className="flex items-center justify-end gap-2">
-												{s.mode !== "local" && (
+												<RefreshCw className={`h-3 w-3 ${preparingId === s.id ? "animate-spin text-orange-400" : ""}`} />
+												{preparingId === s.id ? "Preparing..." : "Prepare"}
+											</Button>
+										)}
+										<Button
+											variant="ghost"
+											size="icon"
+											className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg"
+											onClick={() => setDeletingServerId(s.id)}
+										>
+											<Trash2 className="h-3.5 w-3.5" />
+										</Button>
+									</div>
+								</div>
+							))}
+						</div>
+
+						<div className="hidden md:block overflow-x-auto">
+							<Table className="w-full">
+								<TableHeader className="bg-muted/40">
+									<TableRow className="border-border/60 hover:bg-transparent">
+										<TableHead className="text-xs font-semibold">Node Name</TableHead>
+										<TableHead className="text-xs font-semibold">Connection String</TableHead>
+										<TableHead className="text-xs font-semibold">Status</TableHead>
+										<TableHead className="text-xs font-semibold text-right">Actions</TableHead>
+									</TableRow>
+								</TableHeader>
+								<TableBody>
+									{servers.map((s) => (
+										<TableRow key={s.id} className="border-border/40 hover:bg-muted/20">
+											<TableCell className="font-medium text-foreground text-xs py-3.5">
+												<div className="flex items-center gap-2">
+													<Server className="h-4 w-4 text-orange-400" />
+													<span>{s.name}</span>
+												</div>
+											</TableCell>
+											<TableCell className="font-mono text-xs text-muted-foreground py-3.5">
+												<Badge
+													variant="outline"
+													className="font-mono text-[11px] bg-black/40 text-zinc-300 border-border/60"
+												>
+													{s.mode === "agent"
+														? `WireGuard P2P ${s.agentVersion || ""}`
+														: `SSH (${s.sshUser || "root"}@${s.host}:${s.port})`}
+												</Badge>
+											</TableCell>
+											<TableCell className="py-3.5">
+												<StatusBadge status={s.status || "active"} />
+											</TableCell>
+											<TableCell className="text-right py-3.5">
+												<div className="flex items-center justify-end gap-2">
+													{s.mode !== "local" && (
+														<Button
+															variant="outline"
+															size="sm"
+															className="h-8 text-xs border-border/60 hover:bg-orange-500/10 hover:text-orange-400 gap-1.5"
+															disabled={preparingId !== null}
+															onClick={() => handlePrepare(s.id)}
+														>
+															<RefreshCw
+																className={`h-3 w-3 ${preparingId === s.id ? "animate-spin text-orange-400" : ""}`}
+															/>
+															{preparingId === s.id ? "Preparing..." : "Prepare Node"}
+														</Button>
+													)}
 													<Button
-														variant="outline"
-														size="sm"
-														className="h-8 text-xs border-border/60 hover:bg-orange-500/10 hover:text-orange-400 gap-1.5"
-														disabled={preparingId !== null}
-														onClick={() => handlePrepare(s.id)}
+														variant="ghost"
+														size="icon"
+														className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg"
+														onClick={() => setDeletingServerId(s.id)}
 													>
-														<RefreshCw
-															className={`h-3 w-3 ${preparingId === s.id ? "animate-spin text-orange-400" : ""}`}
-														/>
-														{preparingId === s.id ? "Preparing..." : "Prepare Node"}
+														<Trash2 className="h-4 w-4" />
 													</Button>
-												)}
-												<Button
-													variant="ghost"
-													size="icon"
-													className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg"
-													onClick={() => setDeletingServerId(s.id)}
-												>
-													<Trash2 className="h-4 w-4" />
-												</Button>
-											</div>
-										</TableCell>
-									</TableRow>
-								))}
-							</TableBody>
-						</Table>
-					</div>
-				)}
-
-				{preparingId && (
-					<div className="rounded-2xl border border-orange-500/30 bg-black/80 p-4 space-y-3 backdrop-blur-md shadow-2xl">
-						<div className="flex items-center justify-between border-b border-zinc-800 pb-3">
-							<div className="flex items-center gap-2">
-								<Terminal className="h-4 w-4 text-orange-400" />
-								<span className="text-xs font-semibold font-mono text-zinc-200 uppercase tracking-wider">
-									Server Preparation Terminal Output ({prepareLogs.length} events)
-								</span>
-							</div>
-							<div className="flex items-center gap-2">
-								<div className="h-2 w-2 animate-ping rounded-full bg-orange-400" />
-								<span className="text-[10px] text-orange-400 font-mono">Live Stream</span>
-							</div>
-						</div>
-						<div className="max-h-56 overflow-y-auto space-y-1.5 font-mono text-xs pr-2">
-							{prepareLogs.map((entry, i) => (
-								<div key={i} className="flex items-start gap-2">
-									<span className="text-orange-500 font-semibold shrink-0">[{entry.stage}]</span>
-									<span className={entry.stage === "token" ? "text-emerald-400 break-all" : "text-zinc-300"}>
-										{entry.message}
-									</span>
-								</div>
-							))}
-							{prepareLogs.length === 0 && (
-								<div className="text-zinc-500 italic">
-									Initializing SSH connection and bootstrapping container engine...
-								</div>
-							)}
+												</div>
+											</TableCell>
+										</TableRow>
+									))}
+								</TableBody>
+							</Table>
 						</div>
 					</div>
 				)}
 
-				{prepareDone && (
-					<div
-						className={`rounded-2xl border p-4 text-xs font-medium ${
-							prepareError
-								? "border-red-500/40 bg-red-950/20 text-red-400"
-								: "border-emerald-500/40 bg-emerald-950/20 text-emerald-400"
-						}`}
-					>
-						{prepareError
-							? `Server preparation failed: ${prepareError}`
-							: "Node prepared successfully. Container daemon is active and ready for deployments."}
-					</div>
-				)}
+				<ServerPreparationOutput
+					preparingId={preparingId}
+					prepareLogs={prepareLogs}
+					prepareDone={prepareDone}
+					prepareError={prepareError}
+				/>
 			</CardContent>
 
 			<Dialog open={deletingServerId !== null} onOpenChange={(open) => !open && setDeletingServerId(null)}>
@@ -506,7 +252,7 @@ export function ServersSection() {
 							stop responding.
 						</DialogDescription>
 					</DialogHeader>
-					<DialogFooter className="flex justify-end gap-2 pt-4 border-t border-border/40">
+					<DialogFooter className="flex flex-col-reverse sm:flex-row justify-end gap-2 pt-4 border-t border-border/40">
 						<Button
 							variant="ghost"
 							onClick={() => setDeletingServerId(null)}
diff --git a/apps/web/src/components/settings/SharedEnvVarsSection.tsx b/apps/web/src/components/settings/SharedEnvVarsSection.tsx
index 4860534..959555d 100644
--- a/apps/web/src/components/settings/SharedEnvVarsSection.tsx
+++ b/apps/web/src/components/settings/SharedEnvVarsSection.tsx
@@ -94,7 +94,7 @@ export function SharedEnvVarsSection() {
 				{isAdding && (
 					<form
 						onSubmit={add}
-						className="rounded-2xl border border-border/80 bg-background/40 p-5 space-y-4 shadow-inner"
+						className="rounded-2xl border border-border/80 bg-background/40 p-4 sm:p-5 space-y-4 shadow-inner"
 					>
 						<div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
 							Create Global Variable
@@ -154,7 +154,7 @@ export function SharedEnvVarsSection() {
 							</div>
 						</div>
 
-						<div className="flex justify-end gap-2 pt-2 border-t border-border/40">
+						<div className="flex flex-col-reverse sm:flex-row justify-end gap-2 pt-2 border-t border-border/40">
 							<Button
 								type="button"
 								variant="ghost"
@@ -195,80 +195,150 @@ export function SharedEnvVarsSection() {
 					</div>
 				) : (
 					<div className="rounded-xl border border-border/60 overflow-hidden bg-card/30">
-						<Table>
-							<TableHeader className="bg-muted/40">
-								<TableRow className="border-border/60 hover:bg-transparent">
-									<TableHead className="text-xs font-semibold">Variable Key</TableHead>
-									<TableHead className="text-xs font-semibold">Secret Value</TableHead>
-									<TableHead className="text-xs font-semibold">Target Scope</TableHead>
-									<TableHead className="text-xs font-semibold">Description</TableHead>
-									<TableHead className="text-xs font-semibold text-right">Actions</TableHead>
-								</TableRow>
-							</TableHeader>
-							<TableBody>
-								{vars.map((v) => (
-									<TableRow key={v.id} className="border-border/40 hover:bg-muted/20">
-										<TableCell className="font-mono text-xs font-medium text-orange-400 py-3.5">
-											<Badge
-												variant="outline"
-												className="font-mono text-[11px] bg-black/40 border-border/60 text-orange-300"
-											>
-												{v.key}
-											</Badge>
-										</TableCell>
-										<TableCell className="font-mono text-xs text-muted-foreground py-3.5">
+						{/* Mobile Card View */}
+						<div className="md:hidden divide-y divide-border/40">
+							{vars.map((v) => (
+								<div key={v.id} className="p-3.5 space-y-2.5">
+									<div className="flex items-center justify-between gap-2">
+										<Badge
+											variant="outline"
+											className="font-mono text-[11px] bg-black/40 border-border/60 text-orange-300 truncate max-w-[200px]"
+										>
+											{v.key}
+										</Badge>
+										<Badge variant="secondary" className="text-[10px] bg-secondary/80 text-zinc-300 shrink-0">
+											{v.environment || "All"}
+										</Badge>
+									</div>
+
+									<div className="flex items-center justify-between gap-2 font-mono text-xs text-muted-foreground bg-black/30 px-2.5 py-1.5 rounded-lg border border-border/40">
+										<span className="truncate">
 											{revealedId === v.id ? (
 												<span className="text-emerald-300 font-semibold">{revealedValue}</span>
 											) : (
 												<span className="text-zinc-500">••••••••••••</span>
 											)}
-										</TableCell>
-										<TableCell className="text-xs text-muted-foreground py-3.5">
-											<Badge variant="secondary" className="text-[10px] bg-secondary/80 text-zinc-300">
-												{v.environment || "All Environments"}
-											</Badge>
-										</TableCell>
-										<TableCell className="text-xs text-muted-foreground py-3.5">{v.description || "—"}</TableCell>
-										<TableCell className="text-right py-3.5">
-											<div className="flex items-center justify-end gap-1">
+										</span>
+										<div className="flex items-center gap-1 shrink-0">
+											<Button
+												variant="ghost"
+												size="icon"
+												className="h-7 w-7 text-muted-foreground hover:text-foreground"
+												onClick={() => handleReveal(v.id)}
+											>
+												{revealedId === v.id ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+											</Button>
+											{revealedId === v.id && (
 												<Button
 													variant="ghost"
 													size="icon"
-													className="h-8 w-8 text-muted-foreground hover:text-foreground rounded-lg"
-													onClick={() => handleReveal(v.id)}
+													className="h-7 w-7 text-muted-foreground hover:text-emerald-400"
+													onClick={() => handleCopyValue(v.id, revealedValue)}
 												>
-													{revealedId === v.id ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+													{copiedId === v.id ? (
+														<Check className="h-3.5 w-3.5 text-emerald-400" />
+													) : (
+														<Copy className="h-3.5 w-3.5" />
+													)}
 												</Button>
+											)}
+										</div>
+									</div>
 
-												{revealedId === v.id && (
+									{v.description && <p className="text-xs text-muted-foreground">{v.description}</p>}
+
+									<div className="flex items-center justify-end pt-1 border-t border-border/30">
+										<Button
+											variant="ghost"
+											size="sm"
+											className="h-7 px-2 text-xs text-muted-foreground hover:text-destructive hover:bg-destructive/10 gap-1 rounded-lg"
+											onClick={() => setDeletingId(v.id)}
+										>
+											<Trash2 className="h-3.5 w-3.5" />
+											<span>Delete</span>
+										</Button>
+									</div>
+								</div>
+							))}
+						</div>
+
+						{/* Desktop Table View */}
+						<div className="hidden md:block overflow-x-auto">
+							<Table>
+								<TableHeader className="bg-muted/40">
+									<TableRow className="border-border/60 hover:bg-transparent">
+										<TableHead className="text-xs font-semibold">Variable Key</TableHead>
+										<TableHead className="text-xs font-semibold">Secret Value</TableHead>
+										<TableHead className="text-xs font-semibold">Target Scope</TableHead>
+										<TableHead className="text-xs font-semibold">Description</TableHead>
+										<TableHead className="text-xs font-semibold text-right">Actions</TableHead>
+									</TableRow>
+								</TableHeader>
+								<TableBody>
+									{vars.map((v) => (
+										<TableRow key={v.id} className="border-border/40 hover:bg-muted/20">
+											<TableCell className="font-mono text-xs font-medium text-orange-400 py-3.5">
+												<Badge
+													variant="outline"
+													className="font-mono text-[11px] bg-black/40 border-border/60 text-orange-300"
+												>
+													{v.key}
+												</Badge>
+											</TableCell>
+											<TableCell className="font-mono text-xs text-muted-foreground py-3.5">
+												{revealedId === v.id ? (
+													<span className="text-emerald-300 font-semibold">{revealedValue}</span>
+												) : (
+													<span className="text-zinc-500">••••••••••••</span>
+												)}
+											</TableCell>
+											<TableCell className="text-xs text-muted-foreground py-3.5">
+												<Badge variant="secondary" className="text-[10px] bg-secondary/80 text-zinc-300">
+													{v.environment || "All Environments"}
+												</Badge>
+											</TableCell>
+											<TableCell className="text-xs text-muted-foreground py-3.5">{v.description || "—"}</TableCell>
+											<TableCell className="text-right py-3.5">
+												<div className="flex items-center justify-end gap-1">
 													<Button
 														variant="ghost"
 														size="icon"
-														className="h-8 w-8 text-muted-foreground hover:text-emerald-400 rounded-lg"
-														onClick={() => handleCopyValue(v.id, revealedValue)}
+														className="h-8 w-8 text-muted-foreground hover:text-foreground rounded-lg"
+														onClick={() => handleReveal(v.id)}
 													>
-														{copiedId === v.id ? (
-															<Check className="h-4 w-4 text-emerald-400" />
-														) : (
-															<Copy className="h-4 w-4" />
-														)}
+														{revealedId === v.id ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
 													</Button>
-												)}
 
-												<Button
-													variant="ghost"
-													size="icon"
-													className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg"
-													onClick={() => setDeletingId(v.id)}
-												>
-													<Trash2 className="h-4 w-4" />
-												</Button>
-											</div>
-										</TableCell>
-									</TableRow>
-								))}
-							</TableBody>
-						</Table>
+													{revealedId === v.id && (
+														<Button
+															variant="ghost"
+															size="icon"
+															className="h-8 w-8 text-muted-foreground hover:text-emerald-400 rounded-lg"
+															onClick={() => handleCopyValue(v.id, revealedValue)}
+														>
+															{copiedId === v.id ? (
+																<Check className="h-4 w-4 text-emerald-400" />
+															) : (
+																<Copy className="h-4 w-4" />
+															)}
+														</Button>
+													)}
+
+													<Button
+														variant="ghost"
+														size="icon"
+														className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg"
+														onClick={() => setDeletingId(v.id)}
+													>
+														<Trash2 className="h-4 w-4" />
+													</Button>
+												</div>
+											</TableCell>
+										</TableRow>
+									))}
+								</TableBody>
+							</Table>
+						</div>
 					</div>
 				)}
 			</CardContent>
@@ -282,7 +352,7 @@ export function SharedEnvVarsSection() {
 							to local project defaults.
 						</DialogDescription>
 					</DialogHeader>
-					<DialogFooter className="flex justify-end gap-2 pt-4 border-t border-border/40">
+					<DialogFooter className="flex flex-col-reverse sm:flex-row justify-end gap-2 pt-4 border-t border-border/40">
 						<Button
 							variant="ghost"
 							onClick={() => setDeletingId(null)}
diff --git a/apps/web/src/components/settings/SmtpSection.tsx b/apps/web/src/components/settings/SmtpSection.tsx
index 135661d..6b3dca1 100644
--- a/apps/web/src/components/settings/SmtpSection.tsx
+++ b/apps/web/src/components/settings/SmtpSection.tsx
@@ -77,11 +77,11 @@ export function SmtpSection() {
 			<CardHeader className="border-b border-border/40 pb-5">
 				<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
 					<div className="flex items-center gap-3">
-						<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-orange-500/10 text-orange-500 ring-1 ring-orange-500/20">
+						<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-orange-500/10 text-orange-500 ring-1 ring-orange-500/20 shrink-0">
 							<Mail className="h-5 w-5" />
 						</div>
 						<div>
-							<div className="flex items-center gap-2">
+							<div className="flex items-center gap-2 flex-wrap">
 								<CardTitle className="text-lg font-semibold text-foreground">SMTP Email Notifications</CardTitle>
 								{data?.configured ? (
 									<Badge
@@ -206,7 +206,7 @@ export function SmtpSection() {
 						</div>
 					</div>
 
-					<div className="flex items-center justify-between pt-2 border-t border-border/40">
+					<div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 pt-2 border-t border-border/40">
 						<div className="space-y-1">
 							{saveResult && (
 								<p
@@ -227,7 +227,7 @@ export function SmtpSection() {
 						<Button
 							type="submit"
 							size="sm"
-							className="bg-orange-500 hover:bg-orange-600 text-white font-medium text-xs px-5 shadow-md"
+							className="bg-orange-500 hover:bg-orange-600 text-white font-medium text-xs px-5 shadow-md w-full sm:w-auto"
 						>
 							Save SMTP Settings
 						</Button>
diff --git a/apps/web/src/components/settings/SshKeyPoolSection.tsx b/apps/web/src/components/settings/SshKeyPoolSection.tsx
index fbb55d8..d54ebe5 100644
--- a/apps/web/src/components/settings/SshKeyPoolSection.tsx
+++ b/apps/web/src/components/settings/SshKeyPoolSection.tsx
@@ -92,7 +92,7 @@ export function SshKeyPoolSection() {
 				{isAdding && (
 					<form
 						onSubmit={add}
-						className="rounded-2xl border border-border/80 bg-background/40 p-5 space-y-4 shadow-inner"
+						className="rounded-2xl border border-border/80 bg-background/40 p-4 sm:p-5 space-y-4 shadow-inner"
 					>
 						<div className="flex items-center justify-between">
 							<span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
@@ -155,7 +155,7 @@ export function SshKeyPoolSection() {
 							</div>
 						</div>
 
-						<div className="flex justify-end gap-2 pt-2 border-t border-border/40">
+						<div className="flex flex-col-reverse sm:flex-row justify-end gap-2 pt-2 border-t border-border/40">
 							<Button
 								type="button"
 								variant="ghost"
@@ -196,67 +196,121 @@ export function SshKeyPoolSection() {
 					</div>
 				) : (
 					<div className="rounded-xl border border-border/60 overflow-hidden bg-card/30">
-						<Table>
-							<TableHeader className="bg-muted/40">
-								<TableRow className="border-border/60 hover:bg-transparent">
-									<TableHead className="text-xs font-semibold">Key Identifier</TableHead>
-									<TableHead className="text-xs font-semibold">Fingerprint</TableHead>
-									<TableHead className="text-xs font-semibold">Tags</TableHead>
-									<TableHead className="text-xs font-semibold">Added Date</TableHead>
-									<TableHead className="text-xs font-semibold text-right">Actions</TableHead>
-								</TableRow>
-							</TableHeader>
-							<TableBody>
-								{keys.map((k) => (
-									<TableRow key={k.id} className="border-border/40 hover:bg-muted/20">
-										<TableCell className="font-medium text-foreground text-xs py-3.5">
-											<div className="flex items-center gap-2">
-												<KeyRound className="h-4 w-4 text-orange-400/80" />
-												<span>{k.name}</span>
-											</div>
-										</TableCell>
-										<TableCell className="font-mono text-xs text-muted-foreground py-3.5">
-											<Badge
-												variant="outline"
-												className="font-mono text-[11px] bg-black/40 text-zinc-400 border-border/60"
-											>
-												{k.fingerprint || "SHA256:..."}
-											</Badge>
-										</TableCell>
-										<TableCell className="text-xs text-muted-foreground py-3.5">
-											{k.tags && k.tags.length > 0 ? (
-												<div className="flex flex-wrap gap-1">
-													{k.tags.map((tag, i) => (
-														<Badge key={i} variant="secondary" className="text-[10px] py-0 px-1.5">
-															{tag}
-														</Badge>
-													))}
-												</div>
-											) : (
-												<span className="text-muted-foreground/60">—</span>
-											)}
-										</TableCell>
-										<TableCell className="text-muted-foreground text-xs py-3.5">
+						{/* Mobile Card View */}
+						<div className="md:hidden divide-y divide-border/40">
+							{keys.map((k) => (
+								<div key={k.id} className="p-3.5 space-y-2.5">
+									<div className="flex items-center justify-between gap-2">
+										<div className="flex items-center gap-2 min-w-0">
+											<KeyRound className="h-4 w-4 text-orange-400/80 shrink-0" />
+											<span className="font-semibold text-foreground text-sm truncate">{k.name}</span>
+										</div>
+										<span className="text-[11px] text-muted-foreground shrink-0">
 											{new Date(k.createdAt).toLocaleDateString(undefined, {
-												year: "numeric",
 												month: "short",
 												day: "numeric",
 											})}
-										</TableCell>
-										<TableCell className="text-right py-3.5">
-											<Button
-												variant="ghost"
-												size="icon"
-												className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg"
-												onClick={() => setDeletingId(k.id)}
-											>
-												<Trash2 className="h-4 w-4" />
-											</Button>
-										</TableCell>
+										</span>
+									</div>
+
+									<div className="font-mono text-xs text-muted-foreground bg-black/30 px-2.5 py-1.5 rounded-lg border border-border/40 truncate">
+										<Badge
+											variant="outline"
+											className="font-mono text-[11px] bg-black/40 text-zinc-400 border-border/60"
+										>
+											{k.fingerprint || "SHA256:..."}
+										</Badge>
+									</div>
+
+									{k.tags && k.tags.length > 0 && (
+										<div className="flex flex-wrap gap-1">
+											{k.tags.map((tag, i) => (
+												<Badge key={i} variant="secondary" className="text-[10px] py-0 px-1.5">
+													{tag}
+												</Badge>
+											))}
+										</div>
+									)}
+
+									<div className="flex items-center justify-end pt-1 border-t border-border/30">
+										<Button
+											variant="ghost"
+											size="sm"
+											className="h-7 px-2 text-xs text-muted-foreground hover:text-destructive hover:bg-destructive/10 gap-1 rounded-lg"
+											onClick={() => setDeletingId(k.id)}
+										>
+											<Trash2 className="h-3.5 w-3.5" />
+											<span>Delete</span>
+										</Button>
+									</div>
+								</div>
+							))}
+						</div>
+
+						{/* Desktop Table View */}
+						<div className="hidden md:block overflow-x-auto">
+							<Table>
+								<TableHeader className="bg-muted/40">
+									<TableRow className="border-border/60 hover:bg-transparent">
+										<TableHead className="text-xs font-semibold">Key Identifier</TableHead>
+										<TableHead className="text-xs font-semibold">Fingerprint</TableHead>
+										<TableHead className="text-xs font-semibold">Tags</TableHead>
+										<TableHead className="text-xs font-semibold">Added Date</TableHead>
+										<TableHead className="text-xs font-semibold text-right">Actions</TableHead>
 									</TableRow>
-								))}
-							</TableBody>
-						</Table>
+								</TableHeader>
+								<TableBody>
+									{keys.map((k) => (
+										<TableRow key={k.id} className="border-border/40 hover:bg-muted/20">
+											<TableCell className="font-medium text-foreground text-xs py-3.5">
+												<div className="flex items-center gap-2">
+													<KeyRound className="h-4 w-4 text-orange-400/80" />
+													<span>{k.name}</span>
+												</div>
+											</TableCell>
+											<TableCell className="font-mono text-xs text-muted-foreground py-3.5">
+												<Badge
+													variant="outline"
+													className="font-mono text-[11px] bg-black/40 text-zinc-400 border-border/60"
+												>
+													{k.fingerprint || "SHA256:..."}
+												</Badge>
+											</TableCell>
+											<TableCell className="text-xs text-muted-foreground py-3.5">
+												{k.tags && k.tags.length > 0 ? (
+													<div className="flex flex-wrap gap-1">
+														{k.tags.map((tag, i) => (
+															<Badge key={i} variant="secondary" className="text-[10px] py-0 px-1.5">
+																{tag}
+															</Badge>
+														))}
+													</div>
+												) : (
+													<span className="text-muted-foreground/60">—</span>
+												)}
+											</TableCell>
+											<TableCell className="text-muted-foreground text-xs py-3.5">
+												{new Date(k.createdAt).toLocaleDateString(undefined, {
+													year: "numeric",
+													month: "short",
+													day: "numeric",
+												})}
+											</TableCell>
+											<TableCell className="text-right py-3.5">
+												<Button
+													variant="ghost"
+													size="icon"
+													className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg"
+													onClick={() => setDeletingId(k.id)}
+												>
+													<Trash2 className="h-4 w-4" />
+												</Button>
+											</TableCell>
+										</TableRow>
+									))}
+								</TableBody>
+							</Table>
+						</div>
 					</div>
 				)}
 			</CardContent>
@@ -270,7 +324,7 @@ export function SshKeyPoolSection() {
 							management access.
 						</DialogDescription>
 					</DialogHeader>
-					<DialogFooter className="flex justify-end gap-2 pt-4 border-t border-border/40">
+					<DialogFooter className="flex flex-col-reverse sm:flex-row justify-end gap-2 pt-4 border-t border-border/40">
 						<Button
 							variant="ghost"
 							onClick={() => setDeletingId(null)}
diff --git a/apps/web/src/components/settings/servers/AddServerForm.tsx b/apps/web/src/components/settings/servers/AddServerForm.tsx
new file mode 100644
index 0000000..b7d3110
--- /dev/null
+++ b/apps/web/src/components/settings/servers/AddServerForm.tsx
@@ -0,0 +1,274 @@
+import { Check, Copy, HardDrive, KeyRound, ShieldAlert, Wifi } from "lucide-react";
+import { useState } from "react";
+import * as api from "../../../api/client";
+import { Button } from "../../ui/button";
+import { Input } from "../../ui/input";
+
+interface AddServerFormProps {
+	sshKeys: Array<{ id: string; name: string; fingerprint?: string | null }>;
+	onServerAdded: () => void;
+	onCancel: () => void;
+}
+
+export function AddServerForm({ sshKeys, onServerAdded, onCancel }: AddServerFormProps) {
+	const [activeTab, setActiveTab] = useState<"ssh" | "agent">("ssh");
+	const [name, setName] = useState("");
+	const [host, setHost] = useState("");
+	const [port, setPort] = useState("22");
+	const [sshUser, setSshUser] = useState("root");
+	const [selectedKeyId, setSelectedKeyId] = useState("");
+	const [agentName, setAgentName] = useState("");
+	const [registrationCommand, setRegistrationCommand] = useState("");
+	const [registrationError, setRegistrationError] = useState("");
+	const [copiedCommand, setCopiedCommand] = useState(false);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+
+	const addSshServer = async (e: React.FormEvent) => {
+		e.preventDefault();
+		if (!name.trim() || !host.trim()) return;
+		setIsSubmitting(true);
+		try {
+			await api.createServer({
+				name: name.trim(),
+				host: host.trim(),
+				port: Number(port) || 22,
+				mode: "ssh",
+				sshUser: sshUser.trim() || "root",
+				sshKeyId: selectedKeyId || undefined,
+			});
+			setName("");
+			setHost("");
+			setPort("22");
+			setSshUser("root");
+			setSelectedKeyId("");
+			onServerAdded();
+		} catch (err) {
+			console.error("Failed to add SSH server", err);
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+
+	const createRegistration = async (e: React.FormEvent) => {
+		e.preventDefault();
+		if (!agentName.trim()) return;
+		setRegistrationError("");
+		setIsSubmitting(true);
+		try {
+			const result = await api.createAgentRegistrationToken({ name: agentName.trim() });
+			const controlPlane = window.location.origin;
+			setRegistrationCommand(
+				`docker run -d --name dequel-agent --cap-add=NET_ADMIN --device /dev/net/tun --restart unless-stopped -e DEQUEL_CONTROL_PLANE=${controlPlane} -e DEQUEL_REGISTRATION_TOKEN=${result.token} -v dequel-agent-data:/root/.dequel -v /var/run/docker.sock:/var/run/docker.sock ghcr.io/lftobs/dequel/agent:latest`,
+			);
+		} catch (err) {
+			setRegistrationError(err instanceof Error ? err.message : "Could not create registration token");
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+
+	const handleCopyCommand = () => {
+		if (!registrationCommand) return;
+		navigator.clipboard.writeText(registrationCommand);
+		setCopiedCommand(true);
+		setTimeout(() => setCopiedCommand(false), 2000);
+	};
+
+	return (
+		<div className="rounded-2xl border border-border/80 bg-background/40 p-4 sm:p-5 space-y-5 shadow-inner">
+			<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-border/40 pb-4">
+				<span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+					Select Connection Method
+				</span>
+				<div className="flex rounded-xl bg-black/40 p-1 border border-border/60">
+					<button
+						type="button"
+						onClick={() => setActiveTab("ssh")}
+						className={`flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-lg transition-all ${
+							activeTab === "ssh" ? "bg-orange-500 text-white shadow" : "text-muted-foreground hover:text-foreground"
+						}`}
+					>
+						<HardDrive className="h-3.5 w-3.5" />
+						Direct SSH
+					</button>
+					<button
+						type="button"
+						onClick={() => setActiveTab("agent")}
+						className={`flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-lg transition-all ${
+							activeTab === "agent" ? "bg-orange-500 text-white shadow" : "text-muted-foreground hover:text-foreground"
+						}`}
+					>
+						<Wifi className="h-3.5 w-3.5" />
+						WireGuard P2P Agent
+					</button>
+				</div>
+			</div>
+
+			{activeTab === "ssh" ? (
+				<form onSubmit={addSshServer} className="space-y-4">
+					<p className="text-xs text-muted-foreground leading-relaxed">
+						Connect directly to any cloud VPS over SSH. Dequel manages container orchestration without requiring static agent installation.
+					</p>
+					<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3">
+						<div className="space-y-1">
+							<label htmlFor="server-name" className="text-xs font-medium text-foreground">
+								Server Name
+							</label>
+							<Input
+								id="server-name"
+								placeholder="prod-node-1"
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+								className="bg-card border-border/80 text-xs"
+								required
+							/>
+						</div>
+						<div className="space-y-1">
+							<label htmlFor="server-host" className="text-xs font-medium text-foreground">
+								Host IP / Domain
+							</label>
+							<Input
+								id="server-host"
+								placeholder="192.168.1.10"
+								value={host}
+								onChange={(e) => setHost(e.target.value)}
+								className="bg-card border-border/80 text-xs"
+								required
+							/>
+						</div>
+						<div className="space-y-1">
+							<label htmlFor="server-port" className="text-xs font-medium text-foreground">
+								SSH Port
+							</label>
+							<Input
+								id="server-port"
+								type="number"
+								placeholder="22"
+								value={port}
+								onChange={(e) => setPort(e.target.value)}
+								className="bg-card border-border/80 text-xs"
+							/>
+						</div>
+						<div className="space-y-1">
+							<label htmlFor="server-user" className="text-xs font-medium text-foreground">
+								SSH User
+							</label>
+							<Input
+								id="server-user"
+								placeholder="root"
+								value={sshUser}
+								onChange={(e) => setSshUser(e.target.value)}
+								className="bg-card border-border/80 text-xs"
+							/>
+						</div>
+					</div>
+
+					<div className="space-y-1.5">
+						<label
+							htmlFor="server-ssh-key"
+							className="text-xs font-medium text-foreground flex items-center gap-1.5"
+						>
+							<KeyRound className="h-3.5 w-3.5 text-orange-400" />
+							Attached SSH Key
+						</label>
+						<select
+							id="server-ssh-key"
+							className="w-full rounded-xl border border-border/80 bg-card px-3 py-2 text-xs font-mono text-foreground focus:outline-none focus:ring-1 focus:ring-orange-500/50"
+							value={selectedKeyId}
+							onChange={(e) => setSelectedKeyId(e.target.value)}
+						>
+							<option value="">No key selected (Inline key fallback)</option>
+							{sshKeys.map((k) => (
+								<option key={k.id} value={k.id}>
+									{k.name} ({k.fingerprint || "SSH Key"})
+								</option>
+							))}
+						</select>
+					</div>
+
+					<div className="flex flex-col-reverse sm:flex-row justify-end gap-2 pt-2 border-t border-border/40">
+						<Button
+							type="button"
+							variant="ghost"
+							size="sm"
+							onClick={onCancel}
+							className="text-xs text-muted-foreground"
+						>
+							Cancel
+						</Button>
+						<Button
+							type="submit"
+							size="sm"
+							disabled={isSubmitting}
+							className="bg-orange-500 hover:bg-orange-600 text-white text-xs font-medium px-4"
+						>
+							{isSubmitting ? "Adding..." : "Add SSH Server"}
+						</Button>
+					</div>
+				</form>
+			) : (
+				<form onSubmit={createRegistration} className="space-y-4">
+					<p className="text-xs text-muted-foreground leading-relaxed">
+						Deploy a lightweight agent for firewalled nodes or local homelabs behind NAT. Establishes a secure P2P WireGuard tunnel.
+					</p>
+					<div className="flex flex-col sm:flex-row items-stretch sm:items-end gap-3">
+						<div className="space-y-1 flex-1">
+							<label htmlFor="agent-server-name" className="text-xs font-medium text-foreground">
+								Agent Server Name
+							</label>
+							<Input
+								id="agent-server-name"
+								placeholder="homelab-node-1"
+								value={agentName}
+								onChange={(e) => setAgentName(e.target.value)}
+								className="bg-card border-border/80 text-xs"
+								required
+							/>
+						</div>
+						<Button
+							type="submit"
+							size="sm"
+							variant="outline"
+							disabled={isSubmitting}
+							className="text-xs border-orange-500/40 text-orange-400 hover:bg-orange-500/10 w-full sm:w-auto"
+						>
+							{isSubmitting ? "Generating..." : "Generate Agent Command"}
+						</Button>
+					</div>
+
+					{registrationCommand && (
+						<div className="space-y-2 pt-2">
+							<div className="flex items-center justify-between text-xs text-muted-foreground font-semibold uppercase tracking-wider">
+								<span>Run Docker Command on Target Server</span>
+							</div>
+							<div className="relative rounded-2xl border border-border/80 bg-black/60 p-4 font-mono text-xs text-zinc-300">
+								<p className="break-all sm:pr-20 pb-10 sm:pb-0">{registrationCommand}</p>
+								<Button
+									type="button"
+									variant="ghost"
+									size="sm"
+									onClick={handleCopyCommand}
+									className="absolute right-3 bottom-3 sm:bottom-auto sm:top-3 h-8 bg-card/80 hover:bg-card text-xs text-zinc-300 gap-1.5 px-3 rounded-lg border border-border/40"
+								>
+									{copiedCommand ? (
+										<Check className="h-3.5 w-3.5 text-emerald-400" />
+									) : (
+										<Copy className="h-3.5 w-3.5" />
+									)}
+									{copiedCommand ? "Copied" : "Copy"}
+								</Button>
+							</div>
+						</div>
+					)}
+
+					{registrationError && (
+						<p role="alert" className="text-xs text-red-400 flex items-center gap-1.5">
+							<ShieldAlert className="h-3.5 w-3.5" />
+							{registrationError}
+						</p>
+					)}
+				</form>
+			)}
+		</div>
+	);
+}
diff --git a/apps/web/src/components/settings/servers/ServerPreparationOutput.tsx b/apps/web/src/components/settings/servers/ServerPreparationOutput.tsx
new file mode 100644
index 0000000..65804df
--- /dev/null
+++ b/apps/web/src/components/settings/servers/ServerPreparationOutput.tsx
@@ -0,0 +1,65 @@
+import { Terminal } from "lucide-react";
+
+interface ServerPreparationOutputProps {
+	preparingId: string | null;
+	prepareLogs: { stage: string; message: string }[];
+	prepareDone: boolean;
+	prepareError: string | null;
+}
+
+export function ServerPreparationOutput({
+	preparingId,
+	prepareLogs,
+	prepareDone,
+	prepareError,
+}: ServerPreparationOutputProps) {
+	return (
+		<div className="space-y-4">
+			{preparingId && (
+				<div className="rounded-2xl border border-orange-500/30 bg-black/80 p-4 space-y-3 backdrop-blur-md shadow-2xl">
+					<div className="flex items-center justify-between border-b border-zinc-800 pb-3">
+						<div className="flex items-center gap-2">
+							<Terminal className="h-4 w-4 text-orange-400" />
+							<span className="text-xs font-semibold font-mono text-zinc-200 uppercase tracking-wider">
+								Server Preparation Terminal Output ({prepareLogs.length} events)
+							</span>
+						</div>
+						<div className="flex items-center gap-2">
+							<div className="h-2 w-2 animate-ping rounded-full bg-orange-400" />
+							<span className="text-[10px] text-orange-400 font-mono">Live Stream</span>
+						</div>
+					</div>
+					<div className="max-h-56 overflow-y-auto space-y-1.5 font-mono text-xs pr-2">
+						{prepareLogs.map((entry, i) => (
+							<div key={i} className="flex items-start gap-2">
+								<span className="text-orange-500 font-semibold shrink-0">[{entry.stage}]</span>
+								<span className={entry.stage === "token" ? "text-emerald-400 break-all" : "text-zinc-300"}>
+									{entry.message}
+								</span>
+							</div>
+						))}
+						{prepareLogs.length === 0 && (
+							<div className="text-zinc-500 italic">
+								Initializing SSH connection and bootstrapping container engine...
+							</div>
+						)}
+					</div>
+				</div>
+			)}
+
+			{prepareDone && (
+				<div
+					className={`rounded-2xl border p-4 text-xs font-medium ${
+						prepareError
+							? "border-red-500/40 bg-red-950/20 text-red-400"
+							: "border-emerald-500/40 bg-emerald-950/20 text-emerald-400"
+					}`}
+				>
+					{prepareError
+						? `Server preparation failed: ${prepareError}`
+						: "Node prepared successfully. Container daemon is active and ready for deployments."}
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 4884211..4cb90e1 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -74,7 +74,9 @@
   border: 1px solid hsl(var(--border));
   max-height: 400px;
   overflow-y: auto;
+  overflow-x: auto;
   line-height: 1.6;
+  -webkit-overflow-scrolling: touch;
 }
 
 .log-line {
@@ -88,7 +90,7 @@
 
 .log-line.error {
   color: hsl(0 72% 56%);
-  opacity: 0.7;
+  opacity: 0.85;
 }
 
 .log-stage {
@@ -103,6 +105,35 @@
 
 .log-msg {
   word-break: break-all;
+  min-width: 0;
+}
+
+@media (max-width: 640px) {
+  .log-box {
+    font-size: 11px;
+    padding: 8px 10px;
+    line-height: 1.5;
+    max-height: 320px;
+  }
+  .log-line {
+    flex-direction: column;
+    gap: 1px;
+    margin-bottom: 6px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+    padding-bottom: 4px;
+  }
+  .log-line:last-child {
+    margin-bottom: 0;
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+  .log-stage {
+    font-size: 10px;
+    opacity: 0.9;
+  }
+  .log-msg {
+    padding-left: 2px;
+  }
 }
 
 /* Ko-fi overlay widget inside container */
diff --git a/apps/web/src/routes/Dashboard.tsx b/apps/web/src/routes/Dashboard.tsx
index 61edade..58877dd 100644
--- a/apps/web/src/routes/Dashboard.tsx
+++ b/apps/web/src/routes/Dashboard.tsx
@@ -37,18 +37,15 @@ export function Dashboard() {
 	const { data: projects = [], isLoading } = useProjects();
 	const deleteProject = useDeleteProject();
 
-	// Search and view filter state
 	const [searchTerm, setSearchTerm] = useState("");
 	const [_open, _setOpen] = useState(false);
 
-	// Fetch metrics
 	const { data: metricsText, isLoading: metricsLoading } = useQuery({
 		queryKey: ["metrics"],
 		queryFn: () => api.getMetrics(),
 		refetchInterval: 10000,
 	});
 
-	// Fetch all recent deployments for the "Recent Previews" component
 	const { data: allDeploymentsData, isLoading: deploymentsLoading } = useQuery({
 		queryKey: ["all-deployments"],
 		queryFn: () => api.listDeployments(),
@@ -77,7 +74,6 @@ export function Dashboard() {
 		<div className="space-y-8 max-w-[1400px] mx-auto">
 			<ConfigWarnings />
 
-			{/* Header section with page title & New Project button */}
 			<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-4 border-b border-[#1c1c21]">
 				<div>
 					<h1 className="text-2xl font-bold text-zinc-100 tracking-tight flex items-center gap-2">Overview</h1>
@@ -93,62 +89,56 @@ export function Dashboard() {
 				</div>
 			</div>
 
-			{/* Two Column Layout: Left Column (Stats/Previews) & Right Column (Projects) */}
 			<div className="flex flex-col lg:flex-row gap-8 items-start">
-				{/* Left Side: Stats/Recent Previews */}
 				<div className="w-full lg:w-[320px] shrink-0 space-y-6">
-					{/* Usage Metrics Panel */}
 					<div className="rounded-xl border border-[#1c1c21] bg-[#0c0c0e] p-5 space-y-4">
 						<h3 className="text-xs font-bold uppercase tracking-wider text-zinc-400 flex items-center gap-1.5">
 							<Activity className="h-4 w-4 text-amber-500" />
 							Node Allocation
 						</h3>
 
-						<div className="grid grid-cols-1 gap-3">
-							{/* API Traffic */}
+						<div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-1 gap-3">
 							<div className="relative group/stat overflow-hidden rounded-xl border border-[#1c1c21] bg-[#101012] p-3.5 transition-all duration-300 hover:border-amber-500/20 hover:bg-[#131316]">
 								<div className="flex items-center justify-between">
-									<div className="space-y-1">
+									<div className="space-y-1 min-w-0">
 										<span className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider">API Traffic</span>
-										<div className="text-lg font-bold text-zinc-100 font-mono tracking-tight">
+										<div className="text-lg font-bold text-zinc-100 font-mono tracking-tight truncate">
 											{metricsLoading ? "..." : (metrics?.requestsTotal ?? 0)}
 											<span className="text-xs font-normal text-zinc-500 ml-1">requests</span>
 										</div>
 									</div>
-									<div className="h-9 w-9 rounded-lg bg-amber-500/5 border border-amber-500/10 flex items-center justify-center text-amber-500">
+									<div className="h-9 w-9 rounded-lg bg-amber-500/5 border border-amber-500/10 flex items-center justify-center text-amber-500 shrink-0">
 										<Activity className="h-4 w-4 animate-pulse" />
 									</div>
 								</div>
 							</div>
 
-							{/* Active Deployments */}
 							<div className="relative group/stat overflow-hidden rounded-xl border border-[#1c1c21] bg-[#101012] p-3.5 transition-all duration-300 hover:border-amber-500/20 hover:bg-[#131316]">
 								<div className="flex items-center justify-between">
-									<div className="space-y-1">
+									<div className="space-y-1 min-w-0">
 										<span className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider">
 											Active Deployments
 										</span>
-										<div className="text-lg font-bold text-zinc-100 font-mono tracking-tight flex items-center gap-1.5">
+										<div className="text-lg font-bold text-zinc-100 font-mono tracking-tight flex items-center gap-1.5 truncate">
 											{metricsLoading ? "..." : (metrics?.activeDeployments ?? 0)}
 											<span className="text-xs font-normal text-zinc-500">running</span>
 										</div>
 									</div>
-									<div className="h-9 w-9 rounded-lg bg-rose-500/5 border border-rose-500/10 flex items-center justify-center text-rose-500">
+									<div className="h-9 w-9 rounded-lg bg-rose-500/5 border border-rose-500/10 flex items-center justify-center text-rose-500 shrink-0">
 										<Server className="h-4 w-4" />
 									</div>
 								</div>
 							</div>
 
-							{/* Cluster Ingress Uptime */}
 							<div className="relative group/stat overflow-hidden rounded-xl border border-[#1c1c21] bg-[#101012] p-3.5 transition-all duration-300 hover:border-emerald-500/20 hover:bg-[#131316]">
 								<div className="flex items-center justify-between">
-									<div className="space-y-1">
+									<div className="space-y-1 min-w-0">
 										<span className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider">Cluster Uptime</span>
-										<div className="text-lg font-bold text-zinc-100 font-mono tracking-tight">
+										<div className="text-lg font-bold text-zinc-100 font-mono tracking-tight truncate">
 											{metricsLoading ? "..." : formatUptime(metrics?.uptimeSeconds)}
 										</div>
 									</div>
-									<div className="h-9 w-9 rounded-lg bg-emerald-500/5 border border-emerald-500/10 flex items-center justify-center text-emerald-500">
+									<div className="h-9 w-9 rounded-lg bg-emerald-500/5 border border-emerald-500/10 flex items-center justify-center text-emerald-500 shrink-0">
 										<Clock className="h-4 w-4" />
 									</div>
 								</div>
@@ -156,7 +146,6 @@ export function Dashboard() {
 						</div>
 					</div>
 
-					{/* Recent Previews List */}
 					<div className="rounded-xl border border-[#1c1c21] bg-[#0c0c0e] p-5 space-y-4">
 						<h3 className="text-xs font-bold uppercase tracking-wider text-zinc-400 flex items-center gap-1.5">
 							<Layers className="h-4 w-4 text-rose-500" />
@@ -185,8 +174,8 @@ export function Dashboard() {
 												className="block group/preview border-b border-[#18181c] pb-3 last:border-0 last:pb-0"
 											>
 												<div className="space-y-1">
-													<div className="flex justify-between items-center text-xs">
-														<span className="font-semibold text-zinc-300 truncate max-w-[130px] group-hover/preview:text-amber-400 transition-colors">
+													<div className="flex justify-between items-center text-xs gap-2">
+														<span className="font-semibold text-zinc-300 truncate group-hover/preview:text-amber-400 transition-colors">
 															{project ? project.name : "Unknown Project"}
 														</span>
 														<span className="text-[10px] text-zinc-500 shrink-0 font-mono">
@@ -211,9 +200,7 @@ export function Dashboard() {
 					</div>
 				</div>
 
-				{/* Right Side: Search bar & Projects Grid */}
 				<div className="flex-1 w-full space-y-6">
-					{/* Controls: Search, Layout Filter Toggle */}
 					<div className="flex items-center gap-3 w-full bg-[#0c0c0e] border border-[#1c1c21] p-3 rounded-xl">
 						<div className="relative flex-1 min-w-0">
 							<Search className="absolute left-3 top-2.5 h-4 w-4 text-zinc-500" />
@@ -230,9 +217,8 @@ export function Dashboard() {
 						</span>
 					</div>
 
-					{/* Project List / Grid */}
 					{filteredProjects.length === 0 ? (
-						<div className="flex flex-col items-center justify-center py-20 text-center rounded-xl border border-dashed border-[#222227] bg-[#0c0c0e]/30">
+						<div className="flex flex-col items-center justify-center py-20 text-center rounded-xl border border-dashed border-[#222227] bg-[#0c0c0e]/30 p-4">
 							<div className="w-12 h-12 rounded-2xl bg-[#0c0c0e] border border-[#222227] flex items-center justify-center mb-4">
 								<FolderKanban className="h-6 w-6 text-zinc-650" />
 							</div>
@@ -248,7 +234,7 @@ export function Dashboard() {
 							</Link>
 						</div>
 					) : (
-						<div className="grid gap-4 md:grid-cols-2">
+						<div className="grid gap-4 grid-cols-1 sm:grid-cols-2">
 							{filteredProjects.map((project) => (
 								<ProjectGridCard key={project.id} project={project} onDelete={() => deleteProject.mutate(project.id)} />
 							))}
@@ -263,7 +249,6 @@ export function Dashboard() {
 function ProjectGridCard({ project, onDelete }: { project: any; onDelete: () => void }) {
 	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
 
-	// Query to get the latest deployment for this project
 	const { data: deploymentsData } = useQuery({
 		queryKey: ["deployments-preview", project.id],
 		queryFn: () => api.listDeployments(project.id),
@@ -282,23 +267,21 @@ function ProjectGridCard({ project, onDelete }: { project: any; onDelete: () =>
 				search={{ tab: "deployments" } as any}
 				className="block group relative rounded-xl border border-[#1a1a1f] bg-[#0c0c0e] hover:border-amber-500/20 hover:shadow-xl hover:shadow-amber-500/[0.02] transition-all duration-300 overflow-hidden"
 			>
-				{/* Top Background Gradient Highlight */}
 				<div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-amber-500/0 to-transparent group-hover:via-amber-500/20 transition-all duration-500" />
 
-				{/* Delete button shown only on card hover */}
 				<button
-					className="absolute top-4 right-4 w-7 h-7 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 hover:bg-red-500/10 text-zinc-500 hover:text-red-500 transition-all duration-200 z-10"
+					className="absolute top-3.5 right-3.5 w-7 h-7 rounded-lg flex items-center justify-center opacity-80 sm:opacity-0 sm:group-hover:opacity-100 hover:bg-red-500/10 text-zinc-500 hover:text-red-500 transition-all duration-200 z-10"
 					onClick={(e) => {
 						e.preventDefault();
 						e.stopPropagation();
 						setIsDeleteOpen(true);
 					}}
+					aria-label="Delete project"
 				>
 					<Trash2 className="h-3.5 w-3.5" />
 				</button>
 
-				<div className="p-5 space-y-4">
-					{/* Project Header Info */}
+				<div className="p-4 sm:p-5 space-y-4">
 					<div className="flex items-start gap-3">
 						<div className="w-10 h-10 rounded-xl bg-zinc-800 border border-zinc-700 flex items-center justify-center font-display font-black text-sm shrink-0 shadow-inner text-zinc-200 group-hover:border-amber-500/20 transition-colors">
 							{project.name.charAt(0).toUpperCase()}
@@ -315,7 +298,6 @@ function ProjectGridCard({ project, onDelete }: { project: any; onDelete: () =>
 						</div>
 					</div>
 
-					{/* Live URL or Branch Status */}
 					<div className="flex items-center gap-3 text-xs">
 						{latest ? (
 							<div className="flex items-center gap-2">
@@ -339,34 +321,33 @@ function ProjectGridCard({ project, onDelete }: { project: any; onDelete: () =>
 						)}
 					</div>
 
-					{/* Bottom Metadata: Ingress domain, Git Commit & Deploys count */}
-					<div className="flex items-center gap-4 text-[11px] text-zinc-500 pt-4 border-t border-[#16161a] mt-2 select-none">
+					<div className="flex flex-wrap items-center gap-2.5 sm:gap-4 text-[11px] text-zinc-500 pt-3 sm:pt-4 border-t border-[#16161a] mt-2 select-none">
 						{project.baseDomain ? (
-							<span className="flex items-center gap-1 max-w-[130px] truncate hover:text-zinc-300">
-								<Globe className="h-3 w-3 text-zinc-500" />
-								{project.baseDomain}
+							<span className="flex items-center gap-1 max-w-[120px] sm:max-w-[140px] truncate hover:text-zinc-300">
+								<Globe className="h-3 w-3 text-zinc-500 shrink-0" />
+								<span className="truncate">{project.baseDomain}</span>
 							</span>
 						) : latest?.liveUrl ? (
-							<span className="flex items-center gap-1 max-w-[130px] truncate hover:text-zinc-300">
-								<Globe className="h-3 w-3 text-zinc-500" />
-								{latest.liveUrl.replace("http://", "").replace("https://", "")}
+							<span className="flex items-center gap-1 max-w-[120px] sm:max-w-[140px] truncate hover:text-zinc-300">
+								<Globe className="h-3 w-3 text-zinc-500 shrink-0" />
+								<span className="truncate">{latest.liveUrl.replace("http://", "").replace("https://", "")}</span>
 							</span>
 						) : (
 							<span className="flex items-center gap-1 hover:text-zinc-300">
-								<Globe className="h-3 w-3 text-zinc-500" />
+								<Globe className="h-3 w-3 text-zinc-500 shrink-0" />
 								localhost
 							</span>
 						)}
 
 						{latest?.branch && (
-							<span className="flex items-center gap-1 hover:text-zinc-300 truncate">
-								<GitBranch className="h-3 w-3 text-zinc-500" />
-								{latest.branch}
+							<span className="flex items-center gap-1 hover:text-zinc-300 truncate max-w-[100px]">
+								<GitBranch className="h-3 w-3 text-zinc-500 shrink-0" />
+								<span className="truncate">{latest.branch}</span>
 							</span>
 						)}
 
 						{deployments.length > 0 && (
-							<span className="ml-auto font-medium text-zinc-400 group-hover:text-amber-400 transition-colors">
+							<span className="ml-auto font-medium text-zinc-400 group-hover:text-amber-400 transition-colors shrink-0">
 								{deployments.length} deploys
 							</span>
 						)}
@@ -384,11 +365,11 @@ function ProjectGridCard({ project, onDelete }: { project: any; onDelete: () =>
 							undone and will permanently remove all associated container deployments, environments, and logs.
 						</DialogDescription>
 					</DialogHeader>
-					<DialogFooter className="flex justify-end gap-2 pt-4 border-t border-border/40">
+					<DialogFooter className="flex flex-col-reverse sm:flex-row justify-end gap-2 pt-4 border-t border-border/40">
 						<Button
 							variant="ghost"
 							onClick={() => setIsDeleteOpen(false)}
-							className="h-9 text-xs px-4 rounded-lg hover:bg-[#1a1a21]"
+							className="h-9 text-xs px-4 rounded-lg hover:bg-[#1a1a21] w-full sm:w-auto"
 						>
 							Cancel
 						</Button>
@@ -398,7 +379,7 @@ function ProjectGridCard({ project, onDelete }: { project: any; onDelete: () =>
 								onDelete();
 								setIsDeleteOpen(false);
 							}}
-							className="bg-destructive hover:bg-destructive/90 text-destructive-foreground font-semibold text-xs h-9 px-4 rounded-lg transition-all"
+							className="bg-destructive hover:bg-destructive/90 text-destructive-foreground font-semibold text-xs h-9 px-4 rounded-lg transition-all w-full sm:w-auto"
 						>
 							Delete Project
 						</Button>
diff --git a/apps/web/src/routes/Databases.tsx b/apps/web/src/routes/Databases.tsx
index 195aaaf..fd9d053 100644
--- a/apps/web/src/routes/Databases.tsx
+++ b/apps/web/src/routes/Databases.tsx
@@ -81,7 +81,7 @@ export function Databases() {
 						<Button
 							onClick={() => setIsCreating(true)}
 							size="sm"
-							className="bg-orange-500 hover:bg-orange-600 text-white font-medium shadow-md transition-all gap-1.5 h-11 px-5 rounded-2xl"
+							className="w-full sm:w-auto bg-orange-500 hover:bg-orange-600 text-white font-medium shadow-md transition-all gap-1.5 h-11 px-5 rounded-2xl"
 						>
 							<Plus className="h-4 w-4" />
 							New Database
diff --git a/apps/web/src/routes/Keys.tsx b/apps/web/src/routes/Keys.tsx
index 528c290..baf1f3c 100644
--- a/apps/web/src/routes/Keys.tsx
+++ b/apps/web/src/routes/Keys.tsx
@@ -58,7 +58,7 @@ export function Keys() {
 						</p>
 					</div>
 
-					<div className="flex flex-wrap items-center gap-3">
+					<div className="w-full grid grid-cols-2 gap-2 sm:flex sm:w-auto sm:flex-wrap items-center sm:gap-3">
 						<div className="flex items-center gap-3 rounded-2xl border border-border/60 bg-card/60 px-4 py-3 shadow-inner">
 							<div className="flex h-9 w-9 items-center justify-center rounded-xl bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20">
 								<Key className="h-4 w-4" />
@@ -84,24 +84,24 @@ export function Keys() {
 
 			{/* Main Tabs Navigation */}
 			<Tabs defaultValue="api-tokens" className="space-y-6">
-				<TabsList className="bg-card/60 border border-border/60 p-1 rounded-2xl backdrop-blur-md max-w-md">
+				<TabsList className="bg-card/60 border border-border/60 p-1 rounded-2xl backdrop-blur-md max-w-md flex overflow-x-auto whitespace-nowrap justify-start [scrollbar-width:none] [&::-webkit-scrollbar]:hidden touch-pan-x">
 					<TabsTrigger
 						value="api-tokens"
-						className="rounded-xl text-xs font-medium gap-2 data-[state=active]:bg-orange-500 data-[state=active]:text-white transition-all"
+						className="rounded-xl text-xs font-medium gap-2 data-[state=active]:bg-orange-500 data-[state=active]:text-white transition-all shrink-0"
 					>
 						<Zap className="h-3.5 w-3.5" />
 						API Tokens
 					</TabsTrigger>
 					<TabsTrigger
 						value="ssh-keys"
-						className="rounded-xl text-xs font-medium gap-2 data-[state=active]:bg-orange-500 data-[state=active]:text-white transition-all"
+						className="rounded-xl text-xs font-medium gap-2 data-[state=active]:bg-orange-500 data-[state=active]:text-white transition-all shrink-0"
 					>
 						<KeyRound className="h-3.5 w-3.5" />
 						SSH Key Pool
 					</TabsTrigger>
 					<TabsTrigger
 						value="cli-guide"
-						className="rounded-xl text-xs font-medium gap-2 data-[state=active]:bg-orange-500 data-[state=active]:text-white transition-all"
+						className="rounded-xl text-xs font-medium gap-2 data-[state=active]:bg-orange-500 data-[state=active]:text-white transition-all shrink-0"
 					>
 						<Terminal className="h-3.5 w-3.5" />
 						CLI & API Guide
@@ -135,13 +135,13 @@ export function Keys() {
 									header as a Bearer token:
 								</p>
 								<div className="relative rounded-2xl border border-border/80 bg-black/60 p-4 font-mono text-xs text-zinc-300">
-									<pre className="overflow-x-auto whitespace-pre-wrap">{curlSnippet}</pre>
+									<pre className="overflow-x-auto whitespace-pre-wrap sm:pr-24 pb-8 sm:pb-0">{curlSnippet}</pre>
 									<Button
 										type="button"
 										size="sm"
 										variant="ghost"
 										onClick={handleCopyCurl}
-										className="absolute right-3 top-3 h-8 bg-card/80 hover:bg-card text-xs text-zinc-300 gap-1.5 px-3 rounded-lg border border-border/40"
+										className="absolute right-3 bottom-3 sm:bottom-auto sm:top-3 h-8 bg-card/80 hover:bg-card text-xs text-zinc-300 gap-1.5 px-3 rounded-lg border border-border/40"
 									>
 										{copiedCurl ? (
 											<>
diff --git a/apps/web/src/routes/ProjectDetail.tsx b/apps/web/src/routes/ProjectDetail.tsx
index e5d1826..ab06c22 100644
--- a/apps/web/src/routes/ProjectDetail.tsx
+++ b/apps/web/src/routes/ProjectDetail.tsx
@@ -64,40 +64,46 @@ export function ProjectDetail({ projectId }: { projectId: string }) {
 
 	return (
 		<div>
-			<div className="flex items-center gap-3 mb-6">
-				<Button
-					variant="ghost"
-					size="icon"
-					onClick={() => navigate({ to: "/" })}
-					className="h-8 w-8 text-muted-foreground"
-				>
-					<ArrowLeft className="h-4 w-4" />
-				</Button>
-				<div className="w-9 h-9 rounded-xl bg-primary/10 text-primary flex items-center justify-center font-bold text-sm">
-					{project.name.charAt(0).toUpperCase()}
-				</div>
-				<div>
-					<div className="flex items-center gap-3">
-						<h1 className="text-xl font-bold text-foreground">{project.name}</h1>
-						{liveUrl && (
-							<a
-								href={liveUrl}
-								target="_blank"
-								rel="noreferrer"
-								className="inline-flex items-center gap-1 text-[11px] font-bold text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/20 px-2 py-0.5 rounded-full transition-all duration-200"
-							>
-								{liveUrl} ↗
-							</a>
+			<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
+				<div className="flex items-start sm:items-center gap-3 min-w-0">
+					<Button
+						variant="ghost"
+						size="icon"
+						onClick={() => navigate({ to: "/" })}
+						className="h-8 w-8 text-muted-foreground shrink-0 mt-0.5 sm:mt-0"
+					>
+						<ArrowLeft className="h-4 w-4" />
+					</Button>
+					<div className="w-9 h-9 rounded-xl bg-primary/10 text-primary flex items-center justify-center font-bold text-sm shrink-0">
+						{project.name.charAt(0).toUpperCase()}
+					</div>
+					<div className="min-w-0">
+						<div className="flex flex-wrap items-center gap-2">
+							<h1 className="text-xl font-bold text-foreground truncate">{project.name}</h1>
+							{liveUrl && (
+								<a
+									href={liveUrl}
+									target="_blank"
+									rel="noreferrer"
+									className="inline-flex items-center gap-1 text-[11px] font-bold text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/20 px-2 py-0.5 rounded-full transition-all duration-200 truncate max-w-[240px]"
+								>
+									<span className="truncate">{liveUrl}</span> ↗
+								</a>
+							)}
+						</div>
+						{project.description && (
+							<p className="text-muted-foreground text-xs sm:text-sm mt-0.5 line-clamp-2">
+								{project.description}
+							</p>
 						)}
 					</div>
-					{project.description && <p className="text-muted-foreground text-sm mt-0.5">{project.description}</p>}
 				</div>
 			</div>
 
 			<Tabs value={activeTab} onValueChange={(val) => navigate({ search: { tab: val } as any })} className="space-y-4">
 				<TabsList
 					ref={tabsListRef}
-					className="mb-6 flex overflow-x-auto whitespace-nowrap justify-start h-auto p-1 bg-[#141417] border border-[#222227] rounded-lg max-w-full [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+					className="mb-6 flex overflow-x-auto whitespace-nowrap justify-start h-auto p-1 bg-[#141417] border border-[#222227] rounded-lg max-w-full [scrollbar-width:none] [&::-webkit-scrollbar]:hidden touch-pan-x"
 				>
 					<TabsTrigger
 						value="deployments"
diff --git a/apps/web/src/routes/Settings.tsx b/apps/web/src/routes/Settings.tsx
index b544879..177f58a 100644
--- a/apps/web/src/routes/Settings.tsx
+++ b/apps/web/src/routes/Settings.tsx
@@ -1,7 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
-import { GitBranch, Mail, Server, Settings2, ShieldCheck } from "lucide-react";
+import { GitBranch, Mail, Server, Settings2, ShieldCheck, Trash2 } from "lucide-react";
 import * as api from "../api/client";
 import { ConfigWarnings } from "../components/ConfigWarnings";
+import { DeleteProjectsSection } from "../components/settings/DeleteProjectsSection";
 import { GithubIntegrationSection } from "../components/settings/GithubIntegrationSection";
 import { ServersSection } from "../components/settings/ServersSection";
 import { SmtpSection } from "../components/settings/SmtpSection";
@@ -46,12 +47,11 @@ export function Settings() {
 							Platform Settings
 						</h1>
 						<p className="max-w-2xl text-xs md:text-sm text-muted-foreground leading-relaxed">
-							Configure cluster infrastructure nodes, external GitHub OAuth provider integrations, and SMTP notification
-							dispatchers.
+							Configure cluster infrastructure nodes, external GitHub OAuth provider integrations, SMTP notifications, and project management.
 						</p>
 					</div>
 
-					<div className="flex flex-wrap items-center gap-3">
+					<div className="w-full grid grid-cols-2 gap-2 sm:flex sm:w-auto sm:flex-wrap items-center sm:gap-3">
 						<div className="flex items-center gap-3 rounded-2xl border border-border/60 bg-card/60 px-4 py-3 shadow-inner">
 							<div className="flex h-9 w-9 items-center justify-center rounded-xl bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20">
 								<Server className="h-4 w-4" />
@@ -81,28 +81,35 @@ export function Settings() {
 
 			{/* Main Settings Tabs */}
 			<Tabs defaultValue="servers" className="space-y-6">
-				<TabsList className="bg-card/60 border border-border/60 p-1 rounded-2xl backdrop-blur-md max-w-lg">
+				<TabsList className="bg-card/60 border border-border/60 p-1 rounded-2xl backdrop-blur-md max-w-2xl flex overflow-x-auto whitespace-nowrap justify-start [scrollbar-width:none] [&::-webkit-scrollbar]:hidden touch-pan-x">
 					<TabsTrigger
 						value="servers"
-						className="rounded-xl text-xs font-medium gap-2 data-[state=active]:bg-orange-500 data-[state=active]:text-white transition-all"
+						className="rounded-xl text-xs font-medium gap-2 data-[state=active]:bg-orange-500 data-[state=active]:text-white transition-all shrink-0"
 					>
 						<Server className="h-3.5 w-3.5" />
 						Servers & Nodes
 					</TabsTrigger>
 					<TabsTrigger
 						value="github"
-						className="rounded-xl text-xs font-medium gap-2 data-[state=active]:bg-orange-500 data-[state=active]:text-white transition-all"
+						className="rounded-xl text-xs font-medium gap-2 data-[state=active]:bg-orange-500 data-[state=active]:text-white transition-all shrink-0"
 					>
 						<GitBranch className="h-3.5 w-3.5" />
 						GitHub Integration
 					</TabsTrigger>
 					<TabsTrigger
 						value="smtp"
-						className="rounded-xl text-xs font-medium gap-2 data-[state=active]:bg-orange-500 data-[state=active]:text-white transition-all"
+						className="rounded-xl text-xs font-medium gap-2 data-[state=active]:bg-orange-500 data-[state=active]:text-white transition-all shrink-0"
 					>
 						<Mail className="h-3.5 w-3.5" />
 						SMTP Notifications
 					</TabsTrigger>
+					<TabsTrigger
+						value="danger"
+						className="rounded-xl text-xs font-medium gap-2 data-[state=active]:bg-red-500 data-[state=active]:text-white transition-all shrink-0 text-red-400 hover:text-red-300"
+					>
+						<Trash2 className="h-3.5 w-3.5" />
+						Delete Projects
+					</TabsTrigger>
 				</TabsList>
 
 				<TabsContent value="servers">
@@ -116,6 +123,10 @@ export function Settings() {
 				<TabsContent value="smtp">
 					<SmtpSection />
 				</TabsContent>
+
+				<TabsContent value="danger">
+					<DeleteProjectsSection />
+				</TabsContent>
 			</Tabs>
 		</div>
 	);
diff --git a/apps/web/src/routes/SharedEnv.tsx b/apps/web/src/routes/SharedEnv.tsx
index 93b6e4c..7afa783 100644
--- a/apps/web/src/routes/SharedEnv.tsx
+++ b/apps/web/src/routes/SharedEnv.tsx
@@ -37,7 +37,7 @@ export function SharedEnv() {
 						</p>
 					</div>
 
-					<div className="flex flex-wrap items-center gap-3">
+					<div className="w-full grid grid-cols-2 gap-2 sm:flex sm:w-auto sm:flex-wrap items-center sm:gap-3">
 						<div className="flex items-center gap-3 rounded-2xl border border-border/60 bg-card/60 px-4 py-3 shadow-inner">
 							<div className="flex h-9 w-9 items-center justify-center rounded-xl bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20">
 								<Layers className="h-4 w-4" />