From 3c1099efdf2703803fd0328a4d52636bc03932ec Mon Sep 17 00:00:00 2001
From: Matiss Jurevics <matissjurevics@gmail.com>
Date: Thu, 16 Apr 2026 14:45:00 +0100
Subject: [PATCH] feat(web): refresh simulator dashboard UI

---
 WebApp/src/app.css                            |  37 +---
 WebApp/src/lib/app/controller.js              |  33 ---
 .../src/lib/components/ui/alert/alert.svelte  |   1 +
 .../lib/components/ui/button/button.svelte    |   1 +
 WebApp/src/lib/components/ui/card/card.svelte |  38 +++-
 .../ui/dialog/dialog-content.svelte           |  10 +-
 .../src/lib/components/ui/skeleton/index.ts   |   7 +
 .../components/ui/skeleton/skeleton.svelte    |  16 ++
 WebApp/src/lib/components/ui/switch/index.ts  |   7 +
 .../lib/components/ui/switch/switch.svelte    |  25 +++
 WebApp/src/lib/sim/ui/AppChrome.svelte        | 123 +++++-------
 WebApp/src/routes/+page.svelte                |  15 +-
 WebApp/src/routes/activity/+page.svelte       |  30 ++-
 WebApp/src/routes/camera/+page.svelte         | 190 +++++++++---------
 WebApp/src/routes/client/+page.svelte         | 177 ++++++++--------
 WebApp/src/routes/onboarding/+page.svelte     |  16 +-
 WebApp/src/routes/settings/+page.svelte       |  88 ++++----
 17 files changed, 407 insertions(+), 407 deletions(-)
 create mode 100644 WebApp/src/lib/components/ui/skeleton/index.ts
 create mode 100644 WebApp/src/lib/components/ui/skeleton/skeleton.svelte
 create mode 100644 WebApp/src/lib/components/ui/switch/index.ts
 create mode 100644 WebApp/src/lib/components/ui/switch/switch.svelte

diff --git a/WebApp/src/app.css b/WebApp/src/app.css
index 65201fc..60ddff0 100644
--- a/WebApp/src/app.css
+++ b/WebApp/src/app.css
@@ -38,7 +38,6 @@
 	--sidebar-border: oklch(0.922 0 0);
 	--sidebar-ring: oklch(0.708 0 0);
 }
-
 .dark {
 	--background: oklch(0.145 0 0);
 	--foreground: oklch(0.985 0 0);
@@ -109,6 +108,13 @@
 	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 	--color-sidebar-border: var(--sidebar-border);
 	--color-sidebar-ring: var(--sidebar-ring);
+
+	/* Custom brand colors and glassmorphism tokens */
+	--color-premium: #2563eb;
+	--color-premium-foreground: #ffffff;
+	--color-glass-background: rgb(25 25 30 / 60%);
+	--color-glass-border: rgb(255 255 255 / 8%);
+	--color-glass-panel: rgb(15 15 20 / 70%);
 }
 
 @layer base {
@@ -123,7 +129,7 @@
 	}
 }
 
-/* Preserve existing simulator utility styles alongside shadcn tokens. */
+/* Scrollbar customizations */
 ::-webkit-scrollbar {
 	width: 6px;
 	height: 6px;
@@ -142,29 +148,6 @@
 	background: rgb(255 255 255 / 20%);
 }
 
-.glass-panel {
-	background: rgb(15 15 20 / 70%);
-	backdrop-filter: blur(16px);
-	border: 1px solid rgb(255 255 255 / 5%);
-}
-
-.glass-card {
-	background: rgb(25 25 30 / 60%);
-	border: 1px solid rgb(255 255 255 / 8%);
-}
-
-.btn-premium {
-	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-	border: none;
-	color: white;
-	transition: all 0.2s ease;
-}
-
-.btn-premium:hover {
-	transform: translateY(-1px);
-	box-shadow: 0 4px 12px rgb(37 99 235 / 30%);
-}
-
 .status-dot {
 	height: 8px;
 	width: 8px;
@@ -193,7 +176,3 @@
 		opacity: 1;
 	}
 }
-
-.toast-enter {
-	animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
diff --git a/WebApp/src/lib/app/controller.js b/WebApp/src/lib/app/controller.js
index d2c431d..44a0c2e 100644
--- a/WebApp/src/lib/app/controller.js
+++ b/WebApp/src/lib/app/controller.js
@@ -805,39 +805,6 @@ const stopPolling = () => {
 	}
 };
 
