diff --git a/surfsense_web/components/settings/llm-role-manager.tsx b/surfsense_web/components/settings/llm-role-manager.tsx
index d91150a4f..a0c13d116 100644
--- a/surfsense_web/components/settings/llm-role-manager.tsx
+++ b/surfsense_web/components/settings/llm-role-manager.tsx
@@ -5,13 +5,14 @@ import {
 	AlertCircle,
 	Bot,
 	CheckCircle,
+	CircleDashed,
 	FileText,
 	RefreshCw,
 	RotateCcw,
 	Save,
 	Shuffle,
 } from "lucide-react";
-import { motion } from "motion/react";
+import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { updateLLMPreferencesMutationAtom } from "@/atoms/new-llm-config/new-llm-config-mutation.atoms";
@@ -23,16 +24,18 @@ import {
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import {
 	Select,
 	SelectContent,
+	SelectGroup,
 	SelectItem,
+	SelectLabel,
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { Spinner } from "@/components/ui/spinner";
+import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
 
 const ROLE_DESCRIPTIONS = {
@@ -40,17 +43,15 @@ const ROLE_DESCRIPTIONS = {
 		icon: Bot,
 		title: "Agent LLM",
 		description: "Primary LLM for chat interactions and agent operations",
-		color: "bg-blue-100 text-blue-800 border-blue-200",
-		examples: "Chat responses, agent tasks, real-time interactions",
-		characteristics: ["Fast responses", "Conversational", "Agent operations"],
+		color: "text-blue-600 dark:text-blue-400",
+		bgColor: "bg-blue-500/10",
 	},
 	document_summary: {
 		icon: FileText,
 		title: "Document Summary LLM",
-		description: "Handles document summarization",
-		color: "bg-purple-100 text-purple-800 border-purple-200",
-		examples: "Document analysis, podcasts, research synthesis",
-		characteristics: ["Large context window", "Deep reasoning", "Summarization"],
+		description: "Handles document summarization and research synthesis",
+		color: "text-purple-600 dark:text-purple-400",
+		bgColor: "bg-purple-500/10",
 	},
 };
 
@@ -59,7 +60,6 @@ interface LLMRoleManagerProps {
 }
 
 export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
-	// Use new LLM config system
 	const {
 		data: newLLMConfigs = [],
 		isFetching: configsLoading,
@@ -70,7 +70,6 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 		data: globalConfigs = [],
 		isFetching: globalConfigsLoading,
 		error: globalConfigsError,
-		refetch: refreshGlobalConfigs,
 	} = useAtomValue(globalNewLLMConfigsAtom);
 	const {
 		data: preferences = {},
@@ -105,7 +104,6 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 
 		setAssignments(newAssignments);
 
-		// Check if there are changes compared to current preferences
 		const currentPrefs = {
 			agent_llm_id: preferences.agent_llm_id ?? "",
 			document_summary_llm_id: preferences.document_summary_llm_id ?? "",
@@ -165,325 +163,409 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 		assignments.document_summary_llm_id !== null &&
 		assignments.document_summary_llm_id !== undefined;
 
-	// Combine global and custom configs (new system)
+	// Combine global and custom configs
 	const allConfigs = [
 		...globalConfigs.map((config) => ({ ...config, is_global: true })),
 		...newLLMConfigs.filter((config) => config.id && config.id.toString().trim() !== ""),
 	];
 
-	const availableConfigs = allConfigs;
-
 	const isLoading = configsLoading || preferencesLoading || globalConfigsLoading;
 	const hasError = configsError || preferencesError || globalConfigsError;
 
 	return (
-		<div className="space-y-4 md:space-y-6">
-			{/* Header */}
-			<div className="flex flex-col space-y-4 lg:flex-row lg:items-center lg:justify-between lg:space-y-0">
-				<div className="flex flex-wrap gap-2">
-					<Button
+		<div className="space-y-5 md:space-y-6">
+			{/* Header actions */}
+			<div className="flex items-center justify-between">
+				<Button
+					variant="outline"
+					size="sm"
+					onClick={() => refreshConfigs()}
+					disabled={isLoading}
+					className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
+				>
+					<RefreshCw className="h-3 w-3 md:h-4 md:w-4" />
+					Refresh
+				</Button>
+				{isAssignmentComplete && !isLoading && !hasError && (
+					<Badge
 						variant="outline"
-						size="sm"
-						onClick={() => refreshConfigs()}
-						disabled={isLoading}
-						className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
+						className="text-xs gap-1.5 border-emerald-500/30 text-emerald-700 dark:text-emerald-300 bg-emerald-500/5"
 					>
-						<RefreshCw
-							className={`h-3 w-3 md:h-4 md:w-4 ${configsLoading ? "animate-spin" : ""}`}
-						/>
-						<span className="hidden sm:inline">Refresh Configs</span>
-						<span className="sm:hidden">Configs</span>
-					</Button>
-				</div>
+						<CheckCircle className="h-3 w-3" />
+						All roles assigned
+					</Badge>
+				)}
 			</div>
 
 			{/* Error Alert */}
-			{hasError && (
+			<AnimatePresence>
+				{hasError && (
+					<motion.div
+						key="error-alert"
+						initial={{ opacity: 0, y: -10 }}
+						animate={{ opacity: 1, y: 0 }}
+						exit={{ opacity: 0, y: -10 }}
+					>
+						<Alert variant="destructive" className="py-3 md:py-4">
+							<AlertCircle className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
+							<AlertDescription className="text-xs md:text-sm">
+								{(configsError?.message ?? "Failed to load LLM configurations") ||
+									(preferencesError?.message ?? "Failed to load preferences") ||
+									(globalConfigsError?.message ??
+										"Failed to load global configurations")}
+							</AlertDescription>
+						</Alert>
+					</motion.div>
+				)}
+			</AnimatePresence>
+
+			{/* Loading Skeleton */}
+			{isLoading && (
+				<div className="grid gap-4 grid-cols-1 lg:grid-cols-2">
+					{["skeleton-a", "skeleton-b"].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>
+							</CardContent>
+						</Card>
+					))}
+				</div>
+			)}
+
+			{/* No configs warning */}
+			{!isLoading && !hasError && allConfigs.length === 0 && (
 				<Alert variant="destructive" className="py-3 md:py-4">
 					<AlertCircle className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
 					<AlertDescription className="text-xs md:text-sm">
-						{(configsError?.message ?? "Failed to load LLM configurations") ||
-							(preferencesError?.message ?? "Failed to load preferences") ||
-							(globalConfigsError?.message ?? "Failed to load global configurations")}
+						No LLM configurations found. Please add at least one LLM provider in the
+						Agent Configs tab before assigning roles.
 					</AlertDescription>
 				</Alert>
 			)}
 
-			{/* Loading State */}
-			{isLoading && (
-				<Card>
-					<CardContent className="flex items-center justify-center py-8 md:py-12">
-						<div className="flex items-center gap-2 text-muted-foreground">
-							<Spinner size="sm" className="md:h-5 md:w-5" />
-							<span className="text-xs md:text-sm">
-								{configsLoading && preferencesLoading
-									? "Loading configurations and preferences..."
-									: configsLoading
-										? "Loading configurations..."
-										: "Loading preferences..."}
-							</span>
-						</div>
-					</CardContent>
-				</Card>
-			)}
+			{/* Role Assignment Cards */}
+			{!isLoading && !hasError && allConfigs.length > 0 && (
+				<motion.div
+					initial={{ opacity: 0 }}
+					animate={{ opacity: 1 }}
+					transition={{ duration: 0.3 }}
+					className="grid gap-4 grid-cols-1 lg:grid-cols-2"
+				>
+					{Object.entries(ROLE_DESCRIPTIONS).map(([key, role], index) => {
+						const IconComponent = role.icon;
+						const currentAssignment =
+							assignments[`${key}_llm_id` as keyof typeof assignments];
+						const assignedConfig = allConfigs.find(
+							(config) => config.id === currentAssignment
+						);
+						const isAssigned =
+							currentAssignment !== "" &&
+							currentAssignment !== null &&
+							currentAssignment !== undefined;
+						const isAutoMode =
+							assignedConfig &&
+							"is_auto_mode" in assignedConfig &&
+							assignedConfig.is_auto_mode;
 
-			{/* Info Alert */}
-			{!isLoading && !hasError && (
-				<div className="space-y-4 md:space-y-6">
-					{availableConfigs.length === 0 ? (
-						<Alert variant="destructive" className="py-3 md:py-4">
-							<AlertCircle className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
-							<AlertDescription className="text-xs md:text-sm">
-								No LLM configurations found. Please add at least one LLM provider in the Agent
-								Configs tab before assigning roles.
-							</AlertDescription>
-						</Alert>
-					) : !isAssignmentComplete ? (
-						<Alert className="bg-muted/50 py-3 md:py-4">
-							<AlertCircle className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
-							<AlertDescription className="text-xs md:text-sm">
-								Complete all role assignments to enable full functionality. Each role serves
-								different purposes in your workflow.
-							</AlertDescription>
-						</Alert>
-					) : (
-						<Alert className="bg-muted/50 py-3 md:py-4">
-							<CheckCircle className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
-							<AlertDescription className="text-xs md:text-sm">
-								All roles are assigned and ready to use! Your LLM configuration is complete.
-							</AlertDescription>
-						</Alert>
-					)}
+						return (
+							<motion.div
+								key={key}
+								initial={{ opacity: 0, y: 15 }}
+								animate={{ opacity: 1, y: 0 }}
+								transition={{ delay: index * 0.08, duration: 0.3 }}
+							>
+								<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 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">
+											<div className="flex items-center gap-3 min-w-0">
+												<div
+													className={cn(
+														"flex items-center justify-center w-9 h-9 rounded-lg shrink-0",
+														role.bgColor
+													)}
+												>
+													<IconComponent
+														className={cn("w-4 h-4", role.color)}
+													/>
+												</div>
+												<div className="min-w-0">
+													<h4 className="text-sm font-semibold tracking-tight">
+														{role.title}
+													</h4>
+													<p className="text-[11px] text-muted-foreground/70 mt-0.5">
+														{role.description}
+													</p>
+												</div>
+											</div>
+											{isAssigned ? (
+												<CheckCircle className="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" />
+											) : (
+												<CircleDashed className="w-4 h-4 text-muted-foreground/40 shrink-0 mt-0.5" />
+											)}
+										</div>
 
-					{/* Role Assignment Cards */}
-					{availableConfigs.length > 0 && (
-						<div className="grid gap-4 md:gap-6">
-							{Object.entries(ROLE_DESCRIPTIONS).map(([key, role]) => {
-								const IconComponent = role.icon;
-								const currentAssignment = assignments[`${key}_llm_id` as keyof typeof assignments];
-								const assignedConfig = availableConfigs.find(
-									(config) => config.id === currentAssignment
-								);
+										{/* Selector */}
+										<div className="space-y-1.5">
+											<Label className="text-xs font-medium text-muted-foreground">
+												Configuration
+											</Label>
+											<Select
+												value={currentAssignment?.toString() || "unassigned"}
+												onValueChange={(value) =>
+													handleRoleAssignment(`${key}_llm_id`, value)
+												}
+											>
+												<SelectTrigger className="h-9 md:h-10 text-xs md:text-sm">
+													<SelectValue placeholder="Select a configuration" />
+												</SelectTrigger>
+												<SelectContent>
+													<SelectItem value="unassigned">
+														<span className="text-muted-foreground">
+															Unassigned
+														</span>
+													</SelectItem>
 
-								return (
-									<motion.div
-										key={key}
-										initial={{ opacity: 0, y: 10 }}
-										animate={{ opacity: 1, y: 0 }}
-										transition={{ delay: Object.keys(ROLE_DESCRIPTIONS).indexOf(key) * 0.1 }}
-									>
-										<Card
-											className={`border-l-4 ${currentAssignment ? "border-l-primary" : "border-l-muted"} hover:shadow-md transition-shadow`}
+													{/* Global Configurations */}
+													{globalConfigs.length > 0 && (
+														<SelectGroup>
+															<SelectLabel className="text-xs font-semibold text-muted-foreground">
+																Global Configurations
+															</SelectLabel>
+															{globalConfigs.map((config) => {
+																const isAuto =
+																	"is_auto_mode" in config &&
+																	config.is_auto_mode;
+																return (
+																	<SelectItem
+																		key={config.id}
+																		value={config.id.toString()}
+																	>
+																		<div className="flex items-center gap-2">
+																			{isAuto ? (
+																				<Badge
+																					variant="outline"
+																					className="text-[10px] bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300 border-violet-200 dark:border-violet-700"
+																				>
+																					<Shuffle className="size-2.5 mr-0.5" />
+																					AUTO
+																				</Badge>
+																			) : (
+																				<Badge
+																					variant="outline"
+																					className="text-[10px]"
+																				>
+																					{config.provider}
+																				</Badge>
+																			)}
+																			<span>
+																				{config.name}
+																			</span>
+																			{!isAuto && (
+																				<span className="text-muted-foreground text-[11px]">
+																					(
+																					{
+																						config.model_name
+																					}
+																					)
+																				</span>
+																			)}
+																			{isAuto && (
+																				<Badge
+																					variant="secondary"
+																					className="text-[9px] bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300"
+																				>
+																					Recommended
+																				</Badge>
+																			)}
+																		</div>
+																	</SelectItem>
+																);
+															})}
+														</SelectGroup>
+													)}
+
+													{/* Custom Configurations */}
+													{newLLMConfigs.length > 0 && (
+														<SelectGroup>
+															<SelectLabel className="text-xs font-semibold text-muted-foreground">
+																Your Configurations
+															</SelectLabel>
+															{newLLMConfigs
+																.filter(
+																	(config) =>
+																		config.id &&
+																		config.id
+																			.toString()
+																			.trim() !== ""
+																)
+																.map((config) => (
+																	<SelectItem
+																		key={config.id}
+																		value={config.id.toString()}
+																	>
+																		<div className="flex items-center gap-2">
+																			<Badge
+																				variant="outline"
+																				className="text-[10px]"
+																			>
+																				{config.provider}
+																			</Badge>
+																			<span>
+																				{config.name}
+																			</span>
+																			<span className="text-muted-foreground text-[11px]">
+																				(
+																				{
+																					config.model_name
+																				}
+																				)
+																			</span>
+																		</div>
+																	</SelectItem>
+																))}
+														</SelectGroup>
+													)}
+												</SelectContent>
+											</Select>
+										</div>
+
+									{/* Assigned Config Summary */}
+									{assignedConfig && (
+										<div
+											className={cn(
+												"rounded-lg p-3 border",
+												isAutoMode
+													? "bg-violet-50 dark:bg-violet-900/10 border-violet-200/50 dark:border-violet-800/30"
+													: "bg-muted/40 border-border/50"
+											)}
 										>
-											<CardHeader className="pb-2 md:pb-3 px-3 md:px-6 pt-3 md:pt-6">
-												<div className="flex items-center justify-between">
-													<div className="flex items-center gap-2 md:gap-3">
-														<div className={`p-1.5 md:p-2 rounded-lg ${role.color}`}>
-															<IconComponent className="w-4 h-4 md:w-5 md:h-5" />
-														</div>
-														<div>
-															<CardTitle className="text-base md:text-lg">{role.title}</CardTitle>
-															<CardDescription className="mt-0.5 md:mt-1 text-xs md:text-sm">
-																{role.description}
-															</CardDescription>
+												{isAutoMode ? (
+													<div className="flex items-center gap-2">
+														<Shuffle
+															className={cn(
+																"w-3.5 h-3.5 shrink-0 text-violet-600 dark:text-violet-400"
+															)}
+														/>
+														<div className="min-w-0">
+															<p className="text-xs font-medium text-violet-700 dark:text-violet-300">
+																Auto Load Balanced
+															</p>
+															<p className="text-[10px] text-violet-600/70 dark:text-violet-400/70 mt-0.5">
+																Routes across all available providers
+															</p>
 														</div>
 													</div>
-													{currentAssignment && (
-														<CheckCircle className="w-4 h-4 md:w-5 md:h-5 text-green-500 shrink-0" />
-													)}
-												</div>
-											</CardHeader>
-											<CardContent className="space-y-3 md:space-y-4 px-3 md:px-6 pb-3 md:pb-6">
-												<div className="space-y-1.5 md:space-y-2">
-													<Label className="text-xs md:text-sm font-medium">
-														Assign LLM Configuration:
-													</Label>
-													<Select
-														value={currentAssignment?.toString() || "unassigned"}
-														onValueChange={(value) => handleRoleAssignment(`${key}_llm_id`, value)}
-													>
-														<SelectTrigger className="h-9 md:h-10 text-xs md:text-sm">
-															<SelectValue placeholder="Select an LLM configuration" />
-														</SelectTrigger>
-														<SelectContent>
-															<SelectItem value="unassigned">
-																<span className="text-muted-foreground">Unassigned</span>
-															</SelectItem>
-
-															{/* Global Configurations */}
-															{globalConfigs.length > 0 && (
-																<>
-																	<div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
-																		Global Configurations
-																	</div>
-																	{globalConfigs.map((config) => {
-																		const isAutoMode =
-																			"is_auto_mode" in config && config.is_auto_mode;
-																		return (
-																			<SelectItem key={config.id} value={config.id.toString()}>
-																				<div className="flex items-center gap-2">
-																					{isAutoMode ? (
-																						<Badge
-																							variant="outline"
-																							className="text-xs bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300 border-violet-200 dark:border-violet-700"
-																						>
-																							<Shuffle className="size-3 mr-1" />
-																							AUTO
-																						</Badge>
-																					) : (
-																						<Badge variant="outline" className="text-xs">
-																							{config.provider}
-																						</Badge>
-																					)}
-																					<span>{config.name}</span>
-																					{!isAutoMode && (
-																						<span className="text-muted-foreground">
-																							({config.model_name})
-																						</span>
-																					)}
-																					{isAutoMode ? (
-																						<Badge
-																							variant="secondary"
-																							className="text-xs bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300"
-																						>
-																							Recommended
-																						</Badge>
-																					) : (
-																						<Badge variant="secondary" className="text-xs">
-																							🌐 Global
-																						</Badge>
-																					)}
-																				</div>
-																			</SelectItem>
-																		);
-																	})}
-																</>
-															)}
-
-															{/* Custom Configurations */}
-															{newLLMConfigs.length > 0 && (
-																<>
-																	<div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
-																		Your Configurations
-																	</div>
-																	{newLLMConfigs
-																		.filter(
-																			(config) => config.id && config.id.toString().trim() !== ""
-																		)
-																		.map((config) => (
-																			<SelectItem key={config.id} value={config.id.toString()}>
-																				<div className="flex items-center gap-2">
-																					<Badge variant="outline" className="text-xs">
-																						{config.provider}
-																					</Badge>
-																					<span>{config.name}</span>
-																					<span className="text-muted-foreground">
-																						({config.model_name})
-																					</span>
-																				</div>
-																			</SelectItem>
-																		))}
-																</>
-															)}
-														</SelectContent>
-													</Select>
-												</div>
-
-												{assignedConfig && (
-													<div
-														className={cn(
-															"mt-2 md:mt-3 p-2 md:p-3 rounded-lg",
-															"is_auto_mode" in assignedConfig && assignedConfig.is_auto_mode
-																? "bg-violet-50 dark:bg-violet-900/20 border border-violet-200 dark:border-violet-800/50"
-																: "bg-muted/50"
-														)}
-													>
-														<div className="flex items-center gap-1.5 md:gap-2 text-xs md:text-sm flex-wrap">
-															{"is_auto_mode" in assignedConfig && assignedConfig.is_auto_mode ? (
-																<Shuffle className="w-3 h-3 md:w-4 md:h-4 shrink-0 text-violet-600 dark:text-violet-400" />
-															) : (
-																<Bot className="w-3 h-3 md:w-4 md:h-4 shrink-0" />
-															)}
-															<span className="font-medium">Assigned:</span>
-															{"is_auto_mode" in assignedConfig && assignedConfig.is_auto_mode ? (
-																<Badge
-																	variant="secondary"
-																	className="text-[10px] md:text-xs bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300"
-																>
-																	AUTO
-																</Badge>
-															) : (
-																<Badge variant="secondary" className="text-[10px] md:text-xs">
-																	{assignedConfig.provider}
-																</Badge>
-															)}
-															<span>{assignedConfig.name}</span>
-															{"is_auto_mode" in assignedConfig && assignedConfig.is_auto_mode ? (
+												) : (
+													<div className="flex items-start gap-2">
+														<Bot className="w-3.5 h-3.5 shrink-0 mt-0.5 text-muted-foreground" />
+														<div className="min-w-0 flex-1">
+															<div className="flex items-center gap-1.5 flex-wrap">
+																<span className="text-xs font-medium">
+																	{assignedConfig.name}
+																</span>
+																{"is_global" in assignedConfig &&
+																	assignedConfig.is_global && (
+																		<Badge
+																			variant="secondary"
+																			className="text-[9px] px-1.5 py-0"
+																		>
+																			🌐 Global
+																		</Badge>
+																	)}
+															</div>
+															<div className="flex items-center gap-1.5 mt-1">
 																<Badge
 																	variant="outline"
-																	className="text-[9px] md:text-xs bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300 border-violet-200 dark:border-violet-700"
+																	className="text-[9px] px-1.5 py-0 font-mono"
 																>
-																	Recommended
+																	{assignedConfig.provider}
 																</Badge>
-															) : (
-																"is_global" in assignedConfig &&
-																assignedConfig.is_global && (
-																	<Badge variant="outline" className="text-[9px] md:text-xs">
-																		🌐 Global
-																	</Badge>
-																)
+																<code className="text-[10px] text-muted-foreground font-mono truncate">
+																	{assignedConfig.model_name}
+																</code>
+															</div>
+															{assignedConfig.api_base && (
+																<p className="text-[10px] text-muted-foreground/60 mt-1 truncate">
+																	{assignedConfig.api_base}
+																</p>
 															)}
 														</div>
-														{"is_auto_mode" in assignedConfig && assignedConfig.is_auto_mode ? (
-															<div className="text-[10px] md:text-xs text-violet-600 dark:text-violet-400 mt-0.5 md:mt-1">
-																Automatically load balances across all available LLM providers
-															</div>
-														) : (
-															<>
-																<div className="text-[10px] md:text-xs text-muted-foreground mt-0.5 md:mt-1">
-																	Model: {assignedConfig.model_name}
-																</div>
-																{assignedConfig.api_base && (
-																	<div className="text-[10px] md:text-xs text-muted-foreground">
-																		Base: {assignedConfig.api_base}
-																	</div>
-																)}
-															</>
-														)}
 													</div>
 												)}
-											</CardContent>
-										</Card>
-									</motion.div>
-								);
-							})}
-						</div>
-					)}
+										</div>
+									)}
+								</CardContent>
+								</Card>
+							</motion.div>
+						);
+					})}
+				</motion.div>
+			)}
 
-					{/* Action Buttons */}
-					{hasChanges && (
-						<div className="flex justify-center gap-2 md:gap-3 pt-3 md:pt-4">
-							<Button
-								onClick={handleSave}
-								disabled={isSaving}
-								className="flex items-center gap-2 text-xs md:text-sm h-9 md:h-10"
-							>
-								<Save className="w-3.5 h-3.5 md:w-4 md:h-4" />
-								{isSaving ? "Saving" : "Save Changes"}
-							</Button>
+			{/* Save / Reset Bar */}
+			<AnimatePresence>
+				{hasChanges && (
+					<motion.div
+						initial={{ opacity: 0, y: 10 }}
+						animate={{ opacity: 1, y: 0 }}
+						exit={{ opacity: 0, y: 10 }}
+						transition={{ duration: 0.2 }}
+						className="flex items-center justify-between gap-3 rounded-lg border border-border bg-muted/50 p-3 md:p-4"
+					>
+						<p className="text-xs md:text-sm text-muted-foreground">
+							You have unsaved changes
+						</p>
+						<div className="flex items-center gap-2">
 							<Button
 								variant="outline"
+								size="sm"
 								onClick={handleReset}
 								disabled={isSaving}
-								className="flex items-center gap-2 text-xs md:text-sm h-9 md:h-10"
+								className="h-8 text-xs gap-1.5"
 							>
-								<RotateCcw className="w-3.5 h-3.5 md:w-4 md:h-4" />
+								<RotateCcw className="w-3 h-3" />
 								Reset
 							</Button>
+							<Button
+								size="sm"
+								onClick={handleSave}
+								disabled={isSaving}
+								className="h-8 text-xs gap-1.5"
+							>
+								<Save className="w-3 h-3" />
+								{isSaving ? "Saving…" : "Save Changes"}
+							</Button>
 						</div>
-					)}
-				</div>
-			)}
+					</motion.div>
+				)}
+			</AnimatePresence>
 		</div>
 	);
 }