diff --git a/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx
index 48efcd922..d53a6b26c 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx
@@ -87,14 +87,14 @@ function SettingsSidebar({
 			<aside
 				className={cn(
 					"fixed md:relative left-0 top-0 z-50 md:z-auto",
-					"w-72 shrink-0 border-r border-border bg-background md:bg-muted/20 h-full flex flex-col",
+					"w-72 shrink-0 bg-background md:bg-muted/20 h-full flex flex-col",
 					"transition-transform duration-300 ease-out",
 					"md:translate-x-0",
 					isOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
 				)}
 			>
 				{/* Header with back button */}
-				<div className="p-4 border-b border-border flex items-center justify-between">
+				<div className="p-4 flex items-center justify-between">
 					<Button
 						variant="ghost"
 						onClick={onBackToApp}
@@ -176,7 +176,7 @@ function SettingsSidebar({
 				</nav>
 
 				{/* Footer */}
-				<div className="p-4 border-t border-border">
+				<div className="p-4">
 					<p className="text-xs text-muted-foreground text-center">SurfSense Settings</p>
 				</div>
 			</aside>
@@ -229,12 +229,12 @@ function SettingsContent({
 									initial={{ scale: 0.8, opacity: 0 }}
 									animate={{ scale: 1, opacity: 1 }}
 									transition={{ delay: 0.1, duration: 0.3 }}
-									className="flex items-center justify-center w-12 h-12 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-gradient-to-br from-primary/20 to-primary/5 border border-primary/10 shadow-sm shrink-0"
+									className="flex items-center justify-center w-10 h-10 md:w-14 md:h-14 rounded-lg md:rounded-2xl bg-gradient-to-br from-primary/20 to-primary/5 border border-primary/10 shadow-sm shrink-0"
 								>
-									<Icon className="h-6 w-6 md:h-7 md:w-7 text-primary" />
+									<Icon className="h-5 w-5 md:h-7 md:w-7 text-primary" />
 								</motion.div>
 								<div className="min-w-0">
-									<h1 className="text-xl md:text-2xl font-bold tracking-tight truncate">
+									<h1 className="text-lg md:text-2xl font-bold tracking-tight truncate">
 										{activeItem?.label}
 									</h1>
 								</div>
diff --git a/surfsense_web/components/settings/llm-role-manager.tsx b/surfsense_web/components/settings/llm-role-manager.tsx
index 2b440e58b..1bf7a3629 100644
--- a/surfsense_web/components/settings/llm-role-manager.tsx
+++ b/surfsense_web/components/settings/llm-role-manager.tsx
@@ -170,7 +170,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 	const hasError = configsError || preferencesError || globalConfigsError;
 
 	return (
-		<div className="space-y-6">
+		<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">
@@ -179,9 +179,11 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 						size="sm"
 						onClick={() => refreshConfigs()}
 						disabled={isLoading}
-						className="flex items-center gap-2"
+						className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
 					>
-						<RefreshCw className={`h-4 w-4 ${configsLoading ? "animate-spin" : ""}`} />
+						<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>
@@ -190,9 +192,11 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 						size="sm"
 						onClick={() => refreshPreferences()}
 						disabled={isLoading}
-						className="flex items-center gap-2"
+						className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
 					>
-						<RefreshCw className={`h-4 w-4 ${preferencesLoading ? "animate-spin" : ""}`} />
+						<RefreshCw
+							className={`h-3 w-3 md:h-4 md:w-4 ${preferencesLoading ? "animate-spin" : ""}`}
+						/>
 						<span className="hidden sm:inline">Refresh Preferences</span>
 						<span className="sm:hidden">Prefs</span>
 					</Button>
@@ -201,9 +205,9 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 
 			{/* Error Alert */}
 			{hasError && (
-				<Alert variant="destructive">
-					<AlertCircle className="h-4 w-4" />
-					<AlertDescription>
+				<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")}
@@ -214,10 +218,10 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 			{/* Loading State */}
 			{isLoading && (
 				<Card>
-					<CardContent className="flex items-center justify-center py-12">
+					<CardContent className="flex items-center justify-center py-8 md:py-12">
 						<div className="flex items-center gap-2 text-muted-foreground">
-							<Loader2 className="w-5 h-5 animate-spin" />
-							<span>
+							<Loader2 className="w-4 h-4 md:w-5 md:h-5 animate-spin" />
+							<span className="text-xs md:text-sm">
 								{configsLoading && preferencesLoading
 									? "Loading configurations and preferences..."
 									: configsLoading
@@ -231,27 +235,27 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 
 			{/* Info Alert */}
 			{!isLoading && !hasError && (
-				<div className="space-y-6">
+				<div className="space-y-4 md:space-y-6">
 					{availableConfigs.length === 0 ? (
-						<Alert variant="destructive">
-							<AlertCircle className="h-4 w-4" />
-							<AlertDescription>
+						<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>
-							<AlertCircle className="h-4 w-4" />
-							<AlertDescription>
+						<Alert 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">
 								Complete all role assignments to enable full functionality. Each role serves
 								different purposes in your workflow.
 							</AlertDescription>
 						</Alert>
 					) : (
-						<Alert>
-							<CheckCircle className="h-4 w-4" />
-							<AlertDescription>
+						<Alert className="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>
@@ -259,7 +263,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 
 					{/* Role Assignment Cards */}
 					{availableConfigs.length > 0 && (
-						<div className="grid gap-6">
+						<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];
@@ -277,28 +281,34 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 										<Card
 											className={`border-l-4 ${currentAssignment ? "border-l-primary" : "border-l-muted"} hover:shadow-md transition-shadow`}
 										>
-											<CardHeader className="pb-3">
+											<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-3">
-														<div className={`p-2 rounded-lg ${role.color}`}>
-															<IconComponent className="w-5 h-5" />
+													<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-lg">{role.title}</CardTitle>
-															<CardDescription className="mt-1">{role.description}</CardDescription>
+															<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>
 														</div>
 													</div>
-													{currentAssignment && <CheckCircle className="w-5 h-5 text-green-500" />}
+													{currentAssignment && (
+														<CheckCircle className="w-4 h-4 md:w-5 md:h-5 text-green-500 shrink-0" />
+													)}
 												</div>
 											</CardHeader>
-											<CardContent className="space-y-4">
-												<div className="space-y-2">
-													<Label className="text-sm font-medium">Assign LLM Configuration:</Label>
+											<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>
+														<SelectTrigger className="h-9 md:h-10 text-xs md:text-sm">
 															<SelectValue placeholder="Select an LLM configuration" />
 														</SelectTrigger>
 														<SelectContent>
@@ -361,23 +371,25 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 												</div>
 
 												{assignedConfig && (
-													<div className="mt-3 p-3 bg-muted/50 rounded-lg">
-														<div className="flex items-center gap-2 text-sm flex-wrap">
-															<Bot className="w-4 h-4" />
+													<div className="mt-2 md:mt-3 p-2 md:p-3 bg-muted/50 rounded-lg">
+														<div className="flex items-center gap-1.5 md:gap-2 text-xs md:text-sm flex-wrap">
+															<Bot className="w-3 h-3 md:w-4 md:h-4 shrink-0" />
 															<span className="font-medium">Assigned:</span>
-															<Badge variant="secondary">{assignedConfig.provider}</Badge>
+															<Badge variant="secondary" className="text-[10px] md:text-xs">
+																{assignedConfig.provider}
+															</Badge>
 															<span>{assignedConfig.name}</span>
 															{"is_global" in assignedConfig && assignedConfig.is_global && (
-																<Badge variant="outline" className="text-xs">
+																<Badge variant="outline" className="text-[9px] md:text-xs">
 																	🌐 Global
 																</Badge>
 															)}
 														</div>
-														<div className="text-xs text-muted-foreground mt-1">
+														<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-xs text-muted-foreground">
+															<div className="text-[10px] md:text-xs text-muted-foreground">
 																Base: {assignedConfig.api_base}
 															</div>
 														)}
@@ -393,18 +405,22 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 
 					{/* Action Buttons */}
 					{hasChanges && (
-						<div className="flex justify-center gap-3 pt-4">
-							<Button onClick={handleSave} disabled={isSaving} className="flex items-center gap-2">
-								<Save className="w-4 h-4" />
+						<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>
 							<Button
 								variant="outline"
 								onClick={handleReset}
 								disabled={isSaving}
-								className="flex items-center gap-2"
+								className="flex items-center gap-2 text-xs md:text-sm h-9 md:h-10"
 							>
-								<RotateCcw className="w-4 h-4" />
+								<RotateCcw className="w-3.5 h-3.5 md:w-4 md:h-4" />
 								Reset
 							</Button>
 						</div>
diff --git a/surfsense_web/components/settings/model-config-manager.tsx b/surfsense_web/components/settings/model-config-manager.tsx
index 27b36d7a0..fb79d448f 100644
--- a/surfsense_web/components/settings/model-config-manager.tsx
+++ b/surfsense_web/components/settings/model-config-manager.tsx
@@ -160,7 +160,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 		LLM_PROVIDERS.find((p) => p.value === providerValue);
 
 	return (
-		<div className="space-y-6">
+		<div className="space-y-4 md:space-y-6">
 			{/* Header */}
 			<div className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
 				<div className="flex items-center space-x-2">
@@ -169,9 +169,9 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 						size="sm"
 						onClick={() => refreshConfigs()}
 						disabled={isLoading}
-						className="flex items-center gap-2"
+						className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
 					>
-						<RefreshCw className={cn("h-4 w-4", isLoading && "animate-spin")} />
+						<RefreshCw className={cn("h-3 w-3 md:h-4 md:w-4", isLoading && "animate-spin")} />
 						Refresh
 					</Button>
 				</div>
@@ -187,9 +187,11 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 							animate={{ opacity: 1, y: 0 }}
 							exit={{ opacity: 0, y: -10 }}
 						>
-							<Alert variant="destructive">
-								<AlertCircle className="h-4 w-4" />
-								<AlertDescription>{err?.message ?? "Something went wrong"}</AlertDescription>
+							<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">
+									{err?.message ?? "Something went wrong"}
+								</AlertDescription>
 							</Alert>
 						</motion.div>
 					))}
@@ -198,9 +200,9 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 			{/* Global Configs Info */}
 			{globalConfigs.length > 0 && (
 				<motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}>
-					<Alert className="border-blue-500/30 bg-blue-500/5">
-						<Sparkles className="h-4 w-4 text-blue-600 dark:text-blue-400" />
-						<AlertDescription className="text-blue-800 dark:text-blue-200">
+					<Alert className="border-blue-500/30 bg-blue-500/5 py-3 md:py-4">
+						<Sparkles className="h-3 w-3 md:h-4 md:w-4 text-blue-600 dark:text-blue-400 shrink-0" />
+						<AlertDescription className="text-blue-800 dark:text-blue-200 text-xs md:text-sm">
 							<span className="font-medium">{globalConfigs.length} global configuration(s)</span>{" "}
 							available from your administrator. These are pre-configured and ready to use.{" "}
 							<span className="text-blue-600 dark:text-blue-300">
@@ -214,10 +216,12 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 			{/* Loading State */}
 			{isLoading && (
 				<Card>
-					<CardContent className="flex items-center justify-center py-16">
-						<div className="flex flex-col items-center gap-3">
-							<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-							<span className="text-sm text-muted-foreground">Loading configurations...</span>
+					<CardContent className="flex items-center justify-center py-10 md:py-16">
+						<div className="flex flex-col items-center gap-2 md:gap-3">
+							<Loader2 className="h-6 w-6 md:h-8 md:w-8 animate-spin text-muted-foreground" />
+							<span className="text-xs md:text-sm text-muted-foreground">
+								Loading configurations...
+							</span>
 						</div>
 					</CardContent>
 				</Card>
@@ -225,11 +229,14 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 
 			{/* Configurations List */}
 			{!isLoading && (
-				<div className="space-y-6">
+				<div className="space-y-4 md:space-y-6">
 					<div className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
-						<h3 className="text-xl font-semibold tracking-tight">Your Configurations</h3>
-						<Button onClick={openNewDialog} className="flex items-center gap-2">
-							<Plus className="h-4 w-4" />
+						<h3 className="text-lg md:text-xl font-semibold tracking-tight">Your Configurations</h3>
+						<Button
+							onClick={openNewDialog}
+							className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
+						>
+							<Plus className="h-3 w-3 md:h-4 md:w-4" />
 							Add Configuration
 						</Button>
 					</div>
@@ -237,18 +244,22 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 					{configs?.length === 0 ? (
 						<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
 							<Card className="border-dashed border-2 border-muted-foreground/25">
-								<CardContent className="flex flex-col items-center justify-center py-16 text-center">
-									<div className="rounded-full bg-gradient-to-br from-violet-500/10 to-purple-500/10 p-6 mb-6">
-										<Wand2 className="h-12 w-12 text-violet-600 dark:text-violet-400" />
+								<CardContent className="flex flex-col items-center justify-center py-10 md:py-16 text-center">
+									<div className="rounded-full bg-gradient-to-br from-violet-500/10 to-purple-500/10 p-4 md:p-6 mb-4 md:mb-6">
+										<Wand2 className="h-8 w-8 md:h-12 md:w-12 text-violet-600 dark:text-violet-400" />
 									</div>
-									<div className="space-y-2 mb-6">
-										<h3 className="text-xl font-semibold">No Configurations Yet</h3>
-										<p className="text-muted-foreground max-w-sm">
+									<div className="space-y-2 mb-4 md:mb-6">
+										<h3 className="text-lg md:text-xl font-semibold">No Configurations Yet</h3>
+										<p className="text-xs md:text-sm text-muted-foreground max-w-sm">
 											Create your first AI configuration to customize how your agent responds
 										</p>
 									</div>
-									<Button onClick={openNewDialog} size="lg" className="gap-2">
-										<Plus className="h-4 w-4" />
+									<Button
+										onClick={openNewDialog}
+										size="lg"
+										className="gap-2 text-xs md:text-sm h-9 md:h-10"
+									>
+										<Plus className="h-3 w-3 md:h-4 md:w-4" />
 										Create First Configuration
 									</Button>
 								</CardContent>
@@ -270,25 +281,25 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 												<CardContent className="p-0">
 													<div className="flex">
 														{/* Left accent bar */}
-														<div className="w-1.5 transition-colors bg-gradient-to-b from-violet-500/50 to-purple-500/50 group-hover:from-violet-500 group-hover:to-purple-500" />
+														<div className="w-1 md:w-1.5 transition-colors bg-gradient-to-b from-violet-500/50 to-purple-500/50 group-hover:from-violet-500 group-hover:to-purple-500" />
 
-														<div className="flex-1 p-5">
-															<div className="flex items-start justify-between gap-4">
+														<div className="flex-1 p-3 md:p-5">
+															<div className="flex items-start justify-between gap-2 md:gap-4">
 																{/* Main content */}
-																<div className="flex items-start gap-4 flex-1 min-w-0">
-																	<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500/10 to-purple-500/10 group-hover:from-violet-500/20 group-hover:to-purple-500/20 transition-colors">
-																		<Bot className="h-6 w-6 text-violet-600 dark:text-violet-400" />
+																<div className="flex items-start gap-2 md:gap-4 flex-1 min-w-0">
+																	<div className="flex h-10 w-10 md:h-12 md:w-12 items-center justify-center rounded-lg md:rounded-xl bg-gradient-to-br from-violet-500/10 to-purple-500/10 group-hover:from-violet-500/20 group-hover:to-purple-500/20 transition-colors shrink-0">
+																		<Bot className="h-5 w-5 md:h-6 md:w-6 text-violet-600 dark:text-violet-400" />
 																	</div>
-																	<div className="flex-1 min-w-0 space-y-3">
+																	<div className="flex-1 min-w-0 space-y-2 md:space-y-3">
 																		{/* Title row */}
-																		<div className="flex items-center gap-2 flex-wrap">
-																			<h4 className="text-base font-semibold tracking-tight truncate">
+																		<div className="flex items-center gap-1.5 md:gap-2 flex-wrap">
+																			<h4 className="text-sm md:text-base font-semibold tracking-tight truncate">
 																				{config.name}
 																			</h4>
-																			<div className="flex items-center gap-1.5 flex-wrap">
+																			<div className="flex items-center gap-1 md:gap-1.5 flex-wrap">
 																				<Badge
 																					variant="secondary"
-																					className="text-[10px] font-medium px-2 py-0.5 bg-violet-500/10 text-violet-700 dark:text-violet-300 border-violet-500/20"
+																					className="text-[9px] md:text-[10px] font-medium px-1.5 md:px-2 py-0.5 bg-violet-500/10 text-violet-700 dark:text-violet-300 border-violet-500/20"
 																				>
 																					{config.provider}
 																				</Badge>
@@ -298,9 +309,9 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 																							<TooltipTrigger>
 																								<Badge
 																									variant="outline"
-																									className="text-[10px] px-2 py-0.5 border-emerald-500/30 text-emerald-700 dark:text-emerald-300"
+																									className="text-[9px] md:text-[10px] px-1.5 md:px-2 py-0.5 border-emerald-500/30 text-emerald-700 dark:text-emerald-300"
 																								>
-																									<MessageSquareQuote className="h-3 w-3 mr-1" />
+																									<MessageSquareQuote className="h-2.5 w-2.5 md:h-3 md:w-3 mr-0.5 md:mr-1" />
 																									Citations
 																								</Badge>
 																							</TooltipTrigger>
@@ -317,9 +328,9 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 																								<TooltipTrigger>
 																									<Badge
 																										variant="outline"
-																										className="text-[10px] px-2 py-0.5 border-blue-500/30 text-blue-700 dark:text-blue-300"
+																										className="text-[9px] md:text-[10px] px-1.5 md:px-2 py-0.5 border-blue-500/30 text-blue-700 dark:text-blue-300"
 																									>
-																										<FileText className="h-3 w-3 mr-1" />
+																										<FileText className="h-2.5 w-2.5 md:h-3 md:w-3 mr-0.5 md:mr-1" />
 																										Custom
 																									</Badge>
 																								</TooltipTrigger>
@@ -333,21 +344,21 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 																		</div>
 
 																		{/* Model name */}
-																		<code className="text-xs font-mono text-muted-foreground bg-muted/50 px-2 py-1 rounded-md inline-block">
+																		<code className="text-[10px] md:text-xs font-mono text-muted-foreground bg-muted/50 px-1.5 md:px-2 py-0.5 md:py-1 rounded-md inline-block">
 																			{config.model_name}
 																		</code>
 
 																		{/* Description if any */}
 																		{config.description && (
-																			<p className="text-xs text-muted-foreground line-clamp-1">
+																			<p className="text-[10px] md:text-xs text-muted-foreground line-clamp-1">
 																				{config.description}
 																			</p>
 																		)}
 
 																		{/* Footer row */}
-																		<div className="flex items-center gap-4 pt-1">
-																			<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-																				<Clock className="h-3 w-3" />
+																		<div className="flex items-center gap-2 md:gap-4 pt-1">
+																			<div className="flex items-center gap-1 md:gap-1.5 text-[10px] md:text-xs text-muted-foreground">
+																				<Clock className="h-2.5 w-2.5 md:h-3 md:w-3" />
 																				<span>
 																					{new Date(config.created_at).toLocaleDateString()}
 																				</span>
@@ -357,7 +368,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 																</div>
 
 																{/* Actions */}
-																<div className="flex items-center gap-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+																<div className="flex items-center gap-0.5 md:gap-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
 																	<TooltipProvider>
 																		<Tooltip>
 																			<TooltipTrigger asChild>
@@ -365,9 +376,9 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 																					variant="ghost"
 																					size="sm"
 																					onClick={() => openEditDialog(config)}
-																					className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+																					className="h-7 w-7 md:h-8 md:w-8 p-0 text-muted-foreground hover:text-foreground"
 																				>
-																					<Edit3 className="h-4 w-4" />
+																					<Edit3 className="h-3.5 w-3.5 md:h-4 md:w-4" />
 																				</Button>
 																			</TooltipTrigger>
 																			<TooltipContent>Edit</TooltipContent>
@@ -380,9 +391,9 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 																					variant="ghost"
 																					size="sm"
 																					onClick={() => setConfigToDelete(config)}
-																					className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive"
+																					className="h-7 w-7 md:h-8 md:w-8 p-0 text-muted-foreground hover:text-destructive"
 																				>
-																					<Trash2 className="h-4 w-4" />
+																					<Trash2 className="h-3.5 w-3.5 md:h-4 md:w-4" />
 																				</Button>
 																			</TooltipTrigger>
 																			<TooltipContent>Delete</TooltipContent>
diff --git a/surfsense_web/components/settings/prompt-config-manager.tsx b/surfsense_web/components/settings/prompt-config-manager.tsx
index effb8cae3..7c5a8978b 100644
--- a/surfsense_web/components/settings/prompt-config-manager.tsx
+++ b/surfsense_web/components/settings/prompt-config-manager.tsx
@@ -92,15 +92,15 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
 
 	if (loading) {
 		return (
-			<div className="space-y-6">
+			<div className="space-y-4 md:space-y-6">
 				<Card>
-					<CardHeader>
-						<Skeleton className="h-6 w-48" />
-						<Skeleton className="h-4 w-full max-w-md" />
+					<CardHeader className="px-3 md:px-6 pt-3 md:pt-6 pb-2 md:pb-3">
+						<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-4">
-						<Skeleton className="h-20 w-full" />
-						<Skeleton className="h-32 w-full" />
+					<CardContent className="space-y-3 md:space-y-4 px-3 md:px-6 pb-3 md:pb-6">
+						<Skeleton className="h-16 md:h-20 w-full" />
+						<Skeleton className="h-24 md:h-32 w-full" />
 					</CardContent>
 				</Card>
 			</div>
@@ -108,23 +108,23 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
 	}
 
 	return (
-		<div className="space-y-6">
+		<div className="space-y-4 md:space-y-6">
 			{/* Work in Progress Notice */}
 			<Alert
 				variant="default"
-				className="bg-amber-50 dark:bg-amber-950/30 border-amber-300 dark:border-amber-700"
+				className="bg-amber-50 dark:bg-amber-950/30 border-amber-300 dark:border-amber-700 py-3 md:py-4"
 			>
-				<AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-500" />
-				<AlertDescription className="text-amber-800 dark:text-amber-300">
+				<AlertTriangle className="h-3 w-3 md:h-4 md:w-4 text-amber-600 dark:text-amber-500 shrink-0" />
+				<AlertDescription className="text-amber-800 dark:text-amber-300 text-xs md:text-sm">
 					<span className="font-semibold">Work in Progress:</span> This functionality is currently
 					under development and not yet connected to the backend. Your instructions will be saved
 					but won't affect AI behavior until the feature is fully implemented.
 				</AlertDescription>
 			</Alert>
 
-			<Alert>
-				<Info className="h-4 w-4" />
-				<AlertDescription>
+			<Alert className="py-3 md:py-4">
+				<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
+				<AlertDescription className="text-xs md:text-sm">
 					System instructions apply to all AI interactions in this search space. They guide how the
 					AI responds, its tone, focus areas, and behavior patterns.
 				</AlertDescription>
@@ -132,16 +132,19 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
 
 			{/* System Instructions Card */}
 			<Card>
-				<CardHeader>
-					<CardTitle>Custom System Instructions</CardTitle>
-					<CardDescription>
+				<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">
 						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-4">
-					<div className="space-y-2">
-						<Label htmlFor="custom-instructions-settings" className="text-base font-medium">
+				<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
+							htmlFor="custom-instructions-settings"
+							className="text-sm md:text-base font-medium"
+						>
 							Your Instructions
 						</Label>
 						<Textarea
@@ -149,11 +152,11 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
 							placeholder="E.g., Always provide practical examples, be concise, focus on technical details, use simple language, respond in a specific format..."
 							value={customInstructions}
 							onChange={(e) => setCustomInstructions(e.target.value)}
-							rows={12}
-							className="resize-none font-mono text-sm"
+							rows={10}
+							className="resize-none font-mono text-xs md:text-sm"
 						/>
 						<div className="flex items-center justify-between">
-							<p className="text-xs text-muted-foreground">
+							<p className="text-[10px] md:text-xs text-muted-foreground">
 								{customInstructions.length} characters
 							</p>
 							{customInstructions.length > 0 && (
@@ -161,7 +164,7 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
 									variant="ghost"
 									size="sm"
 									onClick={() => setCustomInstructions("")}
-									className="h-auto py-1 px-2 text-xs"
+									className="h-auto py-0.5 md:py-1 px-1.5 md:px-2 text-[10px] md:text-xs"
 								>
 									Clear
 								</Button>
@@ -170,9 +173,9 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
 					</div>
 
 					{customInstructions.trim().length === 0 && (
-						<Alert>
-							<Info className="h-4 w-4" />
-							<AlertDescription>
+						<Alert className="py-2 md:py-3">
+							<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
+							<AlertDescription className="text-xs md:text-sm">
 								No system instructions are currently set. The AI will use default behavior.
 							</AlertDescription>
 						</Alert>
@@ -181,22 +184,22 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
 			</Card>
 
 			{/* Action Buttons */}
-			<div className="flex items-center justify-between pt-4">
+			<div className="flex items-center justify-between pt-3 md:pt-4 gap-2">
 				<Button
 					variant="outline"
 					onClick={handleReset}
 					disabled={!hasChanges || saving}
-					className="flex items-center gap-2"
+					className="flex items-center gap-2 text-xs md:text-sm h-9 md:h-10"
 				>
-					<RotateCcw className="h-4 w-4" />
+					<RotateCcw className="h-3.5 w-3.5 md:h-4 md:w-4" />
 					Reset Changes
 				</Button>
 				<Button
 					onClick={handleSave}
 					disabled={!hasChanges || saving}
-					className="flex items-center gap-2"
+					className="flex items-center gap-2 text-xs md:text-sm h-9 md:h-10"
 				>
-					<Save className="h-4 w-4" />
+					<Save className="h-3.5 w-3.5 md:h-4 md:w-4" />
 					{saving ? "Saving..." : "Save Instructions"}
 				</Button>
 			</div>
@@ -204,10 +207,10 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
 			{hasChanges && (
 				<Alert
 					variant="default"
-					className="bg-blue-50 dark:bg-blue-950/20 border-blue-200 dark:border-blue-800"
+					className="bg-blue-50 dark:bg-blue-950/20 border-blue-200 dark:border-blue-800 py-3 md:py-4"
 				>
-					<Info className="h-4 w-4 text-blue-600 dark:text-blue-500" />
-					<AlertDescription className="text-blue-800 dark:text-blue-300">
+					<Info className="h-3 w-3 md:h-4 md:w-4 text-blue-600 dark:text-blue-500 shrink-0" />
+					<AlertDescription className="text-blue-800 dark:text-blue-300 text-xs md:text-sm">
 						You have unsaved changes. Click "Save Instructions" to apply them.
 					</AlertDescription>
 				</Alert>