-const pollClientData = async () => {
-	const { device } = getAppState();
-	if (!device || device.role !== 'client') return;
-
-	const [recs, links, deviceList, notifications] = await Promise.all([
-		api.ops.listRecordings().catch(() => ({ recordings: [] })),
-		api.devices.listLinks().catch(() => ({ links: [] })),
-		api.devices.list().catch(() => ({ devices: [] })),
-		api.ops.listNotifications().catch(() => ({ notifications: [] }))
-	]);
-
-	const cameraById = new Map(
-		(deviceList.devices || [])
-			.filter((entry) => entry.role === 'camera')
-			.map((entry) => [entry.id, entry])
-	);
-
-	const linkedCameras = (links.links || []).map((link) => {
-		const camera = cameraById.get(link.cameraDeviceId);
-		return {
-			...link,
-			cameraName: camera?.name ?? null,
-			cameraStatus: camera?.status ?? 'offline'
-		};
-	});
-
-	setAppState({
-		recordings: recs.recordings || [],
-		linkedCameras
-	});
-	syncMotionNotificationsFromDeliveries(notifications.notifications);
-};
-
 const startPolling = () => {
 	stopPolling();
 	void pollClientData();
diff --git a/WebApp/src/lib/components/ui/alert/alert.svelte b/WebApp/src/lib/components/ui/alert/alert.svelte
index abf7487..d7bc03c 100644
--- a/WebApp/src/lib/components/ui/alert/alert.svelte
+++ b/WebApp/src/lib/components/ui/alert/alert.svelte
@@ -7,6 +7,7 @@
 			variant: {
 				default: "bg-card text-card-foreground",
 				destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+				glass: "bg-glass-background border-glass-border backdrop-blur-xl shadow-lg",
 			},
 		},
 		defaultVariants: {
diff --git a/WebApp/src/lib/components/ui/button/button.svelte b/WebApp/src/lib/components/ui/button/button.svelte
index 89cedcb..1ae7f3a 100644
--- a/WebApp/src/lib/components/ui/button/button.svelte
+++ b/WebApp/src/lib/components/ui/button/button.svelte
@@ -13,6 +13,7 @@
 				ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
 				destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
 				link: "text-primary underline-offset-4 hover:underline",
+				premium: "bg-premium text-premium-foreground shadow-lg shadow-premium/20 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-premium/30 active:translate-y-0",
 			},
 			size: {
 				default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
diff --git a/WebApp/src/lib/components/ui/card/card.svelte b/WebApp/src/lib/components/ui/card/card.svelte
index 2b4f81a..de42e90 100644
--- a/WebApp/src/lib/components/ui/card/card.svelte
+++ b/WebApp/src/lib/components/ui/card/card.svelte
@@ -1,21 +1,51 @@
-<script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+<script lang="ts" module>
 	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
 
+	export const cardVariants = tv({
+		base: "bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				glass: "bg-glass-background border-glass-border border ring-0 backdrop-blur-xl shadow-2xl",
+			},
+			size: {
+				default: "gap-4 py-4 data-[size=sm]:gap-3 data-[size=sm]:py-3",
+				sm: "gap-3 py-3",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type CardVariant = VariantProps<typeof cardVariants>["variant"];
+	export type CardSize = VariantProps<typeof cardVariants>["size"];
+
+	export type CardProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: CardVariant;
+		size?: CardSize;
+	};
+</script>
+
+<script lang="ts">
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		variant = "default",
 		size = "default",
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
+	}: CardProps = $props();
 </script>
 
 <div
 	bind:this={ref}
 	data-slot="card"
 	data-size={size}
-	class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
+	class={cn(cardVariants({ variant, size }), className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/WebApp/src/lib/components/ui/dialog/dialog-content.svelte b/WebApp/src/lib/components/ui/dialog/dialog-content.svelte
index c0551ee..f035598 100644
--- a/WebApp/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/WebApp/src/lib/components/ui/dialog/dialog-content.svelte
@@ -14,12 +14,19 @@
 		portalProps,
 		children,
 		showCloseButton = true,
+		variant = "default",
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
 		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
 		children: Snippet;
 		showCloseButton?: boolean;
+		variant?: "default" | "glass";
 	} = $props();
+
+	const variantClasses = {
+		default: "bg-popover text-popover-foreground ring-1 ring-foreground/10",
+		glass: "bg-glass-background border-glass-border border backdrop-blur-xl shadow-2xl text-foreground"
+	};
 </script>
 
 <DialogPortal {...portalProps}>
@@ -28,7 +35,8 @@
 		bind:ref
 		data-slot="dialog-content"
 		class={cn(
-			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+			variantClasses[variant],
 			className
 		)}
 		{...restProps}
diff --git a/WebApp/src/lib/components/ui/skeleton/index.ts b/WebApp/src/lib/components/ui/skeleton/index.ts
new file mode 100644
index 0000000..186db21
--- /dev/null
+++ b/WebApp/src/lib/components/ui/skeleton/index.ts
@@ -0,0 +1,7 @@
+import Root from "./skeleton.svelte";
+
+export {
+	Root,
+	//
+	Root as Skeleton,
+};
diff --git a/WebApp/src/lib/components/ui/skeleton/skeleton.svelte b/WebApp/src/lib/components/ui/skeleton/skeleton.svelte
new file mode 100644
index 0000000..187e4ff
--- /dev/null
+++ b/WebApp/src/lib/components/ui/skeleton/skeleton.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("bg-muted animate-pulse rounded-md", className)}
+	{...restProps}
+></div>
diff --git a/WebApp/src/lib/components/ui/switch/index.ts b/WebApp/src/lib/components/ui/switch/index.ts
new file mode 100644
index 0000000..f5533db
--- /dev/null
+++ b/WebApp/src/lib/components/ui/switch/index.ts
@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch,
+};
diff --git a/WebApp/src/lib/components/ui/switch/switch.svelte b/WebApp/src/lib/components/ui/switch/switch.svelte
new file mode 100644
index 0000000..874dbe8
--- /dev/null
+++ b/WebApp/src/lib/components/ui/switch/switch.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		class: className,
+		checked = $bindable(false),
+		...restProps
+	}: SwitchPrimitive.RootProps = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:checked
+	class={cn(
+		"focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		class={cn(
+			"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+		)}
+	/>
+</SwitchPrimitive.Root>
diff --git a/WebApp/src/lib/sim/ui/AppChrome.svelte b/WebApp/src/lib/sim/ui/AppChrome.svelte
index c2589ad..20d0e86 100644
--- a/WebApp/src/lib/sim/ui/AppChrome.svelte
+++ b/WebApp/src/lib/sim/ui/AppChrome.svelte
@@ -9,6 +9,18 @@
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '$lib/components/ui/dialog/index.js';
 	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+	import {
+		LayoutDashboard,
+		Bell,
+		Settings,
+		X,
+		Download,
+		Info,
+		AlertTriangle,
+		RefreshCw,
+		CheckCircle2
+	} from '@lucide/svelte';
 
 	let { children, pageKey } = $props<{ children: () => unknown; pageKey: string }>();
 	let recordingDialogOpen = $state(false);
@@ -51,11 +63,22 @@
 	<div id="toast-container" class="fixed top-4 right-4 z-50 flex w-[22rem] flex-col gap-3">
 		{#each $appState.toasts as toast (toast.id)}
 			<Alert
-				variant={toast.type === 'error' ? 'destructive' : 'default'}
-				class="glass-card border-white/10 bg-background/95 shadow-lg"
+				variant={toast.type === 'error' ? 'destructive' : 'glass'}
+				class="shadow-lg"
 			>
-				<AlertTitle class="text-xs">{toastTitle(toast.type)}</AlertTitle>
-				<AlertDescription class="pr-8 text-xs text-gray-300">{toast.message}</AlertDescription>
+				<div class="flex items-start gap-3">
+					{#if toast.type === 'error'}
+						<AlertTriangle class="size-4 shrink-0 text-destructive" />
+					{:else if toast.type === 'success'}
+						<CheckCircle2 class="size-4 shrink-0 text-emerald-500" />
+					{:else}
+						<Info class="size-4 shrink-0 text-blue-500" />
+					{/if}
+					<div class="flex-1">
+						<AlertTitle class="text-xs">{toastTitle(toast.type)}</AlertTitle>
+						<AlertDescription class="pr-8 text-xs text-gray-300">{toast.message}</AlertDescription>
+					</div>
+				</div>
 				<AlertAction>
 					<Button
 						variant="ghost"
@@ -63,9 +86,7 @@
 						class="text-gray-400 hover:text-white"
 						onclick={() => appController.removeToast(toast.id)}
 					>
-						<svg data-icon="inline-start" xmlns="http://www.w3.org/2000/svg" class="size-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-						</svg>
+						<X class="size-3.5" />
 						<span class="sr-only">Dismiss notification</span>
 					</Button>
 				</AlertAction>
@@ -73,7 +94,8 @@
 		{/each}
 
 		{#if $pwaState.installAvailable}
-			<Alert class="glass-card border-white/10 bg-background/95 shadow-lg">
+			<Alert variant="glass" class="shadow-lg">
+				<Download class="size-4 shrink-0 text-blue-500" />
 				<AlertTitle class="text-xs">Install App</AlertTitle>
 				<AlertDescription class="pr-8 text-xs text-gray-300">
 					Add PhoneCam to your home screen for a more native dashboard experience.
@@ -93,7 +115,8 @@
 		{/if}
 
 		{#if $pwaState.showIosInstallHint}
-			<Alert class="glass-card border-white/10 bg-background/95 shadow-lg">
+			<Alert variant="glass" class="shadow-lg">
+				<Info class="size-4 shrink-0 text-blue-500" />
 				<AlertTitle class="text-xs">Install on iPhone</AlertTitle>
 				<AlertDescription class="pr-8 text-xs text-gray-300">
 					In Safari, tap the Share button, then choose “Add to Home Screen” to install PhoneCam.
@@ -108,6 +131,7 @@
 
 		{#if $pwaState.updateAvailable}
 			<Alert class="glass-card border-blue-500/20 bg-background/95 shadow-lg">
+				<RefreshCw class="size-4 shrink-0 text-blue-500" />
 				<AlertTitle class="text-xs">Update Ready</AlertTitle>
 				<AlertDescription class="pr-8 text-xs text-gray-300">
 					A newer version of PhoneCam is ready. Reload to use the latest app shell.
@@ -121,7 +145,8 @@
 		{/if}
 
 		{#if $pwaState.offlineReady}
-			<Alert class="glass-card border-emerald-500/20 bg-background/95 shadow-lg">
+			<Alert variant="glass" class="border-emerald-500/20 shadow-lg">
+				<CheckCircle2 class="size-4 shrink-0 text-emerald-500" />
 				<AlertTitle class="text-xs">Offline Shell Ready</AlertTitle>
 				<AlertDescription class="pr-8 text-xs text-gray-300">
 					The app shell is now cached for quicker relaunches, but live camera features still need connectivity.
@@ -142,20 +167,20 @@
 		{#if showSidebarSkeleton()}
 			<div class="p-4 lg:p-6">
 				<div class="flex items-center justify-center gap-3 lg:justify-start">
-					<div class="size-10 rounded-full bg-white/8 animate-pulse"></div>
+					<Skeleton class="size-10 rounded-full" />
 					<div class="hidden min-w-0 flex-1 flex-col gap-2 lg:flex">
-						<div class="h-3 w-28 rounded-full bg-white/8 animate-pulse"></div>
-						<div class="h-2.5 w-36 rounded-full bg-white/6 animate-pulse"></div>
+						<Skeleton class="h-3 w-28 rounded-full" />
+						<Skeleton class="h-2.5 w-36 rounded-full" />
 					</div>
 				</div>
 				<div class="mt-3 flex items-center justify-center lg:justify-start">
-					<div class="h-6 w-24 rounded-full bg-white/8 animate-pulse"></div>
+					<Skeleton class="h-6 w-24 rounded-full" />
 				</div>
 			</div>
 			<Separator class="bg-white/5" />
 			<nav class="flex flex-1 flex-col gap-2 py-6 px-3">
 				{#each Array(3) as _, index (index)}
-					<div class="h-12 w-full rounded-xl bg-white/6 animate-pulse"></div>
+					<Skeleton class="h-12 w-full rounded-xl" />
 				{/each}
 			</nav>
 		{:else}
@@ -187,21 +212,7 @@
 					class="nav-btn h-12 w-full justify-center gap-3 rounded-xl border border-transparent text-gray-400 hover:text-white lg:justify-start"
 					onclick={() => appController.navigate('home')}
 				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						data-icon="inline-start"
-						class="h-5 w-5 shrink-0"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-						/>
-					</svg>
+					<LayoutDashboard class="h-5 w-5 shrink-0" />
 					<span class="font-medium hidden lg:block text-sm">Dashboard</span>
 				</Button>
 
@@ -210,21 +221,7 @@
 					class="nav-btn relative h-12 w-full justify-center gap-3 rounded-xl border border-transparent text-gray-400 hover:text-white lg:justify-start"
 					onclick={() => appController.navigate('activity')}
 				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						data-icon="inline-start"
-						class="h-5 w-5 shrink-0"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
-						/>
-					</svg>
+					<Bell class="h-5 w-5 shrink-0" />
 					<span class="font-medium hidden lg:block text-sm">Activity Feed</span>
 					{#if $unreadNotificationsCount > 0}
 						<Badge
@@ -246,27 +243,7 @@
 					class="nav-btn h-12 w-full justify-center gap-3 rounded-xl border border-transparent text-gray-400 hover:text-white lg:justify-start"
 					onclick={() => appController.navigate('settings')}
 				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						data-icon="inline-start"
-						class="h-5 w-5 shrink-0"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-						/>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-						/>
-					</svg>
+					<Settings class="h-5 w-5 shrink-0" />
 					<span class="font-medium hidden lg:block text-sm">Settings</span>
 				</Button>
 			</nav>
@@ -276,8 +253,11 @@
 	<main class="flex-1 flex flex-col h-full overflow-hidden relative">
 		{#if $pwaState.isOffline}
 			<div class="px-4 pt-4 md:px-8 md:pt-6 lg:px-10">
-				<Alert class="glass-card border-amber-500/20 bg-[#141418]/95 shadow-lg">
-					<AlertTitle class="text-xs uppercase tracking-wide text-amber-300">{offlineTitle()}</AlertTitle>
+				<Alert variant="glass" class="border-amber-500/20 shadow-lg">
+					<div class="flex items-center gap-3">
+						<AlertTriangle class="size-4 text-amber-500" />
+						<AlertTitle class="text-xs uppercase tracking-wide text-amber-300">{offlineTitle()}</AlertTitle>
+					</div>
 					<AlertDescription class="text-xs text-gray-300">
 						{offlineDescription()}
 					</AlertDescription>
@@ -294,7 +274,8 @@
 	<DialogContent
 		id="recordingModal"
 		showCloseButton={false}
-		class="glass-card max-w-5xl border-white/10 bg-[#101014]/95 p-0 shadow-2xl sm:max-w-5xl"
+		variant="glass"
+		class="max-w-5xl p-0"
 	>
 		<DialogHeader class="gap-3 px-6 pt-6">
 			<div class="flex items-center justify-between gap-4">
@@ -313,9 +294,7 @@
 					title="Close recording modal"
 					onclick={() => appController.closeRecordingModal()}
 				>
-					<svg data-icon="inline-start" xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-					</svg>
+					<X class="size-4" />
 				</Button>
 			</div>
 		</DialogHeader>
diff --git a/WebApp/src/routes/+page.svelte b/WebApp/src/routes/+page.svelte
index a475af1..eae7b4e 100644
--- a/WebApp/src/routes/+page.svelte
+++ b/WebApp/src/routes/+page.svelte
@@ -8,23 +8,17 @@
 	import { Input } from '$lib/components/ui/input/index.js';
 	import { Label } from '$lib/components/ui/label/index.js';
 	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { ShieldCheck } from '@lucide/svelte';
 </script>
 
 <AppChrome pageKey="auth">
 	<section id="screen-auth" class="flex flex-col items-center justify-center min-h-[70vh] animate-fade-in max-w-sm mx-auto">
-		<Card class="glass-card w-full rounded-3xl border-white/10 bg-[#16161d]/80 shadow-2xl">
+		<Card variant="glass" class="w-full rounded-3xl">
 			<CardHeader class="items-center gap-4 px-6 pt-6 text-center">
 				<div
 					class="flex size-20 items-center justify-center rounded-3xl bg-gradient-to-tr from-blue-600 to-indigo-600 shadow-lg shadow-blue-900/20"
 				>
-					<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
-						/>
-					</svg>
+					<ShieldCheck class="size-10 text-white" />
 				</div>
 				<div class="flex flex-col gap-2">
 					<CardTitle class="text-3xl font-bold tracking-tight text-white">PhoneCam Web</CardTitle>
@@ -71,7 +65,8 @@
 			<CardFooter class="flex flex-col items-stretch gap-4 border-0 bg-transparent px-6 pb-6 pt-2">
 				<Button
 					id="signInBtn"
-					class="btn-premium h-12 w-full rounded-xl text-base text-white shadow-lg shadow-blue-900/20"
+					variant="premium"
+					class="h-12 w-full rounded-xl text-base shadow-lg shadow-blue-900/20"
 					onclick={() => appController.submitAuth()}
 				>
 					{$appState.isRegistering ? 'Create Account' : 'Sign In'}
diff --git a/WebApp/src/routes/activity/+page.svelte b/WebApp/src/routes/activity/+page.svelte
index 359d6c3..66ebb6f 100644
--- a/WebApp/src/routes/activity/+page.svelte
+++ b/WebApp/src/routes/activity/+page.svelte
@@ -7,6 +7,7 @@
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
 	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import { BellOff, Trash2, Calendar } from '@lucide/svelte';
 </script>
 
 <AppChrome pageKey="activity">
@@ -16,14 +17,15 @@
 			<Button
 				id="clearActivityBtn"
 				variant="ghost"
-				class="rounded-xl border border-transparent text-gray-400 hover:bg-white/5 hover:text-white"
+				class="rounded-xl border border-white/5 text-gray-400 hover:bg-white/5 hover:text-white"
 				onclick={() => appController.clearNotifications()}
 			>
+				<Trash2 class="size-4 mr-2" />
 				Clear Read
 			</Button>
 		</div>
 
-		<Card class="glass-card rounded-3xl border-white/10 bg-[#16161d]/80">
+		<Card variant="glass" class="rounded-3xl">
 			<CardHeader>
 				<CardTitle class="text-sm font-semibold tracking-wide text-white">Motion Alerts</CardTitle>
 			</CardHeader>
@@ -31,17 +33,10 @@
 				<ScrollArea class="max-h-[32rem] pr-3">
 					<div id="activityFeedList" class="flex flex-col gap-3">
 				{#if $appState.motionNotifications.length === 0}
-						<Alert class="border-white/10 bg-black/20 text-center opacity-70">
-						<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
-							/>
-						</svg>
-							<AlertTitle class="justify-self-center text-sm text-gray-200">All quiet</AlertTitle>
-							<AlertDescription class="justify-self-center text-sm text-gray-400">
+						<Alert variant="default" class="border-white/10 bg-black/20 text-center opacity-70 py-10">
+							<BellOff class="h-12 w-12 mx-auto mb-4 text-gray-600" />
+							<AlertTitle class="text-sm text-gray-200">All quiet</AlertTitle>
+							<AlertDescription class="text-sm text-gray-400">
 								No notifications yet.
 							</AlertDescription>
 						</Alert>
@@ -50,11 +45,14 @@
 							<Button
 								type="button"
 								variant="ghost"
-								class="h-auto w-full flex-col items-start gap-1 rounded-xl border border-white/5 px-4 py-3 text-left {notification.isRead ? 'bg-gray-900/30 text-gray-200' : 'bg-blue-900/20 text-white'}"
+								class="h-auto w-full flex-col items-start gap-1 rounded-xl border border-white/5 px-4 py-3 text-left transition-all hover:bg-white/5 {notification.isRead ? 'bg-gray-900/30 text-gray-400' : 'bg-blue-600/10 text-white border-blue-500/20'}"
 							onclick={() => appController.openMotionNotificationTarget(notification.id, notification.cameraDeviceId)}
 						>
-								<p class="text-xs font-medium">{notification.message}</p>
-								<p class="text-[10px] text-gray-500">{new Date(notification.createdAt).toLocaleString()}</p>
+								<p class="text-sm font-semibold">{notification.message}</p>
+								<div class="flex items-center gap-2 mt-1">
+									<Calendar class="size-3 text-gray-500" />
+									<p class="text-[10px] text-gray-500">{new Date(notification.createdAt).toLocaleString()}</p>
+								</div>
 							</Button>
 					{/each}
 				{/if}
diff --git a/WebApp/src/routes/camera/+page.svelte b/WebApp/src/routes/camera/+page.svelte
index 245164a..0e97469 100644
--- a/WebApp/src/routes/camera/+page.svelte
+++ b/WebApp/src/routes/camera/+page.svelte
@@ -10,6 +10,17 @@
 	import { Label } from '$lib/components/ui/label/index.js';
 	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
 	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/components/ui/select/index.js';
+	import { Switch } from '$lib/components/ui/switch/index.js';
+	import {
+		VideoOff,
+		RefreshCw,
+		Zap,
+		Square,
+		Activity,
+		Settings2,
+		Terminal,
+		Camera
+	} from '@lucide/svelte';
 
 	let cameraVideoElement: HTMLVideoElement | null = null;
 
@@ -40,7 +51,7 @@
 <AppChrome pageKey="camera">
 	<section id="screen-home-camera" class="mx-auto flex h-full min-h-0 max-w-7xl flex-col gap-4 lg:gap-6">
 		<div class="flex flex-col gap-4 lg:gap-6 xl:flex-1 xl:min-h-0">
-			<Card class="glass-card relative flex min-h-[220px] overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80 sm:min-h-[260px] xl:flex-[3]">
+			<Card variant="glass" class="relative flex min-h-[220px] overflow-hidden sm:min-h-[260px] xl:flex-[3]">
 				<div id="cameraPreview" class="flex-1 bg-black relative flex items-center justify-center {$appState.isMotionActive ? 'bg-red-900/20' : ''}">
 					<video
 						id="cameraVideo"
@@ -52,10 +63,10 @@
 					></video>
 					<Badge
 						variant="destructive"
-						class="absolute top-4 left-4 z-20 gap-2 rounded-full border border-white/10 bg-black/50 px-3 py-1.5 text-white backdrop-blur"
+						class="absolute top-4 left-4 z-20 gap-2 rounded-full border border-white/10 bg-black/50 px-3 py-1.5 backdrop-blur"
 					>
-						<span class="w-2.5 h-2.5 bg-red-500 rounded-full shadow-[0_0_8px_rgba(239,68,68,0.8)] animate-pulse"></span>
-						<span class="text-xs font-medium tracking-wide">REC</span>
+						<span class="w-2 h-2 bg-red-500 rounded-full shadow-[0_0_8px_rgba(239,68,68,0.8)] animate-pulse"></span>
+						<span class="text-[10px] font-bold tracking-widest">REC</span>
 					</Badge>
 				</div>
 
@@ -63,27 +74,20 @@
 					id="cameraOfflineOverlay"
 					class="absolute inset-0 bg-[#0a0a0c]/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center gap-4 {$appState.socketConnected ? 'hidden' : ''}"
 				>
-					<Alert class="w-full max-w-sm border-white/10 bg-[#141418]/90 text-center shadow-xl">
-						<svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-16 w-16 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
-							/>
-						</svg>
-						<AlertTitle class="justify-self-center text-base text-white">Camera Offline</AlertTitle>
-						<AlertDescription class="justify-self-center text-sm text-gray-400">
+					<Alert variant="default" class="w-full max-w-sm border-white/10 bg-[#141418]/90 text-center shadow-xl">
+						<VideoOff class="mx-auto h-12 w-12 text-gray-600 mb-2" />
+						<AlertTitle class="text-base text-white">Camera Offline</AlertTitle>
+						<AlertDescription class="text-sm text-gray-400">
 							Reconnect this device to resume live monitoring.
 						</AlertDescription>
-						<div class="mt-2 flex justify-center">
+						<div class="mt-4 flex justify-center">
 							<Button
-						id="cameraGoOnlineBtn"
-						variant="outline"
-						class="rounded-xl border-green-500/50 text-green-400 hover:border-green-400 hover:bg-green-500/10"
-						onclick={() => appController.goOnline()}
-					>
-						Go Online
+								id="cameraGoOnlineBtn"
+								variant="outline"
+								class="rounded-xl border-emerald-500/50 text-emerald-400 hover:border-emerald-400 hover:bg-emerald-500/10"
+								onclick={() => appController.goOnline()}
+							>
+								Go Online
 							</Button>
 						</div>
 					</Alert>
@@ -91,9 +95,10 @@
 			</Card>
 
 			<div class="grid grid-cols-1 gap-4 lg:gap-6 xl:min-h-0 xl:flex-[2] xl:grid-cols-[2fr_1fr]">
-				<Card class="glass-card min-h-[220px] overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80 xl:min-h-0">
-					<CardHeader class="pb-2">
-						<CardTitle class="text-xs font-bold uppercase tracking-wider text-gray-500">Logs</CardTitle>
+				<Card variant="glass" class="min-h-[220px] overflow-hidden xl:min-h-0">
+					<CardHeader class="pb-2 flex flex-row items-center gap-2">
+						<Terminal class="size-3.5 text-gray-500" />
+						<CardTitle class="text-[10px] font-bold uppercase tracking-widest text-gray-500">Activity Logs</CardTitle>
 					</CardHeader>
 					<CardContent class="flex-1 xl:min-h-0">
 						<ScrollArea
@@ -104,39 +109,46 @@
 							<div class="text-gray-600 italic">Awaiting connection...</div>
 						{:else}
 							{#each $appState.activityLog as log (log.id)}
-								<div>[{new Date(log.createdAt).toLocaleTimeString()}] {log.type}: {log.message}</div>
+								<div class="mb-1 leading-relaxed">
+									<span class="text-gray-600">[{new Date(log.createdAt).toLocaleTimeString()}]</span>
+									<span class="text-blue-400/80">{log.type}:</span>
+									<span>{log.message}</span>
+								</div>
 							{/each}
 						{/if}
 						</ScrollArea>
 					</CardContent>
 				</Card>
 
-				<Card class="glass-card min-h-[220px] overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80 xl:min-h-0">
-					<CardHeader class="pb-2">
-						<CardTitle class="text-xs font-bold uppercase tracking-wider text-gray-500">Actions / Options</CardTitle>
+				<Card variant="glass" class="min-h-[220px] overflow-hidden xl:min-h-0">
+					<CardHeader class="pb-2 flex flex-row items-center gap-2">
+						<Settings2 class="size-3.5 text-gray-500" />
+						<CardTitle class="text-[10px] font-bold uppercase tracking-widest text-gray-500">Control Plane</CardTitle>
 					</CardHeader>
 					<CardContent class="space-y-4 xl:min-h-0 xl:overflow-y-auto">
 						<div class="space-y-2">
-						<div class="flex items-center justify-between gap-2">
-								<Label for="cameraInputSelect" class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">
-								Camera Input
+							<div class="flex items-center justify-between gap-2">
+								<Label for="cameraInputSelect" class="text-[10px] font-bold uppercase tracking-widest text-gray-400 flex items-center gap-1.5">
+									<Camera class="size-3" />
+									Camera Input
 								</Label>
 								<Button
-								id="refreshCameraInputsBtn"
-								variant="ghost"
-								size="xs"
-								class="rounded-lg text-gray-400 hover:text-white"
-								onclick={() => appController.refreshCameraInputs()}
-							>
-								Refresh
+									id="refreshCameraInputsBtn"
+									variant="ghost"
+									size="xs"
+									class="h-6 rounded-lg text-gray-500 hover:text-white"
+									onclick={() => appController.refreshCameraInputs()}
+								>
+									<RefreshCw class="size-3 mr-1" />
+									Refresh
 								</Button>
-						</div>
+							</div>
 							<Select
-							type="single"
-							value={$appState.selectedCameraInputId}
-							items={cameraInputItems()}
-							onValueChange={(value) => appController.selectCameraInput(value)}
-						>
+								type="single"
+								value={$appState.selectedCameraInputId}
+								items={cameraInputItems()}
+								onValueChange={(value) => appController.selectCameraInput(value)}
+							>
 								<SelectTrigger
 									id="cameraInputSelect"
 									class="h-10 w-full rounded-xl border-white/10 bg-black/40 text-gray-200"
@@ -150,20 +162,21 @@
 								</SelectContent>
 							</Select>
 						</div>
+
 						<div class="space-y-3 rounded-2xl border border-white/10 bg-black/30 p-3 sm:p-4 sm:space-y-4">
 							<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
 								<div class="space-y-1">
-									<p class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">Automatic Detection</p>
-									<p class="text-sm text-gray-200">
-										{$appState.motionDetection.enabled ? 'Armed for automatic motion events.' : 'Paused until manually armed.'}
+									<p class="text-[10px] font-bold uppercase tracking-widest text-gray-400">Automatic Detection</p>
+									<p class="text-sm text-gray-200 font-medium">
+										{$appState.motionDetection.enabled ? 'Armed' : 'Disarmed'}
 									</p>
-									<p class="text-xs text-gray-500">
-										Designed for a plugged-in browser kept in the foreground.
+									<p class="text-[10px] text-gray-500 leading-tight">
+										Foreground browser monitoring.
 									</p>
 								</div>
 								<Button
 									variant={$appState.motionDetection.enabled ? 'secondary' : 'outline'}
-									class="min-w-[112px] self-start rounded-xl sm:self-auto"
+									class="min-w-[80px] h-9 self-start rounded-xl sm:self-auto text-xs"
 									onclick={() => appController.setMotionDetectionEnabled(!$appState.motionDetection.enabled)}
 								>
 									{$appState.motionDetection.enabled ? 'Pause' : 'Arm'}
@@ -172,10 +185,10 @@
 
 							<div class="space-y-2">
 								<div class="flex items-center justify-between gap-2">
-									<Label for="motionDetectionProfile" class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">
-										Detection Profile
+									<Label for="motionDetectionProfile" class="text-[10px] font-bold uppercase tracking-widest text-gray-400">
+										Profile
 									</Label>
-									<span class="text-[11px] uppercase tracking-wider text-gray-500">{$appState.motionDetection.state}</span>
+									<span class="text-[10px] font-bold uppercase tracking-widest text-blue-500/80">{$appState.motionDetection.state}</span>
 								</div>
 								<Select
 									type="single"
@@ -197,62 +210,49 @@
 								</Select>
 							</div>
 
-							<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+							<div class="grid grid-cols-2 gap-2">
 								<div class="rounded-xl border border-white/5 bg-white/5 px-3 py-2">
-									<p class="text-[10px] uppercase tracking-wider text-gray-500">Detector State</p>
-									<p class="mt-1 text-sm font-medium text-gray-200">{$appState.motionDetection.state}</p>
+									<p class="text-[9px] font-bold uppercase tracking-widest text-gray-500">Detector</p>
+									<p class="mt-0.5 text-xs font-bold text-gray-200">{$appState.motionDetection.state}</p>
 								</div>
 								<div class="rounded-xl border border-white/5 bg-white/5 px-3 py-2">
-									<p class="text-[10px] uppercase tracking-wider text-gray-500">Motion Score</p>
-									<p class="mt-1 text-sm font-medium text-gray-200">{$appState.motionDetection.score.toFixed(3)}</p>
+									<p class="text-[9px] font-bold uppercase tracking-widest text-gray-500">Score</p>
+									<p class="mt-0.5 text-xs font-bold text-gray-200">{$appState.motionDetection.score.toFixed(3)}</p>
 								</div>
 							</div>
 
 							<div class="flex items-center justify-between gap-3 rounded-xl border border-white/5 bg-white/5 px-3 py-2">
-								<div>
-									<p class="text-xs font-medium text-gray-200">Show detector debug info</p>
-									<p class="text-[11px] text-gray-500">Useful while tuning thresholds and sample profiles.</p>
+								<div class="space-y-0.5">
+									<p class="text-xs font-bold text-gray-200">Debug Overlay</p>
+									<p class="text-[10px] text-gray-500">Sample profiles & metrics.</p>
 								</div>
-								<button
-									type="button"
-									role="switch"
-									aria-checked={$appState.motionDetection.debug}
-									aria-label="Toggle motion detector debug info"
-									title="Toggle motion detector debug info"
-									class="inline-flex h-7 w-12 items-center rounded-full border border-white/10 p-1 transition-colors {$appState.motionDetection.debug ? 'bg-blue-500/80' : 'bg-white/10'}"
-									onclick={() => appController.setMotionDetectionDebug(!$appState.motionDetection.debug)}
-								>
-									<span
-										class="h-5 w-5 rounded-full bg-white transition-transform {$appState.motionDetection.debug ? 'translate-x-5' : 'translate-x-0'}"
-									></span>
-								</button>
+								<Switch
+									checked={$appState.motionDetection.debug}
+									onCheckedChange={(v) => appController.setMotionDetectionDebug(v)}
+								/>
 							</div>
 						</div>
-						<div class="space-y-3">
+
+						<div class="space-y-2">
 						{#if !$appState.isMotionActive}
 								<Button
-								id="startMotionBtn"
-								variant="outline"
-								class="h-14 w-full justify-start rounded-xl border-white/5 bg-white/5 font-medium hover:border-red-500/30 hover:bg-red-500/10 hover:text-red-400"
-								onclick={() => appController.startMotion()}
-							>
-									<svg data-icon="inline-start" xmlns="http://www.w3.org/2000/svg" class="mr-2 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
-								</svg>
-								Simulate Motion Event
+									id="startMotionBtn"
+									variant="outline"
+									class="h-12 w-full justify-start rounded-xl border-white/5 bg-white/5 font-bold text-sm hover:border-blue-500/30 hover:bg-blue-500/10 hover:text-blue-400 group"
+									onclick={() => appController.startMotion()}
+								>
+									<Zap class="mr-3 h-4 w-4 text-gray-400 group-hover:text-blue-400" />
+									Simulate Motion
 								</Button>
 						{:else}
 								<Button
-								id="endMotionBtn"
-								variant="outline"
-								class="h-14 w-full justify-start rounded-xl border-white/5 bg-white/5 font-medium hover:bg-white/10 disabled:opacity-30"
-								onclick={() => appController.endMotion()}
-							>
-									<svg data-icon="inline-start" xmlns="http://www.w3.org/2000/svg" class="mr-2 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
-								</svg>
-								Stop Recording
+									id="endMotionBtn"
+									variant="outline"
+									class="h-12 w-full justify-start rounded-xl border-white/5 bg-white/5 font-bold text-sm hover:bg-white/10"
+									onclick={() => appController.endMotion()}
+								>
+									<Square class="mr-3 h-4 w-4 text-red-500 animate-pulse" />
+									Stop Recording
 								</Button>
 						{/if}
 						</div>
diff --git a/WebApp/src/routes/client/+page.svelte b/WebApp/src/routes/client/+page.svelte
index 9a7fbd3..8cf47da 100644
--- a/WebApp/src/routes/client/+page.svelte
+++ b/WebApp/src/routes/client/+page.svelte
@@ -9,6 +9,20 @@
 	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
 	import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '$lib/components/ui/dropdown-menu/index.js';
 	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import {
+		Plus,
+		RefreshCw,
+		Monitor,
+		Eye,
+		Video,
+		VideoOff,
+		MoreVertical,
+		X,
+		History,
+		Activity,
+		ShieldCheck,
+		Clock
+	} from '@lucide/svelte';
 
 	let clientVideoElement: HTMLVideoElement | null = null;
 
@@ -56,62 +70,55 @@
 </script>
 
 <AppChrome pageKey="client">
-	<section id="screen-home-client" class="mx-auto flex h-full max-w-7xl min-h-0 flex-col gap-8">
-		<div class="flex justify-between items-center mb-4">
+	<section id="screen-home-client" class="mx-auto flex h-full max-w-7xl min-h-0 flex-col gap-6">
+		<div class="flex justify-between items-center px-1">
 			<h2 class="text-2xl font-bold text-white tracking-tight">Client Dashboard</h2>
-			<div class="flex gap-3">
+			<div class="flex gap-2">
 				<Button
 					id="linkCameraBtn"
 					variant="outline"
+					size="sm"
 					class="rounded-xl border-white/10 text-gray-300 shadow-none hover:bg-white/5 hover:text-white"
 					onclick={() => appController.linkCamera()}
 				>
-					<svg data-icon="inline-start" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-					</svg>
+					<Plus class="h-4 w-4 mr-1.5" />
 					Link Camera
 				</Button>
 				<Button
 					id="refreshClientBtn"
 					variant="ghost"
-					size="icon"
+					size="icon-sm"
 					class="rounded-xl border border-white/5 bg-white/5 hover:bg-white/10"
 					aria-label="Refresh linked cameras"
 					title="Refresh linked cameras"
 					onclick={() => appController.refreshClientData()}
 				>
-					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-						/>
-					</svg>
+					<RefreshCw class="h-4 w-4" />
 				</Button>
 			</div>
 		</div>
 
-		<Card class="glass-card mb-4 shrink-0 rounded-3xl border-white/10 bg-[#16161d]/80">
-			<CardHeader>
-				<CardTitle class="text-xs font-bold uppercase tracking-wider text-gray-400">Your Cameras</CardTitle>
+		<Card variant="glass" class="mb-2 shrink-0 rounded-3xl">
+			<CardHeader class="pb-3 flex flex-row items-center gap-2">
+				<Monitor class="size-3.5 text-gray-500" />
+				<CardTitle class="text-[10px] font-bold uppercase tracking-widest text-gray-500">Your Cameras</CardTitle>
 			</CardHeader>
 			<CardContent>
 				{#if $appState.linkedCameras.length === 0}
-					<Alert class="border-dashed border-white/10 bg-black/20 text-center">
-						<AlertTitle class="justify-self-center text-sm text-gray-200">No cameras linked</AlertTitle>
-						<AlertDescription class="justify-self-center text-sm text-gray-500">
+					<Alert variant="default" class="border-dashed border-white/10 bg-black/20 text-center py-8">
+						<AlertTitle class="text-sm text-gray-200">No cameras linked</AlertTitle>
+						<AlertDescription class="text-xs text-gray-500">
 							Link a camera to start viewing live feeds and recordings.
 						</AlertDescription>
 					</Alert>
 				{:else}
 					<ScrollArea class="w-full whitespace-nowrap" orientation="horizontal">
-						<div id="linkedCamerasList" class="flex gap-4 pb-2">
+						<div id="linkedCamerasList" class="flex gap-4 pb-3">
 						{#each $appState.linkedCameras as link (link.id)}
 							<div
 								role="button"
 								tabindex="0"
-								class="min-w-[240px] max-w-[240px] flex-shrink-0 cursor-pointer text-left"
+								class="min-w-[240px] max-w-[240px] flex-shrink-0 cursor-pointer text-left group"
 								onclick={(event) => {
 									if ((event.target as HTMLElement).closest('[data-menu-trigger]')) return;
 									appController.selectCamera(link.cameraDeviceId);
@@ -122,25 +129,20 @@
 							>
 								<Card
 									size="sm"
-									class="overflow-hidden rounded-xl border transition-colors { $appState.activeCameraDeviceId === link.cameraDeviceId ? 'border-blue-500/50 bg-blue-950/20' : 'border-white/5 bg-gray-900/60 hover:border-blue-500/30' }"
+									class="overflow-hidden rounded-xl border transition-all duration-300 { $appState.activeCameraDeviceId === link.cameraDeviceId ? 'border-blue-500/50 bg-blue-950/20' : 'border-white/5 bg-gray-900/60 hover:border-blue-500/30' }"
 								>
 									<div class="relative aspect-video overflow-hidden border-b border-white/5 bg-black/40">
 										{#if $appState.activeCameraDeviceId === link.cameraDeviceId}
 											<div class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-blue-500/10 text-blue-400">
-												<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-													<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-													<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-												</svg>
+												<Eye class="h-6 w-6" />
 												<Badge variant="secondary" class="rounded-full px-2 text-[10px] uppercase tracking-wider">
 													Viewing
 												</Badge>
 											</div>
 										{:else}
-											<div class="absolute inset-0 flex flex-col items-center justify-center gap-2 text-gray-500 transition-colors hover:text-gray-300">
-												<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-													<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
-												</svg>
-												<p class="text-[10px]">{isCameraLive(link.cameraDeviceId) ? 'Live Stream Active' : 'Click to view'}</p>
+											<div class="absolute inset-0 flex flex-col items-center justify-center gap-2 text-gray-600 transition-colors group-hover:text-gray-400">
+												<Video class="h-6 w-6" />
+												<p class="text-[10px] font-medium tracking-wide">{isCameraLive(link.cameraDeviceId) ? 'LIVE' : 'CLICK TO VIEW'}</p>
 											</div>
 										{/if}
 									</div>
@@ -152,9 +154,9 @@
 												</p>
 												<Badge
 													variant={link.cameraStatus?.toLowerCase() === 'online' ? 'secondary' : 'outline'}
-													class="gap-1.5 rounded-full px-2 capitalize"
+													class="gap-1.5 rounded-full px-2 capitalize text-[10px]"
 												>
-													<span class="h-2 w-2 rounded-full shrink-0 {statusDotClass(link.cameraStatus)}"></span>
+													<span class="h-1.5 w-1.5 rounded-full shrink-0 {statusDotClass(link.cameraStatus)} shadow-[0_0_4px_rgba(16,185,129,0.4)]"></span>
 													{link.cameraStatus || 'offline'}
 												</Badge>
 											</div>
@@ -168,11 +170,7 @@
 															class="text-gray-400 hover:text-white"
 															{...props}
 														>
-															<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-																<circle cx="10" cy="4" r="1.6" />
-																<circle cx="10" cy="10" r="1.6" />
-																<circle cx="10" cy="16" r="1.6" />
-															</svg>
+															<MoreVertical class="h-3.5 w-3.5" />
 														</Button>
 													{/snippet}
 												</DropdownMenuTrigger>
@@ -207,31 +205,32 @@
 			</CardContent>
 		</Card>
 
-		<div class="flex flex-1 min-h-0 flex-col gap-8 xl:flex-row">
+		<div class="flex flex-1 min-h-0 flex-col gap-6 xl:flex-row">
 			<Card
 				id="clientStreamViewerWrapper"
-				class="glass-card min-w-0 flex-1 overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80 shadow-xl {$appState.activeCameraDeviceId ? 'flex min-h-[400px] flex-col xl:min-h-0' : 'hidden'}"
+				variant="glass"
+				class="min-w-0 flex-1 overflow-hidden shadow-xl {$appState.activeCameraDeviceId ? 'flex min-h-[400px] flex-col xl:min-h-0' : 'hidden'}"
 			>
-				<CardHeader class="border-b border-white/5 bg-black/20 px-5 py-4">
+				<CardHeader class="border-b border-white/5 bg-black/20 px-5 py-3">
 					<div class="flex items-center justify-between gap-3">
 						<div class="flex items-center gap-3">
-							<span class="w-2 h-2 rounded-full bg-red-500 animate-[pulse_2s_ease-in-out_infinite] {isCameraLive($appState.activeCameraDeviceId) ? '' : 'hidden'}" id="clientLiveDot"></span>
-							<CardTitle class="font-medium tracking-wide text-white" id="clientStreamViewerTitle">
-								Live Feed: {activeCameraLabel()}
+							{#if isCameraLive($appState.activeCameraDeviceId)}
+								<span class="w-2 h-2 rounded-full bg-red-500 animate-[pulse_2s_ease-in-out_infinite]" id="clientLiveDot"></span>
+							{/if}
+							<CardTitle class="text-sm font-semibold tracking-wide text-white" id="clientStreamViewerTitle">
+								{activeCameraLabel()}
 							</CardTitle>
 						</div>
 						<Button
 						id="closeStreamViewerBtn"
 						variant="ghost"
-						size="icon-sm"
+						size="icon-xs"
 						class="text-gray-400 hover:text-white"
 						aria-label="Close stream viewer"
 						title="Close stream viewer"
 						onclick={() => appController.closeStreamViewer()}
 					>
-							<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-						</svg>
+							<X class="h-4 w-4" />
 						</Button>
 					</div>
 				</CardHeader>
@@ -246,44 +245,40 @@
 						bind:this={clientVideoElement}
 					></video>
 
-					<Alert
+					<div
 						id="clientStreamPlaceholder"
-						class="relative z-10 m-6 flex max-w-md flex-col items-center gap-4 border-white/10 bg-black/40 text-center {$appState.clientStreamMode === 'none' || $appState.clientStreamMode === 'connecting' || $appState.clientStreamMode === 'unavailable' ? '' : 'hidden'}"
+						class="relative z-10 m-6 flex max-w-sm flex-col items-center gap-4 text-center {$appState.clientStreamMode === 'none' || $appState.clientStreamMode === 'connecting' || $appState.clientStreamMode === 'unavailable' ? '' : 'hidden'}"
 					>
-						<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
-							></path>
-						</svg>
-						<AlertTitle class="justify-self-center text-sm text-gray-200">Stream unavailable</AlertTitle>
-						<AlertDescription class="justify-self-center text-sm font-medium uppercase tracking-wide text-gray-500">
+						<div class="p-5 rounded-full bg-white/5 mb-2">
+							<VideoOff class="h-10 w-10 text-gray-600" />
+						</div>
+						<p class="text-base font-semibold text-white">Stream unavailable</p>
+						<p class="text-xs font-bold uppercase tracking-widest text-gray-500">
 							{$appState.clientPlaceholderText}
-						</AlertDescription>
-					</Alert>
+						</p>
+					</div>
 				</CardContent>
 
 				{#if activeStreamDiagnostics()}
 					<div class="border-t border-white/5 bg-black/20 px-5 py-4">
-						<div class="flex flex-wrap items-center gap-2 text-[11px] uppercase tracking-[0.2em] text-gray-500">
-							<span>Live Diagnostics</span>
-							<Badge variant="outline" class="border-white/10 text-[10px] text-gray-400">
+						<div class="flex flex-wrap items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
+							<Activity class="size-3 text-blue-500" />
+							<span>Diagnostics</span>
+							<Badge variant="outline" class="border-white/5 text-[9px] text-gray-500 px-1.5 font-mono">
 								{activeStreamSessionId()?.slice(0, 8)}
 							</Badge>
 							{#if isCameraLive($appState.activeCameraDeviceId)}
-								<Badge variant="secondary" class="rounded-full px-2 text-[10px] uppercase tracking-wide">Peer connected</Badge>
+								<Badge variant="secondary" class="rounded-full px-2 text-[9px] font-bold uppercase tracking-widest">Peer connected</Badge>
 							{/if}
 						</div>
-						<div class="mt-3 grid gap-2">
-							{#each activeStreamDiagnostics().entries.slice(0, 6) as entry (entry.id)}
-								<div class="rounded-xl border px-3 py-2 {diagnosticLevelClass(entry.level)}">
+						<div class="mt-4 grid gap-2">
+							{#each activeStreamDiagnostics().entries.slice(0, 4) as entry (entry.id)}
+								<div class="rounded-xl border px-3 py-2 {diagnosticLevelClass(entry.level)} transition-colors">
 									<div class="flex items-center justify-between gap-3">
-										<span class="text-[11px] font-semibold uppercase tracking-[0.18em]">{entry.stage}</span>
-										<span class="text-[10px] text-gray-500">{new Date(entry.createdAt).toLocaleTimeString()}</span>
+										<span class="text-[10px] font-bold uppercase tracking-wider">{entry.stage}</span>
+										<span class="text-[9px] font-medium opacity-50">{new Date(entry.createdAt).toLocaleTimeString()}</span>
 									</div>
-									<p class="mt-1 text-sm text-current">{entry.message}</p>
+									<p class="mt-1 text-xs text-current opacity-90">{entry.message}</p>
 								</div>
 							{/each}
 						</div>
@@ -292,34 +287,38 @@
 			</Card>
 
 			<div class="flex shrink-0 flex-col gap-6 pr-2 xl:max-h-full xl:w-96 xl:overflow-y-auto">
-				<Card class="glass-card flex-1 rounded-3xl border-white/10 bg-[#16161d]/80">
-					<CardHeader>
-						<CardTitle class="text-xs font-bold uppercase tracking-wider text-gray-400">Recent Recordings</CardTitle>
+				<Card variant="glass" class="flex-1 rounded-3xl">
+					<CardHeader class="pb-3 flex flex-row items-center gap-2">
+						<History class="size-3.5 text-gray-500" />
+						<CardTitle class="text-[10px] font-bold uppercase tracking-widest text-gray-400">Recent Clips</CardTitle>
 					</CardHeader>
 					<CardContent>
-						<ScrollArea class="max-h-[26rem] pr-3">
+						<ScrollArea class="max-h-[30rem] pr-3">
 							<div id="recordingsList" class="space-y-3">
 						{#if $appState.recordings.length === 0}
-								<Alert class="border-white/10 bg-gray-900/30 text-center">
-									<AlertTitle class="justify-self-center text-xs text-gray-200">No recordings found</AlertTitle>
-									<AlertDescription class="justify-self-center text-xs text-gray-500">
-										Captured clips will appear here when they are ready.
+								<Alert variant="default" class="border-dashed border-white/10 bg-gray-900/30 text-center py-6">
+									<AlertTitle class="text-xs text-gray-200">No recordings found</AlertTitle>
+									<AlertDescription class="text-[10px] text-gray-500">
+										Captured clips will appear here.
 									</AlertDescription>
 								</Alert>
 						{:else}
-							{#each $appState.recordings.slice(0, 5) as recording (recording.id)}
-									<Card size="sm" class="border-white/5 bg-gray-900/40">
+							{#each $appState.recordings.slice(0, 8) as recording (recording.id)}
+									<Card size="sm" class="border-white/5 bg-white/5 hover:bg-white/10 transition-colors">
 										<CardContent class="flex items-center justify-between gap-4 px-3 py-3">
-											<div class="flex flex-col">
-												<span class="text-xs font-medium text-gray-300">{new Date(recording.createdAt).toLocaleString()}</span>
-												<span class="text-[10px] text-gray-500">
-													{recording.durationSeconds != null ? `${recording.durationSeconds}s duration` : 'Duration pending'} · {recording.status ?? 'unknown'}
+											<div class="flex flex-col gap-1">
+												<div class="flex items-center gap-1.5">
+													<Clock class="size-3 text-gray-500" />
+													<span class="text-xs font-semibold text-gray-300">{new Date(recording.createdAt).toLocaleTimeString()}</span>
+												</div>
+												<span class="text-[9px] font-bold uppercase tracking-widest text-gray-500">
+													{recording.status ?? 'unknown'} · {recording.durationSeconds != null ? `${recording.durationSeconds}s` : '--'}
 												</span>
 											</div>
 											<Button
 												variant="outline"
 												size="xs"
-												class="border-white/10 text-gray-400"
+												class="h-7 rounded-lg border-white/10 text-xs font-bold text-gray-400 hover:text-white"
 												disabled={recording.status !== 'ready'}
 												onclick={() => appController.openRecording(recording.id)}
 											>
diff --git a/WebApp/src/routes/onboarding/+page.svelte b/WebApp/src/routes/onboarding/+page.svelte
index 9c8a0a8..b5208e9 100644
--- a/WebApp/src/routes/onboarding/+page.svelte
+++ b/WebApp/src/routes/onboarding/+page.svelte
@@ -8,13 +8,14 @@
 	import { Input } from '$lib/components/ui/input/index.js';
 	import { Label } from '$lib/components/ui/label/index.js';
 	import { ToggleGroup, ToggleGroupItem } from '$lib/components/ui/toggle-group/index.js';
+	import { Settings } from '@lucide/svelte';
 
 	let showAdvancedSettings = false;
 </script>
 
 <AppChrome pageKey="onboarding">
 	<section id="screen-onboarding" class="flex flex-col items-center justify-center min-h-[70vh] max-w-lg mx-auto">
-		<Card class="glass-card w-full rounded-3xl border-white/10 bg-[#16161d]/80 shadow-2xl">
+		<Card variant="glass" class="w-full rounded-3xl">
 			<CardHeader class="px-6 pt-6 text-center">
 				<CardTitle class="text-3xl font-bold tracking-tight text-white">Configure Device</CardTitle>
 				<CardDescription class="text-sm text-gray-400">Set up this browser dashboard role</CardDescription>
@@ -75,15 +76,7 @@
 							aria-expanded={showAdvancedSettings}
 							onclick={() => (showAdvancedSettings = !showAdvancedSettings)}
 						>
-							<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-								/>
-								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-							</svg>
+							<Settings class="h-5 w-5" />
 						</Button>
 					</div>
 
@@ -107,7 +100,8 @@
 			<CardFooter class="flex flex-col items-stretch gap-3 border-0 bg-transparent px-6 pb-6 pt-2">
 				<Button
 					id="registerBtn"
-					class="btn-premium h-12 w-full rounded-xl text-base text-white"
+					variant="premium"
+					class="h-12 w-full rounded-xl text-base"
 					onclick={() => appController.registerDevice()}
 				>
 					Complete Setup
diff --git a/WebApp/src/routes/settings/+page.svelte b/WebApp/src/routes/settings/+page.svelte
index ceaa6d7..06bced2 100644
--- a/WebApp/src/routes/settings/+page.svelte
+++ b/WebApp/src/routes/settings/+page.svelte
@@ -8,6 +8,15 @@
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
 	import { Separator } from '$lib/components/ui/separator/index.js';
+	import {
+		BarChart3,
+		ChevronRight,
+		Settings,
+		LogOut,
+		Database,
+		ShieldCheck,
+		Activity
+	} from '@lucide/svelte';
 
 	const profileName = () => $appState.session?.user?.name || 'User';
 	const profileEmail = () => $appState.session?.user?.email || 'user@example.com';
@@ -58,8 +67,8 @@
 	<section id="screen-settings" class="flex flex-col gap-6 max-w-2xl mx-auto py-8">
 		<h2 class="text-2xl font-bold text-white tracking-tight px-2">Settings</h2>
 
-		<Card class="glass-card rounded-3xl border-white/10 bg-[#16161d]/80">
-			<CardContent class="flex items-center gap-6">
+		<Card variant="glass" class="rounded-3xl">
+			<CardContent class="flex items-center gap-6 py-6">
 				<Avatar id="profileInitials" size="lg" class="size-20 bg-blue-600/20 text-2xl font-bold text-blue-500">
 					<AvatarFallback>{profileInitial()}</AvatarFallback>
 				</Avatar>
@@ -70,9 +79,9 @@
 			</CardContent>
 		</Card>
 
-		<Card class="glass-card overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80">
+		<Card variant="glass" class="overflow-hidden rounded-3xl">
 			<CardHeader>
-				<CardTitle class="text-sm font-semibold tracking-wide text-white">Tools</CardTitle>
+				<CardTitle class="text-sm font-semibold tracking-wide text-white">Tools & Diagnostics</CardTitle>
 			</CardHeader>
 			<CardContent class="flex flex-col gap-0 p-0">
 				<Button
@@ -83,39 +92,34 @@
 			>
 				<div class="flex items-center gap-4">
 					<div class="p-2 rounded-lg bg-white/5 group-hover:bg-blue-500/20 group-hover:text-blue-400 transition-colors">
-						<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
-							/>
-						</svg>
+						<BarChart3 class="h-5 w-5" />
 					</div>
-					<span class="font-medium">Run Diagnostics</span>
+					<span class="font-medium">Run System Diagnostics</span>
 				</div>
-				<svg data-icon="inline-end" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-				</svg>
+				<ChevronRight class="h-4 w-4 text-gray-600 group-hover:text-gray-400 transition-colors" />
 				</Button>
 				<Separator class="bg-white/5" />
 				<div class="px-5 py-5">
 					<div class="flex flex-col gap-4 rounded-2xl border border-white/8 bg-white/[0.03] p-4">
 						<div class="flex items-start justify-between gap-4">
 							<div class="space-y-1">
-								<h4 class="text-sm font-semibold tracking-wide text-white">MinIO Storage Check</h4>
-								<p class="text-sm text-gray-400">
-									Test whether the backend can still reach the object storage server.
+								<div class="flex items-center gap-2">
+									<Database class="size-4 text-blue-500" />
+									<h4 class="text-sm font-semibold tracking-wide text-white">MinIO Storage Check</h4>
+								</div>
+								<p class="text-xs text-gray-400">
+									Test backend connectivity to object storage.
 								</p>
 							</div>
 							<Button
 								id="checkMinioBtn"
 								size="sm"
-								class="shrink-0 rounded-xl"
+								variant="outline"
+								class="shrink-0 rounded-xl border-white/10"
 								disabled={isCheckingMinio}
 								onclick={checkMinioServer}
 							>
-								{isCheckingMinio ? 'Checking…' : 'Check MinIO Server'}
+								{isCheckingMinio ? 'Checking…' : 'Check Now'}
 							</Button>
 						</div>
 
@@ -127,12 +131,19 @@
 										: 'border-red-500/30 bg-red-500/10 text-red-300'
 								}`}
 							>
-								<p class="font-medium">
-									{minioStatus === 'ok' ? 'MinIO is up' : 'MinIO check failed'}
-								</p>
-								<p class="mt-1 opacity-90">{minioStatusMessage}</p>
+								<div class="flex items-center gap-2">
+									{#if minioStatus === 'ok'}
+										<ShieldCheck class="size-4" />
+									{:else}
+										<Activity class="size-4" />
+									{/if}
+									<p class="font-medium">
+										{minioStatus === 'ok' ? 'MinIO is up' : 'MinIO check failed'}
+									</p>
+								</div>
+								<p class="mt-1 opacity-90 text-xs">{minioStatusMessage}</p>
 								{#if minioCheckedAt}
-									<p class="mt-2 text-xs opacity-75">Last checked: {formatCheckedAt(minioCheckedAt)}</p>
+									<p class="mt-2 text-[10px] opacity-75 italic">Last checked: {formatCheckedAt(minioCheckedAt)}</p>
 								{/if}
 							</div>
 						{/if}
@@ -142,21 +153,11 @@
 				<Button variant="ghost" class="group h-auto w-full justify-between rounded-none px-5 py-5 text-left text-gray-300 hover:bg-white/5">
 				<div class="flex items-center gap-4">
 					<div class="p-2 rounded-lg bg-white/5 group-hover:bg-blue-500/20 group-hover:text-blue-400 transition-colors">
-						<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-							/>
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-						</svg>
+						<Settings class="h-5 w-5" />
 					</div>
 					<span class="font-medium">Device Information</span>
 				</div>
-				<svg data-icon="inline-end" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-				</svg>
+				<ChevronRight class="h-4 w-4 text-gray-600 group-hover:text-gray-400 transition-colors" />
 				</Button>
 			</CardContent>
 		</Card>
@@ -164,17 +165,10 @@
 		<Button
 			id="signOutBtn"
 			variant="destructive"
-			class="mt-4 h-14 w-full rounded-2xl border border-red-500/50 text-base font-medium hover:border-red-500 hover:bg-red-500/10"
+			class="mt-4 h-14 w-full rounded-2xl border border-red-500/50 text-base font-bold hover:border-red-500 hover:bg-red-500/10"
 			onclick={() => appController.signOut()}
 		>
-			<svg data-icon="inline-start" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 11-6 0v-1m6 0H9"
-				/>
-			</svg>
+			<LogOut class="mr-3 h-5 w-5" />
 			Sign Out
 		</Button>
 	</section>