From 49e139529993fe393bd8825a7177885ca1944a8d Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 19 May 2026 11:11:14 +0530
Subject: [PATCH] refactor: enhance user settings components with updated
 icons, improved loading states, and consistent alert structures

---
 .../components/AgentPermissionsContent.tsx    | 204 ++++++++------
 .../components/AgentStatusContent.tsx         |  62 ++---
 .../components/ApiKeyContent.tsx              |   8 +-
 .../components/CommunityPromptsContent.tsx    | 137 +++++-----
 .../components/PromptsContent.tsx             | 255 ++++++++++--------
 .../user-settings/layout-shell.tsx            |   8 +-
 .../announcements/AnnouncementsDialog.tsx     |   2 +-
 .../components/new-chat/prompt-picker.tsx     |   4 +-
 .../public-chat-snapshot-row.tsx              |  64 +++--
 .../public-chat-snapshots-manager.tsx         |  36 ++-
 .../settings/agent-model-manager.tsx          | 126 ++++-----
 .../settings/image-model-manager.tsx          | 185 +++++++------
 .../components/settings/llm-role-manager.tsx  |  36 +--
 .../settings/prompt-config-manager.tsx        |  33 +--
 .../components/settings/roles-manager.tsx     |   8 +-
 .../settings/vision-model-manager.tsx         | 184 +++++++------
 16 files changed, 703 insertions(+), 649 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentPermissionsContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentPermissionsContent.tsx
index 6d8233515..0ef65d98b 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentPermissionsContent.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentPermissionsContent.tsx
@@ -2,7 +2,7 @@
 
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
-import { AlertTriangle, Check, Plus, ShieldCheck, Trash2, X } from "lucide-react";
+import { AlertTriangle, Info, ShieldCheck, Trash2 } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { agentFlagsAtom } from "@/atoms/agent/agent-flags-query.atom";
@@ -20,8 +20,18 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Select,
 	SelectContent,
