From ba067258dea2229a9956077b3b0d7b1c68b56f66 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 15 Jul 2026 17:50:26 -0400
Subject: [PATCH] refac

---
 src/lib/components/AddConnectionModal.svelte  |  62 +--
 .../components/AddTerminalServerModal.svelte  | 109 ++--
 src/lib/components/AddToolServerModal.svelte  |  96 ++--
 .../Connections/ManageOllamaModal.svelte      |   2 +-
 .../Evaluations/ArenaModelModal.svelte        |   2 +-
 .../components/admin/Settings/Events.svelte   |  29 +-
 .../admin/Settings/ExternalKnowledge.svelte   |   2 +-
 .../components/admin/Settings/Models.svelte   |   1 +
 .../Settings/Models/ManageModelsModal.svelte  |   2 +-
 .../Settings/Models/ModelSettingsModal.svelte |   2 +-
 src/lib/components/chat/Settings/About.svelte | 144 +++--
 .../components/chat/Settings/Account.svelte   | 354 ++++++-------
 .../Settings/Account/UpdatePassword.svelte    |  33 +-
 .../Settings/Account/UserProfileImage.svelte  |  18 +-
 .../Settings/Advanced/AdvancedParams.svelte   |   4 +-
 .../chat/Settings/ArchivedChats.svelte        |  33 +-
 src/lib/components/chat/Settings/Audio.svelte | 362 ++++++-------
 .../chat/Settings/Connections.svelte          | 120 ++---
 .../Settings/Connections/Connection.svelte    |  15 +-
 .../chat/Settings/DataControls.svelte         | 186 +++----
 .../components/chat/Settings/General.svelte   | 183 +++----
 .../chat/Settings/Integrations.svelte         | 164 +++---
 .../Settings/Integrations/Terminals.svelte    |  44 +-
 .../Integrations/Terminals/Connection.svelte  |  30 +-
 .../components/chat/Settings/Interface.svelte | 501 ++++++++++++------
 .../ManageFloatingActionButtonsModal.svelte   |  11 +-
 .../ManageImageCompressionModal.svelte        |  18 +-
 .../chat/Settings/Personalization.svelte      | 281 +++++-----
 .../Personalization/MemoryModal.svelte        |  26 +-
 .../components/chat/Settings/Shortcuts.svelte |  12 +-
 .../chat/Settings/SyncStatsModal.svelte       |  11 +-
 .../chat/Settings/Tools/Connection.svelte     |   8 +-
 .../chat/Settings/UserSettingField.svelte     |  24 +
 .../chat/Settings/UserSettingRow.svelte       |  22 +
 .../chat/Settings/UserSettingSection.svelte   |  17 +
 src/lib/components/chat/SettingsModal.svelte  |  36 +-
 .../components/common/SensitiveInput.svelte   |   5 +-
 src/lib/components/layout/SearchModal.svelte  |   8 +-
 .../components/notes/NoteEditor/Chat.svelte   |   5 +-
 39 files changed, 1540 insertions(+), 1442 deletions(-)
 create mode 100644 src/lib/components/chat/Settings/UserSettingField.svelte
 create mode 100644 src/lib/components/chat/Settings/UserSettingRow.svelte
 create mode 100644 src/lib/components/chat/Settings/UserSettingSection.svelte

diff --git a/src/lib/components/AddConnectionModal.svelte b/src/lib/components/AddConnectionModal.svelte
index f1300a0ba5..51171a2df2 100644
--- a/src/lib/components/AddConnectionModal.svelte
+++ b/src/lib/components/AddConnectionModal.svelte
@@ -3,7 +3,6 @@
 	import { getContext, onMount } from 'svelte';
 	const i18n = getContext('i18n');
 
-	import { settings } from '$lib/stores';
 	import { verifyOpenAIConnection } from '$lib/apis/openai';
 	import { verifyOllamaConnection } from '$lib/apis/ollama';
 
@@ -59,9 +58,9 @@
 	let loading = false;
 	let showDeleteConfirmDialog = false;
 
-	const highContrastInputClass =
+	const inputClass =
 		'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
