diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index 14f4aeafb..dfcda2d9f 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -43,6 +43,7 @@ import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { AssistantMessage } from "@/components/assistant-ui/assistant-message";
 import { ChatSessionStatus } from "@/components/assistant-ui/chat-session-status";
 import { ConnectorIndicator } from "@/components/assistant-ui/connector-popup";
+import { useDocumentUploadDialog } from "@/components/assistant-ui/document-upload-popup";
 import {
 	InlineMentionEditor,
 	type InlineMentionEditorRef,
@@ -478,6 +479,7 @@ const ComposerAction: FC<ComposerActionProps> = ({
 	const mentionedDocuments = useAtomValue(mentionedDocumentsAtom);
 	const sidebarDocs = useAtomValue(sidebarSelectedDocumentsAtom);
 	const setDocumentsSidebarOpen = useSetAtom(documentsSidebarOpenAtom);
+	const { openDialog: openUploadDialog } = useDocumentUploadDialog();
 
 	const isComposerTextEmpty = useAssistantState(({ composer }) => {
 		const text = composer.text?.trim() || "";
@@ -514,8 +516,8 @@ const ComposerAction: FC<ComposerActionProps> = ({
 					variant="ghost"
 					size="icon"
 					className="size-[34px] rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
-					aria-label="Open documents"
-					onClick={() => setDocumentsSidebarOpen(true)}
+					aria-label="Upload documents"
+					onClick={openUploadDialog}
 				>
 					<PlusIcon className="size-4" />
 				</TooltipIconButton>
diff --git a/surfsense_web/components/inference-params-editor.tsx b/surfsense_web/components/inference-params-editor.tsx
index b29275611..3764b1dac 100644
--- a/surfsense_web/components/inference-params-editor.tsx
+++ b/surfsense_web/components/inference-params-editor.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Plus, Trash2 } from "lucide-react";
+import { Trash2 } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -76,7 +76,7 @@ export default function InferenceParamsEditor({ params, setParams }: InferencePa
 						<SelectTrigger id="param-key" className="w-full">
 							<SelectValue placeholder="Select parameter" />
 						</SelectTrigger>
-						<SelectContent>
+						<SelectContent className="bg-muted dark:border-neutral-700">
 							{PARAM_KEYS.map((key) => (
 								<SelectItem key={key} value={key}>
 									{key}
@@ -104,7 +104,7 @@ export default function InferenceParamsEditor({ params, setParams }: InferencePa
 					onClick={handleAdd}
 					disabled={!selectedKey || value === ""}
 				>
-					<Plus className="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-2" /> Add Parameter
+					Add Parameter
 				</Button>
 			</div>
 
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarHeader.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarHeader.tsx
index bab3c6917..d61a0f205 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarHeader.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarHeader.tsx
@@ -8,7 +8,6 @@ import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
-	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
@@ -56,7 +55,6 @@ export function SidebarHeader({
 						<UserPen className="h-4 w-4" />
 						{t("manage_members")}
 					</DropdownMenuItem>
-					<DropdownMenuSeparator />
 					<DropdownMenuItem onClick={onSettings}>
 						<Settings className="h-4 w-4" />
 						{t("search_space_settings")}
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
index aa38910b5..6eeeed5e9 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
@@ -188,7 +188,7 @@ export function SidebarUserProfile({
 							</div>
 						</DropdownMenuLabel>
 
-						<DropdownMenuSeparator />
+						<DropdownMenuSeparator className="dark:bg-neutral-700" />
 
 						<DropdownMenuItem onClick={onUserSettings}>
 							<Settings className="h-4 w-4" />
@@ -256,7 +256,7 @@ export function SidebarUserProfile({
 							</DropdownMenuPortal>
 						</DropdownMenuSub>
 
-						<DropdownMenuSeparator />
+						<DropdownMenuSeparator className="dark:bg-neutral-700" />
 
 						<DropdownMenuItem onClick={handleLogout} disabled={isLoggingOut}>
 							{isLoggingOut ? (
@@ -310,7 +310,7 @@ export function SidebarUserProfile({
 						</div>
 					</DropdownMenuLabel>
 
-					<DropdownMenuSeparator />
+					<DropdownMenuSeparator className="dark:bg-neutral-700" />
 
 					<DropdownMenuItem onClick={onUserSettings}>
 						<Settings className="h-4 w-4" />
@@ -378,7 +378,7 @@ export function SidebarUserProfile({
 						</DropdownMenuPortal>
 					</DropdownMenuSub>
 
-					<DropdownMenuSeparator />
+					<DropdownMenuSeparator className="dark:bg-neutral-700" />
 
 					<DropdownMenuItem onClick={handleLogout} disabled={isLoggingOut}>
 						{isLoggingOut ? <Spinner size="sm" className="mr-2" /> : <LogOut className="h-4 w-4" />}
diff --git a/surfsense_web/components/new-chat/chat-header.tsx b/surfsense_web/components/new-chat/chat-header.tsx
index 4d40bc21a..e34be791f 100644
--- a/surfsense_web/components/new-chat/chat-header.tsx
+++ b/surfsense_web/components/new-chat/chat-header.tsx
@@ -8,7 +8,7 @@ import type {
 	NewLLMConfigPublic,
 } from "@/contracts/types/new-llm-config.types";
 import { ImageConfigSidebar } from "./image-config-sidebar";
-import { ModelConfigSidebar } from "./model-config-sidebar";
+import { ModelConfigDialog } from "./model-config-dialog";
 import { ModelSelector } from "./model-selector";
 
 interface ChatHeaderProps {
@@ -17,13 +17,13 @@ interface ChatHeaderProps {
 }
 
 export function ChatHeader({ searchSpaceId, className }: ChatHeaderProps) {
-	// LLM config sidebar state
-	const [sidebarOpen, setSidebarOpen] = useState(false);
+	// LLM config dialog state
+	const [dialogOpen, setDialogOpen] = useState(false);
 	const [selectedConfig, setSelectedConfig] = useState<
 		NewLLMConfigPublic | GlobalNewLLMConfig | null
 	>(null);
 	const [isGlobal, setIsGlobal] = useState(false);
-	const [sidebarMode, setSidebarMode] = useState<"create" | "edit" | "view">("view");
+	const [dialogMode, setDialogMode] = useState<"create" | "edit" | "view">("view");
 
 	// Image config sidebar state
 	const [imageSidebarOpen, setImageSidebarOpen] = useState(false);
@@ -38,8 +38,8 @@ export function ChatHeader({ searchSpaceId, className }: ChatHeaderProps) {
 		(config: NewLLMConfigPublic | GlobalNewLLMConfig, global: boolean) => {
 			setSelectedConfig(config);
 			setIsGlobal(global);
-			setSidebarMode(global ? "view" : "edit");
-			setSidebarOpen(true);
+			setDialogMode(global ? "view" : "edit");
+			setDialogOpen(true);
 		},
 		[]
 	);
@@ -47,12 +47,12 @@ export function ChatHeader({ searchSpaceId, className }: ChatHeaderProps) {
 	const handleAddNewLLM = useCallback(() => {
 		setSelectedConfig(null);
 		setIsGlobal(false);
-		setSidebarMode("create");
-		setSidebarOpen(true);
+		setDialogMode("create");
+		setDialogOpen(true);
 	}, []);
 
-	const handleSidebarClose = useCallback((open: boolean) => {
-		setSidebarOpen(open);
+	const handleDialogClose = useCallback((open: boolean) => {
+		setDialogOpen(open);
 		if (!open) setSelectedConfig(null);
 	}, []);
 
@@ -88,13 +88,13 @@ export function ChatHeader({ searchSpaceId, className }: ChatHeaderProps) {
 				onAddNewImage={handleAddImageModel}
 				className={className}
 			/>
-			<ModelConfigSidebar
-				open={sidebarOpen}
-				onOpenChange={handleSidebarClose}
+			<ModelConfigDialog
+				open={dialogOpen}
+				onOpenChange={handleDialogClose}
 				config={selectedConfig}
 				isGlobal={isGlobal}
 				searchSpaceId={searchSpaceId}
-				mode={sidebarMode}
+				mode={dialogMode}
 			/>
 			<ImageConfigSidebar
 				open={imageSidebarOpen}
diff --git a/surfsense_web/components/new-chat/model-config-sidebar.tsx b/surfsense_web/components/new-chat/model-config-dialog.tsx
similarity index 68%
rename from surfsense_web/components/new-chat/model-config-sidebar.tsx
rename to surfsense_web/components/new-chat/model-config-dialog.tsx
index 90fb95c88..0d58786be 100644
--- a/surfsense_web/components/new-chat/model-config-sidebar.tsx
+++ b/surfsense_web/components/new-chat/model-config-dialog.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useAtomValue } from "jotai";
-import { AlertCircle, Bot, ChevronRight, Globe, Shuffle, User, X, Zap } from "lucide-react";
+import { AlertCircle, X, Zap } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
 import {
@@ -15,13 +15,14 @@ import { LLMConfigForm, type LLMConfigFormData } from "@/components/shared/llm-c
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
 import type {
 	GlobalNewLLMConfig,
 	NewLLMConfigPublic,
 } from "@/contracts/types/new-llm-config.types";
 import { cn } from "@/lib/utils";
 
-interface ModelConfigSidebarProps {
+interface ModelConfigDialogProps {
 	open: boolean;
 	onOpenChange: (open: boolean) => void;
 	config: NewLLMConfigPublic | GlobalNewLLMConfig | null;
@@ -30,28 +31,34 @@ interface ModelConfigSidebarProps {
 	mode: "create" | "edit" | "view";
 }
 
-export function ModelConfigSidebar({
+export function ModelConfigDialog({
 	open,
 	onOpenChange,
 	config,
 	isGlobal,
 	searchSpaceId,
 	mode,
-}: ModelConfigSidebarProps) {
+}: ModelConfigDialogProps) {
 	const [isSubmitting, setIsSubmitting] = useState(false);
 	const [mounted, setMounted] = useState(false);
+	const [scrollPos, setScrollPos] = useState<"top" | "middle" | "bottom">("top");
+	const scrollRef = useRef<HTMLDivElement>(null);
 
-	// Handle SSR - only render portal on client
 	useEffect(() => {
 		setMounted(true);
 	}, []);
 
-	// Mutations - use mutateAsync from the atom value
+	const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+		const el = e.currentTarget;
+		const atTop = el.scrollTop <= 2;
+		const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
+		setScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
+	}, []);
+
 	const { mutateAsync: createConfig } = useAtomValue(createNewLLMConfigMutationAtom);
 	const { mutateAsync: updateConfig } = useAtomValue(updateNewLLMConfigMutationAtom);
 	const { mutateAsync: updatePreferences } = useAtomValue(updateLLMPreferencesMutationAtom);
 
-	// Handle escape key
 	useEffect(() => {
 		const handleEscape = (e: KeyboardEvent) => {
 			if (e.key === "Escape" && open) {
@@ -62,10 +69,8 @@ export function ModelConfigSidebar({
 		return () => window.removeEventListener("keydown", handleEscape);
 	}, [open, onOpenChange]);
 
-	// Check if this is Auto mode
 	const isAutoMode = config && "is_auto_mode" in config && config.is_auto_mode;
 
-	// Get title based on mode
 	const getTitle = () => {
 		if (mode === "create") return "Add New Configuration";
 		if (isAutoMode) return "Auto Mode (Fastest)";
@@ -73,19 +78,23 @@ export function ModelConfigSidebar({
 		return "Edit Configuration";
 	};
 
-	// Handle form submit
+	const getSubtitle = () => {
+		if (mode === "create") return "Set up a new LLM provider for this search space";
+		if (isAutoMode) return "Automatically routes requests across providers";
+		if (isGlobal) return "Read-only global configuration";
+		return "Update your configuration settings";
+	};
+
 	const handleSubmit = useCallback(
 		async (data: LLMConfigFormData) => {
 			setIsSubmitting(true);
 			try {
 				if (mode === "create") {
-					// Create new config
 					const result = await createConfig({
 						...data,
 						search_space_id: searchSpaceId,
 					});
 
-					// Assign the new config to the agent role
 					if (result?.id) {
 						await updatePreferences({
 							search_space_id: searchSpaceId,
@@ -98,7 +107,6 @@ export function ModelConfigSidebar({
 					toast.success("Configuration created and assigned!");
 					onOpenChange(false);
 				} else if (!isGlobal && config) {
-					// Update existing user config
 					await updateConfig({
 						id: config.id,
 						data: {
@@ -137,7 +145,6 @@ export function ModelConfigSidebar({
 		]
 	);
 
-	// Handle "Use this model" for global configs
 	const handleUseGlobalConfig = useCallback(async () => {
 		if (!config || !isGlobal) return;
 		setIsSubmitting(true);
@@ -160,7 +167,7 @@ export function ModelConfigSidebar({
 
 	if (!mounted) return null;
 
-	const sidebarContent = (
+	const dialogContent = (
 		<AnimatePresence>
 			{open && (
 				<>
@@ -169,93 +176,80 @@ export function ModelConfigSidebar({
 						initial={{ opacity: 0 }}
 						animate={{ opacity: 1 }}
 						exit={{ opacity: 0 }}
-						transition={{ duration: 0.2 }}
-						className="fixed inset-0 z-[24] bg-black/20 backdrop-blur-sm"
+						transition={{ duration: 0.15 }}
+						className="fixed inset-0 z-[24] bg-black/50 backdrop-blur-sm"
 						onClick={() => onOpenChange(false)}
 					/>
 
-					{/* Sidebar Panel */}
+					{/* Dialog */}
 					<motion.div
-						initial={{ x: "100%", opacity: 0 }}
-						animate={{ x: 0, opacity: 1 }}
-						exit={{ x: "100%", opacity: 0 }}
-						transition={{
-							type: "spring",
-							damping: 30,
-							stiffness: 300,
-						}}
-						className={cn(
-							"fixed right-0 top-0 z-[25] h-full w-full sm:w-[480px] lg:w-[540px]",
-							"bg-background border-l border-border/50 shadow-2xl",
-							"flex flex-col"
-						)}
+						initial={{ opacity: 0, scale: 0.96 }}
+						animate={{ opacity: 1, scale: 1 }}
+						exit={{ opacity: 0, scale: 0.96 }}
+						transition={{ duration: 0.15, ease: "easeOut" }}
+						className="fixed inset-0 z-[25] flex items-center justify-center p-4 sm:p-6"
 					>
-						{/* Header */}
 						<div
+							role="dialog"
+							aria-modal="true"
 							className={cn(
-								"flex items-center justify-between px-6 py-4 border-b border-border/50",
-								isAutoMode ? "bg-gradient-to-r from-violet-500/10 to-purple-500/10" : "bg-muted/20"
+								"relative w-full max-w-lg h-[85vh]",
+								"rounded-xl bg-background shadow-2xl ring-1 ring-border/50",
+								"dark:bg-neutral-900 dark:ring-white/5",
+								"flex flex-col overflow-hidden"
 							)}
+							onClick={(e) => e.stopPropagation()}
+							onKeyDown={(e) => { if (e.key === "Escape") onOpenChange(false); }}
 						>
-							<div className="flex items-center gap-3">
-								<div
-									className={cn(
-										"flex items-center justify-center size-10 rounded-xl",
-										isAutoMode ? "bg-gradient-to-br from-violet-500 to-purple-600" : "bg-primary/10"
-									)}
-								>
-									{isAutoMode ? (
-										<Shuffle className="size-5 text-white" />
-									) : (
-										<Bot className="size-5 text-primary" />
-									)}
-								</div>
-								<div>
-									<h2 className="text-base sm:text-lg font-semibold">{getTitle()}</h2>
-									<div className="flex items-center gap-2 mt-0.5">
-										{isAutoMode ? (
-											<Badge
-												variant="secondary"
-												className="gap-1 text-xs bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300"
-											>
-												<Zap className="size-3" />
+							{/* Header */}
+							<div className="flex items-start justify-between px-6 pt-6 pb-4">
+								<div className="space-y-1 pr-8">
+									<div className="flex items-center gap-2">
+										<h2 className="text-lg font-semibold tracking-tight">{getTitle()}</h2>
+										{isAutoMode && (
+											<Badge variant="secondary" className="text-[10px]">
 												Recommended
 											</Badge>
-										) : isGlobal ? (
-											<Badge variant="secondary" className="gap-1 text-xs">
-												<Globe className="size-3" />
+										)}
+										{isGlobal && !isAutoMode && mode !== "create" && (
+											<Badge variant="secondary" className="text-[10px]">
 												Global
 											</Badge>
-										) : mode !== "create" ? (
-											<Badge variant="outline" className="gap-1 text-xs">
-												<User className="size-3" />
+										)}
+										{!isGlobal && mode !== "create" && !isAutoMode && (
+											<Badge variant="outline" className="text-[10px]">
 												Custom
 											</Badge>
-										) : null}
-										{config && !isAutoMode && (
-											<span className="text-xs text-muted-foreground">{config.model_name}</span>
 										)}
 									</div>
+									<p className="text-sm text-muted-foreground">{getSubtitle()}</p>
+									{config && !isAutoMode && mode !== "create" && (
+										<p className="text-xs font-mono text-muted-foreground/70">{config.model_name}</p>
+									)}
 								</div>
+								<Button
+									variant="ghost"
+									size="icon"
+									onClick={() => onOpenChange(false)}
+									className="absolute right-4 top-4 h-8 w-8 rounded-full text-muted-foreground hover:text-foreground"
+								>
+									<X className="h-4 w-4" />
+									<span className="sr-only">Close</span>
+								</Button>
 							</div>
-							<Button
-								variant="ghost"
-								size="icon"
-								onClick={() => onOpenChange(false)}
-								className="h-8 w-8 rounded-full"
-							>
-								<X className="h-4 w-4" />
-								<span className="sr-only">Close</span>
-							</Button>
-						</div>
 
-						{/* Content - use overflow-y-auto instead of ScrollArea for better compatibility */}
-						<div className="flex-1 overflow-y-auto">
-							<div className="p-6">
-								{/* Auto mode info banner */}
+							{/* Scrollable content */}
+							<div
+								ref={scrollRef}
+								onScroll={handleScroll}
+								className="flex-1 overflow-y-auto px-6 py-5"
+								style={{
+									maskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
+									WebkitMaskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
+								}}
+							>
 								{isAutoMode && (
-									<Alert className="mb-6 border-violet-500/30 bg-violet-500/5">
-										<Shuffle className="size-4 text-violet-500" />
+									<Alert className="mb-5 border-violet-500/30 bg-violet-500/5">
 										<AlertDescription className="text-sm text-violet-700 dark:text-violet-400">
 											Auto mode automatically distributes requests across all available LLM
 											providers to optimize performance and avoid rate limits.
@@ -263,9 +257,8 @@ export function ModelConfigSidebar({
 									</Alert>
 								)}
 
-								{/* Global config notice */}
 								{isGlobal && !isAutoMode && mode !== "create" && (
-									<Alert className="mb-6 border-amber-500/30 bg-amber-500/5">
+									<Alert className="mb-5 border-amber-500/30 bg-amber-500/5">
 										<AlertCircle className="size-4 text-amber-500" />
 										<AlertDescription className="text-sm text-amber-700 dark:text-amber-400">
 											Global configurations are read-only. To customize settings, create a new
@@ -274,20 +267,17 @@ export function ModelConfigSidebar({
 									</Alert>
 								)}
 
-								{/* Form */}
 								{mode === "create" ? (
 									<LLMConfigForm
 										searchSpaceId={searchSpaceId}
 										onSubmit={handleSubmit}
-										onCancel={() => onOpenChange(false)}
 										isSubmitting={isSubmitting}
 										mode="create"
-										submitLabel="Create & Use"
+										formId="model-config-form"
+										hideActions
 									/>
 								) : isAutoMode && config ? (
-									// Special view for Auto mode
 									<div className="space-y-6">
-										{/* Auto Mode Features */}
 										<div className="space-y-4">
 											<div className="space-y-1.5">
 												<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
@@ -340,35 +330,9 @@ export function ModelConfigSidebar({
 											</div>
 										</div>
 
-										{/* Action Buttons */}
-										<div className="flex gap-3 pt-4 border-t border-border/50">
-											<Button
-												variant="outline"
-												className="flex-1"
-												onClick={() => onOpenChange(false)}
-											>
-												Close
-											</Button>
-											<Button
-												className="flex-1 gap-2 bg-gradient-to-r from-violet-500 to-purple-600 hover:from-violet-600 hover:to-purple-700"
-												onClick={handleUseGlobalConfig}
-												disabled={isSubmitting}
-											>
-												{isSubmitting ? (
-													<>Loading...</>
-												) : (
-													<>
-														<ChevronRight className="size-4" />
-														Use Auto Mode
-													</>
-												)}
-											</Button>
-										</div>
 									</div>
 								) : isGlobal && config ? (
-									// Read-only view for global configs
 									<div className="space-y-6">
-										{/* Config Details */}
 										<div className="space-y-4">
 											<div className="grid gap-4 sm:grid-cols-2">
 												<div className="space-y-1.5">
@@ -437,33 +401,8 @@ export function ModelConfigSidebar({
 											)}
 										</div>
 
-										{/* Action Buttons */}
-										<div className="flex gap-3 pt-4 border-t border-border/50">
-											<Button
-												variant="outline"
-												className="flex-1"
-												onClick={() => onOpenChange(false)}
-											>
-												Close
-											</Button>
-											<Button
-												className="flex-1 gap-2"
-												onClick={handleUseGlobalConfig}
-												disabled={isSubmitting}
-											>
-												{isSubmitting ? (
-													<>Loading...</>
-												) : (
-													<>
-														<ChevronRight className="size-4" />
-														Use This Model
-													</>
-												)}
-											</Button>
-										</div>
 									</div>
 								) : config ? (
-									// Edit form for user configs
 									<LLMConfigForm
 										searchSpaceId={searchSpaceId}
 										initialData={{
@@ -481,13 +420,59 @@ export function ModelConfigSidebar({
 											search_space_id: searchSpaceId,
 										}}
 										onSubmit={handleSubmit}
-										onCancel={() => onOpenChange(false)}
 										isSubmitting={isSubmitting}
 										mode="edit"
-										submitLabel="Save Changes"
+										formId="model-config-form"
+										hideActions
 									/>
 								) : null}
 							</div>
+
+							{/* Fixed footer */}
+							<div className="shrink-0 px-6 py-4 flex items-center justify-end gap-3">
+								<Button
+									type="button"
+									variant="outline"
+									onClick={() => onOpenChange(false)}
+									disabled={isSubmitting}
+									className="text-sm h-9"
+								>
+									Cancel
+								</Button>
+								{(mode === "create" || (!isGlobal && !isAutoMode && config)) ? (
+									<Button
+										type="submit"
+										form="model-config-form"
+										disabled={isSubmitting}
+										className="text-sm h-9 min-w-[120px]"
+									>
+										{isSubmitting ? (
+											<>
+												<Spinner size="sm" />
+												{mode === "edit" ? "Saving..." : "Creating..."}
+											</>
+										) : (
+											mode === "edit" ? "Save Changes" : "Create & Use"
+										)}
+									</Button>
+								) : isAutoMode ? (
+									<Button
+										className="text-sm h-9 gap-2 bg-gradient-to-r from-violet-500 to-purple-600 hover:from-violet-600 hover:to-purple-700"
+										onClick={handleUseGlobalConfig}
+										disabled={isSubmitting}
+									>
+										{isSubmitting ? "Loading..." : "Use Auto Mode"}
+									</Button>
+								) : isGlobal && config ? (
+									<Button
+										className="text-sm h-9 gap-2"
+										onClick={handleUseGlobalConfig}
+										disabled={isSubmitting}
+									>
+										{isSubmitting ? "Loading..." : "Use This Model"}
+									</Button>
+								) : null}
+							</div>
 						</div>
 					</motion.div>
 				</>
@@ -495,5 +480,5 @@ export function ModelConfigSidebar({
 		</AnimatePresence>
 	);
 
-	return typeof document !== "undefined" ? createPortal(sidebarContent, document.body) : null;
+	return typeof document !== "undefined" ? createPortal(dialogContent, document.body) : null;
 }
diff --git a/surfsense_web/components/shared/llm-config-form.tsx b/surfsense_web/components/shared/llm-config-form.tsx
index 648457919..0d3e67755 100644
--- a/surfsense_web/components/shared/llm-config-form.tsx
+++ b/surfsense_web/components/shared/llm-config-form.tsx
@@ -2,16 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useAtomValue } from "jotai";
-import {
-	Bot,
-	Check,
-	ChevronDown,
-	ChevronsUpDown,
-	Key,
-	MessageSquareQuote,
-	Rocket,
-	Sparkles,
-} from "lucide-react";
+import { Check, ChevronDown, ChevronsUpDown } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -88,6 +79,8 @@ interface LLMConfigFormProps {
 	submitLabel?: string;
 	showAdvanced?: boolean;
 	compact?: boolean;
+	formId?: string;
+	hideActions?: boolean;
 }
 
 export function LLMConfigForm({
@@ -100,6 +93,8 @@ export function LLMConfigForm({
 	submitLabel,
 	showAdvanced = true,
 	compact = false,
+	formId,
+	hideActions = false,
 }: LLMConfigFormProps) {
 	const { data: defaultInstructions, isSuccess: defaultInstructionsLoaded } = useAtomValue(
 		defaultSystemInstructionsAtom
@@ -164,11 +159,10 @@ export function LLMConfigForm({
 
 	return (
 		<Form {...form}>
-			<form onSubmit={form.handleSubmit(handleFormSubmit)} className="space-y-6">
+			<form id={formId} onSubmit={form.handleSubmit(handleFormSubmit)} className="space-y-6">
 				{/* Model Configuration Section */}
 				<div className="space-y-4">
-					<div className="flex items-center gap-2 text-xs sm:text-sm font-medium text-muted-foreground">
-						<Bot className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
+					<div className="text-xs sm:text-sm font-medium text-muted-foreground">
 						Model Configuration
 					</div>
 
@@ -179,14 +173,12 @@ export function LLMConfigForm({
 							name="name"
 							render={({ field }) => (
 								<FormItem>
-									<FormLabel className="flex items-center gap-2 text-xs sm:text-sm">
-										<Sparkles className="h-3.5 w-3.5 text-violet-500" />
+									<FormLabel className="text-xs sm:text-sm">
 										Configuration Name
 									</FormLabel>
 									<FormControl>
 										<Input
 											placeholder="e.g., My GPT-4 Agent"
-											className="transition-all focus-visible:ring-violet-500/50"
 											{...field}
 										/>
 									</FormControl>
@@ -224,19 +216,18 @@ export function LLMConfigForm({
 								<FormLabel className="text-xs sm:text-sm">LLM Provider</FormLabel>
 								<Select value={field.value} onValueChange={handleProviderChange}>
 									<FormControl>
-										<SelectTrigger className="transition-all focus:ring-violet-500/50">
+										<SelectTrigger>
 											<SelectValue placeholder="Select a provider" />
 										</SelectTrigger>
 									</FormControl>
-									<SelectContent className="max-h-[300px]">
+									<SelectContent className="max-h-[300px] bg-muted dark:border-neutral-700">
 										{LLM_PROVIDERS.map((provider) => (
-											<SelectItem key={provider.value} value={provider.value}>
-												<div className="flex flex-col py-0.5">
-													<span className="font-medium">{provider.label}</span>
-													<span className="text-xs text-muted-foreground">
-														{provider.description}
-													</span>
-												</div>
+											<SelectItem
+												key={provider.value}
+												value={provider.value}
+												description={provider.description}
+											>
+												{provider.label}
 											</SelectItem>
 										))}
 									</SelectContent>
@@ -289,18 +280,18 @@ export function LLMConfigForm({
 												variant="outline"
 												role="combobox"
 												aria-expanded={modelComboboxOpen}
-												className={cn(
-													"w-full justify-between font-normal",
-													!field.value && "text-muted-foreground"
-												)}
+											className={cn(
+												"w-full justify-between font-normal bg-transparent",
+												!field.value && "text-muted-foreground"
+											)}
 											>
 												{field.value || "Select or type model name"}
 												<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 											</Button>
 										</FormControl>
 									</PopoverTrigger>
-									<PopoverContent className="w-full p-0" align="start">
-										<Command shouldFilter={false}>
+									<PopoverContent className="w-full p-0 bg-muted dark:border-neutral-700" align="start">
+										<Command shouldFilter={false} className="bg-transparent">
 											<CommandInput
 												placeholder={selectedProvider?.example || "Type model name..."}
 												value={field.value}
@@ -371,8 +362,7 @@ export function LLMConfigForm({
 							name="api_key"
 							render={({ field }) => (
 								<FormItem>
-									<FormLabel className="flex items-center gap-2 text-xs sm:text-sm">
-										<Key className="h-3.5 w-3.5 text-amber-500" />
+									<FormLabel className="text-xs sm:text-sm">
 										API Key
 									</FormLabel>
 									<FormControl>
@@ -460,10 +450,7 @@ export function LLMConfigForm({
 									type="button"
 									className="flex w-full items-center justify-between py-2 text-xs sm:text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
 								>
-									<div className="flex items-center gap-2">
-										<Sparkles className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
-										Advanced Parameters
-									</div>
+									<span>Advanced Parameters</span>
 									<ChevronDown
 										className={cn(
 											"h-4 w-4 transition-transform duration-200",
@@ -501,10 +488,7 @@ export function LLMConfigForm({
 							type="button"
 							className="flex w-full items-center justify-between py-2 text-xs sm:text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
 						>
-							<div className="flex items-center gap-2">
-								<MessageSquareQuote className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
-								System Instructions
-							</div>
+								<span>System Instructions</span>
 							<ChevronDown
 								className={cn(
 									"h-4 w-4 transition-transform duration-200",
@@ -575,42 +559,42 @@ export function LLMConfigForm({
 					</CollapsibleContent>
 				</Collapsible>
 
-				{/* Action Buttons */}
-				<div
-					className={cn(
-						"flex gap-3 pt-4",
-						compact ? "justify-end" : "justify-center sm:justify-end"
-					)}
-				>
-					{onCancel && (
-						<Button
-							type="button"
-							variant="outline"
-							onClick={onCancel}
-							disabled={isSubmitting}
-							className="text-xs sm:text-sm h-9 sm:h-10"
-						>
-							Cancel
-						</Button>
-					)}
-					<Button
-						type="submit"
-						disabled={isSubmitting}
-						className="gap-2 min-w-[140px] sm:min-w-[160px] text-xs sm:text-sm h-9 sm:h-10"
-					>
-						{isSubmitting ? (
-							<>
-								<Spinner size="sm" />
-								{mode === "edit" ? "Updating..." : "Creating"}
-							</>
-						) : (
-							<>
-								{!compact && <Rocket className="h-3.5 w-3.5 sm:h-4 sm:w-4" />}
-								{submitLabel ?? (mode === "edit" ? "Update Configuration" : "Create Configuration")}
-							</>
+				{!hideActions && (
+					<div
+						className={cn(
+							"flex gap-3 pt-4",
+							compact ? "justify-end" : "justify-center sm:justify-end"
 						)}
-					</Button>
-				</div>
+					>
+						{onCancel && (
+							<Button
+								type="button"
+								variant="outline"
+								onClick={onCancel}
+								disabled={isSubmitting}
+								className="text-xs sm:text-sm h-9 sm:h-10"
+							>
+								Cancel
+							</Button>
+						)}
+						<Button
+							type="submit"
+							disabled={isSubmitting}
+							className="gap-2 min-w-[140px] sm:min-w-[160px] text-xs sm:text-sm h-9 sm:h-10"
+						>
+							{isSubmitting ? (
+								<>
+									<Spinner size="sm" />
+									{mode === "edit" ? "Updating..." : "Creating"}
+								</>
+							) : (
+								<>
+									{submitLabel ?? (mode === "edit" ? "Update Configuration" : "Create Configuration")}
+								</>
+							)}
+						</Button>
+					</div>
+				)}
 			</form>
 		</Form>
 	);
diff --git a/surfsense_web/components/ui/select.tsx b/surfsense_web/components/ui/select.tsx
index c214f1c59..0fd12dfc5 100644
--- a/surfsense_web/components/ui/select.tsx
+++ b/surfsense_web/components/ui/select.tsx
@@ -88,8 +88,11 @@ function SelectLabel({ className, ...props }: React.ComponentProps<typeof Select
 function SelectItem({
 	className,
 	children,
+	description,
 	...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+}: React.ComponentProps<typeof SelectPrimitive.Item> & {
+	description?: string;
+}) {
 	return (
 		<SelectPrimitive.Item
 			data-slot="select-item"
@@ -99,7 +102,14 @@ function SelectItem({
 			)}
 			{...props}
 		>
-			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+			{description ? (
+				<div className="flex flex-col py-0.5">
+					<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+					<span className="text-xs text-muted-foreground">{description}</span>
+				</div>
+			) : (
+				<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+			)}
 		</SelectPrimitive.Item>
 	);
 }