@@ -67,20 +77,29 @@ function permissionRulesQueryKey(searchSpaceId: number) {
 function ScopeBadge({ rule }: { rule: AgentPermissionRule }) {
 	if (rule.thread_id !== null) {
 		return (
-			<Badge variant="outline" className="text-[10px]">
+			<Badge
+				variant="secondary"
+				className="text-[10px] px-1.5 py-0.5 border-0 text-muted-foreground bg-muted"
+			>
 				Thread #{rule.thread_id}
 			</Badge>
 		);
 	}
 	if (rule.user_id !== null) {
 		return (
-			<Badge variant="outline" className="text-[10px]">
+			<Badge
+				variant="secondary"
+				className="text-[10px] px-1.5 py-0.5 border-0 text-muted-foreground bg-muted"
+			>
 				User-specific
 			</Badge>
 		);
 	}
 	return (
-		<Badge variant="outline" className="text-[10px]">
+		<Badge
+			variant="secondary"
+			className="text-[10px] px-1.5 py-0.5 border-0 text-muted-foreground bg-muted"
+		>
 			Search space
 		</Badge>
 	);
@@ -170,8 +189,8 @@ export function AgentPermissionsContent() {
 				permission: formData.permission.trim(),
 				pattern: formData.pattern.trim() || "*",
 			});
-			setShowForm(false);
 			setFormData(EMPTY_FORM);
+			setShowForm(false);
 		} catch (err) {
 			if (err instanceof AppError && err.message) {
 				// already toasted by onError
@@ -190,13 +209,15 @@ export function AgentPermissionsContent() {
 
 	if (!featureEnabled) {
 		return (
-			<Alert className="border-dashed">
-				<ShieldCheck className="size-4" />
+			<Alert>
+				<Info />
 				<AlertTitle>Permission middleware is disabled</AlertTitle>
 				<AlertDescription>
-					Flip{" "}
-					<code className="rounded bg-muted px-1 text-[10px]">SURFSENSE_ENABLE_PERMISSION</code> on
-					the backend to manage allow/deny/ask rules from this panel.
+					<p>
+						Flip{" "}
+						<code className="rounded bg-popover px-1 py-0.5 text-[10px] text-popover-foreground">SURFSENSE_ENABLE_PERMISSION</code> on
+						the backend to manage allow/deny/ask rules from this panel.
+					</p>
 				</AlertDescription>
 			</Alert>
 		);
@@ -208,28 +229,8 @@ export function AgentPermissionsContent() {
 		);
 	}
 
-	if (isLoading) {
-		return (
-			<div className="flex items-center justify-center py-12">
-				<Spinner className="size-6" />
-			</div>
-		);
-	}
-
-	if (isError) {
-		return (
-			<Alert variant="destructive">
-				<AlertTriangle />
-				<AlertTitle>Failed to load rules</AlertTitle>
-				<AlertDescription>
-					{error instanceof Error ? error.message : "Unknown error."}
-				</AlertDescription>
-			</Alert>
-		);
-	}
-
 	return (
-		<div className="min-w-0 space-y-6 overflow-hidden">
+		<div className="min-w-0 space-y-6 overflow-visible">
 			<div className="flex items-start justify-between gap-3">
 				<div className="space-y-1">
 					<p className="text-sm text-muted-foreground">
@@ -237,27 +238,36 @@ export function AgentPermissionsContent() {
 						patterns and are evaluated at the most specific scope first.
 					</p>
 				</div>
-				{!showForm && (
-					<Button
-						size="sm"
-						onClick={() => {
-							setShowForm(true);
-							setFormData(EMPTY_FORM);
-						}}
-						className="shrink-0 gap-1.5"
-					>
-						<Plus className="size-3.5" />
-						New rule
-					</Button>
-				)}
+				<Button
+					size="sm"
+					onClick={() => {
+						setShowForm(true);
+						setFormData(EMPTY_FORM);
+					}}
+					className="shrink-0 gap-1.5"
+				>
+					New rule
+				</Button>
 			</div>
 
-			{showForm && (
-				<div className="rounded-lg border border-border/60 bg-card p-6">
-					<div className="space-y-4">
-						<h3 className="text-sm font-semibold tracking-tight">New permission rule</h3>
+			<Dialog
+				open={showForm}
+				onOpenChange={(open) => {
+					setShowForm(open);
+					if (!open) setFormData(EMPTY_FORM);
+				}}
+			>
+				<DialogContent className="max-w-lg bg-popover text-popover-foreground">
+					<DialogHeader>
+						<DialogTitle>New permission rule</DialogTitle>
+						<DialogDescription>
+							Tell the agent whether matching tool calls should be allowed, denied, or paused for
+							approval.
+						</DialogDescription>
+					</DialogHeader>
 
-						<div className="grid grid-cols-2 gap-3">
+					<div className="space-y-4">
+						<div className="grid gap-3">
 							<div className="space-y-2">
 								<Label htmlFor="permission-name">Permission</Label>
 								<Input
@@ -306,34 +316,60 @@ export function AgentPermissionsContent() {
 								{ACTION_DESCRIPTIONS[formData.action]}
 							</p>
 						</div>
-
-						<div className="flex items-center justify-end gap-2 pt-2">
-							<Button
-								variant="ghost"
-								size="sm"
-								onClick={() => {
-									setShowForm(false);
-									setFormData(EMPTY_FORM);
-								}}
-								disabled={createMutation.isPending}
-							>
-								Cancel
-							</Button>
-							<Button
-								size="sm"
-								onClick={handleCreate}
-								disabled={createMutation.isPending || !formData.permission.trim()}
-								className="relative"
-							>
-								<span className={createMutation.isPending ? "opacity-0" : ""}>Create</span>
-								{createMutation.isPending && <Spinner className="absolute size-3.5" />}
-							</Button>
-						</div>
 					</div>
+
+					<DialogFooter>
+						<Button
+							type="button"
+							variant="secondary"
+							size="sm"
+							onClick={() => {
+								setShowForm(false);
+								setFormData(EMPTY_FORM);
+							}}
+							disabled={createMutation.isPending}
+							className="text-sm h-9"
+						>
+							Cancel
+						</Button>
+						<Button
+							size="sm"
+							onClick={handleCreate}
+							disabled={createMutation.isPending || !formData.permission.trim()}
+							className="relative text-sm h-9 min-w-[96px]"
+						>
+							<span className={createMutation.isPending ? "opacity-0" : ""}>Create</span>
+							{createMutation.isPending && <Spinner size="sm" className="absolute" />}
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+
+			{isLoading && (
+				<div className="-m-1 space-y-2 p-1">
+					{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
+						<Card key={key} className="border-accent bg-accent/20">
+							<CardContent className="p-4 flex flex-col gap-3 min-h-24">
+								<Skeleton className="h-4 w-32 md:w-40 bg-accent" />
+								<Skeleton className="h-3 w-full bg-accent" />
+								<Skeleton className="h-3 w-24 md:w-28 bg-accent mt-auto" />
+							</CardContent>
+						</Card>
+					))}
 				</div>
 			)}
 
-			{sortedRules.length === 0 && !showForm && (
+			{isError && (
+				<Alert variant="destructive">
+					<AlertTriangle />
+					<AlertTitle>Failed to load rules</AlertTitle>
+					<AlertDescription>
+						{error instanceof Error ? error.message : "Unknown error."}
+					</AlertDescription>
+				</Alert>
+			)}
+
+			{!isLoading && !isError && sortedRules.length === 0 && !showForm && (
 				<div className="rounded-lg border border-dashed border-border/60 p-8 text-center">
 					<ShieldCheck className="mx-auto size-8 text-muted-foreground/40" />
 					<p className="mt-2 text-sm text-muted-foreground">No rules yet</p>
@@ -343,8 +379,8 @@ export function AgentPermissionsContent() {
 				</div>
 			)}
 
-			{sortedRules.length > 0 && (
-				<div className="space-y-2">
+			{!isLoading && !isError && sortedRules.length > 0 && (
+				<div className="-m-1 space-y-2 p-1">
 					{sortedRules.map((rule) => {
 						const badge = ACTION_BADGE[rule.action];
 						const isUpdating =
@@ -352,14 +388,14 @@ export function AgentPermissionsContent() {
 						const isDeleting = deleteMutation.isPending && deleteMutation.variables === rule.id;
 
 						return (
-							<div
+							<Card
 								key={rule.id}
-								className="group flex flex-col gap-3 rounded-lg border border-border/60 bg-card p-4"
+								className="group relative overflow-hidden transition-all duration-200 border-accent bg-accent/20 hover:shadow-md h-full"
 							>
-								<div className="flex items-start justify-between gap-3">
+								<CardContent className="p-4 flex items-center justify-between gap-3 h-full">
 									<div className="flex min-w-0 flex-1 flex-col gap-1.5">
 										<div className="flex flex-wrap items-center gap-1.5">
-											<code className="truncate rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
+											<code className="truncate font-mono text-sm font-medium text-foreground">
 												{rule.permission}
 											</code>
 											{rule.pattern !== "*" && (
@@ -374,7 +410,7 @@ export function AgentPermissionsContent() {
 										</p>
 									</div>
 
-									<div className="flex shrink-0 items-center gap-1">
+									<div className="flex shrink-0 items-center self-center gap-1">
 										<Select
 											value={rule.action}
 											onValueChange={(value) =>
@@ -390,8 +426,6 @@ export function AgentPermissionsContent() {
 											>
 												<SelectValue>
 													<span className="flex items-center gap-1">
-														{rule.action === "allow" && <Check className="size-3" />}
-														{rule.action === "deny" && <X className="size-3" />}
 														{badge.label}
 													</span>
 												</SelectValue>
@@ -406,7 +440,7 @@ export function AgentPermissionsContent() {
 										<Button
 											size="sm"
 											variant="ghost"
-											className="size-8 p-0 text-muted-foreground hover:text-destructive"
+											className="h-7 w-7 rounded-lg p-0 text-muted-foreground hover:text-destructive"
 											onClick={() => setDeleteTarget(rule.id)}
 											disabled={isUpdating || isDeleting}
 											aria-label="Delete rule"
@@ -414,8 +448,8 @@ export function AgentPermissionsContent() {
 											<Trash2 className="size-3.5" />
 										</Button>
 									</div>
-								</div>
-							</div>
+								</CardContent>
+							</Card>
 						);
 					})}
 				</div>
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentStatusContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentStatusContent.tsx
index 1fa957a6a..e32e1bfc6 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentStatusContent.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentStatusContent.tsx
@@ -1,12 +1,11 @@
 "use client";
 
 import { useAtomValue } from "jotai";
-import { CircleCheck, CircleSlash, Cog, RotateCcw } from "lucide-react";
-import { useMemo } from "react";
+import { AlertTriangle, CircleCheck, CircleSlash, Info } from "lucide-react";
+import { Fragment, useMemo } from "react";
 import { agentFlagsAtom } from "@/atoms/agent/agent-flags-query.atom";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import type { AgentFeatureFlags } from "@/lib/apis/agent-flags-api.service";
@@ -223,7 +222,7 @@ function FlagRow({ def, value }: { def: FlagDef; value: boolean }) {
 }
 
 export function AgentStatusContent() {
-	const { data: flags, isLoading, isError, error, refetch } = useAtomValue(agentFlagsAtom);
+	const { data: flags, isLoading, isError, error } = useAtomValue(agentFlagsAtom);
 
 	const enabledCount = useMemo(() => {
 		if (!flags) return 0;
@@ -244,19 +243,10 @@ export function AgentStatusContent() {
 	if (isError || !flags) {
 		return (
 			<Alert variant="destructive">
+				<AlertTriangle />
 				<AlertTitle>Failed to load agent status</AlertTitle>
-				<AlertDescription className="flex items-center gap-2">
+				<AlertDescription>
 					{error instanceof Error ? error.message : "Unknown error."}
-					<Button
-						type="button"
-						variant="outline"
-						size="sm"
-						onClick={() => refetch()}
-						className="ml-auto h-auto gap-1 px-2 py-0.5 text-xs hover:bg-background"
-					>
-						<RotateCcw className="size-3" />
-						Retry
-					</Button>
 				</AlertDescription>
 			</Alert>
 		);
@@ -268,28 +258,36 @@ export function AgentStatusContent() {
 		<div className="space-y-6">
 			{masterOff ? (
 				<Alert variant="destructive">
-					<Cog className="size-4" />
+					<AlertTriangle />
 					<AlertTitle>Master kill-switch is on</AlertTitle>
 					<AlertDescription>
-						<code className="rounded bg-muted px-1 text-[10px]">
-							SURFSENSE_DISABLE_NEW_AGENT_STACK=true
-						</code>
-						forces every new middleware off, regardless of the individual flags below. Restart the
-						backend after changing it.
+						<p>
+							Showing that{" "}
+							<code className="rounded bg-muted px-1 text-[10px]">
+								SURFSENSE_DISABLE_NEW_AGENT_STACK=true
+							</code>
+							, which forces every new middleware off, regardless of the individual flags below.
+							Restart the backend after changing it.
+						</p>
 					</AlertDescription>
 				</Alert>
 			) : (
 				<Alert>
-					<Cog className="size-4" />
+					<Info />
 					<AlertTitle className="flex items-center gap-2">
 						Agent stack
-						<Badge variant="secondary" className="text-[10px]">
+						<Badge
+							variant="secondary"
+							className="rounded bg-popover px-1 py-0.5 text-[9px] text-popover-foreground"
+						>
 							{enabledCount} on
 						</Badge>
 					</AlertTitle>
 					<AlertDescription>
-						Read-only mirror of the backend's <code>AgentFeatureFlags</code>. Flip an env var and
-						restart the backend to change a value.
+						<p>
+							Showing a read-only mirror of the backend's <code>AgentFeatureFlags</code>. Flip an env
+							var and restart the backend to change a value.
+						</p>
 					</AlertDescription>
 				</Alert>
 			)}
@@ -298,9 +296,9 @@ export function AgentStatusContent() {
 				const allOff = group.flags.every((f) => !flags[f.key]);
 				return (
 					<div key={group.id}>
-						{groupIdx > 0 && <Separator className="my-4" />}
+						{groupIdx > 0 && <Separator className="my-4 bg-border" />}
 						<div className="rounded-lg border border-border/60 bg-card">
-							<div className="flex items-start justify-between gap-3 border-b px-4 py-3">
+							<div className="flex items-start justify-between gap-3 px-4 py-3">
 								<div>
 									<p className="text-sm font-semibold">{group.title}</p>
 									<p className="text-xs text-muted-foreground">{group.subtitle}</p>
@@ -311,9 +309,13 @@ export function AgentStatusContent() {
 									</Badge>
 								)}
 							</div>
-							<div className="divide-y divide-border/50 px-4">
-								{group.flags.map((def) => (
-									<FlagRow key={def.key} def={def} value={flags[def.key]} />
+							<Separator className="bg-border" />
+							<div className="px-4">
+								{group.flags.map((def, flagIdx) => (
+									<Fragment key={def.key}>
+										{flagIdx > 0 && <Separator className="bg-border" />}
+										<FlagRow def={def} value={flags[def.key]} />
+									</Fragment>
 								))}
 							</div>
 						</div>
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent.tsx
index 74d8ab140..47cdf8f2d 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent.tsx
@@ -5,6 +5,7 @@ import { useTranslations } from "next-intl";
 import { useCallback, useRef, useState } from "react";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { useApiKey } from "@/hooks/use-api-key";
 import { copyToClipboard as copyToClipboardUtil } from "@/lib/utils";
@@ -35,7 +36,12 @@ export function ApiKeyContent() {
 			<div className="min-w-0 overflow-hidden">
 				<h3 className="mb-4 text-sm font-semibold tracking-tight">{t("your_api_key")}</h3>
 				{isLoading ? (
-					<div className="h-12 w-full animate-pulse rounded-md border border-border/60 bg-muted/30" />
+					<div className="flex items-center gap-2 rounded-md border border-border/60 bg-muted/30 px-2.5 py-1.5">
+						<div className="min-w-0 flex-1 overflow-hidden">
+							<Skeleton className="h-3 w-full bg-accent" />
+						</div>
+						<div className="h-6 w-6 shrink-0" />
+					</div>
 				) : apiKey ? (
 					<div className="flex items-center gap-2 rounded-md border border-border/60 bg-muted/30 px-2.5 py-1.5">
 						<div className="min-w-0 flex-1 overflow-x-auto scrollbar-hide">
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent.tsx
index d37ed409c..56044de5b 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent.tsx
@@ -1,12 +1,14 @@
 "use client";
 
 import { useAtomValue } from "jotai";
-import { AlertTriangle, Copy, Globe, Sparkles } from "lucide-react";
+import { AlertTriangle, Copy, Library } from "lucide-react";
 import { useCallback, useState } from "react";
 import { copyPromptMutationAtom } from "@/atoms/prompts/prompts-mutation.atoms";
 import { publicPromptsAtom } from "@/atoms/prompts/prompts-query.atoms";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
 
 export function CommunityPromptsContent() {
@@ -35,33 +37,37 @@ export function CommunityPromptsContent() {
 
 	const list = prompts ?? [];
 
-	if (isLoading) {
-		return (
-			<div className="flex items-center justify-center py-12">
-				<Spinner className="size-6" />
-			</div>
-		);
-	}
-
-	if (isError) {
-		return (
-			<Alert variant="destructive">
-				<AlertTriangle />
-				<AlertTitle>Failed to load community prompts</AlertTitle>
-				<AlertDescription>Please try refreshing the page.</AlertDescription>
-			</Alert>
-		);
-	}
-
 	return (
 		<div className="space-y-6 min-w-0 overflow-hidden">
 			<p className="text-sm text-muted-foreground">
 				Prompts shared by other users. Add any to your collection with one click.
 			</p>
 
-			{list.length === 0 && (
+			{isLoading && (
+				<div className="space-y-2">
+					{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
+						<Card key={key} className="border-accent bg-accent/20">
+							<CardContent className="p-4 flex flex-col gap-3 min-h-24">
+								<Skeleton className="h-4 w-32 md:w-40 bg-accent" />
+								<Skeleton className="h-3 w-full bg-accent" />
+								<Skeleton className="h-3 w-24 md:w-28 bg-accent mt-auto" />
+							</CardContent>
+						</Card>
+					))}
+				</div>
+			)}
+
+			{isError && (
+				<Alert variant="destructive">
+					<AlertTriangle />
+					<AlertTitle>Failed to load community prompts</AlertTitle>
+					<AlertDescription>Please try refreshing the page.</AlertDescription>
+				</Alert>
+			)}
+
+			{!isLoading && !isError && list.length === 0 && (
 				<div className="rounded-lg border border-dashed border-border/60 p-8 text-center">
-					<Globe className="mx-auto size-8 text-muted-foreground" />
+					<Library className="mx-auto size-8 text-muted-foreground" />
 					<p className="mt-2 text-sm text-muted-foreground">No community prompts yet</p>
 					<p className="text-xs text-muted-foreground/60">
 						Share your own prompts from the My Prompts tab
@@ -69,59 +75,58 @@ export function CommunityPromptsContent() {
 				</div>
 			)}
 
-			{list.length > 0 && (
+			{!isLoading && !isError && list.length > 0 && (
 				<div className="space-y-2">
 					{list.map((prompt) => (
-						<div
+						<Card
 							key={prompt.id}
-							className="group flex items-start gap-3 rounded-lg border border-border/60 bg-card p-4"
+							className="group relative overflow-hidden transition-all duration-200 border-accent bg-accent/20 hover:shadow-md h-full"
 						>
-							<div className="mt-0.5 shrink-0 text-muted-foreground">
-								<Sparkles className="size-4" />
-							</div>
-							<div className="flex-1 min-w-0">
-								<div className="flex items-center gap-2">
-									<span className="text-sm font-medium">{prompt.name}</span>
-									<span className="rounded-full border px-2 py-0.5 text-[10px] text-muted-foreground">
-										{prompt.mode}
-									</span>
-									{prompt.author_name && (
-										<span className="text-[11px] text-muted-foreground/60">
-											by {prompt.author_name}
+							<CardContent className="p-4 flex items-start gap-3 h-full">
+								<div className="flex-1 min-w-0">
+									<div className="flex items-center gap-2">
+										<span className="text-sm font-medium">{prompt.name}</span>
+										<span className="rounded-md border-0 bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+											{prompt.mode}
 										</span>
+										{prompt.author_name && (
+											<span className="text-[11px] text-muted-foreground/60">
+												by {prompt.author_name}
+											</span>
+										)}
+									</div>
+									<p
+										className={`mt-1 text-xs text-muted-foreground ${expandedId === prompt.id ? "whitespace-pre-wrap" : "line-clamp-2"}`}
+									>
+										{prompt.prompt}
+									</p>
+									{prompt.prompt.length > 100 && (
+										<Button
+											type="button"
+											variant="link"
+											onClick={() => setExpandedId(expandedId === prompt.id ? null : prompt.id)}
+											className="mt-1 h-auto cursor-pointer px-0 py-0 text-[11px] text-primary"
+										>
+											{expandedId === prompt.id ? "See less" : "See more"}
+										</Button>
 									)}
 								</div>
-								<p
-									className={`mt-1 text-xs text-muted-foreground ${expandedId === prompt.id ? "whitespace-pre-wrap" : "line-clamp-2"}`}
+								<Button
+									variant="ghost"
+									size="sm"
+									className="h-7 shrink-0 gap-1.5 rounded-lg px-2 text-muted-foreground hover:text-accent-foreground"
+									disabled={copyingIds.has(prompt.id)}
+									onClick={() => handleCopy(prompt.id)}
 								>
-									{prompt.prompt}
-								</p>
-								{prompt.prompt.length > 100 && (
-									<Button
-										type="button"
-										variant="link"
-										onClick={() => setExpandedId(expandedId === prompt.id ? null : prompt.id)}
-										className="mt-1 h-auto cursor-pointer px-0 py-0 text-[11px] text-primary"
-									>
-										{expandedId === prompt.id ? "See less" : "See more"}
-									</Button>
-								)}
-							</div>
-							<Button
-								variant="outline"
-								size="sm"
-								className="shrink-0 gap-1.5"
-								disabled={copyingIds.has(prompt.id)}
-								onClick={() => handleCopy(prompt.id)}
-							>
-								{copyingIds.has(prompt.id) ? (
-									<Spinner className="size-3" />
-								) : (
-									<Copy className="size-3" />
-								)}
-								Add to mine
-							</Button>
-						</div>
+									{copyingIds.has(prompt.id) ? (
+										<Spinner className="size-3" />
+									) : (
+										<Copy className="size-3" />
+									)}
+									Add to mine
+								</Button>
+							</CardContent>
+						</Card>
 					))}
 				</div>
 			)}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx
index 02edac148..10885957b 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx
@@ -22,9 +22,26 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { ShortcutKbd } from "@/components/ui/shortcut-kbd";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { Spinner } from "@/components/ui/spinner";
 import { Switch } from "@/components/ui/switch";
 import type { PromptRead } from "@/contracts/types/prompts.types";
@@ -124,24 +141,6 @@ export function PromptsContent() {
 
 	const list = prompts ?? [];
 
-	if (isLoading) {
-		return (
-			<div className="flex items-center justify-center py-12">
-				<Spinner className="size-6" />
-			</div>
-		);
-	}
-
-	if (isError) {
-		return (
-			<Alert variant="destructive">
-				<AlertTriangle />
-				<AlertTitle>Failed to load prompts</AlertTitle>
-				<AlertDescription>Please try refreshing the page.</AlertDescription>
-			</Alert>
-		);
-	}
-
 	return (
 		<div className="space-y-6 min-w-0 overflow-hidden">
 			<div className="flex items-center justify-between">
@@ -149,97 +148,146 @@ export function PromptsContent() {
 					Create prompt templates triggered with <ShortcutKbd keys={["/"]} className="ml-0" /> in
 					the chat composer.
 				</p>
-				{!showForm && (
-					<Button
-						size="sm"
-						onClick={() => {
-							setShowForm(true);
-							setEditingId(null);
-							setFormData(EMPTY_FORM);
-						}}
-						className="shrink-0 gap-1.5"
-					>
-						New
-					</Button>
-				)}
+				<Button
+					size="sm"
+					onClick={() => {
+						setShowForm(true);
+						setEditingId(null);
+						setFormData(EMPTY_FORM);
+					}}
+					className="shrink-0 gap-1.5"
+				>
+					New
+				</Button>
 			</div>
 
-			{showForm && (
-				<div className="rounded-lg border border-border/60 bg-card p-6 space-y-4">
-					<h3 className="text-sm font-semibold tracking-tight">
-						{editingId !== null ? "Edit prompt" : "New prompt"}
-					</h3>
+			<Dialog
+				open={showForm}
+				onOpenChange={(open) => {
+					setShowForm(open);
+					if (!open) {
+						setFormData(EMPTY_FORM);
+						setEditingId(null);
+					}
+				}}
+			>
+				<DialogContent className="max-w-lg bg-popover text-popover-foreground">
+					<DialogHeader>
+						<DialogTitle>{editingId !== null ? "Edit prompt" : "New prompt"}</DialogTitle>
+						<DialogDescription>
+							Create prompt templates triggered with / in the chat composer.
+						</DialogDescription>
+					</DialogHeader>
 
-					<div className="space-y-2">
-						<Label htmlFor="prompt-name">Name</Label>
-						<Input
-							id="prompt-name"
-							value={formData.name}
-							onChange={(e) => setFormData((p) => ({ ...p, name: e.target.value }))}
-							placeholder="e.g. Fix grammar"
-						/>
+					<div className="space-y-4">
+						<div className="space-y-2">
+							<Label htmlFor="prompt-name">Name</Label>
+							<Input
+								id="prompt-name"
+								value={formData.name}
+								onChange={(e) => setFormData((p) => ({ ...p, name: e.target.value }))}
+								placeholder="e.g. Fix grammar"
+							/>
+						</div>
+
+						<div className="space-y-2">
+							<Label htmlFor="prompt-template">Prompt template</Label>
+							<textarea
+								id="prompt-template"
+								value={formData.prompt}
+								onChange={(e) => setFormData((p) => ({ ...p, prompt: e.target.value }))}
+								placeholder="e.g. Fix the grammar in the following text:\n\n{selection}"
+								rows={4}
+								className="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm outline-none resize-none focus:ring-1 focus:ring-ring"
+							/>
+							<p className="text-xs text-muted-foreground">
+								Use{" "}
+								<code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px]">
+									{"{selection}"}
+								</code>{" "}
+								to insert the input text. If omitted, the text is appended automatically.
+							</p>
+						</div>
+
+						<div className="space-y-2">
+							<Label htmlFor="prompt-mode">Mode</Label>
+							<Select
+								value={formData.mode}
+								onValueChange={(value) =>
+									setFormData((p) => ({ ...p, mode: value as "transform" | "explore" }))
+								}
+							>
+								<SelectTrigger id="prompt-mode" className="w-full">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value="transform">Transform — rewrites or modifies your text</SelectItem>
+									<SelectItem value="explore">Explore — answers a question about your text</SelectItem>
+								</SelectContent>
+							</Select>
+						</div>
+
+						<div className="flex items-center gap-2">
+							<Switch
+								id="prompt-public"
+								checked={formData.is_public}
+								onCheckedChange={(checked) => setFormData((p) => ({ ...p, is_public: checked }))}
+							/>
+							<Label htmlFor="prompt-public" className="text-sm font-normal">
+								Share with community
+							</Label>
+						</div>
 					</div>
 
-					<div className="space-y-2">
-						<Label htmlFor="prompt-template">Prompt template</Label>
-						<textarea
-							id="prompt-template"
-							value={formData.prompt}
-							onChange={(e) => setFormData((p) => ({ ...p, prompt: e.target.value }))}
-							placeholder="e.g. Fix the grammar in the following text:\n\n{selection}"
-							rows={4}
-							className="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm outline-none resize-none focus:ring-1 focus:ring-ring"
-						/>
-						<p className="text-xs text-muted-foreground">
-							Use{" "}
-							<code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px]">
-								{"{selection}"}
-							</code>{" "}
-							to insert the input text. If omitted, the text is appended automatically.
-						</p>
-					</div>
-
-					<div className="space-y-2">
-						<Label htmlFor="prompt-mode">Mode</Label>
-						<select
-							id="prompt-mode"
-							value={formData.mode}
-							onChange={(e) =>
-								setFormData((p) => ({ ...p, mode: e.target.value as "transform" | "explore" }))
-							}
-							className="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-ring"
+					<DialogFooter>
+						<Button
+							type="button"
+							variant="secondary"
+							size="sm"
+							onClick={handleCancel}
+							disabled={isSaving}
+							className="text-sm h-9"
 						>
-							<option value="transform">Transform — rewrites or modifies your text</option>
-							<option value="explore">Explore — answers a question about your text</option>
-						</select>
-					</div>
-
-					<div className="flex items-center gap-2">
-						<Switch
-							id="prompt-public"
-							checked={formData.is_public}
-							onCheckedChange={(checked) => setFormData((p) => ({ ...p, is_public: checked }))}
-						/>
-						<Label htmlFor="prompt-public" className="text-sm font-normal">
-							Share with community
-						</Label>
-					</div>
-
-					<div className="flex items-center justify-end gap-2 pt-2">
-						<Button variant="ghost" size="sm" onClick={handleCancel}>
 							Cancel
 						</Button>
-						<Button size="sm" onClick={handleSave} disabled={isSaving} className="relative">
+						<Button
+							size="sm"
+							onClick={handleSave}
+							disabled={isSaving}
+							className="relative text-sm h-9 min-w-[96px]"
+						>
 							<span className={isSaving ? "opacity-0" : ""}>
 								{editingId !== null ? "Update" : "Create"}
 							</span>
-							{isSaving && <Spinner className="size-3.5 absolute" />}
+							{isSaving && <Spinner size="sm" className="absolute" />}
 						</Button>
-					</div>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+
+			{isLoading && (
+				<div className="space-y-2">
+					{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
+						<Card key={key} className="border-accent bg-accent/20">
+							<CardContent className="p-4 flex flex-col gap-3 min-h-24">
+								<Skeleton className="h-4 w-32 md:w-40 bg-accent" />
+								<Skeleton className="h-3 w-full bg-accent" />
+								<Skeleton className="h-3 w-24 md:w-28 bg-accent mt-auto" />
+							</CardContent>
+						</Card>
+					))}
 				</div>
 			)}
 
-			{list.length === 0 && !showForm && (
+			{isError && (
+				<Alert variant="destructive">
+					<AlertTriangle />
+					<AlertTitle>Failed to load prompts</AlertTitle>
+					<AlertDescription>Please try refreshing the page.</AlertDescription>
+				</Alert>
+			)}
+
+			{!isLoading && !isError && list.length === 0 && !showForm && (
 				<div className="rounded-lg border border-dashed border-border/60 p-8 text-center">
 					<Sparkles className="mx-auto size-8 text-muted-foreground/40" />
 					<p className="mt-2 text-sm text-muted-foreground">No prompts yet</p>
@@ -249,24 +297,21 @@ export function PromptsContent() {
 				</div>
 			)}
 
-			{list.length > 0 && (
+			{!isLoading && !isError && list.length > 0 && (
 				<div className="space-y-2">
 					{list.map((prompt) => (
 						<div
 							key={prompt.id}
-							className="group flex items-start gap-3 rounded-lg border border-border/60 bg-card p-4"
+							className="group relative flex items-start gap-3 overflow-hidden rounded-lg border border-accent bg-accent/20 p-4 transition-all duration-200 hover:shadow-md"
 						>
-							<div className="mt-0.5 shrink-0 text-muted-foreground">
-								<Sparkles className="size-4" />
-							</div>
 							<div className="flex-1 min-w-0">
 								<div className="flex items-center gap-2">
 									<span className="text-sm font-medium">{prompt.name}</span>
-									<span className="rounded-full border px-2 py-0.5 text-[10px] text-muted-foreground">
+									<span className="rounded-md border-0 bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
 										{prompt.mode}
 									</span>
 									{prompt.is_public && (
-										<span className="flex items-center gap-1 rounded-full border border-primary/20 bg-primary/5 px-2 py-0.5 text-[10px] text-primary">
+										<span className="flex items-center gap-1 rounded-md border-0 bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
 											<Globe className="size-2.5" />
 											Public
 										</span>
@@ -288,7 +333,7 @@ export function PromptsContent() {
 									</Button>
 								)}
 							</div>
-							<div className="hidden group-hover:flex items-center gap-1 shrink-0">
+							<div className="flex items-center gap-1 shrink-0 opacity-0 pointer-events-none transition-opacity duration-150 group-hover:opacity-100 group-hover:pointer-events-auto">
 								<Button
 									type="button"
 									variant="ghost"
@@ -296,7 +341,7 @@ export function PromptsContent() {
 									title={prompt.is_public ? "Make private" : "Share with community"}
 									onClick={() => handleTogglePublic(prompt)}
 									disabled={togglingPublicIds.has(prompt.id)}
-									className="size-7 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+									className="h-7 w-7 rounded-lg text-muted-foreground hover:text-accent-foreground"
 								>
 									{togglingPublicIds.has(prompt.id) ? (
 										<Spinner className="size-3.5" />
@@ -309,7 +354,7 @@ export function PromptsContent() {
 								<Button
 									variant="ghost"
 									size="icon"
-									className="size-7"
+									className="h-7 w-7 rounded-lg text-muted-foreground hover:text-accent-foreground"
 									onClick={() => handleEdit(prompt)}
 								>
 									<Pencil className="size-3.5" />
@@ -317,7 +362,7 @@ export function PromptsContent() {
 								<Button
 									variant="ghost"
 									size="icon"
-									className="size-7 text-destructive hover:text-destructive"
+									className="h-7 w-7 rounded-lg text-muted-foreground hover:text-destructive"
 									onClick={() => setDeleteTarget(prompt.id)}
 								>
 									<Trash2 className="size-3.5" />
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/layout-shell.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/layout-shell.tsx
index e241dbf59..a942c57f7 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/layout-shell.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/user-settings/layout-shell.tsx
@@ -3,13 +3,13 @@
 import {
 	Brain,
 	CircleUser,
-	Globe,
 	Keyboard,
 	KeyRound,
+	Library,
 	Monitor,
 	ReceiptText,
 	ShieldCheck,
-	Sparkles,
+	WandSparkles,
 	Workflow,
 } from "lucide-react";
 import Link from "next/link";
@@ -71,12 +71,12 @@ export function UserSettingsLayoutShell({
 			{
 				value: "prompts" as const,
 				label: "My Prompts",
-				icon: <Sparkles className="h-4 w-4" />,
+				icon: <WandSparkles className="h-4 w-4" />,
 			},
 			{
 				value: "community-prompts" as const,
 				label: "Community Prompts",
-				icon: <Globe className="h-4 w-4" />,
+				icon: <Library className="h-4 w-4" />,
 			},
 			{
 				value: "memory" as const,
diff --git a/surfsense_web/components/announcements/AnnouncementsDialog.tsx b/surfsense_web/components/announcements/AnnouncementsDialog.tsx
index 54653b535..097103e3d 100644
--- a/surfsense_web/components/announcements/AnnouncementsDialog.tsx
+++ b/surfsense_web/components/announcements/AnnouncementsDialog.tsx
@@ -22,7 +22,7 @@ export function AnnouncementsDialog() {
 
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
-			<DialogContent className="select-none max-w-[900px] w-[95vw] md:w-[90vw] h-[90vh] md:h-[80vh] max-h-[640px] flex flex-col p-0 gap-0 overflow-hidden [--card:var(--popover)]">
+			<DialogContent className="select-none max-w-[900px] w-[95vw] md:w-[90vw] h-[90vh] md:h-[80vh] max-h-[640px] flex flex-col p-0 gap-0 overflow-hidden bg-popover text-popover-foreground">
 				<DialogTitle className="sr-only">What's New</DialogTitle>
 
 				<div className="flex flex-1 flex-col overflow-hidden min-w-0">
diff --git a/surfsense_web/components/new-chat/prompt-picker.tsx b/surfsense_web/components/new-chat/prompt-picker.tsx
index 593e7e04f..1cb9f80f5 100644
--- a/surfsense_web/components/new-chat/prompt-picker.tsx
+++ b/surfsense_web/components/new-chat/prompt-picker.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useAtomValue } from "jotai";
-import { Plus, Zap } from "lucide-react";
+import { Plus, WandSparkles } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
 import {
 	forwardRef,
@@ -173,7 +173,7 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
 								)}
 							>
 								<span className="shrink-0 text-muted-foreground">
-									<Zap className="size-4" />
+									<WandSparkles className="size-4" />
 								</span>
 								<span className="flex-1 text-sm truncate">{action.name}</span>
 							</Button>
diff --git a/surfsense_web/components/public-chat-snapshots/public-chat-snapshot-row.tsx b/surfsense_web/components/public-chat-snapshots/public-chat-snapshot-row.tsx
index ce3a83791..d6a66e9e2 100644
--- a/surfsense_web/components/public-chat-snapshots/public-chat-snapshot-row.tsx
+++ b/surfsense_web/components/public-chat-snapshots/public-chat-snapshot-row.tsx
@@ -13,6 +13,7 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import type { PublicChatSnapshotDetail } from "@/contracts/types/chat-threads.types";
 import { useMediaQuery } from "@/hooks/use-media-query";
@@ -60,8 +61,8 @@ export function PublicChatSnapshotRow({
 	const member = snapshot.created_by_user_id ? memberMap.get(snapshot.created_by_user_id) : null;
 
 	return (
-		<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full">
-			<CardContent className="p-4 flex flex-col gap-3 h-full">
+		<Card className="group relative overflow-hidden transition-all duration-200 border-accent bg-accent/20 hover:shadow-md h-full">
+			<CardContent className="p-4 flex flex-col gap-3 h-full min-h-32">
 				{/* Header: Title + Actions */}
 				<div className="relative flex items-center">
 					<h4
@@ -122,33 +123,38 @@ export function PublicChatSnapshotRow({
 				</div>
 
 				{/* Footer: Date + Creator */}
-				<div className="flex items-center gap-2 pt-2 border-t border-border/40 mt-auto">
-					<span className="text-[11px] text-muted-foreground/60">{formattedDate}</span>
-					{member && (
-						<>
-							<Dot className="h-4 w-4 text-muted-foreground/30" />
-							<TooltipProvider>
-								<Tooltip open={isDesktop ? undefined : false}>
-									<TooltipTrigger asChild>
-										<div className="flex items-center gap-1.5 cursor-default">
-											<Avatar className="size-4.5 shrink-0">
-												{member.avatarUrl && (
-													<AvatarImage src={member.avatarUrl} alt={member.name} />
-												)}
-												<AvatarFallback className="text-[9px]">
-													{getInitials(member.name)}
-												</AvatarFallback>
-											</Avatar>
-											<span className="text-[11px] text-muted-foreground/60 truncate max-w-[120px]">
-												{member.name}
-											</span>
-										</div>
-									</TooltipTrigger>
-									<TooltipContent side="bottom">{member.email || member.name}</TooltipContent>
-								</Tooltip>
-							</TooltipProvider>
-						</>
-					)}
+				<div className="mt-auto space-y-2">
+					<Separator className="bg-accent" />
+					<div className="flex items-center">
+						<span className="shrink-0 text-[11px] text-muted-foreground/60 whitespace-nowrap">
+							{formattedDate}
+						</span>
+						{member && (
+							<>
+								<Dot className="h-4 w-4 text-muted-foreground/30 shrink-0" />
+								<TooltipProvider>
+									<Tooltip open={isDesktop ? undefined : false}>
+										<TooltipTrigger asChild>
+											<div className="min-w-0 flex items-center gap-1.5 cursor-default">
+												<Avatar className="size-4.5 shrink-0">
+													{member.avatarUrl && (
+														<AvatarImage src={member.avatarUrl} alt={member.name} />
+													)}
+													<AvatarFallback className="text-[9px]">
+														{getInitials(member.name)}
+													</AvatarFallback>
+												</Avatar>
+											<span className="text-[11px] text-muted-foreground/60 truncate">
+													{member.name}
+												</span>
+											</div>
+										</TooltipTrigger>
+										<TooltipContent side="bottom">{member.email || member.name}</TooltipContent>
+									</Tooltip>
+								</TooltipProvider>
+							</>
+						)}
+					</div>
 				</div>
 			</CardContent>
 		</Card>
diff --git a/surfsense_web/components/public-chat-snapshots/public-chat-snapshots-manager.tsx b/surfsense_web/components/public-chat-snapshots/public-chat-snapshots-manager.tsx
index e0d2f52a9..3cf07c27a 100644
--- a/surfsense_web/components/public-chat-snapshots/public-chat-snapshots-manager.tsx
+++ b/surfsense_web/components/public-chat-snapshots/public-chat-snapshots-manager.tsx
@@ -81,30 +81,26 @@ export function PublicChatSnapshotsManager({
 	if (isLoading) {
 		return (
 			<div className="space-y-4 md:space-y-5">
-				{/* Info alert skeleton */}
-				<Skeleton className="h-12 w-full rounded-lg" />
+				<Alert>
+					<Info />
+					<AlertDescription>
+						<div className="flex min-h-[1.625em] items-center">
+							<Skeleton className="h-4 w-60 bg-accent-foreground/15" />
+						</div>
+					</AlertDescription>
+				</Alert>
 
 				{/* Cards grid skeleton */}
 				<div className="grid gap-3 grid-cols-1 sm:grid-cols-2">
 					{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
-						<Card key={key} className="border-border/60">
-							<CardContent className="p-4 flex flex-col gap-3">
-								{/* Header: Title */}
-								<div className="flex items-start justify-between gap-2">
-									<Skeleton className="h-4 w-36 md:w-44" />
-								</div>
-								{/* Message count badge */}
-								<div className="flex items-center gap-1.5">
-									<Skeleton className="h-5 w-24 rounded-full" />
-								</div>
-								{/* URL skeleton */}
-								<Skeleton className="h-3 w-full rounded" />
-								{/* Footer: Date + Creator */}
-								<div className="flex items-center gap-2 pt-2 border-t border-border/40">
-									<Skeleton className="h-3 w-20" />
-									<Skeleton className="h-4 w-4 rounded-full" />
-									<Skeleton className="h-3 w-16" />
-								</div>
+						<Card
+							key={key}
+							className="group relative overflow-hidden transition-all duration-200 border-accent bg-accent/20 hover:shadow-md h-full"
+						>
+							<CardContent className="p-4 flex flex-col gap-3 h-full min-h-32">
+								<Skeleton className="h-4 w-32 md:w-40 bg-accent" />
+								<Skeleton className="h-3 w-full bg-accent" />
+								<Skeleton className="h-3 w-24 md:w-28 bg-accent mt-auto" />
 							</CardContent>
 						</Card>
 					))}
diff --git a/surfsense_web/components/settings/agent-model-manager.tsx b/surfsense_web/components/settings/agent-model-manager.tsx
index c9a5b9f54..b0e13d3d7 100644
--- a/surfsense_web/components/settings/agent-model-manager.tsx
+++ b/surfsense_web/components/settings/agent-model-manager.tsx
@@ -25,6 +25,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
@@ -130,7 +131,7 @@ export function AgentModelManager({ searchSpaceId }: AgentModelManagerProps) {
 					<Button
 						variant="outline"
 						onClick={openNewDialog}
-						className="gap-2 bg-white text-black hover:bg-accent hover:text-accent-foreground dark:bg-white dark:text-black"
+						className="gap-2 border-transparent bg-white text-[#1f1f1f] font-medium hover:bg-zinc-100 hover:text-[#1f1f1f] dark:border-transparent dark:bg-white dark:text-[#1f1f1f]"
 					>
 						Add Model
 					</Button>
@@ -182,16 +183,22 @@ export function AgentModelManager({ searchSpaceId }: AgentModelManagerProps) {
 			)}
 
 			{/* Global Configs Info */}
-			{globalConfigs.length > 0 && (
+			{(isLoading || globalConfigs.length > 0) && (
 				<Alert>
 					<Info />
 					<AlertDescription>
-						<p>
-							<span className="font-medium">
-								{globalConfigs.length} global {globalConfigs.length === 1 ? "model" : "models"}
-							</span>{" "}
-							available from your administrator.
-						</p>
+						{isLoading ? (
+							<div className="flex min-h-[1.625em] items-center">
+								<Skeleton className="h-4 w-60 bg-accent-foreground/15" />
+							</div>
+						) : (
+							<p>
+								<span className="font-medium">
+									{globalConfigs.length} global {globalConfigs.length === 1 ? "model" : "models"}
+								</span>{" "}
+								available from your administrator.
+							</p>
+						)}
 					</AlertDescription>
 				</Alert>
 			)}
@@ -200,29 +207,11 @@ export function AgentModelManager({ searchSpaceId }: AgentModelManagerProps) {
 			{isLoading && (
 				<div className="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3">
 					{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
-						<Card key={key} className="border-border/60">
-							<CardContent className="p-4 flex flex-col gap-3">
-								{/* Header: Icon + Name */}
-								<div className="flex items-start gap-2.5">
-									<Skeleton className="size-4 rounded-full shrink-0 mt-0.5" />
-									<div className="space-y-1.5 flex-1 min-w-0">
-										<Skeleton className="h-4 w-28 md:w-32" />
-										<Skeleton className="h-3 w-40 md:w-48" />
-									</div>
-								</div>
-								{/* Feature badges */}
-								<div className="flex items-center gap-1.5">
-									<Skeleton className="h-5 w-20 rounded-full" />
-								</div>
-								{/* Footer */}
-								<div className="flex items-center pt-2 border-t border-border/40">
-									<Skeleton className="h-3 w-20 flex-1" />
-									<Skeleton className="h-3 w-3 rounded-full shrink-0 mx-1" />
-									<div className="flex-1 flex items-center justify-end gap-1.5">
-										<Skeleton className="h-4 w-4 rounded-full" />
-										<Skeleton className="h-3 w-16" />
-									</div>
-								</div>
+						<Card key={key} className="border-accent bg-accent/20">
+							<CardContent className="p-4 flex flex-col gap-3 min-h-32">
+								<Skeleton className="h-4 w-32 md:w-40 bg-accent" />
+								<Skeleton className="h-3 w-full bg-accent" />
+								<Skeleton className="h-3 w-24 md:w-28 bg-accent mt-auto" />
 							</CardContent>
 						</Card>
 					))}
@@ -252,7 +241,7 @@ export function AgentModelManager({ searchSpaceId }: AgentModelManagerProps) {
 
 								return (
 									<div key={config.id}>
-										<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full">
+										<Card className="group relative overflow-hidden transition-all duration-200 border-accent bg-accent/20 hover:shadow-md h-full">
 											<CardContent className="p-4 flex flex-col gap-3 h-full">
 												{/* Header: Icon + Name + Actions */}
 												<div className="flex items-center justify-between gap-2">
@@ -334,41 +323,44 @@ export function AgentModelManager({ searchSpaceId }: AgentModelManagerProps) {
 												</div>
 
 												{/* Footer: Date + Creator */}
-												<div className="flex items-center pt-2 border-t border-border/40 mt-auto">
-													<span className="shrink-0 text-[11px] text-muted-foreground/60 whitespace-nowrap">
-														{new Date(config.created_at).toLocaleDateString(undefined, {
-															year: "numeric",
-															month: "short",
-															day: "numeric",
-														})}
-													</span>
-													{member && (
-														<>
-															<Dot className="h-4 w-4 text-muted-foreground/30 shrink-0" />
-															<TooltipProvider>
-																<Tooltip open={isDesktop ? undefined : false}>
-																	<TooltipTrigger asChild>
-																		<div className="min-w-0 flex items-center gap-1.5 cursor-default">
-																			<Avatar className="size-4.5 shrink-0">
-																				{member.avatarUrl && (
-																					<AvatarImage src={member.avatarUrl} alt={member.name} />
-																				)}
-																				<AvatarFallback className="text-[9px]">
-																					{getInitials(member.name)}
-																				</AvatarFallback>
-																			</Avatar>
-																			<span className="text-[11px] text-muted-foreground/60 truncate">
-																				{member.name}
-																			</span>
-																		</div>
-																	</TooltipTrigger>
-																	<TooltipContent side="bottom">
-																		{member.email || member.name}
-																	</TooltipContent>
-																</Tooltip>
-															</TooltipProvider>
-														</>
-													)}
+												<div className="mt-auto space-y-2">
+													<Separator className="bg-accent" />
+													<div className="flex items-center">
+														<span className="shrink-0 text-[11px] text-muted-foreground/60 whitespace-nowrap">
+															{new Date(config.created_at).toLocaleDateString(undefined, {
+																year: "numeric",
+																month: "short",
+																day: "numeric",
+															})}
+														</span>
+														{member && (
+															<>
+																<Dot className="h-4 w-4 text-muted-foreground/30 shrink-0" />
+																<TooltipProvider>
+																	<Tooltip open={isDesktop ? undefined : false}>
+																		<TooltipTrigger asChild>
+																			<div className="min-w-0 flex items-center gap-1.5 cursor-default">
+																				<Avatar className="size-4.5 shrink-0">
+																					{member.avatarUrl && (
+																						<AvatarImage src={member.avatarUrl} alt={member.name} />
+																					)}
+																					<AvatarFallback className="text-[9px]">
+																						{getInitials(member.name)}
+																					</AvatarFallback>
+																				</Avatar>
+																				<span className="text-[11px] text-muted-foreground/60 truncate">
+																					{member.name}
+																				</span>
+																			</div>
+																		</TooltipTrigger>
+																		<TooltipContent side="bottom">
+																			{member.email || member.name}
+																		</TooltipContent>
+																	</Tooltip>
+																</TooltipProvider>
+															</>
+														)}
+													</div>
 												</div>
 											</CardContent>
 										</Card>
diff --git a/surfsense_web/components/settings/image-model-manager.tsx b/surfsense_web/components/settings/image-model-manager.tsx
index 4ee22dd52..494f7aae9 100644
--- a/surfsense_web/components/settings/image-model-manager.tsx
+++ b/surfsense_web/components/settings/image-model-manager.tsx
@@ -25,6 +25,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
@@ -133,7 +134,7 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 					<Button
 						variant="outline"
 						onClick={openNewDialog}
-						className="gap-2 bg-white text-black hover:bg-accent hover:text-accent-foreground dark:bg-white dark:text-black"
+						className="gap-2 border-transparent bg-white text-[#1f1f1f] font-medium hover:bg-zinc-100 hover:text-[#1f1f1f] dark:border-transparent dark:bg-white dark:text-[#1f1f1f]"
 					>
 						Add Image Model
 					</Button>
@@ -183,37 +184,45 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 			)}
 
 			{/* Global info */}
-			{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length > 0 && (
+			{(isLoading ||
+				globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length > 0) && (
 				<Alert>
 					<Info />
 					<AlertDescription>
-						<p>
-							<span className="font-medium">
-								{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length}{" "}
-								global image{" "}
-								{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length === 1
-									? "model"
-									: "models"}
-							</span>{" "}
-							available from your administrator. {(() => {
-								const nonAuto = globalConfigs.filter(
-									(g) => !("is_auto_mode" in g && g.is_auto_mode)
-								);
-								const premium = nonAuto.filter(
-									(g) =>
-										"billing_tier" in g &&
-										(g as { billing_tier?: string }).billing_tier === "premium"
-								).length;
-								const free = nonAuto.length - premium;
-								if (premium > 0 && free > 0) {
-									return `${premium} premium, ${free} free.`;
-								}
-								if (premium > 0) {
-									return `All ${premium} premium — debits your shared credit pool.`;
-								}
-								return `All ${free} free.`;
-							})()}
-						</p>
+						{isLoading ? (
+							<div className="flex min-h-[1.625em] items-center">
+								<Skeleton className="h-4 w-60 bg-accent-foreground/15" />
+							</div>
+						) : (
+							<p>
+								<span className="font-medium">
+									{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length}{" "}
+									global image{" "}
+									{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length ===
+									1
+										? "model"
+										: "models"}
+								</span>{" "}
+								available from your administrator. {(() => {
+									const nonAuto = globalConfigs.filter(
+										(g) => !("is_auto_mode" in g && g.is_auto_mode)
+									);
+									const premium = nonAuto.filter(
+										(g) =>
+											"billing_tier" in g &&
+											(g as { billing_tier?: string }).billing_tier === "premium"
+									).length;
+									const free = nonAuto.length - premium;
+									if (premium > 0 && free > 0) {
+										return `${premium} premium, ${free} free.`;
+									}
+									if (premium > 0) {
+										return `All ${premium} premium — debits your shared credit pool.`;
+									}
+									return `All ${free} free.`;
+								})()}
+							</p>
+						)}
 					</AlertDescription>
 				</Alert>
 			)}
@@ -225,9 +234,6 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 			{!isLoading &&
 				globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length > 0 && (
 					<div className="space-y-3">
-						<h3 className="text-xs md:text-sm font-semibold text-muted-foreground">
-							Global Image Models
-						</h3>
 						<div className="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3">
 							{globalConfigs
 								.filter((g) => !("is_auto_mode" in g && g.is_auto_mode))
@@ -241,7 +247,7 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 									return (
 										<Card
 											key={cfg.id}
-											className="border-border/60 bg-muted/20 overflow-hidden h-full"
+											className="group relative overflow-hidden transition-all duration-200 border-accent bg-accent/20 hover:shadow-md h-full"
 										>
 											<CardContent className="p-4 flex flex-col gap-3 h-full">
 												<div className="flex items-center gap-2 min-w-0">
@@ -274,10 +280,13 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 														{cfg.description}
 													</p>
 												)}
-												<div className="flex items-center pt-2 border-t border-border/40 mt-auto">
-													<span className="text-[11px] text-muted-foreground/60 truncate">
-														{cfg.model_name}
-													</span>
+												<div className="mt-auto space-y-2">
+													<Separator className="bg-accent" />
+													<div className="flex items-center">
+														<span className="text-[11px] text-muted-foreground/60 truncate">
+															{cfg.model_name}
+														</span>
+													</div>
 												</div>
 											</CardContent>
 										</Card>
@@ -291,30 +300,13 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 			{isLoading && (
 				<div className="space-y-4 md:space-y-6">
 					<div className="space-y-4">
-						<div className="flex items-center justify-between">
-							<Skeleton className="h-6 md:h-7 w-40 md:w-48" />
-							<Skeleton className="h-8 md:h-9 w-32 md:w-36 rounded-md" />
-						</div>
-
 						<div className="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3">
 							{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
-								<Card key={key} className="border-border/60">
-									<CardContent className="p-4 flex flex-col gap-3">
-										<div className="flex items-center gap-2.5">
-											<Skeleton className="size-4 rounded-full shrink-0" />
-											<div className="space-y-1.5 flex-1 min-w-0">
-												<Skeleton className="h-4 w-28 md:w-32" />
-												<Skeleton className="h-3 w-40 md:w-48" />
-											</div>
-										</div>
-										<div className="flex items-center pt-2 border-t border-border/40">
-											<Skeleton className="h-3 w-20 flex-1" />
-											<Skeleton className="h-3 w-3 rounded-full shrink-0 mx-1" />
-											<div className="flex-1 flex items-center justify-end gap-1.5">
-												<Skeleton className="h-4 w-4 rounded-full" />
-												<Skeleton className="h-3 w-16" />
-											</div>
-										</div>
+								<Card key={key} className="border-accent bg-accent/20">
+									<CardContent className="p-4 flex flex-col gap-3 min-h-32">
+										<Skeleton className="h-4 w-32 md:w-40 bg-accent" />
+										<Skeleton className="h-3 w-full bg-accent" />
+										<Skeleton className="h-3 w-24 md:w-28 bg-accent mt-auto" />
 									</CardContent>
 								</Card>
 							))}
@@ -344,7 +336,7 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 
 								return (
 									<div key={config.id}>
-										<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full">
+										<Card className="group relative overflow-hidden transition-all duration-200 border-accent bg-accent/20 hover:shadow-md h-full">
 											<CardContent className="p-4 flex flex-col gap-3 h-full">
 												{/* Header: Icon + Name + Actions */}
 												<div className="flex items-center justify-between gap-2">
@@ -404,41 +396,44 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 												</div>
 
 												{/* Footer: Date + Creator */}
-												<div className="flex items-center pt-2 border-t border-border/40 mt-auto">
-													<span className="shrink-0 text-[11px] text-muted-foreground/60 whitespace-nowrap">
-														{new Date(config.created_at).toLocaleDateString(undefined, {
-															year: "numeric",
-															month: "short",
-															day: "numeric",
-														})}
-													</span>
-													{member && (
-														<>
-															<Dot className="h-4 w-4 text-muted-foreground/30 shrink-0" />
-															<TooltipProvider>
-																<Tooltip open={isDesktop ? undefined : false}>
-																	<TooltipTrigger asChild>
-																		<div className="min-w-0 flex items-center gap-1.5 cursor-default">
-																			<Avatar className="size-4.5 shrink-0">
-																				{member.avatarUrl && (
-																					<AvatarImage src={member.avatarUrl} alt={member.name} />
-																				)}
-																				<AvatarFallback className="text-[9px]">
-																					{getInitials(member.name)}
-																				</AvatarFallback>
-																			</Avatar>
-																			<span className="text-[11px] text-muted-foreground/60 truncate">
-																				{member.name}
-																			</span>
-																		</div>
-																	</TooltipTrigger>
-																	<TooltipContent side="bottom">
-																		{member.email || member.name}
-																	</TooltipContent>
-																</Tooltip>
-															</TooltipProvider>
-														</>
-													)}
+												<div className="mt-auto space-y-2">
+													<Separator className="bg-accent" />
+													<div className="flex items-center">
+														<span className="shrink-0 text-[11px] text-muted-foreground/60 whitespace-nowrap">
+															{new Date(config.created_at).toLocaleDateString(undefined, {
+																year: "numeric",
+																month: "short",
+																day: "numeric",
+															})}
+														</span>
+														{member && (
+															<>
+																<Dot className="h-4 w-4 text-muted-foreground/30 shrink-0" />
+																<TooltipProvider>
+																	<Tooltip open={isDesktop ? undefined : false}>
+																		<TooltipTrigger asChild>
+																			<div className="min-w-0 flex items-center gap-1.5 cursor-default">
+																				<Avatar className="size-4.5 shrink-0">
+																					{member.avatarUrl && (
+																						<AvatarImage src={member.avatarUrl} alt={member.name} />
+																					)}
+																					<AvatarFallback className="text-[9px]">
+																						{getInitials(member.name)}
+																					</AvatarFallback>
+																				</Avatar>
+																				<span className="text-[11px] text-muted-foreground/60 truncate">
+																					{member.name}
+																				</span>
+																			</div>
+																		</TooltipTrigger>
+																		<TooltipContent side="bottom">
+																			{member.email || member.name}
+																		</TooltipContent>
+																	</Tooltip>
+																</TooltipProvider>
+															</>
+														)}
+													</div>
 												</div>
 											</CardContent>
 										</Card>
diff --git a/surfsense_web/components/settings/llm-role-manager.tsx b/surfsense_web/components/settings/llm-role-manager.tsx
index a2eb6a22e..17370b8f2 100644
--- a/surfsense_web/components/settings/llm-role-manager.tsx
+++ b/surfsense_web/components/settings/llm-role-manager.tsx
@@ -236,35 +236,11 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 			{isLoading && (
 				<div className="grid gap-4 grid-cols-1 lg:grid-cols-2">
 					{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
-						<Card key={key} className="border-border/60">
-							<CardContent className="p-4 md:p-5 space-y-4">
-								{/* Header: icon + title + status */}
-								<div className="flex items-start justify-between gap-3">
-									<div className="flex items-center gap-3 min-w-0">
-										<Skeleton className="h-9 w-9 rounded-lg shrink-0" />
-										<div className="space-y-1.5 flex-1">
-											<Skeleton className="h-4 w-24 md:w-28" />
-											<Skeleton className="h-3 w-40 md:w-52" />
-										</div>
-									</div>
-									<Skeleton className="h-4 w-4 rounded-full shrink-0" />
-								</div>
-								{/* Label */}
-								<div className="space-y-1.5">
-									<Skeleton className="h-3 w-20" />
-									<Skeleton className="h-9 md:h-10 w-full rounded-md" />
-								</div>
-								{/* Summary block */}
-								<div className="rounded-lg border border-border/50 p-3 space-y-2">
-									<div className="flex items-center gap-2">
-										<Skeleton className="h-3.5 w-3.5 rounded shrink-0" />
-										<Skeleton className="h-3.5 w-28" />
-									</div>
-									<div className="flex items-center gap-1.5">
-										<Skeleton className="h-4 w-14 rounded-full" />
-										<Skeleton className="h-3 w-24" />
-									</div>
-								</div>
+						<Card key={key} className="border-accent bg-accent/20">
+							<CardContent className="p-4 flex flex-col gap-3 min-h-32">
+								<Skeleton className="h-4 w-32 md:w-40 bg-accent" />
+								<Skeleton className="h-3 w-full bg-accent" />
+								<Skeleton className="h-3 w-24 md:w-28 bg-accent mt-auto" />
 							</CardContent>
 						</Card>
 					))}
@@ -314,7 +290,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 
 						return (
 							<div key={key}>
-								<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full">
+								<Card className="group relative overflow-hidden transition-all duration-200 border-accent bg-accent/20 hover:shadow-md h-full">
 									<CardContent className="p-4 md:p-5 space-y-4">
 										{/* Role Header */}
 										<div className="flex items-start justify-between gap-3">
diff --git a/surfsense_web/components/settings/prompt-config-manager.tsx b/surfsense_web/components/settings/prompt-config-manager.tsx
index ac7da9547..d04ee89dc 100644
--- a/surfsense_web/components/settings/prompt-config-manager.tsx
+++ b/surfsense_web/components/settings/prompt-config-manager.tsx
@@ -6,7 +6,6 @@ import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Textarea } from "@/components/ui/textarea";
@@ -87,16 +86,16 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
 	if (loading) {
 		return (
 			<div className="space-y-4 md:space-y-6">
-				<Card>
-					<CardHeader className="px-3 md:px-6 pt-3 md:pt-6 pb-2 md:pb-3">
+				<div className="space-y-3 md:space-y-4">
+					<div className="space-y-2">
 						<Skeleton className="h-5 md:h-6 w-36 md:w-48" />
 						<Skeleton className="h-3 md:h-4 w-full max-w-md mt-2" />
-					</CardHeader>
-					<CardContent className="space-y-3 md:space-y-4 px-3 md:px-6 pb-3 md:pb-6">
+					</div>
+					<div className="space-y-3 md:space-y-4">
 						<Skeleton className="h-16 md:h-20 w-full" />
 						<Skeleton className="h-24 md:h-32 w-full" />
-					</CardContent>
-				</Card>
+					</div>
+				</div>
 			</div>
 		);
 	}
@@ -124,15 +123,17 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
 
 			{/* System Instructions Card */}
 			<form onSubmit={onSubmit} className="space-y-4 md:space-y-6">
-				<Card>
-					<CardHeader className="px-3 md:px-6 pt-3 md:pt-6 pb-2 md:pb-3">
-						<CardTitle className="text-base md:text-lg">Custom System Instructions</CardTitle>
-						<CardDescription className="text-xs md:text-sm">
+				<div className="space-y-3 md:space-y-4">
+					<div className="space-y-1.5 md:space-y-2">
+						<h3 className="text-base md:text-lg font-semibold tracking-tight">
+							Custom System Instructions
+						</h3>
+						<p className="text-xs md:text-sm text-muted-foreground">
 							Provide specific guidelines for how you want the AI to respond. These instructions
 							will be applied to all answers in this search space.
-						</CardDescription>
-					</CardHeader>
-					<CardContent className="space-y-3 md:space-y-4 px-3 md:px-6 pb-3 md:pb-6">
+						</p>
+					</div>
+					<div className="space-y-3 md:space-y-4">
 						<div className="space-y-1.5 md:space-y-2">
 							<Label
 								htmlFor="custom-instructions-settings"
@@ -174,8 +175,8 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
 								</AlertDescription>
 							</Alert>
 						)}
-					</CardContent>
-				</Card>
+					</div>
+				</div>
 
 				{/* Action Buttons */}
 				<div className="flex justify-end pt-3 md:pt-4">
diff --git a/surfsense_web/components/settings/roles-manager.tsx b/surfsense_web/components/settings/roles-manager.tsx
index d2ddba9a0..afaa9d2c5 100644
--- a/surfsense_web/components/settings/roles-manager.tsx
+++ b/surfsense_web/components/settings/roles-manager.tsx
@@ -349,14 +349,14 @@ export function RolesManager({ searchSpaceId }: { searchSpaceId: number }) {
 function PermissionsBadge({ permissions }: { permissions: string[] }) {
 	if (permissions.includes("*")) {
 		return (
-			<div className="px-2.5 py-1 rounded-md bg-muted/50 border border-border/60 text-muted-foreground">
-				<span className="text-xs font-medium whitespace-nowrap">Full access</span>
+			<div className="rounded-md border-0 bg-muted px-1.5 py-0.5 text-muted-foreground">
+				<span className="text-[10px] font-medium whitespace-nowrap">Full access</span>
 			</div>
 		);
 	}
 	return (
-		<div className="px-2.5 py-1 rounded-md border border-border/60 bg-muted/50 text-muted-foreground">
-			<span className="text-xs font-medium whitespace-nowrap">
+		<div className="rounded-md border-0 bg-muted px-1.5 py-0.5 text-muted-foreground">
+			<span className="text-[10px] font-medium whitespace-nowrap">
 				{permissions.length} permissions
 			</span>
 		</div>
diff --git a/surfsense_web/components/settings/vision-model-manager.tsx b/surfsense_web/components/settings/vision-model-manager.tsx
index 167c5b31d..31578b4f1 100644
--- a/surfsense_web/components/settings/vision-model-manager.tsx
+++ b/surfsense_web/components/settings/vision-model-manager.tsx
@@ -25,6 +25,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
@@ -137,7 +138,7 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
 					<Button
 						variant="outline"
 						onClick={openNewDialog}
-						className="gap-2 bg-white text-black hover:bg-accent hover:text-accent-foreground dark:bg-white dark:text-black"
+						className="gap-2 border-transparent bg-white text-[#1f1f1f] font-medium hover:bg-zinc-100 hover:text-[#1f1f1f] dark:border-transparent dark:bg-white dark:text-[#1f1f1f]"
 					>
 						Add Vision Model
 					</Button>
@@ -184,37 +185,45 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
 				</div>
 			)}
 
-			{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length > 0 && (
+			{(isLoading ||
+				globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length > 0) && (
 				<Alert>
 					<Info />
 					<AlertDescription>
-						<p>
-							<span className="font-medium">
-								{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length}{" "}
-								global vision{" "}
-								{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length === 1
-									? "model"
-									: "models"}
-							</span>{" "}
-							available from your administrator. {(() => {
-								const nonAuto = globalConfigs.filter(
-									(g) => !("is_auto_mode" in g && g.is_auto_mode)
-								);
-								const premium = nonAuto.filter(
-									(g) =>
-										"billing_tier" in g &&
-										(g as { billing_tier?: string }).billing_tier === "premium"
-								).length;
-								const free = nonAuto.length - premium;
-								if (premium > 0 && free > 0) {
-									return `${premium} premium, ${free} free.`;
-								}
-								if (premium > 0) {
-									return `All ${premium} premium — debits your shared credit pool.`;
-								}
-								return `All ${free} free.`;
-							})()}
-						</p>
+						{isLoading ? (
+							<div className="flex min-h-[1.625em] items-center">
+								<Skeleton className="h-4 w-60 bg-accent-foreground/15" />
+							</div>
+						) : (
+							<p>
+								<span className="font-medium">
+									{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length}{" "}
+									global vision{" "}
+									{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length ===
+									1
+										? "model"
+										: "models"}
+								</span>{" "}
+								available from your administrator. {(() => {
+									const nonAuto = globalConfigs.filter(
+										(g) => !("is_auto_mode" in g && g.is_auto_mode)
+									);
+									const premium = nonAuto.filter(
+										(g) =>
+											"billing_tier" in g &&
+											(g as { billing_tier?: string }).billing_tier === "premium"
+									).length;
+									const free = nonAuto.length - premium;
+									if (premium > 0 && free > 0) {
+										return `${premium} premium, ${free} free.`;
+									}
+									if (premium > 0) {
+										return `All ${premium} premium — debits your shared credit pool.`;
+									}
+									return `All ${free} free.`;
+								})()}
+							</p>
+						)}
 					</AlertDescription>
 				</Alert>
 			)}
@@ -226,9 +235,6 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
 			{!isLoading &&
 				globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length > 0 && (
 					<div className="space-y-3">
-						<h3 className="text-xs md:text-sm font-semibold text-muted-foreground">
-							Global Vision Models
-						</h3>
 						<div className="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3">
 							{globalConfigs
 								.filter((g) => !("is_auto_mode" in g && g.is_auto_mode))
@@ -242,7 +248,7 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
 									return (
 										<Card
 											key={cfg.id}
-											className="border-border/60 bg-muted/20 overflow-hidden h-full"
+											className="group relative overflow-hidden transition-all duration-200 border-accent bg-accent/20 hover:shadow-md h-full"
 										>
 											<CardContent className="p-4 flex flex-col gap-3 h-full">
 												<div className="flex items-center gap-2 min-w-0">
@@ -275,10 +281,13 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
 														{cfg.description}
 													</p>
 												)}
-												<div className="flex items-center pt-2 border-t border-border/40 mt-auto">
-													<span className="text-[11px] text-muted-foreground/60 truncate">
-														{cfg.model_name}
-													</span>
+												<div className="mt-auto space-y-2">
+													<Separator className="bg-accent" />
+													<div className="flex items-center">
+														<span className="text-[11px] text-muted-foreground/60 truncate">
+															{cfg.model_name}
+														</span>
+													</div>
 												</div>
 											</CardContent>
 										</Card>
@@ -291,29 +300,13 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
 			{isLoading && (
 				<div className="space-y-4 md:space-y-6">
 					<div className="space-y-4">
-						<div className="flex items-center justify-between">
-							<Skeleton className="h-6 md:h-7 w-40 md:w-48" />
-							<Skeleton className="h-8 md:h-9 w-32 md:w-36 rounded-md" />
-						</div>
 						<div className="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3">
 							{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
-								<Card key={key} className="border-border/60">
-									<CardContent className="p-4 flex flex-col gap-3">
-										<div className="flex items-center gap-2.5">
-											<Skeleton className="size-4 rounded-full shrink-0" />
-											<div className="space-y-1.5 flex-1 min-w-0">
-												<Skeleton className="h-4 w-28 md:w-32" />
-												<Skeleton className="h-3 w-40 md:w-48" />
-											</div>
-										</div>
-										<div className="flex items-center pt-2 border-t border-border/40">
-											<Skeleton className="h-3 w-20 flex-1" />
-											<Skeleton className="h-3 w-3 rounded-full shrink-0 mx-1" />
-											<div className="flex-1 flex items-center justify-end gap-1.5">
-												<Skeleton className="h-4 w-4 rounded-full" />
-												<Skeleton className="h-3 w-16" />
-											</div>
-										</div>
+								<Card key={key} className="border-accent bg-accent/20">
+									<CardContent className="p-4 flex flex-col gap-3 min-h-32">
+										<Skeleton className="h-4 w-32 md:w-40 bg-accent" />
+										<Skeleton className="h-3 w-full bg-accent" />
+										<Skeleton className="h-3 w-24 md:w-28 bg-accent mt-auto" />
 									</CardContent>
 								</Card>
 							))}
@@ -342,7 +335,7 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
 
 								return (
 									<div key={config.id}>
-										<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full">
+										<Card className="group relative overflow-hidden transition-all duration-200 border-accent bg-accent/20 hover:shadow-md h-full">
 											<CardContent className="p-4 flex flex-col gap-3 h-full">
 												{/* Header: Icon + Name + Actions */}
 												<div className="flex items-center justify-between gap-2">
@@ -402,41 +395,44 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
 												</div>
 
 												{/* Footer: Date + Creator */}
-												<div className="flex items-center pt-2 border-t border-border/40 mt-auto">
-													<span className="shrink-0 text-[11px] text-muted-foreground/60 whitespace-nowrap">
-														{new Date(config.created_at).toLocaleDateString(undefined, {
-															year: "numeric",
-															month: "short",
-															day: "numeric",
-														})}
-													</span>
-													{member && (
-														<>
-															<Dot className="h-4 w-4 text-muted-foreground/30 shrink-0" />
-															<TooltipProvider>
-																<Tooltip open={isDesktop ? undefined : false}>
-																	<TooltipTrigger asChild>
-																		<div className="min-w-0 flex items-center gap-1.5 cursor-default">
-																			<Avatar className="size-4.5 shrink-0">
-																				{member.avatarUrl && (
-																					<AvatarImage src={member.avatarUrl} alt={member.name} />
-																				)}
-																				<AvatarFallback className="text-[9px]">
-																					{getInitials(member.name)}
-																				</AvatarFallback>
-																			</Avatar>
-																			<span className="text-[11px] text-muted-foreground/60 truncate">
-																				{member.name}
-																			</span>
-																		</div>
-																	</TooltipTrigger>
-																	<TooltipContent side="bottom">
-																		{member.email || member.name}
-																	</TooltipContent>
-																</Tooltip>
-															</TooltipProvider>
-														</>
-													)}
+												<div className="mt-auto space-y-2">
+													<Separator className="bg-accent" />
+													<div className="flex items-center">
+														<span className="shrink-0 text-[11px] text-muted-foreground/60 whitespace-nowrap">
+															{new Date(config.created_at).toLocaleDateString(undefined, {
+																year: "numeric",
+																month: "short",
+																day: "numeric",
+															})}
+														</span>
+														{member && (
+															<>
+																<Dot className="h-4 w-4 text-muted-foreground/30 shrink-0" />
+																<TooltipProvider>
+																	<Tooltip open={isDesktop ? undefined : false}>
+																		<TooltipTrigger asChild>
+																			<div className="min-w-0 flex items-center gap-1.5 cursor-default">
+																				<Avatar className="size-4.5 shrink-0">
+																					{member.avatarUrl && (
+																						<AvatarImage src={member.avatarUrl} alt={member.name} />
+																					)}
+																					<AvatarFallback className="text-[9px]">
+																						{getInitials(member.name)}
+																					</AvatarFallback>
+																				</Avatar>
+																				<span className="text-[11px] text-muted-foreground/60 truncate">
+																					{member.name}
+																				</span>
+																			</div>
+																		</TooltipTrigger>
+																		<TooltipContent side="bottom">
+																			{member.email || member.name}
+																		</TooltipContent>
+																	</Tooltip>
+																</TooltipProvider>
+															</>
+														)}
+													</div>
 												</div>
 											</CardContent>
 										</Card>