-	const highContrastSelectClass =
+	const selectClass =
 		'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500';
 
 	const verifyOllamaHandler = async () => {
@@ -311,14 +310,13 @@
 								<label
 									for="url-input"
 									class={`mb-0.5 text-xs text-gray-500
-								${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
-									>{$i18n.t('URL')}</label
+								`}>{$i18n.t('URL')}</label
 								>
 
 								<div class="flex-1">
 									<input
 										id="url-input"
-										class={`w-full text-sm ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+										class={`w-full text-sm ${inputClass}`}
 										type="text"
 										bind:value={url}
 										placeholder={$i18n.t('API Base URL')}
@@ -378,9 +376,7 @@
 
 						<div class="flex gap-2 mt-2">
 							<div class="flex flex-col w-full">
-								<label
-									for="select-bearer-or-session"
-									class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+								<label for="select-bearer-or-session" class={`text-xs text-gray-500`}
 									>{$i18n.t('Auth')}</label
 								>
 
@@ -388,7 +384,7 @@
 									<div class="flex-shrink-0 self-start">
 										<select
 											id="select-bearer-or-session"
-											class={`w-full text-sm pr-5 ${($settings?.highContrastMode ?? false) ? highContrastSelectClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700 dark:bg-gray-900'}`}
+											class={`w-full text-sm pr-5 ${selectClass}`}
 											bind:value={auth_type}
 										>
 											<option value="none">{$i18n.t('None')}</option>
@@ -412,27 +408,19 @@
 												required={false}
 											/>
 										{:else if auth_type === 'none'}
-											<div
-												class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-											>
+											<div class={`text-xs self-center translate-y-[1px] text-gray-500`}>
 												{$i18n.t('No authentication')}
 											</div>
 										{:else if auth_type === 'session'}
-											<div
-												class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-											>
+											<div class={`text-xs self-center translate-y-[1px] text-gray-500`}>
 												{$i18n.t('Forwards system user session credentials to authenticate')}
 											</div>
 										{:else if auth_type === 'system_oauth'}
-											<div
-												class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-											>
+											<div class={`text-xs self-center translate-y-[1px] text-gray-500`}>
 												{$i18n.t('Forwards system user OAuth access token to authenticate')}
 											</div>
 										{:else if ['azure_ad', 'microsoft_entra_id'].includes(auth_type)}
-											<div
-												class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-											>
+											<div class={`text-xs self-center translate-y-[1px] text-gray-500`}>
 												{$i18n.t('Uses DefaultAzureCredential to authenticate')}
 											</div>
 										{/if}
@@ -447,8 +435,7 @@
 									<label
 										for="headers-input"
 										class={`mb-0.5 text-xs text-gray-500
-								${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
-										>{$i18n.t('Headers')}</label
+								`}>{$i18n.t('Headers')}</label
 									>
 
 									<div class="flex-1">
@@ -475,8 +462,7 @@
 								<label
 									for="prefix-id-input"
 									class={`mb-0.5 text-xs text-gray-500
-								${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
-									>{$i18n.t('Prefix ID')}</label
+								`}>{$i18n.t('Prefix ID')}</label
 								>
 
 								<div class="flex-1">
@@ -486,7 +472,7 @@
 										)}
 									>
 										<input
-											class={`w-full text-sm ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+											class={`w-full text-sm ${inputClass}`}
 											type="text"
 											id="prefix-id-input"
 											bind:value={prefixId}
@@ -503,8 +489,7 @@
 								<label
 									for="provider-select"
 									class={`mb-0.5 text-xs text-gray-500
-								${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
-									>{$i18n.t('Provider')}</label
+								`}>{$i18n.t('Provider')}</label
 								>
 
 								<div>
@@ -527,14 +512,13 @@
 									<label
 										for="api-version-input"
 										class={`mb-0.5 text-xs text-gray-500
-										${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
-										>{$i18n.t('API Version')}</label
+										`}>{$i18n.t('API Version')}</label
 									>
 
 									<div class="flex-1">
 										<input
 											id="api-version-input"
-											class={`w-full text-sm ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+											class={`w-full text-sm ${inputClass}`}
 											type="text"
 											bind:value={apiVersion}
 											placeholder={$i18n.t('API Version')}
@@ -551,8 +535,7 @@
 								<label
 									for="api-type-toggle"
 									class={`mb-0.5 text-xs text-gray-500
-							${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
-									>{$i18n.t('API Type')}</label
+							`}>{$i18n.t('API Type')}</label
 								>
 
 								<div>
@@ -571,7 +554,8 @@
 													'This feature is currently experimental and may not work as expected.'
 												)}
 											>
-												<span class=" text-gray-400 dark:text-gray-600"
+												<span
+													class="inline-flex items-center text-[0.625rem] font-normal uppercase leading-none text-gray-400 dark:text-gray-600"
 													>{$i18n.t('Experimental')}</span
 												>
 
@@ -589,7 +573,7 @@
 							<div class="mb-1 flex justify-between">
 								<div
 									class={`mb-0.5 text-xs text-gray-500
-								${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
+								`}
 								>
 									{$i18n.t('Model IDs')}
 								</div>
@@ -621,7 +605,7 @@
 							{:else}
 								<div
 									class={`text-gray-500 text-xs text-center py-2 px-10
-								${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
+								`}
 								>
 									{#if ollama}
 										{$i18n.t('Leave empty to include all models from "{{url}}/api/tags" endpoint', {
@@ -644,7 +628,7 @@
 						<div class="flex items-center">
 							<label class="sr-only" for="add-model-id-input">{$i18n.t('Add a model ID')}</label>
 							<input
-								class={`w-full text-sm ${($settings?.highContrastMode ?? false) ? highContrastInputClass : `rounded-lg bg-transparent py-1 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden ${modelId ? '' : 'text-gray-500'}`}`}
+								class={`w-full text-sm ${inputClass} ${modelId ? '' : 'text-gray-500'}`}
 								bind:value={modelId}
 								id="add-model-id-input"
 								placeholder={$i18n.t('Add a model ID')}
@@ -668,7 +652,7 @@
 						<div class="flex flex-col w-full">
 							<div
 								class={`mb-0.5 text-xs text-gray-500
-								${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
+								`}
 							>
 								{$i18n.t('Tags')}
 							</div>
diff --git a/src/lib/components/AddTerminalServerModal.svelte b/src/lib/components/AddTerminalServerModal.svelte
index 1e34517a32..f6aef1bd75 100644
--- a/src/lib/components/AddTerminalServerModal.svelte
+++ b/src/lib/components/AddTerminalServerModal.svelte
@@ -3,8 +3,6 @@
 	import { getContext, onMount } from 'svelte';
 	const i18n = getContext<any>('i18n');
 
-	import { settings } from '$lib/stores';
-
 	import Modal from '$lib/components/common/Modal.svelte';
 	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
@@ -61,9 +59,9 @@
 	let loadingPolicy = false;
 	let policyLoadError = '';
 
-	const highContrastInputClass =
+	const inputClass =
 		'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
-	const highContrastSelectClass =
+	const selectClass =
 		'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500';
 
 	const stringifyJson = (value: object | null | undefined) => {
@@ -399,9 +397,7 @@
 						<div class="flex gap-2">
 							<div class="flex flex-col flex-1">
 								<div class="flex justify-between mb-0.5">
-									<label
-										for="terminal-name"
-										class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+									<label for="terminal-name" class={`text-xs text-gray-500`}
 										>{$i18n.t('Name')}</label
 									>
 								</div>
@@ -409,7 +405,7 @@
 								<div class="flex flex-1 items-center">
 									<input
 										id="terminal-name"
-										class={`w-full flex-1 text-sm ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+										class={`w-full flex-1 text-sm ${inputClass}`}
 										type="text"
 										bind:value={name}
 										placeholder={$i18n.t('My Terminal')}
@@ -420,9 +416,7 @@
 							{#if !direct}
 								<div class="flex flex-col flex-1">
 									<div class="flex justify-between mb-0.5">
-										<label
-											for="terminal-id"
-											class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+										<label for="terminal-id" class={`text-xs text-gray-500`}
 											>{$i18n.t('ID')}
 											<span class="opacity-50">({$i18n.t('optional')})</span></label
 										>
@@ -430,7 +424,7 @@
 									<div class="flex flex-1 items-center">
 										<input
 											id="terminal-id"
-											class={`w-full flex-1 text-sm font-mono ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+											class={`w-full flex-1 text-sm font-mono ${inputClass}`}
 											type="text"
 											bind:value={id}
 											placeholder="auto"
@@ -444,17 +438,13 @@
 						<div class="flex gap-2 mt-2">
 							<div class="flex flex-col w-full">
 								<div class="flex justify-between mb-0.5">
-									<label
-										for="terminal-url"
-										class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-										>{$i18n.t('URL')}</label
-									>
+									<label for="terminal-url" class={`text-xs text-gray-500`}>{$i18n.t('URL')}</label>
 								</div>
 
 								<div class="flex flex-1 items-center">
 									<input
 										id="terminal-url"
-										class={`w-full flex-1 text-sm ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+										class={`w-full flex-1 text-sm ${inputClass}`}
 										type="text"
 										bind:value={url}
 										placeholder="http://localhost:9900"
@@ -519,16 +509,14 @@
 							<div class="flex gap-2 mt-2">
 								<div class="flex flex-col w-full">
 									<div class="flex justify-between mb-0.5">
-										<div
-											class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-										>
+										<div class={`text-xs text-gray-500`}>
 											{$i18n.t('Policy ID')}
 										</div>
 									</div>
 									<div class="flex flex-1 items-center">
 										<input
 											id="policy-id"
-											class={`w-full flex-1 text-sm font-mono ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+											class={`w-full flex-1 text-sm font-mono ${inputClass}`}
 											type="text"
 											bind:value={policyId}
 											placeholder="python-ds"
@@ -549,9 +537,7 @@
 							<div class="flex gap-2 mt-2">
 								<div class="flex flex-col w-full">
 									<div class="flex justify-between mb-0.5">
-										<div
-											class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-										>
+										<div class={`text-xs text-gray-500`}>
 											{$i18n.t('Image')}
 											<span class="opacity-50">({$i18n.t('optional')})</span>
 										</div>
@@ -559,7 +545,7 @@
 									<div class="flex flex-1 items-center">
 										<input
 											id="policy-image"
-											class={`w-full flex-1 text-sm font-mono ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+											class={`w-full flex-1 text-sm font-mono ${inputClass}`}
 											type="text"
 											bind:value={policyImage}
 											placeholder="ghcr.io/open-webui/open-terminal:latest"
@@ -572,16 +558,14 @@
 							<div class="flex gap-2 mt-2">
 								<div class="flex flex-col flex-1">
 									<div class="flex justify-between mb-0.5">
-										<div
-											class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-										>
+										<div class={`text-xs text-gray-500`}>
 											{$i18n.t('CPU')}
 										</div>
 									</div>
 									<div class="flex flex-1 items-center">
 										<input
 											id="policy-cpu"
-											class={`w-full flex-1 text-sm font-mono ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+											class={`w-full flex-1 text-sm font-mono ${inputClass}`}
 											type="text"
 											bind:value={policyCpu}
 											placeholder="1"
@@ -591,16 +575,14 @@
 								</div>
 								<div class="flex flex-col flex-1">
 									<div class="flex justify-between mb-0.5">
-										<div
-											class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-										>
+										<div class={`text-xs text-gray-500`}>
 											{$i18n.t('Memory')}
 										</div>
 									</div>
 									<div class="flex flex-1 items-center">
 										<input
 											id="policy-memory"
-											class={`w-full flex-1 text-sm font-mono ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+											class={`w-full flex-1 text-sm font-mono ${inputClass}`}
 											type="text"
 											bind:value={policyMemory}
 											placeholder="1Gi"
@@ -613,16 +595,14 @@
 							<div class="flex gap-2 mt-2">
 								<div class="flex flex-col flex-1">
 									<div class="flex justify-between mb-0.5">
-										<div
-											class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-										>
+										<div class={`text-xs text-gray-500`}>
 											{$i18n.t('Storage')}
 										</div>
 									</div>
 									<div class="flex gap-2">
 										<div class="flex-shrink-0 self-start">
 											<select
-												class={`w-full text-sm pr-5 ${($settings?.highContrastMode ?? false) ? highContrastSelectClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700 dark:bg-gray-900'}`}
+												class={`w-full text-sm pr-5 ${selectClass}`}
 												bind:value={policyStorage}
 											>
 												<option value="ephemeral">{$i18n.t('Ephemeral')}</option>
@@ -633,7 +613,7 @@
 											<div class="flex flex-1 items-center">
 												<input
 													id="policy-storage-size"
-													class={`w-full flex-1 text-sm font-mono ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+													class={`w-full flex-1 text-sm font-mono ${inputClass}`}
 													type="text"
 													bind:value={policyStorageSize}
 													placeholder="5Gi"
@@ -646,9 +626,7 @@
 
 								<div class="flex flex-col flex-1">
 									<div class="flex justify-between mb-0.5">
-										<div
-											class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-										>
+										<div class={`text-xs text-gray-500`}>
 											{$i18n.t('Idle Timeout')}
 											<span class="opacity-50">({$i18n.t('min')})</span>
 										</div>
@@ -656,7 +634,7 @@
 									<div class="flex flex-1 items-center">
 										<input
 											id="idle-timeout"
-											class={`w-full flex-1 text-sm font-mono ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+											class={`w-full flex-1 text-sm font-mono ${inputClass}`}
 											type="number"
 											min="0"
 											bind:value={policyIdleTimeout}
@@ -671,9 +649,7 @@
 							<div class="flex gap-2 mt-2">
 								<div class="flex flex-col w-full">
 									<div class="flex justify-between items-center mb-0.5">
-										<div
-											class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-										>
+										<div class={`text-xs text-gray-500`}>
 											{$i18n.t('Environment Variables')}
 										</div>
 										<button
@@ -688,13 +664,13 @@
 									{#each policyEnvPairs as pair, idx}
 										<div class="flex gap-1.5 mb-1">
 											<input
-												class={`flex-1 text-sm font-mono ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+												class={`flex-1 text-sm font-mono ${inputClass}`}
 												type="text"
 												bind:value={pair.key}
 												placeholder="KEY"
 											/>
 											<input
-												class={`flex-[2] text-sm font-mono ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+												class={`flex-[2] text-sm font-mono ${inputClass}`}
 												type="text"
 												bind:value={pair.value}
 												placeholder="value"
@@ -715,15 +691,13 @@
 							<div class="flex gap-2 mt-2">
 								<div class="flex flex-col w-full">
 									<div class="flex justify-between mb-0.5">
-										<div
-											class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-										>
+										<div class={`text-xs text-gray-500`}>
 											{$i18n.t('Lifecycle JSON')}
 										</div>
 									</div>
 									<textarea
 										id="lifecycle-json"
-										class={`w-full min-h-24 resize-y text-xs font-mono ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'rounded-lg border border-gray-200 bg-transparent p-2 outline-hidden placeholder:text-gray-300 dark:border-gray-800 dark:placeholder:text-gray-700'}`}
+										class={`w-full min-h-24 resize-y text-xs font-mono ${inputClass}`}
 										bind:value={lifecycleJson}
 										spellcheck="false"
 										placeholder={`{\n  "reset": {\n    "schedule": "@weekly",\n    "timezone": "UTC"\n  }\n}`}
@@ -794,9 +768,7 @@
 								<div class="flex flex-col w-full">
 									<div class="flex justify-between items-center mb-0.5">
 										<div class="flex gap-2 items-center">
-											<div
-												class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-											>
+											<div class={`text-xs text-gray-500`}>
 												{$i18n.t('OpenAPI Spec')}
 											</div>
 										</div>
@@ -809,7 +781,7 @@
 													>{$i18n.t('openapi.json URL or Path')}</label
 												>
 												<input
-													class={`w-full text-sm ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+													class={`w-full text-sm ${inputClass}`}
 													type="text"
 													id="openapi-path"
 													bind:value={path}
@@ -821,9 +793,7 @@
 										</div>
 									</div>
 
-									<div
-										class={`text-xs mt-1 ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-									>
+									<div class={`text-xs mt-1 text-gray-500`}>
 										{$i18n.t(`WebUI will make requests to "{{url}}"`, {
 											url: path.includes('://')
 												? path
@@ -838,9 +808,7 @@
 							<div class="flex flex-col w-full">
 								<div class="flex justify-between items-center">
 									<div class="flex gap-2 items-center">
-										<div
-											class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-										>
+										<div class={`text-xs text-gray-500`}>
 											{$i18n.t('Auth')}
 										</div>
 									</div>
@@ -848,10 +816,7 @@
 
 								<div class="flex gap-2">
 									<div class="flex-shrink-0 self-start">
-										<select
-											class={`w-full text-sm pr-5 ${($settings?.highContrastMode ?? false) ? highContrastSelectClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700 dark:bg-gray-900'}`}
-											bind:value={auth_type}
-										>
+										<select class={`w-full text-sm pr-5 ${selectClass}`} bind:value={auth_type}>
 											<option value="none">{$i18n.t('None')}</option>
 											<option value="bearer">{$i18n.t('Bearer')}</option>
 											{#if !direct}
@@ -869,21 +834,15 @@
 												required={false}
 											/>
 										{:else if auth_type === 'none'}
-											<div
-												class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-											>
+											<div class={`text-xs self-center translate-y-[1px] text-gray-500`}>
 												{$i18n.t('No authentication')}
 											</div>
 										{:else if auth_type === 'session'}
-											<div
-												class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-											>
+											<div class={`text-xs self-center translate-y-[1px] text-gray-500`}>
 												{$i18n.t('Forwards system user session credentials to authenticate')}
 											</div>
 										{:else if auth_type === 'system_oauth'}
-											<div
-												class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-											>
+											<div class={`text-xs self-center translate-y-[1px] text-gray-500`}>
 												{$i18n.t('Forwards system user OAuth access token to authenticate')}
 											</div>
 										{/if}
diff --git a/src/lib/components/AddToolServerModal.svelte b/src/lib/components/AddToolServerModal.svelte
index 7889ffb6e6..b5d9ff14ba 100644
--- a/src/lib/components/AddToolServerModal.svelte
+++ b/src/lib/components/AddToolServerModal.svelte
@@ -8,7 +8,6 @@
 	import { getContext, onMount } from 'svelte';
 	const i18n = getContext('i18n');
 
-	import { settings } from '$lib/stores';
 	import Modal from '$lib/components/common/Modal.svelte';
 	import Plus from '$lib/components/icons/Plus.svelte';
 	import Minus from '$lib/components/icons/Minus.svelte';
@@ -70,9 +69,9 @@
 	let showAccessControlModal = false;
 	let showDeleteConfirmDialog = false;
 
-	const highContrastInputClass =
+	const inputClass =
 		'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
-	const highContrastSelectClass =
+	const selectClass =
 		'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500';
 
 	const registerOAuthClientHandler = async () => {
@@ -538,17 +537,13 @@
 						<div class="flex gap-2">
 							<div class="flex flex-col flex-1">
 								<div class="flex justify-between mb-0.5">
-									<label
-										for="enter-name"
-										class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-										>{$i18n.t('Name')}</label
-									>
+									<label for="enter-name" class={`text-xs text-gray-500`}>{$i18n.t('Name')}</label>
 								</div>
 
 								<div class="flex flex-1 items-center">
 									<input
 										id="enter-name"
-										class={`w-full flex-1 text-sm ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+										class={`w-full flex-1 text-sm ${inputClass}`}
 										type="text"
 										bind:value={name}
 										placeholder={$i18n.t('Enter name')}
@@ -559,9 +554,7 @@
 							{#if !direct}
 								<div class="flex flex-col flex-1">
 									<div class="flex justify-between mb-0.5">
-										<label
-											for="enter-id"
-											class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+										<label for="enter-id" class={`text-xs text-gray-500`}
 											>{$i18n.t('ID')}
 											{#if type !== 'mcp'}<span class="opacity-50">({$i18n.t('optional')})</span
 												>{/if}</label
@@ -570,7 +563,7 @@
 									<div class="flex flex-1 items-center">
 										<input
 											id="enter-id"
-											class={`w-full flex-1 text-sm font-mono ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+											class={`w-full flex-1 text-sm font-mono ${inputClass}`}
 											type="text"
 											bind:value={id}
 											placeholder="auto"
@@ -583,16 +576,14 @@
 						</div>
 
 						<div class="flex flex-col w-full mt-1 mb-1.5">
-							<label
-								for="description"
-								class={`mb-0.5 text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+							<label for="description" class={`mb-0.5 text-xs text-gray-500`}
 								>{$i18n.t('Description')}</label
 							>
 
 							<div class="flex-1">
 								<input
 									id="description"
-									class={`w-full text-sm ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+									class={`w-full text-sm ${inputClass}`}
 									type="text"
 									bind:value={description}
 									placeholder={$i18n.t('Enter description')}
@@ -604,17 +595,13 @@
 						<div class="flex gap-2">
 							<div class="flex flex-col w-full">
 								<div class="flex justify-between mb-0.5">
-									<label
-										for="api-base-url"
-										class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-										>{$i18n.t('URL')}</label
-									>
+									<label for="api-base-url" class={`text-xs text-gray-500`}>{$i18n.t('URL')}</label>
 								</div>
 
 								<div class="flex flex-1 items-center">
 									<input
 										id="api-base-url"
-										class={`w-full flex-1 text-sm ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+										class={`w-full flex-1 text-sm ${inputClass}`}
 										type="text"
 										bind:value={url}
 										placeholder={$i18n.t('API Base URL')}
@@ -661,10 +648,7 @@
 							<div class="flex flex-col w-full">
 								<div class="flex justify-between items-center">
 									<div class="flex gap-2 items-center">
-										<div
-											for="select-bearer-or-session"
-											class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-										>
+										<div for="select-bearer-or-session" class={`text-xs text-gray-500`}>
 											{$i18n.t('Auth')}
 										</div>
 									</div>
@@ -710,7 +694,7 @@
 									<div class="flex-shrink-0 self-start">
 										<select
 											id="select-bearer-or-session"
-											class={`w-full text-sm pr-5 ${($settings?.highContrastMode ?? false) ? highContrastSelectClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700 dark:bg-gray-900'}`}
+											class={`w-full text-sm pr-5 ${selectClass}`}
 											bind:value={auth_type}
 										>
 											<option value="none">{$i18n.t('None')}</option>
@@ -736,26 +720,20 @@
 												required={false}
 											/>
 										{:else if auth_type === 'none'}
-											<div
-												class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-											>
+											<div class={`text-xs self-center translate-y-[1px] text-gray-500`}>
 												{$i18n.t('No authentication')}
 											</div>
 										{:else if auth_type === 'session'}
-											<div
-												class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-											>
+											<div class={`text-xs self-center translate-y-[1px] text-gray-500`}>
 												{$i18n.t('Forwards system user session credentials to authenticate')}
 											</div>
 										{:else if auth_type === 'system_oauth'}
-											<div
-												class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-											>
+											<div class={`text-xs self-center translate-y-[1px] text-gray-500`}>
 												{$i18n.t('Forwards system user OAuth access token to authenticate')}
 											</div>
 										{:else if auth_type === 'oauth_2.1'}
 											<div
-												class={`flex items-center text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+												class={`flex items-center text-xs self-center translate-y-[1px] text-gray-500`}
 											>
 												{$i18n.t('Uses OAuth 2.1 Dynamic Client Registration')}
 											</div>
@@ -773,7 +751,7 @@
 												/>
 												<div class="flex flex-1 items-center">
 													<input
-														class={`w-full text-sm ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+														class={`w-full text-sm ${inputClass}`}
 														type="text"
 														bind:value={oauthServerUrl}
 														placeholder={$i18n.t('OAuth Server URL')}
@@ -824,10 +802,7 @@
 									<div class="flex flex-col w-full">
 										<div class="flex justify-between items-center mb-0.5">
 											<div class="flex gap-2 items-center">
-												<div
-													for="select-bearer-or-session"
-													class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-												>
+												<div for="select-bearer-or-session" class={`text-xs text-gray-500`}>
 													{$i18n.t('OpenAPI Spec')}
 												</div>
 											</div>
@@ -837,7 +812,7 @@
 											<div class="flex-shrink-0 self-start">
 												<select
 													id="select-bearer-or-session"
-													class={`w-full text-sm pr-5 ${($settings?.highContrastMode ?? false) ? highContrastSelectClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700 dark:bg-gray-900'}`}
+													class={`w-full text-sm pr-5 ${selectClass}`}
 													bind:value={spec_type}
 												>
 													<option value="url">{$i18n.t('URL')}</option>
@@ -852,7 +827,7 @@
 															>{$i18n.t('openapi.json URL or Path')}</label
 														>
 														<input
-															class={`w-full text-sm ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+															class={`w-full text-sm ${inputClass}`}
 															type="text"
 															id="url-or-path"
 															bind:value={path}
@@ -862,12 +837,10 @@
 														/>
 													</div>
 												{:else if spec_type === 'json'}
-													<div
-														class={`text-xs w-full self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-													>
+													<div class={`text-xs w-full self-center translate-y-[1px] text-gray-500`}>
 														<label for="url-or-path" class="sr-only">{$i18n.t('JSON Spec')}</label>
 														<textarea
-															class={`w-full text-sm ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700 text-black dark:text-white'}`}
+															class={`w-full text-sm ${inputClass}`}
 															bind:value={spec}
 															placeholder={$i18n.t('JSON Spec')}
 															autocomplete="off"
@@ -880,9 +853,7 @@
 										</div>
 
 										{#if ['', 'url'].includes(spec_type)}
-											<div
-												class={`text-xs mt-1 ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-											>
+											<div class={`text-xs mt-1 text-gray-500`}>
 												{$i18n.t(`WebUI will make requests to "{{url}}"`, {
 													url: path.includes('://')
 														? path
@@ -897,16 +868,14 @@
 							{#if type === 'mcp' && ['oauth_2.1', 'oauth_2.1_static'].includes(auth_type)}
 								<div class="flex gap-2 mt-2">
 									<div class="flex flex-col w-full">
-										<label
-											for="oauth-scope"
-											class={`mb-0.5 text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+										<label for="oauth-scope" class={`mb-0.5 text-xs text-gray-500`}
 											>{$i18n.t('OAuth Scopes')}</label
 										>
 
 										<div class="flex flex-1 items-center">
 											<input
 												id="oauth-scope"
-												class={`w-full text-sm ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+												class={`w-full text-sm ${inputClass}`}
 												type="text"
 												bind:value={oauthScope}
 												placeholder={$i18n.t('Use discovered scopes')}
@@ -918,16 +887,14 @@
 
 								<div class="flex gap-2 mt-2">
 									<div class="flex flex-col w-full">
-										<label
-											for="oauth-resource-parameter"
-											class={`mb-0.5 text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+										<label for="oauth-resource-parameter" class={`mb-0.5 text-xs text-gray-500`}
 											>{$i18n.t('OAuth Resource Parameter')}</label
 										>
 
 										<div class="flex flex-1 items-center">
 											<select
 												id="oauth-resource-parameter"
-												class={`w-full text-sm pr-5 ${($settings?.highContrastMode ?? false) ? highContrastSelectClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700 dark:bg-gray-900'}`}
+												class={`w-full text-sm pr-5 ${selectClass}`}
 												bind:value={oauthResourceParameter}
 											>
 												<option value="auto">{$i18n.t('Automatic')}</option>
@@ -945,8 +912,7 @@
 										<label
 											for="headers-input"
 											class={`mb-0.5 text-xs text-gray-500
-									${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
-											>{$i18n.t('Headers')}</label
+									`}>{$i18n.t('Headers')}</label
 										>
 
 										<div class="flex-1">
@@ -973,16 +939,14 @@
 							<hr class=" border-gray-100/50 dark:border-gray-700/10 my-2.5 w-full" />
 
 							<div class="flex flex-col w-full mt-2">
-								<label
-									for="function-name-filter-list"
-									class={`mb-1 text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+								<label for="function-name-filter-list" class={`mb-1 text-xs text-gray-500`}
 									>{$i18n.t('Function Name Filter List')}</label
 								>
 
 								<div class="flex-1">
 									<input
 										id="function-name-filter-list"
-										class={`w-full text-sm ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+										class={`w-full text-sm ${inputClass}`}
 										type="text"
 										bind:value={functionNameFilterList}
 										placeholder={$i18n.t('Enter function name filter list (e.g. func1, !func2)')}
diff --git a/src/lib/components/admin/Settings/Connections/ManageOllamaModal.svelte b/src/lib/components/admin/Settings/Connections/ManageOllamaModal.svelte
index 8fb7c8803b..60558dd5a6 100644
--- a/src/lib/components/admin/Settings/Connections/ManageOllamaModal.svelte
+++ b/src/lib/components/admin/Settings/Connections/ManageOllamaModal.svelte
@@ -11,7 +11,7 @@
 	export let urlIdx: number | null = null;
 </script>
 
-<Modal size="sm" bind:show>
+<Modal size="sm" bind:show className="bg-white dark:bg-gray-900 rounded-4xl">
 	<div>
 		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
 			<div class="flex w-full justify-between items-center text-sm font-medium self-center">
diff --git a/src/lib/components/admin/Settings/Evaluations/ArenaModelModal.svelte b/src/lib/components/admin/Settings/Evaluations/ArenaModelModal.svelte
index 19895aebbd..cf82e2ddc6 100644
--- a/src/lib/components/admin/Settings/Evaluations/ArenaModelModal.svelte
+++ b/src/lib/components/admin/Settings/Evaluations/ArenaModelModal.svelte
@@ -128,7 +128,7 @@
 	}}
 />
 
-<Modal size="sm" bind:show>
+<Modal size="sm" bind:show className="bg-white dark:bg-gray-900 rounded-4xl">
 	<div>
 		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
 			<div class=" text-sm font-medium self-center">
diff --git a/src/lib/components/admin/Settings/Events.svelte b/src/lib/components/admin/Settings/Events.svelte
index 3225634796..f75eb643f4 100644
--- a/src/lib/components/admin/Settings/Events.svelte
+++ b/src/lib/components/admin/Settings/Events.svelte
@@ -51,7 +51,7 @@
 		events: ['*'] as string[]
 	};
 
-	const highContrastInputClass =
+	const inputClass =
 		'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
 
 	$: events = eventItems.map((item) => item.event);
@@ -392,7 +392,7 @@
 	});
 </script>
 
-<Modal bind:show={showWebhookModal} size="sm">
+<Modal bind:show={showWebhookModal} size="sm" className="bg-white dark:bg-gray-900 rounded-4xl">
 	<div>
 		<div class="flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
 			<h1 class="text-sm font-medium self-center">
@@ -413,14 +413,12 @@
 			<form class="flex flex-col w-full" on:submit|preventDefault={saveWebhook}>
 				<div class="flex gap-3">
 					<div class="flex flex-col w-full">
-						<label
-							for="event-webhook-name"
-							class={`text-xs mb-0.5 ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+						<label for="event-webhook-name" class={`text-xs mb-0.5 text-gray-500`}
 							>{$i18n.t('Name')}</label
 						>
 						<input
 							id="event-webhook-name"
-							class={`w-full text-xs ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+							class={`w-full text-xs ${inputClass}`}
 							type="text"
 							placeholder={$i18n.t('Identity audit')}
 							autocomplete="off"
@@ -431,15 +429,13 @@
 
 				<div class="flex gap-3 mt-2">
 					<div class="flex flex-col w-full">
-						<label
-							for="event-webhook-url"
-							class={`text-xs mb-0.5 ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+						<label for="event-webhook-url" class={`text-xs mb-0.5 text-gray-500`}
 							>{$i18n.t('URL')}</label
 						>
 						<div class="flex items-center gap-2">
 							<input
 								id="event-webhook-url"
-								class={`w-full text-xs ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+								class={`w-full text-xs ${inputClass}`}
 								type="url"
 								placeholder="https://example.com/events"
 								autocomplete="off"
@@ -455,9 +451,7 @@
 
 				<div class="mt-3">
 					<div class="flex justify-between items-center gap-3">
-						<div
-							class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-						>
+						<div class={`text-xs text-gray-500`}>
 							{$i18n.t('Send events for')}
 						</div>
 						<select
@@ -524,7 +518,8 @@
 
 							<div class="relative">
 								<input
-									class={`w-full text-xs ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+									data-settings-search
+									class={`w-full text-xs ${inputClass}`}
 									type="text"
 									placeholder={$i18n.t('Search users or groups')}
 									autocomplete="off"
@@ -571,9 +566,7 @@
 
 				<div class="mt-3">
 					<div class="flex justify-between items-center">
-						<label
-							for="event-webhook-all-events"
-							class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+						<label for="event-webhook-all-events" class={`text-xs text-gray-500`}
 							>{$i18n.t('Events')}</label
 						>
 						<label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300">
@@ -610,7 +603,7 @@
 
 							<div class="flex gap-2">
 								<input
-									class={`w-full flex-1 text-xs font-mono ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+									class={`w-full flex-1 text-xs font-mono ${inputClass}`}
 									type="text"
 									placeholder={$i18n.t('Search or add pattern')}
 									autocomplete="off"
diff --git a/src/lib/components/admin/Settings/ExternalKnowledge.svelte b/src/lib/components/admin/Settings/ExternalKnowledge.svelte
index 54605fa66f..6c89353111 100644
--- a/src/lib/components/admin/Settings/ExternalKnowledge.svelte
+++ b/src/lib/components/admin/Settings/ExternalKnowledge.svelte
@@ -408,7 +408,7 @@
 	onMount(refresh);
 </script>
 
-<Modal bind:show={showSourceModal} size="sm">
+<Modal bind:show={showSourceModal} size="sm" className="bg-white dark:bg-gray-900 rounded-4xl">
 	<div>
 		<div class="flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
 			<h1 class="text-sm font-medium self-center">
diff --git a/src/lib/components/admin/Settings/Models.svelte b/src/lib/components/admin/Settings/Models.svelte
index 0dee70cda2..06893c36ae 100644
--- a/src/lib/components/admin/Settings/Models.svelte
+++ b/src/lib/components/admin/Settings/Models.svelte
@@ -535,6 +535,7 @@
 							<Search className="size-3.5" />
 						</div>
 						<input
+							data-settings-search
 							class=" w-full text-sm py-1 rounded-r-xl outline-hidden bg-transparent"
 							bind:value={searchValue}
 							placeholder={$i18n.t('Search Models')}
diff --git a/src/lib/components/admin/Settings/Models/ManageModelsModal.svelte b/src/lib/components/admin/Settings/Models/ManageModelsModal.svelte
index 04f28cc115..dbbf516cfb 100644
--- a/src/lib/components/admin/Settings/Models/ManageModelsModal.svelte
+++ b/src/lib/components/admin/Settings/Models/ManageModelsModal.svelte
@@ -37,7 +37,7 @@
 	});
 </script>
 
-<Modal size="sm" bind:show>
+<Modal size="sm" bind:show className="bg-white dark:bg-gray-900 rounded-4xl">
 	<div>
 		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
 			<div class=" text-sm font-medium self-center">
diff --git a/src/lib/components/admin/Settings/Models/ModelSettingsModal.svelte b/src/lib/components/admin/Settings/Models/ModelSettingsModal.svelte
index 4d3684c606..bdb5d38445 100644
--- a/src/lib/components/admin/Settings/Models/ModelSettingsModal.svelte
+++ b/src/lib/components/admin/Settings/Models/ModelSettingsModal.svelte
@@ -163,7 +163,7 @@
 	}}
 />
 
-<Modal size="lg" bind:show>
+<Modal size="lg" bind:show className="bg-white dark:bg-gray-900 rounded-4xl">
 	<div>
 		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
 			<div class=" text-sm font-medium self-center">
diff --git a/src/lib/components/chat/Settings/About.svelte b/src/lib/components/chat/Settings/About.svelte
index 436ef398f7..081b13269f 100644
--- a/src/lib/components/chat/Settings/About.svelte
+++ b/src/lib/components/chat/Settings/About.svelte
@@ -7,6 +7,8 @@
 	import { onMount, getContext } from 'svelte';
 
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import UserSettingRow from './UserSettingRow.svelte';
+	import UserSettingSection from './UserSettingSection.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -17,6 +19,8 @@
 		current: '',
 		latest: ''
 	};
+	const actionButtonClass =
+		'text-xs text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-500 dark:hover:text-white';
 
 	const checkForVersionUpdates = async () => {
 		updateAvailable = null;
@@ -44,19 +48,15 @@
 	});
 </script>
 
-<div id="tab-about" class="flex flex-col h-full justify-between space-y-3 text-sm">
+<div id="tab-about" class="flex flex-col h-full justify-between text-sm">
 	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('About')}</h2>
 
-	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5 space-y-3">
-		<div>
-			<div class="text-xs text-gray-400 dark:text-gray-600 mb-2.5 flex space-x-2 items-center">
-				<div>
-					{$WEBUI_NAME}
-					{$i18n.t('Version')}
-				</div>
-			</div>
-			<div class="flex w-full justify-between items-center">
-				<div class="flex flex-col text-xs text-gray-700 dark:text-gray-200">
+	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
+		<UserSettingSection title={`${$WEBUI_NAME} ${$i18n.t('Version')}`} first>
+			<UserSettingRow
+				description={$i18n.t('View the installed version and check release updates.')}
+			>
+				<div slot="label" class="flex flex-col text-xs text-gray-600 dark:text-gray-400">
 					<div class="flex gap-1">
 						<Tooltip content={WEBUI_BUILD_HASH}>
 							v{WEBUI_VERSION}
@@ -77,7 +77,7 @@
 					</div>
 
 					<button
-						class=" underline flex items-center space-x-1 text-xs text-gray-500 dark:text-gray-500"
+						class={actionButtonClass}
 						on:click={() => {
 							showChangelog.set(true);
 						}}
@@ -88,7 +88,7 @@
 
 				{#if $config?.features?.enable_version_update_check}
 					<button
-						class=" text-xs px-3 py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-lg font-normal"
+						class={actionButtonClass}
 						on:click={() => {
 							checkForVersionUpdates();
 						}}
@@ -96,85 +96,67 @@
 						{$i18n.t('Check for updates')}
 					</button>
 				{/if}
-			</div>
-		</div>
+			</UserSettingRow>
+		</UserSettingSection>
 
 		{#if ollamaVersion}
-			<hr class=" border-gray-100/20 dark:border-white/[0.025]" />
-
-			<div>
-				<div class="text-xs text-gray-400 dark:text-gray-600 mb-2.5">
-					{$i18n.t('Ollama Version')}
+			<UserSettingSection title={$i18n.t('Ollama Version')}>
+				<div class="text-xs text-gray-600 dark:text-gray-400">
+					{ollamaVersion ?? 'N/A'}
 				</div>
-				<div class="flex w-full">
-					<div class="flex-1 text-xs text-gray-700 dark:text-gray-200">
-						{ollamaVersion ?? 'N/A'}
-					</div>
-				</div>
-			</div>
+			</UserSettingSection>
 		{/if}
 
-		<hr class=" border-gray-100/20 dark:border-white/[0.025]" />
+		<UserSettingSection title={$i18n.t('Community')}>
+			{#if $config?.license_metadata}
+				<div class="text-xs text-gray-600 dark:text-gray-400">
+					{#if !$WEBUI_NAME.includes('Open WebUI')}
+						<span>{$WEBUI_NAME}</span> -
+					{/if}
 
-		{#if $config?.license_metadata}
-			<div class="mb-2 text-xs">
-				{#if !$WEBUI_NAME.includes('Open WebUI')}
-					<span class=" text-gray-500 dark:text-gray-300 font-normal">{$WEBUI_NAME}</span> -
-				{/if}
+					<span class="capitalize">{$config?.license_metadata?.type}</span> license purchased by
+					<span class="capitalize">{$config?.license_metadata?.organization_name}</span>
+				</div>
+			{:else}
+				<div class="flex flex-wrap gap-x-3 gap-y-1 text-xs text-gray-400 dark:text-gray-600">
+					<a
+						class="hover:text-gray-700 dark:hover:text-gray-400"
+						href="https://discord.gg/5rJgQTnV4s"
+						target="_blank">Discord</a
+					>
+					<a
+						class="hover:text-gray-700 dark:hover:text-gray-400"
+						href="https://twitter.com/OpenWebUI"
+						target="_blank">X</a
+					>
+					<a
+						class="hover:text-gray-700 dark:hover:text-gray-400"
+						href="https://github.com/open-webui/open-webui"
+						target="_blank">GitHub</a
+					>
+				</div>
+			{/if}
 
-				<span class=" capitalize">{$config?.license_metadata?.type}</span> license purchased by
-				<span class=" capitalize">{$config?.license_metadata?.organization_name}</span>
+			<div class="text-xs text-gray-400 dark:text-gray-500">
+				Emoji graphics provided by
+				<a href="https://github.com/jdecked/twemoji" target="_blank">Twemoji</a>, licensed under
+				<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC-BY 4.0</a>.
 			</div>
-		{:else}
-			<div class="flex space-x-1">
-				<a href="https://discord.gg/5rJgQTnV4s" target="_blank">
-					<img
-						alt="Discord"
-						src="https://img.shields.io/badge/Discord-Open_WebUI-blue?logo=discord&logoColor=white"
-					/>
-				</a>
 
-				<a href="https://twitter.com/OpenWebUI" target="_blank">
-					<img
-						alt="X (formerly Twitter) Follow"
-						src="https://img.shields.io/twitter/follow/OpenWebUI"
-					/>
-				</a>
-
-				<a href="https://github.com/open-webui/open-webui" target="_blank">
-					<img
-						alt="Github Repo"
-						src="https://img.shields.io/github/stars/open-webui/open-webui?style=social&label=Star us on Github"
-					/>
-				</a>
-			</div>
-		{/if}
-
-		<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
-			Emoji graphics provided by
-			<a href="https://github.com/jdecked/twemoji" target="_blank">Twemoji</a>, licensed under
-			<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC-BY 4.0</a>.
-		</div>
-
-		<div>
-			<pre
-				class="text-xs text-gray-400 dark:text-gray-500">Copyright (c) {new Date().getFullYear()} <a
-					href="https://openwebui.com"
-					target="_blank"
-					class="underline">Open WebUI Inc.</a
-				> <a href="https://github.com/open-webui/open-webui/blob/main/LICENSE" target="_blank"
+			<div class="text-xs text-gray-400 dark:text-gray-500">
+				Copyright (c) {new Date().getFullYear()}
+				<a href="https://openwebui.com" target="_blank" class="underline">Open WebUI Inc.</a>
+				<a href="https://github.com/open-webui/open-webui/blob/main/LICENSE" target="_blank"
 					>All rights reserved.</a
 				>
-</pre>
-		</div>
+			</div>
 
-		<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
-			{$i18n.t('Created by')}
-			<a
-				class=" text-gray-500 dark:text-gray-300 font-normal"
-				href="https://github.com/tjbck"
-				target="_blank">Timothy J. Baek</a
-			>
-		</div>
+			<div class="text-xs text-gray-400 dark:text-gray-500">
+				{$i18n.t('Created by')}
+				<a class="text-gray-500 dark:text-gray-400" href="https://github.com/tjbck" target="_blank"
+					>Timothy J. Baek</a
+				>
+			</div>
+		</UserSettingSection>
 	</div>
 </div>
diff --git a/src/lib/components/chat/Settings/Account.svelte b/src/lib/components/chat/Settings/Account.svelte
index 82ac098e5e..b53322d9dd 100644
--- a/src/lib/components/chat/Settings/Account.svelte
+++ b/src/lib/components/chat/Settings/Account.svelte
@@ -14,16 +14,16 @@
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
 	import Textarea from '$lib/components/common/Textarea.svelte';
-	import User from '$lib/components/icons/User.svelte';
 	import UserProfileImage from './Account/UserProfileImage.svelte';
+	import UserSettingField from './UserSettingField.svelte';
+	import UserSettingRow from './UserSettingRow.svelte';
+	import UserSettingSection from './UserSettingSection.svelte';
 
 	const i18n = getContext('i18n');
 
 	export let saveHandler: Function;
 	export let saveSettings: Function;
 
-	let loaded = false;
-
 	let profileImageUrl = '';
 	let name = '';
 	let bio = '';
@@ -39,7 +39,13 @@
 
 	let APIKey = '';
 	let APIKeyCopied = false;
-	let profileImageInputElement: HTMLInputElement;
+
+	const textareaClass =
+		'w-full resize-y rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
+	const inputClass =
+		'h-7 w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
+	const actionButtonClass =
+		'text-xs text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-500 dark:hover:text-white';
 
 	const submitHandler = async () => {
 		if (name !== $user?.name) {
@@ -119,18 +125,14 @@
 				return '';
 			});
 		}
-
-		loaded = true;
 	});
 </script>
 
 <div id="tab-account" class="flex h-full flex-col text-sm">
-	<div class="flex-1 min-h-0 w-full overflow-y-auto scrollbar-hover pr-1.5 py-1">
+	<div class="flex-1 min-h-0 w-full overflow-y-auto scrollbar-hover pr-1.5">
 		<h2 class="mb-4 text-sm font-medium text-gray-900 dark:text-white">{$i18n.t('Account')}</h2>
 
-		<div class="space-y-3">
-			<!-- <div class=" text-sm font-normal">{$i18n.t('Account')}</div> -->
-
+		<UserSettingSection title={$i18n.t('Profile')} first>
 			<UserProfileImage
 				bind:profileImageUrl
 				user={$user}
@@ -138,38 +140,39 @@
 				displayName={$user?.name}
 			/>
 
-			<div class="flex flex-col w-full">
-				<div class="mb-1 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Name')}</div>
-
+			<UserSettingField
+				label={$i18n.t('Name')}
+				description={$i18n.t('Set the display name shown across your account.')}
+			>
 				<input
-					class="w-full bg-transparent py-1 text-[0.8125rem] text-gray-700 outline-hidden placeholder:text-gray-300 dark:text-gray-300 dark:placeholder:text-gray-700"
+					class={inputClass}
 					type="text"
 					bind:value={name}
 					aria-label={$i18n.t('Name')}
 					required
 					placeholder={$i18n.t('Enter your name')}
 				/>
-			</div>
-
-			<div class="mt-2 flex flex-col w-full">
-				<div class="mb-1 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Bio')}</div>
+			</UserSettingField>
 
+			<UserSettingField
+				label={$i18n.t('Bio')}
+				description={$i18n.t('Add optional profile context visible where profiles are shown.')}
+			>
 				<Textarea
-					className="w-full bg-transparent py-1 text-[0.8125rem] text-gray-700 outline-hidden placeholder:text-gray-300 dark:text-gray-300 dark:placeholder:text-gray-700"
+					className={textareaClass}
 					minSize={60}
 					bind:value={bio}
 					ariaLabel={$i18n.t('Bio')}
 					placeholder={$i18n.t('Share your background and interests')}
 				/>
-			</div>
-
-			<div class="mt-2 flex flex-col w-full">
-				<div class="mb-1 text-xs text-gray-400 dark:text-gray-600">
-					{$i18n.t('Gender')}
-				</div>
+			</UserSettingField>
 
+			<UserSettingField
+				label={$i18n.t('Gender')}
+				description={$i18n.t('Choose the gender value stored on your profile.')}
+			>
 				<select
-					class="w-full bg-transparent py-1 text-[0.8125rem] text-gray-700 outline-hidden dark:text-gray-300"
+					class={inputClass}
 					bind:value={_gender}
 					aria-label={$i18n.t('Gender')}
 					on:change={(e) => {
@@ -191,7 +194,7 @@
 
 				{#if _gender === 'custom'}
 					<input
-						class="mt-1 w-full bg-transparent py-1 text-[0.8125rem] text-gray-700 outline-hidden placeholder:text-gray-300 dark:text-gray-300 dark:placeholder:text-gray-700"
+						class="mt-1 {inputClass}"
 						type="text"
 						required
 						aria-label={$i18n.t('Custom Gender')}
@@ -199,150 +202,81 @@
 						bind:value={gender}
 					/>
 				{/if}
-			</div>
-
-			<div class="mt-2 flex flex-col w-full">
-				<div class="mb-1 text-xs text-gray-400 dark:text-gray-600">
-					{$i18n.t('Birth Date')}
-				</div>
+			</UserSettingField>
 
+			<UserSettingField
+				label={$i18n.t('Birth Date')}
+				description={$i18n.t('Set the birth date saved with your profile.')}
+			>
 				<input
-					class="w-full bg-transparent py-1 text-[0.8125rem] text-gray-700 outline-hidden dark:text-gray-300 dark:placeholder:text-gray-700"
+					class={inputClass}
 					type="date"
 					aria-label={$i18n.t('Birth Date')}
 					bind:value={dateOfBirth}
 					required
 				/>
-			</div>
-		</div>
+			</UserSettingField>
+		</UserSettingSection>
 
 		{#if $config?.features?.enable_user_webhooks && ($user?.role === 'admin' || ($user?.permissions?.features?.webhooks ?? false))}
-			<div class="mt-3">
-				<div class="flex flex-col w-full">
-					<div class="mb-1 text-xs text-gray-400 dark:text-gray-600">
-						{$i18n.t('Notification Webhook')}
-					</div>
-
-					<div class="flex-1">
-						<input
-							class="w-full bg-transparent py-1 text-[0.8125rem] text-gray-700 outline-hidden placeholder:text-gray-300 dark:text-gray-300 dark:placeholder:text-gray-700"
-							type="url"
-							placeholder={$i18n.t('Enter your webhook URL')}
-							aria-label={$i18n.t('Notification Webhook')}
-							bind:value={webhookUrl}
-							required
-						/>
-					</div>
-				</div>
-			</div>
+			<UserSettingSection title={$i18n.t('Notifications')}>
+				<UserSettingField
+					label={$i18n.t('Notification Webhook')}
+					description={$i18n.t('Send account notifications to this webhook URL.')}
+				>
+					<input
+						class={inputClass}
+						type="url"
+						placeholder={$i18n.t('Enter your webhook URL')}
+						aria-label={$i18n.t('Notification Webhook')}
+						bind:value={webhookUrl}
+						required
+					/>
+				</UserSettingField>
+			</UserSettingSection>
 		{/if}
 
-		<hr class="my-4 border-gray-100/40 dark:border-white/[0.03]" />
-
 		{#if $config?.features.enable_login_form && $config?.features.enable_password_change_form}
-			<div class="mt-2">
+			<UserSettingSection title={$i18n.t('Password')}>
 				<UpdatePassword />
-			</div>
+			</UserSettingSection>
 		{/if}
 
 		{#if ($config?.features?.enable_api_keys ?? true) && ($user?.role === 'admin' || ($user?.permissions?.features?.api_keys ?? false))}
-			<div class="mt-3 flex items-center justify-between text-sm">
-				<div class="text-xs text-gray-400 dark:text-gray-600">{$i18n.t('API keys')}</div>
-				<button
-					class="text-xs font-normal text-gray-500 transition-colors hover:text-gray-700 dark:hover:text-gray-300"
-					type="button"
-					on:click={() => {
-						showAPIKeys = !showAPIKeys;
-					}}>{showAPIKeys ? $i18n.t('Hide') : $i18n.t('Show')}</button
-				>
-			</div>
+			<UserSettingSection title={$i18n.t('API keys')}>
+				<UserSettingRow description={$i18n.t('Show or hide sensitive account secrets.')}>
+					<span slot="label">{$i18n.t('Secrets')}</span>
+					<button
+						class={actionButtonClass}
+						type="button"
+						on:click={() => {
+							showAPIKeys = !showAPIKeys;
+						}}>{showAPIKeys ? $i18n.t('Hide') : $i18n.t('Show')}</button
+					>
+				</UserSettingRow>
 
-			{#if showAPIKeys}
-				<div class="flex flex-col">
-					{#if $user?.role === 'admin'}
-						<div class="justify-between w-full mt-2">
-							<div class="flex justify-between w-full">
-								<div class="mb-1 self-center text-xs text-gray-400 dark:text-gray-600">
-									{$i18n.t('JWT Token')}
-								</div>
-							</div>
-
-							<div class="flex">
-								<SensitiveInput value={localStorage.token} readOnly={true} />
-
-								<button
-									class="ml-1.5 rounded-sm px-1.5 py-1 text-gray-500 transition hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-850 dark:hover:text-gray-300"
-									aria-label={$i18n.t('Copy Token')}
-									on:click={() => {
-										copyToClipboard(localStorage.token);
-										JWTTokenCopied = true;
-										setTimeout(() => {
-											JWTTokenCopied = false;
-										}, 2000);
-									}}
-								>
-									{#if JWTTokenCopied}
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 20 20"
-											fill="currentColor"
-											class="w-4 h-4"
-										>
-											<path
-												fill-rule="evenodd"
-												d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
-												clip-rule="evenodd"
-											/>
-										</svg>
-									{:else}
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 16 16"
-											fill="currentColor"
-											class="w-4 h-4"
-										>
-											<path
-												fill-rule="evenodd"
-												d="M11.986 3H12a2 2 0 0 1 2 2v6a2 2 0 0 1-1.5 1.937V7A2.5 2.5 0 0 0 10 4.5H4.063A2 2 0 0 1 6 3h.014A2.25 2.25 0 0 1 8.25 1h1.5a2.25 2.25 0 0 1 2.236 2ZM10.5 4v-.75a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0-.75.75V4h3Z"
-												clip-rule="evenodd"
-											/>
-											<path
-												fill-rule="evenodd"
-												d="M3 6a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H3Zm1.75 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5ZM4 11.75a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1-.75-.75Z"
-												clip-rule="evenodd"
-											/>
-										</svg>
-									{/if}
-								</button>
-							</div>
-						</div>
-					{/if}
-
-					{#if ($config?.features?.enable_api_keys ?? true) && ($user?.role === 'admin' || ($user?.permissions?.features?.api_keys ?? false))}
-						<div class="justify-between w-full mt-2">
-							{#if $user?.role === 'admin'}
-								<div class="flex justify-between w-full">
-									<div class="mb-1 self-center text-xs text-gray-400 dark:text-gray-600">
-										{$i18n.t('API Key')}
-									</div>
-								</div>
-							{/if}
-							<div class="flex">
-								{#if APIKey}
-									<SensitiveInput value={APIKey} readOnly={true} />
+				{#if showAPIKeys}
+					<div class="flex flex-col gap-2.5">
+						{#if $user?.role === 'admin'}
+							<UserSettingField
+								label={$i18n.t('JWT Token')}
+								description={$i18n.t('Copy the current session token for authenticated requests.')}
+							>
+								<div class="flex">
+									<SensitiveInput value={localStorage.token} readOnly={true} />
 
 									<button
 										class="ml-1.5 rounded-sm px-1.5 py-1 text-gray-500 transition hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-850 dark:hover:text-gray-300"
-										aria-label={$i18n.t('Copy API Key')}
+										aria-label={$i18n.t('Copy Token')}
 										on:click={() => {
-											copyToClipboard(APIKey);
-											APIKeyCopied = true;
+											copyToClipboard(localStorage.token);
+											JWTTokenCopied = true;
 											setTimeout(() => {
-												APIKeyCopied = false;
+												JWTTokenCopied = false;
 											}, 2000);
 										}}
 									>
-										{#if APIKeyCopied}
+										{#if JWTTokenCopied}
 											<svg
 												xmlns="http://www.w3.org/2000/svg"
 												viewBox="0 0 20 20"
@@ -375,48 +309,106 @@
 											</svg>
 										{/if}
 									</button>
+								</div>
+							</UserSettingField>
+						{/if}
+
+						{#if ($config?.features?.enable_api_keys ?? true) && ($user?.role === 'admin' || ($user?.permissions?.features?.api_keys ?? false))}
+							<UserSettingField
+								label={$i18n.t('API Key')}
+								description={$i18n.t('Create, copy, or rotate your API key.')}
+							>
+								<div class="flex">
+									{#if APIKey}
+										<SensitiveInput value={APIKey} readOnly={true} />
 
-									<Tooltip content={$i18n.t('Create new key')}>
 										<button
-											class="rounded-sm px-1.5 py-1 text-gray-500 transition hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-850 dark:hover:text-gray-300"
-											aria-label={$i18n.t('Create new key')}
+											class="ml-1.5 rounded-sm px-1.5 py-1 text-gray-500 transition hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-850 dark:hover:text-gray-300"
+											aria-label={$i18n.t('Copy API Key')}
+											on:click={() => {
+												copyToClipboard(APIKey);
+												APIKeyCopied = true;
+												setTimeout(() => {
+													APIKeyCopied = false;
+												}, 2000);
+											}}
+										>
+											{#if APIKeyCopied}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 20 20"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														fill-rule="evenodd"
+														d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+														clip-rule="evenodd"
+													/>
+												</svg>
+											{:else}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 16 16"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														fill-rule="evenodd"
+														d="M11.986 3H12a2 2 0 0 1 2 2v6a2 2 0 0 1-1.5 1.937V7A2.5 2.5 0 0 0 10 4.5H4.063A2 2 0 0 1 6 3h.014A2.25 2.25 0 0 1 8.25 1h1.5a2.25 2.25 0 0 1 2.236 2ZM10.5 4v-.75a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0-.75.75V4h3Z"
+														clip-rule="evenodd"
+													/>
+													<path
+														fill-rule="evenodd"
+														d="M3 6a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H3Zm1.75 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5ZM4 11.75a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1-.75-.75Z"
+														clip-rule="evenodd"
+													/>
+												</svg>
+											{/if}
+										</button>
+
+										<Tooltip content={$i18n.t('Create new key')}>
+											<button
+												class="rounded-sm px-1.5 py-1 text-gray-500 transition hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-850 dark:hover:text-gray-300"
+												aria-label={$i18n.t('Create new key')}
+												on:click={() => {
+													createAPIKeyHandler();
+												}}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="2"
+													stroke="currentColor"
+													class="size-4"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+													/>
+												</svg>
+											</button>
+										</Tooltip>
+									{:else}
+										<button
+											class={actionButtonClass}
 											on:click={() => {
 												createAPIKeyHandler();
 											}}
 										>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												fill="none"
-												viewBox="0 0 24 24"
-												stroke-width="2"
-												stroke="currentColor"
-												class="size-4"
-											>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
-												/>
-											</svg>
-										</button>
-									</Tooltip>
-								{:else}
-									<button
-										class="flex items-center gap-1.5 text-[0.8125rem] font-normal text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
-										on:click={() => {
-											createAPIKeyHandler();
-										}}
-									>
-										<Plus strokeWidth="2" className=" size-3.5" />
+											<Plus strokeWidth="2" className=" size-3.5" />
 
-										{$i18n.t('Create new secret key')}</button
-									>
-								{/if}
-							</div>
-						</div>
-					{/if}
-				</div>
-			{/if}
+											{$i18n.t('Create new secret key')}</button
+										>
+									{/if}
+								</div>
+							</UserSettingField>
+						{/if}
+					</div>
+				{/if}
+			</UserSettingSection>
 		{/if}
 	</div>
 
diff --git a/src/lib/components/chat/Settings/Account/UpdatePassword.svelte b/src/lib/components/chat/Settings/Account/UpdatePassword.svelte
index b0fef2ba89..b50b6675bf 100644
--- a/src/lib/components/chat/Settings/Account/UpdatePassword.svelte
+++ b/src/lib/components/chat/Settings/Account/UpdatePassword.svelte
@@ -10,6 +10,10 @@
 	let currentPassword = '';
 	let newPassword = '';
 	let newPasswordConfirm = '';
+	const inputClass =
+		'h-7 w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
+	const actionButtonClass =
+		'text-xs text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-500 dark:hover:text-white';
 
 	const updatePasswordHandler = async () => {
 		if (newPassword === newPasswordConfirm) {
@@ -43,25 +47,30 @@
 		updatePasswordHandler();
 	}}
 >
-	<div class="flex justify-between items-center text-sm">
-		<div class="text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Change Password')}</div>
+	<div class="flex items-center justify-between gap-2.5">
+		<div class="text-xs text-gray-600 dark:text-gray-400">{$i18n.t('Change Password')}</div>
 		<button
-			class="text-xs font-normal text-gray-500 transition-colors hover:text-gray-700 dark:hover:text-gray-300"
+			class={actionButtonClass}
 			type="button"
 			on:click={() => {
 				show = !show;
 			}}>{show ? $i18n.t('Hide') : $i18n.t('Show')}</button
 		>
 	</div>
+	<p class="-mt-1 text-[0.6875rem] text-gray-400 dark:text-gray-600">
+		{$i18n.t('Update the password used for email and password sign-in.')}
+	</p>
 
 	{#if show}
-		<div class=" py-2.5 space-y-1.5">
+		<div class="py-2.5 space-y-2.5">
 			<div class="flex flex-col w-full">
-				<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Current Password')}</div>
+				<div class="mb-1 text-xs text-gray-600 dark:text-gray-400">
+					{$i18n.t('Current Password')}
+				</div>
 
 				<div class="flex-1">
 					<SensitiveInput
-						class="w-full bg-transparent text-sm dark:text-gray-300 outline-hidden placeholder:opacity-30"
+						class={inputClass}
 						type="password"
 						bind:value={currentPassword}
 						placeholder={$i18n.t('Enter your current password')}
@@ -72,11 +81,13 @@
 			</div>
 
 			<div class="flex flex-col w-full">
-				<div class=" mb-1 text-xs text-gray-500">{$i18n.t('New Password')}</div>
+				<div class="mb-1 text-xs text-gray-600 dark:text-gray-400">
+					{$i18n.t('New Password')}
+				</div>
 
 				<div class="flex-1">
 					<SensitiveInput
-						class="w-full bg-transparent text-sm dark:text-gray-300 outline-hidden placeholder:opacity-30"
+						class={inputClass}
 						type="password"
 						bind:value={newPassword}
 						placeholder={$i18n.t('Enter your new password')}
@@ -87,11 +98,13 @@
 			</div>
 
 			<div class="flex flex-col w-full">
-				<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Confirm Password')}</div>
+				<div class="mb-1 text-xs text-gray-600 dark:text-gray-400">
+					{$i18n.t('Confirm Password')}
+				</div>
 
 				<div class="flex-1">
 					<SensitiveInput
-						class="w-full bg-transparent text-sm dark:text-gray-300 outline-hidden placeholder:opacity-30"
+						class={inputClass}
 						type="password"
 						bind:value={newPasswordConfirm}
 						placeholder={$i18n.t('Confirm your new password')}
diff --git a/src/lib/components/chat/Settings/Account/UserProfileImage.svelte b/src/lib/components/chat/Settings/Account/UserProfileImage.svelte
index 47564f5e24..2898b25aa3 100644
--- a/src/lib/components/chat/Settings/Account/UserProfileImage.svelte
+++ b/src/lib/components/chat/Settings/Account/UserProfileImage.svelte
@@ -82,7 +82,7 @@
 />
 
 {#if variant === 'account'}
-	<div class="mb-6 flex items-center gap-4">
+	<div class="mb-2 flex items-center gap-4">
 		<button
 			class="group relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-gray-100
 			ring-1 ring-gray-200 transition-all duration-200 hover:ring-2 hover:ring-gray-300 dark:bg-white/8 dark:ring-white/10 dark:hover:ring-white/20"
@@ -122,12 +122,10 @@
 		</button>
 
 		<div class="flex flex-col gap-1">
-			<span class="text-sm font-medium text-gray-900 dark:text-white"
-				>{displayName || user?.name}</span
-			>
+			<span class="text-xs text-gray-600 dark:text-gray-400">{displayName || user?.name}</span>
 			<div class="flex flex-wrap items-center gap-2">
 				<button
-					class="text-[0.6875rem] text-gray-400 transition-colors duration-100 hover:text-gray-600 dark:hover:text-gray-300"
+					class="text-[0.6875rem] text-gray-500 transition-colors duration-100 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300"
 					type="button"
 					on:click={() => {
 						profileImageInputElement.click();
@@ -135,7 +133,7 @@
 				>
 				<span class="text-[0.6875rem] text-gray-300 dark:text-gray-700">·</span>
 				<button
-					class="text-[0.6875rem] text-gray-400 transition-colors duration-100 hover:text-gray-600 dark:hover:text-gray-300"
+					class="text-[0.6875rem] text-gray-500 transition-colors duration-100 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300"
 					type="button"
 					on:click={async () => {
 						profileImageUrl = `${WEBUI_BASE_URL}/user.png`;
@@ -143,7 +141,7 @@
 				>
 				<span class="text-[0.6875rem] text-gray-300 dark:text-gray-700">·</span>
 				<button
-					class="text-[0.6875rem] text-gray-400 transition-colors duration-100 hover:text-gray-600 dark:hover:text-gray-300"
+					class="text-[0.6875rem] text-gray-500 transition-colors duration-100 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300"
 					type="button"
 					on:click={async () => {
 						if (canvasPixelTest()) {
@@ -162,7 +160,7 @@
 				>
 				<span class="text-[0.6875rem] text-gray-300 dark:text-gray-700">·</span>
 				<button
-					class="text-[0.6875rem] text-gray-400 transition-colors duration-100 hover:text-gray-600 dark:hover:text-gray-300"
+					class="text-[0.6875rem] text-gray-500 transition-colors duration-100 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300"
 					type="button"
 					on:click={async () => {
 						const url = await getGravatarUrl(localStorage.token, user?.email);
@@ -215,7 +213,7 @@
 			>
 
 			<button
-				class=" text-xs text-center text-gray-800 dark:text-gray-400 rounded-lg py-0.5 opacity-0 group-hover:opacity-100 transition-all"
+				class="rounded-lg py-0.5 text-center text-xs text-gray-600 opacity-0 transition-all group-hover:opacity-100 dark:text-gray-400"
 				type="button"
 				on:click={async () => {
 					if (canvasPixelTest()) {
@@ -234,7 +232,7 @@
 			>
 
 			<button
-				class=" text-xs text-center text-gray-800 dark:text-gray-400 rounded-lg py-0.5 opacity-0 group-hover:opacity-100 transition-all"
+				class="rounded-lg py-0.5 text-center text-xs text-gray-600 opacity-0 transition-all group-hover:opacity-100 dark:text-gray-400"
 				type="button"
 				on:click={async () => {
 					const url = await getGravatarUrl(localStorage.token, user?.email);
diff --git a/src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte b/src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte
index b2ab846961..a36ccfd2e6 100644
--- a/src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte
+++ b/src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte
@@ -57,8 +57,8 @@
 
 <div
 	class={layout === 'grid'
-		? 'grid grid-cols-1 gap-x-5 gap-y-1 pb-safe-bottom text-xs sm:grid-cols-2 lg:grid-cols-3'
-		: 'space-y-1 text-xs pb-safe-bottom'}
+		? 'grid grid-cols-1 gap-x-5 gap-y-1 pb-safe-bottom text-xs text-gray-600 dark:text-gray-400 sm:grid-cols-2 lg:grid-cols-3'
+		: 'space-y-1 pb-safe-bottom text-xs text-gray-600 dark:text-gray-400'}
 >
 	<div>
 		<Tooltip
diff --git a/src/lib/components/chat/Settings/ArchivedChats.svelte b/src/lib/components/chat/Settings/ArchivedChats.svelte
index 333d86acb8..f45e6866ec 100644
--- a/src/lib/components/chat/Settings/ArchivedChats.svelte
+++ b/src/lib/components/chat/Settings/ArchivedChats.svelte
@@ -181,7 +181,7 @@
 />
 
 <div id="tab-archived-chats" class="flex flex-col h-full text-sm">
-	<div class="flex items-center justify-between mb-2">
+	<div class="mb-3 flex items-center justify-between">
 		<h2 class="text-sm font-medium text-gray-900 dark:text-white">
 			{$i18n.t('Archived Chats')}
 			{#if chatCount !== null}
@@ -192,22 +192,25 @@
 		</h2>
 	</div>
 
-	<div class="flex h-8 shrink-0 items-center w-full gap-2">
-		<div class="flex min-w-0 flex-1 items-center">
-			<div class=" self-center ml-1 mr-3">
+	<div class="flex h-7 shrink-0 items-center w-full gap-2">
+		<div
+			class="flex min-w-0 flex-1 items-center rounded-lg bg-gray-50/70 px-2 dark:bg-white/[0.03]"
+		>
+			<div class="mr-2 self-center text-gray-400 dark:text-gray-600">
 				<Search className="size-3.5" />
 			</div>
 			<input
-				class=" w-full text-sm py-1 rounded-r-xl outline-hidden bg-transparent"
+				data-settings-search
+				class="w-full bg-transparent py-1 text-xs text-gray-700 outline-hidden placeholder:text-gray-300 dark:text-gray-300 dark:placeholder:text-gray-700"
 				bind:value={query}
 				on:input={searchHandler}
 				placeholder={$i18n.t('Search')}
 				maxlength="500"
 			/>
 			{#if query}
-				<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
+				<div class="self-center pl-1.5">
 					<button
-						class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+						class="rounded-lg p-0.5 text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-300"
 						type="button"
 						aria-label={$i18n.t('Clear search')}
 						on:click={() => {
@@ -224,7 +227,7 @@
 		<Dropdown align="end">
 			<Tooltip content={$i18n.t('Actions')}>
 				<button
-					class="flex h-8 items-center gap-1.5 rounded-xl bg-transparent px-1.5 text-[13px] font-normal text-gray-700 transition hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100"
+					class="flex h-7 items-center gap-1.5 rounded-lg bg-transparent px-1.5 text-xs text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-500 dark:hover:text-white"
 					type="button"
 				>
 					<span>{$i18n.t('Actions')}</span>
@@ -235,7 +238,7 @@
 			<div slot="content">
 				<DropdownMenu className="w-[170px] shadow-sm">
 					<button
-						class="flex h-[1.6875rem] w-full cursor-pointer select-none items-center gap-2 rounded-xl bg-transparent px-2 text-[13px] hover:text-gray-900 disabled:cursor-default disabled:opacity-30 dark:hover:text-gray-100"
+						class="flex h-[1.6875rem] w-full cursor-pointer select-none items-center gap-2 rounded-lg bg-transparent px-2 text-xs hover:text-gray-900 disabled:cursor-default disabled:opacity-30 dark:hover:text-gray-100"
 						disabled={loading || chatCount === 0}
 						type="button"
 						on:click={() => {
@@ -251,7 +254,7 @@
 					</button>
 
 					<button
-						class="flex h-[1.6875rem] w-full cursor-pointer select-none items-center gap-2 rounded-xl bg-transparent px-2 text-[13px] hover:text-gray-900 disabled:cursor-default disabled:opacity-30 dark:hover:text-gray-100"
+						class="flex h-[1.6875rem] w-full cursor-pointer select-none items-center gap-2 rounded-lg bg-transparent px-2 text-xs hover:text-gray-900 disabled:cursor-default disabled:opacity-30 dark:hover:text-gray-100"
 						disabled={loading || chatCount === 0}
 						type="button"
 						on:click={exportChatsHandler}
@@ -264,7 +267,7 @@
 		</Dropdown>
 	</div>
 
-	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover px-2 pr-1.5">
+	<div class="mt-3 flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if chatList === null}
 			<div class="flex min-h-20 items-center justify-center">
 				<Spinner className="size-5" />
@@ -276,7 +279,7 @@
 				{$i18n.t('You have no archived conversations.')}
 			</div>
 		{:else}
-			<div class="flex items-center text-xs text-gray-400 dark:text-gray-600">
+			<div class="flex items-center px-1 text-xs text-gray-400 dark:text-gray-600">
 				<button
 					class="flex flex-1 items-center gap-1 py-0.5 text-left"
 					type="button"
@@ -309,7 +312,7 @@
 
 			<div>
 				{#each chatList as chat (chat.id)}
-					<div class="py-0.5 flex w-full justify-between gap-2 text-xs">
+					<div class="flex w-full justify-between gap-2 px-1 py-1 text-xs">
 						<a
 							class="min-w-0 flex-1 self-center truncate text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white"
 							href={`/c/${chat.id}`}
@@ -338,7 +341,7 @@
 						<div class="flex shrink-0 items-center justify-end text-gray-500 dark:text-gray-500">
 							<Tooltip content={$i18n.t('Unarchive Chat')}>
 								<button
-									class="rounded-sm p-1 hover:bg-gray-100 dark:hover:bg-gray-850"
+									class="rounded-lg p-1 text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-300"
 									type="button"
 									aria-label={$i18n.t('Unarchive Chat')}
 									on:click={() => {
@@ -350,7 +353,7 @@
 							</Tooltip>
 							<Tooltip content={$i18n.t('Delete Chat')}>
 								<button
-									class="rounded-sm p-1 hover:bg-gray-100 dark:hover:bg-gray-850"
+									class="rounded-lg p-1 text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-300"
 									type="button"
 									aria-label={$i18n.t('Delete Chat')}
 									on:click={() => {
diff --git a/src/lib/components/chat/Settings/Audio.svelte b/src/lib/components/chat/Settings/Audio.svelte
index 9592d33c36..8554f2601e 100644
--- a/src/lib/components/chat/Settings/Audio.svelte
+++ b/src/lib/components/chat/Settings/Audio.svelte
@@ -8,6 +8,9 @@
 	import Switch from '$lib/components/common/Switch.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import UserSettingField from './UserSettingField.svelte';
+	import UserSettingRow from './UserSettingRow.svelte';
+	import UserSettingSection from './UserSettingSection.svelte';
 	const dispatch = createEventDispatcher();
 
 	const i18n = getContext('i18n');
@@ -35,6 +38,12 @@
 
 	// Audio speed control
 	let playbackRate = 1;
+	const inputClass =
+		'h-7 w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
+	const selectClass =
+		'h-7 w-fit min-w-28 rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-right text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500';
+	const actionButtonClass =
+		'text-xs text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-500 dark:hover:text-white';
 
 	const getVoices = async () => {
 		if (TTSEngine === 'browser-kokoro') {
@@ -154,7 +163,7 @@
 
 <form
 	id="tab-audio"
-	class="flex flex-col h-full justify-between space-y-3 text-sm"
+	class="flex flex-col h-full justify-between text-sm"
 	on:submit|preventDefault={async () => {
 		saveSettings({
 			audio: {
@@ -177,57 +186,55 @@
 >
 	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Audio')}</h2>
 
-	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5 space-y-3">
-		<div>
-			<div class="text-xs text-gray-400 dark:text-gray-600 mb-2">
-				{$i18n.t('STT Settings')}
-			</div>
-
+	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
+		<UserSettingSection title={$i18n.t('STT Settings')} first>
 			{#if $config.audio.stt.engine !== 'web'}
-				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs font-normal">{$i18n.t('Speech-to-Text Engine')}</div>
-					<div class="flex items-center relative">
-						<select
-							class="w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
-							bind:value={STTEngine}
-							aria-label={$i18n.t('Speech-to-Text Engine')}
-							placeholder={$i18n.t('Select an engine')}
-						>
-							<option value="">{$i18n.t('Default')}</option>
-							<option value="web">{$i18n.t('Web API')}</option>
-						</select>
-					</div>
-				</div>
+				<UserSettingRow
+					label={$i18n.t('Speech-to-Text Engine')}
+					description={$i18n.t('Choose the engine used to transcribe voice input.')}
+				>
+					<select
+						class={selectClass}
+						bind:value={STTEngine}
+						aria-label={$i18n.t('Speech-to-Text Engine')}
+						placeholder={$i18n.t('Select an engine')}
+					>
+						<option value="">{$i18n.t('Default')}</option>
+						<option value="web">{$i18n.t('Web API')}</option>
+					</select>
+				</UserSettingRow>
 
-				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs font-normal">{$i18n.t('Language')}</div>
-
-					<div class="flex items-center relative text-xs px-3">
-						<Tooltip
-							content={$i18n.t(
-								'The language of the input audio. Supplying the input language in ISO-639-1 (e.g. en) format will improve accuracy and latency. Leave blank to automatically detect the language.'
-							)}
-							placement="top"
-						>
-							<input
-								type="text"
-								bind:value={STTLanguage}
-								aria-label={$i18n.t('Speech-to-Text Language')}
-								placeholder={$i18n.t('e.g. en')}
-								class=" text-sm text-right bg-transparent dark:text-gray-300 outline-hidden"
-							/>
-						</Tooltip>
-					</div>
-				</div>
+				<UserSettingRow
+					label={$i18n.t('Language')}
+					description={$i18n.t(
+						'Set a speech recognition language or leave it blank to detect automatically.'
+					)}
+				>
+					<Tooltip
+						content={$i18n.t(
+							'The language of the input audio. Supplying the input language in ISO-639-1 (e.g. en) format will improve accuracy and latency. Leave blank to automatically detect the language.'
+						)}
+						placement="top"
+					>
+						<input
+							type="text"
+							bind:value={STTLanguage}
+							aria-label={$i18n.t('Speech-to-Text Language')}
+							placeholder={$i18n.t('e.g. en')}
+							class="h-7 w-24 rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-right text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500"
+						/>
+					</Tooltip>
+				</UserSettingRow>
 			{/if}
 
-			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-normal">
-					{$i18n.t('Instant Auto-Send After Voice Transcription')}
-				</div>
-
+			<UserSettingRow
+				label={$i18n.t('Instant Auto-Send After Voice Transcription')}
+				description={$i18n.t(
+					'Send transcribed voice input immediately after speech recognition finishes.'
+				)}
+			>
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition"
+					class={actionButtonClass}
 					on:click={() => {
 						toggleSpeechAutoSend();
 					}}
@@ -235,60 +242,53 @@
 					role="switch"
 					aria-checked={speechAutoSend}
 				>
-					{#if speechAutoSend === true}
-						<span class="ml-2 self-center">{$i18n.t('On')}</span>
-					{:else}
-						<span class="ml-2 self-center">{$i18n.t('Off')}</span>
-					{/if}
+					{speechAutoSend === true ? $i18n.t('On') : $i18n.t('Off')}
 				</button>
-			</div>
-		</div>
+			</UserSettingRow>
+		</UserSettingSection>
 
-		<div>
-			<div class="text-xs text-gray-400 dark:text-gray-600 mb-2">
-				{$i18n.t('TTS Settings')}
-			</div>
-
-			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-normal">{$i18n.t('Text-to-Speech Engine')}</div>
-				<div class="flex items-center relative">
-					<select
-						class="w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
-						bind:value={TTSEngine}
-						aria-label={$i18n.t('Text-to-Speech Engine')}
-						placeholder={$i18n.t('Select an engine')}
-					>
-						<option value="">{$i18n.t('Default')}</option>
-						<option value="browser-kokoro">{$i18n.t('Kokoro.js (Browser)')}</option>
-					</select>
-				</div>
-			</div>
+		<UserSettingSection title={$i18n.t('TTS Settings')}>
+			<UserSettingRow
+				label={$i18n.t('Text-to-Speech Engine')}
+				description={$i18n.t('Choose the engine used to read assistant responses aloud.')}
+			>
+				<select
+					class={selectClass}
+					bind:value={TTSEngine}
+					aria-label={$i18n.t('Text-to-Speech Engine')}
+					placeholder={$i18n.t('Select an engine')}
+				>
+					<option value="">{$i18n.t('Default')}</option>
+					<option value="browser-kokoro">{$i18n.t('Kokoro.js (Browser)')}</option>
+				</select>
+			</UserSettingRow>
 
 			{#if TTSEngine === 'browser-kokoro'}
-				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs font-normal">{$i18n.t('Kokoro.js Dtype')}</div>
-					<div class="flex items-center relative">
-						<select
-							class="w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
-							bind:value={TTSEngineConfig.dtype}
-							aria-label={$i18n.t('Kokoro.js Dtype')}
-							placeholder={$i18n.t('Select dtype')}
-						>
-							<option value="" disabled selected>{$i18n.t('Select dtype')}</option>
-							<option value="fp32">fp32</option>
-							<option value="fp16">fp16</option>
-							<option value="q8">q8</option>
-							<option value="q4">q4</option>
-						</select>
-					</div>
-				</div>
+				<UserSettingRow
+					label={$i18n.t('Kokoro.js Dtype')}
+					description={$i18n.t('Select the local model precision used by Kokoro.js.')}
+				>
+					<select
+						class={selectClass}
+						bind:value={TTSEngineConfig.dtype}
+						aria-label={$i18n.t('Kokoro.js Dtype')}
+						placeholder={$i18n.t('Select dtype')}
+					>
+						<option value="" disabled selected>{$i18n.t('Select dtype')}</option>
+						<option value="fp32">fp32</option>
+						<option value="fp16">fp16</option>
+						<option value="q8">q8</option>
+						<option value="q4">q4</option>
+					</select>
+				</UserSettingRow>
 			{/if}
 
-			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-normal">{$i18n.t('Auto-Playback Response')}</div>
-
+			<UserSettingRow
+				label={$i18n.t('Auto-Playback Response')}
+				description={$i18n.t('Play assistant responses aloud automatically.')}
+			>
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition"
+					class={actionButtonClass}
 					on:click={() => {
 						toggleResponseAutoPlayback();
 					}}
@@ -296,114 +296,38 @@
 					role="switch"
 					aria-checked={responseAutoPlayback}
 				>
-					{#if responseAutoPlayback === true}
-						<span class="ml-2 self-center">{$i18n.t('On')}</span>
-					{:else}
-						<span class="ml-2 self-center">{$i18n.t('Off')}</span>
-					{/if}
+					{responseAutoPlayback === true ? $i18n.t('On') : $i18n.t('Off')}
 				</button>
-			</div>
+			</UserSettingRow>
 
-			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-normal">{$i18n.t('Speech Playback Speed')}</div>
-
-				<div class="flex items-center relative text-xs px-3">
+			<UserSettingRow
+				label={$i18n.t('Speech Playback Speed')}
+				description={$i18n.t('Adjust how quickly spoken responses are played.')}
+			>
+				<div class="relative flex items-center gap-1.5 text-xs text-gray-400 dark:text-gray-600">
 					<input
 						type="number"
 						min="0"
 						step="0.01"
 						bind:value={playbackRate}
 						aria-label={$i18n.t('Speech Playback Speed')}
-						class=" text-sm text-right bg-transparent dark:text-gray-300 outline-hidden"
+						class="h-7 w-16 rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-right text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
 					/>
 					x
 				</div>
-			</div>
-		</div>
-
-		<hr class=" border-gray-100/20 dark:border-white/[0.025]" />
+			</UserSettingRow>
+		</UserSettingSection>
 
 		{#if TTSEngine === 'browser-kokoro'}
 			{#if TTSModel}
-				<div>
-					<div class="text-xs text-gray-400 dark:text-gray-600 mb-2.5">
-						{$i18n.t('Set Voice')}
-					</div>
-					<div class="flex w-full">
-						<div class="flex-1">
-							<input
-								list="voice-list"
-								class="w-full text-sm bg-transparent dark:text-gray-300 outline-hidden"
-								bind:value={voice}
-								aria-label={$i18n.t('Voice')}
-								placeholder={$i18n.t('Select a voice')}
-							/>
-
-							<datalist id="voice-list">
-								{#each voices as voice}
-									<option value={voice.id}>{voice.name}</option>
-								{/each}
-							</datalist>
-						</div>
-					</div>
-				</div>
-			{:else}
-				<div>
-					<div class=" mb-2.5 text-sm font-normal flex gap-2 items-center">
-						<Spinner className="size-4" />
-
-						<div class=" text-sm font-normal shimmer">
-							{$i18n.t('Loading Kokoro.js...')}
-							{TTSModelProgress && TTSModelProgress.status === 'progress'
-								? `(${Math.round(TTSModelProgress.progress * 10) / 10}%)`
-								: ''}
-						</div>
-					</div>
-
-					<div class="text-xs text-gray-500">
-						{$i18n.t('Please do not close the settings page while loading the model.')}
-					</div>
-				</div>
-			{/if}
-		{:else if $config.audio.tts.engine === ''}
-			<div>
-				<div class=" mb-2.5 text-sm font-normal">{$i18n.t('Set Voice')}</div>
-				<div class="flex w-full">
-					<div class="flex-1">
-						<select
-							class="w-full text-sm bg-transparent dark:text-gray-300 outline-hidden"
-							bind:value={voice}
-							aria-label={$i18n.t('Voice')}
-						>
-							<option value="" selected={voice !== ''}>{$i18n.t('Default')}</option>
-							{#each voices.filter((v) => nonLocalVoices || v.localService === true) as _voice}
-								<option
-									value={_voice.name}
-									class="bg-gray-100 dark:bg-gray-700"
-									selected={voice === _voice.name}>{_voice.name}</option
-								>
-							{/each}
-						</select>
-					</div>
-				</div>
-				<div class="flex items-center justify-between my-1.5">
-					<div class="text-xs">
-						{$i18n.t('Allow non-local voices')}
-					</div>
-
-					<div class="mt-1">
-						<Switch bind:state={nonLocalVoices} />
-					</div>
-				</div>
-			</div>
-		{:else if $config.audio.tts.engine !== ''}
-			<div>
-				<div class=" mb-2.5 text-sm font-normal">{$i18n.t('Set Voice')}</div>
-				<div class="flex w-full">
-					<div class="flex-1">
+				<UserSettingSection title={$i18n.t('Voice')}>
+					<UserSettingField
+						label={$i18n.t('Set Voice')}
+						description={$i18n.t('Choose the Kokoro.js voice used for speech output.')}
+					>
 						<input
 							list="voice-list"
-							class="w-full text-sm bg-transparent dark:text-gray-300 outline-hidden"
+							class={inputClass}
 							bind:value={voice}
 							aria-label={$i18n.t('Voice')}
 							placeholder={$i18n.t('Select a voice')}
@@ -414,9 +338,71 @@
 								<option value={voice.id}>{voice.name}</option>
 							{/each}
 						</datalist>
+					</UserSettingField>
+				</UserSettingSection>
+			{:else}
+				<UserSettingSection title={$i18n.t('Voice')}>
+					<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
+						<Spinner className="size-4" />
+
+						<div class="shimmer">
+							{$i18n.t('Loading Kokoro.js...')}
+							{TTSModelProgress && TTSModelProgress.status === 'progress'
+								? `(${Math.round(TTSModelProgress.progress * 10) / 10}%)`
+								: ''}
+						</div>
 					</div>
-				</div>
-			</div>
+
+					<div class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
+						{$i18n.t('Please do not close the settings page while loading the model.')}
+					</div>
+				</UserSettingSection>
+			{/if}
+		{:else if $config.audio.tts.engine === ''}
+			<UserSettingSection title={$i18n.t('Voice')}>
+				<UserSettingField
+					label={$i18n.t('Set Voice')}
+					description={$i18n.t('Choose the browser voice used for speech output.')}
+				>
+					<select class={inputClass} bind:value={voice} aria-label={$i18n.t('Voice')}>
+						<option value="" selected={voice !== ''}>{$i18n.t('Default')}</option>
+						{#each voices.filter((v) => nonLocalVoices || v.localService === true) as _voice}
+							<option
+								value={_voice.name}
+								class="bg-gray-100 dark:bg-gray-700"
+								selected={voice === _voice.name}>{_voice.name}</option
+							>
+						{/each}
+					</select>
+				</UserSettingField>
+				<UserSettingRow
+					label={$i18n.t('Allow non-local voices')}
+					description={$i18n.t('Include voices that are not provided by a local speech service.')}
+				>
+					<Switch bind:state={nonLocalVoices} />
+				</UserSettingRow>
+			</UserSettingSection>
+		{:else if $config.audio.tts.engine !== ''}
+			<UserSettingSection title={$i18n.t('Voice')}>
+				<UserSettingField
+					label={$i18n.t('Set Voice')}
+					description={$i18n.t('Choose the configured text-to-speech service voice.')}
+				>
+					<input
+						list="voice-list"
+						class={inputClass}
+						bind:value={voice}
+						aria-label={$i18n.t('Voice')}
+						placeholder={$i18n.t('Select a voice')}
+					/>
+
+					<datalist id="voice-list">
+						{#each voices as voice}
+							<option value={voice.id}>{voice.name}</option>
+						{/each}
+					</datalist>
+				</UserSettingField>
+			</UserSettingSection>
 		{/if}
 	</div>
 
diff --git a/src/lib/components/chat/Settings/Connections.svelte b/src/lib/components/chat/Settings/Connections.svelte
index e660904419..c7205b56e7 100644
--- a/src/lib/components/chat/Settings/Connections.svelte
+++ b/src/lib/components/chat/Settings/Connections.svelte
@@ -1,18 +1,15 @@
 <script lang="ts">
-	import { toast } from 'svelte-sonner';
-	import { createEventDispatcher, onMount, getContext, tick } from 'svelte';
-	import { getModels as _getModels } from '$lib/apis';
+	import { onMount, getContext } from 'svelte';
 
-	const dispatch = createEventDispatcher();
 	const i18n = getContext('i18n');
 
-	import { models, settings, user } from '$lib/stores';
+	import { settings } from '$lib/stores';
 
-	import Switch from '$lib/components/common/Switch.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Plus from '$lib/components/icons/Plus.svelte';
 	import Connection from './Connections/Connection.svelte';
+	import UserSettingSection from './UserSettingSection.svelte';
 
 	import AddConnectionModal from '$lib/components/AddConnectionModal.svelte';
 
@@ -80,72 +77,59 @@
 
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if config !== null}
-			<div class="">
-				<div class="pr-1.5">
-					<div class="">
-						<div class="flex justify-between items-center mb-0.5">
-							<div class="text-xs text-gray-400 dark:text-gray-600">
-								{$i18n.t('Manage Direct Connections')}
-							</div>
-
-							<Tooltip content={$i18n.t(`Add Connection`)}>
-								<button
-									class="px-1"
-									aria-label={$i18n.t('Add Connection')}
-									on:click={() => {
-										showConnectionModal = true;
-									}}
-									type="button"
-								>
-									<Plus />
-								</button>
-							</Tooltip>
-						</div>
-
-						<div class="flex flex-col gap-1.5">
-							{#each config?.OPENAI_API_BASE_URLS ?? [] as url, idx}
-								<Connection
-									bind:url
-									bind:key={config.OPENAI_API_KEYS[idx]}
-									bind:config={config.OPENAI_API_CONFIGS[idx]}
-									onSubmit={() => {
-										updateHandler();
-									}}
-									onDelete={() => {
-										config.OPENAI_API_BASE_URLS = config.OPENAI_API_BASE_URLS.filter(
-											(url, urlIdx) => idx !== urlIdx
-										);
-										config.OPENAI_API_KEYS = config.OPENAI_API_KEYS.filter(
-											(key, keyIdx) => idx !== keyIdx
-										);
-
-										let newConfig = {};
-										config.OPENAI_API_BASE_URLS.forEach((url, newIdx) => {
-											newConfig[newIdx] =
-												config.OPENAI_API_CONFIGS[newIdx < idx ? newIdx : newIdx + 1];
-										});
-										config.OPENAI_API_CONFIGS = newConfig;
-									}}
-								/>
-							{/each}
-						</div>
+			<UserSettingSection title={$i18n.t('Manage Direct Connections')} first>
+				<div class="flex items-center justify-between gap-2.5">
+					<div class="min-w-0 text-[0.6875rem] text-gray-400 dark:text-gray-600">
+						{$i18n.t('Connect to your own OpenAI compatible API endpoints.')}
 					</div>
 
-					<div class="my-1.5">
-						<div
-							class="text-xs {($settings?.highContrastMode ?? false)
-								? 'text-gray-800 dark:text-gray-100'
-								: 'text-gray-500'}"
+					<Tooltip content={$i18n.t(`Add Connection`)}>
+						<button
+							class="flex size-6 items-center justify-center rounded-lg text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-300"
+							aria-label={$i18n.t('Add Connection')}
+							on:click={() => {
+								showConnectionModal = true;
+							}}
+							type="button"
 						>
-							{$i18n.t('Connect to your own OpenAI compatible API endpoints.')}
-							<br />
-							{$i18n.t(
-								'CORS must be properly configured by the provider to allow requests from Open WebUI.'
-							)}
-						</div>
-					</div>
+							<Plus />
+						</button>
+					</Tooltip>
 				</div>
-			</div>
+
+				<div class="flex flex-col gap-2">
+					{#each config?.OPENAI_API_BASE_URLS ?? [] as url, idx}
+						<Connection
+							bind:url
+							bind:key={config.OPENAI_API_KEYS[idx]}
+							bind:config={config.OPENAI_API_CONFIGS[idx]}
+							onSubmit={() => {
+								updateHandler();
+							}}
+							onDelete={() => {
+								config.OPENAI_API_BASE_URLS = config.OPENAI_API_BASE_URLS.filter(
+									(url, urlIdx) => idx !== urlIdx
+								);
+								config.OPENAI_API_KEYS = config.OPENAI_API_KEYS.filter(
+									(key, keyIdx) => idx !== keyIdx
+								);
+
+								let newConfig = {};
+								config.OPENAI_API_BASE_URLS.forEach((url, newIdx) => {
+									newConfig[newIdx] = config.OPENAI_API_CONFIGS[newIdx < idx ? newIdx : newIdx + 1];
+								});
+								config.OPENAI_API_CONFIGS = newConfig;
+							}}
+						/>
+					{/each}
+				</div>
+
+				<div class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
+					{$i18n.t(
+						'CORS must be properly configured by the provider to allow requests from Open WebUI.'
+					)}
+				</div>
+			</UserSettingSection>
 		{:else}
 			<div class="flex h-full justify-center">
 				<div class="my-auto">
diff --git a/src/lib/components/chat/Settings/Connections/Connection.svelte b/src/lib/components/chat/Settings/Connections/Connection.svelte
index 88b8d9c47a..4de00f663a 100644
--- a/src/lib/components/chat/Settings/Connections/Connection.svelte
+++ b/src/lib/components/chat/Settings/Connections/Connection.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
-	import { getContext, tick } from 'svelte';
+	import { getContext } from 'svelte';
 	const i18n = getContext('i18n');
 
-	import { settings } from '$lib/stores';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Switch from '$lib/components/common/Switch.svelte';
-	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
 	import Cog6 from '$lib/components/icons/Cog6.svelte';
 	import AddConnectionModal from '$lib/components/AddConnectionModal.svelte';
 
@@ -19,9 +17,6 @@
 	export let config = {};
 
 	let showConfigModal = false;
-
-	const highContrastInputClass =
-		'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
 </script>
 
 <AddConnectionModal
@@ -45,7 +40,7 @@
 	}}
 />
 
-<div class="flex w-full gap-2 items-center">
+<div class="flex w-full items-center gap-3">
 	<Tooltip
 		className="w-full relative"
 		content={$i18n.t(`WebUI will make requests to "{{url}}/chat/completions"`, {
@@ -61,7 +56,7 @@
 		<div class="flex w-full gap-2">
 			<div class="flex-1 relative">
 				<input
-					class={`w-full ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden'} ${pipeline ? 'pr-8' : ''}`}
+					class={`h-7 w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500 ${pipeline ? 'pr-8' : ''}`}
 					placeholder={$i18n.t('API Base URL')}
 					bind:value={url}
 					autocomplete="off"
@@ -70,11 +65,11 @@
 		</div>
 	</Tooltip>
 
-	<div class="flex gap-1 items-center">
+	<div class="flex shrink-0 items-center gap-1">
 		<Tooltip content={$i18n.t('Configure')} className="self-start">
 			<button
 				aria-label={$i18n.t('Open modal to configure connection')}
-				class="self-center p-1 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg transition"
+				class="flex size-6 items-center justify-center rounded-lg text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-300"
 				on:click={() => {
 					showConfigModal = true;
 				}}
diff --git a/src/lib/components/chat/Settings/DataControls.svelte b/src/lib/components/chat/Settings/DataControls.svelte
index 8eaf975c63..108dcef81f 100644
--- a/src/lib/components/chat/Settings/DataControls.svelte
+++ b/src/lib/components/chat/Settings/DataControls.svelte
@@ -13,6 +13,8 @@
 	import SharedChatsModal from '$lib/components/layout/SharedChatsModal.svelte';
 	import FilesModal from '$lib/components/layout/FilesModal.svelte';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import UserSettingRow from './UserSettingRow.svelte';
+	import UserSettingSection from './UserSettingSection.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -27,6 +29,8 @@
 	let showFilesModal = false;
 
 	let chatImportInputElement: HTMLInputElement;
+	const actionButtonClass =
+		'text-xs text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-500 dark:hover:text-white';
 
 	$: if (importFiles) {
 		console.log(importFiles);
@@ -137,7 +141,7 @@
 		{$i18n.t('Data Controls')}
 	</h2>
 
-	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5 space-y-3">
+	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		<input
 			id="chat-import-input"
 			bind:this={chatImportInputElement}
@@ -147,106 +151,102 @@
 			hidden
 		/>
 
-		<div>
-			<div class="text-xs text-gray-400 dark:text-gray-600 mb-2">{$i18n.t('Chats')}</div>
-
+		<UserSettingSection title={$i18n.t('Chats')} first>
 			{#if $user?.role === 'admin' || ($user.permissions?.chat?.import ?? true)}
-				<div>
-					<div class="py-0.5 flex w-full justify-between">
-						<div class="self-center text-xs">{$i18n.t('Import Chats')}</div>
-						<button
-							class="p-1 px-3 text-xs flex rounded-sm transition"
-							on:click={() => {
-								chatImportInputElement.click();
-							}}
-							type="button"
-						>
-							<span class="self-center">{$i18n.t('Import')}</span>
-						</button>
-					</div>
-				</div>
+				<UserSettingRow
+					label={$i18n.t('Import Chats')}
+					description={$i18n.t('Import chat history from a JSON export file.')}
+				>
+					<button
+						class={actionButtonClass}
+						on:click={() => {
+							chatImportInputElement.click();
+						}}
+						type="button"
+					>
+						{$i18n.t('Import')}
+					</button>
+				</UserSettingRow>
 			{/if}
 
 			{#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)}
-				<div>
-					<div class="py-0.5 flex w-full justify-between">
-						<div class="self-center text-xs">{$i18n.t('Export Chats')}</div>
-						<button
-							class="p-1 px-3 text-xs flex rounded-sm transition"
-							on:click={() => {
-								exportChats();
-							}}
-							type="button"
-						>
-							<span class="self-center">{$i18n.t('Export')}</span>
-						</button>
-					</div>
-				</div>
+				<UserSettingRow
+					label={$i18n.t('Export Chats')}
+					description={$i18n.t('Download your chat history as a JSON export.')}
+				>
+					<button
+						class={actionButtonClass}
+						on:click={() => {
+							exportChats();
+						}}
+						type="button"
+					>
+						{$i18n.t('Export')}
+					</button>
+				</UserSettingRow>
 			{/if}
 
-			<div>
-				<div class="py-0.5 flex w-full justify-between">
-					<div class="self-center text-xs">{$i18n.t('Shared Chats')}</div>
-					<button
-						class="p-1 px-3 text-xs flex rounded-sm transition"
-						on:click={() => {
-							showSharedChatsModal = true;
-						}}
-						type="button"
-					>
-						<span class="self-center">{$i18n.t('Manage')}</span>
-					</button>
-				</div>
-			</div>
+			<UserSettingRow
+				label={$i18n.t('Shared Chats')}
+				description={$i18n.t('Review and manage chats you have shared.')}
+			>
+				<button
+					class={actionButtonClass}
+					on:click={() => {
+						showSharedChatsModal = true;
+					}}
+					type="button"
+				>
+					{$i18n.t('Manage')}
+				</button>
+			</UserSettingRow>
 
-			<div>
-				<div class="py-0.5 flex w-full justify-between">
-					<div class="self-center text-xs">{$i18n.t('Archive All Chats')}</div>
-					<button
-						class="p-1 px-3 text-xs flex rounded-sm transition"
-						on:click={() => {
-							showArchiveConfirmDialog = true;
-						}}
-						type="button"
-					>
-						<span class="self-center">{$i18n.t('Archive All')}</span>
-					</button>
-				</div>
-			</div>
+			<UserSettingRow
+				label={$i18n.t('Archive All Chats')}
+				description={$i18n.t('Move every chat into the archive after confirmation.')}
+			>
+				<button
+					class={actionButtonClass}
+					on:click={() => {
+						showArchiveConfirmDialog = true;
+					}}
+					type="button"
+				>
+					{$i18n.t('Archive All')}
+				</button>
+			</UserSettingRow>
 
-			<div>
-				<div class="py-0.5 flex w-full justify-between">
-					<div class="self-center text-xs">{$i18n.t('Delete All Chats')}</div>
-					<button
-						class="p-1 px-3 text-xs flex rounded-sm transition"
-						on:click={() => {
-							showDeleteConfirmDialog = true;
-						}}
-						type="button"
-					>
-						<span class="self-center">{$i18n.t('Delete All')}</span>
-					</button>
-				</div>
-			</div>
-		</div>
+			<UserSettingRow
+				label={$i18n.t('Delete All Chats')}
+				description={$i18n.t('Permanently delete every chat after confirmation.')}
+			>
+				<button
+					class={actionButtonClass}
+					on:click={() => {
+						showDeleteConfirmDialog = true;
+					}}
+					type="button"
+				>
+					{$i18n.t('Delete All')}
+				</button>
+			</UserSettingRow>
+		</UserSettingSection>
 
-		<div>
-			<div class="text-xs text-gray-400 dark:text-gray-600 mb-2">{$i18n.t('Files')}</div>
-
-			<div>
-				<div class="py-0.5 flex w-full justify-between">
-					<div class="self-center text-xs">{$i18n.t('Manage Files')}</div>
-					<button
-						class="p-1 px-3 text-xs flex rounded-sm transition"
-						on:click={() => {
-							showFilesModal = true;
-						}}
-						type="button"
-					>
-						<span class="self-center">{$i18n.t('Manage')}</span>
-					</button>
-				</div>
-			</div>
-		</div>
+		<UserSettingSection title={$i18n.t('Files')}>
+			<UserSettingRow
+				label={$i18n.t('Manage Files')}
+				description={$i18n.t('Open the file manager for uploaded files.')}
+			>
+				<button
+					class={actionButtonClass}
+					on:click={() => {
+						showFilesModal = true;
+					}}
+					type="button"
+				>
+					{$i18n.t('Manage')}
+				</button>
+			</UserSettingRow>
+		</UserSettingSection>
 	</div>
 </div>
diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index 18bf7e5ab8..47abca8c8f 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -10,6 +10,9 @@
 
 	import AdvancedParams from './Advanced/AdvancedParams.svelte';
 	import Textarea from '$lib/components/common/Textarea.svelte';
+	import UserSettingField from './UserSettingField.svelte';
+	import UserSettingRow from './UserSettingRow.svelte';
+	import UserSettingSection from './UserSettingSection.svelte';
 	export let saveSettings: Function;
 	export let getModels: Function;
 
@@ -25,11 +28,11 @@
 	let showAdvanced = false;
 
 	const systemPromptTextareaClass =
-		'w-full resize-vertical rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
-	const compactSystemPromptTextareaClass =
-		'w-full resize-vertical appearance-none bg-transparent text-sm outline-hidden focus:bg-transparent disabled:bg-transparent dark:text-gray-300';
-	const highContrastSelectClass =
-		'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500';
+		'w-full resize-y rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
+	const selectClass =
+		'h-7 w-fit min-w-28 rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-right text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500';
+	const actionButtonClass =
+		'text-xs text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-500 dark:hover:text-white';
 
 	const toggleNotification = async () => {
 		const permission = await Notification.requestPermission();
@@ -216,59 +219,49 @@
 	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('General')}</h2>
 
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
-		<div class="">
-			<div class="text-xs text-gray-400 dark:text-gray-600 mb-2">
-				{$i18n.t('WebUI Settings')}
-			</div>
-
-			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-normal">{$i18n.t('Theme')}</div>
-				<div class="flex items-center relative">
-					<select
-						class={`w-fit pr-8 text-xs text-right ${$settings.highContrastMode ? highContrastSelectClass : 'rounded-sm bg-transparent px-2 py-2 outline-hidden'}`}
-						bind:value={selectedTheme}
-						placeholder={$i18n.t('Select a theme')}
-						on:change={() => themeChangeHandler(selectedTheme)}
-					>
-						<option value="system">⚙️ {$i18n.t('System')}</option>
-						<option value="dark">🌑 {$i18n.t('Dark')}</option>
-						<option value="oled-dark">🌃 {$i18n.t('OLED Dark')}</option>
-						<option value="light">☀️ {$i18n.t('Light')}</option>
-						{#if $config?.features?.enable_easter_eggs}
-							<option value="her">🌷 Her</option>
-						{/if}
-					</select>
-				</div>
-			</div>
-
-			<div class=" flex w-full justify-between">
-				<div class=" self-center text-xs font-normal">{$i18n.t('Language')}</div>
-				<div class="flex items-center relative">
-					<select
-						class={`w-fit pr-8 text-xs text-right ${$settings.highContrastMode ? highContrastSelectClass : 'rounded-sm bg-transparent px-2 py-2 outline-hidden'}`}
-						bind:value={lang}
-						placeholder={$i18n.t('Select a language')}
-						on:change={(e) => {
-							changeLanguage(lang);
-						}}
-					>
-						{#each languages as language}
-							<option value={language['code']}>{language['title']}</option>
-						{/each}
-					</select>
-				</div>
-			</div>
-			{#if $i18n.language === 'en-US' && !($config?.license_metadata ?? false)}
-				<div
-					class="mb-2 text-xs {($settings?.highContrastMode ?? false)
-						? 'text-gray-800 dark:text-gray-100'
-						: 'text-gray-400 dark:text-gray-500'}"
+		<UserSettingSection title={$i18n.t('WebUI Settings')} first>
+			<UserSettingRow
+				label={$i18n.t('Theme')}
+				description={$i18n.t('Choose the color theme used by the interface.')}
+			>
+				<select
+					class={selectClass}
+					bind:value={selectedTheme}
+					placeholder={$i18n.t('Select a theme')}
+					on:change={() => themeChangeHandler(selectedTheme)}
 				>
+					<option value="system">⚙️ {$i18n.t('System')}</option>
+					<option value="dark">🌑 {$i18n.t('Dark')}</option>
+					<option value="oled-dark">🌃 {$i18n.t('OLED Dark')}</option>
+					<option value="light">☀️ {$i18n.t('Light')}</option>
+					{#if $config?.features?.enable_easter_eggs}
+						<option value="her">🌷 Her</option>
+					{/if}
+				</select>
+			</UserSettingRow>
+
+			<UserSettingRow
+				label={$i18n.t('Language')}
+				description={$i18n.t('Choose the language used for interface text.')}
+			>
+				<select
+					class={selectClass}
+					bind:value={lang}
+					placeholder={$i18n.t('Select a language')}
+					on:change={(e) => {
+						changeLanguage(lang);
+					}}
+				>
+					{#each languages as language}
+						<option value={language['code']}>{language['title']}</option>
+					{/each}
+				</select>
+			</UserSettingRow>
+			{#if $i18n.language === 'en-US' && !($config?.license_metadata ?? false)}
+				<div class="-mt-1 text-[0.6875rem] text-gray-400 dark:text-gray-600">
 					Couldn't find your language?
 					<a
-						class="font-normal underline {($settings?.highContrastMode ?? false)
-							? 'text-gray-700 dark:text-gray-200'
-							: 'text-gray-300'}"
+						class="font-normal underline text-gray-400 dark:text-gray-600"
 						href="https://github.com/open-webui/open-webui/blob/main/docs/CONTRIBUTING.md#-translations-and-internationalization"
 						target="_blank"
 					>
@@ -277,69 +270,55 @@
 				</div>
 			{/if}
 
-			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs font-normal">{$i18n.t('Notifications')}</div>
-
-					<button
-						class="p-1 px-3 text-xs flex rounded-sm transition"
-						on:click={() => {
-							toggleNotification();
-						}}
-						type="button"
-						role="switch"
-						aria-checked={notificationEnabled}
-					>
-						{#if notificationEnabled === true}
-							<span class="ml-2 self-center">{$i18n.t('On')}</span>
-						{:else}
-							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
-						{/if}
-					</button>
-				</div>
-			</div>
-		</div>
+			<UserSettingRow
+				label={$i18n.t('Notifications')}
+				description={$i18n.t('Allow browser notifications for completed responses.')}
+			>
+				<button
+					class={actionButtonClass}
+					on:click={() => {
+						toggleNotification();
+					}}
+					type="button"
+					role="switch"
+					aria-checked={notificationEnabled}
+				>
+					{notificationEnabled === true ? $i18n.t('On') : $i18n.t('Off')}
+				</button>
+			</UserSettingRow>
+		</UserSettingSection>
 
 		{#if $user?.role === 'admin' || (($user?.permissions.chat?.controls ?? true) && ($user?.permissions.chat?.system_prompt ?? true))}
-			<hr class="border-gray-100/20 dark:border-white/[0.025] my-3" />
-
-			<div>
-				<div class="text-xs text-gray-400 dark:text-gray-600 my-2.5">
-					{$i18n.t('System Prompt')}
-				</div>
-				<Textarea
-					bind:value={system}
-					className={($settings?.highContrastMode ?? false)
-						? systemPromptTextareaClass
-						: compactSystemPromptTextareaClass}
-					rows="4"
-					placeholder={$i18n.t('Enter system prompt here')}
-				/>
-			</div>
+			<UserSettingSection title={$i18n.t('System Prompt')}>
+				<UserSettingField description={$i18n.t('Set the default system prompt for new chats.')}>
+					<Textarea
+						bind:value={system}
+						className={systemPromptTextareaClass}
+						rows="4"
+						placeholder={$i18n.t('Enter system prompt here')}
+					/>
+				</UserSettingField>
+			</UserSettingSection>
 		{/if}
 
 		{#if $user?.role === 'admin' || (($user?.permissions.chat?.controls ?? true) && ($user?.permissions.chat?.params ?? true))}
-			<div class="mt-2 space-y-3 pr-1.5">
-				<div class="flex justify-between items-center text-sm">
-					<div class="text-xs text-gray-400 dark:text-gray-600">
-						{$i18n.t('Advanced Parameters')}
-					</div>
+			<UserSettingSection title={$i18n.t('Advanced Parameters')}>
+				<UserSettingRow description={$i18n.t('Show or hide custom generation parameters.')}>
+					<span slot="label">{$i18n.t('Model parameters')}</span>
 					<button
-						class=" text-xs font-normal {($settings?.highContrastMode ?? false)
-							? 'text-gray-800 dark:text-gray-100'
-							: 'text-gray-400 dark:text-gray-500'}"
+						class={actionButtonClass}
 						type="button"
 						aria-expanded={showAdvanced}
 						on:click={() => {
 							showAdvanced = !showAdvanced;
 						}}>{showAdvanced ? $i18n.t('Hide') : $i18n.t('Show')}</button
 					>
-				</div>
+				</UserSettingRow>
 
 				{#if showAdvanced}
 					<AdvancedParams admin={$user?.role === 'admin'} custom={true} bind:params />
 				{/if}
-			</div>
+			</UserSettingSection>
 		{/if}
 	</div>
 
diff --git a/src/lib/components/chat/Settings/Integrations.svelte b/src/lib/components/chat/Settings/Integrations.svelte
index f5258c09ec..68a2ddb76a 100644
--- a/src/lib/components/chat/Settings/Integrations.svelte
+++ b/src/lib/components/chat/Settings/Integrations.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
-	import { createEventDispatcher, onMount, getContext } from 'svelte';
+	import { onMount, getContext } from 'svelte';
+	import type { Writable } from 'svelte/store';
+	import type { i18n as i18nType } from 'i18next';
 	import { getToolServersData } from '$lib/apis';
 
-	const dispatch = createEventDispatcher();
-	const i18n = getContext('i18n');
+	const i18n = getContext<Writable<i18nType>>('i18n');
 
 	import { settings, toolServers, terminalServers } from '$lib/stores';
 
@@ -13,17 +14,31 @@
 	import Plus from '$lib/components/icons/Plus.svelte';
 	import Connection from './Tools/Connection.svelte';
 	import Terminals from './Integrations/Terminals.svelte';
+	import UserSettingSection from './UserSettingSection.svelte';
 
 	import AddToolServerModal from '$lib/components/AddToolServerModal.svelte';
 
-	export let saveSettings: Function;
+	type TerminalServerConfig = {
+		url: string;
+		key?: string;
+		name?: string;
+		enabled: boolean;
+		auth_type?: string;
+		path?: string;
+		[key: string]: any;
+	};
 
-	let servers = null;
-	let terminalServerConfigs: { url: string; key: string; name?: string; enabled: boolean }[] = [];
+	type ToolServerConnection = any;
+
+	export let saveSettings: (settings: any) => void | Promise<void>;
+
+	let servers: ToolServerConnection[] | null = null;
+	let terminalServerConfigs: TerminalServerConfig[] = [];
 	let showConnectionModal = false;
+	const helpTextClass = 'text-[0.6875rem] text-gray-400 dark:text-gray-600';
 
-	const addConnectionHandler = async (server) => {
-		servers = [...servers, server];
+	const addConnectionHandler = async (server: ToolServerConnection) => {
+		servers = [...(servers ?? []), server];
 		await updateHandler();
 	};
 
@@ -34,7 +49,7 @@
 		});
 
 		let toolServersData = await getToolServersData($settings?.toolServers ?? []);
-		toolServersData = toolServersData.filter((data) => {
+		toolServersData = toolServersData.filter((data: any) => {
 			if (data.error) {
 				toast.error(
 					$i18n.t(`Failed to connect to {{URL}} OpenAPI tool server`, { URL: data?.url })
@@ -43,10 +58,10 @@
 			}
 			return true;
 		});
-		toolServers.set(toolServersData);
+		toolServers.set(toolServersData as any);
 
 		// Refresh terminal servers store (preserve system terminals)
-		const existingSystemTerminals = ($terminalServers ?? []).filter((t) => t.id);
+		const existingSystemTerminals = (($terminalServers ?? []) as any[]).filter((t) => t.id);
 		const activeTerminals = terminalServerConfigs.filter((s) => s.enabled);
 		if (activeTerminals.length > 0) {
 			let terminalServersData = await getToolServersData(
@@ -58,16 +73,16 @@
 					config: { enable: true }
 				}))
 			);
-			terminalServersData = terminalServersData.filter((data) => data && !data.error);
-			terminalServers.set([...terminalServersData, ...existingSystemTerminals]);
+			terminalServersData = terminalServersData.filter((data: any) => data && !data.error);
+			terminalServers.set([...terminalServersData, ...existingSystemTerminals] as any);
 		} else {
-			terminalServers.set(existingSystemTerminals);
+			terminalServers.set(existingSystemTerminals as any);
 		}
 	};
 
 	onMount(async () => {
 		servers = $settings?.toolServers ?? [];
-		terminalServerConfigs = $settings?.terminalServers ?? [];
+		terminalServerConfigs = ($settings as any)?.terminalServers ?? [];
 	});
 </script>
 
@@ -84,86 +99,75 @@
 
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if servers !== null}
-			<div>
-				<div class="pr-1.5">
-					<div class="">
-						<div class="flex justify-between items-center mb-0.5">
-							<div class="text-xs text-gray-400 dark:text-gray-600">
-								{$i18n.t('Manage Tool Servers')}
-							</div>
-
-							<Tooltip content={$i18n.t('Add Connection')}>
-								<button
-									aria-label={$i18n.t('Add Connection')}
-									class="px-1"
-									on:click={() => (showConnectionModal = true)}
-									type="button"
-								>
-									<Plus />
-								</button>
-							</Tooltip>
+			<UserSettingSection title={$i18n.t('Tools')} first>
+				<div>
+					<div class="mb-2 flex items-center justify-between">
+						<div class="text-xs text-gray-600 dark:text-gray-400">
+							{$i18n.t('External Tool Servers')}
 						</div>
 
-						<div class="flex flex-col gap-1.5">
-							{#each servers as server, idx}
-								<Connection
-									bind:connection={server}
-									direct
-									onSubmit={() => updateHandler()}
-									onDelete={() => {
-										servers = servers.filter((_, i) => i !== idx);
-										updateHandler();
-									}}
-								/>
-							{/each}
-						</div>
+						<Tooltip content={$i18n.t('Add Connection')}>
+							<button
+								aria-label={$i18n.t('Add Connection')}
+								class="flex size-6 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-black/5 hover:text-gray-900 dark:text-gray-600 dark:hover:bg-white/5 dark:hover:text-white"
+								on:click={() => (showConnectionModal = true)}
+								type="button"
+							>
+								<Plus />
+							</button>
+						</Tooltip>
 					</div>
 
-					<div class="my-1.5">
-						<div
-							class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-						>
-							{$i18n.t('Connect to your own OpenAPI compatible external tool servers.')}
-							<br />
-							{$i18n.t(
-								'CORS must be properly configured by the provider to allow requests from Open WebUI.'
-							)}
-						</div>
+					<div class="flex flex-col gap-1">
+						{#each servers as server, idx}
+							<Connection
+								bind:connection={server}
+								direct
+								onSubmit={() => updateHandler()}
+								onDelete={() => {
+									servers = (servers ?? []).filter((_, i) => i !== idx);
+									updateHandler();
+								}}
+							/>
+						{/each}
 					</div>
 
-					<div class="text-xs text-gray-600 dark:text-gray-300 mb-2">
+					{#if (servers ?? []).length === 0}
+						<div class={helpTextClass}>
+							{$i18n.t('No tool server connections configured.')}
+						</div>
+					{/if}
+
+					<div class="mt-1 {helpTextClass}">
+						{$i18n.t('Connect to your own OpenAPI compatible external tool servers.')}
+					</div>
+					<div class={helpTextClass}>
+						{$i18n.t(
+							'CORS must be properly configured by the provider to allow requests from Open WebUI.'
+						)}
 						<a
-							class="underline"
+							class="ml-1 text-gray-500 underline hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300"
 							href="https://github.com/open-webui/openapi-servers"
 							target="_blank">{$i18n.t('Learn more about OpenAPI tool servers.')} ↗</a
 						>
 					</div>
 				</div>
+			</UserSettingSection>
 
-				<hr class="border-gray-100/50 dark:border-gray-850/50 my-4" />
+			<UserSettingSection title={$i18n.t('Terminal')}>
+				<Terminals bind:servers={terminalServerConfigs} onChange={() => updateHandler()} />
 
-				<div class="pr-1.5">
-					<Terminals bind:servers={terminalServerConfigs} onChange={() => updateHandler()} />
-
-					<div class="mt-1.5">
-						<div
-							class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-						>
-							{$i18n.t(
-								'Connect to Open Terminal instances to browse files and use them as always-on tools. Only one can be active at a time.'
-							)}
-						</div>
-
-						<div class="text-xs text-gray-600 dark:text-gray-300 mt-1">
-							<a
-								class="underline"
-								href="https://github.com/open-webui/open-terminal"
-								target="_blank">{$i18n.t('Learn more about Open Terminal')} ↗</a
-							>
-						</div>
-					</div>
+				<div class="mt-1 {helpTextClass}">
+					{$i18n.t(
+						'Connect to Open Terminal instances to browse files and use them as always-on tools. Only one can be active at a time.'
+					)}
 				</div>
-			</div>
+				<a
+					class="mt-0.5 block text-[0.6875rem] text-gray-500 underline hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300"
+					href="https://github.com/open-webui/open-terminal"
+					target="_blank">{$i18n.t('Learn more about Open Terminal')} ↗</a
+				>
+			</UserSettingSection>
 		{:else}
 			<div class="flex h-full justify-center">
 				<div class="my-auto">
diff --git a/src/lib/components/chat/Settings/Integrations/Terminals.svelte b/src/lib/components/chat/Settings/Integrations/Terminals.svelte
index 6c9442812a..bc9ea39ce3 100644
--- a/src/lib/components/chat/Settings/Integrations/Terminals.svelte
+++ b/src/lib/components/chat/Settings/Integrations/Terminals.svelte
@@ -1,18 +1,30 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
-	const i18n = getContext('i18n');
+	import type { Writable } from 'svelte/store';
+	import type { i18n as i18nType } from 'i18next';
+
+	const i18n = getContext<Writable<i18nType>>('i18n');
 
 	import Plus from '$lib/components/icons/Plus.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Connection from './Terminals/Connection.svelte';
 	import AddTerminalServerModal from '$lib/components/AddTerminalServerModal.svelte';
 
-	export let servers = [];
-	export let onChange: (servers: typeof servers) => void = () => {};
+	type TerminalServerConfig = {
+		url: string;
+		key?: string;
+		name?: string;
+		path?: string;
+		enabled: boolean;
+		[key: string]: any;
+	};
+
+	export let servers: TerminalServerConfig[] = [];
+	export let onChange: (servers: TerminalServerConfig[]) => void = () => {};
 
 	let showAddModal = false;
 
-	const addServer = (server: (typeof servers)[0]) => {
+	const addServer = (server: TerminalServerConfig) => {
 		servers = [...servers, server];
 		onChange(servers);
 	};
@@ -27,7 +39,7 @@
 		onChange(servers);
 	};
 
-	const updateServer = (idx: number, updated: (typeof servers)[0]) => {
+	const updateServer = (idx: number, updated: TerminalServerConfig) => {
 		servers = servers.map((s, i) => (i === idx ? updated : s));
 		onChange(servers);
 	};
@@ -38,16 +50,20 @@
 	};
 </script>
 
-<AddTerminalServerModal direct bind:show={showAddModal} onSubmit={(server) => addServer(server)} />
+<AddTerminalServerModal
+	direct
+	bind:show={showAddModal}
+	onSubmit={(server: TerminalServerConfig) => addServer(server)}
+/>
 
 <div>
-	<div class="flex justify-between items-center mb-1">
+	<div class="flex justify-between items-center mb-2">
 		<div class="flex items-center gap-2">
-			<div class="font-normal">{$i18n.t('Open Terminal')}</div>
+			<div class="text-xs text-gray-600 dark:text-gray-400">{$i18n.t('Open Terminal')}</div>
 		</div>
 		<Tooltip content={$i18n.t('Add Connection')}>
 			<button
-				class="px-1"
+				class="flex size-6 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-black/5 hover:text-gray-900 dark:text-gray-600 dark:hover:bg-white/5 dark:hover:text-white"
 				on:click={() => (showAddModal = true)}
 				type="button"
 				aria-label={$i18n.t('Add Connection')}
@@ -70,16 +86,8 @@
 	</div>
 
 	{#if servers.length === 0}
-		<div class="text-xs text-gray-400 dark:text-gray-500">
+		<div class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
 			{$i18n.t('No terminal connections configured.')}
-			<a
-				href="https://github.com/open-webui/open-terminal"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="underline hover:text-gray-700 dark:hover:text-gray-200"
-			>
-				{$i18n.t('Learn more')} ↗
-			</a>
 		</div>
 	{/if}
 </div>
diff --git a/src/lib/components/chat/Settings/Integrations/Terminals/Connection.svelte b/src/lib/components/chat/Settings/Integrations/Terminals/Connection.svelte
index bd1c81b4ec..93db7fd2dc 100644
--- a/src/lib/components/chat/Settings/Integrations/Terminals/Connection.svelte
+++ b/src/lib/components/chat/Settings/Integrations/Terminals/Connection.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
-	const i18n = getContext('i18n');
+	import type { Writable } from 'svelte/store';
+	import type { i18n as i18nType } from 'i18next';
+
+	const i18n = getContext<Writable<i18nType>>('i18n');
 
 	import Switch from '$lib/components/common/Switch.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
@@ -8,8 +11,23 @@
 	import AddTerminalServerModal from '$lib/components/AddTerminalServerModal.svelte';
 	import Cloud from '$lib/components/icons/Cloud.svelte';
 
-	export let connection = { url: '', key: '', name: '', path: '/openapi.json', enabled: false };
-	export let onSubmit: (c: typeof connection) => void = () => {};
+	type TerminalServerConfig = {
+		url: string;
+		key?: string;
+		name?: string;
+		path?: string;
+		enabled: boolean;
+		[key: string]: any;
+	};
+
+	export let connection: TerminalServerConfig = {
+		url: '',
+		key: '',
+		name: '',
+		path: '/openapi.json',
+		enabled: false
+	};
+	export let onSubmit: (c: TerminalServerConfig) => void = () => {};
 	export let onDelete: () => void = () => {};
 	export let onEnable: () => void = () => {};
 	export let onDisable: () => void = () => {};
@@ -26,7 +44,7 @@
 		onDelete();
 		showConfigModal = false;
 	}}
-	onSubmit={(c) => {
+	onSubmit={(c: TerminalServerConfig) => {
 		connection = c;
 		onSubmit(c);
 	}}
@@ -42,7 +60,7 @@
 					<Cloud className="size-4" strokeWidth="1.5" />
 				</Tooltip>
 
-				<div class="outline-hidden w-full bg-transparent text-sm">
+				<div class="outline-hidden w-full bg-transparent text-xs text-gray-700 dark:text-gray-300">
 					{connection.name || connection.url || $i18n.t('New Terminal')}
 				</div>
 			</div>
@@ -52,7 +70,7 @@
 	<div class="flex gap-1 items-center">
 		<Tooltip content={$i18n.t('Configure')}>
 			<button
-				class="self-center p-1 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg transition"
+				class="self-center p-1 bg-transparent hover:bg-black/5 dark:hover:bg-white/5 rounded-lg transition"
 				on:click={() => {
 					showConfigModal = true;
 				}}
diff --git a/src/lib/components/chat/Settings/Interface.svelte b/src/lib/components/chat/Settings/Interface.svelte
index c171af9fd3..ed118208f5 100644
--- a/src/lib/components/chat/Settings/Interface.svelte
+++ b/src/lib/components/chat/Settings/Interface.svelte
@@ -106,6 +106,14 @@
 	let showManageImageCompressionModal = false;
 
 	let textScale = null;
+	const settingRowClass = 'flex items-center justify-between gap-2.5';
+	const settingLabelClass = 'min-w-0 text-xs text-gray-600 dark:text-gray-400';
+	const settingControlClass = 'flex shrink-0 items-center justify-end gap-1.5';
+	const sectionHeadingClass = 'mt-2 text-xs text-gray-400 dark:text-gray-600';
+	const firstSectionHeadingClass = 'text-xs text-gray-400 dark:text-gray-600';
+	const settingDescriptionClass = '-mt-1 text-[0.6875rem] text-gray-400 dark:text-gray-600';
+	const actionButtonClass =
+		'text-xs text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-500 dark:hover:text-white';
 
 	const toggleLandingPageMode = async () => {
 		landingPageMode = landingPageMode === '' ? 'chat' : '';
@@ -301,7 +309,7 @@
 
 <form
 	id="tab-interface"
-	class="flex flex-col h-full justify-between space-y-3 text-sm"
+	class="flex flex-col h-full justify-between text-sm"
 	on:submit|preventDefault={() => {
 		updateInterfaceHandler();
 		dispatch('save');
@@ -337,19 +345,19 @@
 		}}
 	/>
 
-	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5 space-y-3">
-		<div>
-			<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2">{$i18n.t('UI')}</h3>
+	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
+		<div class="flex flex-col gap-2.5">
+			<h3 class={firstSectionHeadingClass}>{$i18n.t('UI')}</h3>
 
 			<div>
-				<div class="py-0.5 flex w-full justify-between">
-					<label id="ui-scale-label" class=" self-center text-xs" for="ui-scale-slider">
+				<div class={settingRowClass}>
+					<label id="ui-scale-label" class={settingLabelClass} for="ui-scale-slider">
 						{$i18n.t('UI Scale')}
 					</label>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<button
-							class="text-xs"
+							class={actionButtonClass}
 							aria-live="polite"
 							type="button"
 							on:click={() => {
@@ -419,15 +427,18 @@
 						</button>
 					</div>
 				{/if}
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Set a local zoom level for the app interface.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="high-contrast-mode-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="high-contrast-mode-label" class={settingLabelClass}>
 						{$i18n.t('High Contrast Mode')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="high-contrast-mode-label"
 							tooltip={true}
@@ -438,15 +449,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Increase contrast for controls and input surfaces.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="use-chat-title-as-tab-title-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="use-chat-title-as-tab-title-label" class={settingLabelClass}>
 						{$i18n.t('Display Chat Title in Tab')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="use-chat-title-as-tab-title-label"
 							tooltip={true}
@@ -457,15 +471,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Use the active chat title as the browser tab title.')}
+				</p>
 			</div>
 
 			<div>
-				<div class="py-0.5 flex w-full justify-between">
-					<div id="notification-sound-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="notification-sound-label" class={settingLabelClass}>
 						{$i18n.t('Notification Sound')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="notification-sound-label"
 							tooltip={true}
@@ -476,16 +493,19 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Play a sound when new chat activity arrives.')}
+				</p>
 			</div>
 
 			{#if notificationSound}
 				<div>
-					<div class=" py-0.5 flex w-full justify-between">
-						<div id="play-notification-sound-label" class=" self-center text-xs">
+					<div class={settingRowClass}>
+						<div id="play-notification-sound-label" class={settingLabelClass}>
 							{$i18n.t('Always Play Notification Sound')}
 						</div>
 
-						<div class="flex items-center gap-2 p-1">
+						<div class={settingControlClass}>
 							<Switch
 								ariaLabelledbyId="play-notification-sound-label"
 								tooltip={true}
@@ -496,14 +516,17 @@
 							/>
 						</div>
 					</div>
+					<p class={settingDescriptionClass}>
+						{$i18n.t('Play notification sounds even when the app is focused.')}
+					</p>
 				</div>
 			{/if}
 
 			<div>
-				<div id="allow-user-location-label" class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs">{$i18n.t('Allow User Location')}</div>
+				<div id="allow-user-location-label" class={settingRowClass}>
+					<div class={settingLabelClass}>{$i18n.t('Allow User Location')}</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="allow-user-location-label"
 							tooltip={true}
@@ -514,15 +537,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Share your current location with features that can use it.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="haptic-feedback-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="haptic-feedback-label" class={settingLabelClass}>
 						{$i18n.t('Haptic Feedback')} ({$i18n.t('Android')})
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="haptic-feedback-label"
 							tooltip={true}
@@ -533,15 +559,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Use device vibration feedback on supported Android devices.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="copy-formatted-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="copy-formatted-label" class={settingLabelClass}>
 						{$i18n.t('Copy Formatted Text')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="copy-formatted-label"
 							tooltip={true}
@@ -552,16 +581,19 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Copy rich formatted content instead of plain text.')}
+				</p>
 			</div>
 
 			{#if $user?.role === 'admin'}
 				<div>
-					<div class=" py-0.5 flex w-full justify-between">
-						<div id="toast-notifications-label" class=" self-center text-xs">
+					<div class={settingRowClass}>
+						<div id="toast-notifications-label" class={settingLabelClass}>
 							{$i18n.t('Toast Notifications for New Updates')}
 						</div>
 
-						<div class="flex items-center gap-2 p-1">
+						<div class={settingControlClass}>
 							<Switch
 								ariaLabelledbyId="toast-notifications-label"
 								tooltip={true}
@@ -572,15 +604,18 @@
 							/>
 						</div>
 					</div>
+					<p class={settingDescriptionClass}>
+						{$i18n.t('Show update toasts to admins when new versions are available.')}
+					</p>
 				</div>
 
 				<div>
-					<div class=" py-0.5 flex w-full justify-between">
-						<div id="whats-new-label" class=" self-center text-xs">
+					<div class={settingRowClass}>
+						<div id="whats-new-label" class={settingLabelClass}>
 							{$i18n.t(`Show "What's New" Modal on Login`)}
 						</div>
 
-						<div class="flex items-center gap-2 p-1">
+						<div class={settingControlClass}>
 							<Switch
 								ariaLabelledbyId="whats-new-label"
 								tooltip={true}
@@ -591,18 +626,21 @@
 							/>
 						</div>
 					</div>
+					<p class={settingDescriptionClass}>
+						{$i18n.t('Open the changelog modal after sign-in when enabled.')}
+					</p>
 				</div>
 			{/if}
 
-			<div class=" my-2 text-sm font-normal">{$i18n.t('Chat')}</div>
+			<div class={sectionHeadingClass}>{$i18n.t('Chat')}</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="enable-message-queue-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="enable-message-queue-label" class={settingLabelClass}>
 						{$i18n.t('Enable Message Queue')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="enable-message-queue-label"
 							tooltip={true}
@@ -613,21 +651,24 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Queue outgoing messages instead of interrupting active responses.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="chat-direction-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="chat-direction-label" class={settingLabelClass}>
 						{$i18n.t('Chat Direction')}
 					</div>
 
 					<button
 						aria-labelledby="chat-direction-label chat-direction-mode"
-						class="p-1 px-3 text-xs flex rounded-sm transition"
+						class={actionButtonClass}
 						on:click={toggleChangeChatDirection}
 						type="button"
 					>
-						<span class="ml-2 self-center" id="chat-direction-mode">
+						<span id="chat-direction-mode">
 							{chatDirection === 'LTR'
 								? $i18n.t('LTR')
 								: chatDirection === 'RTL'
@@ -636,38 +677,44 @@
 						</span>
 					</button>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Choose automatic, left-to-right, or right-to-left text flow.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="landing-page-mode-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="landing-page-mode-label" class={settingLabelClass}>
 						{$i18n.t('Landing Page Mode')}
 					</div>
 
 					<button
 						aria-labelledby="landing-page-mode-label notification-sound-state"
-						class="p-1 px-3 text-xs flex rounded-sm transition"
+						class={actionButtonClass}
 						on:click={() => {
 							toggleLandingPageMode();
 						}}
 						type="button"
 					>
-						<span class="ml-2 self-center" id="notification-sound-state"
+						<span id="notification-sound-state"
 							>{landingPageMode === '' ? $i18n.t('Default') : $i18n.t('Chat')}</span
 						>
 					</button>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Choose whether the app opens to the default home or chat view.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="chat-background-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="chat-background-label" class={settingLabelClass}>
 						{$i18n.t('Chat Background Image')}
 					</div>
 
 					<button
 						aria-labelledby="chat-background-label background-image-url-state"
-						class="p-1 px-3 text-xs flex rounded-sm transition"
+						class={actionButtonClass}
 						on:click={() => {
 							if (backgroundImageUrl !== null) {
 								backgroundImageUrl = null;
@@ -678,20 +725,23 @@
 						}}
 						type="button"
 					>
-						<span class="ml-2 self-center" id="background-image-url-state"
+						<span id="background-image-url-state"
 							>{backgroundImageUrl !== null ? $i18n.t('Reset') : $i18n.t('Upload')}</span
 						>
 					</button>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Upload or reset the image shown behind chat content.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="chat-bubble-ui-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="chat-bubble-ui-label" class={settingLabelClass}>
 						{$i18n.t('Chat Bubble UI')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							tooltip={true}
 							ariaLabelledbyId="chat-bubble-ui-label"
@@ -702,16 +752,19 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Render messages in compact bubble containers.')}
+				</p>
 			</div>
 
 			{#if !$settings.chatBubble}
 				<div>
-					<div class=" py-0.5 flex w-full justify-between">
-						<div id="chat-bubble-username-label" class=" self-center text-xs">
+					<div class={settingRowClass}>
+						<div id="chat-bubble-username-label" class={settingLabelClass}>
 							{$i18n.t('Display the Username Instead of You in the Chat')}
 						</div>
 
-						<div class="flex items-center gap-2 p-1">
+						<div class={settingControlClass}>
 							<Switch
 								ariaLabelledbyId="chat-bubble-username-label"
 								tooltip={true}
@@ -722,16 +775,19 @@
 							/>
 						</div>
 					</div>
+					<p class={settingDescriptionClass}>
+						{$i18n.t('Show your username label instead of You in chat bubbles.')}
+					</p>
 				</div>
 			{/if}
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="widescreen-mode-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="widescreen-mode-label" class={settingLabelClass}>
 						{$i18n.t('Widescreen Mode')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="widescreen-mode-label"
 							tooltip={true}
@@ -742,16 +798,19 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Use a wider chat layout on large displays.')}
+				</p>
 			</div>
 
 			{#if $user.role === 'admin' || $user?.permissions?.chat?.temporary}
 				<div>
-					<div class=" py-0.5 flex w-full justify-between">
-						<div id="temp-chat-default-label" class=" self-center text-xs">
+					<div class={settingRowClass}>
+						<div id="temp-chat-default-label" class={settingLabelClass}>
 							{$i18n.t('Temporary Chat by Default')}
 						</div>
 
-						<div class="flex items-center gap-2 p-1">
+						<div class={settingControlClass}>
 							<Switch
 								ariaLabelledbyId="temp-chat-default-label"
 								tooltip={true}
@@ -762,16 +821,19 @@
 							/>
 						</div>
 					</div>
+					<p class={settingDescriptionClass}>
+						{$i18n.t('Start new chats as temporary unless changed.')}
+					</p>
 				</div>
 			{/if}
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="fade-streaming-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="fade-streaming-label" class={settingLabelClass}>
 						{$i18n.t('Fade Effect for Streaming Text')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="fade-streaming-label"
 							tooltip={true}
@@ -782,15 +844,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Fade streaming text as it arrives.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="render-markdown-user-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="render-markdown-user-label" class={settingLabelClass}>
 						{$i18n.t('Render Markdown in User Messages')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="render-markdown-user-label"
 							tooltip={true}
@@ -801,15 +866,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Format Markdown syntax in your own messages.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="render-markdown-assistant-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="render-markdown-assistant-label" class={settingLabelClass}>
 						{$i18n.t('Render Markdown in Assistant Messages')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="render-markdown-assistant-label"
 							tooltip={true}
@@ -820,15 +888,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Format Markdown syntax in assistant responses.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="auto-generation-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="auto-generation-label" class={settingLabelClass}>
 						{$i18n.t('Title Auto-Generation')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="auto-generation-label"
 							tooltip={true}
@@ -839,15 +910,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Generate chat titles automatically from conversation content.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs" id="follow-up-auto-generation-label">
+				<div class={settingRowClass}>
+					<div class={settingLabelClass} id="follow-up-auto-generation-label">
 						{$i18n.t('Follow-Up Auto-Generation')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="follow-up-auto-generation-label"
 							tooltip={true}
@@ -858,15 +932,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Generate suggested follow-up prompts after responses.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="chat-tags-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="chat-tags-label" class={settingLabelClass}>
 						{$i18n.t('Chat Tags Auto-Generation')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="chat-tags-label"
 							tooltip={true}
@@ -877,15 +954,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Generate tags for chats automatically.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="auto-copy-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="auto-copy-label" class={settingLabelClass}>
 						{$i18n.t('Auto-Copy Response to Clipboard')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="auto-copy-label"
 							tooltip={true}
@@ -896,15 +976,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Copy the latest assistant response when it completes.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="insert-suggestion-prompt-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="insert-suggestion-prompt-label" class={settingLabelClass}>
 						{$i18n.t('Insert Suggestion Prompt to Input')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="insert-suggestion-prompt-label"
 							tooltip={true}
@@ -915,15 +998,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Place selected suggestion text into the composer.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="keep-follow-up-prompts-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="keep-follow-up-prompts-label" class={settingLabelClass}>
 						{$i18n.t('Keep Follow-Up Prompts in Chat')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="keep-follow-up-prompts-label"
 							tooltip={true}
@@ -934,15 +1020,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Keep generated follow-up prompts visible in the chat.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="insert-follow-up-prompt-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="insert-follow-up-prompt-label" class={settingLabelClass}>
 						{$i18n.t('Insert Follow-Up Prompt to Input')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="insert-follow-up-prompt-label"
 							tooltip={true}
@@ -953,15 +1042,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Insert selected follow-up prompts directly into the composer.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="regenerate-menu-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="regenerate-menu-label" class={settingLabelClass}>
 						{$i18n.t('Regenerate Menu')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="regenerate-menu-label"
 							tooltip={true}
@@ -972,15 +1064,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Show the regenerate action menu for assistant responses.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="always-collapse-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="always-collapse-label" class={settingLabelClass}>
 						{$i18n.t('Always Collapse Code Blocks')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="always-collapse-label"
 							tooltip={true}
@@ -991,15 +1086,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Collapse code blocks by default.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="always-expand-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="always-expand-label" class={settingLabelClass}>
 						{$i18n.t('Always Expand Details')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="always-expand-label"
 							tooltip={true}
@@ -1010,15 +1108,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Open detail blocks by default.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="render-markdown-in-previews-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="render-markdown-in-previews-label" class={settingLabelClass}>
 						{$i18n.t('Render Markdown in Previews')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="render-markdown-in-previews-label"
 							tooltip={true}
@@ -1029,15 +1130,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Format Markdown in previews and compact content surfaces.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="keep-followup-prompts-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="keep-followup-prompts-label" class={settingLabelClass}>
 						{$i18n.t('Display Multi-model Responses in Tabs')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="keep-followup-prompts-label"
 							tooltip={true}
@@ -1048,15 +1152,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Group multi-model responses into tabs.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="scroll-on-branch-change-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="scroll-on-branch-change-label" class={settingLabelClass}>
 						{$i18n.t('Scroll On Branch Change')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="scroll-on-branch-change-label"
 							tooltip={true}
@@ -1067,15 +1174,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Scroll to the active branch when switching response branches.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="show-files-on-terminal-select-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="show-files-on-terminal-select-label" class={settingLabelClass}>
 						{$i18n.t('Show Files on Terminal Select')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="show-files-on-terminal-select-label"
 							tooltip={true}
@@ -1086,15 +1196,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Open the file browser after selecting a terminal.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="stylized-pdf-export-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="stylized-pdf-export-label" class={settingLabelClass}>
 						{$i18n.t('Stylized PDF Export')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="stylized-pdf-export-label"
 							tooltip={true}
@@ -1105,18 +1218,21 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Use styled formatting when exporting chats to PDF.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<label id="floating-action-buttons-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<label id="floating-action-buttons-label" class={settingLabelClass}>
 						{$i18n.t('Floating Quick Actions')}
 					</label>
 
-					<div class="flex items-center gap-3 p-1">
+					<div class="flex shrink-0 items-center gap-3">
 						{#if showFloatingActionButtons}
 							<button
-								class="text-xs text-gray-700 dark:text-gray-400 underline"
+								class={actionButtonClass}
 								type="button"
 								aria-label={$i18n.t('Open Modal To Manage Floating Quick Actions')}
 								on:click={() => {
@@ -1137,61 +1253,70 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Show the floating quick-action toolbar in chat.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="web-search-in-chat-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="web-search-in-chat-label" class={settingLabelClass}>
 						{$i18n.t('Web Search in Chat')}
 					</div>
 
 					<button
 						aria-labelledby="web-search-in-chat-label web-search-state"
-						class="p-1 px-3 text-xs flex rounded-sm transition"
+						class={actionButtonClass}
 						on:click={() => {
 							toggleWebSearch();
 						}}
 						type="button"
 					>
-						<span class="ml-2 self-center" id="web-search-state"
+						<span id="web-search-state"
 							>{webSearch === 'always' ? $i18n.t('Always') : $i18n.t('Default')}</span
 						>
 					</button>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Set web search availability for new chats.')}
+				</p>
 			</div>
 
-			<div class=" my-2 text-sm font-normal">{$i18n.t('Input')}</div>
+			<div class={sectionHeadingClass}>{$i18n.t('Input')}</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="enter-key-behavior-label ctrl-enter-to-send-state" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="enter-key-behavior-label ctrl-enter-to-send-state" class={settingLabelClass}>
 						{$i18n.t('Enter Key Behavior')}
 					</div>
 
 					<button
 						aria-labelledby="enter-key-behavior-label"
-						class="p-1 px-3 text-xs flex rounded transition"
+						class={actionButtonClass}
 						on:click={() => {
 							togglectrlEnterToSend();
 						}}
 						type="button"
 					>
-						<span class="ml-2 self-center" id="ctrl-enter-to-send-state"
+						<span id="ctrl-enter-to-send-state"
 							>{ctrlEnterToSend === true
 								? $i18n.t('Ctrl+Enter to Send')
 								: $i18n.t('Enter to Send')}</span
 						>
 					</button>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Choose whether Enter sends immediately or uses Ctrl+Enter.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="rich-input-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="rich-input-label" class={settingLabelClass}>
 						{$i18n.t('Rich Text Input for Chat')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							tooltip={true}
 							ariaLabelledbyId="rich-input-label"
@@ -1202,16 +1327,19 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Use the rich composer instead of a plain textarea.')}
+				</p>
 			</div>
 
 			{#if $config?.features?.enable_autocomplete_generation}
 				<div>
-					<div class=" py-0.5 flex w-full justify-between">
-						<div id="prompt-autocompletion-label" class=" self-center text-xs">
+					<div class={settingRowClass}>
+						<div id="prompt-autocompletion-label" class={settingLabelClass}>
 							{$i18n.t('Prompt Autocompletion')}
 						</div>
 
-						<div class="flex items-center gap-2 p-1">
+						<div class={settingControlClass}>
 							<Switch
 								ariaLabelledbyId="prompt-autocompletion-label"
 								tooltip={true}
@@ -1222,17 +1350,20 @@
 							/>
 						</div>
 					</div>
+					<p class={settingDescriptionClass}>
+						{$i18n.t('Suggest completions while composing prompts.')}
+					</p>
 				</div>
 			{/if}
 
 			{#if richTextInput}
 				<div>
-					<div class=" py-0.5 flex w-full justify-between">
-						<div id="show-formatting-toolbar-label" class=" self-center text-xs">
+					<div class={settingRowClass}>
+						<div id="show-formatting-toolbar-label" class={settingLabelClass}>
 							{$i18n.t('Show Formatting Toolbar')}
 						</div>
 
-						<div class="flex items-center gap-2 p-1">
+						<div class={settingControlClass}>
 							<Switch
 								ariaLabelledbyId="show-formatting-toolbar-label"
 								tooltip={true}
@@ -1243,15 +1374,18 @@
 							/>
 						</div>
 					</div>
+					<p class={settingDescriptionClass}>
+						{$i18n.t('Show formatting controls in the rich text composer.')}
+					</p>
 				</div>
 
 				<div>
-					<div class=" py-0.5 flex w-full justify-between">
-						<div id="insert-prompt-as-rich-text-label" class=" self-center text-xs">
+					<div class={settingRowClass}>
+						<div id="insert-prompt-as-rich-text-label" class={settingLabelClass}>
 							{$i18n.t('Insert Prompt as Rich Text')}
 						</div>
 
-						<div class="flex items-center gap-2 p-1">
+						<div class={settingControlClass}>
 							<Switch
 								ariaLabelledbyId="insert-prompt-as-rich-text-label"
 								tooltip={true}
@@ -1262,16 +1396,19 @@
 							/>
 						</div>
 					</div>
+					<p class={settingDescriptionClass}>
+						{$i18n.t('Paste inserted prompts as rich text when possible.')}
+					</p>
 				</div>
 			{/if}
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="paste-large-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="paste-large-label" class={settingLabelClass}>
 						{$i18n.t('Paste Large Text as File')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							tooltip={true}
 							ariaLabelledbyId="paste-large-label"
@@ -1282,17 +1419,20 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Convert long pasted text into a file attachment.')}
+				</p>
 			</div>
 
-			<div class=" my-2 text-sm font-normal">{$i18n.t('Artifacts')}</div>
+			<div class={sectionHeadingClass}>{$i18n.t('Artifacts')}</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="detect-artifacts-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="detect-artifacts-label" class={settingLabelClass}>
 						{$i18n.t('Detect Artifacts Automatically')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="detect-artifacts-label"
 							tooltip={true}
@@ -1303,15 +1443,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Detect generated artifacts and show them in the artifact workspace.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="iframe-sandbox-allow-same-origin-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="iframe-sandbox-allow-same-origin-label" class={settingLabelClass}>
 						{$i18n.t('iframe Sandbox Allow Same Origin')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="iframe-sandbox-allow-same-origin-label"
 							tooltip={true}
@@ -1322,15 +1465,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Allow artifacts to access same-origin browser APIs inside the sandbox.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="iframe-sandbox-allow-forms-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="iframe-sandbox-allow-forms-label" class={settingLabelClass}>
 						{$i18n.t('iframe Sandbox Allow Forms')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="iframe-sandbox-allow-forms-label"
 							tooltip={true}
@@ -1341,17 +1487,20 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Allow forms inside sandboxed artifact iframes.')}
+				</p>
 			</div>
 
-			<div class=" my-2 text-sm font-normal">{$i18n.t('Voice')}</div>
+			<div class={sectionHeadingClass}>{$i18n.t('Voice')}</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs" id="allow-voice-interruption-in-call-label">
+				<div class={settingRowClass}>
+					<div class={settingLabelClass} id="allow-voice-interruption-in-call-label">
 						{$i18n.t('Allow Voice Interruption in Call')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="allow-voice-interruption-in-call-label"
 							tooltip={true}
@@ -1362,15 +1511,18 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Let speech interrupt the assistant during a voice call.')}
+				</p>
 			</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="display-emoji-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="display-emoji-label" class={settingLabelClass}>
 						{$i18n.t('Display Emoji in Call')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class={settingControlClass}>
 						<Switch
 							ariaLabelledbyId="display-emoji-label"
 							tooltip={true}
@@ -1381,20 +1533,23 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Show emoji feedback in the call interface.')}
+				</p>
 			</div>
 
-			<div class=" my-2 text-sm font-normal">{$i18n.t('File')}</div>
+			<div class={sectionHeadingClass}>{$i18n.t('File')}</div>
 
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="image-compression-label" class=" self-center text-xs">
+				<div class={settingRowClass}>
+					<div id="image-compression-label" class={settingLabelClass}>
 						{$i18n.t('Image Compression')}
 					</div>
 
-					<div class="flex items-center gap-3 p-1">
+					<div class="flex shrink-0 items-center gap-3">
 						{#if imageCompression}
 							<button
-								class="text-xs text-gray-700 dark:text-gray-400 underline"
+								class={actionButtonClass}
 								type="button"
 								aria-label={$i18n.t('Open Modal To Manage Image Compression')}
 								on:click={() => {
@@ -1415,16 +1570,19 @@
 						/>
 					</div>
 				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t('Compress uploaded images before sending or storage.')}
+				</p>
 			</div>
 
 			{#if imageCompression}
 				<div>
-					<div class=" py-0.5 flex w-full justify-between">
-						<div id="image-compression-in-channels-label" class=" self-center text-xs">
+					<div class={settingRowClass}>
+						<div id="image-compression-in-channels-label" class={settingLabelClass}>
 							{$i18n.t('Compress Images in Channels')}
 						</div>
 
-						<div class="flex items-center gap-2 p-1">
+						<div class={settingControlClass}>
 							<Switch
 								ariaLabelledbyId="image-compression-in-channels-label"
 								tooltip={true}
@@ -1435,6 +1593,9 @@
 							/>
 						</div>
 					</div>
+					<p class={settingDescriptionClass}>
+						{$i18n.t('Apply image compression to channel uploads too.')}
+					</p>
 				</div>
 			{/if}
 		</div>
diff --git a/src/lib/components/chat/Settings/Interface/ManageFloatingActionButtonsModal.svelte b/src/lib/components/chat/Settings/Interface/ManageFloatingActionButtonsModal.svelte
index 858f5d1a1e..410e541169 100644
--- a/src/lib/components/chat/Settings/Interface/ManageFloatingActionButtonsModal.svelte
+++ b/src/lib/components/chat/Settings/Interface/ManageFloatingActionButtonsModal.svelte
@@ -10,6 +10,7 @@
 	import Textarea from '$lib/components/common/Textarea.svelte';
 	import Switch from '$lib/components/common/Switch.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import { settings } from '$lib/stores';
 
 	export let show = false;
 	export let onSave = () => {};
@@ -27,9 +28,9 @@
 	onMount(() => {});
 </script>
 
-<Modal size="sm" bind:show>
+<Modal size="sm" bind:show className="bg-white dark:bg-gray-900 rounded-4xl">
 	<div>
-		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
+		<div class=" flex justify-between text-gray-900 dark:text-white px-4 pt-3 pb-1">
 			<h1 class="text-sm font-medium self-center">
 				{$i18n.t('Quick Actions')}
 			</h1>
@@ -44,7 +45,9 @@
 			</button>
 		</div>
 
-		<div class="flex flex-col md:flex-row w-full px-4 pb-4 md:space-x-4 dark:text-gray-200">
+		<div
+			class="flex flex-col md:flex-row w-full px-4 pb-4 md:space-x-4 text-gray-600 dark:text-gray-400"
+		>
 			<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
 				<form
 					class="flex flex-col w-full px-1"
@@ -57,7 +60,7 @@
 						<div class="text-xs flex items-center justify-between mb-2">
 							<div class="font-normal">{$i18n.t('Actions')}</div>
 
-							<div class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
+							<div class="flex items-center gap-2 text-gray-500 dark:text-gray-500">
 								<button
 									type="button"
 									on:click={() => {
diff --git a/src/lib/components/chat/Settings/Interface/ManageImageCompressionModal.svelte b/src/lib/components/chat/Settings/Interface/ManageImageCompressionModal.svelte
index 8d62e94a43..2512226708 100644
--- a/src/lib/components/chat/Settings/Interface/ManageImageCompressionModal.svelte
+++ b/src/lib/components/chat/Settings/Interface/ManageImageCompressionModal.svelte
@@ -10,6 +10,7 @@
 	import Textarea from '$lib/components/common/Textarea.svelte';
 	import Switch from '$lib/components/common/Switch.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import { settings } from '$lib/stores';
 
 	export let show = false;
 	export let size = null;
@@ -23,9 +24,9 @@
 	onMount(() => {});
 </script>
 
-<Modal size="sm" bind:show>
+<Modal size="sm" bind:show className="bg-white dark:bg-gray-900 rounded-4xl">
 	<div>
-		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
+		<div class=" flex justify-between text-gray-900 dark:text-white px-4 pt-3 pb-1">
 			<h1 class="text-sm font-medium self-center">
 				{$i18n.t('Manage')}
 			</h1>
@@ -40,7 +41,9 @@
 			</button>
 		</div>
 
-		<div class="flex flex-col md:flex-row w-full px-4 pb-4 md:space-x-4 dark:text-gray-200">
+		<div
+			class="flex flex-col md:flex-row w-full px-4 pb-4 md:space-x-4 text-gray-600 dark:text-gray-400"
+		>
 			<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
 				<form
 					class="flex flex-col w-full px-1"
@@ -52,7 +55,10 @@
 					<div>
 						<div>
 							<div class=" py-0.5 flex flex-col w-full text-sm">
-								<div id="image-compression-size-label" class=" text-xs mb-2">
+								<div
+									id="image-compression-size-label"
+									class="mb-2 text-xs text-gray-600 dark:text-gray-400"
+								>
 									{$i18n.t('Image Max Compression Size')}
 								</div>
 
@@ -65,7 +71,7 @@
 											id="image-comp-width"
 											bind:value={size.width}
 											type="number"
-											class="w-full bg-transparent outline-hidden text-center"
+											class="h-7 w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-center text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500"
 											min="0"
 											placeholder={$i18n.t('Width')}
 										/>
@@ -83,7 +89,7 @@
 											id="image-comp-height"
 											bind:value={size.height}
 											type="number"
-											class="w-full bg-transparent outline-hidden text-center"
+											class="h-7 w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-center text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500"
 											min="0"
 											placeholder={$i18n.t('Height')}
 										/>
diff --git a/src/lib/components/chat/Settings/Personalization.svelte b/src/lib/components/chat/Settings/Personalization.svelte
index 67f84f25d4..f8b00cbb51 100644
--- a/src/lib/components/chat/Settings/Personalization.svelte
+++ b/src/lib/components/chat/Settings/Personalization.svelte
@@ -2,18 +2,27 @@
 	import Switch from '$lib/components/common/Switch.svelte';
 	import { config, settings } from '$lib/stores';
 	import { createEventDispatcher, onMount, getContext } from 'svelte';
+	import type { Writable } from 'svelte/store';
+	import type { i18n as i18nType } from 'i18next';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import MemoryModal from './Personalization/MemoryModal.svelte';
 	import { deleteMemoriesByUserId, deleteMemoryById, getMemories } from '$lib/apis/memories';
 	import { toast } from 'svelte-sonner';
+	import UserSettingRow from './UserSettingRow.svelte';
+	import UserSettingSection from './UserSettingSection.svelte';
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import Plus from '$lib/components/icons/Plus.svelte';
+	import Trash from '$lib/components/icons/Trash.svelte';
 
 	const dispatch = createEventDispatcher();
 
-	const i18n = getContext('i18n');
+	const i18n = getContext<Writable<i18nType>>('i18n');
 
-	export let saveSettings: Function;
+	export let saveSettings: (settings: any) => void | Promise<void>;
 
 	// Addons
 	let enableMemory = false;
@@ -25,6 +34,10 @@
 	let showClearConfirmDialog = false;
 	let showDeleteConfirm = false;
 	let query = '';
+	const inputClass =
+		'h-7 w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
+	const actionButtonClass =
+		'shrink-0 text-xs text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-500 dark:hover:text-white';
 
 	type Memory = {
 		id: string;
@@ -90,7 +103,7 @@
 
 <form
 	id="tab-personalization"
-	class="flex flex-col h-full justify-between space-y-3 text-sm"
+	class="flex flex-col h-full justify-between text-sm"
 	on:submit|preventDefault={() => {
 		dispatch('save');
 	}}
@@ -99,148 +112,158 @@
 		{$i18n.t('Personalization')}
 	</h2>
 
-	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5 py-1">
-		<div>
-			<div class="flex items-center justify-between mb-1">
+	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
+		<UserSettingSection title={$i18n.t('Memory')} first>
+			<UserSettingRow
+				description={$i18n
+					.t(
+						"You can personalize your interactions with LLMs by adding memories through the 'Manage' button below, making them more helpful and tailored to you."
+					)
+					.replace($i18n.t('Manage'), $i18n.t('Add Memory'))}
+			>
 				<Tooltip
+					slot="label"
 					content={$i18n.t(
 						'This is an experimental feature, it may not function as expected and is subject to change at any time.'
 					)}
 				>
-					<div class="flex items-center gap-2 text-xs text-gray-400 dark:text-gray-600">
+					<div class="flex items-center gap-2">
 						{$i18n.t('Memory')}
-						<span
-							class="inline-flex items-center text-[0.625rem] font-normal uppercase leading-none text-gray-400 dark:text-gray-600"
+						<span class="text-[0.625rem] uppercase text-gray-400 dark:text-gray-600"
 							>{$i18n.t('Experimental')}</span
 						>
 					</div>
 				</Tooltip>
 
-				<div class="">
-					<Switch
-						bind:state={enableMemory}
-						on:change={async () => {
-							saveSettings({ memory: enableMemory });
-						}}
-					/>
-				</div>
-			</div>
-			<p class="-mt-1 text-[0.6875rem] text-gray-400 dark:text-gray-600">
-				{$i18n
-					.t(
-						"You can personalize your interactions with LLMs by adding memories through the 'Manage' button below, making them more helpful and tailored to you."
-					)
-					.replace($i18n.t('Manage'), $i18n.t('Add Memory'))}
-			</p>
-		</div>
+				<Switch
+					bind:state={enableMemory}
+					on:change={async () => {
+						saveSettings({ memory: enableMemory });
+					}}
+				/>
+			</UserSettingRow>
 
-		{#if enableMemory}
-			<div class="mt-5">
-				<div class="flex items-center justify-between mb-2">
-					<div class="flex items-center gap-2">
-						<h3 class="text-xs text-gray-400 dark:text-gray-600">
-							{$i18n.t('Memory')}
-						</h3>
-
-						{#if !loadingMemories}
-							<div class="text-xs text-gray-400 dark:text-gray-600">{memories.length}</div>
-						{/if}
-					</div>
-
-					<button
-						type="button"
-						class="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
-						on:click={() => {
-							selectedMemory = null;
-							showMemoryModal = true;
-						}}
-					>
-						{$i18n.t('Add Memory')}
-					</button>
-				</div>
-
-				{#if loadingMemories}
-					<div class="w-full flex justify-center items-center min-h-16">
-						<Spinner className="size-4" />
-					</div>
-				{:else}
-					{#if memories.length > 0}
-						<div class="flex items-center gap-2 mb-3">
-							<input
-								class="w-full text-xs py-1 bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700"
-								bind:value={query}
-								placeholder={$i18n.t('Search Memories')}
-								maxlength="500"
-							/>
-
-							{#if query}
-								<button
-									type="button"
-									class="shrink-0 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
-									on:click={() => {
-										query = '';
-									}}
-								>
-									{$i18n.t('Clear')}
-								</button>
+			{#if enableMemory}
+				<div>
+					<div class="mb-2 flex items-center justify-between">
+						<div class="text-xs text-gray-600 dark:text-gray-400">
+							{$i18n.t('Saved Memories')}
+							{#if !loadingMemories}
+								<span class="ml-1 text-gray-400 dark:text-gray-600">{memories.length}</span>
 							{/if}
 						</div>
-					{/if}
 
-					{#if sortedMemories.length === 0}
-						<div class="text-xs text-gray-500 dark:text-gray-400 min-h-16 flex items-center">
-							{#if memories.length === 0}
-								{$i18n.t('Memories accessible by LLMs will be shown here.')}
-							{:else}
-								{$i18n.t('No results found')}
-							{/if}
+						<Dropdown align="end">
+							<Tooltip content={$i18n.t('Actions')}>
+								<button
+									class="flex h-7 items-center gap-1.5 rounded-lg bg-transparent px-1.5 text-xs text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-500 dark:hover:text-white"
+									type="button"
+								>
+									<span>{$i18n.t('Actions')}</span>
+									<ChevronDown className="size-3" strokeWidth="2.5" />
+								</button>
+							</Tooltip>
+
+							<div slot="content">
+								<DropdownMenu className="w-[170px] shadow-sm">
+									<button
+										class="flex h-[1.6875rem] w-full cursor-pointer select-none items-center gap-2 rounded-lg bg-transparent px-2 text-xs hover:text-gray-900 disabled:cursor-default disabled:opacity-30 dark:hover:text-gray-100"
+										disabled={loadingMemories}
+										type="button"
+										on:click={() => {
+											selectedMemory = null;
+											showMemoryModal = true;
+										}}
+									>
+										<Plus className="size-3.5 shrink-0" strokeWidth="1.5" />
+										<div class="min-w-0 flex-1 truncate text-left">{$i18n.t('Add Memory')}</div>
+									</button>
+
+									<button
+										class="flex h-[1.6875rem] w-full cursor-pointer select-none items-center gap-2 rounded-lg bg-transparent px-2 text-xs hover:text-gray-900 disabled:cursor-default disabled:opacity-30 dark:hover:text-gray-100"
+										disabled={loadingMemories || memories.length === 0}
+										type="button"
+										on:click={() => {
+											showClearConfirmDialog = true;
+										}}
+									>
+										<Trash className="size-3.5 shrink-0" strokeWidth="1.5" />
+										<div class="min-w-0 flex-1 truncate text-left">{$i18n.t('Clear memory')}</div>
+									</button>
+								</DropdownMenu>
+							</div>
+						</Dropdown>
+					</div>
+
+					{#if loadingMemories}
+						<div class="flex min-h-16 w-full items-center justify-center">
+							<Spinner className="size-4" />
 						</div>
 					{:else}
-						<div class="flex flex-col gap-2.5">
-							{#each sortedMemories as memory (memory.id)}
-								<div class="flex items-start justify-between gap-3">
-									<div
-										class="min-w-0 whitespace-pre-wrap break-words text-xs text-gray-600 dark:text-gray-400"
-									>
-										{memory.content}
-									</div>
-									<div class="flex shrink-0 items-center gap-2">
-										<button
-											type="button"
-											class="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
-											on:click={() => editMemory(memory)}
-										>
-											{$i18n.t('Edit')}
-										</button>
-										<button
-											type="button"
-											class="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
-											on:click={() => confirmDeleteMemory(memory)}
-										>
-											{$i18n.t('Remove')}
-										</button>
-									</div>
-								</div>
-							{/each}
-						</div>
-					{/if}
+						{#if memories.length > 0}
+							<div class="mb-2 flex items-center gap-2">
+								<input
+									class={inputClass}
+									bind:value={query}
+									placeholder={$i18n.t('Search Memories')}
+									maxlength="500"
+								/>
 
-					<button
-						type="button"
-						class="mt-3 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:underline transition"
-						on:click={() => {
-							if (memories.length > 0) {
-								showClearConfirmDialog = true;
-							} else {
-								toast.error($i18n.t('No memories to clear'));
-							}
-						}}
-					>
-						{$i18n.t('Clear memory')}
-					</button>
-				{/if}
-			</div>
-		{/if}
+								{#if query}
+									<button
+										type="button"
+										class={actionButtonClass}
+										on:click={() => {
+											query = '';
+										}}
+									>
+										{$i18n.t('Clear')}
+									</button>
+								{/if}
+							</div>
+						{/if}
+
+						{#if sortedMemories.length === 0}
+							<div class="min-h-16 text-[0.6875rem] text-gray-400 dark:text-gray-600">
+								{#if memories.length === 0}
+									{$i18n.t('Memories accessible by LLMs will be shown here.')}
+								{:else}
+									{$i18n.t('No results found')}
+								{/if}
+							</div>
+						{:else}
+							<div class="flex flex-col gap-2">
+								{#each sortedMemories as memory (memory.id)}
+									<div class="flex items-start justify-between gap-3">
+										<div
+											class="min-w-0 whitespace-pre-wrap break-words text-xs text-gray-700 dark:text-gray-300"
+										>
+											{memory.content}
+										</div>
+										<div class="flex shrink-0 items-center justify-end gap-2">
+											<button
+												type="button"
+												class="{actionButtonClass} hover:underline"
+												on:click={() => editMemory(memory)}
+											>
+												{$i18n.t('Edit')}
+											</button>
+											<button
+												type="button"
+												class="{actionButtonClass} hover:underline"
+												on:click={() => confirmDeleteMemory(memory)}
+											>
+												{$i18n.t('Remove')}
+											</button>
+										</div>
+									</div>
+								{/each}
+							</div>
+						{/if}
+					{/if}
+				</div>
+			{/if}
+		</UserSettingSection>
 	</div>
 
 	<div class="shrink-0 flex justify-end text-sm font-normal">
@@ -287,7 +310,7 @@
 	<div class="text-sm text-gray-500 flex-1">
 		{$i18n.t('Are you sure you want to delete this memory? This action cannot be undone.')}
 		<div
-			class="mt-2 bg-gray-50 dark:bg-gray-900 p-3 rounded-xl border border-gray-100 dark:border-gray-800 text-black dark:text-white whitespace-pre-wrap break-words max-h-32 overflow-y-auto"
+			class="mt-2 max-h-32 overflow-y-auto whitespace-pre-wrap break-words rounded-lg border border-gray-100/50 bg-gray-50/40 p-2 text-xs text-gray-600 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-400"
 		>
 			{selectedMemory?.content}
 		</div>
@@ -296,7 +319,7 @@
 
 <MemoryModal
 	bind:show={showMemoryModal}
-	memory={selectedMemory}
+	memory={selectedMemory as any}
 	on:save={async () => {
 		await loadMemories();
 	}}
diff --git a/src/lib/components/chat/Settings/Personalization/MemoryModal.svelte b/src/lib/components/chat/Settings/Personalization/MemoryModal.svelte
index 7b30c1eb13..cc9c1de601 100644
--- a/src/lib/components/chat/Settings/Personalization/MemoryModal.svelte
+++ b/src/lib/components/chat/Settings/Personalization/MemoryModal.svelte
@@ -7,6 +7,7 @@
 	import Modal from '$lib/components/common/Modal.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
+	import { settings } from '$lib/stores';
 
 	const dispatch = createEventDispatcher();
 
@@ -19,6 +20,12 @@
 	let content = '';
 	let type = 'user';
 	let path = '';
+	const inputClass =
+		'h-7 w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
+	const textareaClass =
+		'w-full resize-y rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
+	const actionButtonClass =
+		'text-xs text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-500 dark:hover:text-white';
 
 	$: edit = !!memory?.id;
 	$: if (show) {
@@ -51,9 +58,9 @@
 	};
 </script>
 
-<Modal bind:show size="sm">
+<Modal bind:show size="sm" className="bg-white dark:bg-gray-900 rounded-4xl">
 	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+		<div class=" flex justify-between text-gray-900 dark:text-white px-4 pt-3 pb-1">
 			<div class=" text-sm font-medium self-center">
 				{#if edit}
 					{$i18n.t('Edit Memory')}
@@ -69,16 +76,18 @@
 			</button>
 		</div>
 
-		<div class="flex flex-col md:flex-row w-full px-5 pb-4 md:space-x-4 dark:text-gray-200">
+		<div
+			class="flex flex-col md:flex-row w-full px-5 pb-4 md:space-x-4 text-gray-600 dark:text-gray-400"
+		>
 			<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
 				<form class="flex flex-col w-full" on:submit|preventDefault={submitHandler}>
 					<div class="px-1">
 						<div class="flex w-full justify-between items-center mb-1.5">
-							<div class="text-xs text-gray-500">{$i18n.t('Type')}</div>
+							<div class="text-xs text-gray-600 dark:text-gray-400">{$i18n.t('Type')}</div>
 
 							<button
 								type="button"
-								class="text-xs text-gray-700 dark:text-gray-300"
+								class={actionButtonClass}
 								on:click={() => {
 									type = type === 'user' ? 'context' : 'user';
 								}}
@@ -93,16 +102,15 @@
 
 						<textarea
 							bind:value={content}
-							class="bg-transparent w-full text-sm outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700"
+							class={textareaClass}
 							rows="6"
-							style="resize: vertical;"
 							placeholder={type === 'user'
 								? $i18n.t('Add a preference, fact, or instruction about you')
 								: $i18n.t('Add durable context for future chats')}
 						/>
 
 						<div class="flex flex-col w-full mt-1.5">
-							<label for="memory-path" class="mb-0.5 text-xs text-gray-500">
+							<label for="memory-path" class="mb-1 text-xs text-gray-600 dark:text-gray-400">
 								{$i18n.t('Path')}
 								<span class="opacity-50">({$i18n.t('optional')})</span>
 							</label>
@@ -110,7 +118,7 @@
 							<input
 								id="memory-path"
 								bind:value={path}
-								class="w-full text-sm bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700"
+								class={inputClass}
 								placeholder={$i18n.t('Path')}
 								autocomplete="off"
 							/>
diff --git a/src/lib/components/chat/Settings/Shortcuts.svelte b/src/lib/components/chat/Settings/Shortcuts.svelte
index 79581b5bdc..2cc9093ebb 100644
--- a/src/lib/components/chat/Settings/Shortcuts.svelte
+++ b/src/lib/components/chat/Settings/Shortcuts.svelte
@@ -105,7 +105,7 @@
 		</h2>
 
 		<button
-			class="text-[0.625rem] text-gray-400 transition hover:text-gray-600 dark:hover:text-gray-300"
+			class="text-xs text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-500 dark:hover:text-white"
 			on:click={resetBindings}
 		>
 			{$i18n.t('Reset Defaults')}
@@ -114,21 +114,17 @@
 
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		<div class="flex items-center gap-2 px-1 pb-1">
-			<span class="flex-1 text-[0.625rem] font-medium text-gray-400 dark:text-gray-600">
+			<span class="flex-1 text-[0.625rem] text-gray-400 dark:text-gray-600">
 				{$i18n.t('Command')}
 			</span>
-			<span
-				class="w-[9.5rem] shrink-0 text-right text-[0.625rem] font-medium text-gray-400 dark:text-gray-600"
-			>
+			<span class="w-[9.5rem] shrink-0 text-right text-[0.625rem] text-gray-400 dark:text-gray-600">
 				{$i18n.t('Key')}
 			</span>
 		</div>
 
 		{#each Object.entries(categorizedShortcuts) as [category, items], categoryIndex}
 			<div class={categoryIndex > 0 ? 'mt-3' : ''}>
-				<div
-					class="px-1 pb-0.5 pt-1 text-[0.625rem] font-medium uppercase tracking-wide text-gray-400 dark:text-gray-600"
-				>
+				<div class="px-1 pb-0.5 pt-1 text-xs text-gray-400 dark:text-gray-600">
 					{$i18n.t(category)}
 				</div>
 				<div class="divide-y divide-gray-100/70 dark:divide-white/[0.03]">
diff --git a/src/lib/components/chat/Settings/SyncStatsModal.svelte b/src/lib/components/chat/Settings/SyncStatsModal.svelte
index dd24667f87..da6a549240 100644
--- a/src/lib/components/chat/Settings/SyncStatsModal.svelte
+++ b/src/lib/components/chat/Settings/SyncStatsModal.svelte
@@ -5,6 +5,7 @@
 
 	import { exportChatStats, exportSingleChatStats, downloadChatStats } from '$lib/apis/chats';
 	import { getVersion } from '$lib/apis';
+	import { settings } from '$lib/stores';
 
 	import Modal from '$lib/components/common/Modal.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
@@ -314,7 +315,7 @@
 	};
 </script>
 
-<Modal bind:show size="md">
+<Modal bind:show size="md" className="bg-white dark:bg-gray-900 rounded-4xl">
 	<div class="w-full">
 		{#if completed}
 			<div class="px-5.5 py-5">
@@ -380,7 +381,7 @@
 				</div>
 
 				<div class="mt-3 text-xs text-gray-500">
-					<div class="font-normal text-gray-900 dark:text-gray-100 mb-1">
+					<div class="mb-1 font-normal text-gray-600 dark:text-gray-400">
 						{$i18n.t('What is shared:')}
 					</div>
 					<ul class="list-disc list-inside space-y-0.5 ml-1 mb-2">
@@ -391,7 +392,7 @@
 						<li>{$i18n.t('User ratings (thumbs up/down)')}</li>
 					</ul>
 
-					<div class="font-normal text-gray-900 dark:text-gray-100 mb-1">
+					<div class="mb-1 font-normal text-gray-600 dark:text-gray-400">
 						{$i18n.t('What is NOT shared:')}
 					</div>
 					<ul class="list-disc list-inside space-y-0.5 ml-1">
@@ -452,7 +453,7 @@
 					</div>
 				{/if}
 
-				<div class="mt-5 flex justify-between items-center gap-2">
+				<div class="mt-4 flex items-center justify-between gap-2">
 					<div class="text-xs text-gray-400 text-center mr-auto">
 						<button
 							class="hover:underline px-2"
@@ -465,7 +466,7 @@
 					</div>
 
 					<button
-						class="px-4 py-2 rounded-full text-sm font-normal bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100 transition disabled:cursor-not-allowed"
+						class="rounded-full bg-gray-100 px-4 py-2 text-sm font-normal text-gray-600 transition hover:bg-gray-200 disabled:cursor-not-allowed dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
 						on:click={() => {
 							if (syncing) {
 								cancelOperation();
diff --git a/src/lib/components/chat/Settings/Tools/Connection.svelte b/src/lib/components/chat/Settings/Tools/Connection.svelte
index 0d50145243..13abc75c72 100644
--- a/src/lib/components/chat/Settings/Tools/Connection.svelte
+++ b/src/lib/components/chat/Settings/Tools/Connection.svelte
@@ -33,7 +33,7 @@
 	}}
 />
 
-<div class="flex w-full gap-2 items-center">
+<div class="flex w-full items-center gap-3 text-xs text-gray-600 dark:text-gray-400">
 	<Tooltip className="w-full relative" content={''} placement="top-start">
 		<div class="flex w-full">
 			<div
@@ -46,7 +46,7 @@
 				</Tooltip>
 
 				{#if connection?.info?.name}
-					<div class=" capitalize outline-hidden w-full bg-transparent">
+					<div class="w-full bg-transparent capitalize outline-hidden">
 						{connection?.info?.name ?? connection?.url}
 						<span class="text-gray-500">{connection?.info?.id ?? ''}</span>
 					</div>
@@ -59,10 +59,10 @@
 		</div>
 	</Tooltip>
 
-	<div class="flex gap-1 items-center">
+	<div class="flex shrink-0 items-center gap-1">
 		<Tooltip content={$i18n.t('Configure')} className="self-start">
 			<button
-				class="self-center p-1 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg transition"
+				class="flex size-6 items-center justify-center rounded-lg text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-300"
 				on:click={() => {
 					showConfigModal = true;
 				}}
diff --git a/src/lib/components/chat/Settings/UserSettingField.svelte b/src/lib/components/chat/Settings/UserSettingField.svelte
new file mode 100644
index 0000000000..012ba97d8b
--- /dev/null
+++ b/src/lib/components/chat/Settings/UserSettingField.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	export let label = '';
+	export let description = '';
+	export let forId = '';
+	export let className = '';
+</script>
+
+<div class={className}>
+	{#if label}
+		<label class="text-xs text-gray-600 dark:text-gray-400" for={forId || undefined}>
+			{label}
+		</label>
+	{/if}
+
+	<div class={label ? 'mt-1' : ''}>
+		<slot />
+	</div>
+
+	{#if description}
+		<p class="mt-0.5 text-[0.6875rem] text-gray-400 dark:text-gray-600">
+			{description}
+		</p>
+	{/if}
+</div>
diff --git a/src/lib/components/chat/Settings/UserSettingRow.svelte b/src/lib/components/chat/Settings/UserSettingRow.svelte
new file mode 100644
index 0000000000..d102d6db63
--- /dev/null
+++ b/src/lib/components/chat/Settings/UserSettingRow.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let label = '';
+	export let description = '';
+	export let className = '';
+	export let labelClassName = '';
+</script>
+
+<div class="flex items-center justify-between gap-2.5 {className}">
+	<div class="min-w-0 text-xs text-gray-600 dark:text-gray-400 {labelClassName}">
+		<slot name="label">{label}</slot>
+	</div>
+
+	<div class="shrink-0">
+		<slot />
+	</div>
+</div>
+
+{#if description}
+	<p class="-mt-1 text-[0.6875rem] text-gray-400 dark:text-gray-600">
+		{description}
+	</p>
+{/if}
diff --git a/src/lib/components/chat/Settings/UserSettingSection.svelte b/src/lib/components/chat/Settings/UserSettingSection.svelte
new file mode 100644
index 0000000000..6881fa0fda
--- /dev/null
+++ b/src/lib/components/chat/Settings/UserSettingSection.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	export let title = '';
+	export let first = false;
+	export let className = '';
+</script>
+
+<section class="w-full {first ? '' : 'mt-4'} {className}">
+	{#if title}
+		<h3 class="mb-2 text-xs text-gray-400 dark:text-gray-600">
+			{title}
+		</h3>
+	{/if}
+
+	<div class="flex flex-col gap-2.5">
+		<slot />
+	</div>
+</section>
diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index 1b35adab80..528f3865c6 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -52,9 +52,6 @@
 
 	const i18n: Writable<any> = getContext('i18n');
 
-	const highContrastInputClass =
-		'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
-
 	export let show: boolean | string | SettingsModalRequest = false;
 	let modalShow = false;
 	let lastShow: boolean | string | SettingsModalRequest = false;
@@ -847,14 +844,12 @@
 			class="hidden md:flex items-center gap-1.5 h-7 px-2 mx-1 mt-1 mb-0.5 shrink-0 rounded-lg text-xs bg-gray-50/70 dark:bg-white/[0.03]"
 		>
 			<div class="self-center rounded-l-xl bg-transparent">
-				<Search
-					className="size-3.5"
-					strokeWidth={($settings?.highContrastMode ?? false) ? '3' : '1.5'}
-				/>
+				<Search className="size-3.5" strokeWidth="1.5" />
 			</div>
 			<label class="sr-only" for="search-input-settings-modal">{$i18n.t('Search')}</label>
 			<input
-				class={`w-full text-xs ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent py-1 outline-hidden dark:text-gray-300'}`}
+				data-settings-search
+				class="w-full text-xs bg-transparent py-1 outline-hidden dark:text-gray-300"
 				bind:value={search}
 				id="search-input-settings-modal"
 				on:input={searchDebounceHandler}
@@ -863,7 +858,7 @@
 		</div>
 
 		<div
-			class="tabs flex min-w-0 flex-1 min-h-0 overflow-x-auto md:overflow-x-hidden md:overflow-y-auto md:flex-col p-1 pl-0 md:pl-1 gap-px"
+			class="tabs scrollbar-none flex min-w-0 flex-1 min-h-0 overflow-x-auto md:overflow-x-hidden md:overflow-y-auto md:flex-col p-1 pl-0 md:pl-1 gap-px"
 		>
 			<span
 				class="hidden md:block text-[0.625rem] text-gray-400 dark:text-gray-600 px-2 mt-1.5 mb-0.5"
@@ -1191,26 +1186,3 @@
 		</div>
 	</div>
 </Modal>
-
-<style>
-	input::-webkit-outer-spin-button,
-	input::-webkit-inner-spin-button {
-		/* display: none; <- Crashes Chrome on hover */
-		-webkit-appearance: none;
-		margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
-	}
-
-	.tabs::-webkit-scrollbar {
-		display: none; /* for Chrome, Safari and Opera */
-	}
-
-	.tabs {
-		-ms-overflow-style: none; /* IE and Edge */
-		scrollbar-width: none; /* Firefox */
-	}
-
-	input[type='number'] {
-		appearance: textfield;
-		-moz-appearance: textfield; /* Firefox */
-	}
-</style>
diff --git a/src/lib/components/common/SensitiveInput.svelte b/src/lib/components/common/SensitiveInput.svelte
index f4acd7b538..8454de9e83 100644
--- a/src/lib/components/common/SensitiveInput.svelte
+++ b/src/lib/components/common/SensitiveInput.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	const i18n = getContext('i18n');
 	import { getContext } from 'svelte';
-	import { settings } from '$lib/stores';
 	export let id = 'password-input';
 	export let value: string = '';
 	export let placeholder = '';
@@ -17,7 +16,7 @@
 
 	let show = false;
 
-	const highContrastInputClass =
+	const inputChromeClass =
 		'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
 </script>
 
@@ -27,7 +26,7 @@
 	{/if}
 	<input
 		{id}
-		class={`${inputClassName} ${show ? '' : 'password'} ${($settings?.highContrastMode ?? false) ? highContrastInputClass : ' outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-600'}`}
+		class={`${inputClassName} ${show ? '' : 'password'} ${inputChromeClass}`}
 		{placeholder}
 		type={type === 'password' && !show ? 'password' : 'text'}
 		bind:value
diff --git a/src/lib/components/layout/SearchModal.svelte b/src/lib/components/layout/SearchModal.svelte
index 19de4fc93a..4ccbbc8820 100644
--- a/src/lib/components/layout/SearchModal.svelte
+++ b/src/lib/components/layout/SearchModal.svelte
@@ -28,8 +28,8 @@
 	import { refreshChatList } from '$lib/stores/chat-list';
 	import Messages from '../chat/Messages.svelte';
 	import { goto } from '$app/navigation';
-	import PencilSquare from '../icons/PencilSquare.svelte';
-	import PageEdit from '../icons/PageEdit.svelte';
+	import EditPencilIcon from './Sidebar/icons/EditPencil.svelte';
+	import NotesIcon from './Sidebar/icons/Notes.svelte';
 
 	import ChatMenu from './Sidebar/ChatMenu.svelte';
 	import ShareChatModal from '../chat/ShareChatModal.svelte';
@@ -251,7 +251,7 @@
 				show = false;
 				onClose();
 			},
-			icon: PencilSquare
+			icon: EditPencilIcon
 		}
 	];
 
@@ -508,7 +508,7 @@
 								show = false;
 								onClose();
 							},
-							icon: PageEdit
+							icon: NotesIcon
 						}
 					]
 				: [])
diff --git a/src/lib/components/notes/NoteEditor/Chat.svelte b/src/lib/components/notes/NoteEditor/Chat.svelte
index 1f14c4cde2..64fda60d91 100644
--- a/src/lib/components/notes/NoteEditor/Chat.svelte
+++ b/src/lib/components/notes/NoteEditor/Chat.svelte
@@ -355,7 +355,10 @@ Based on the user's instruction, update and enhance the existing notes or select
 				position="top"
 				className="inline-block"
 			>
-				<span class="text-gray-500 text-sm">({$i18n.t('Experimental')})</span>
+				<span
+					class="inline-flex items-center text-[0.625rem] font-normal uppercase leading-none text-gray-400 dark:text-gray-600"
+					>{$i18n.t('Experimental')}</span
+				>
 			</Tooltip>
 		</div>
 	</div>