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

---
 .../components/admin/Settings/Audio.svelte    | 1173 ++++----
 .../admin/Settings/CodeExecution.svelte       |  113 +-
 .../admin/Settings/Documents.svelte           | 2373 ++++++++---------
 .../components/admin/Settings/Images.svelte   | 1117 +++-----
 .../admin/Settings/Interface.svelte           |  678 ++---
 .../admin/Settings/Pipelines.svelte           |  101 +-
 .../admin/Settings/WebSearch.svelte           | 2300 ++++++++--------
 src/lib/components/chat/Settings/About.svelte |    2 +-
 src/lib/components/chat/Settings/Audio.svelte |   42 +-
 .../components/chat/Settings/General.svelte   |   24 +-
 10 files changed, 3529 insertions(+), 4394 deletions(-)

diff --git a/src/lib/components/admin/Settings/Audio.svelte b/src/lib/components/admin/Settings/Audio.svelte
index 6ca217391b..f6f32eb006 100644
--- a/src/lib/components/admin/Settings/Audio.svelte
+++ b/src/lib/components/admin/Settings/Audio.svelte
@@ -14,6 +14,7 @@
 
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
+	import Switch from '$lib/components/common/Switch.svelte';
 	import TTSVoiceInput from '$lib/components/workspace/Models/TTSVoiceInput.svelte';
 
 	import { TTS_RESPONSE_SPLIT } from '$lib/types';
@@ -22,6 +23,9 @@
 	import type { i18n as i18nType } from 'i18next';
 	import Textarea from '$lib/components/common/Textarea.svelte';
 	import SettingsSelect from '$lib/components/common/SettingsSelect.svelte';
+	import AdminSettingField from './AdminSettingField.svelte';
+	import AdminSettingRow from './AdminSettingRow.svelte';
+	import AdminSettingSection from './AdminSettingSection.svelte';
 
 	const i18n = getContext<Writable<i18nType>>('i18n');
 
@@ -74,6 +78,12 @@
 	let voices: SpeechSynthesisVoice[] = [];
 	let providerVoices: Voice[] = [];
 	let models: Awaited<ReturnType<typeof _getModels>>['models'] = [];
+	const inputClass =
+		'w-full h-7 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 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 linkedHelpClass =
+		'text-[0.6875rem] text-gray-400 dark:text-gray-600 [&_a]:text-gray-600 [&_a]:hover:underline dark:[&_a]:text-gray-300';
 
 	const getModels = async () => {
 		if (TTS_ENGINE === '') {
@@ -237,721 +247,474 @@
 	<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">
-		<div class="flex flex-col gap-3">
-			<div>
-				<div class=" mb-2 text-xs text-gray-400 dark:text-gray-600">
-					{$i18n.t('Speech-to-Text')}
+		<AdminSettingSection title={$i18n.t('Speech-to-Text')} first>
+			<AdminSettingRow
+				label={$i18n.t('Speech-to-Text Engine')}
+				description={$i18n.t('Choose the transcription provider used for audio input.')}
+			>
+				<SettingsSelect bind:value={STT_ENGINE} placeholder={$i18n.t('Select an engine')}>
+					<option value="">{$i18n.t('Whisper (Local)')}</option>
+					<option value="openai">{$i18n.t('OpenAI')}</option>
+					<option value="web">{$i18n.t('Web API')}</option>
+					<option value="deepgram">{$i18n.t('Deepgram')}</option>
+					<option value="azure">{$i18n.t('Azure AI Speech')}</option>
+					<option value="mistral">{$i18n.t('MistralAI')}</option>
+				</SettingsSelect>
+			</AdminSettingRow>
+
+			{#if STT_ENGINE !== 'web'}
+				<AdminSettingField
+					label={$i18n.t('Supported MIME Types')}
+					description={$i18n.t('Comma-separated audio or video MIME types accepted for upload.')}
+				>
+					<input
+						class={inputClass}
+						bind:value={STT_SUPPORTED_CONTENT_TYPES}
+						placeholder={$i18n.t('e.g., audio/wav,audio/mpeg,video/* (leave blank for defaults)')}
+					/>
+				</AdminSettingField>
+			{/if}
+
+			{#if STT_ENGINE === 'openai'}
+				<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+					<AdminSettingField label={$i18n.t('API Base URL')}>
+						<input
+							class={inputClass}
+							placeholder={$i18n.t('API Base URL')}
+							bind:value={STT_OPENAI_API_BASE_URL}
+							required
+						/>
+					</AdminSettingField>
+					<AdminSettingField label={$i18n.t('API Key')}>
+						<SensitiveInput
+							variant="settings"
+							placeholder={$i18n.t('API Key')}
+							bind:value={STT_OPENAI_API_KEY}
+						/>
+					</AdminSettingField>
 				</div>
 
-				{#if STT_ENGINE !== 'web'}
-					<div class="mb-2">
-						<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Supported MIME Types')}
-						</div>
-						<div class="flex w-full">
-							<div class="flex-1">
-								<input
-									class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-									bind:value={STT_SUPPORTED_CONTENT_TYPES}
-									placeholder={$i18n.t(
-										'e.g., audio/wav,audio/mpeg,video/* (leave blank for defaults)'
-									)}
-								/>
-							</div>
-						</div>
-					</div>
-				{/if}
+				<AdminSettingRow
+					label={$i18n.t('Request Format')}
+					description={$i18n.t('Select how audio is sent to the OpenAI-compatible endpoint.')}
+				>
+					<SettingsSelect bind:value={STT_OPENAI_API_REQUEST_FORMAT}>
+						<option value="multipart">{$i18n.t('Multipart Upload')}</option>
+						<option value="json">{$i18n.t('JSON Base64')}</option>
+					</SettingsSelect>
+				</AdminSettingRow>
 
-				<div class="mb-2 py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-						{$i18n.t('Speech-to-Text Engine')}
-					</div>
-					<div class="flex items-center relative">
-						<SettingsSelect bind:value={STT_ENGINE} placeholder={$i18n.t('Select an engine')}>
-							<option value="">{$i18n.t('Whisper (Local)')}</option>
-							<option value="openai">{$i18n.t('OpenAI')}</option>
-							<option value="web">{$i18n.t('Web API')}</option>
-							<option value="deepgram">{$i18n.t('Deepgram')}</option>
-							<option value="azure">{$i18n.t('Azure AI Speech')}</option>
-							<option value="mistral">{$i18n.t('MistralAI')}</option>
-						</SettingsSelect>
+				<AdminSettingField label={$i18n.t('STT Model')}>
+					<input
+						list="stt-openai-model-list"
+						class={inputClass}
+						bind:value={STT_MODEL}
+						placeholder={$i18n.t('Select a model')}
+					/>
+					<datalist id="stt-openai-model-list">
+						<option value="whisper-1"></option>
+					</datalist>
+				</AdminSettingField>
+			{:else if STT_ENGINE === 'deepgram'}
+				<AdminSettingField label={$i18n.t('API Key')}>
+					<SensitiveInput
+						variant="settings"
+						placeholder={$i18n.t('API Key')}
+						bind:value={STT_DEEPGRAM_API_KEY}
+					/>
+				</AdminSettingField>
+
+				<AdminSettingField
+					label={$i18n.t('STT Model')}
+					description={$i18n.t('Leave model field empty to use the default model.')}
+				>
+					<input
+						class={inputClass}
+						bind:value={STT_MODEL}
+						placeholder={$i18n.t('Select a model (optional)')}
+					/>
+					<div class="mt-1 {linkedHelpClass}">
+						<a href="https://developers.deepgram.com/docs/models" target="_blank">
+							{$i18n.t('Click here to see available models.')}
+						</a>
 					</div>
+				</AdminSettingField>
+			{:else if STT_ENGINE === 'azure'}
+				<AdminSettingField label={$i18n.t('API Key')}>
+					<SensitiveInput
+						variant="settings"
+						placeholder={$i18n.t('API Key')}
+						bind:value={STT_AZURE_API_KEY}
+						required
+					/>
+				</AdminSettingField>
+
+				<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+					<AdminSettingField label={$i18n.t('Azure Region')}>
+						<input
+							class={inputClass}
+							bind:value={STT_AZURE_REGION}
+							placeholder={$i18n.t('e.g., westus (leave blank for eastus)')}
+						/>
+					</AdminSettingField>
+					<AdminSettingField label={$i18n.t('Language Locales')}>
+						<input
+							class={inputClass}
+							bind:value={STT_AZURE_LOCALES}
+							placeholder={$i18n.t('e.g., en-US,ja-JP (leave blank for auto-detect)')}
+						/>
+					</AdminSettingField>
+					<AdminSettingField label={$i18n.t('Endpoint URL')}>
+						<input
+							class={inputClass}
+							bind:value={STT_AZURE_BASE_URL}
+							placeholder={$i18n.t('(leave blank for to use commercial endpoint)')}
+						/>
+					</AdminSettingField>
+					<AdminSettingField label={$i18n.t('Max Speakers')}>
+						<input
+							class={inputClass}
+							bind:value={STT_AZURE_MAX_SPEAKERS}
+							placeholder={$i18n.t('e.g., 3, 4, 5 (leave blank for default)')}
+						/>
+					</AdminSettingField>
+				</div>
+			{:else if STT_ENGINE === 'mistral'}
+				<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+					<AdminSettingField label={$i18n.t('API Base URL')}>
+						<input
+							class={inputClass}
+							placeholder={$i18n.t('API Base URL')}
+							bind:value={STT_MISTRAL_API_BASE_URL}
+							required
+						/>
+					</AdminSettingField>
+					<AdminSettingField label={$i18n.t('API Key')}>
+						<SensitiveInput
+							variant="settings"
+							placeholder={$i18n.t('API Key')}
+							bind:value={STT_MISTRAL_API_KEY}
+						/>
+					</AdminSettingField>
 				</div>
 
-				{#if STT_ENGINE === 'openai'}
-					<div>
-						<div class="mt-1 flex gap-2 mb-1">
-							<input
-								class="flex-1 w-full border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-								placeholder={$i18n.t('API Base URL')}
-								bind:value={STT_OPENAI_API_BASE_URL}
-								required
-							/>
-
-							<SensitiveInput
-								variant="settings"
-								placeholder={$i18n.t('API Key')}
-								bind:value={STT_OPENAI_API_KEY}
-							/>
-						</div>
+				<AdminSettingField
+					label={$i18n.t('STT Model')}
+					description={$i18n.t('Leave empty to use the default model (voxtral-mini-latest).')}
+				>
+					<input class={inputClass} bind:value={STT_MODEL} placeholder="voxtral-mini-latest" />
+					<div class="mt-1 {linkedHelpClass}">
+						<a href="https://docs.mistral.ai/capabilities/audio_transcription" target="_blank">
+							{$i18n.t('Learn more about Voxtral transcription.')}
+						</a>
 					</div>
+				</AdminSettingField>
 
-					<div class="mb-2 py-0.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Request Format')}
-						</div>
-						<div class="flex items-center relative">
-							<SettingsSelect bind:value={STT_OPENAI_API_REQUEST_FORMAT}>
-								<option value="multipart">{$i18n.t('Multipart Upload')}</option>
-								<option value="json">{$i18n.t('JSON Base64')}</option>
-							</SettingsSelect>
-						</div>
-					</div>
-
-					<div>
-						<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('STT Model')}
-						</div>
-						<div class="flex w-full">
-							<div class="flex-1">
-								<input
-									list="model-list"
-									class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-									bind:value={STT_MODEL}
-									placeholder={$i18n.t('Select a model')}
-								/>
-
-								<datalist id="model-list">
-									<option value="whisper-1" />
-								</datalist>
-							</div>
-						</div>
-					</div>
-				{:else if STT_ENGINE === 'deepgram'}
-					<div>
-						<div class="mt-1 flex gap-2 mb-1">
-							<SensitiveInput
-								variant="settings"
-								placeholder={$i18n.t('API Key')}
-								bind:value={STT_DEEPGRAM_API_KEY}
-							/>
-						</div>
-					</div>
-
-					<div>
-						<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('STT Model')}
-						</div>
-						<div class="flex w-full">
-							<div class="flex-1">
-								<input
-									class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-									bind:value={STT_MODEL}
-									placeholder={$i18n.t('Select a model (optional)')}
-								/>
-							</div>
-						</div>
-						<div class="mt-2 mb-1 text-xs text-gray-400 dark:text-gray-500">
-							{$i18n.t('Leave model field empty to use the default model.')}
-							<a
-								class=" hover:underline dark:text-gray-200 text-gray-800"
-								href="https://developers.deepgram.com/docs/models"
-								target="_blank"
-							>
-								{$i18n.t('Click here to see available models.')}
-							</a>
-						</div>
-					</div>
-				{:else if STT_ENGINE === 'azure'}
-					<div>
-						<div class="mt-1 flex gap-2 mb-1">
-							<SensitiveInput
-								variant="settings"
-								placeholder={$i18n.t('API Key')}
-								bind:value={STT_AZURE_API_KEY}
-								required
-							/>
-						</div>
-
-						<div>
-							<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-								{$i18n.t('Azure Region')}
-							</div>
-							<div class="flex w-full">
-								<div class="flex-1">
-									<input
-										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-										bind:value={STT_AZURE_REGION}
-										placeholder={$i18n.t('e.g., westus (leave blank for eastus)')}
-									/>
-								</div>
-							</div>
-						</div>
-
-						<div>
-							<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-								{$i18n.t('Language Locales')}
-							</div>
-							<div class="flex w-full">
-								<div class="flex-1">
-									<input
-										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-										bind:value={STT_AZURE_LOCALES}
-										placeholder={$i18n.t('e.g., en-US,ja-JP (leave blank for auto-detect)')}
-									/>
-								</div>
-							</div>
-						</div>
-
-						<div>
-							<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-								{$i18n.t('Endpoint URL')}
-							</div>
-							<div class="flex w-full">
-								<div class="flex-1">
-									<input
-										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-										bind:value={STT_AZURE_BASE_URL}
-										placeholder={$i18n.t('(leave blank for to use commercial endpoint)')}
-									/>
-								</div>
-							</div>
-						</div>
-
-						<div>
-							<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-								{$i18n.t('Max Speakers')}
-							</div>
-							<div class="flex w-full">
-								<div class="flex-1">
-									<input
-										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-										bind:value={STT_AZURE_MAX_SPEAKERS}
-										placeholder={$i18n.t('e.g., 3, 4, 5 (leave blank for default)')}
-									/>
-								</div>
-							</div>
-						</div>
-					</div>
-				{:else if STT_ENGINE === 'mistral'}
-					<div>
-						<div class="mt-1 flex gap-2 mb-1">
-							<input
-								class="flex-1 w-full border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-								placeholder={$i18n.t('API Base URL')}
-								bind:value={STT_MISTRAL_API_BASE_URL}
-								required
-							/>
-
-							<SensitiveInput
-								variant="settings"
-								placeholder={$i18n.t('API Key')}
-								bind:value={STT_MISTRAL_API_KEY}
-							/>
-						</div>
-					</div>
-
-					<div>
-						<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('STT Model')}
-						</div>
-						<div class="flex w-full">
-							<div class="flex-1">
-								<input
-									class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-									bind:value={STT_MODEL}
-									placeholder="voxtral-mini-latest"
-								/>
-							</div>
-						</div>
-						<div class="mt-2 mb-1 text-xs text-gray-400 dark:text-gray-500">
-							{$i18n.t('Leave empty to use the default model (voxtral-mini-latest).')}
-							<a
-								class=" hover:underline dark:text-gray-200 text-gray-800"
-								href="https://docs.mistral.ai/capabilities/audio_transcription"
-								target="_blank"
-							>
-								{$i18n.t('Learn more about Voxtral transcription.')}
-							</a>
-						</div>
-					</div>
-
-					<div>
-						<div class="flex items-center justify-between mb-2">
-							<div class="text-xs text-gray-600 dark:text-gray-400">
-								{$i18n.t('Use Chat Completions API')}
-							</div>
-							<label class="relative inline-flex items-center cursor-pointer">
-								<input
-									type="checkbox"
-									bind:checked={STT_MISTRAL_USE_CHAT_COMPLETIONS}
-									class="sr-only peer"
-								/>
-								<div
-									class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
-								></div>
-							</label>
-						</div>
-						<div class="text-xs text-gray-400 dark:text-gray-500">
-							{$i18n.t(
-								'Use /v1/chat/completions endpoint instead of /v1/audio/transcriptions for potentially better accuracy.'
-							)}
-						</div>
-					</div>
-				{:else if STT_ENGINE === ''}
-					<div>
-						<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('STT Model')}
-						</div>
-
-						<div class="flex w-full">
-							<div class="flex-1 mr-2">
-								<input
-									class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-									placeholder={$i18n.t('Set whisper model')}
-									bind:value={STT_WHISPER_MODEL}
-								/>
-							</div>
-
-							<button
-								class="px-2.5 hover:bg-black/5 text-gray-800 dark:hover:bg-white/5 dark:text-gray-100 rounded-lg transition"
-								on:click={() => {
-									sttModelUpdateHandler();
-								}}
-								disabled={STT_WHISPER_MODEL_LOADING}
-							>
-								{#if STT_WHISPER_MODEL_LOADING}
-									<div class="self-center">
-										<Spinner />
-									</div>
-								{:else}
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 16 16"
-										fill="currentColor"
-										class="w-4 h-4"
-									>
-										<path
-											d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
-										/>
-										<path
-											d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
-										/>
-									</svg>
-								{/if}
-							</button>
-						</div>
-
-						<div class="mt-2 mb-1 text-xs text-gray-400 dark:text-gray-500">
-							{$i18n.t(`Open WebUI uses faster-whisper internally.`)}
-
-							<a
-								class=" hover:underline dark:text-gray-200 text-gray-800"
-								href="https://github.com/SYSTRAN/faster-whisper"
-								target="_blank"
-							>
-								{$i18n.t(
-									`Click here to learn more about faster-whisper and see the available models.`
-								)}
-							</a>
-						</div>
-					</div>
-				{/if}
-			</div>
-
-			<div>
-				<div class=" mb-2 text-xs text-gray-400 dark:text-gray-600">
-					{$i18n.t('Text-to-Speech')}
-				</div>
-
-				<div class="mb-2 py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-						{$i18n.t('Text-to-Speech Engine')}
-					</div>
-					<div class="flex items-center relative">
-						<SettingsSelect
-							bind:value={TTS_ENGINE}
-							placeholder={$i18n.t('Select a mode')}
-							on:change={async (e) => {
-								await updateConfigHandler();
-								await getVoices();
-								await getModels();
-
-								if (e.target?.value === 'openai') {
-									TTS_VOICE = 'alloy';
-									TTS_MODEL = 'tts-1';
-								} else if (e.target?.value === 'mistral') {
-									TTS_VOICE = '';
-									TTS_MODEL = 'voxtral-mini-tts-2603';
-								} else {
-									TTS_VOICE = '';
-									TTS_MODEL = '';
-								}
-							}}
-						>
-							<option value="">{$i18n.t('Web API')}</option>
-							<option value="transformers">{$i18n.t('Transformers')} ({$i18n.t('Local')})</option>
-							<option value="openai">{$i18n.t('OpenAI')}</option>
-							<option value="elevenlabs">{$i18n.t('ElevenLabs')}</option>
-							<option value="azure">{$i18n.t('Azure AI Speech')}</option>
-							<option value="mistral">{$i18n.t('MistralAI')}</option>
-						</SettingsSelect>
-					</div>
-				</div>
-
-				{#if TTS_ENGINE === 'openai'}
-					<div>
-						<div class="mt-1 flex gap-2 mb-1">
-							<input
-								class="flex-1 w-full border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-								placeholder={$i18n.t('API Base URL')}
-								bind:value={TTS_OPENAI_API_BASE_URL}
-								required
-							/>
-
-							<SensitiveInput
-								variant="settings"
-								placeholder={$i18n.t('API Key')}
-								bind:value={TTS_OPENAI_API_KEY}
-							/>
-						</div>
-					</div>
-				{:else if TTS_ENGINE === 'elevenlabs'}
-					<div>
-						<div class="mt-1 flex gap-2 mb-1">
-							<SensitiveInput
-								variant="settings"
-								placeholder={$i18n.t('API Key')}
-								bind:value={TTS_API_KEY}
-								required
-							/>
-						</div>
-					</div>
-				{:else if TTS_ENGINE === 'azure'}
-					<div>
-						<div class="mt-1 flex gap-2 mb-1">
-							<SensitiveInput
-								variant="settings"
-								placeholder={$i18n.t('API Key')}
-								bind:value={TTS_API_KEY}
-								required
-							/>
-						</div>
-
-						<div>
-							<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-								{$i18n.t('Azure Region')}
-							</div>
-							<div class="flex w-full">
-								<div class="flex-1">
-									<input
-										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-										bind:value={TTS_AZURE_SPEECH_REGION}
-										placeholder={$i18n.t('e.g., westus (leave blank for eastus)')}
-									/>
-								</div>
-							</div>
-						</div>
-
-						<div>
-							<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-								{$i18n.t('Endpoint URL')}
-							</div>
-							<div class="flex w-full">
-								<div class="flex-1">
-									<input
-										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-										bind:value={TTS_AZURE_SPEECH_BASE_URL}
-										placeholder={$i18n.t('(leave blank for to use commercial endpoint)')}
-									/>
-								</div>
-							</div>
-						</div>
-					</div>
-				{:else if TTS_ENGINE === 'mistral'}
-					<div>
-						<div class="mt-1 flex gap-2 mb-1">
-							<input
-								class="flex-1 w-full border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-								placeholder={$i18n.t('API Base URL')}
-								bind:value={TTS_MISTRAL_API_BASE_URL}
-								required
-							/>
-
-							<SensitiveInput
-								variant="settings"
-								placeholder={$i18n.t('API Key')}
-								bind:value={TTS_MISTRAL_API_KEY}
-							/>
-						</div>
-					</div>
-				{/if}
-
-				<div class="mb-2">
-					{#if TTS_ENGINE === ''}
-						<div>
-							<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-								{$i18n.t('TTS Voice')}
-							</div>
-							<div class="flex w-full">
-								<div class="flex-1">
-									<SettingsSelect bind:value={TTS_VOICE} className="w-full">
-										<option value="" selected={TTS_VOICE !== ''}>{$i18n.t('Default')}</option>
-										{#each voices as voice}
-											<option
-												value={voice.voiceURI}
-												class="bg-gray-100 dark:bg-gray-700"
-												selected={TTS_VOICE === voice.voiceURI}>{voice.name}</option
-											>
-										{/each}
-									</SettingsSelect>
-								</div>
-							</div>
-						</div>
-					{:else if TTS_ENGINE === 'transformers'}
-						<div>
-							<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-								{$i18n.t('TTS Model')}
-							</div>
-							<div class="flex w-full">
-								<div class="flex-1">
-									<input
-										list="model-list"
-										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-										bind:value={TTS_MODEL}
-										placeholder={$i18n.t('CMU ARCTIC speaker embedding name')}
-									/>
-
-									<datalist id="model-list">
-										<option value="tts-1" />
-									</datalist>
-								</div>
-							</div>
-							<div class="mt-2 mb-1 text-xs text-gray-400 dark:text-gray-500">
-								{$i18n.t(`Open WebUI uses SpeechT5 and CMU Arctic speaker embeddings.`)}
-
-								To learn more about SpeechT5,
-
-								<a
-									class=" hover:underline dark:text-gray-200 text-gray-800"
-									href="https://github.com/microsoft/SpeechT5"
-									target="_blank"
-								>
-									{$i18n.t(`click here`, {
-										name: 'SpeechT5'
-									})}.
-								</a>
-								To see the available CMU Arctic speaker embeddings,
-								<a
-									class=" hover:underline dark:text-gray-200 text-gray-800"
-									href="https://huggingface.co/datasets/Matthijs/cmu-arctic-xvectors"
-									target="_blank"
-								>
-									{$i18n.t(`click here`)}.
-								</a>
-							</div>
-						</div>
-					{:else if TTS_ENGINE === 'openai'}
-						<div class=" flex gap-2">
-							<div class="w-full">
-								<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-									{$i18n.t('TTS Voice')}
-								</div>
-								<div class="flex w-full">
-									<div class="flex-1">
-										<TTSVoiceInput
-											bind:value={TTS_VOICE}
-											voices={providerVoices}
-											placeholder={$i18n.t('Select a voice')}
-											className="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-										/>
-									</div>
-								</div>
-							</div>
-							<div class="w-full">
-								<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-									{$i18n.t('TTS Model')}
-								</div>
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											list="tts-model-list"
-											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-											bind:value={TTS_MODEL}
-											placeholder={$i18n.t('Select a model')}
-										/>
-
-										<datalist id="tts-model-list">
-											{#each models as model}
-												<option value={model.id} class="bg-gray-50 dark:bg-gray-700" />
-											{/each}
-										</datalist>
-									</div>
-								</div>
-							</div>
-						</div>
-
-						<div class="mt-2 mb-1 text-xs text-gray-400 dark:text-gray-500">
-							<div class="w-full">
-								<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-									{$i18n.t('Additional Parameters')}
-								</div>
-								<div class="flex w-full">
-									<div class="flex-1">
-										<Textarea
-											className="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-											bind:value={TTS_OPENAI_PARAMS}
-											placeholder={$i18n.t('Enter additional parameters in JSON format')}
-											minSize={100}
-										/>
-									</div>
-								</div>
-							</div>
-						</div>
-					{:else if TTS_ENGINE === 'elevenlabs'}
-						<div class=" flex gap-2">
-							<div class="w-full">
-								<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-									{$i18n.t('TTS Voice')}
-								</div>
-								<div class="flex w-full">
-									<div class="flex-1">
-										<TTSVoiceInput
-											bind:value={TTS_VOICE}
-											voices={providerVoices}
-											placeholder={$i18n.t('Select a voice')}
-											className="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-										/>
-									</div>
-								</div>
-							</div>
-							<div class="w-full">
-								<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-									{$i18n.t('TTS Model')}
-								</div>
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											list="tts-model-list"
-											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-											bind:value={TTS_MODEL}
-											placeholder={$i18n.t('Select a model')}
-										/>
-
-										<datalist id="tts-model-list">
-											{#each models as model}
-												<option value={model.id} class="bg-gray-50 dark:bg-gray-700" />
-											{/each}
-										</datalist>
-									</div>
-								</div>
-							</div>
-						</div>
-					{:else if TTS_ENGINE === 'azure'}
-						<div class=" flex gap-2">
-							<div class="w-full">
-								<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-									{$i18n.t('TTS Voice')}
-								</div>
-								<div class="flex w-full">
-									<div class="flex-1">
-										<TTSVoiceInput
-											bind:value={TTS_VOICE}
-											voices={providerVoices}
-											placeholder={$i18n.t('Select a voice')}
-											className="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-										/>
-									</div>
-								</div>
-							</div>
-							<div class="w-full">
-								<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-									{$i18n.t('Output format')}
-									<a
-										href="https://learn.microsoft.com/en-us/azure/ai-services/speech-service/rest-text-to-speech?tabs=streaming#audio-outputs"
-										target="_blank"
-									>
-										<small>{$i18n.t('Available list')}</small>
-									</a>
-								</div>
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											list="tts-model-list"
-											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-											bind:value={TTS_AZURE_SPEECH_OUTPUT_FORMAT}
-											placeholder={$i18n.t('Select an output format')}
-										/>
-									</div>
-								</div>
-							</div>
-						</div>
-					{:else if TTS_ENGINE === 'mistral'}
-						<div class=" flex gap-2">
-							<div class="w-full">
-								<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-									{$i18n.t('TTS Voice')}
-								</div>
-								<div class="flex w-full">
-									<div class="flex-1">
-										<TTSVoiceInput
-											bind:value={TTS_VOICE}
-											voices={providerVoices}
-											placeholder={$i18n.t('Select a voice')}
-											className="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-										/>
-									</div>
-								</div>
-							</div>
-							<div class="w-full">
-								<div class=" mb-1.5 text-xs text-gray-600 dark:text-gray-400">
-									{$i18n.t('TTS Model')}
-								</div>
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											list="tts-model-list"
-											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-											bind:value={TTS_MODEL}
-											placeholder={$i18n.t('Select a model')}
-										/>
-
-										<datalist id="tts-model-list">
-											{#each models as model}
-												<option value={model.id} class="bg-gray-50 dark:bg-gray-700" />
-											{/each}
-										</datalist>
-									</div>
-								</div>
-							</div>
-						</div>
-					{/if}
-				</div>
-
-				<div class="pt-0.5 flex w-full justify-between">
-					<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-						{$i18n.t('Response splitting')}
-					</div>
-					<div class="flex items-center relative">
-						<SettingsSelect
-							aria-label={$i18n.t('Select how to split message text for TTS requests')}
-							bind:value={TTS_SPLIT_ON}
-						>
-							{#each Object.values(TTS_RESPONSE_SPLIT) as split}
-								<option value={split}
-									>{$i18n.t(split.charAt(0).toUpperCase() + split.slice(1))}</option
-								>
-							{/each}
-						</SettingsSelect>
-					</div>
-				</div>
-				<div class="mt-2 mb-1 text-xs text-gray-400 dark:text-gray-500">
-					{$i18n.t(
-						"Control how message text is split for TTS requests. 'Punctuation' splits into sentences, 'paragraphs' splits into paragraphs, and 'none' keeps the message as a single string."
+				<AdminSettingRow
+					label={$i18n.t('Use Chat Completions API')}
+					description={$i18n.t(
+						'Use /v1/chat/completions endpoint instead of /v1/audio/transcriptions for potentially better accuracy.'
 					)}
+				>
+					<Switch bind:state={STT_MISTRAL_USE_CHAT_COMPLETIONS} />
+				</AdminSettingRow>
+			{:else if STT_ENGINE === ''}
+				<AdminSettingField
+					label={$i18n.t('STT Model')}
+					description={$i18n.t('Open WebUI uses faster-whisper internally.')}
+				>
+					<div class="flex w-full gap-2">
+						<input
+							class={inputClass}
+							placeholder={$i18n.t('Set whisper model')}
+							bind:value={STT_WHISPER_MODEL}
+						/>
+						<button
+							class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-black/5 hover:text-gray-900 disabled:opacity-50 dark:text-gray-500 dark:hover:bg-white/5 dark:hover:text-white"
+							type="button"
+							on:click={() => {
+								sttModelUpdateHandler();
+							}}
+							disabled={STT_WHISPER_MODEL_LOADING}
+							aria-label={$i18n.t('Update model')}
+						>
+							{#if STT_WHISPER_MODEL_LOADING}
+								<Spinner />
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 16 16"
+									fill="currentColor"
+									class="size-4"
+								>
+									<path
+										d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
+									/>
+									<path
+										d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
+									/>
+								</svg>
+							{/if}
+						</button>
+					</div>
+					<div class="mt-1 {linkedHelpClass}">
+						<a href="https://github.com/SYSTRAN/faster-whisper" target="_blank">
+							{$i18n.t(
+								'Click here to learn more about faster-whisper and see the available models.'
+							)}
+						</a>
+					</div>
+				</AdminSettingField>
+			{/if}
+		</AdminSettingSection>
+
+		<AdminSettingSection title={$i18n.t('Text-to-Speech')}>
+			<AdminSettingRow
+				label={$i18n.t('Text-to-Speech Engine')}
+				description={$i18n.t('Choose the speech provider used for assistant audio output.')}
+			>
+				<SettingsSelect
+					bind:value={TTS_ENGINE}
+					placeholder={$i18n.t('Select a mode')}
+					on:change={async (e) => {
+						await updateConfigHandler();
+						await getVoices();
+						await getModels();
+
+						const value = (e.currentTarget as HTMLSelectElement).value;
+
+						if (value === 'openai') {
+							TTS_VOICE = 'alloy';
+							TTS_MODEL = 'tts-1';
+						} else if (value === 'mistral') {
+							TTS_VOICE = '';
+							TTS_MODEL = 'voxtral-mini-tts-2603';
+						} else {
+							TTS_VOICE = '';
+							TTS_MODEL = '';
+						}
+					}}
+				>
+					<option value="">{$i18n.t('Web API')}</option>
+					<option value="transformers">{$i18n.t('Transformers')} ({$i18n.t('Local')})</option>
+					<option value="openai">{$i18n.t('OpenAI')}</option>
+					<option value="elevenlabs">{$i18n.t('ElevenLabs')}</option>
+					<option value="azure">{$i18n.t('Azure AI Speech')}</option>
+					<option value="mistral">{$i18n.t('MistralAI')}</option>
+				</SettingsSelect>
+			</AdminSettingRow>
+
+			{#if TTS_ENGINE === 'openai'}
+				<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+					<AdminSettingField label={$i18n.t('API Base URL')}>
+						<input
+							class={inputClass}
+							placeholder={$i18n.t('API Base URL')}
+							bind:value={TTS_OPENAI_API_BASE_URL}
+							required
+						/>
+					</AdminSettingField>
+					<AdminSettingField label={$i18n.t('API Key')}>
+						<SensitiveInput
+							variant="settings"
+							placeholder={$i18n.t('API Key')}
+							bind:value={TTS_OPENAI_API_KEY}
+						/>
+					</AdminSettingField>
 				</div>
-			</div>
-		</div>
+			{:else if TTS_ENGINE === 'elevenlabs'}
+				<AdminSettingField label={$i18n.t('API Key')}>
+					<SensitiveInput
+						variant="settings"
+						placeholder={$i18n.t('API Key')}
+						bind:value={TTS_API_KEY}
+						required
+					/>
+				</AdminSettingField>
+			{:else if TTS_ENGINE === 'azure'}
+				<AdminSettingField label={$i18n.t('API Key')}>
+					<SensitiveInput
+						variant="settings"
+						placeholder={$i18n.t('API Key')}
+						bind:value={TTS_API_KEY}
+						required
+					/>
+				</AdminSettingField>
+
+				<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+					<AdminSettingField label={$i18n.t('Azure Region')}>
+						<input
+							class={inputClass}
+							bind:value={TTS_AZURE_SPEECH_REGION}
+							placeholder={$i18n.t('e.g., westus (leave blank for eastus)')}
+						/>
+					</AdminSettingField>
+					<AdminSettingField label={$i18n.t('Endpoint URL')}>
+						<input
+							class={inputClass}
+							bind:value={TTS_AZURE_SPEECH_BASE_URL}
+							placeholder={$i18n.t('(leave blank for to use commercial endpoint)')}
+						/>
+					</AdminSettingField>
+				</div>
+			{:else if TTS_ENGINE === 'mistral'}
+				<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+					<AdminSettingField label={$i18n.t('API Base URL')}>
+						<input
+							class={inputClass}
+							placeholder={$i18n.t('API Base URL')}
+							bind:value={TTS_MISTRAL_API_BASE_URL}
+							required
+						/>
+					</AdminSettingField>
+					<AdminSettingField label={$i18n.t('API Key')}>
+						<SensitiveInput
+							variant="settings"
+							placeholder={$i18n.t('API Key')}
+							bind:value={TTS_MISTRAL_API_KEY}
+						/>
+					</AdminSettingField>
+				</div>
+			{/if}
+
+			{#if TTS_ENGINE === ''}
+				<AdminSettingField label={$i18n.t('TTS Voice')}>
+					<SettingsSelect bind:value={TTS_VOICE} className="w-full">
+						<option value="" selected={TTS_VOICE !== ''}>{$i18n.t('Default')}</option>
+						{#each voices as voice}
+							<option
+								value={voice.voiceURI}
+								class="bg-gray-100 dark:bg-gray-700"
+								selected={TTS_VOICE === voice.voiceURI}>{voice.name}</option
+							>
+						{/each}
+					</SettingsSelect>
+				</AdminSettingField>
+			{:else if TTS_ENGINE === 'transformers'}
+				<AdminSettingField
+					label={$i18n.t('TTS Model')}
+					description={$i18n.t('Open WebUI uses SpeechT5 and CMU Arctic speaker embeddings.')}
+				>
+					<input
+						list="tts-transformers-model-list"
+						class={inputClass}
+						bind:value={TTS_MODEL}
+						placeholder={$i18n.t('CMU ARCTIC speaker embedding name')}
+					/>
+					<datalist id="tts-transformers-model-list">
+						<option value="tts-1"></option>
+					</datalist>
+					<div class="mt-1 {linkedHelpClass}">
+						{$i18n.t('To learn more about SpeechT5,')}
+						<a href="https://github.com/microsoft/SpeechT5" target="_blank">
+							{$i18n.t('click here')}.
+						</a>
+						{$i18n.t('To see the available CMU Arctic speaker embeddings,')}
+						<a href="https://huggingface.co/datasets/Matthijs/cmu-arctic-xvectors" target="_blank">
+							{$i18n.t('click here')}.
+						</a>
+					</div>
+				</AdminSettingField>
+			{:else if TTS_ENGINE === 'openai'}
+				<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+					<AdminSettingField label={$i18n.t('TTS Voice')}>
+						<TTSVoiceInput
+							bind:value={TTS_VOICE}
+							voices={providerVoices}
+							placeholder={$i18n.t('Select a voice')}
+							className={inputClass}
+						/>
+					</AdminSettingField>
+					<AdminSettingField label={$i18n.t('TTS Model')}>
+						<input
+							list="tts-model-list"
+							class={inputClass}
+							bind:value={TTS_MODEL}
+							placeholder={$i18n.t('Select a model')}
+						/>
+					</AdminSettingField>
+				</div>
+				<AdminSettingField
+					label={$i18n.t('Additional Parameters')}
+					description={$i18n.t(
+						'Enter additional OpenAI-compatible TTS request parameters as JSON.'
+					)}
+				>
+					<Textarea
+						className={textareaClass}
+						bind:value={TTS_OPENAI_PARAMS}
+						placeholder={$i18n.t('Enter additional parameters in JSON format')}
+					/>
+				</AdminSettingField>
+			{:else if TTS_ENGINE === 'elevenlabs' || TTS_ENGINE === 'mistral'}
+				<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+					<AdminSettingField label={$i18n.t('TTS Voice')}>
+						<TTSVoiceInput
+							bind:value={TTS_VOICE}
+							voices={providerVoices}
+							placeholder={$i18n.t('Select a voice')}
+							className={inputClass}
+						/>
+					</AdminSettingField>
+					<AdminSettingField label={$i18n.t('TTS Model')}>
+						<input
+							list="tts-model-list"
+							class={inputClass}
+							bind:value={TTS_MODEL}
+							placeholder={$i18n.t('Select a model')}
+						/>
+					</AdminSettingField>
+				</div>
+			{:else if TTS_ENGINE === 'azure'}
+				<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+					<AdminSettingField label={$i18n.t('TTS Voice')}>
+						<TTSVoiceInput
+							bind:value={TTS_VOICE}
+							voices={providerVoices}
+							placeholder={$i18n.t('Select a voice')}
+							className={inputClass}
+						/>
+					</AdminSettingField>
+					<AdminSettingField label={$i18n.t('Output format')}>
+						<input
+							class={inputClass}
+							bind:value={TTS_AZURE_SPEECH_OUTPUT_FORMAT}
+							placeholder={$i18n.t('Select an output format')}
+						/>
+						<div class="mt-1 {linkedHelpClass}">
+							<a
+								href="https://learn.microsoft.com/en-us/azure/ai-services/speech-service/rest-text-to-speech?tabs=streaming#audio-outputs"
+								target="_blank"
+							>
+								{$i18n.t('Available list')}
+							</a>
+						</div>
+					</AdminSettingField>
+				</div>
+			{/if}
+
+			<datalist id="tts-model-list">
+				{#each models as model}
+					<option value={model.id} class="bg-gray-50 dark:bg-gray-700"></option>
+				{/each}
+			</datalist>
+
+			<AdminSettingRow
+				label={$i18n.t('Response Splitting')}
+				description={$i18n.t(
+					"Control how message text is split for TTS requests. 'Punctuation' splits into sentences, 'paragraphs' splits into paragraphs, and 'none' keeps the message as a single string."
+				)}
+			>
+				<SettingsSelect
+					aria-label={$i18n.t('Select how to split message text for TTS requests')}
+					bind:value={TTS_SPLIT_ON}
+				>
+					{#each Object.values(TTS_RESPONSE_SPLIT) as split}
+						<option value={split}>{$i18n.t(split.charAt(0).toUpperCase() + split.slice(1))}</option>
+					{/each}
+				</SettingsSelect>
+			</AdminSettingRow>
+		</AdminSettingSection>
 	</div>
 	<div class="flex justify-end pt-6 text-sm font-normal">
 		<button
diff --git a/src/lib/components/admin/Settings/CodeExecution.svelte b/src/lib/components/admin/Settings/CodeExecution.svelte
index bd8290810f..65f3c180bd 100644
--- a/src/lib/components/admin/Settings/CodeExecution.svelte
+++ b/src/lib/components/admin/Settings/CodeExecution.svelte
@@ -4,7 +4,6 @@
 
 	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
 
-	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Textarea from '$lib/components/common/Textarea.svelte';
 	import Switch from '$lib/components/common/Switch.svelte';
 	import AdminSettingField from './AdminSettingField.svelte';
@@ -23,8 +22,6 @@
 		'w-full h-7 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 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 inlineInputClass =
-		'w-fit h-7 rounded-lg border border-transparent bg-transparent px-2 text-xs text-gray-600 outline-hidden transition-colors hover:bg-black/5 focus:border-blue-400 dark:text-gray-400 dark:hover:bg-white/5 dark:focus:border-blue-500';
 
 	const submitHandler = async () => {
 		const res = await setCodeExecutionConfig(localStorage.token, config);
@@ -52,8 +49,11 @@
 
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if config}
-			<AdminSettingSection first>
-				<AdminSettingRow label={$i18n.t('Enable Code Execution')}>
+			<AdminSettingSection title={$i18n.t('Code Execution')} first>
+				<AdminSettingRow
+					label={$i18n.t('Enable Code Execution')}
+					description={$i18n.t('Allow models to run generated code and return execution results.')}
+				>
 					<Switch bind:state={config.ENABLE_CODE_EXECUTION} />
 				</AdminSettingRow>
 
@@ -64,7 +64,7 @@
 							? $i18n.t(
 									'Warning: Jupyter execution enables arbitrary code execution, posing severe security risks—proceed with extreme caution.'
 								)
-							: ''}
+							: $i18n.t('Choose the runtime used for generated code blocks.')}
 					>
 						<SettingsSelect
 							bind:value={config.CODE_EXECUTION_ENGINE}
@@ -79,7 +79,10 @@
 					</AdminSettingRow>
 
 					{#if config.CODE_EXECUTION_ENGINE === 'jupyter'}
-						<AdminSettingField label={$i18n.t('Jupyter URL')}>
+						<AdminSettingField
+							label={$i18n.t('Jupyter URL')}
+							description={$i18n.t('Connect code execution to a Jupyter server endpoint.')}
+						>
 							<input
 								class={inputClass}
 								type="text"
@@ -89,7 +92,10 @@
 							/>
 						</AdminSettingField>
 
-						<AdminSettingRow label={$i18n.t('Jupyter Auth')}>
+						<AdminSettingRow
+							label={$i18n.t('Jupyter Auth')}
+							description={$i18n.t('Select how Open WebUI authenticates with the Jupyter server.')}
+						>
 							<SettingsSelect
 								bind:value={config.CODE_EXECUTION_JUPYTER_AUTH}
 								placeholder={$i18n.t('Select an auth method')}
@@ -105,6 +111,7 @@
 								label={config.CODE_EXECUTION_JUPYTER_AUTH === 'password'
 									? $i18n.t('Jupyter Password')
 									: $i18n.t('Jupyter Token')}
+								description={$i18n.t('Credentials used to authenticate with the Jupyter server.')}
 							>
 								{#if config.CODE_EXECUTION_JUPYTER_AUTH === 'password'}
 									<SensitiveInput
@@ -126,23 +133,27 @@
 							</AdminSettingField>
 						{/if}
 
-						<AdminSettingRow label={$i18n.t('Code Execution Timeout')}>
-							<Tooltip content={$i18n.t('Enter timeout in seconds')}>
-								<input
-									class={inlineInputClass}
-									type="number"
-									bind:value={config.CODE_EXECUTION_JUPYTER_TIMEOUT}
-									placeholder={$i18n.t('e.g. 60')}
-									autocomplete="off"
-								/>
-							</Tooltip>
-						</AdminSettingRow>
+						<AdminSettingField
+							label={$i18n.t('Code Execution Timeout')}
+							description={$i18n.t('Maximum runtime in seconds before execution is stopped.')}
+						>
+							<input
+								class={inputClass}
+								type="number"
+								bind:value={config.CODE_EXECUTION_JUPYTER_TIMEOUT}
+								placeholder={$i18n.t('e.g. 60')}
+								autocomplete="off"
+							/>
+						</AdminSettingField>
 					{/if}
 				{/if}
 			</AdminSettingSection>
 
 			<AdminSettingSection title={$i18n.t('Code Interpreter')}>
-				<AdminSettingRow label={$i18n.t('Enable Code Interpreter')}>
+				<AdminSettingRow
+					label={$i18n.t('Enable Code Interpreter')}
+					description={$i18n.t('Allow models to use the code interpreter tool during chats.')}
+				>
 					<Switch bind:state={config.ENABLE_CODE_INTERPRETER} />
 				</AdminSettingRow>
 
@@ -153,7 +164,7 @@
 							? $i18n.t(
 									'Warning: Jupyter execution enables arbitrary code execution, posing severe security risks—proceed with extreme caution.'
 								)
-							: ''}
+							: $i18n.t('Choose the runtime used by the code interpreter tool.')}
 					>
 						<SettingsSelect
 							bind:value={config.CODE_INTERPRETER_ENGINE}
@@ -168,7 +179,10 @@
 					</AdminSettingRow>
 
 					{#if config.CODE_INTERPRETER_ENGINE === 'jupyter'}
-						<AdminSettingField label={$i18n.t('Jupyter URL')}>
+						<AdminSettingField
+							label={$i18n.t('Jupyter URL')}
+							description={$i18n.t('Connect code interpreter to a Jupyter server endpoint.')}
+						>
 							<input
 								class={inputClass}
 								type="text"
@@ -178,7 +192,10 @@
 							/>
 						</AdminSettingField>
 
-						<AdminSettingRow label={$i18n.t('Jupyter Auth')}>
+						<AdminSettingRow
+							label={$i18n.t('Jupyter Auth')}
+							description={$i18n.t('Select how Open WebUI authenticates with the Jupyter server.')}
+						>
 							<SettingsSelect
 								bind:value={config.CODE_INTERPRETER_JUPYTER_AUTH}
 								placeholder={$i18n.t('Select an auth method')}
@@ -194,6 +211,7 @@
 								label={config.CODE_INTERPRETER_JUPYTER_AUTH === 'password'
 									? $i18n.t('Jupyter Password')
 									: $i18n.t('Jupyter Token')}
+								description={$i18n.t('Credentials used to authenticate with the Jupyter server.')}
 							>
 								{#if config.CODE_INTERPRETER_JUPYTER_AUTH === 'password'}
 									<SensitiveInput
@@ -215,32 +233,33 @@
 							</AdminSettingField>
 						{/if}
 
-						<AdminSettingRow label={$i18n.t('Code Execution Timeout')}>
-							<Tooltip content={$i18n.t('Enter timeout in seconds')}>
-								<input
-									class={inlineInputClass}
-									type="number"
-									bind:value={config.CODE_INTERPRETER_JUPYTER_TIMEOUT}
-									placeholder={$i18n.t('e.g. 60')}
-									autocomplete="off"
-								/>
-							</Tooltip>
-						</AdminSettingRow>
+						<AdminSettingField
+							label={$i18n.t('Code Execution Timeout')}
+							description={$i18n.t('Maximum runtime in seconds before execution is stopped.')}
+						>
+							<input
+								class={inputClass}
+								type="number"
+								bind:value={config.CODE_INTERPRETER_JUPYTER_TIMEOUT}
+								placeholder={$i18n.t('e.g. 60')}
+								autocomplete="off"
+							/>
+						</AdminSettingField>
 					{/if}
 
-					<AdminSettingField label={$i18n.t('Code Interpreter Prompt Template')}>
-						<Tooltip
-							content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
-							placement="top-start"
-						>
-							<Textarea
-								className={textareaClass}
-								bind:value={config.CODE_INTERPRETER_PROMPT_TEMPLATE}
-								placeholder={$i18n.t(
-									'Leave empty to use the default prompt, or enter a custom prompt'
-								)}
-							/>
-						</Tooltip>
+					<AdminSettingField
+						label={$i18n.t('Code Interpreter Prompt Template')}
+						description={$i18n.t(
+							'Leave empty to use the default prompt, or enter a custom prompt.'
+						)}
+					>
+						<Textarea
+							className={textareaClass}
+							bind:value={config.CODE_INTERPRETER_PROMPT_TEMPLATE}
+							placeholder={$i18n.t(
+								'Leave empty to use the default prompt, or enter a custom prompt'
+							)}
+						/>
 					</AdminSettingField>
 				{/if}
 			</AdminSettingSection>
diff --git a/src/lib/components/admin/Settings/Documents.svelte b/src/lib/components/admin/Settings/Documents.svelte
index e9e9a8c100..2e805d4860 100644
--- a/src/lib/components/admin/Settings/Documents.svelte
+++ b/src/lib/components/admin/Settings/Documents.svelte
@@ -29,6 +29,9 @@
 	import Textarea from '$lib/components/common/Textarea.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import SettingsSelect from '$lib/components/common/SettingsSelect.svelte';
+	import AdminSettingField from './AdminSettingField.svelte';
+	import AdminSettingRow from './AdminSettingRow.svelte';
+	import AdminSettingSection from './AdminSettingSection.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -67,6 +70,10 @@
 	};
 
 	let RAGConfig = null;
+	const inputClass =
+		'w-full h-7 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';
 	const textareaClass =
 		'w-full 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';
 
@@ -379,1383 +386,1105 @@
 
 	{#if RAGConfig}
 		<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
-			<div class="">
-				<div class="mb-5">
-					<div class="mb-2.5 flex flex-col w-full justify-between">
-						<div class="flex w-full justify-between mb-1">
-							<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-								{$i18n.t('Content Extraction Engine')}
-							</div>
-							<div class="">
-								<SettingsSelect bind:value={RAGConfig.CONTENT_EXTRACTION_ENGINE}>
-									<option value="">{$i18n.t('Default')}</option>
-									<option value="external">{$i18n.t('External')}</option>
-									<option value="tika">{$i18n.t('Tika')}</option>
-									<option value="docling">{$i18n.t('Docling')}</option>
-									<option value="datalab_marker">{$i18n.t('Datalab Marker API')}</option>
-									<option value="document_intelligence">{$i18n.t('Document Intelligence')}</option>
-									<option value="mistral_ocr">{$i18n.t('Mistral OCR')}</option>
-									<option value="paddleocr_vl">{$i18n.t('PaddleOCR-vl')}</option>
-									<option value="mineru">{$i18n.t('MinerU')}</option>
-								</SettingsSelect>
-							</div>
-						</div>
+			<AdminSettingSection title={$i18n.t('Content Extraction')} first>
+				<AdminSettingRow
+					label={$i18n.t('Content Extraction Engine')}
+					description={$i18n.t('Choose how uploaded documents are parsed before indexing.')}
+				>
+					<SettingsSelect bind:value={RAGConfig.CONTENT_EXTRACTION_ENGINE}>
+						<option value="">{$i18n.t('Default')}</option>
+						<option value="external">{$i18n.t('External')}</option>
+						<option value="tika">{$i18n.t('Tika')}</option>
+						<option value="docling">{$i18n.t('Docling')}</option>
+						<option value="datalab_marker">{$i18n.t('Datalab Marker API')}</option>
+						<option value="document_intelligence">{$i18n.t('Document Intelligence')}</option>
+						<option value="mistral_ocr">{$i18n.t('Mistral OCR')}</option>
+						<option value="paddleocr_vl">{$i18n.t('PaddleOCR-vl')}</option>
+						<option value="mineru">{$i18n.t('MinerU')}</option>
+					</SettingsSelect>
+				</AdminSettingRow>
 
-						{#if RAGConfig.CONTENT_EXTRACTION_ENGINE === ''}
-							<div class="flex w-full mt-1">
-								<div class="flex-1 flex justify-between">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-										{$i18n.t('PDF Extract Images (OCR)')}
-									</div>
-									<div class="flex items-center relative">
-										<Switch bind:state={RAGConfig.PDF_EXTRACT_IMAGES} />
-									</div>
-								</div>
-							</div>
+				{#if RAGConfig.CONTENT_EXTRACTION_ENGINE === ''}
+					<AdminSettingRow
+						label={$i18n.t('PDF Extract Images (OCR)')}
+						description={$i18n.t('Extract images from PDFs so OCR can process image-only pages.')}
+					>
+						<Switch bind:state={RAGConfig.PDF_EXTRACT_IMAGES} />
+					</AdminSettingRow>
 
-							<div class="flex w-full mt-2">
-								<div class="flex-1 flex justify-between">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-										<Tooltip
-											content={$i18n.t(
-												'Page mode creates one document per page. Single mode combines all pages into one document for better chunking across page boundaries.'
-											)}
-											placement="top-start"
-										>
-											{$i18n.t('PDF Loader Mode')}
-										</Tooltip>
-									</div>
-									<div class="">
-										<SettingsSelect bind:value={RAGConfig.PDF_LOADER_MODE}>
-											<option value="page">{$i18n.t('Page')}</option>
-											<option value="single">{$i18n.t('Single')}</option>
-										</SettingsSelect>
-									</div>
-								</div>
-							</div>
-						{:else if RAGConfig.CONTENT_EXTRACTION_ENGINE === 'datalab_marker'}
-							<div class="my-0.5 flex gap-2 pr-2">
-								<Tooltip
-									content={$i18n.t(
-										'API Base URL for Datalab Marker service. Defaults to: https://www.datalab.to/api/v1/marker'
-									)}
-									placement="top-start"
-									className="w-full"
-								>
-									<input
-										class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-										placeholder={$i18n.t('Enter Datalab Marker API Base URL')}
-										bind:value={RAGConfig.DATALAB_MARKER_API_BASE_URL}
-									/>
-								</Tooltip>
-							</div>
-							<div class="my-0.5 flex gap-2 pr-2">
-								<SensitiveInput
-									variant="settings"
-									placeholder={$i18n.t('Enter Datalab Marker API Key')}
-									required={false}
-									bind:value={RAGConfig.DATALAB_MARKER_API_KEY}
-								/>
-							</div>
+					<AdminSettingRow
+						label={$i18n.t('PDF Loader Mode')}
+						description={$i18n.t(
+							'Page mode creates one document per page. Single mode keeps pages together for chunking across boundaries.'
+						)}
+					>
+						<SettingsSelect bind:value={RAGConfig.PDF_LOADER_MODE}>
+							<option value="page">{$i18n.t('Page')}</option>
+							<option value="single">{$i18n.t('Single')}</option>
+						</SettingsSelect>
+					</AdminSettingRow>
+				{:else if RAGConfig.CONTENT_EXTRACTION_ENGINE === 'datalab_marker'}
+					<AdminSettingField
+						label={$i18n.t('API Base URL')}
+						description={$i18n.t('Datalab Marker service endpoint used for document parsing.')}
+					>
+						<input
+							class={inputClass}
+							placeholder={$i18n.t('Enter Datalab Marker API Base URL')}
+							bind:value={RAGConfig.DATALAB_MARKER_API_BASE_URL}
+						/>
+					</AdminSettingField>
 
-							<div class="flex flex-col gap-2 mt-2">
-								<div class=" flex flex-col w-full justify-between">
-									<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-										{$i18n.t('Additional Config')}
-									</div>
-									<div class="flex w-full items-center relative">
-										<Tooltip
-											content={$i18n.t(
-												'Additional configuration options for marker. This should be a JSON string with key-value pairs. For example, \'{"key": "value"}\'. Supported keys include: disable_links, keep_pageheader_in_output, keep_pagefooter_in_output, filter_blank_pages, drop_repeated_text, layout_coverage_threshold, merge_threshold, height_tolerance, gap_threshold, image_threshold, min_line_length, level_count, default_level'
-											)}
-											placement="top-start"
-											className="w-full"
-										>
-											<Textarea
-												className={textareaClass}
-												bind:value={RAGConfig.DATALAB_MARKER_ADDITIONAL_CONFIG}
-												placeholder={$i18n.t('Enter JSON config (e.g., {"disable_links": true})')}
-											/>
-										</Tooltip>
-									</div>
-								</div>
-							</div>
+					<AdminSettingField
+						label={$i18n.t('API Key')}
+						description={$i18n.t('API key used to authenticate with Datalab Marker.')}
+					>
+						<SensitiveInput
+							variant="settings"
+							placeholder={$i18n.t('Enter Datalab Marker API Key')}
+							required={false}
+							bind:value={RAGConfig.DATALAB_MARKER_API_KEY}
+						/>
+					</AdminSettingField>
 
-							<div class="flex justify-between w-full mt-2">
-								<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-									<Tooltip
-										content={$i18n.t(
-											'Significantly improves accuracy by using an LLM to enhance tables, forms, inline math, and layout detection. Will increase latency. Defaults to False.'
-										)}
-										placement="top-start"
-									>
-										{$i18n.t('Use LLM')}
-									</Tooltip>
-								</div>
-								<div class="flex items-center">
-									<Switch bind:state={RAGConfig.DATALAB_MARKER_USE_LLM} />
-								</div>
-							</div>
-							<div class="flex justify-between w-full mt-2">
-								<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-									<Tooltip
-										content={$i18n.t('Skip the cache and re-run the inference. Defaults to False.')}
-										placement="top-start"
-									>
-										{$i18n.t('Skip Cache')}
-									</Tooltip>
-								</div>
-								<div class="flex items-center">
-									<Switch bind:state={RAGConfig.DATALAB_MARKER_SKIP_CACHE} />
-								</div>
-							</div>
-							<div class="flex justify-between w-full mt-2">
-								<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-									<Tooltip
-										content={$i18n.t(
-											'Force OCR on all pages of the PDF. This can lead to worse results if you have good text in your PDFs. Defaults to False.'
-										)}
-										placement="top-start"
-									>
-										{$i18n.t('Force OCR')}
-									</Tooltip>
-								</div>
-								<div class="flex items-center">
-									<Switch bind:state={RAGConfig.DATALAB_MARKER_FORCE_OCR} />
-								</div>
-							</div>
-							<div class="flex justify-between w-full mt-2">
-								<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-									<Tooltip
-										content={$i18n.t(
-											'Whether to paginate the output. Each page will be separated by a horizontal rule and page number. Defaults to False.'
-										)}
-										placement="top-start"
-									>
-										{$i18n.t('Paginate')}
-									</Tooltip>
-								</div>
-								<div class="flex items-center">
-									<Switch bind:state={RAGConfig.DATALAB_MARKER_PAGINATE} />
-								</div>
-							</div>
-							<div class="flex justify-between w-full mt-2">
-								<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-									<Tooltip
-										content={$i18n.t(
-											'Strip existing OCR text from the PDF and re-run OCR. Ignored if Force OCR is enabled. Defaults to False.'
-										)}
-										placement="top-start"
-									>
-										{$i18n.t('Strip Existing OCR')}
-									</Tooltip>
-								</div>
-								<div class="flex items-center">
-									<Switch bind:state={RAGConfig.DATALAB_MARKER_STRIP_EXISTING_OCR} />
-								</div>
-							</div>
-							<div class="flex justify-between w-full mt-2">
-								<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-									<Tooltip
-										content={$i18n.t(
-											'Disable image extraction from the PDF. If Use LLM is enabled, images will be automatically captioned. Defaults to False.'
-										)}
-										placement="top-start"
-									>
-										{$i18n.t('Disable Image Extraction')}
-									</Tooltip>
-								</div>
-								<div class="flex items-center">
-									<Switch bind:state={RAGConfig.DATALAB_MARKER_DISABLE_IMAGE_EXTRACTION} />
-								</div>
-							</div>
-							<div class="flex justify-between w-full mt-2">
-								<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-									<Tooltip
-										content={$i18n.t(
-											'Format the lines in the output. Defaults to False. If set to True, the lines will be formatted to detect inline math and styles.'
-										)}
-										placement="top-start"
-									>
-										{$i18n.t('Format Lines')}
-									</Tooltip>
-								</div>
-								<div class="flex items-center">
-									<Switch bind:state={RAGConfig.DATALAB_MARKER_FORMAT_LINES} />
-								</div>
-							</div>
-							<div class="flex justify-between w-full mt-2">
-								<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-									<Tooltip
-										content={$i18n.t(
-											"The output format for the text. Can be 'json', 'markdown', or 'html'. Defaults to 'markdown'."
-										)}
-										placement="top-start"
-									>
-										{$i18n.t('Output Format')}
-									</Tooltip>
-								</div>
-								<div class="">
-									<SettingsSelect bind:value={RAGConfig.DATALAB_MARKER_OUTPUT_FORMAT}>
-										<option value="markdown">{$i18n.t('Markdown')}</option>
-										<option value="json">{$i18n.t('JSON')}</option>
-										<option value="html">{$i18n.t('HTML')}</option>
-									</SettingsSelect>
-								</div>
-							</div>
-						{:else if RAGConfig.CONTENT_EXTRACTION_ENGINE === 'external'}
-							<div class="my-0.5 flex flex-col gap-2 pr-2">
-								<div class="flex gap-2">
-									<input
-										class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-										placeholder={$i18n.t('Enter External Document Loader URL')}
-										bind:value={RAGConfig.EXTERNAL_DOCUMENT_LOADER_URL}
-									/>
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter External Document Loader API Key')}
-										required={false}
-										bind:value={RAGConfig.EXTERNAL_DOCUMENT_LOADER_API_KEY}
-									/>
-								</div>
-								<div class="flex flex-col">
-									<div class="mb-0.5 text-xs text-gray-500">{$i18n.t('Headers')}</div>
-									<Tooltip
-										content={$i18n.t(
-											'Enter additional headers in JSON format (e.g. {"X-Custom-Header": "value"}'
-										)}
-									>
-										<Textarea
-											className={textareaClass}
-											bind:value={RAGConfig.EXTERNAL_DOCUMENT_LOADER_HEADERS}
-											placeholder={$i18n.t('Enter additional headers in JSON format')}
-											required={false}
-										/>
-									</Tooltip>
-									<button
-										type="button"
-										class="mt-1 flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition w-fit"
-										on:click={() =>
-											(showExternalDocumentLoaderHeadersHint =
-												!showExternalDocumentLoaderHeadersHint)}
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 20 20"
-											fill="currentColor"
-											class="w-3 h-3 transition-transform {showExternalDocumentLoaderHeadersHint
-												? 'rotate-90'
-												: ''}"
-										>
-											<path
-												fill-rule="evenodd"
-												d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
-												clip-rule="evenodd"
-											/>
-										</svg>
-										{$i18n.t('Header variables')}
-									</button>
-									{#if showExternalDocumentLoaderHeadersHint}
-										<div class="mt-1 text-xs text-gray-500 dark:text-gray-400 leading-5">
-											<div>
-												{$i18n.t('No additional headers are sent unless configured.')}
-											</div>
-											<div>
-												{$i18n.t('Example')}:
-												<code class="text-gray-700 dark:text-gray-300"
-													>{'{"X-OpenWebUI-File-Id": "{{FILE_ID}}"}'}</code
-												>
-											</div>
-											<div>
-												{$i18n.t('Available variables')}:
-												<code class="text-gray-700 dark:text-gray-300">{'{{FILE_ID}}'}</code>,
-												<code class="text-gray-700 dark:text-gray-300">{'{{FILE_NAME}}'}</code>,
-												<code class="text-gray-700 dark:text-gray-300"
-													>{'{{FILE_CONTENT_TYPE}}'}</code
-												>
-											</div>
-										</div>
-									{/if}
-								</div>
-							</div>
-						{:else if RAGConfig.CONTENT_EXTRACTION_ENGINE === 'tika'}
-							<div class="flex w-full mt-1">
-								<div class="flex-1 mr-2">
-									<input
-										class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-										placeholder={$i18n.t('Enter Tika Server URL')}
-										bind:value={RAGConfig.TIKA_SERVER_URL}
-									/>
-								</div>
-							</div>
-						{:else if RAGConfig.CONTENT_EXTRACTION_ENGINE === 'docling'}
-							<div class="my-0.5 flex gap-2 pr-2">
-								<input
-									class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-									placeholder={$i18n.t('Enter Docling Server URL')}
-									bind:value={RAGConfig.DOCLING_SERVER_URL}
-								/>
-								<SensitiveInput
-									variant="settings"
-									placeholder={$i18n.t('Enter Docling API Key')}
-									bind:value={RAGConfig.DOCLING_API_KEY}
-									required={false}
-								/>
-							</div>
+					<AdminSettingField
+						label={$i18n.t('Additional Config')}
+						description={$i18n.t('JSON options passed to Marker for advanced parsing behavior.')}
+					>
+						<Tooltip
+							content={$i18n.t(
+								'Additional configuration options for marker. This should be a JSON string with key-value pairs. For example, \'{"key": "value"}\'. Supported keys include: disable_links, keep_pageheader_in_output, keep_pagefooter_in_output, filter_blank_pages, drop_repeated_text, layout_coverage_threshold, merge_threshold, height_tolerance, gap_threshold, image_threshold, min_line_length, level_count, default_level'
+							)}
+							placement="top-start"
+							className="w-full"
+						>
+							<Textarea
+								className={textareaClass}
+								bind:value={RAGConfig.DATALAB_MARKER_ADDITIONAL_CONFIG}
+								placeholder={$i18n.t('Enter JSON config (e.g., {"disable_links": true})')}
+							/>
+						</Tooltip>
+					</AdminSettingField>
 
-							<div class="flex flex-col gap-2 mt-2">
-								<div class=" flex flex-col w-full justify-between">
-									<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-										{$i18n.t('Parameters')}
-									</div>
-									<div class="flex w-full items-center relative">
-										<Textarea
-											className={textareaClass}
-											bind:value={RAGConfig.DOCLING_PARAMS}
-											placeholder={$i18n.t('Enter additional parameters in JSON format')}
-											minSize={100}
-										/>
-									</div>
-								</div>
-							</div>
-						{:else if RAGConfig.CONTENT_EXTRACTION_ENGINE === 'document_intelligence'}
-							<div class="my-0.5 flex gap-2 pr-2">
-								<input
-									class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-									placeholder={$i18n.t('Enter Document Intelligence Endpoint')}
-									bind:value={RAGConfig.DOCUMENT_INTELLIGENCE_ENDPOINT}
-								/>
-								<SensitiveInput
-									variant="settings"
-									placeholder={$i18n.t('Enter Document Intelligence Key')}
-									bind:value={RAGConfig.DOCUMENT_INTELLIGENCE_KEY}
-									required={false}
-								/>
-							</div>
-							<div class="my-0.5 flex flex-col w-full">
-								<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-									{$i18n.t('Document Intelligence Model')}
-								</div>
-								<div class="flex w-full">
-									<div class="flex-1 mr-2">
-										<input
-											class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-											placeholder={$i18n.t('Enter Document Intelligence Model')}
-											bind:value={RAGConfig.DOCUMENT_INTELLIGENCE_MODEL}
-										/>
-									</div>
-								</div>
-							</div>
-						{:else if RAGConfig.CONTENT_EXTRACTION_ENGINE === 'mistral_ocr'}
-							<div class="my-0.5 flex gap-2 pr-2">
-								<input
-									class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-									placeholder={$i18n.t('Enter Mistral API Base URL')}
-									bind:value={RAGConfig.MISTRAL_OCR_API_BASE_URL}
-								/>
-								<SensitiveInput
-									variant="settings"
-									placeholder={$i18n.t('Enter Mistral API Key')}
-									bind:value={RAGConfig.MISTRAL_OCR_API_KEY}
-								/>
-							</div>
-							<div class="flex justify-between w-full mt-2 pr-2">
-								<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-									<Tooltip
-										content={$i18n.t(
-											'Send the PDF as a base64 data URL instead of uploading it first.'
-										)}
-										placement="top-start"
-									>
-										{$i18n.t('Use Base64')}
-									</Tooltip>
-								</div>
-								<div class="flex items-center">
-									<Switch bind:state={RAGConfig.MISTRAL_OCR_USE_BASE64} />
-								</div>
-							</div>
-						{:else if RAGConfig.CONTENT_EXTRACTION_ENGINE === 'paddleocr_vl'}
-							<div class="my-0.5 flex gap-2 pr-2">
-								<input
-									class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-									placeholder={$i18n.t('Enter PaddleOCR-vl API Base URL')}
-									bind:value={RAGConfig.PADDLEOCR_VL_BASE_URL}
-								/>
-								<SensitiveInput
-									variant="settings"
-									placeholder={$i18n.t('Enter PaddleOCR-vl API Token')}
-									bind:value={RAGConfig.PADDLEOCR_VL_TOKEN}
-									required={false}
-								/>
-							</div>
-						{:else if RAGConfig.CONTENT_EXTRACTION_ENGINE === 'mineru'}
-							<!-- API Mode Selection -->
-							<div class="flex w-full mt-2">
-								<div class="flex-1 flex justify-between">
-									<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-										{$i18n.t('API Mode')}
-									</div>
-									<SettingsSelect
-										bind:value={RAGConfig.MINERU_API_MODE}
-										on:change={() => {
-											// Auto-update URL when switching modes if it's empty or matches the opposite mode's default
-											const cloudUrl = 'https://mineru.net/api/v4';
-											const localUrl = 'http://localhost:8000';
-
-											if (RAGConfig.MINERU_API_MODE === 'cloud') {
-												if (!RAGConfig.MINERU_API_URL || RAGConfig.MINERU_API_URL === localUrl) {
-													RAGConfig.MINERU_API_URL = cloudUrl;
-												}
-											} else {
-												if (!RAGConfig.MINERU_API_URL || RAGConfig.MINERU_API_URL === cloudUrl) {
-													RAGConfig.MINERU_API_URL = localUrl;
-												}
-											}
-										}}
-									>
-										<option value="local">{$i18n.t('local')}</option>
-										<option value="cloud">{$i18n.t('cloud')}</option>
-									</SettingsSelect>
-								</div>
-							</div>
-
-							<!-- API URL -->
-							<div class="flex w-full mt-2">
-								<input
-									class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-									placeholder={RAGConfig.MINERU_API_MODE === 'cloud'
-										? $i18n.t('https://mineru.net/api/v4')
-										: $i18n.t('http://localhost:8000')}
-									bind:value={RAGConfig.MINERU_API_URL}
-								/>
-							</div>
-
-							<div class="flex w-full mt-2">
-								<SensitiveInput
-									variant="settings"
-									placeholder={$i18n.t('Enter MinerU API Key')}
-									bind:value={RAGConfig.MINERU_API_KEY}
-								/>
-							</div>
-
-							<div class="flex w-full mt-2">
-								<div class="flex-1 flex justify-between">
-									<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-										{$i18n.t('API Timeout')}
-									</div>
-									<input
-										class="w-16 text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300 text-right"
-										type="number"
-										min="1"
-										bind:value={RAGConfig.MINERU_API_TIMEOUT}
-										placeholder="60"
-									/>
-								</div>
-							</div>
-
-							<!-- Parameters -->
-							<div class="flex flex-col justify-between w-full mt-2">
-								<div class="text-xs text-gray-600 dark:text-gray-400">
-									<Tooltip
-										content={$i18n.t(
-											'Advanced parameters for MinerU parsing (enable_ocr, enable_formula, enable_table, language, model_version, page_ranges)'
-										)}
-										placement="top-start"
-									>
-										{$i18n.t('Parameters')}
-									</Tooltip>
-								</div>
-								<div class="mt-1.5">
-									<Textarea
-										className={textareaClass}
-										bind:value={RAGConfig.MINERU_PARAMS}
-										placeholder={`{\n  "enable_ocr": false,\n  "enable_formula": true,\n  "enable_table": true,\n  "language": "en",\n  "model_version": "pipeline",\n  "page_ranges": ""\n}`}
-										minSize={100}
-									/>
-								</div>
-							</div>
-
-							<!-- File Extensions -->
-							<div class="flex flex-col justify-between w-full mt-2">
-								<div class="text-xs text-gray-600 dark:text-gray-400 mb-1">
-									<Tooltip
-										content={$i18n.t(
-											'Comma-separated list of file extensions MinerU will handle (e.g. pdf, docx, pptx, xlsx)'
-										)}
-										placement="top-start"
-									>
-										{$i18n.t('File Extensions')}
-									</Tooltip>
-								</div>
-								<input
-									class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-									placeholder={$i18n.t('pdf, docx, pptx, xlsx')}
-									bind:value={RAGConfig.MINERU_FILE_EXTENSIONS}
-								/>
-							</div>
-						{/if}
+					<AdminSettingRow
+						label={$i18n.t('Use LLM')}
+						description={$i18n.t(
+							'Use an LLM to improve tables, forms, math, and layout detection.'
+						)}
+					>
+						<Switch bind:state={RAGConfig.DATALAB_MARKER_USE_LLM} />
+					</AdminSettingRow>
+					<AdminSettingRow
+						label={$i18n.t('Skip Cache')}
+						description={$i18n.t('Skip cached Marker results and rerun inference.')}
+					>
+						<Switch bind:state={RAGConfig.DATALAB_MARKER_SKIP_CACHE} />
+					</AdminSettingRow>
+					<AdminSettingRow
+						label={$i18n.t('Force OCR')}
+						description={$i18n.t('Run OCR on all PDF pages, even pages with embedded text.')}
+					>
+						<Switch bind:state={RAGConfig.DATALAB_MARKER_FORCE_OCR} />
+					</AdminSettingRow>
+					<AdminSettingRow
+						label={$i18n.t('Paginate')}
+						description={$i18n.t('Separate output by page with page markers.')}
+					>
+						<Switch bind:state={RAGConfig.DATALAB_MARKER_PAGINATE} />
+					</AdminSettingRow>
+					<AdminSettingRow
+						label={$i18n.t('Strip Existing OCR')}
+						description={$i18n.t('Remove existing OCR text and rerun OCR when Force OCR is off.')}
+					>
+						<Switch bind:state={RAGConfig.DATALAB_MARKER_STRIP_EXISTING_OCR} />
+					</AdminSettingRow>
+					<AdminSettingRow
+						label={$i18n.t('Disable Image Extraction')}
+						description={$i18n.t('Do not extract images from PDFs during Marker processing.')}
+					>
+						<Switch bind:state={RAGConfig.DATALAB_MARKER_DISABLE_IMAGE_EXTRACTION} />
+					</AdminSettingRow>
+					<AdminSettingRow
+						label={$i18n.t('Format Lines')}
+						description={$i18n.t('Format lines to detect inline math and styles.')}
+					>
+						<Switch bind:state={RAGConfig.DATALAB_MARKER_FORMAT_LINES} />
+					</AdminSettingRow>
+					<AdminSettingRow
+						label={$i18n.t('Output Format')}
+						description={$i18n.t('Text output format returned by Marker.')}
+					>
+						<SettingsSelect bind:value={RAGConfig.DATALAB_MARKER_OUTPUT_FORMAT}>
+							<option value="markdown">{$i18n.t('Markdown')}</option>
+							<option value="json">{$i18n.t('JSON')}</option>
+							<option value="html">{$i18n.t('HTML')}</option>
+						</SettingsSelect>
+					</AdminSettingRow>
+				{:else if RAGConfig.CONTENT_EXTRACTION_ENGINE === 'external'}
+					<div class="grid grid-cols-1 gap-x-3 gap-y-2.5 sm:grid-cols-2">
+						<AdminSettingField
+							label={$i18n.t('Document Loader URL')}
+							description={$i18n.t('External service endpoint used to load document content.')}
+						>
+							<input
+								class={inputClass}
+								placeholder={$i18n.t('Enter External Document Loader URL')}
+								bind:value={RAGConfig.EXTERNAL_DOCUMENT_LOADER_URL}
+							/>
+						</AdminSettingField>
+						<AdminSettingField
+							label={$i18n.t('API Key')}
+							description={$i18n.t('API key sent to the external document loader.')}
+						>
+							<SensitiveInput
+								variant="settings"
+								placeholder={$i18n.t('Enter External Document Loader API Key')}
+								required={false}
+								bind:value={RAGConfig.EXTERNAL_DOCUMENT_LOADER_API_KEY}
+							/>
+						</AdminSettingField>
 					</div>
 
-					<div class="  mb-2.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							<Tooltip content={$i18n.t('Full Context Mode')} placement="top-start">
-								{$i18n.t('Bypass Embedding and Retrieval')}
-							</Tooltip>
-						</div>
-						<div class="flex items-center relative">
-							<Tooltip
-								content={RAGConfig.BYPASS_EMBEDDING_AND_RETRIEVAL
-									? $i18n.t(
-											'Inject the entire content as context for comprehensive processing, this is recommended for complex queries.'
-										)
-									: $i18n.t(
-											'Default to segmented retrieval for focused and relevant content extraction, this is recommended for most cases.'
-										)}
-							>
-								<Switch bind:state={RAGConfig.BYPASS_EMBEDDING_AND_RETRIEVAL} />
-							</Tooltip>
-						</div>
+					<AdminSettingField
+						label={$i18n.t('Headers')}
+						description={$i18n.t('Additional JSON headers sent to the external document loader.')}
+					>
+						<Tooltip
+							content={$i18n.t(
+								'Enter additional headers in JSON format (e.g. {"X-Custom-Header": "value"}'
+							)}
+						>
+							<Textarea
+								className={textareaClass}
+								bind:value={RAGConfig.EXTERNAL_DOCUMENT_LOADER_HEADERS}
+								placeholder={$i18n.t('Enter additional headers in JSON format')}
+								required={false}
+							/>
+						</Tooltip>
+						<button
+							type="button"
+							class="mt-1 text-[0.6875rem] text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-300"
+							on:click={() =>
+								(showExternalDocumentLoaderHeadersHint = !showExternalDocumentLoaderHeadersHint)}
+						>
+							{$i18n.t('Header variables')}
+						</button>
+						{#if showExternalDocumentLoaderHeadersHint}
+							<div class="mt-1 text-[0.6875rem] leading-5 text-gray-500 dark:text-gray-400">
+								<div>{$i18n.t('No additional headers are sent unless configured.')}</div>
+								<div>
+									{$i18n.t('Example')}:
+									<code class="text-gray-700 dark:text-gray-300"
+										>{'{"X-OpenWebUI-File-Id": "{{FILE_ID}}"}'}</code
+									>
+								</div>
+								<div>
+									{$i18n.t('Available variables')}:
+									<code class="text-gray-700 dark:text-gray-300">{'{{FILE_ID}}'}</code>,
+									<code class="text-gray-700 dark:text-gray-300">{'{{FILE_NAME}}'}</code>,
+									<code class="text-gray-700 dark:text-gray-300">{'{{FILE_CONTENT_TYPE}}'}</code>
+								</div>
+							</div>
+						{/if}
+					</AdminSettingField>
+				{:else if RAGConfig.CONTENT_EXTRACTION_ENGINE === 'tika'}
+					<AdminSettingField
+						label={$i18n.t('Tika Server URL')}
+						description={$i18n.t('Tika server endpoint used for content extraction.')}
+					>
+						<input
+							class={inputClass}
+							placeholder={$i18n.t('Enter Tika Server URL')}
+							bind:value={RAGConfig.TIKA_SERVER_URL}
+						/>
+					</AdminSettingField>
+				{:else if RAGConfig.CONTENT_EXTRACTION_ENGINE === 'docling'}
+					<div class="grid grid-cols-1 gap-x-3 gap-y-2.5 sm:grid-cols-2">
+						<AdminSettingField
+							label={$i18n.t('Docling Server URL')}
+							description={$i18n.t('Docling service endpoint used for parsing.')}
+						>
+							<input
+								class={inputClass}
+								placeholder={$i18n.t('Enter Docling Server URL')}
+								bind:value={RAGConfig.DOCLING_SERVER_URL}
+							/>
+						</AdminSettingField>
+						<AdminSettingField
+							label={$i18n.t('API Key')}
+							description={$i18n.t('API key sent to Docling.')}
+						>
+							<SensitiveInput
+								variant="settings"
+								placeholder={$i18n.t('Enter Docling API Key')}
+								bind:value={RAGConfig.DOCLING_API_KEY}
+								required={false}
+							/>
+						</AdminSettingField>
 					</div>
 
-					{#if !RAGConfig.BYPASS_EMBEDDING_AND_RETRIEVAL}
-						<div class="  mb-2.5 flex w-full justify-between">
-							<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-								{$i18n.t('Text Splitter')}
-							</div>
-							<div class="flex items-center relative">
-								<SettingsSelect bind:value={RAGConfig.TEXT_SPLITTER}>
-									<option value="">{$i18n.t('Default')} ({$i18n.t('Character')})</option>
-									<option value="token">{$i18n.t('Token')} ({$i18n.t('Tiktoken')})</option>
-									<option value="token_transformers">
-										{$i18n.t('Token')} ({$i18n.t('Transformers')})
-									</option>
-								</SettingsSelect>
-							</div>
-						</div>
+					<AdminSettingField
+						label={$i18n.t('Parameters')}
+						description={$i18n.t('Additional Docling parameters in JSON format.')}
+					>
+						<Textarea
+							className={textareaClass}
+							bind:value={RAGConfig.DOCLING_PARAMS}
+							placeholder={$i18n.t('Enter additional parameters in JSON format')}
+							minSize={100}
+						/>
+					</AdminSettingField>
+				{:else if RAGConfig.CONTENT_EXTRACTION_ENGINE === 'document_intelligence'}
+					<div class="grid grid-cols-1 gap-x-3 gap-y-2.5 sm:grid-cols-2">
+						<AdminSettingField
+							label={$i18n.t('Endpoint')}
+							description={$i18n.t('Document Intelligence endpoint used for parsing.')}
+						>
+							<input
+								class={inputClass}
+								placeholder={$i18n.t('Enter Document Intelligence Endpoint')}
+								bind:value={RAGConfig.DOCUMENT_INTELLIGENCE_ENDPOINT}
+							/>
+						</AdminSettingField>
+						<AdminSettingField
+							label={$i18n.t('Key')}
+							description={$i18n.t('Credential used for Document Intelligence.')}
+						>
+							<SensitiveInput
+								variant="settings"
+								placeholder={$i18n.t('Enter Document Intelligence Key')}
+								bind:value={RAGConfig.DOCUMENT_INTELLIGENCE_KEY}
+								required={false}
+							/>
+						</AdminSettingField>
+					</div>
 
-						{#if RAGConfig.TEXT_SPLITTER === 'token_transformers'}
-							<div class="mb-2.5 flex flex-col w-full justify-between">
-								<div
-									class="self-center text-xs text-gray-600 dark:text-gray-400 min-w-fit mb-1 w-full"
-								>
-									{$i18n.t('Tokenizer Model')}
-								</div>
-								<div class="self-center w-full">
-									<input
-										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-										placeholder={$i18n.t('Enter Tokenizer Model')}
-										bind:value={RAGConfig.RAG_TOKENIZER_MODEL}
-										autocomplete="off"
-										required={RAG_EMBEDDING_ENGINE !== ''}
-									/>
-								</div>
-							</div>
-						{/if}
+					<AdminSettingField
+						label={$i18n.t('Document Intelligence Model')}
+						description={$i18n.t('Model name used by Document Intelligence.')}
+					>
+						<input
+							class={inputClass}
+							placeholder={$i18n.t('Enter Document Intelligence Model')}
+							bind:value={RAGConfig.DOCUMENT_INTELLIGENCE_MODEL}
+						/>
+					</AdminSettingField>
+				{:else if RAGConfig.CONTENT_EXTRACTION_ENGINE === 'mistral_ocr'}
+					<div class="grid grid-cols-1 gap-x-3 gap-y-2.5 sm:grid-cols-2">
+						<AdminSettingField
+							label={$i18n.t('API Base URL')}
+							description={$i18n.t('Mistral OCR service endpoint.')}
+						>
+							<input
+								class={inputClass}
+								placeholder={$i18n.t('Enter Mistral API Base URL')}
+								bind:value={RAGConfig.MISTRAL_OCR_API_BASE_URL}
+							/>
+						</AdminSettingField>
+						<AdminSettingField
+							label={$i18n.t('API Key')}
+							description={$i18n.t('API key sent to Mistral OCR.')}
+						>
+							<SensitiveInput
+								variant="settings"
+								placeholder={$i18n.t('Enter Mistral API Key')}
+								bind:value={RAGConfig.MISTRAL_OCR_API_KEY}
+							/>
+						</AdminSettingField>
+					</div>
+					<AdminSettingRow
+						label={$i18n.t('Use Base64')}
+						description={$i18n.t('Send PDFs as base64 data URLs instead of uploading first.')}
+					>
+						<Switch bind:state={RAGConfig.MISTRAL_OCR_USE_BASE64} />
+					</AdminSettingRow>
+				{:else if RAGConfig.CONTENT_EXTRACTION_ENGINE === 'paddleocr_vl'}
+					<div class="grid grid-cols-1 gap-x-3 gap-y-2.5 sm:grid-cols-2">
+						<AdminSettingField
+							label={$i18n.t('API Base URL')}
+							description={$i18n.t('PaddleOCR-vl service endpoint.')}
+						>
+							<input
+								class={inputClass}
+								placeholder={$i18n.t('Enter PaddleOCR-vl API Base URL')}
+								bind:value={RAGConfig.PADDLEOCR_VL_BASE_URL}
+							/>
+						</AdminSettingField>
+						<AdminSettingField
+							label={$i18n.t('API Token')}
+							description={$i18n.t('API token sent to PaddleOCR-vl.')}
+						>
+							<SensitiveInput
+								variant="settings"
+								placeholder={$i18n.t('Enter PaddleOCR-vl API Token')}
+								bind:value={RAGConfig.PADDLEOCR_VL_TOKEN}
+								required={false}
+							/>
+						</AdminSettingField>
+					</div>
+				{:else if RAGConfig.CONTENT_EXTRACTION_ENGINE === 'mineru'}
+					<AdminSettingRow
+						label={$i18n.t('API Mode')}
+						description={$i18n.t('Choose the local or cloud MinerU API mode.')}
+					>
+						<SettingsSelect
+							bind:value={RAGConfig.MINERU_API_MODE}
+							on:change={() => {
+								const cloudUrl = 'https://mineru.net/api/v4';
+								const localUrl = 'http://localhost:8000';
 
-						<div class="  mb-2.5 flex w-full justify-between">
-							<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-								<Tooltip
-									placement="top-start"
-									content={$i18n.t(
-										'Split documents by markdown headers before applying character/token splitting.'
-									)}
-								>
-									{$i18n.t('Markdown Header Text Splitter')}
-								</Tooltip>
-							</div>
-							<div class="flex items-center relative">
-								<Switch bind:state={RAGConfig.ENABLE_MARKDOWN_HEADER_TEXT_SPLITTER} />
-							</div>
-						</div>
+								if (RAGConfig.MINERU_API_MODE === 'cloud') {
+									if (!RAGConfig.MINERU_API_URL || RAGConfig.MINERU_API_URL === localUrl) {
+										RAGConfig.MINERU_API_URL = cloudUrl;
+									}
+								} else {
+									if (!RAGConfig.MINERU_API_URL || RAGConfig.MINERU_API_URL === cloudUrl) {
+										RAGConfig.MINERU_API_URL = localUrl;
+									}
+								}
+							}}
+						>
+							<option value="local">{$i18n.t('local')}</option>
+							<option value="cloud">{$i18n.t('cloud')}</option>
+						</SettingsSelect>
+					</AdminSettingRow>
 
-						<div class="  mb-2.5 flex w-full justify-between">
-							<div class=" flex gap-1.5 w-full">
-								<div class="  w-full justify-between">
-									<div class="self-center text-xs text-gray-600 dark:text-gray-400 min-w-fit mb-1">
-										{$i18n.t('Chunk Size')}
-									</div>
-									<div class="self-center">
-										<input
-											class=" w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-											type="number"
-											placeholder={$i18n.t('Enter Chunk Size')}
-											bind:value={RAGConfig.CHUNK_SIZE}
-											autocomplete="off"
-											min="0"
-										/>
-									</div>
-								</div>
+					<AdminSettingField
+						label={$i18n.t('API URL')}
+						description={$i18n.t('MinerU API endpoint for the selected mode.')}
+					>
+						<input
+							class={inputClass}
+							placeholder={RAGConfig.MINERU_API_MODE === 'cloud'
+								? $i18n.t('https://mineru.net/api/v4')
+								: $i18n.t('http://localhost:8000')}
+							bind:value={RAGConfig.MINERU_API_URL}
+						/>
+					</AdminSettingField>
 
-								<div class="w-full">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 min-w-fit mb-1">
-										{$i18n.t('Chunk Overlap')}
-									</div>
+					<AdminSettingField
+						label={$i18n.t('API Key')}
+						description={$i18n.t('API key used for MinerU cloud mode.')}
+					>
+						<SensitiveInput
+							variant="settings"
+							placeholder={$i18n.t('Enter MinerU API Key')}
+							bind:value={RAGConfig.MINERU_API_KEY}
+						/>
+					</AdminSettingField>
 
-									<div class="self-center">
-										<input
-											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-											type="number"
-											placeholder={$i18n.t('Enter Chunk Overlap')}
-											bind:value={RAGConfig.CHUNK_OVERLAP}
-											autocomplete="off"
-											min="0"
-										/>
-									</div>
-								</div>
-							</div>
-						</div>
+					<AdminSettingRow
+						label={$i18n.t('API Timeout')}
+						description={$i18n.t('Maximum time in seconds to wait for MinerU API responses.')}
+					>
+						<input
+							class="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"
+							type="number"
+							min="1"
+							bind:value={RAGConfig.MINERU_API_TIMEOUT}
+							placeholder="60"
+						/>
+					</AdminSettingRow>
 
-						{#if RAGConfig.ENABLE_MARKDOWN_HEADER_TEXT_SPLITTER}
-							<div class="  mb-2.5 flex w-full justify-between">
-								<div class=" flex gap-1.5 w-full">
-									<div class="w-full">
-										<div
-											class="self-center text-xs text-gray-600 dark:text-gray-400 min-w-fit mb-1"
-										>
-											<Tooltip
-												placement="top-start"
-												content={$i18n.t(
-													'Chunks smaller than this threshold will be merged with neighboring chunks when possible. Set to 0 to disable merging.'
-												)}
-											>
-												{$i18n.t('Chunk Min Size Target')}
-											</Tooltip>
-										</div>
-										<div class="self-center">
-											<input
-												class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-												type="number"
-												placeholder={$i18n.t('Enter Chunk Min Size Target')}
-												bind:value={RAGConfig.CHUNK_MIN_SIZE_TARGET}
-												autocomplete="off"
-												min="0"
-											/>
-										</div>
-									</div>
-								</div>
-							</div>
-						{/if}
-					{/if}
-				</div>
+					<AdminSettingField
+						label={$i18n.t('Parameters')}
+						description={$i18n.t('Advanced MinerU parsing parameters in JSON format.')}
+					>
+						<Textarea
+							className={textareaClass}
+							bind:value={RAGConfig.MINERU_PARAMS}
+							placeholder={`{\n  "enable_ocr": false,\n  "enable_formula": true,\n  "enable_table": true,\n  "language": "en",\n  "model_version": "pipeline",\n  "page_ranges": ""\n}`}
+							minSize={100}
+						/>
+					</AdminSettingField>
+
+					<AdminSettingField
+						label={$i18n.t('File Extensions')}
+						description={$i18n.t('Comma-separated extensions MinerU should handle.')}
+					>
+						<input
+							class={inputClass}
+							placeholder={$i18n.t('pdf, docx, pptx, xlsx')}
+							bind:value={RAGConfig.MINERU_FILE_EXTENSIONS}
+						/>
+					</AdminSettingField>
+				{/if}
+
+				<AdminSettingRow
+					label={$i18n.t('Bypass Embedding and Retrieval')}
+					description={RAGConfig.BYPASS_EMBEDDING_AND_RETRIEVAL
+						? $i18n.t('Inject the entire content as context for comprehensive processing.')
+						: $i18n.t('Use segmented retrieval for focused and relevant context.')}
+				>
+					<Switch bind:state={RAGConfig.BYPASS_EMBEDDING_AND_RETRIEVAL} />
+				</AdminSettingRow>
 
 				{#if !RAGConfig.BYPASS_EMBEDDING_AND_RETRIEVAL}
-					<div class="mb-5">
-						<div class=" mb-2 text-xs text-gray-400 dark:text-gray-600">
-							{$i18n.t('Embedding')}
+					<AdminSettingRow
+						label={$i18n.t('Text Splitter')}
+						description={$i18n.t('Choose how extracted text is split before indexing.')}
+					>
+						<SettingsSelect bind:value={RAGConfig.TEXT_SPLITTER}>
+							<option value="">{$i18n.t('Default')} ({$i18n.t('Character')})</option>
+							<option value="token">{$i18n.t('Token')} ({$i18n.t('Tiktoken')})</option>
+							<option value="token_transformers">
+								{$i18n.t('Token')} ({$i18n.t('Transformers')})
+							</option>
+						</SettingsSelect>
+					</AdminSettingRow>
+
+					{#if RAGConfig.TEXT_SPLITTER === 'token_transformers'}
+						<AdminSettingField
+							label={$i18n.t('Tokenizer Model')}
+							description={$i18n.t('Tokenizer model used for transformer token splitting.')}
+						>
+							<input
+								class={inputClass}
+								placeholder={$i18n.t('Enter Tokenizer Model')}
+								bind:value={RAGConfig.RAG_TOKENIZER_MODEL}
+								autocomplete="off"
+								required={RAG_EMBEDDING_ENGINE !== ''}
+							/>
+						</AdminSettingField>
+					{/if}
+
+					<AdminSettingRow
+						label={$i18n.t('Markdown Header Text Splitter')}
+						description={$i18n.t(
+							'Split documents by markdown headers before character or token splitting.'
+						)}
+					>
+						<Switch bind:state={RAGConfig.ENABLE_MARKDOWN_HEADER_TEXT_SPLITTER} />
+					</AdminSettingRow>
+
+					<div class="grid grid-cols-1 gap-x-3 gap-y-2.5 sm:grid-cols-2">
+						<AdminSettingField
+							label={$i18n.t('Chunk Size')}
+							description={$i18n.t('Maximum size for each text chunk.')}
+						>
+							<input
+								class={inputClass}
+								type="number"
+								placeholder={$i18n.t('Enter Chunk Size')}
+								bind:value={RAGConfig.CHUNK_SIZE}
+								autocomplete="off"
+								min="0"
+							/>
+						</AdminSettingField>
+						<AdminSettingField
+							label={$i18n.t('Chunk Overlap')}
+							description={$i18n.t('Overlap preserved between neighboring chunks.')}
+						>
+							<input
+								class={inputClass}
+								type="number"
+								placeholder={$i18n.t('Enter Chunk Overlap')}
+								bind:value={RAGConfig.CHUNK_OVERLAP}
+								autocomplete="off"
+								min="0"
+							/>
+						</AdminSettingField>
+					</div>
+
+					{#if RAGConfig.ENABLE_MARKDOWN_HEADER_TEXT_SPLITTER}
+						<AdminSettingField
+							label={$i18n.t('Chunk Min Size Target')}
+							description={$i18n.t(
+								'Merge chunks smaller than this threshold when possible. Set to 0 to disable merging.'
+							)}
+						>
+							<input
+								class={inputClass}
+								type="number"
+								placeholder={$i18n.t('Enter Chunk Min Size Target')}
+								bind:value={RAGConfig.CHUNK_MIN_SIZE_TARGET}
+								autocomplete="off"
+								min="0"
+							/>
+						</AdminSettingField>
+					{/if}
+				{/if}
+			</AdminSettingSection>
+
+			{#if !RAGConfig.BYPASS_EMBEDDING_AND_RETRIEVAL}
+				<AdminSettingSection title={$i18n.t('Embedding')}>
+					<AdminSettingRow
+						label={$i18n.t('Embedding Model Engine')}
+						description={$i18n.t('Provider used to generate document embeddings.')}
+					>
+						<SettingsSelect
+							bind:value={RAG_EMBEDDING_ENGINE}
+							placeholder={$i18n.t('Select an embedding model engine')}
+							on:change={(e) => {
+								if (e.target.value === 'ollama') {
+									RAG_EMBEDDING_MODEL = '';
+								} else if (e.target.value === 'openai') {
+									RAG_EMBEDDING_MODEL = 'text-embedding-3-small';
+								} else if (e.target.value === 'azure_openai') {
+									RAG_EMBEDDING_MODEL = 'text-embedding-3-small';
+								} else if (e.target.value === '') {
+									RAG_EMBEDDING_MODEL = 'sentence-transformers/all-MiniLM-L6-v2';
+								}
+							}}
+						>
+							<option value="">{$i18n.t('Default (SentenceTransformers)')}</option>
+							<option value="ollama">{$i18n.t('Ollama')}</option>
+							<option value="openai">{$i18n.t('OpenAI')}</option>
+							<option value="azure_openai">{$i18n.t('Azure OpenAI')}</option>
+						</SettingsSelect>
+					</AdminSettingRow>
+
+					{#if RAG_EMBEDDING_ENGINE === 'openai'}
+						<div class="grid grid-cols-1 gap-x-3 gap-y-2.5 sm:grid-cols-2">
+							<AdminSettingField
+								label={$i18n.t('API Base URL')}
+								description={$i18n.t('OpenAI-compatible embeddings endpoint.')}
+							>
+								<input
+									class={inputClass}
+									placeholder={$i18n.t('API Base URL')}
+									bind:value={OpenAIUrl}
+									required
+								/>
+							</AdminSettingField>
+							<AdminSettingField
+								label={$i18n.t('API Key')}
+								description={$i18n.t('API key for embedding requests.')}
+							>
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('API Key')}
+									bind:value={OpenAIKey}
+									required={false}
+								/>
+							</AdminSettingField>
 						</div>
+					{:else if RAG_EMBEDDING_ENGINE === 'ollama'}
+						<div class="grid grid-cols-1 gap-x-3 gap-y-2.5 sm:grid-cols-2">
+							<AdminSettingField
+								label={$i18n.t('API Base URL')}
+								description={$i18n.t('Ollama endpoint used for embeddings.')}
+							>
+								<input
+									class={inputClass}
+									placeholder={$i18n.t('API Base URL')}
+									bind:value={OllamaUrl}
+									required
+								/>
+							</AdminSettingField>
+							<AdminSettingField
+								label={$i18n.t('API Key')}
+								description={$i18n.t('Optional API key for Ollama requests.')}
+							>
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('API Key')}
+									bind:value={OllamaKey}
+									required={false}
+								/>
+							</AdminSettingField>
+						</div>
+					{:else if RAG_EMBEDDING_ENGINE === 'azure_openai'}
+						<div class="grid grid-cols-1 gap-x-3 gap-y-2.5 sm:grid-cols-2">
+							<AdminSettingField
+								label={$i18n.t('API Base URL')}
+								description={$i18n.t('Azure OpenAI endpoint used for embeddings.')}
+							>
+								<input
+									class={inputClass}
+									placeholder={$i18n.t('API Base URL')}
+									bind:value={AzureOpenAIUrl}
+									required
+								/>
+							</AdminSettingField>
+							<AdminSettingField
+								label={$i18n.t('API Key')}
+								description={$i18n.t('Azure OpenAI API key.')}
+							>
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('API Key')}
+									bind:value={AzureOpenAIKey}
+								/>
+							</AdminSettingField>
+							<AdminSettingField
+								label={$i18n.t('Version')}
+								description={$i18n.t('Azure OpenAI API version.')}
+							>
+								<input
+									class={inputClass}
+									placeholder={$i18n.t('Version')}
+									bind:value={AzureOpenAIVersion}
+									required
+								/>
+							</AdminSettingField>
+						</div>
+					{/if}
 
-						<div class="  mb-2.5 flex flex-col w-full justify-between">
-							<div class="flex w-full justify-between">
-								<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-									{$i18n.t('Embedding Model Engine')}
-								</div>
-								<div class="flex items-center relative">
-									<SettingsSelect
-										bind:value={RAG_EMBEDDING_ENGINE}
-										placeholder={$i18n.t('Select an embedding model engine')}
-										on:change={(e) => {
-											if (e.target.value === 'ollama') {
-												RAG_EMBEDDING_MODEL = '';
-											} else if (e.target.value === 'openai') {
-												RAG_EMBEDDING_MODEL = 'text-embedding-3-small';
-											} else if (e.target.value === 'azure_openai') {
-												RAG_EMBEDDING_MODEL = 'text-embedding-3-small';
-											} else if (e.target.value === '') {
-												RAG_EMBEDDING_MODEL = 'sentence-transformers/all-MiniLM-L6-v2';
-											}
-										}}
+					<AdminSettingField
+						label={$i18n.t('Embedding Model')}
+						description={$i18n.t(
+							'Model used to generate embeddings. Reindex knowledge after changing this.'
+						)}
+					>
+						<div class="flex w-full gap-2">
+							<input
+								class={inputClass}
+								placeholder={RAG_EMBEDDING_ENGINE === 'ollama'
+									? $i18n.t('Set embedding model')
+									: $i18n.t('Set embedding model (e.g. {{model}})', {
+											model: RAG_EMBEDDING_MODEL.slice(-40)
+										})}
+								bind:value={RAG_EMBEDDING_MODEL}
+								required={RAG_EMBEDDING_ENGINE === 'ollama'}
+							/>
+
+							{#if RAG_EMBEDDING_ENGINE === ''}
+								<button
+									class="flex size-7 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-black/5 hover:text-gray-900 dark:text-gray-500 dark:hover:bg-white/5 dark:hover:text-white"
+									type="button"
+									on:click={() => {
+										embeddingModelUpdateHandler();
+									}}
+									disabled={updateEmbeddingModelLoading}
+									aria-label={$i18n.t('Update embedding model')}
+								>
+									{#if updateEmbeddingModelLoading}
+										<Spinner />
+									{:else}
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 16 16"
+											fill="currentColor"
+											class="size-4"
+										>
+											<path
+												d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
+											/>
+											<path
+												d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
+											/>
+										</svg>
+									{/if}
+								</button>
+							{/if}
+						</div>
+						<div class="mt-1 text-[0.6875rem] text-gray-400 dark:text-gray-600">
+							{$i18n.t(
+								'After changing the embedding model, reindex the knowledge base for changes to take effect.'
+							)}
+						</div>
+					</AdminSettingField>
+
+					<AdminSettingRow
+						label={$i18n.t('Embedding Batch Size')}
+						description={$i18n.t('Number of items processed per embedding batch.')}
+					>
+						<input
+							bind:value={RAG_EMBEDDING_BATCH_SIZE}
+							type="number"
+							class="w-14 bg-transparent text-center text-xs outline-none"
+							min="-2"
+							max="16000"
+							step="1"
+						/>
+					</AdminSettingRow>
+
+					{#if RAG_EMBEDDING_ENGINE === 'ollama' || RAG_EMBEDDING_ENGINE === 'openai' || RAG_EMBEDDING_ENGINE === 'azure_openai'}
+						<AdminSettingRow
+							label={$i18n.t('Async Embedding Processing')}
+							description={$i18n.t('Run embedding tasks concurrently to speed up processing.')}
+						>
+							<Switch bind:state={ENABLE_ASYNC_EMBEDDING} />
+						</AdminSettingRow>
+						<AdminSettingRow
+							label={$i18n.t('Embedding Concurrent Requests')}
+							description={$i18n.t(
+								'Maximum concurrent embedding requests. Set to 0 for unlimited.'
+							)}
+						>
+							<input
+								bind:value={RAG_EMBEDDING_CONCURRENT_REQUESTS}
+								type="number"
+								class="w-14 bg-transparent text-center text-xs outline-none"
+								min="0"
+								step="1"
+							/>
+						</AdminSettingRow>
+					{/if}
+				</AdminSettingSection>
+			{/if}
+
+			<AdminSettingSection title={$i18n.t('Retrieval')}>
+				{#if !RAGConfig.BYPASS_EMBEDDING_AND_RETRIEVAL}
+					<AdminSettingRow
+						label={$i18n.t('Full Context Mode')}
+						description={RAGConfig.RAG_FULL_CONTEXT
+							? $i18n.t('Inject entire documents as context for comprehensive processing.')
+							: $i18n.t('Use segmented retrieval for focused context.')}
+					>
+						<Switch bind:state={RAGConfig.RAG_FULL_CONTEXT} />
+					</AdminSettingRow>
+
+					{#if !RAGConfig.RAG_FULL_CONTEXT}
+						<AdminSettingRow
+							label={$i18n.t('Hybrid Search')}
+							description={$i18n.t('Combine semantic and keyword retrieval.')}
+						>
+							<Switch bind:state={RAGConfig.ENABLE_RAG_HYBRID_SEARCH} />
+						</AdminSettingRow>
+
+						{#if RAGConfig.ENABLE_RAG_HYBRID_SEARCH === true}
+							<AdminSettingRow
+								label={$i18n.t('Enrich Hybrid Search Text')}
+								description={$i18n.t(
+									'Add filenames, titles, sections, and snippets to improve lexical recall.'
+								)}
+							>
+								<Switch bind:state={RAGConfig.ENABLE_RAG_HYBRID_SEARCH_ENRICHED_TEXTS} />
+							</AdminSettingRow>
+
+							<AdminSettingRow
+								label={$i18n.t('Reranking Engine')}
+								description={$i18n.t('Provider used to rerank hybrid search results.')}
+							>
+								<SettingsSelect
+									bind:value={RAGConfig.RAG_RERANKING_ENGINE}
+									placeholder={$i18n.t('Select a reranking model engine')}
+									on:change={(e) => {
+										if (e.target.value === 'external') {
+											RAGConfig.RAG_RERANKING_MODEL = '';
+										} else if (e.target.value === '') {
+											RAGConfig.RAG_RERANKING_MODEL = 'BAAI/bge-reranker-v2-m3';
+										}
+									}}
+								>
+									<option value="">{$i18n.t('Default (SentenceTransformers)')}</option>
+									<option value="external">{$i18n.t('External')}</option>
+								</SettingsSelect>
+							</AdminSettingRow>
+
+							{#if RAGConfig.RAG_RERANKING_ENGINE === 'external'}
+								<div class="grid grid-cols-1 gap-x-3 gap-y-2.5 sm:grid-cols-2">
+									<AdminSettingField
+										label={$i18n.t('API Base URL')}
+										description={$i18n.t('External reranker endpoint.')}
 									>
-										<option value="">{$i18n.t('Default (SentenceTransformers)')}</option>
-										<option value="ollama">{$i18n.t('Ollama')}</option>
-										<option value="openai">{$i18n.t('OpenAI')}</option>
-										<option value="azure_openai">{$i18n.t('Azure OpenAI')}</option>
-									</SettingsSelect>
-								</div>
-							</div>
-
-							{#if RAG_EMBEDDING_ENGINE === 'openai'}
-								<div class="my-0.5 flex gap-2 pr-2">
-									<input
-										class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-										placeholder={$i18n.t('API Base URL')}
-										bind:value={OpenAIUrl}
-										required
-									/>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('API Key')}
-										bind:value={OpenAIKey}
-										required={false}
-									/>
-								</div>
-							{:else if RAG_EMBEDDING_ENGINE === 'ollama'}
-								<div class="my-0.5 flex gap-2 pr-2">
-									<input
-										class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-										placeholder={$i18n.t('API Base URL')}
-										bind:value={OllamaUrl}
-										required
-									/>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('API Key')}
-										bind:value={OllamaKey}
-										required={false}
-									/>
-								</div>
-							{:else if RAG_EMBEDDING_ENGINE === 'azure_openai'}
-								<div class="my-0.5 flex flex-col gap-2 pr-2 w-full">
-									<div class="flex gap-2">
 										<input
-											class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
+											class={inputClass}
 											placeholder={$i18n.t('API Base URL')}
-											bind:value={AzureOpenAIUrl}
+											bind:value={RAGConfig.RAG_EXTERNAL_RERANKER_URL}
 											required
 										/>
+									</AdminSettingField>
+									<AdminSettingField
+										label={$i18n.t('API Key')}
+										description={$i18n.t('API key sent to the external reranker.')}
+									>
 										<SensitiveInput
 											variant="settings"
 											placeholder={$i18n.t('API Key')}
-											bind:value={AzureOpenAIKey}
+											bind:value={RAGConfig.RAG_EXTERNAL_RERANKER_API_KEY}
+											required={false}
 										/>
-									</div>
-									<div class="flex gap-2">
-										<input
-											class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-											placeholder={$i18n.t('Version')}
-											bind:value={AzureOpenAIVersion}
-											required
-										/>
-									</div>
+									</AdminSettingField>
 								</div>
 							{/if}
-						</div>
 
-						<div class="  mb-2.5 flex flex-col w-full">
-							<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-								{$i18n.t('Embedding Model')}
-							</div>
-
-							<div class="">
-								{#if RAG_EMBEDDING_ENGINE === 'ollama'}
-									<div class="flex w-full">
-										<div class="flex-1 mr-2">
-											<input
-												class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-												bind:value={RAG_EMBEDDING_MODEL}
-												placeholder={$i18n.t('Set embedding model')}
-												required
-											/>
-										</div>
-									</div>
-								{:else}
-									<div class="flex w-full">
-										<div class="flex-1 mr-2">
-											<input
-												class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-												placeholder={$i18n.t('Set embedding model (e.g. {{model}})', {
-													model: RAG_EMBEDDING_MODEL.slice(-40)
-												})}
-												bind:value={RAG_EMBEDDING_MODEL}
-											/>
-										</div>
-
-										{#if RAG_EMBEDDING_ENGINE === ''}
-											<button
-												class="px-2.5 bg-transparent text-gray-800 dark:bg-transparent dark:text-gray-100 rounded-lg transition"
-												on:click={() => {
-													embeddingModelUpdateHandler();
-												}}
-												disabled={updateEmbeddingModelLoading}
-											>
-												{#if updateEmbeddingModelLoading}
-													<div class="self-center">
-														<Spinner />
-													</div>
-												{:else}
-													<svg
-														xmlns="http://www.w3.org/2000/svg"
-														viewBox="0 0 16 16"
-														fill="currentColor"
-														class="w-4 h-4"
-													>
-														<path
-															d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
-														/>
-														<path
-															d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
-														/>
-													</svg>
-												{/if}
-											</button>
-										{/if}
-									</div>
-								{/if}
-							</div>
-
-							<div class="mt-1 mb-1 text-xs text-gray-400 dark:text-gray-500">
-								{$i18n.t(
-									'After updating or changing the embedding model, you must reindex the knowledge base for the changes to take effect. You can do this using the "Reindex" button below.'
-								)}
-							</div>
-						</div>
-
-						<div class="  mb-2.5 flex w-full justify-between">
-							<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-								{$i18n.t('Embedding Batch Size')}
-							</div>
-
-							<div class="">
+							<AdminSettingField
+								label={$i18n.t('Reranking Model')}
+								description={$i18n.t('Model used to rerank retrieved results.')}
+							>
 								<input
-									bind:value={RAG_EMBEDDING_BATCH_SIZE}
-									type="number"
-									class=" bg-transparent text-center w-14 outline-none"
-									min="-2"
-									max="16000"
-									step="1"
+									class={inputClass}
+									placeholder={$i18n.t('Set reranking model (e.g. {{model}})', {
+										model: 'BAAI/bge-reranker-v2-m3'
+									})}
+									bind:value={RAGConfig.RAG_RERANKING_MODEL}
 								/>
-							</div>
-						</div>
-
-						{#if RAG_EMBEDDING_ENGINE === 'ollama' || RAG_EMBEDDING_ENGINE === 'openai' || RAG_EMBEDDING_ENGINE === 'azure_openai'}
-							<div class="  mb-2.5 flex w-full justify-between">
-								<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-									<Tooltip
-										content={$i18n.t(
-											'Runs embedding tasks concurrently to speed up processing. Turn off if rate limits become an issue.'
-										)}
-										placement="top-start"
-									>
-										{$i18n.t('Async Embedding Processing')}
-									</Tooltip>
-								</div>
-								<div class="flex items-center relative">
-									<Switch bind:state={ENABLE_ASYNC_EMBEDDING} />
-								</div>
-							</div>
-
-							<div class="  mb-2.5 flex w-full justify-between">
-								<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-									<Tooltip
-										content={$i18n.t(
-											'Limits the number of concurrent embedding requests. Set to 0 for unlimited.'
-										)}
-										placement="top-start"
-									>
-										{$i18n.t('Embedding Concurrent Requests')}
-									</Tooltip>
-								</div>
-								<div class="">
-									<input
-										bind:value={RAG_EMBEDDING_CONCURRENT_REQUESTS}
-										type="number"
-										class=" bg-transparent text-center w-14 outline-none"
-										min="0"
-										step="1"
-									/>
-								</div>
-							</div>
+							</AdminSettingField>
 						{/if}
-					</div>
-				{/if}
 
-				<div class="mb-5">
-					<div class=" mb-2 text-xs text-gray-400 dark:text-gray-600">
-						{$i18n.t('Retrieval')}
-					</div>
+						<AdminSettingRow
+							label={$i18n.t('Reranking Batch Size')}
+							description={$i18n.t('Number of results processed per reranking batch.')}
+						>
+							<input
+								bind:value={RAGConfig.RAG_RERANKING_BATCH_SIZE}
+								type="number"
+								class="w-14 bg-transparent text-center text-xs outline-none"
+								min="1"
+								max="16000"
+								step="1"
+							/>
+						</AdminSettingRow>
 
-					{#if !RAGConfig.BYPASS_EMBEDDING_AND_RETRIEVAL}
-						<div class="  mb-2.5 flex w-full justify-between">
-							<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-								{$i18n.t('Full Context Mode')}
-							</div>
-							<div class="flex items-center relative">
-								<Tooltip
-									content={RAGConfig.RAG_FULL_CONTEXT
-										? $i18n.t(
-												'Inject the entire content as context for comprehensive processing, this is recommended for complex queries.'
-											)
-										: $i18n.t(
-												'Default to segmented retrieval for focused and relevant content extraction, this is recommended for most cases.'
-											)}
+						<AdminSettingField
+							label={$i18n.t('Top K')}
+							description={$i18n.t('Maximum number of retrieved chunks returned to the model.')}
+						>
+							<input
+								class={inputClass}
+								type="number"
+								placeholder={$i18n.t('Enter Top K')}
+								bind:value={RAGConfig.TOP_K}
+								autocomplete="off"
+								min="0"
+							/>
+						</AdminSettingField>
+
+						{#if RAGConfig.ENABLE_RAG_HYBRID_SEARCH === true}
+							<AdminSettingField
+								label={$i18n.t('Top K Reranker')}
+								description={$i18n.t('Maximum number of hybrid results sent to the reranker.')}
+							>
+								<input
+									class={inputClass}
+									type="number"
+									placeholder={$i18n.t('Enter Top K Reranker')}
+									bind:value={RAGConfig.TOP_K_RERANKER}
+									autocomplete="off"
+									min="0"
+								/>
+							</AdminSettingField>
+
+							<AdminSettingField
+								label={$i18n.t('Relevance Threshold')}
+								description={$i18n.t(
+									'Only return documents with a score greater than or equal to this value.'
+								)}
+							>
+								<input
+									class={inputClass}
+									type="number"
+									step="0.01"
+									placeholder={$i18n.t('Enter Score')}
+									bind:value={RAGConfig.RELEVANCE_THRESHOLD}
+									autocomplete="off"
+									min="0.0"
+									title={$i18n.t('The score should be a value between 0.0 (0%) and 1.0 (100%).')}
+								/>
+							</AdminSettingField>
+
+							<AdminSettingRow
+								label={$i18n.t('BM25 Weight')}
+								description={$i18n.t('Balance semantic and lexical weighting for hybrid search.')}
+							>
+								<button
+									class={actionButtonClass}
+									type="button"
+									on:click={() => {
+										RAGConfig.HYBRID_BM25_WEIGHT =
+											(RAGConfig?.HYBRID_BM25_WEIGHT ?? null) === null ? 0.5 : null;
+									}}
 								>
-									<Switch bind:state={RAGConfig.RAG_FULL_CONTEXT} />
-								</Tooltip>
-							</div>
-						</div>
+									{(RAGConfig?.HYBRID_BM25_WEIGHT ?? null) === null
+										? $i18n.t('Default')
+										: $i18n.t('Custom')}
+								</button>
+							</AdminSettingRow>
 
-						{#if !RAGConfig.RAG_FULL_CONTEXT}
-							<div class="  mb-2.5 flex w-full justify-between">
-								<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-									{$i18n.t('Hybrid Search')}
-								</div>
-								<div class="flex items-center relative">
-									<Switch bind:state={RAGConfig.ENABLE_RAG_HYBRID_SEARCH} />
-								</div>
-							</div>
-
-							{#if RAGConfig.ENABLE_RAG_HYBRID_SEARCH === true}
-								<div class="mb-2.5 flex w-full justify-between">
-									<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-										{$i18n.t('Enrich Hybrid Search Text')}
-									</div>
-									<div class="flex items-center relative">
-										<Tooltip
-											content={$i18n.t(
-												'Adds filenames, titles, sections, and snippets into the BM25 text to improve lexical recall.'
-											)}
-										>
-											<Switch bind:state={RAGConfig.ENABLE_RAG_HYBRID_SEARCH_ENRICHED_TEXTS} />
-										</Tooltip>
-									</div>
-								</div>
-
-								<div class="  mb-2.5 flex flex-col w-full justify-between">
-									<div class="flex w-full justify-between">
-										<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-											{$i18n.t('Reranking Engine')}
-										</div>
-										<div class="flex items-center relative">
-											<SettingsSelect
-												bind:value={RAGConfig.RAG_RERANKING_ENGINE}
-												placeholder={$i18n.t('Select a reranking model engine')}
-												on:change={(e) => {
-													if (e.target.value === 'external') {
-														RAGConfig.RAG_RERANKING_MODEL = '';
-													} else if (e.target.value === '') {
-														RAGConfig.RAG_RERANKING_MODEL = 'BAAI/bge-reranker-v2-m3';
-													}
-												}}
-											>
-												<option value="">{$i18n.t('Default (SentenceTransformers)')}</option>
-												<option value="external">{$i18n.t('External')}</option>
-											</SettingsSelect>
-										</div>
-									</div>
-
-									{#if RAGConfig.RAG_RERANKING_ENGINE === 'external'}
-										<div class="my-0.5 flex gap-2 pr-2">
-											<input
-												class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-												placeholder={$i18n.t('API Base URL')}
-												bind:value={RAGConfig.RAG_EXTERNAL_RERANKER_URL}
-												required
-											/>
-
-											<SensitiveInput
-												variant="settings"
-												placeholder={$i18n.t('API Key')}
-												bind:value={RAGConfig.RAG_EXTERNAL_RERANKER_API_KEY}
-												required={false}
-											/>
-										</div>
-									{/if}
-								</div>
-
-								<div class="  mb-2.5 flex flex-col w-full">
-									<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-										{$i18n.t('Reranking Model')}
-									</div>
-
-									<div class="">
-										<div class="flex w-full">
-											<div class="flex-1 mr-2">
-												<input
-													class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-													placeholder={$i18n.t('Set reranking model (e.g. {{model}})', {
-														model: 'BAAI/bge-reranker-v2-m3'
-													})}
-													bind:value={RAGConfig.RAG_RERANKING_MODEL}
-												/>
-											</div>
-										</div>
-									</div>
-								</div>
-							{/if}
-
-							<div class="  mb-2.5 flex w-full justify-between">
-								<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-									{$i18n.t('Reranking Batch Size')}
-								</div>
-
-								<div class="">
-									<input
-										bind:value={RAGConfig.RAG_RERANKING_BATCH_SIZE}
-										type="number"
-										class=" bg-transparent text-center w-14 outline-none"
-										min="1"
-										max="16000"
-										step="1"
-									/>
-								</div>
-							</div>
-
-							<div class="  mb-2.5 flex w-full justify-between">
-								<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-									{$i18n.t('Top K')}
-								</div>
-								<div class="flex items-center relative">
-									<input
-										class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-										type="number"
-										placeholder={$i18n.t('Enter Top K')}
-										bind:value={RAGConfig.TOP_K}
-										autocomplete="off"
-										min="0"
-									/>
-								</div>
-							</div>
-
-							{#if RAGConfig.ENABLE_RAG_HYBRID_SEARCH === true}
-								<div class="mb-2.5 flex w-full justify-between">
-									<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-										{$i18n.t('Top K Reranker')}
-									</div>
-									<div class="flex items-center relative">
+							{#if (RAGConfig?.HYBRID_BM25_WEIGHT ?? null) !== null}
+								<div class="flex items-center gap-2">
+									<div class="flex-1">
 										<input
-											class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-											type="number"
-											placeholder={$i18n.t('Enter Top K Reranker')}
-											bind:value={RAGConfig.TOP_K_RERANKER}
-											autocomplete="off"
+											id="steps-range"
+											type="range"
 											min="0"
+											max="1"
+											step="0.05"
+											bind:value={RAGConfig.HYBRID_BM25_WEIGHT}
+											class="h-2 w-full cursor-pointer appearance-none rounded-lg dark:bg-gray-700"
 										/>
-									</div>
-								</div>
-							{/if}
-
-							{#if RAGConfig.ENABLE_RAG_HYBRID_SEARCH === true}
-								<div class="  mb-2.5 flex flex-col w-full justify-between">
-									<div class=" flex w-full justify-between">
-										<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-											{$i18n.t('Relevance Threshold')}
-										</div>
-										<div class="flex items-center relative">
-											<input
-												class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-												type="number"
-												step="0.01"
-												placeholder={$i18n.t('Enter Score')}
-												bind:value={RAGConfig.RELEVANCE_THRESHOLD}
-												autocomplete="off"
-												min="0.0"
-												title={$i18n.t(
-													'The score should be a value between 0.0 (0%) and 1.0 (100%).'
-												)}
-											/>
+										<div
+											class="flex justify-between py-0.5 text-[0.6875rem] text-gray-400 dark:text-gray-600"
+										>
+											<div>{$i18n.t('semantic')}</div>
+											<div>{$i18n.t('lexical')}</div>
 										</div>
 									</div>
-									<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
-										{$i18n.t(
-											'Note: If you set a minimum score, the search will only return documents with a score greater than or equal to the minimum score.'
-										)}
-									</div>
-								</div>
-							{/if}
-
-							{#if RAGConfig.ENABLE_RAG_HYBRID_SEARCH === true}
-								<div class=" mb-2.5 py-0.5 w-full justify-between">
-									<Tooltip
-										content={$i18n.t(
-											'The Weight of BM25 Hybrid Search. 0 more semantic, 1 more lexical. Default 0.5'
-										)}
-										placement="top-start"
-										className="inline-tooltip"
-									>
-										<div class="flex w-full justify-between">
-											<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-												{$i18n.t('BM25 Weight')}
-											</div>
-											<button
-												class="p-1 px-3 text-xs flex rounded-lg transition shrink-0 outline-hidden"
-												type="button"
-												on:click={() => {
-													RAGConfig.HYBRID_BM25_WEIGHT =
-														(RAGConfig?.HYBRID_BM25_WEIGHT ?? null) === null ? 0.5 : null;
-												}}
-											>
-												{#if (RAGConfig?.HYBRID_BM25_WEIGHT ?? null) === null}
-													<span class="ml-2 self-center"> {$i18n.t('Default')} </span>
-												{:else}
-													<span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
-												{/if}
-											</button>
-										</div>
-									</Tooltip>
-
-									{#if (RAGConfig?.HYBRID_BM25_WEIGHT ?? null) !== null}
-										<div class="flex mt-0.5 space-x-2">
-											<div class=" flex-1">
-												<input
-													id="steps-range"
-													type="range"
-													min="0"
-													max="1"
-													step="0.05"
-													bind:value={RAGConfig.HYBRID_BM25_WEIGHT}
-													class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
-												/>
-
-												<div class="py-0.5">
-													<div class="flex w-full justify-between">
-														<div class=" text-left text-xs font-small">
-															{$i18n.t('semantic')}
-														</div>
-														<div class=" text-right text-xs font-small">
-															{$i18n.t('lexical')}
-														</div>
-													</div>
-												</div>
-											</div>
-											<div>
-												<input
-													bind:value={RAGConfig.HYBRID_BM25_WEIGHT}
-													type="number"
-													class=" bg-transparent text-center w-14"
-													min="0"
-													max="1"
-													step="any"
-												/>
-											</div>
-										</div>
-									{/if}
+									<input
+										bind:value={RAGConfig.HYBRID_BM25_WEIGHT}
+										type="number"
+										class="w-14 bg-transparent text-center text-xs outline-none"
+										min="0"
+										max="1"
+										step="any"
+									/>
 								</div>
 							{/if}
 						{/if}
 					{/if}
+				{/if}
 
-					<div class="  mb-2.5 flex flex-col w-full justify-between">
-						<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('RAG Template')}
-						</div>
-						<div class="flex w-full items-center relative">
-							<Tooltip
-								content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
-								placement="top-start"
-								className="w-full"
-							>
-								<Textarea
-									className={textareaClass}
-									bind:value={RAGConfig.RAG_TEMPLATE}
-									placeholder={$i18n.t(
-										'Leave empty to use the default prompt, or enter a custom prompt'
-									)}
-								/>
-							</Tooltip>
-						</div>
+				<AdminSettingField
+					label={$i18n.t('RAG Template')}
+					description={$i18n.t('Prompt template used when retrieved context is injected.')}
+				>
+					<Tooltip
+						content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
+						placement="top-start"
+						className="w-full"
+					>
+						<Textarea
+							className={textareaClass}
+							bind:value={RAGConfig.RAG_TEMPLATE}
+							placeholder={$i18n.t(
+								'Leave empty to use the default prompt, or enter a custom prompt'
+							)}
+						/>
+					</Tooltip>
 
-						{#if RAGConfig.RAG_TEMPLATE && (RAGConfig.RAG_TEMPLATE.match(/\[context\]/g) || []).length + (RAGConfig.RAG_TEMPLATE.match(/\{\{CONTEXT\}\}/g) || []).length > 1}
-							<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
-								{$i18n.t(
-									'This template contains multiple context placeholders ([context] or {{CONTEXT}}). Context will be injected at each occurrence.'
-								)}
-							</div>
-						{/if}
-					</div>
+					{#if RAGConfig.RAG_TEMPLATE && (RAGConfig.RAG_TEMPLATE.match(/\[context\]/g) || []).length + (RAGConfig.RAG_TEMPLATE.match(/\{\{CONTEXT\}\}/g) || []).length > 1}
+						<div class="mt-1 text-[0.6875rem] text-gray-400 dark:text-gray-600">
+							{$i18n.t(
+								'This template contains multiple context placeholders ([context] or {{CONTEXT}}). Context will be injected at each occurrence.'
+							)}
+						</div>
+					{/if}
+				</AdminSettingField>
+			</AdminSettingSection>
+
+			<AdminSettingSection title={$i18n.t('Files')}>
+				<AdminSettingField
+					label={$i18n.t('Allowed File Extensions')}
+					description={$i18n.t(
+						'Comma-separated upload extensions. Leave empty for all file types.'
+					)}
+				>
+					<input
+						class={inputClass}
+						type="text"
+						placeholder={$i18n.t('e.g. pdf, docx, txt')}
+						bind:value={RAGConfig.ALLOWED_FILE_EXTENSIONS}
+						autocomplete="off"
+					/>
+				</AdminSettingField>
+
+				<div class="grid grid-cols-1 gap-x-3 gap-y-2.5 sm:grid-cols-2">
+					<AdminSettingField
+						label={$i18n.t('Max Upload Size')}
+						description={$i18n.t('Maximum file size in MB. Leave empty for unlimited.')}
+					>
+						<input
+							class={inputClass}
+							type="number"
+							placeholder={$i18n.t('Leave empty for unlimited')}
+							bind:value={RAGConfig.FILE_MAX_SIZE}
+							autocomplete="off"
+							min="0"
+						/>
+					</AdminSettingField>
+					<AdminSettingField
+						label={$i18n.t('Max Upload Count')}
+						description={$i18n.t('Maximum number of files that can be used at once in chat.')}
+					>
+						<input
+							class={inputClass}
+							type="number"
+							placeholder={$i18n.t('Leave empty for unlimited')}
+							bind:value={RAGConfig.FILE_MAX_COUNT}
+							autocomplete="off"
+							min="0"
+						/>
+					</AdminSettingField>
 				</div>
 
-				<div class="mb-5">
-					<div class=" mb-2 text-xs text-gray-400 dark:text-gray-600">
-						{$i18n.t('Files')}
-					</div>
-
-					<div class="  mb-2.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Allowed File Extensions')}
-						</div>
-						<div class="flex items-center relative">
-							<Tooltip
-								content={$i18n.t(
-									'Allowed file extensions for upload. Separate multiple extensions with commas. Leave empty for all file types.'
-								)}
-								placement="top-start"
-							>
-								<input
-									class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-									type="text"
-									placeholder={$i18n.t('e.g. pdf, docx, txt')}
-									bind:value={RAGConfig.ALLOWED_FILE_EXTENSIONS}
-									autocomplete="off"
-								/>
-							</Tooltip>
-						</div>
-					</div>
-
-					<div class="  mb-2.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Max Upload Size')}
-						</div>
-						<div class="flex items-center relative">
-							<Tooltip
-								content={$i18n.t(
-									'The maximum file size in MB. If the file size exceeds this limit, the file will not be uploaded.'
-								)}
-								placement="top-start"
-							>
-								<input
-									class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-									type="number"
-									placeholder={$i18n.t('Leave empty for unlimited')}
-									bind:value={RAGConfig.FILE_MAX_SIZE}
-									autocomplete="off"
-									min="0"
-								/>
-							</Tooltip>
-						</div>
-					</div>
-
-					<div class="  mb-2.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Max Upload Count')}
-						</div>
-						<div class="flex items-center relative">
-							<Tooltip
-								content={$i18n.t(
-									'The maximum number of files that can be used at once in chat. If the number of files exceeds this limit, the files will not be uploaded.'
-								)}
-								placement="top-start"
-							>
-								<input
-									class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-									type="number"
-									placeholder={$i18n.t('Leave empty for unlimited')}
-									bind:value={RAGConfig.FILE_MAX_COUNT}
-									autocomplete="off"
-									min="0"
-								/>
-							</Tooltip>
-						</div>
-					</div>
-
-					<div class="  mb-2.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Image Compression Width')}
-						</div>
-						<div class="flex items-center relative">
-							<Tooltip
-								content={$i18n.t(
-									'The width in pixels to compress images to. Leave empty for no compression.'
-								)}
-								placement="top-start"
-							>
-								<input
-									class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-									type="number"
-									placeholder={$i18n.t('Leave empty for no compression')}
-									bind:value={RAGConfig.FILE_IMAGE_COMPRESSION_WIDTH}
-									autocomplete="off"
-									min="0"
-								/>
-							</Tooltip>
-						</div>
-					</div>
-
-					<div class="  mb-2.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Image Compression Height')}
-						</div>
-						<div class="flex items-center relative">
-							<Tooltip
-								content={$i18n.t(
-									'The height in pixels to compress images to. Leave empty for no compression.'
-								)}
-								placement="top-start"
-							>
-								<input
-									class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-									type="number"
-									placeholder={$i18n.t('Leave empty for no compression')}
-									bind:value={RAGConfig.FILE_IMAGE_COMPRESSION_HEIGHT}
-									autocomplete="off"
-									min="0"
-								/>
-							</Tooltip>
-						</div>
-					</div>
+				<div class="grid grid-cols-1 gap-x-3 gap-y-2.5 sm:grid-cols-2">
+					<AdminSettingField
+						label={$i18n.t('Image Compression Width')}
+						description={$i18n.t(
+							'Width in pixels to compress images to. Leave empty for no compression.'
+						)}
+					>
+						<input
+							class={inputClass}
+							type="number"
+							placeholder={$i18n.t('Leave empty for no compression')}
+							bind:value={RAGConfig.FILE_IMAGE_COMPRESSION_WIDTH}
+							autocomplete="off"
+							min="0"
+						/>
+					</AdminSettingField>
+					<AdminSettingField
+						label={$i18n.t('Image Compression Height')}
+						description={$i18n.t(
+							'Height in pixels to compress images to. Leave empty for no compression.'
+						)}
+					>
+						<input
+							class={inputClass}
+							type="number"
+							placeholder={$i18n.t('Leave empty for no compression')}
+							bind:value={RAGConfig.FILE_IMAGE_COMPRESSION_HEIGHT}
+							autocomplete="off"
+							min="0"
+						/>
+					</AdminSettingField>
 				</div>
+			</AdminSettingSection>
 
-				<div class="mb-5">
-					<div class=" mb-2 text-xs text-gray-400 dark:text-gray-600">
-						{$i18n.t('Integration')}
-					</div>
+			<AdminSettingSection title={$i18n.t('Integration')}>
+				<AdminSettingRow
+					label={$i18n.t('Google Drive')}
+					description={$i18n.t('Allow Google Drive as a document source.')}
+				>
+					<Switch bind:state={RAGConfig.ENABLE_GOOGLE_DRIVE_INTEGRATION} />
+				</AdminSettingRow>
+				<AdminSettingRow
+					label={$i18n.t('OneDrive')}
+					description={$i18n.t('Allow OneDrive as a document source.')}
+				>
+					<Switch bind:state={RAGConfig.ENABLE_ONEDRIVE_INTEGRATION} />
+				</AdminSettingRow>
+			</AdminSettingSection>
 
-					<div class="  mb-2.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Google Drive')}
-						</div>
-						<div class="flex items-center relative">
-							<Switch bind:state={RAGConfig.ENABLE_GOOGLE_DRIVE_INTEGRATION} />
-						</div>
-					</div>
-
-					<div class="  mb-2.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('OneDrive')}
-						</div>
-						<div class="flex items-center relative">
-							<Switch bind:state={RAGConfig.ENABLE_ONEDRIVE_INTEGRATION} />
-						</div>
-					</div>
-				</div>
-
-				<div class="mb-5">
-					<div class=" mb-2 text-xs text-gray-400 dark:text-gray-600">
-						{$i18n.t('Danger Zone')}
-					</div>
-
-					<div class="  mb-2.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Reset Upload Directory')}
-						</div>
-						<div class="flex items-center relative">
-							<button
-								class="text-xs"
-								type="button"
-								on:click={() => {
-									showResetUploadDirConfirm = true;
-								}}
-							>
-								{$i18n.t('Reset')}
-							</button>
-						</div>
-					</div>
-
-					<div class="  mb-2.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Reset Vector Storage/Knowledge')}
-						</div>
-						<div class="flex items-center relative">
-							<button
-								class="text-xs"
-								type="button"
-								on:click={() => {
-									showResetConfirm = true;
-								}}
-							>
-								{$i18n.t('Reset')}
-							</button>
-						</div>
-					</div>
-					<div class="  mb-2.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Reindex Knowledge Base Vectors')}
-						</div>
-						<div class="flex items-center relative">
-							<button
-								class="text-xs"
-								type="button"
-								on:click={() => {
-									showReindexConfirm = true;
-								}}
-							>
-								{$i18n.t('Reindex')}
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
+			<AdminSettingSection title={$i18n.t('Danger Zone')}>
+				<AdminSettingRow
+					label={$i18n.t('Reset Upload Directory')}
+					description={$i18n.t('Delete uploaded files from the upload directory.')}
+				>
+					<button
+						class={actionButtonClass}
+						type="button"
+						on:click={() => {
+							showResetUploadDirConfirm = true;
+						}}
+					>
+						{$i18n.t('Reset')}
+					</button>
+				</AdminSettingRow>
+				<AdminSettingRow
+					label={$i18n.t('Reset Vector Storage/Knowledge')}
+					description={$i18n.t('Clear vector storage and knowledge indexing data.')}
+				>
+					<button
+						class={actionButtonClass}
+						type="button"
+						on:click={() => {
+							showResetConfirm = true;
+						}}
+					>
+						{$i18n.t('Reset')}
+					</button>
+				</AdminSettingRow>
+				<AdminSettingRow
+					label={$i18n.t('Reindex Knowledge Base Vectors')}
+					description={$i18n.t('Rebuild vectors for existing knowledge files.')}
+				>
+					<button
+						class={actionButtonClass}
+						type="button"
+						on:click={() => {
+							showReindexConfirm = true;
+						}}
+					>
+						{$i18n.t('Reindex')}
+					</button>
+				</AdminSettingRow>
+			</AdminSettingSection>
 		</div>
+
 		<div class="flex justify-end pt-6 text-sm font-normal">
 			<button
 				class="px-3.5 py-1.5 text-sm font-normal bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
diff --git a/src/lib/components/admin/Settings/Images.svelte b/src/lib/components/admin/Settings/Images.svelte
index 60e52e2846..f8cd179ca5 100644
--- a/src/lib/components/admin/Settings/Images.svelte
+++ b/src/lib/components/admin/Settings/Images.svelte
@@ -20,6 +20,10 @@
 	import Textarea from '$lib/components/common/Textarea.svelte';
 	import CodeEditorModal from '$lib/components/common/CodeEditorModal.svelte';
 	import SettingsSelect from '$lib/components/common/SettingsSelect.svelte';
+	import AdminSettingField from './AdminSettingField.svelte';
+	import AdminSettingRow from './AdminSettingRow.svelte';
+	import AdminSettingSection from './AdminSettingSection.svelte';
+
 	const dispatch = createEventDispatcher();
 
 	const i18n = getContext('i18n');
@@ -28,6 +32,10 @@
 
 	let models = null;
 	let config = null;
+	const inputClass =
+		'w-full h-7 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 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';
 
 	let showComfyUIWorkflowEditor = false;
 	let REQUIRED_WORKFLOW_NODES = [
@@ -294,398 +302,243 @@
 
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if config}
-			<div>
-				<div class="mb-5">
-					<div class="mb-2.5">
-						<div class="flex w-full justify-between items-center">
-							<div class="text-xs pr-2">
-								<div class="">
-									{$i18n.t('Image Generation')}
-								</div>
-							</div>
+			<div class="flex flex-col">
+				<AdminSettingSection first>
+					<AdminSettingRow
+						label={$i18n.t('Image Generation')}
+						description={$i18n.t('Allow users to generate images from prompts.')}
+					>
+						<Switch bind:state={config.ENABLE_IMAGE_GENERATION} />
+					</AdminSettingRow>
+				</AdminSettingSection>
 
-							<Switch bind:state={config.ENABLE_IMAGE_GENERATION} />
-						</div>
-					</div>
-				</div>
-
-				<div class="mb-5">
-					<div class=" mb-2 text-xs text-gray-400 dark:text-gray-600">
-						{$i18n.t('Create Image')}
-					</div>
+				<AdminSettingSection title={$i18n.t('Create Image')}>
+					<AdminSettingRow
+						label={$i18n.t('Image Generation Engine')}
+						description={$i18n.t('Choose the provider used for image generation.')}
+					>
+						<SettingsSelect
+							bind:value={config.IMAGE_GENERATION_ENGINE}
+							placeholder={$i18n.t('Select Engine')}
+						>
+							<option value="openai">{$i18n.t('Default (Open AI)')}</option>
+							<option value="comfyui">{$i18n.t('ComfyUI')}</option>
+							<option value="automatic1111">{$i18n.t('Automatic1111')}</option>
+							<option value="gemini">{$i18n.t('Gemini')}</option>
+						</SettingsSelect>
+					</AdminSettingRow>
 
 					{#if config.ENABLE_IMAGE_GENERATION}
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2">
-									<div class="shrink-0">
-										{$i18n.t('Model')}
-									</div>
-								</div>
+						<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+							<AdminSettingField label={$i18n.t('Model')}>
+								<input
+									list="model-list"
+									class={inputClass}
+									bind:value={config.IMAGE_GENERATION_MODEL}
+									placeholder={$i18n.t('Select a model')}
+									required
+								/>
 
-								<Tooltip content={$i18n.t('Enter Model ID')} placement="top-start">
+								<datalist id="model-list">
+									{#each models ?? [] as model}
+										<option value={model.id}>{model.name}</option>
+									{/each}
+								</datalist>
+							</AdminSettingField>
+
+							<AdminSettingField label={$i18n.t('Image Size')}>
+								<input
+									class={inputClass}
+									placeholder={$i18n.t('Enter Image Size (e.g. 512x512)')}
+									bind:value={config.IMAGE_SIZE}
+								/>
+							</AdminSettingField>
+
+							{#if ['comfyui', 'automatic1111', ''].includes(config?.IMAGE_GENERATION_ENGINE)}
+								<AdminSettingField label={$i18n.t('Steps')}>
 									<input
-										list="model-list"
-										class=" text-right text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300 max-w-full w-52"
-										bind:value={config.IMAGE_GENERATION_MODEL}
-										placeholder={$i18n.t('Select a model')}
+										class={inputClass}
+										placeholder={$i18n.t('Enter Number of Steps (e.g. 50)')}
+										bind:value={config.IMAGE_STEPS}
 										required
 									/>
-
-									<datalist id="model-list">
-										{#each models ?? [] as model}
-											<option value={model.id}>{model.name}</option>
-										{/each}
-									</datalist>
-								</Tooltip>
-							</div>
+								</AdminSettingField>
+							{/if}
 						</div>
 
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2">
-									<div class="shrink-0">
-										{$i18n.t('Image Size')}
-									</div>
-								</div>
-
-								<Tooltip content={$i18n.t('Enter Image Size (e.g. 512x512)')} placement="top-start">
-									<input
-										class="  text-right text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300 max-w-full w-52"
-										placeholder={$i18n.t('Enter Image Size (e.g. 512x512)')}
-										bind:value={config.IMAGE_SIZE}
-									/>
-								</Tooltip>
-							</div>
-						</div>
-
-						{#if ['comfyui', 'automatic1111', ''].includes(config?.IMAGE_GENERATION_ENGINE)}
-							<div class="mb-2.5">
-								<div class="flex w-full justify-between items-center">
-									<div class="text-xs pr-2">
-										<div class="">
-											{$i18n.t('Steps')}
-										</div>
-									</div>
-
-									<Tooltip
-										content={$i18n.t('Enter Number of Steps (e.g. 50)')}
-										placement="top-start"
-									>
-										<input
-											class=" text-right text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-											placeholder={$i18n.t('Enter Number of Steps (e.g. 50)')}
-											bind:value={config.IMAGE_STEPS}
-											required
-										/>
-									</Tooltip>
-								</div>
-							</div>
-						{/if}
-
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2">
-									<div class="">
-										{$i18n.t('Image Prompt Generation')}
-									</div>
-								</div>
-
-								<Switch bind:state={config.ENABLE_IMAGE_PROMPT_GENERATION} />
-							</div>
-						</div>
+						<AdminSettingRow
+							label={$i18n.t('Image Prompt Generation')}
+							description={$i18n.t('Generate an image prompt before sending the request.')}
+						>
+							<Switch bind:state={config.ENABLE_IMAGE_PROMPT_GENERATION} />
+						</AdminSettingRow>
 					{/if}
 
-					<div class="mb-2.5">
-						<div class="flex w-full justify-between items-center">
-							<div class="text-xs pr-2">
-								<div class="">
-									{$i18n.t('Image Generation Engine')}
-								</div>
-							</div>
-
-							<SettingsSelect
-								bind:value={config.IMAGE_GENERATION_ENGINE}
-								placeholder={$i18n.t('Select Engine')}
-							>
-								<option value="openai">{$i18n.t('Default (Open AI)')}</option>
-								<option value="comfyui">{$i18n.t('ComfyUI')}</option>
-								<option value="automatic1111">{$i18n.t('Automatic1111')}</option>
-								<option value="gemini">{$i18n.t('Gemini')}</option>
-							</SettingsSelect>
-						</div>
-					</div>
-
 					{#if config?.IMAGE_GENERATION_ENGINE === 'openai'}
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2 shrink-0">
-									<div class="">
-										{$i18n.t('OpenAI API Base URL')}
-									</div>
-								</div>
+						<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+							<AdminSettingField label={$i18n.t('API Base URL')}>
+								<input
+									class={inputClass}
+									placeholder={$i18n.t('API Base URL')}
+									bind:value={config.IMAGES_OPENAI_API_BASE_URL}
+								/>
+							</AdminSettingField>
 
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											class="w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300 text-right"
-											placeholder={$i18n.t('API Base URL')}
-											bind:value={config.IMAGES_OPENAI_API_BASE_URL}
-										/>
-									</div>
-								</div>
-							</div>
+							<AdminSettingField label={$i18n.t('API Key')}>
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('API Key')}
+									bind:value={config.IMAGES_OPENAI_API_KEY}
+									required={false}
+								/>
+							</AdminSettingField>
 						</div>
 
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2 shrink-0">
-									<div class="">
-										{$i18n.t('OpenAI API Key')}
-									</div>
-								</div>
+						<AdminSettingField label={$i18n.t('API Version')}>
+							<input
+								class={inputClass}
+								placeholder={$i18n.t('API Version')}
+								bind:value={config.IMAGES_OPENAI_API_VERSION}
+							/>
+						</AdminSettingField>
 
-								<div class="flex w-full">
-									<div class="flex-1">
-										<SensitiveInput
-											variant="settings"
-											inputClassName="text-right w-full"
-											placeholder={$i18n.t('API Key')}
-											bind:value={config.IMAGES_OPENAI_API_KEY}
-											required={false}
-										/>
-									</div>
-								</div>
-							</div>
-						</div>
-
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2 shrink-0">
-									<div class="">
-										{$i18n.t('OpenAI API Version')}
-									</div>
-								</div>
-
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											class="w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300 text-right"
-											placeholder={$i18n.t('API Version')}
-											bind:value={config.IMAGES_OPENAI_API_VERSION}
-										/>
-									</div>
-								</div>
-							</div>
-						</div>
-
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2 shrink-0">
-									<div class="">
-										{$i18n.t('Additional Parameters')}
-									</div>
-								</div>
-							</div>
-							<div class="mt-1.5 flex w-full">
-								<div class="flex-1 mr-2">
-									<Textarea
-										className="w-full 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"
-										bind:value={config.IMAGES_OPENAI_API_PARAMS}
-										placeholder={$i18n.t('Enter additional parameters in JSON format')}
-										minSize={100}
-									/>
-								</div>
-							</div>
-						</div>
+						<AdminSettingField
+							label={$i18n.t('Additional Parameters')}
+							description={$i18n.t(
+								'Send extra JSON parameters with each image generation request.'
+							)}
+						>
+							<Textarea
+								className={textareaClass}
+								bind:value={config.IMAGES_OPENAI_API_PARAMS}
+								placeholder={$i18n.t('Enter additional parameters in JSON format')}
+								minSize={100}
+							/>
+						</AdminSettingField>
 					{:else if (config?.IMAGE_GENERATION_ENGINE ?? 'automatic1111') === 'automatic1111'}
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2 shrink-0">
-									<div class="">
-										{$i18n.t('AUTOMATIC1111 Base URL')}
-									</div>
-								</div>
+						<AdminSettingField
+							label={$i18n.t('Base URL')}
+							description={$i18n.t(
+								'Connect to a stable-diffusion-webui server running with the `--api` flag.'
+							)}
+						>
+							<div class="flex w-full gap-2">
+								<input
+									class={inputClass}
+									placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
+									bind:value={config.AUTOMATIC1111_BASE_URL}
+								/>
+								<button
+									class="shrink-0 text-gray-400 transition-colors hover:text-gray-900 dark:text-gray-600 dark:hover:text-white"
+									type="button"
+									aria-label="verify connection"
+									on:click={async () => {
+										await updateConfigHandler();
+										const res = await verifyConfigUrl(localStorage.token).catch((error) => {
+											toast.error(`${error}`);
+											return null;
+										});
 
-								<div class="flex w-full">
-									<div class="flex-1 mr-2">
-										<input
-											class="w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300 text-right"
-											placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
-											bind:value={config.AUTOMATIC1111_BASE_URL}
-										/>
-									</div>
-									<button
-										class="  transition"
-										type="button"
-										aria-label="verify connection"
-										on:click={async () => {
-											await updateConfigHandler();
-											const res = await verifyConfigUrl(localStorage.token).catch((error) => {
-												toast.error(`${error}`);
-												return null;
-											});
-
-											if (res) {
-												toast.success($i18n.t('Server connection verified'));
-											}
-										}}
+										if (res) {
+											toast.success($i18n.t('Server connection verified'));
+										}
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										class="w-4 h-4"
 									>
-										<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="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
-												clip-rule="evenodd"
-											/>
-										</svg>
-									</button>
-								</div>
-							</div>
-
-							<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
-								{$i18n.t('Include `--api` flag when running stable-diffusion-webui')}
-								<a
-									class=" text-gray-300 font-normal"
-									href="https://github.com/AUTOMATIC1111/stable-diffusion-webui/discussions/3734"
-									target="_blank"
-								>
-									{$i18n.t('(e.g. `sh webui.sh --api`)')}
-								</a>
-							</div>
-						</div>
-
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2 shrink-0">
-									<div class="">
-										{$i18n.t('AUTOMATIC1111 Api Auth String')}
-									</div>
-								</div>
-
-								<div class="flex w-full">
-									<div class="flex-1">
-										<SensitiveInput
-											variant="settings"
-											inputClassName="text-right w-full"
-											placeholder={$i18n.t('Enter api auth string (e.g. username:password)')}
-											bind:value={config.AUTOMATIC1111_API_AUTH}
-											required={false}
+										<path
+											fill-rule="evenodd"
+											d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
+											clip-rule="evenodd"
 										/>
-									</div>
-								</div>
+									</svg>
+								</button>
 							</div>
+						</AdminSettingField>
 
-							<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
-								{$i18n.t('Include `--api-auth` flag when running stable-diffusion-webui')}
-								<a
-									class=" text-gray-300 font-normal"
-									href="https://github.com/AUTOMATIC1111/stable-diffusion-webui/discussions/13993"
-									target="_blank"
-								>
-									{$i18n
-										.t('(e.g. `sh webui.sh --api --api-auth username_password`)')
-										.replace('_', ':')}
-								</a>
-							</div>
-						</div>
+						<AdminSettingField
+							label={$i18n.t('API Auth String')}
+							description={$i18n.t('Provide the --api-auth username and password when required.')}
+						>
+							<SensitiveInput
+								variant="settings"
+								placeholder={$i18n.t('Enter api auth string (e.g. username:password)')}
+								bind:value={config.AUTOMATIC1111_API_AUTH}
+								required={false}
+							/>
+						</AdminSettingField>
 
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2 shrink-0">
-									<div class="">
-										{$i18n.t('Additional Parameters')}
-									</div>
-								</div>
-							</div>
-							<div class="mt-1.5 flex w-full">
-								<div class="flex-1 mr-2">
-									<Textarea
-										className="w-full 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"
-										bind:value={config.AUTOMATIC1111_PARAMS}
-										placeholder={$i18n.t('Enter additional parameters in JSON format')}
-										minSize={100}
-									/>
-								</div>
-							</div>
-						</div>
+						<AdminSettingField
+							label={$i18n.t('Additional Parameters')}
+							description={$i18n.t('Send extra JSON parameters with each AUTOMATIC1111 request.')}
+						>
+							<Textarea
+								className={textareaClass}
+								bind:value={config.AUTOMATIC1111_PARAMS}
+								placeholder={$i18n.t('Enter additional parameters in JSON format')}
+								minSize={100}
+							/>
+						</AdminSettingField>
 					{:else if config?.IMAGE_GENERATION_ENGINE === 'comfyui'}
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2 shrink-0">
-									<div class="">
-										{$i18n.t('ComfyUI Base URL')}
-									</div>
-								</div>
+						<AdminSettingField
+							label={$i18n.t('Base URL')}
+							description={$i18n.t('Connect to the ComfyUI server used for generation.')}
+						>
+							<div class="flex w-full gap-2">
+								<input
+									class={inputClass}
+									placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
+									bind:value={config.COMFYUI_BASE_URL}
+								/>
+								<button
+									class="shrink-0 text-gray-400 transition-colors hover:text-gray-900 dark:text-gray-600 dark:hover:text-white"
+									type="button"
+									aria-label="verify connection"
+									on:click={async () => {
+										await updateConfigHandler();
+										const res = await verifyConfigUrl(localStorage.token).catch((error) => {
+											toast.error(`${error}`);
+											return null;
+										});
 
-								<div class="flex w-full">
-									<div class="flex-1 mr-2">
-										<input
-											class="w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300 text-right"
-											placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
-											bind:value={config.COMFYUI_BASE_URL}
-										/>
-									</div>
-									<button
-										class="  rounded-lg transition"
-										type="button"
-										aria-label="verify connection"
-										on:click={async () => {
-											await updateConfigHandler();
-											const res = await verifyConfigUrl(localStorage.token).catch((error) => {
-												toast.error(`${error}`);
-												return null;
-											});
-
-											if (res) {
-												toast.success($i18n.t('Server connection verified'));
-											}
-										}}
+										if (res) {
+											toast.success($i18n.t('Server connection verified'));
+										}
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										class="w-4 h-4"
 									>
-										<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="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
-												clip-rule="evenodd"
-											/>
-										</svg>
-									</button>
-								</div>
-							</div>
-						</div>
-
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2 shrink-0">
-									<div class="">
-										{$i18n.t('ComfyUI API Key')}
-									</div>
-								</div>
-
-								<div class="flex w-full">
-									<div class="flex-1">
-										<SensitiveInput
-											variant="settings"
-											inputClassName="text-right w-full"
-											placeholder={$i18n.t('sk-1234')}
-											bind:value={config.COMFYUI_API_KEY}
-											required={false}
+										<path
+											fill-rule="evenodd"
+											d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
+											clip-rule="evenodd"
 										/>
-									</div>
-								</div>
+									</svg>
+								</button>
 							</div>
-						</div>
+						</AdminSettingField>
 
-						<div class="mb-2.5">
+						<AdminSettingField
+							label={$i18n.t('API Key')}
+							description={$i18n.t('Use an API key when your ComfyUI server requires one.')}
+						>
+							<SensitiveInput
+								variant="settings"
+								placeholder={$i18n.t('sk-1234')}
+								bind:value={config.COMFYUI_API_KEY}
+								required={false}
+							/>
+						</AdminSettingField>
+
+						<div>
 							<input
 								id="upload-comfyui-workflow-input"
 								hidden
@@ -703,46 +556,43 @@
 									reader.readAsText(file);
 								}}
 							/>
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2 shrink-0">
-									<div class="">
-										{$i18n.t('ComfyUI Workflow')}
-									</div>
+							<AdminSettingRow
+								label={$i18n.t('ComfyUI Workflow')}
+								description={$i18n.t(
+									'Upload a workflow.json file exported as API format from ComfyUI.'
+								)}
+							>
+								<div class="flex items-center justify-end gap-2">
+									{#if config.COMFYUI_WORKFLOW}
+										<button
+											class="text-xs text-gray-500 transition-colors hover:text-gray-900 hover:underline dark:text-gray-500 dark:hover:text-white"
+											type="button"
+											aria-label={$i18n.t('Edit workflow.json content')}
+											on:click={() => {
+												// open code editor modal
+												showComfyUIWorkflowEditor = true;
+											}}
+										>
+											{$i18n.t('Edit')}
+										</button>
+									{/if}
+
+									<Tooltip content={$i18n.t('Click here to upload a workflow.json file.')}>
+										<button
+											class="text-xs text-gray-500 transition-colors hover:text-gray-900 hover:underline dark:text-gray-500 dark:hover:text-white"
+											type="button"
+											aria-label={$i18n.t('Click here to upload a workflow.json file.')}
+											on:click={() => {
+												document.getElementById('upload-comfyui-workflow-input')?.click();
+											}}
+										>
+											{$i18n.t('Upload')}
+										</button>
+									</Tooltip>
 								</div>
+							</AdminSettingRow>
 
-								<div class="flex w-full">
-									<div class="flex-1 mr-2 justify-end flex gap-1">
-										{#if config.COMFYUI_WORKFLOW}
-											<button
-												class="text-xs text-gray-700 dark:text-gray-400 underline"
-												type="button"
-												aria-label={$i18n.t('Edit workflow.json content')}
-												on:click={() => {
-													// open code editor modal
-													showComfyUIWorkflowEditor = true;
-												}}
-											>
-												{$i18n.t('Edit')}
-											</button>
-										{/if}
-
-										<Tooltip content={$i18n.t('Click here to upload a workflow.json file.')}>
-											<button
-												class="text-xs text-gray-700 dark:text-gray-400 underline"
-												type="button"
-												aria-label={$i18n.t('Click here to upload a workflow.json file.')}
-												on:click={() => {
-													document.getElementById('upload-comfyui-workflow-input')?.click();
-												}}
-											>
-												{$i18n.t('Upload')}
-											</button>
-										</Tooltip>
-									</div>
-								</div>
-							</div>
-
-							<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
+							<div>
 								<CodeEditorModal
 									bind:show={showComfyUIWorkflowEditor}
 									value={config.COMFYUI_WORKFLOW}
@@ -755,14 +605,13 @@
 									}}
 								/>
 								<!-- {#if config.COMFYUI_WORKFLOW}
-									<Textarea
-										className="my-1 w-full resize-none 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 disabled:text-gray-600 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500"
-										rows="10"
+								<Textarea
+									className="my-1 w-full resize-none 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 disabled:text-gray-600 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500"
+									rows="10"
 										bind:value={config.COMFYUI_WORKFLOW}
-										required
-									/>
-								{/if} -->
-								{$i18n.t('Make sure to export a workflow.json file as API format from ComfyUI.')}
+									required
+								/>
+							{/if} -->
 							</div>
 						</div>
 
@@ -822,230 +671,133 @@
 							</div>
 						{/if}
 					{:else if config?.IMAGE_GENERATION_ENGINE === 'gemini'}
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2 shrink-0">
-									<div class="">
-										{$i18n.t('Gemini Base URL')}
-									</div>
-								</div>
+						<AdminSettingField
+							label={$i18n.t('Base URL')}
+							description={$i18n.t('Override the Gemini image generation endpoint.')}
+						>
+							<input
+								class={inputClass}
+								placeholder={$i18n.t('API Base URL')}
+								bind:value={config.IMAGES_GEMINI_API_BASE_URL}
+							/>
+						</AdminSettingField>
 
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											class="w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300 text-right"
-											placeholder={$i18n.t('API Base URL')}
-											bind:value={config.IMAGES_GEMINI_API_BASE_URL}
-										/>
-									</div>
-								</div>
-							</div>
-						</div>
+						<AdminSettingField
+							label={$i18n.t('API Key')}
+							description={$i18n.t('Use a Gemini API key for image generation.')}
+						>
+							<SensitiveInput
+								variant="settings"
+								placeholder={$i18n.t('API Key')}
+								bind:value={config.IMAGES_GEMINI_API_KEY}
+								required={true}
+							/>
+						</AdminSettingField>
 
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2 shrink-0">
-									<div class="">
-										{$i18n.t('Gemini API Key')}
-									</div>
-								</div>
-
-								<div class="flex w-full">
-									<div class="flex-1">
-										<SensitiveInput
-											variant="settings"
-											inputClassName="text-right w-full"
-											placeholder={$i18n.t('API Key')}
-											bind:value={config.IMAGES_GEMINI_API_KEY}
-											required={true}
-										/>
-									</div>
-								</div>
-							</div>
-						</div>
-
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2">
-									<div class="">
-										{$i18n.t('Gemini Endpoint Method')}
-									</div>
-								</div>
-
-								<SettingsSelect
-									bind:value={config.IMAGES_GEMINI_ENDPOINT_METHOD}
-									placeholder={$i18n.t('Select Method')}
-								>
-									<option value="predict">predict</option>
-									<option value="generateContent">generateContent</option>
-								</SettingsSelect>
-							</div>
-						</div>
+						<AdminSettingRow
+							label={$i18n.t('Gemini Endpoint Method')}
+							description={$i18n.t('Select the Gemini endpoint method to call.')}
+						>
+							<SettingsSelect
+								bind:value={config.IMAGES_GEMINI_ENDPOINT_METHOD}
+								placeholder={$i18n.t('Select Method')}
+							>
+								<option value="predict">predict</option>
+								<option value="generateContent">generateContent</option>
+							</SettingsSelect>
+						</AdminSettingRow>
 					{/if}
-				</div>
+				</AdminSettingSection>
 
-				<div class="mb-5">
-					<div class=" mb-2 text-xs text-gray-400 dark:text-gray-600">
-						{$i18n.t('Edit Image')}
-					</div>
+				<AdminSettingSection title={$i18n.t('Edit Image')}>
+					<AdminSettingRow
+						label={$i18n.t('Image Edit')}
+						description={$i18n.t('Allow users to edit existing images.')}
+					>
+						<Switch bind:state={config.ENABLE_IMAGE_EDIT} />
+					</AdminSettingRow>
 
-					<div class="mb-2.5">
-						<div class="flex w-full justify-between items-center">
-							<div class="text-xs pr-2">
-								<div class="">
-									{$i18n.t('Image Edit')}
-								</div>
-							</div>
-
-							<Switch bind:state={config.ENABLE_IMAGE_EDIT} />
-						</div>
-					</div>
+					<AdminSettingRow
+						label={$i18n.t('Image Edit Engine')}
+						description={$i18n.t('Choose the provider used for image edits.')}
+					>
+						<SettingsSelect
+							bind:value={config.IMAGE_EDIT_ENGINE}
+							placeholder={$i18n.t('Select Engine')}
+						>
+							<option value="openai">{$i18n.t('Default (Open AI)')}</option>
+							<option value="comfyui">{$i18n.t('ComfyUI')}</option>
+							<option value="gemini">{$i18n.t('Gemini')}</option>
+						</SettingsSelect>
+					</AdminSettingRow>
 
 					{#if config?.ENABLE_IMAGE_GENERATION && config?.ENABLE_IMAGE_EDIT}
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2">
-									<div class="shrink-0">
-										{$i18n.t('Model')}
-									</div>
-								</div>
+						<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+							<AdminSettingField label={$i18n.t('Model')}>
+								<input
+									list="model-list"
+									class={inputClass}
+									bind:value={config.IMAGE_EDIT_MODEL}
+									placeholder={$i18n.t('Select a model')}
+								/>
 
-								<Tooltip content={$i18n.t('Enter Model ID')} placement="top-start">
+								<datalist id="model-list">
+									{#each models ?? [] as model}
+										<option value={model.id}>{model.name}</option>
+									{/each}
+								</datalist>
+							</AdminSettingField>
+
+							<AdminSettingField label={$i18n.t('Image Size')}>
 									<input
-										list="model-list"
-										class="text-right text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300 max-w-full w-52"
-										bind:value={config.IMAGE_EDIT_MODEL}
-										placeholder={$i18n.t('Select a model')}
+									class={inputClass}
+									placeholder={$i18n.t('Enter Image Size (e.g. 512x512)')}
+									bind:value={config.IMAGE_EDIT_SIZE}
 									/>
-
-									<datalist id="model-list">
-										{#each models ?? [] as model}
-											<option value={model.id}>{model.name}</option>
-										{/each}
-									</datalist>
-								</Tooltip>
-							</div>
-						</div>
-
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2">
-									<div class="shrink-0">
-										{$i18n.t('Image Size')}
-									</div>
-								</div>
-
-								<Tooltip content={$i18n.t('Enter Image Size (e.g. 512x512)')} placement="top-start">
-									<input
-										class="text-right text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300 max-w-full w-52"
-										placeholder={$i18n.t('Enter Image Size (e.g. 512x512)')}
-										bind:value={config.IMAGE_EDIT_SIZE}
-									/>
-								</Tooltip>
-							</div>
+							</AdminSettingField>
 						</div>
 					{/if}
 
-					<div class="mb-2.5">
-						<div class="flex w-full justify-between items-center">
-							<div class="text-xs pr-2">
-								<div class="">
-									{$i18n.t('Image Edit Engine')}
-								</div>
-							</div>
-
-							<SettingsSelect
-								bind:value={config.IMAGE_EDIT_ENGINE}
-								placeholder={$i18n.t('Select Engine')}
-							>
-								<option value="openai">{$i18n.t('Default (Open AI)')}</option>
-								<option value="comfyui">{$i18n.t('ComfyUI')}</option>
-								<option value="gemini">{$i18n.t('Gemini')}</option>
-							</SettingsSelect>
-						</div>
-					</div>
-
 					{#if config?.IMAGE_EDIT_ENGINE === 'openai'}
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2 shrink-0">
-									<div class="">
-										{$i18n.t('OpenAI API Base URL')}
-									</div>
-								</div>
+						<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+							<AdminSettingField label={$i18n.t('API Base URL')}>
+								<input
+									class={inputClass}
+									placeholder={$i18n.t('API Base URL')}
+									bind:value={config.IMAGES_EDIT_OPENAI_API_BASE_URL}
+								/>
+							</AdminSettingField>
 
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											class="w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300 text-right"
-											placeholder={$i18n.t('API Base URL')}
-											bind:value={config.IMAGES_EDIT_OPENAI_API_BASE_URL}
-										/>
-									</div>
-								</div>
-							</div>
+							<AdminSettingField label={$i18n.t('API Key')}>
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('API Key')}
+									bind:value={config.IMAGES_EDIT_OPENAI_API_KEY}
+									required={false}
+								/>
+							</AdminSettingField>
 						</div>
 
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2 shrink-0">
-									<div class="">
-										{$i18n.t('OpenAI API Key')}
-									</div>
-								</div>
-
-								<div class="flex w-full">
-									<div class="flex-1">
-										<SensitiveInput
-											variant="settings"
-											inputClassName="text-right w-full"
-											placeholder={$i18n.t('API Key')}
-											bind:value={config.IMAGES_EDIT_OPENAI_API_KEY}
-											required={false}
-										/>
-									</div>
-								</div>
-							</div>
-						</div>
-
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2 shrink-0">
-									<div class="">
-										{$i18n.t('OpenAI API Version')}
-									</div>
-								</div>
-
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											class="w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300 text-right"
-											placeholder={$i18n.t('API Version')}
-											bind:value={config.IMAGES_EDIT_OPENAI_API_VERSION}
-										/>
-									</div>
-								</div>
-							</div>
-						</div>
+						<AdminSettingField label={$i18n.t('API Version')}>
+							<input
+								class={inputClass}
+								placeholder={$i18n.t('API Version')}
+								bind:value={config.IMAGES_EDIT_OPENAI_API_VERSION}
+							/>
+						</AdminSettingField>
 					{:else if config?.IMAGE_EDIT_ENGINE === 'comfyui'}
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2 shrink-0">
-									<div class="">
-										{$i18n.t('ComfyUI Base URL')}
-									</div>
-								</div>
-
-								<div class="flex w-full">
-									<div class="flex-1 mr-2">
-										<input
-											class="w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300 text-right"
-											placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
-											bind:value={config.IMAGES_EDIT_COMFYUI_BASE_URL}
-										/>
-									</div>
+						<AdminSettingField
+							label={$i18n.t('Base URL')}
+							description={$i18n.t('Connect to the ComfyUI server used for image edits.')}
+						>
+							<div class="flex w-full gap-2">
+								<input
+									class={inputClass}
+									placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
+									bind:value={config.IMAGES_EDIT_COMFYUI_BASE_URL}
+								/>
 									<button
-										class="  transition"
+									class="shrink-0 text-gray-400 transition-colors hover:text-gray-900 dark:text-gray-600 dark:hover:text-white"
 										type="button"
 										aria-label="verify connection"
 										on:click={async () => {
@@ -1073,33 +825,22 @@
 											/>
 										</svg>
 									</button>
-								</div>
 							</div>
-						</div>
+						</AdminSettingField>
 
-						<div class="mb-2.5">
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2 shrink-0">
-									<div class="">
-										{$i18n.t('ComfyUI API Key')}
-									</div>
-								</div>
+						<AdminSettingField
+							label={$i18n.t('API Key')}
+							description={$i18n.t('Use an API key when your ComfyUI server requires one.')}
+						>
+							<SensitiveInput
+								variant="settings"
+								placeholder={$i18n.t('sk-1234')}
+								bind:value={config.IMAGES_EDIT_COMFYUI_API_KEY}
+								required={false}
+							/>
+						</AdminSettingField>
 
-								<div class="flex w-full">
-									<div class="flex-1">
-										<SensitiveInput
-											variant="settings"
-											inputClassName="text-right w-full"
-											placeholder={$i18n.t('sk-1234')}
-											bind:value={config.IMAGES_EDIT_COMFYUI_API_KEY}
-											required={false}
-										/>
-									</div>
-								</div>
-							</div>
-						</div>
-
-						<div class="mb-2.5">
+						<div>
 							<input
 								id="upload-comfyui-edit-workflow-input"
 								hidden
@@ -1114,62 +855,54 @@
 										e.target.value = null;
 									};
 
-									reader.readAsText(file);
+								reader.readAsText(file);
+							}}
+						/>
+							<AdminSettingRow
+								label={$i18n.t('ComfyUI Workflow')}
+								description={$i18n.t('Upload a workflow.json file exported as API format from ComfyUI.')}
+							>
+								<div class="flex items-center justify-end gap-2">
+									{#if config.IMAGES_EDIT_COMFYUI_WORKFLOW}
+										<button
+											class="text-xs text-gray-500 transition-colors hover:text-gray-900 hover:underline dark:text-gray-500 dark:hover:text-white"
+											type="button"
+											aria-label={$i18n.t('Edit workflow.json content')}
+											on:click={() => {
+												// open code editor modal
+												showComfyUIEditWorkflowEditor = true;
+											}}
+										>
+											{$i18n.t('Edit')}
+										</button>
+									{/if}
+
+									<Tooltip content={$i18n.t('Click here to upload a workflow.json file.')}>
+										<button
+											class="text-xs text-gray-500 transition-colors hover:text-gray-900 hover:underline dark:text-gray-500 dark:hover:text-white"
+											type="button"
+											aria-label={$i18n.t('Click here to upload a workflow.json file.')}
+											on:click={() => {
+												document.getElementById('upload-comfyui-edit-workflow-input')?.click();
+											}}
+										>
+											{$i18n.t('Upload')}
+										</button>
+									</Tooltip>
+								</div>
+							</AdminSettingRow>
+
+							<CodeEditorModal
+								bind:show={showComfyUIEditWorkflowEditor}
+								value={config.IMAGES_EDIT_COMFYUI_WORKFLOW}
+								lang="json"
+								onChange={(e) => {
+									config.IMAGES_EDIT_COMFYUI_WORKFLOW = e;
+								}}
+								onSave={() => {
+									console.log('Saved');
 								}}
 							/>
-							<div class="flex w-full justify-between items-center">
-								<div class="text-xs pr-2 shrink-0">
-									<div class="">
-										{$i18n.t('ComfyUI Workflow')}
-									</div>
-								</div>
-
-								<div class="flex w-full">
-									<div class="flex-1 mr-2 justify-end flex gap-1">
-										{#if config.IMAGES_EDIT_COMFYUI_WORKFLOW}
-											<button
-												class="text-xs text-gray-700 dark:text-gray-400 underline"
-												type="button"
-												aria-label={$i18n.t('Edit workflow.json content')}
-												on:click={() => {
-													// open code editor modal
-													showComfyUIEditWorkflowEditor = true;
-												}}
-											>
-												{$i18n.t('Edit')}
-											</button>
-										{/if}
-
-										<Tooltip content={$i18n.t('Click here to upload a workflow.json file.')}>
-											<button
-												class="text-xs text-gray-700 dark:text-gray-400 underline"
-												type="button"
-												aria-label={$i18n.t('Click here to upload a workflow.json file.')}
-												on:click={() => {
-													document.getElementById('upload-comfyui-edit-workflow-input')?.click();
-												}}
-											>
-												{$i18n.t('Upload')}
-											</button>
-										</Tooltip>
-									</div>
-								</div>
-							</div>
-
-							<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
-								<CodeEditorModal
-									bind:show={showComfyUIEditWorkflowEditor}
-									value={config.IMAGES_EDIT_COMFYUI_WORKFLOW}
-									lang="json"
-									onChange={(e) => {
-										config.IMAGES_EDIT_COMFYUI_WORKFLOW = e;
-									}}
-									onSave={() => {
-										console.log('Saved');
-									}}
-								/>
-								{$i18n.t('Make sure to export a workflow.json file as API format from ComfyUI.')}
-							</div>
 						</div>
 
 						{#if config.IMAGES_EDIT_COMFYUI_WORKFLOW}
@@ -1270,7 +1003,7 @@
 							</div>
 						</div>
 					{/if}
-				</div>
+				</AdminSettingSection>
 			</div>
 		{/if}
 	</div>
diff --git a/src/lib/components/admin/Settings/Interface.svelte b/src/lib/components/admin/Settings/Interface.svelte
index 3d0b89f742..0b92b86c48 100644
--- a/src/lib/components/admin/Settings/Interface.svelte
+++ b/src/lib/components/admin/Settings/Interface.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
 	import { getModels, getTaskConfig, updateTaskConfig } from '$lib/apis';
 	import { getChatConfig, updateChatConfig } from '$lib/apis/chats';
-	import { config, settings } from '$lib/stores';
 	import { createEventDispatcher, onMount, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
 	import { getBaseModels } from '$lib/apis/models';
 
-	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Switch from '$lib/components/common/Switch.svelte';
 	import Textarea from '$lib/components/common/Textarea.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import SettingsSelect from '$lib/components/common/SettingsSelect.svelte';
+	import AdminSettingField from './AdminSettingField.svelte';
+	import AdminSettingRow from './AdminSettingRow.svelte';
+	import AdminSettingSection from './AdminSettingSection.svelte';
 
 	const dispatch = createEventDispatcher();
 
@@ -52,10 +53,13 @@
 		]);
 	};
 
-	let workspaceModels = null;
-	let baseModels = null;
+	let workspaceModels: any[] = [];
+	let baseModels: any[] = [];
 
-	let models = null;
+	let models: any[] | null = null;
+	$: modelOptions = models ?? [];
+	const inputClass =
+		'w-full h-7 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 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';
 
@@ -69,8 +73,8 @@
 			workspaceModels = await getBaseModels(localStorage.token);
 			baseModels = await getModels(localStorage.token, null, false);
 
-			models = baseModels.map((m) => {
-				const workspaceModel = workspaceModels.find((wm) => wm.id === m.id);
+			models = baseModels.map((m: any) => {
+				const workspaceModel = workspaceModels.find((wm: any) => wm.id === m.id);
 
 				if (workspaceModel) {
 					return {
@@ -90,8 +94,9 @@
 
 			console.debug('models', models);
 		} catch (err) {
+			const error = err as { detail?: string; message?: string };
 			console.error('Failed to initialize Interface settings:', err);
-			toast.error(err?.detail ?? err?.message ?? $i18n.t('Failed to load Interface settings'));
+			toast.error(error?.detail ?? error?.message ?? $i18n.t('Failed to load Interface settings'));
 			models = [];
 		}
 	};
@@ -113,191 +118,163 @@
 			{$i18n.t('Interface')}
 		</h2>
 
-		<div class="  flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
-			<div class="mb-5">
-				<div class=" mb-2 text-xs text-gray-400 dark:text-gray-600">
-					{$i18n.t('Tasks')}
-				</div>
+		<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
+			<AdminSettingSection title={$i18n.t('Tasks')} first>
+				<div>
+					<div class="mb-2">
+						<div class="text-xs text-gray-600 dark:text-gray-400">{$i18n.t('Task Model')}</div>
+						<div class="mt-1.5 text-[0.6875rem] text-gray-400 dark:text-gray-600">
+							{$i18n.t(
+								'Choose fallback models for background tasks. Current Model follows the active chat model.'
+							)}
+						</div>
+					</div>
 
-				<div class=" mb-2 font-normal flex items-center">
-					<div class=" text-xs mr-1">{$i18n.t('Task Model')}</div>
-					<Tooltip
-						content={$i18n.t(
-							'A task model is used when performing tasks such as generating titles for chats and web search queries'
-						)}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke-width="1.5"
-							stroke="currentColor"
-							class="size-3.5"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
-							/>
-						</svg>
-					</Tooltip>
-				</div>
-
-				<div class=" mb-2.5 flex w-full gap-2">
-					<div class="flex-1">
-						<div class=" text-xs mb-1">{$i18n.t('Local Task Model')}</div>
-						<SettingsSelect
-							bind:value={taskConfig.TASK_MODEL}
-							className="w-full"
-							placeholder={$i18n.t('Select a model')}
-							on:change={() => {
-								if (taskConfig.TASK_MODEL) {
-									const model = models.find((m) => m.id === taskConfig.TASK_MODEL);
-									if (model) {
-										if (
-											model?.access_grants &&
-											!model.access_grants.some(
-												(g) =>
-													g.principal_type === 'user' &&
-													g.principal_id === '*' &&
-													g.permission === 'read'
-											)
-										) {
-											toast.error(
-												$i18n.t(
-													'This model is not publicly available. Please select another model.'
+					<div class="grid w-full grid-cols-1 gap-2.5 sm:grid-cols-2">
+						<AdminSettingField label={$i18n.t('Local Task Model')}>
+							<SettingsSelect
+								bind:value={taskConfig.TASK_MODEL}
+								className="w-full"
+								placeholder={$i18n.t('Select a model')}
+								on:change={() => {
+									if (taskConfig.TASK_MODEL) {
+										const model = modelOptions.find((m: any) => m.id === taskConfig.TASK_MODEL);
+										if (model) {
+											if (
+												model?.access_grants &&
+												!model.access_grants.some(
+													(g: any) =>
+														g.principal_type === 'user' &&
+														g.principal_id === '*' &&
+														g.permission === 'read'
 												)
-											);
+											) {
+												toast.error(
+													$i18n.t(
+														'This model is not publicly available. Please select another model.'
+													)
+												);
+											}
+
+											taskConfig.TASK_MODEL = model.id;
+										} else {
+											taskConfig.TASK_MODEL = '';
 										}
-
-										taskConfig.TASK_MODEL = model.id;
-									} else {
-										taskConfig.TASK_MODEL = '';
 									}
-								}
-							}}
-						>
-							<option value="" selected>{$i18n.t('Current Model')}</option>
-							{#each models as model}
-								<option value={model.id} class="bg-gray-100 dark:bg-gray-700">
-									{model.name}
-									{model?.connection_type === 'local' ? `(${$i18n.t('Local')})` : ''}
-								</option>
-							{/each}
-						</SettingsSelect>
-					</div>
+								}}
+							>
+								<option value="" selected>{$i18n.t('Current Model')}</option>
+								{#each modelOptions as model}
+									<option value={model.id} class="bg-gray-100 dark:bg-gray-700">
+										{model.name}
+										{model?.connection_type === 'local' ? `(${$i18n.t('Local')})` : ''}
+									</option>
+								{/each}
+							</SettingsSelect>
+						</AdminSettingField>
 
-					<div class="flex-1">
-						<div class=" text-xs mb-1">{$i18n.t('External Task Model')}</div>
-						<SettingsSelect
-							bind:value={taskConfig.TASK_MODEL_EXTERNAL}
-							className="w-full"
-							placeholder={$i18n.t('Select a model')}
-							on:change={() => {
-								if (taskConfig.TASK_MODEL_EXTERNAL) {
-									const model = models.find((m) => m.id === taskConfig.TASK_MODEL_EXTERNAL);
-									if (model) {
-										if (
-											model?.access_grants &&
-											!model.access_grants.some(
-												(g) =>
-													g.principal_type === 'user' &&
-													g.principal_id === '*' &&
-													g.permission === 'read'
-											)
-										) {
-											toast.error(
-												$i18n.t(
-													'This model is not publicly available. Please select another model.'
+						<AdminSettingField label={$i18n.t('External Task Model')}>
+							<SettingsSelect
+								bind:value={taskConfig.TASK_MODEL_EXTERNAL}
+								className="w-full"
+								placeholder={$i18n.t('Select a model')}
+								on:change={() => {
+									if (taskConfig.TASK_MODEL_EXTERNAL) {
+										const model = modelOptions.find(
+											(m: any) => m.id === taskConfig.TASK_MODEL_EXTERNAL
+										);
+										if (model) {
+											if (
+												model?.access_grants &&
+												!model.access_grants.some(
+													(g: any) =>
+														g.principal_type === 'user' &&
+														g.principal_id === '*' &&
+														g.permission === 'read'
 												)
-											);
-										}
+											) {
+												toast.error(
+													$i18n.t(
+														'This model is not publicly available. Please select another model.'
+													)
+												);
+											}
 
-										taskConfig.TASK_MODEL_EXTERNAL = model.id;
-									} else {
-										taskConfig.TASK_MODEL_EXTERNAL = '';
+											taskConfig.TASK_MODEL_EXTERNAL = model.id;
+										} else {
+											taskConfig.TASK_MODEL_EXTERNAL = '';
+										}
 									}
-								}
-							}}
-						>
-							<option value="" selected>{$i18n.t('Current Model')}</option>
-							{#each models as model}
-								<option value={model.id} class="bg-gray-100 dark:bg-gray-700">
-									{model.name}
-									{model?.connection_type === 'local' ? `(${$i18n.t('Local')})` : ''}
-								</option>
-							{/each}
-						</SettingsSelect>
+								}}
+							>
+								<option value="" selected>{$i18n.t('Current Model')}</option>
+								{#each modelOptions as model}
+									<option value={model.id} class="bg-gray-100 dark:bg-gray-700">
+										{model.name}
+										{model?.connection_type === 'local' ? `(${$i18n.t('Local')})` : ''}
+									</option>
+								{/each}
+							</SettingsSelect>
+						</AdminSettingField>
 					</div>
 				</div>
+			</AdminSettingSection>
 
-				<div class="mb-2.5 flex w-full items-center justify-between">
-					<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-						{$i18n.t('Context Compaction')}
-					</div>
-
+			<AdminSettingSection title={$i18n.t('Chat')}>
+				<AdminSettingRow
+					label={$i18n.t('Context Compaction')}
+					description={$i18n.t(
+						'Summarize older chat history when the conversation context grows large.'
+					)}
+				>
 					<Switch bind:state={chatConfig.ENABLE_CONTEXT_COMPACTION} />
-				</div>
+				</AdminSettingRow>
 
 				{#if chatConfig.ENABLE_CONTEXT_COMPACTION}
-					<div class="mb-2.5">
-						<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Token Threshold')}
-						</div>
+					<AdminSettingField
+						label={$i18n.t('Token Threshold')}
+						description={$i18n.t(
+							'Older messages are summarized when estimated context exceeds this token limit.'
+						)}
+					>
+						<input
+							type="number"
+							min="1"
+							step="1"
+							class={inputClass}
+							bind:value={chatConfig.CONTEXT_COMPACTION_TOKEN_THRESHOLD}
+						/>
+					</AdminSettingField>
 
-						<Tooltip
-							content={$i18n.t(
-								'Older messages are summarized when estimated context exceeds this token limit.'
+					<AdminSettingField
+						label={$i18n.t('Token Cap')}
+						description={$i18n.t(
+							'Model-specific context compaction thresholds cannot exceed this token limit.'
+						)}
+					>
+						<input
+							type="number"
+							min="1"
+							step="1"
+							class={inputClass}
+							bind:value={chatConfig.CONTEXT_COMPACTION_TOKEN_CAP}
+						/>
+					</AdminSettingField>
+
+					<AdminSettingField
+						label={$i18n.t('Context Compaction Prompt')}
+						description={$i18n.t(
+							'Controls how older messages are rewritten into a running summary.'
+						)}
+					>
+						<Textarea
+							className={textareaClass}
+							bind:value={chatConfig.CONTEXT_COMPACTION_PROMPT_TEMPLATE}
+							placeholder={$i18n.t(
+								'Leave empty to use the default prompt, or enter a custom prompt'
 							)}
-							placement="top-start"
-						>
-							<input
-								type="number"
-								min="1"
-								step="1"
-								class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-								bind:value={chatConfig.CONTEXT_COMPACTION_TOKEN_THRESHOLD}
-							/>
-						</Tooltip>
-					</div>
-
-					<div class="mb-2.5">
-						<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">{$i18n.t('Token Cap')}</div>
-
-						<Tooltip
-							content={$i18n.t(
-								'Model-specific context compaction thresholds cannot exceed this token limit.'
-							)}
-							placement="top-start"
-						>
-							<input
-								type="number"
-								min="1"
-								step="1"
-								class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-								bind:value={chatConfig.CONTEXT_COMPACTION_TOKEN_CAP}
-							/>
-						</Tooltip>
-					</div>
-
-					<div class="mb-2.5">
-						<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Context Compaction Prompt')}
-						</div>
-
-						<Tooltip
-							content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
-							placement="top-start"
-						>
-							<Textarea
-								className={textareaClass}
-								bind:value={chatConfig.CONTEXT_COMPACTION_PROMPT_TEMPLATE}
-								placeholder={$i18n.t(
-									'Leave empty to use the default prompt, or enter a custom prompt'
-								)}
-							/>
-						</Tooltip>
-						<div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+						/>
+						<div class="mt-1 text-[0.6875rem] text-gray-400 dark:text-gray-600">
 							{$i18n.t('Available variables')}:
 							<code>{'{{PREVIOUS_SUMMARY}}'}</code>,
 							<code>{'{{COMPACTED_MESSAGES}}'}</code>,
@@ -305,245 +282,182 @@
 							<code>{'{{MESSAGES}}'}</code>,
 							<code>{'{{CURRENT_DATE}}'}</code>
 						</div>
-					</div>
+					</AdminSettingField>
 				{/if}
+			</AdminSettingSection>
 
-				<div class="mb-2.5 flex w-full items-center justify-between">
-					<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-						{$i18n.t('Title Generation')}
-					</div>
-
+			<AdminSettingSection title={$i18n.t('Generation')}>
+				<AdminSettingRow
+					label={$i18n.t('Title Generation')}
+					description={$i18n.t('Allow automatic names for new chats.')}
+				>
 					<Switch bind:state={taskConfig.ENABLE_TITLE_GENERATION} />
-				</div>
+				</AdminSettingRow>
 
 				{#if taskConfig.ENABLE_TITLE_GENERATION}
-					<div class="mb-2.5">
-						<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Title Generation Prompt')}
-						</div>
-
-						<Tooltip
-							content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
-							placement="top-start"
-						>
-							<Textarea
-								className={textareaClass}
-								bind:value={taskConfig.TITLE_GENERATION_PROMPT_TEMPLATE}
-								placeholder={$i18n.t(
-									'Leave empty to use the default prompt, or enter a custom prompt'
-								)}
-							/>
-						</Tooltip>
-					</div>
+					<AdminSettingField
+						label={$i18n.t('Title Generation Prompt')}
+						description={$i18n.t('Shapes the short label generated for each chat.')}
+					>
+						<Textarea
+							className={textareaClass}
+							bind:value={taskConfig.TITLE_GENERATION_PROMPT_TEMPLATE}
+							placeholder={$i18n.t(
+								'Leave empty to use the default prompt, or enter a custom prompt'
+							)}
+						/>
+					</AdminSettingField>
 				{/if}
 
-				<div class="mb-2.5 flex w-full items-center justify-between">
-					<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-						{$i18n.t('Voice Mode Prompt')}
-					</div>
-
+				<AdminSettingRow
+					label={$i18n.t('Voice Mode Prompt')}
+					description={$i18n.t('Apply voice-specific instructions while voice mode is active.')}
+				>
 					<Switch bind:state={taskConfig.ENABLE_VOICE_MODE_PROMPT} />
-				</div>
+				</AdminSettingRow>
 
 				{#if taskConfig.ENABLE_VOICE_MODE_PROMPT}
-					<div class="mb-2.5">
-						<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Prompt Template')}
-						</div>
-
-						<Tooltip
-							content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
-							placement="top-start"
-						>
-							<Textarea
-								className={textareaClass}
-								bind:value={taskConfig.VOICE_MODE_PROMPT_TEMPLATE}
-								placeholder={$i18n.t(
-									'Leave empty to use the default prompt, or enter a custom prompt'
-								)}
-							/>
-						</Tooltip>
-					</div>
+					<AdminSettingField
+						label={$i18n.t('Prompt Template')}
+						description={$i18n.t('Defines the behavior used for spoken conversations.')}
+					>
+						<Textarea
+							className={textareaClass}
+							bind:value={taskConfig.VOICE_MODE_PROMPT_TEMPLATE}
+							placeholder={$i18n.t(
+								'Leave empty to use the default prompt, or enter a custom prompt'
+							)}
+						/>
+					</AdminSettingField>
 				{/if}
 
-				<div class="mb-2.5 flex w-full items-center justify-between">
-					<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-						{$i18n.t('Follow Up Generation')}
-					</div>
-
+				<AdminSettingRow
+					label={$i18n.t('Follow Up Generation')}
+					description={$i18n.t('Show suggested next questions after assistant responses.')}
+				>
 					<Switch bind:state={taskConfig.ENABLE_FOLLOW_UP_GENERATION} />
-				</div>
+				</AdminSettingRow>
 
 				{#if taskConfig.ENABLE_FOLLOW_UP_GENERATION}
-					<div class="mb-2.5">
-						<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Follow Up Generation Prompt')}
-						</div>
-
-						<Tooltip
-							content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
-							placement="top-start"
-						>
-							<Textarea
-								className={textareaClass}
-								bind:value={taskConfig.FOLLOW_UP_GENERATION_PROMPT_TEMPLATE}
-								placeholder={$i18n.t(
-									'Leave empty to use the default prompt, or enter a custom prompt'
-								)}
-							/>
-						</Tooltip>
-					</div>
+					<AdminSettingField
+						label={$i18n.t('Follow Up Generation Prompt')}
+						description={$i18n.t('Guides the suggestions shown after an assistant response.')}
+					>
+						<Textarea
+							className={textareaClass}
+							bind:value={taskConfig.FOLLOW_UP_GENERATION_PROMPT_TEMPLATE}
+							placeholder={$i18n.t(
+								'Leave empty to use the default prompt, or enter a custom prompt'
+							)}
+						/>
+					</AdminSettingField>
 				{/if}
 
-				<div class="mb-2.5 flex w-full items-center justify-between">
-					<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-						{$i18n.t('Tags Generation')}
-					</div>
-
+				<AdminSettingRow
+					label={$i18n.t('Tags Generation')}
+					description={$i18n.t('Create chat tags from conversation content.')}
+				>
 					<Switch bind:state={taskConfig.ENABLE_TAGS_GENERATION} />
-				</div>
+				</AdminSettingRow>
 
 				{#if taskConfig.ENABLE_TAGS_GENERATION}
-					<div class="mb-2.5">
-						<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Tags Generation Prompt')}
-						</div>
-
-						<Tooltip
-							content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
-							placement="top-start"
-						>
-							<Textarea
-								className={textareaClass}
-								bind:value={taskConfig.TAGS_GENERATION_PROMPT_TEMPLATE}
-								placeholder={$i18n.t(
-									'Leave empty to use the default prompt, or enter a custom prompt'
-								)}
-							/>
-						</Tooltip>
-					</div>
-				{/if}
-
-				<div class="mb-2.5 flex w-full items-center justify-between">
-					<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-						{$i18n.t('Retrieval Query Generation')}
-					</div>
-
-					<Switch bind:state={taskConfig.ENABLE_RETRIEVAL_QUERY_GENERATION} />
-				</div>
-
-				<div class="mb-2.5 flex w-full items-center justify-between">
-					<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-						{$i18n.t('Web Search Query Generation')}
-					</div>
-
-					<Switch bind:state={taskConfig.ENABLE_SEARCH_QUERY_GENERATION} />
-				</div>
-
-				<div class="mb-2.5">
-					<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-						{$i18n.t('Query Generation Prompt')}
-					</div>
-
-					<Tooltip
-						content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
-						placement="top-start"
+					<AdminSettingField
+						label={$i18n.t('Tags Generation Prompt')}
+						description={$i18n.t('Controls how chat tags are inferred.')}
 					>
 						<Textarea
 							className={textareaClass}
-							bind:value={taskConfig.QUERY_GENERATION_PROMPT_TEMPLATE}
+							bind:value={taskConfig.TAGS_GENERATION_PROMPT_TEMPLATE}
 							placeholder={$i18n.t(
 								'Leave empty to use the default prompt, or enter a custom prompt'
 							)}
 						/>
-					</Tooltip>
-				</div>
+					</AdminSettingField>
+				{/if}
 
-				<div class="mb-2.5 flex w-full items-center justify-between">
-					<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-						{$i18n.t('Autocomplete Generation')}
-					</div>
+				<AdminSettingRow
+					label={$i18n.t('Retrieval Query Generation')}
+					description={$i18n.t('Rewrite user requests for knowledge retrieval.')}
+				>
+					<Switch bind:state={taskConfig.ENABLE_RETRIEVAL_QUERY_GENERATION} />
+				</AdminSettingRow>
 
-					<Tooltip content={$i18n.t('Enable autocomplete generation for chat messages')}>
-						<Switch bind:state={taskConfig.ENABLE_AUTOCOMPLETE_GENERATION} />
-					</Tooltip>
-				</div>
+				<AdminSettingRow
+					label={$i18n.t('Web Search Query Generation')}
+					description={$i18n.t('Rewrite user requests into web-search queries.')}
+				>
+					<Switch bind:state={taskConfig.ENABLE_SEARCH_QUERY_GENERATION} />
+				</AdminSettingRow>
+
+				<AdminSettingField
+					label={$i18n.t('Query Generation Prompt')}
+					description={$i18n.t('Shared prompt for retrieval and web-search query rewriting.')}
+				>
+					<Textarea
+						className={textareaClass}
+						bind:value={taskConfig.QUERY_GENERATION_PROMPT_TEMPLATE}
+						placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
+					/>
+				</AdminSettingField>
+
+				<AdminSettingRow
+					label={$i18n.t('Autocomplete Generation')}
+					description={$i18n.t('Suggest completions while users type chat messages.')}
+				>
+					<Switch bind:state={taskConfig.ENABLE_AUTOCOMPLETE_GENERATION} />
+				</AdminSettingRow>
 
 				{#if taskConfig.ENABLE_AUTOCOMPLETE_GENERATION}
-					<div class="mb-2.5">
-						<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Autocomplete Generation Input Max Length')}
-						</div>
+					<AdminSettingField
+						label={$i18n.t('Autocomplete Generation Input Max Length')}
+						description={$i18n.t('Limit how much draft text is sent for suggestion generation.')}
+					>
+						<input
+							type="number"
+							min="-1"
+							step="1"
+							class={inputClass}
+							bind:value={taskConfig.AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH}
+							placeholder={$i18n.t('-1 for no limit, or a positive integer for a specific limit')}
+						/>
+					</AdminSettingField>
 
-						<Tooltip
-							content={$i18n.t('Character limit for autocomplete generation input')}
-							placement="top-start"
-						>
-							<input
-								class="w-full outline-hidden bg-transparent"
-								bind:value={taskConfig.AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH}
-								placeholder={$i18n.t('-1 for no limit, or a positive integer for a specific limit')}
-							/>
-						</Tooltip>
-					</div>
-					<div class="mb-2.5">
-						<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Autocomplete Generation Prompt')}
-						</div>
-
-						<Tooltip
-							content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
-							placement="top-start"
-						>
-							<Textarea
-								className={textareaClass}
-								bind:value={taskConfig.AUTOCOMPLETE_GENERATION_PROMPT_TEMPLATE}
-								placeholder={$i18n.t(
-									'Leave empty to use the default prompt, or enter a custom prompt'
-								)}
-							/>
-						</Tooltip>
-					</div>
+					<AdminSettingField
+						label={$i18n.t('Autocomplete Generation Prompt')}
+						description={$i18n.t('Guides inline completions while users type a message.')}
+					>
+						<Textarea
+							className={textareaClass}
+							bind:value={taskConfig.AUTOCOMPLETE_GENERATION_PROMPT_TEMPLATE}
+							placeholder={$i18n.t(
+								'Leave empty to use the default prompt, or enter a custom prompt'
+							)}
+						/>
+					</AdminSettingField>
 				{/if}
 
-				<div class="mb-2.5">
-					<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-						{$i18n.t('Image Prompt Generation Prompt')}
-					</div>
+				<AdminSettingField
+					label={$i18n.t('Image Prompt Generation Prompt')}
+					description={$i18n.t('Rewrites user intent into an image-generation prompt.')}
+				>
+					<Textarea
+						className={textareaClass}
+						bind:value={taskConfig.IMAGE_PROMPT_GENERATION_PROMPT_TEMPLATE}
+						placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
+					/>
+				</AdminSettingField>
 
-					<Tooltip
-						content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
-						placement="top-start"
-					>
-						<Textarea
-							className={textareaClass}
-							bind:value={taskConfig.IMAGE_PROMPT_GENERATION_PROMPT_TEMPLATE}
-							placeholder={$i18n.t(
-								'Leave empty to use the default prompt, or enter a custom prompt'
-							)}
-						/>
-					</Tooltip>
-				</div>
-
-				<div class="mb-2.5">
-					<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-						{$i18n.t('Tools Function Calling Prompt')}
-					</div>
-
-					<Tooltip
-						content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
-						placement="top-start"
-					>
-						<Textarea
-							className={textareaClass}
-							bind:value={taskConfig.TOOLS_FUNCTION_CALLING_PROMPT_TEMPLATE}
-							placeholder={$i18n.t(
-								'Leave empty to use the default prompt, or enter a custom prompt'
-							)}
-						/>
-					</Tooltip>
-				</div>
-			</div>
+				<AdminSettingField
+					label={$i18n.t('Tools Function Calling Prompt')}
+					description={$i18n.t('Guides how the assistant formats tool and function calls.')}
+				>
+					<Textarea
+						className={textareaClass}
+						bind:value={taskConfig.TOOLS_FUNCTION_CALLING_PROMPT_TEMPLATE}
+						placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
+					/>
+				</AdminSettingField>
+			</AdminSettingSection>
 		</div>
 
 		<div class="flex justify-end pt-6 text-sm font-normal">
@@ -556,7 +470,7 @@
 		</div>
 	</form>
 {:else}
-	<div class=" h-full w-full flex justify-center items-center">
+	<div class="flex h-full w-full items-center justify-center">
 		<Spinner className="size-5" />
 	</div>
 {/if}
diff --git a/src/lib/components/admin/Settings/Pipelines.svelte b/src/lib/components/admin/Settings/Pipelines.svelte
index 084f7e0d67..0c62f30523 100644
--- a/src/lib/components/admin/Settings/Pipelines.svelte
+++ b/src/lib/components/admin/Settings/Pipelines.svelte
@@ -20,6 +20,7 @@
 	import Switch from '$lib/components/common/Switch.svelte';
 	import AdminSettingField from './AdminSettingField.svelte';
 	import AdminSettingRow from './AdminSettingRow.svelte';
+	import AdminSettingSection from './AdminSettingSection.svelte';
 	import SettingsSelect from '$lib/components/common/SettingsSelect.svelte';
 
 	const i18n: Writable<i18nType> = getContext('i18n');
@@ -38,24 +39,27 @@
 
 	let valves: any = null;
 	let valves_spec: any = null;
-	let selectedPipelineIdx: number | null = null;
+	let selectedPipelineIdx = 0;
 
 	let pipelineDownloadUrl = '';
 	const inputClass =
 		'w-full h-7 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 =
-		'rounded-lg px-2 py-1 text-xs text-gray-500 transition-colors hover:bg-black/5 hover:text-gray-900 disabled:opacity-50 dark:text-gray-500 dark:hover:bg-white/5 dark:hover:text-white';
-	const iconButtonClass =
-		'flex size-7 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-black/5 hover:text-gray-900 disabled:opacity-50 dark:text-gray-600 dark:hover:bg-white/5 dark:hover:text-white';
+		'shrink-0 text-xs text-gray-500 transition-colors hover:text-gray-900 disabled:opacity-50 dark:text-gray-500 dark:hover:text-white';
 	const mutedMessageClass = 'text-xs text-gray-400 dark:text-gray-600';
 
 	const updateHandler = async () => {
+		if (!pipelines) {
+			toast.error($i18n.t('No valves to update'));
+			return;
+		}
+
 		const pipeline = pipelines[selectedPipelineIdx];
 
 		if (pipeline && (pipeline?.valves ?? false)) {
 			for (const property in valves_spec.properties) {
 				if (valves_spec.properties[property]?.type === 'array') {
-					valves[property] = (valves[property] ?? '').split(',').map((v) => v.trim());
+					valves[property] = (valves[property] ?? '').split(',').map((v: string) => v.trim());
 				}
 			}
 
@@ -86,7 +90,11 @@
 		}
 	};
 
-	const getValves = async (idx) => {
+	const getValves = async (idx: number) => {
+		if (!pipelines?.[idx]) {
+			return;
+		}
+
 		valves = null;
 		valves_spec = null;
 
@@ -113,11 +121,12 @@
 		valves = null;
 		valves_spec = null;
 
-		if (PIPELINES_LIST.length > 0) {
+		if ((PIPELINES_LIST ?? []).length > 0) {
 			console.debug(selectedPipelinesUrlIdx);
-			pipelines = await getPipelines(localStorage.token, selectedPipelinesUrlIdx);
+			const loadedPipelines = await getPipelines(localStorage.token, selectedPipelinesUrlIdx);
+			pipelines = loadedPipelines;
 
-			if (pipelines.length > 0) {
+			if (loadedPipelines.length > 0) {
 				selectedPipelineIdx = 0;
 				await getValves(selectedPipelineIdx);
 			}
@@ -186,19 +195,26 @@
 		}
 
 		pipelineFiles = null;
-		const pipelineUploadInputElement = document.getElementById('pipelines-upload-input');
+		const pipelineUploadInputElement = document.getElementById(
+			'pipelines-upload-input'
+		) as HTMLInputElement | null;
 
 		if (pipelineUploadInputElement) {
-			pipelineUploadInputElement.value = null;
+			pipelineUploadInputElement.value = '';
 		}
 
 		uploading = false;
 	};
 
 	const deletePipelineHandler = async () => {
+		const pipeline = pipelines?.[selectedPipelineIdx];
+		if (!pipeline) {
+			return;
+		}
+
 		const res = await deletePipeline(
 			localStorage.token,
-			pipelines[selectedPipelineIdx].id,
+			pipeline.id,
 			selectedPipelinesUrlIdx
 		).catch((error) => {
 			toast.error(`${error}`);
@@ -223,8 +239,9 @@
 		PIPELINES_LIST = await getPipelinesList(localStorage.token);
 		console.log(PIPELINES_LIST);
 
-		if (PIPELINES_LIST.length > 0) {
-			selectedPipelinesUrlIdx = PIPELINES_LIST[0]['idx'].toString();
+		const pipelinesList = PIPELINES_LIST ?? [];
+		if (pipelinesList.length > 0) {
+			selectedPipelinesUrlIdx = pipelinesList[0]['idx'].toString();
 		}
 
 		await setPipelines();
@@ -250,8 +267,11 @@
 					hidden
 				/>
 
-				<div class="flex flex-col gap-2.5">
-					<AdminSettingField label={$i18n.t('Pipeline URL')}>
+				<AdminSettingSection title={$i18n.t('Source')} first>
+					<AdminSettingField
+						label={$i18n.t('Pipeline URL')}
+						description={$i18n.t('Select the Pipelines server to manage.')}
+					>
 						<SettingsSelect
 							bind:value={selectedPipelinesUrlIdx}
 							className="w-full"
@@ -273,7 +293,10 @@
 						</SettingsSelect>
 					</AdminSettingField>
 
-					<AdminSettingField label={$i18n.t('Upload Pipeline')}>
+					<AdminSettingField
+						label={$i18n.t('Upload Pipeline')}
+						description={$i18n.t('Upload a local Python pipeline file to the selected server.')}
+					>
 						<div class="flex gap-2">
 							<button
 								class="h-7 flex-1 rounded-lg border border-dashed border-gray-100/50 bg-transparent px-2 text-left text-xs text-gray-500 transition-colors hover:bg-black/5 hover:text-gray-900 dark:border-white/[0.04] dark:text-gray-500 dark:hover:bg-white/5 dark:hover:text-white"
@@ -324,10 +347,15 @@
 							</button>
 						</div>
 					</AdminSettingField>
+				</AdminSettingSection>
 
-					{#if pipelines !== null}
-						{#if pipelines.length > 0}
-							<AdminSettingField label={$i18n.t('Pipeline')}>
+				{#if pipelines !== null}
+					{#if pipelines.length > 0}
+						<AdminSettingSection title={$i18n.t('Pipelines')}>
+							<AdminSettingField
+								label={$i18n.t('Pipeline')}
+								description={$i18n.t('Select an installed pipeline to configure or remove.')}
+							>
 								<div class="flex gap-2">
 									<SettingsSelect
 										bind:value={selectedPipelineIdx}
@@ -356,12 +384,17 @@
 									</button>
 								</div>
 							</AdminSettingField>
+						</AdminSettingSection>
 
+						<AdminSettingSection title={$i18n.t('Valves')}>
 							{#if pipelines[selectedPipelineIdx ?? 0]?.valves}
-								{#if valves}
+								{#if valves && valves_spec}
 									{#each Object.keys(valves_spec.properties) as property}
 										<div>
-											<AdminSettingRow label={valves_spec.properties[property].title}>
+											<AdminSettingRow
+												label={valves_spec.properties[property].title}
+												description={valves_spec.properties[property]?.description ?? ''}
+											>
 												<button
 													class={actionButtonClass}
 													type="button"
@@ -407,22 +440,28 @@
 										</div>
 									{/each}
 								{:else}
-									<Spinner className="size-5" />
+									<div class="flex justify-center py-2">
+										<Spinner className="size-4" />
+									</div>
 								{/if}
 							{:else}
 								<div class={mutedMessageClass}>{$i18n.t('No valves')}</div>
 							{/if}
-						{:else}
-							<div class={mutedMessageClass}>{$i18n.t('Pipelines Not Detected')}</div>
-						{/if}
+						</AdminSettingSection>
 					{:else}
-						<div class="flex justify-center py-4">
-							<Spinner className="size-4" />
-						</div>
+						<AdminSettingSection title={$i18n.t('Pipelines')}>
+							<div class={mutedMessageClass}>{$i18n.t('Pipelines Not Detected')}</div>
+						</AdminSettingSection>
 					{/if}
-				</div>
+				{:else}
+					<div class="flex justify-center py-4">
+						<Spinner className="size-4" />
+					</div>
+				{/if}
 			{:else}
-				<div class={mutedMessageClass}>{$i18n.t('Pipelines Not Detected')}</div>
+				<AdminSettingSection title={$i18n.t('Source')} first>
+					<div class={mutedMessageClass}>{$i18n.t('Pipelines Not Detected')}</div>
+				</AdminSettingSection>
 			{/if}
 		{:else}
 			<div class="flex justify-center h-full">
diff --git a/src/lib/components/admin/Settings/WebSearch.svelte b/src/lib/components/admin/Settings/WebSearch.svelte
index a13acdeca6..dbc98576ec 100644
--- a/src/lib/components/admin/Settings/WebSearch.svelte
+++ b/src/lib/components/admin/Settings/WebSearch.svelte
@@ -9,8 +9,11 @@
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Textarea from '$lib/components/common/Textarea.svelte';
 	import SettingsSelect from '$lib/components/common/SettingsSelect.svelte';
+	import AdminSettingField from './AdminSettingField.svelte';
+	import AdminSettingRow from './AdminSettingRow.svelte';
+	import AdminSettingSection from './AdminSettingSection.svelte';
 
-	const i18n = getContext('i18n');
+	const i18n: any = getContext('i18n');
 
 	export let saveHandler: Function;
 
@@ -47,7 +50,9 @@
 	];
 	let webLoaderEngines = ['playwright', 'firecrawl', 'tavily', 'microsoft_web_iq', 'external'];
 
-	let webConfig = null;
+	let webConfig: any = null;
+	const inputClass =
+		'w-full 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 textareaClass =
 		'w-full 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';
 
@@ -58,8 +63,8 @@
 			webConfig.WEB_SEARCH_DOMAIN_FILTER_LIST
 		) {
 			webConfig.WEB_SEARCH_DOMAIN_FILTER_LIST = webConfig.WEB_SEARCH_DOMAIN_FILTER_LIST.split(',')
-				.map((domain) => domain.trim())
-				.filter((domain) => domain.length > 0);
+				.map((domain: string) => domain.trim())
+				.filter((domain: string) => domain.length > 0);
 		} else if (!Array.isArray(webConfig.WEB_SEARCH_DOMAIN_FILTER_LIST)) {
 			webConfig.WEB_SEARCH_DOMAIN_FILTER_LIST = [];
 		}
@@ -70,8 +75,8 @@
 			webConfig.YOUTUBE_LOADER_LANGUAGE
 		) {
 			webConfig.YOUTUBE_LOADER_LANGUAGE = webConfig.YOUTUBE_LOADER_LANGUAGE.split(',')
-				.map((lang) => lang.trim())
-				.filter((lang) => lang.length > 0);
+				.map((lang: string) => lang.trim())
+				.filter((lang: string) => lang.length > 0);
 		} else if (!Array.isArray(webConfig.YOUTUBE_LOADER_LANGUAGE)) {
 			webConfig.YOUTUBE_LOADER_LANGUAGE = [];
 		}
@@ -157,1064 +162,82 @@
 
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if webConfig}
-			<div class="">
-				<div class="mb-5">
-					<div class="  mb-2.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Web Search')}
-						</div>
-						<div class="flex items-center relative">
-							<Switch bind:state={webConfig.ENABLE_WEB_SEARCH} />
-						</div>
-					</div>
-
-					<div class="mb-2.5 flex w-full justify-between">
-						<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Web Search Confirmation')}
-						</div>
-						<div class="flex items-center relative">
-							<Tooltip content={$i18n.t('Require users to confirm before using Web Search.')}>
-								<Switch bind:state={webConfig.ENABLE_WEB_SEARCH_CONFIRMATION} />
-							</Tooltip>
-						</div>
-					</div>
-
-					{#if webConfig.ENABLE_WEB_SEARCH_CONFIRMATION}
-						<div class="mb-2.5">
-							<div class="self-center text-xs text-gray-600 dark:text-gray-400 mb-2">
-								{$i18n.t('Web Search Confirmation Content')}
-							</div>
-							<Textarea
-								className={textareaClass}
-								placeholder={$i18n.t(
-									'Your query will be sent to the configured web search provider.'
-								)}
-								bind:value={webConfig.WEB_SEARCH_CONFIRMATION_CONTENT}
-							/>
-						</div>
-					{/if}
-
-					<div class="  mb-2.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Web Search Engine')}
-						</div>
-						<div class="flex items-center relative">
-							<SettingsSelect
-								bind:value={webConfig.WEB_SEARCH_ENGINE}
-								placeholder={$i18n.t('Select a engine')}
-								required
-							>
-								<option disabled selected value="">{$i18n.t('Select a engine')}</option>
-								{#each webSearchEngines as engine}
-									{#if engine === 'duckduckgo' || engine === 'ddgs'}
-										<option value={engine}>DDGS</option>
-									{:else if engine === 'serphouse'}
-										<option value={engine}>SERPHouse</option>
-									{:else}
-										<option value={engine}>{engine}</option>
-									{/if}
-								{/each}
-							</SettingsSelect>
-						</div>
-					</div>
-
-					{#if webConfig.WEB_SEARCH_ENGINE !== ''}
-						{#if webConfig.WEB_SEARCH_ENGINE === 'ollama_cloud'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Ollama Cloud API Key')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<SensitiveInput
-												variant="settings"
-												placeholder={$i18n.t('Enter Ollama Cloud API Key')}
-												bind:value={webConfig.OLLAMA_CLOUD_WEB_SEARCH_API_KEY}
-											/>
-										</div>
-									</div>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'perplexity_search'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Perplexity Search API URL')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<input
-												class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-												type="text"
-												placeholder={$i18n.t('Enter Perplexity Search API URL')}
-												bind:value={webConfig.PERPLEXITY_SEARCH_API_URL}
-												autocomplete="off"
-											/>
-										</div>
-									</div>
-								</div>
-							</div>
-
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Perplexity API Key')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<SensitiveInput
-												variant="settings"
-												placeholder={$i18n.t('Enter Perplexity API Key')}
-												bind:value={webConfig.PERPLEXITY_API_KEY}
-											/>
-										</div>
-									</div>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'searxng'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-left text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Searxng Query URL')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<input
-												class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-												type="text"
-												placeholder={$i18n.t('Enter Searxng Query URL')}
-												bind:value={webConfig.SEARXNG_QUERY_URL}
-												autocomplete="off"
-												required
-											/>
-										</div>
-									</div>
-								</div>
-								<div class="mb-2.5 flex w-full flex-col">
-									<div class=" self-left text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Searxng search language (all, en, es, de, fr, etc.)')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<input
-												class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-												type="text"
-												placeholder={$i18n.t('Enter Searxng search language')}
-												bind:value={webConfig.SEARXNG_LANGUAGE}
-												autocomplete="off"
-												required
-											/>
-										</div>
-									</div>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'yacy'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Yacy Instance URL')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<input
-												class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-												type="text"
-												placeholder={$i18n.t('Enter Yacy URL (e.g. http://yacy.example.com:8090)')}
-												bind:value={webConfig.YACY_QUERY_URL}
-												autocomplete="off"
-											/>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div class="mb-2.5 flex w-full flex-col">
-								<div class="flex gap-2">
-									<div class="w-full">
-										<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-											{$i18n.t('Yacy Username')}
-										</div>
-
-										<input
-											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-											placeholder={$i18n.t('Enter Yacy Username')}
-											bind:value={webConfig.YACY_USERNAME}
-											required
-										/>
-									</div>
-
-									<div class="w-full">
-										<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-											{$i18n.t('Yacy Password')}
-										</div>
-
-										<SensitiveInput
-											variant="settings"
-											placeholder={$i18n.t('Enter Yacy Password')}
-											bind:value={webConfig.YACY_PASSWORD}
-										/>
-									</div>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'google_pse'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Google PSE API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Google PSE API Key')}
-										bind:value={webConfig.GOOGLE_PSE_API_KEY}
-									/>
-								</div>
-								<div class="mt-1.5">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Google PSE Engine Id')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<input
-												class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-												type="text"
-												placeholder={$i18n.t('Enter Google PSE Engine Id')}
-												bind:value={webConfig.GOOGLE_PSE_ENGINE_ID}
-												autocomplete="off"
-											/>
-										</div>
-									</div>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'brave'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Brave Search API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Brave Search API Key')}
-										bind:value={webConfig.BRAVE_SEARCH_API_KEY}
-									/>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'brave_llm_context'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Brave Search API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Brave Search API Key')}
-										bind:value={webConfig.BRAVE_SEARCH_API_KEY}
-									/>
-								</div>
-								<div class="mt-1.5">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Context Tokens')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<input
-												class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-												type="number"
-												min="1024"
-												max="32768"
-												step="1024"
-												placeholder={$i18n.t('Max tokens to retrieve (1024-32768, default 8192)')}
-												bind:value={webConfig.BRAVE_SEARCH_CONTEXT_TOKENS}
-												autocomplete="off"
-											/>
-										</div>
-									</div>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'kagi'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Kagi Search API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Kagi Search API Key')}
-										bind:value={webConfig.KAGI_SEARCH_API_KEY}
-									/>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'mojeek'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Mojeek Search API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Mojeek Search API Key')}
-										bind:value={webConfig.MOJEEK_SEARCH_API_KEY}
-									/>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'bocha'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Bocha Search API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Bocha Search API Key')}
-										bind:value={webConfig.BOCHA_SEARCH_API_KEY}
-									/>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'serpstack'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Serpstack API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Serpstack API Key')}
-										bind:value={webConfig.SERPSTACK_API_KEY}
-									/>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'serper'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Serper API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Serper API Key')}
-										bind:value={webConfig.SERPER_API_KEY}
-									/>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'serphouse'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('SERPHouse API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter SERPHouse API Key')}
-										bind:value={webConfig.SERPHOUSE_API_KEY}
-									/>
-								</div>
-								<div class="mt-1.5">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('SERPHouse Domain')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<input
-												class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-												type="text"
-												placeholder="google.com"
-												bind:value={webConfig.SERPHOUSE_DOMAIN}
-												autocomplete="off"
-											/>
-										</div>
-									</div>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'serply'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Serply API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Serply API Key')}
-										bind:value={webConfig.SERPLY_API_KEY}
-									/>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'tavily'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Tavily API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Tavily API Key')}
-										bind:value={webConfig.TAVILY_API_KEY}
-									/>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'searchapi'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('SearchApi API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter SearchApi API Key')}
-										bind:value={webConfig.SEARCHAPI_API_KEY}
-									/>
-								</div>
-								<div class="mt-1.5">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('SearchApi Engine')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<input
-												class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-												type="text"
-												placeholder={$i18n.t('Enter SearchApi Engine')}
-												bind:value={webConfig.SEARCHAPI_ENGINE}
-												autocomplete="off"
-											/>
-										</div>
-									</div>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'serpapi'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('SerpApi API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter SerpApi API Key')}
-										bind:value={webConfig.SERPAPI_API_KEY}
-									/>
-								</div>
-								<div class="mt-1.5">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('SerpApi Engine')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<input
-												class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-												type="text"
-												placeholder={$i18n.t('Enter SerpApi Engine')}
-												bind:value={webConfig.SERPAPI_ENGINE}
-												autocomplete="off"
-											/>
-										</div>
-									</div>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'jina'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Jina API Base URL')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<input
-												class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-												type="text"
-												placeholder={$i18n.t('Enter Jina API Base URL')}
-												bind:value={webConfig.JINA_API_BASE_URL}
-												autocomplete="off"
-											/>
-										</div>
-									</div>
-								</div>
-
-								<div class="mt-2">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Jina API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Jina API Key')}
-										bind:value={webConfig.JINA_API_KEY}
-									/>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'bing'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Bing Search V7 Endpoint')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<input
-												class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-												type="text"
-												placeholder={$i18n.t('Enter Bing Search V7 Endpoint')}
-												bind:value={webConfig.BING_SEARCH_V7_ENDPOINT}
-												autocomplete="off"
-											/>
-										</div>
-									</div>
-								</div>
-
-								<div class="mt-2">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Bing Search V7 Subscription Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Bing Search V7 Subscription Key')}
-										bind:value={webConfig.BING_SEARCH_V7_SUBSCRIPTION_KEY}
-									/>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'exa'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Exa API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Exa API Key')}
-										bind:value={webConfig.EXA_API_KEY}
-									/>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'perplexity'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Perplexity API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Perplexity API Key')}
-										bind:value={webConfig.PERPLEXITY_API_KEY}
-									/>
-								</div>
-							</div>
-
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class="self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Perplexity Model')}
-									</div>
-									<input
-										list="perplexity-model-list"
-										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-										bind:value={webConfig.PERPLEXITY_MODEL}
-									/>
-
-									<datalist id="perplexity-model-list">
-										<option value="sonar">{$i18n.t('Sonar')}</option>
-										<option value="sonar-pro">{$i18n.t('Sonar Pro')}</option>
-										<option value="sonar-reasoning">{$i18n.t('Sonar Reasoning')}</option>
-										<option value="sonar-reasoning-pro">{$i18n.t('Sonar Reasoning Pro')}</option>
-										<option value="sonar-deep-research">{$i18n.t('Sonar Deep Research')}</option>
-									</datalist>
-								</div>
-							</div>
-
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Perplexity Search Context Usage')}
-									</div>
-									<SettingsSelect
-										bind:value={webConfig.PERPLEXITY_SEARCH_CONTEXT_USAGE}
-										className="w-full"
-									>
-										<option value="low">{$i18n.t('Low')}</option>
-										<option value="medium">{$i18n.t('Medium')}</option>
-										<option value="high">{$i18n.t('High')}</option>
-									</SettingsSelect>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'microsoft_web_iq'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Microsoft Web IQ API Base URL')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<input
-												class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-												type="text"
-												placeholder={$i18n.t('Enter Microsoft Web IQ API Base URL')}
-												bind:value={webConfig.MICROSOFT_WEB_IQ_API_BASE_URL}
-												autocomplete="off"
-											/>
-										</div>
-									</div>
-								</div>
-
-								<div class="mt-2">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Microsoft Web IQ API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Microsoft Web IQ API Key')}
-										bind:value={webConfig.MICROSOFT_WEB_IQ_API_KEY}
-									/>
-								</div>
-
-								<div class="mt-2">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Language')}
-									</div>
-
-									<input
-										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-										type="text"
-										placeholder={$i18n.t('Enter language')}
-										bind:value={webConfig.MICROSOFT_WEB_IQ_LANGUAGE}
-										autocomplete="off"
-									/>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'sougou'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Sougou Search API sID')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Sougou Search API sID')}
-										bind:value={webConfig.SOUGOU_API_SID}
-									/>
-								</div>
-							</div>
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Sougou Search API SK')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Sougou Search API SK')}
-										bind:value={webConfig.SOUGOU_API_SK}
-									/>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'firecrawl'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Firecrawl API Base URL')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<input
-												class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-												type="text"
-												placeholder={$i18n.t('Enter Firecrawl API Base URL')}
-												bind:value={webConfig.FIRECRAWL_API_BASE_URL}
-												autocomplete="off"
-											/>
-										</div>
-									</div>
-								</div>
-
-								<div class="mt-2">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Firecrawl API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Firecrawl API Key')}
-										bind:value={webConfig.FIRECRAWL_API_KEY}
-									/>
-								</div>
-
-								<div class="mt-2">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Firecrawl Timeout (s)')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<input
-												class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-												type="number"
-												placeholder={$i18n.t('Enter Firecrawl Timeout')}
-												bind:value={webConfig.FIRECRAWL_TIMEOUT}
-												autocomplete="off"
-											/>
-										</div>
-									</div>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'external'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('External Web Search URL')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<input
-												class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-												type="text"
-												placeholder={$i18n.t('Enter External Web Search URL')}
-												bind:value={webConfig.EXTERNAL_WEB_SEARCH_URL}
-												autocomplete="off"
-											/>
-										</div>
-									</div>
-								</div>
-
-								<div class="mt-2">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('External Web Search API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter External Web Search API Key')}
-										bind:value={webConfig.EXTERNAL_WEB_SEARCH_API_KEY}
-									/>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'yandex'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Yandex Web Search URL')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<input
-												class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-												type="text"
-												placeholder={$i18n.t('Enter Yandex Web Search URL')}
-												bind:value={webConfig.YANDEX_WEB_SEARCH_URL}
-												autocomplete="off"
-											/>
-										</div>
-									</div>
-								</div>
-
-								<div class="mt-2">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Yandex Web Search API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Yandex Web Search API Key')}
-										bind:value={webConfig.YANDEX_WEB_SEARCH_API_KEY}
-									/>
-								</div>
-
-								<div class="mb-2.5">
-									<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-										{$i18n.t('Yandex Web Search config')}
-									</div>
-
-									<Tooltip
-										content={$i18n.t(
-											'Leave empty to use the default config, or enter a valid json (see https://yandex.cloud/en/docs/search-api/api-ref/WebSearch/search#yandex.cloud.searchapi.v2.WebSearchRequest)'
-										)}
-										placement="top-start"
-									>
-										<Textarea
-											className={textareaClass}
-											bind:value={webConfig.YANDEX_WEB_SEARCH_CONFIG}
-											placeholder={$i18n.t(
-												'Leave empty to use the default config, or enter a valid json (see https://yandex.cloud/en/docs/search-api/api-ref/WebSearch/search#yandex.cloud.searchapi.v2.WebSearchRequest)'
-											)}
-										/>
-									</Tooltip>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'youcom'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('You.com API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter You.com API Key')}
-										bind:value={webConfig.YOUCOM_API_KEY}
-									/>
-								</div>
-							</div>
-						{:else if webConfig.WEB_SEARCH_ENGINE === 'linkup'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Linkup API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Linkup API Key')}
-										bind:value={webConfig.LINKUP_API_KEY}
-									/>
-								</div>
-
-								<div class="mt-2">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Parameters')}
-									</div>
-
-									<Textarea
-										className={textareaClass}
-										bind:value={webConfig.LINKUP_SEARCH_PARAMS}
-										placeholder={`{\n  "depth": "standard",\n  "outputType": "sourcedAnswer"\n}`}
-									/>
-								</div>
-							</div>
-						{/if}
-
-						{#if webConfig.WEB_SEARCH_ENGINE === 'duckduckgo'}
-							<div class="mb-2.5 flex w-full flex-col">
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('DDGS Backend')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<SettingsSelect bind:value={webConfig.DDGS_BACKEND} className="w-full">
-												<option value="auto">{$i18n.t('Auto (Random)')}</option>
-												<option value="bing">{$i18n.t('Bing')}</option>
-												<option value="brave">{$i18n.t('Brave')}</option>
-												<option value="duckduckgo">{$i18n.t('DuckDuckGo')}</option>
-												<option value="google">{$i18n.t('Google')}</option>
-												<option value="grokipedia">{$i18n.t('Grokipedia')}</option>
-												<option value="mojeek">{$i18n.t('Mojeek')}</option>
-												<option value="wikipedia">{$i18n.t('Wikipedia')}</option>
-												<option value="yahoo">{$i18n.t('Yahoo')}</option>
-												<option value="yandex">{$i18n.t('Yandex')}</option>
-											</SettingsSelect>
-										</div>
-									</div>
-								</div>
-							</div>
-						{/if}
-					{/if}
-
-					{#if webConfig.ENABLE_WEB_SEARCH}
-						<div class="mb-2.5 flex w-full flex-col">
-							<div class="flex gap-2">
-								<div class="w-full">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Search Result Count')}
-									</div>
-
-									<input
-										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-										placeholder={$i18n.t('Search Result Count')}
-										bind:value={webConfig.WEB_SEARCH_RESULT_COUNT}
-										required
-									/>
-								</div>
-
-								<div class="w-full">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										<Tooltip
-											content={$i18n.t(
-												'Limit concurrent search queries. 0 = unlimited (default). Set to 1 for sequential execution (recommended for APIs with strict rate limits like Brave free tier).'
-											)}
-											placement="top-start"
-										>
-											{$i18n.t('Concurrent Requests')}
-										</Tooltip>
-									</div>
-
-									<input
-										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-										placeholder={$i18n.t('Concurrent Requests')}
-										bind:value={webConfig.WEB_SEARCH_CONCURRENT_REQUESTS}
-										type="number"
-										min="0"
-									/>
-								</div>
-							</div>
-						</div>
-
-						<div class="mb-2.5 w-full">
-							<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-								<Tooltip
-									content={$i18n.t(
-										'Maximum characters to return from fetched URLs. Leave empty for no limit.'
-									)}
-									placement="top-start"
-								>
-									{$i18n.t('Fetch URL Content Length Limit')}
-								</Tooltip>
-							</div>
-
-							<input
-								class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-								placeholder={$i18n.t('No limit')}
-								bind:value={webConfig.WEB_FETCH_MAX_CONTENT_LENGTH}
-								type="number"
-								min="0"
-							/>
-						</div>
-
-						<div class="mb-2.5 flex w-full flex-col">
-							<div class="  text-xs text-gray-600 dark:text-gray-400 mb-1">
-								{$i18n.t('Domain Filter List')}
-							</div>
-
-							<input
-								class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-								placeholder={$i18n.t(
-									'Enter domains separated by commas (e.g., example.com,site.org,!excludedsite.com)'
-								)}
-								bind:value={webConfig.WEB_SEARCH_DOMAIN_FILTER_LIST}
-							/>
-						</div>
-					{/if}
-
-					<div class="  mb-2.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							<Tooltip content={$i18n.t('Full Context Mode')} placement="top-start">
-								{$i18n.t('Bypass Embedding and Retrieval')}
-							</Tooltip>
-						</div>
-						<div class="flex items-center relative">
-							<Tooltip
-								content={webConfig.BYPASS_WEB_SEARCH_EMBEDDING_AND_RETRIEVAL
-									? $i18n.t(
-											'Inject the entire content as context for comprehensive processing, this is recommended for complex queries.'
-										)
-									: $i18n.t(
-											'Default to segmented retrieval for focused and relevant content extraction, this is recommended for most cases.'
-										)}
-							>
-								<Switch bind:state={webConfig.BYPASS_WEB_SEARCH_EMBEDDING_AND_RETRIEVAL} />
-							</Tooltip>
-						</div>
-					</div>
-
-					<div class="  mb-2.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							<Tooltip content={$i18n.t('Bypass Web Loader')} placement="top-start">
-								{$i18n.t('Bypass Web Loader')}
-							</Tooltip>
-						</div>
-						<div class="flex items-center relative">
-							<Tooltip content={''}>
-								<Switch bind:state={webConfig.BYPASS_WEB_SEARCH_WEB_LOADER} />
-							</Tooltip>
-						</div>
-					</div>
-
-					<div class="  mb-2.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Trust Proxy Environment')}
-						</div>
-						<div class="flex items-center relative">
-							<Tooltip
-								content={webConfig.WEB_SEARCH_TRUST_ENV
-									? $i18n.t(
-											'Use proxy designated by http_proxy and https_proxy environment variables to fetch page contents.'
-										)
-									: $i18n.t('Use no proxy to fetch page contents.')}
-							>
-								<Switch bind:state={webConfig.WEB_SEARCH_TRUST_ENV} />
-							</Tooltip>
-						</div>
-					</div>
-				</div>
-
-				<div class="mb-5">
-					<div class=" mb-2 text-xs text-gray-400 dark:text-gray-600">
-						{$i18n.t('Loader')}
-					</div>
-
-					<div class="  mb-2.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Web Loader Engine')}
-						</div>
-						<div class="flex items-center relative">
-							<SettingsSelect
-								bind:value={webConfig.WEB_LOADER_ENGINE}
-								placeholder={$i18n.t('Select a engine')}
-							>
-								<option value="">{$i18n.t('Default')}</option>
-								{#each webLoaderEngines as engine}
-									<option value={engine}>{engine}</option>
-								{/each}
-							</SettingsSelect>
-						</div>
-					</div>
-
-					{#if webConfig.WEB_LOADER_ENGINE === '' || webConfig.WEB_LOADER_ENGINE === 'safe_web'}
-						<div class="  mb-2.5 flex w-full justify-between">
-							<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-								{$i18n.t('Timeout')}
-							</div>
-							<div class="flex items-center relative">
-								<input
-									class="flex-1 w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-									placeholder={$i18n.t('Timeout')}
-									bind:value={webConfig.WEB_LOADER_TIMEOUT}
-								/>
-							</div>
-						</div>
-
-						<div class="  mb-2.5 flex w-full justify-between">
-							<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-								{$i18n.t('Verify SSL Certificate')}
-							</div>
-							<div class="flex items-center relative">
-								<Switch bind:state={webConfig.ENABLE_WEB_LOADER_SSL_VERIFICATION} />
-							</div>
-						</div>
-					{:else if webConfig.WEB_LOADER_ENGINE === 'playwright'}
+			<AdminSettingSection first title={$i18n.t('Search')}>
+				<AdminSettingRow
+					label={$i18n.t('Web Search')}
+					description={$i18n.t('Allow users to search the web from chats.')}
+				>
+					<Switch bind:state={webConfig.ENABLE_WEB_SEARCH} />
+				</AdminSettingRow>
+
+				<AdminSettingRow
+					label={$i18n.t('Web Search Confirmation')}
+					description={$i18n.t('Require users to confirm before using Web Search.')}
+				>
+					<Switch bind:state={webConfig.ENABLE_WEB_SEARCH_CONFIRMATION} />
+				</AdminSettingRow>
+
+				{#if webConfig.ENABLE_WEB_SEARCH_CONFIRMATION}
+					<AdminSettingField
+						label={$i18n.t('Web Search Confirmation Content')}
+						description={$i18n.t('Message shown before web search runs.')}
+					>
+						<Textarea
+							className={textareaClass}
+							placeholder={$i18n.t(
+								'Your query will be sent to the configured web search provider.'
+							)}
+							bind:value={webConfig.WEB_SEARCH_CONFIRMATION_CONTENT}
+						/>
+					</AdminSettingField>
+				{/if}
+
+				<AdminSettingRow
+					label={$i18n.t('Web Search Engine')}
+					description={$i18n.t('Choose the provider used for web search queries.')}
+				>
+					<SettingsSelect
+						bind:value={webConfig.WEB_SEARCH_ENGINE}
+						placeholder={$i18n.t('Select a engine')}
+						required
+					>
+						<option disabled selected value="">{$i18n.t('Select a engine')}</option>
+						{#each webSearchEngines as engine}
+							{#if engine === 'duckduckgo' || engine === 'ddgs'}
+								<option value={engine}>DDGS</option>
+							{:else if engine === 'serphouse'}
+								<option value={engine}>SERPHouse</option>
+							{:else}
+								<option value={engine}>{engine}</option>
+							{/if}
+						{/each}
+					</SettingsSelect>
+				</AdminSettingRow>
+
+				{#if webConfig.WEB_SEARCH_ENGINE !== ''}
+					{#if webConfig.WEB_SEARCH_ENGINE === 'ollama_cloud'}
 						<div class="mb-2.5 flex w-full flex-col">
 							<div>
 								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-									{$i18n.t('Playwright WebSocket URL')}
+									{$i18n.t('Ollama Cloud API Key')}
+								</div>
+
+								<div class="flex w-full">
+									<div class="flex-1">
+										<SensitiveInput
+											variant="settings"
+											placeholder={$i18n.t('Enter Ollama Cloud API Key')}
+											bind:value={webConfig.OLLAMA_CLOUD_WEB_SEARCH_API_KEY}
+										/>
+									</div>
+								</div>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'perplexity_search'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Perplexity Search API URL')}
 								</div>
 
 								<div class="flex w-full">
@@ -1222,8 +245,403 @@
 										<input
 											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
 											type="text"
-											placeholder={$i18n.t('Enter Playwright WebSocket URL')}
-											bind:value={webConfig.PLAYWRIGHT_WS_URL}
+											placeholder={$i18n.t('Enter Perplexity Search API URL')}
+											bind:value={webConfig.PERPLEXITY_SEARCH_API_URL}
+											autocomplete="off"
+										/>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Perplexity API Key')}
+								</div>
+
+								<div class="flex w-full">
+									<div class="flex-1">
+										<SensitiveInput
+											variant="settings"
+											placeholder={$i18n.t('Enter Perplexity API Key')}
+											bind:value={webConfig.PERPLEXITY_API_KEY}
+										/>
+									</div>
+								</div>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'searxng'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-left text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Searxng Query URL')}
+								</div>
+
+								<div class="flex w-full">
+									<div class="flex-1">
+										<input
+											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+											type="text"
+											placeholder={$i18n.t('Enter Searxng Query URL')}
+											bind:value={webConfig.SEARXNG_QUERY_URL}
+											autocomplete="off"
+											required
+										/>
+									</div>
+								</div>
+							</div>
+							<div class="mb-2.5 flex w-full flex-col">
+								<div class=" self-left text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Searxng search language (all, en, es, de, fr, etc.)')}
+								</div>
+
+								<div class="flex w-full">
+									<div class="flex-1">
+										<input
+											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+											type="text"
+											placeholder={$i18n.t('Enter Searxng search language')}
+											bind:value={webConfig.SEARXNG_LANGUAGE}
+											autocomplete="off"
+											required
+										/>
+									</div>
+								</div>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'yacy'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Yacy Instance URL')}
+								</div>
+
+								<div class="flex w-full">
+									<div class="flex-1">
+										<input
+											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+											type="text"
+											placeholder={$i18n.t('Enter Yacy URL (e.g. http://yacy.example.com:8090)')}
+											bind:value={webConfig.YACY_QUERY_URL}
+											autocomplete="off"
+										/>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="mb-2.5 flex w-full flex-col">
+							<div class="flex gap-2">
+								<div class="w-full">
+									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+										{$i18n.t('Yacy Username')}
+									</div>
+
+									<input
+										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+										placeholder={$i18n.t('Enter Yacy Username')}
+										bind:value={webConfig.YACY_USERNAME}
+										required
+									/>
+								</div>
+
+								<div class="w-full">
+									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+										{$i18n.t('Yacy Password')}
+									</div>
+
+									<SensitiveInput
+										variant="settings"
+										placeholder={$i18n.t('Enter Yacy Password')}
+										bind:value={webConfig.YACY_PASSWORD}
+									/>
+								</div>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'google_pse'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Google PSE API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Google PSE API Key')}
+									bind:value={webConfig.GOOGLE_PSE_API_KEY}
+								/>
+							</div>
+							<div class="mt-1.5">
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Google PSE Engine Id')}
+								</div>
+
+								<div class="flex w-full">
+									<div class="flex-1">
+										<input
+											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+											type="text"
+											placeholder={$i18n.t('Enter Google PSE Engine Id')}
+											bind:value={webConfig.GOOGLE_PSE_ENGINE_ID}
+											autocomplete="off"
+										/>
+									</div>
+								</div>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'brave'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Brave Search API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Brave Search API Key')}
+									bind:value={webConfig.BRAVE_SEARCH_API_KEY}
+								/>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'brave_llm_context'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Brave Search API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Brave Search API Key')}
+									bind:value={webConfig.BRAVE_SEARCH_API_KEY}
+								/>
+							</div>
+							<div class="mt-1.5">
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Context Tokens')}
+								</div>
+
+								<div class="flex w-full">
+									<div class="flex-1">
+										<input
+											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+											type="number"
+											min="1024"
+											max="32768"
+											step="1024"
+											placeholder={$i18n.t('Max tokens to retrieve (1024-32768, default 8192)')}
+											bind:value={webConfig.BRAVE_SEARCH_CONTEXT_TOKENS}
+											autocomplete="off"
+										/>
+									</div>
+								</div>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'kagi'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Kagi Search API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Kagi Search API Key')}
+									bind:value={webConfig.KAGI_SEARCH_API_KEY}
+								/>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'mojeek'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Mojeek Search API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Mojeek Search API Key')}
+									bind:value={webConfig.MOJEEK_SEARCH_API_KEY}
+								/>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'bocha'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Bocha Search API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Bocha Search API Key')}
+									bind:value={webConfig.BOCHA_SEARCH_API_KEY}
+								/>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'serpstack'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Serpstack API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Serpstack API Key')}
+									bind:value={webConfig.SERPSTACK_API_KEY}
+								/>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'serper'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Serper API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Serper API Key')}
+									bind:value={webConfig.SERPER_API_KEY}
+								/>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'serphouse'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('SERPHouse API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter SERPHouse API Key')}
+									bind:value={webConfig.SERPHOUSE_API_KEY}
+								/>
+							</div>
+							<div class="mt-1.5">
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('SERPHouse Domain')}
+								</div>
+
+								<div class="flex w-full">
+									<div class="flex-1">
+										<input
+											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+											type="text"
+											placeholder="google.com"
+											bind:value={webConfig.SERPHOUSE_DOMAIN}
+											autocomplete="off"
+										/>
+									</div>
+								</div>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'serply'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Serply API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Serply API Key')}
+									bind:value={webConfig.SERPLY_API_KEY}
+								/>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'tavily'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Tavily API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Tavily API Key')}
+									bind:value={webConfig.TAVILY_API_KEY}
+								/>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'searchapi'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('SearchApi API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter SearchApi API Key')}
+									bind:value={webConfig.SEARCHAPI_API_KEY}
+								/>
+							</div>
+							<div class="mt-1.5">
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('SearchApi Engine')}
+								</div>
+
+								<div class="flex w-full">
+									<div class="flex-1">
+										<input
+											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+											type="text"
+											placeholder={$i18n.t('Enter SearchApi Engine')}
+											bind:value={webConfig.SEARCHAPI_ENGINE}
+											autocomplete="off"
+										/>
+									</div>
+								</div>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'serpapi'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('SerpApi API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter SerpApi API Key')}
+									bind:value={webConfig.SERPAPI_API_KEY}
+								/>
+							</div>
+							<div class="mt-1.5">
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('SerpApi Engine')}
+								</div>
+
+								<div class="flex w-full">
+									<div class="flex-1">
+										<input
+											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+											type="text"
+											placeholder={$i18n.t('Enter SerpApi Engine')}
+											bind:value={webConfig.SERPAPI_ENGINE}
+											autocomplete="off"
+										/>
+									</div>
+								</div>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'jina'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Jina API Base URL')}
+								</div>
+
+								<div class="flex w-full">
+									<div class="flex-1">
+										<input
+											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+											type="text"
+											placeholder={$i18n.t('Enter Jina API Base URL')}
+											bind:value={webConfig.JINA_API_BASE_URL}
 											autocomplete="off"
 										/>
 									</div>
@@ -1232,22 +650,187 @@
 
 							<div class="mt-2">
 								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-									{$i18n.t('Playwright Timeout (ms)')}
+									{$i18n.t('Jina API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Jina API Key')}
+									bind:value={webConfig.JINA_API_KEY}
+								/>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'bing'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Bing Search V7 Endpoint')}
 								</div>
 
 								<div class="flex w-full">
 									<div class="flex-1">
 										<input
 											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-											placeholder={$i18n.t('Enter Playwright Timeout')}
-											bind:value={webConfig.PLAYWRIGHT_TIMEOUT}
+											type="text"
+											placeholder={$i18n.t('Enter Bing Search V7 Endpoint')}
+											bind:value={webConfig.BING_SEARCH_V7_ENDPOINT}
 											autocomplete="off"
 										/>
 									</div>
 								</div>
 							</div>
+
+							<div class="mt-2">
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Bing Search V7 Subscription Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Bing Search V7 Subscription Key')}
+									bind:value={webConfig.BING_SEARCH_V7_SUBSCRIPTION_KEY}
+								/>
+							</div>
 						</div>
-					{:else if webConfig.WEB_LOADER_ENGINE === 'firecrawl' && webConfig.WEB_SEARCH_ENGINE !== 'firecrawl'}
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'exa'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Exa API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Exa API Key')}
+									bind:value={webConfig.EXA_API_KEY}
+								/>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'perplexity'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Perplexity API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Perplexity API Key')}
+									bind:value={webConfig.PERPLEXITY_API_KEY}
+								/>
+							</div>
+						</div>
+
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class="self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Perplexity Model')}
+								</div>
+								<input
+									list="perplexity-model-list"
+									class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+									bind:value={webConfig.PERPLEXITY_MODEL}
+								/>
+
+								<datalist id="perplexity-model-list">
+									<option value="sonar">{$i18n.t('Sonar')}</option>
+									<option value="sonar-pro">{$i18n.t('Sonar Pro')}</option>
+									<option value="sonar-reasoning">{$i18n.t('Sonar Reasoning')}</option>
+									<option value="sonar-reasoning-pro">{$i18n.t('Sonar Reasoning Pro')}</option>
+									<option value="sonar-deep-research">{$i18n.t('Sonar Deep Research')}</option>
+								</datalist>
+							</div>
+						</div>
+
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Perplexity Search Context Usage')}
+								</div>
+								<SettingsSelect
+									bind:value={webConfig.PERPLEXITY_SEARCH_CONTEXT_USAGE}
+									className="w-full"
+								>
+									<option value="low">{$i18n.t('Low')}</option>
+									<option value="medium">{$i18n.t('Medium')}</option>
+									<option value="high">{$i18n.t('High')}</option>
+								</SettingsSelect>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'microsoft_web_iq'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Microsoft Web IQ API Base URL')}
+								</div>
+
+								<div class="flex w-full">
+									<div class="flex-1">
+										<input
+											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+											type="text"
+											placeholder={$i18n.t('Enter Microsoft Web IQ API Base URL')}
+											bind:value={webConfig.MICROSOFT_WEB_IQ_API_BASE_URL}
+											autocomplete="off"
+										/>
+									</div>
+								</div>
+							</div>
+
+							<div class="mt-2">
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Microsoft Web IQ API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Microsoft Web IQ API Key')}
+									bind:value={webConfig.MICROSOFT_WEB_IQ_API_KEY}
+								/>
+							</div>
+
+							<div class="mt-2">
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Language')}
+								</div>
+
+								<input
+									class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+									type="text"
+									placeholder={$i18n.t('Enter language')}
+									bind:value={webConfig.MICROSOFT_WEB_IQ_LANGUAGE}
+									autocomplete="off"
+								/>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'sougou'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Sougou Search API sID')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Sougou Search API sID')}
+									bind:value={webConfig.SOUGOU_API_SID}
+								/>
+							</div>
+						</div>
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Sougou Search API SK')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Sougou Search API SK')}
+									bind:value={webConfig.SOUGOU_API_SK}
+								/>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'firecrawl'}
 						<div class="mb-2.5 flex w-full flex-col">
 							<div>
 								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
@@ -1278,94 +861,30 @@
 									bind:value={webConfig.FIRECRAWL_API_KEY}
 								/>
 							</div>
-						</div>
-					{:else if webConfig.WEB_LOADER_ENGINE === 'tavily'}
-						<div class="mb-2.5 flex w-full flex-col">
-							<div>
+
+							<div class="mt-2">
 								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-									{$i18n.t('Tavily Extract Depth')}
+									{$i18n.t('Firecrawl Timeout (s)')}
 								</div>
 
 								<div class="flex w-full">
 									<div class="flex-1">
 										<input
 											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-											type="text"
-											placeholder={$i18n.t('Enter Tavily Extract Depth')}
-											bind:value={webConfig.TAVILY_EXTRACT_DEPTH}
+											type="number"
+											placeholder={$i18n.t('Enter Firecrawl Timeout')}
+											bind:value={webConfig.FIRECRAWL_TIMEOUT}
 											autocomplete="off"
 										/>
 									</div>
 								</div>
 							</div>
-
-							{#if webConfig.WEB_SEARCH_ENGINE !== 'tavily'}
-								<div class="mt-2">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Tavily API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Tavily API Key')}
-										bind:value={webConfig.TAVILY_API_KEY}
-									/>
-								</div>
-							{/if}
 						</div>
-					{:else if webConfig.WEB_LOADER_ENGINE === 'microsoft_web_iq'}
-						<div class="mb-2.5 flex w-full flex-col">
-							{#if webConfig.WEB_SEARCH_ENGINE !== 'microsoft_web_iq'}
-								<div>
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Microsoft Web IQ API Base URL')}
-									</div>
-
-									<div class="flex w-full">
-										<div class="flex-1">
-											<input
-												class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-												type="text"
-												placeholder={$i18n.t('Enter Microsoft Web IQ API Base URL')}
-												bind:value={webConfig.MICROSOFT_WEB_IQ_API_BASE_URL}
-												autocomplete="off"
-											/>
-										</div>
-									</div>
-								</div>
-
-								<div class="mt-2">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Microsoft Web IQ API Key')}
-									</div>
-
-									<SensitiveInput
-										variant="settings"
-										placeholder={$i18n.t('Enter Microsoft Web IQ API Key')}
-										bind:value={webConfig.MICROSOFT_WEB_IQ_API_KEY}
-									/>
-								</div>
-
-								<div class="mt-2">
-									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-										{$i18n.t('Language')}
-									</div>
-
-									<input
-										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-										type="text"
-										placeholder={$i18n.t('Enter language')}
-										bind:value={webConfig.MICROSOFT_WEB_IQ_LANGUAGE}
-										autocomplete="off"
-									/>
-								</div>
-							{/if}
-						</div>
-					{:else if webConfig.WEB_LOADER_ENGINE === 'external'}
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'external'}
 						<div class="mb-2.5 flex w-full flex-col">
 							<div>
 								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-									{$i18n.t('External Web Loader URL')}
+									{$i18n.t('External Web Search URL')}
 								</div>
 
 								<div class="flex w-full">
@@ -1373,8 +892,8 @@
 										<input
 											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
 											type="text"
-											placeholder={$i18n.t('Enter External Web Loader URL')}
-											bind:value={webConfig.EXTERNAL_WEB_LOADER_URL}
+											placeholder={$i18n.t('Enter External Web Search URL')}
+											bind:value={webConfig.EXTERNAL_WEB_SEARCH_URL}
 											autocomplete="off"
 										/>
 									</div>
@@ -1383,62 +902,493 @@
 
 							<div class="mt-2">
 								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-									{$i18n.t('External Web Loader API Key')}
+									{$i18n.t('External Web Search API Key')}
 								</div>
 
 								<SensitiveInput
 									variant="settings"
-									placeholder={$i18n.t('Enter External Web Loader API Key')}
-									bind:value={webConfig.EXTERNAL_WEB_LOADER_API_KEY}
+									placeholder={$i18n.t('Enter External Web Search API Key')}
+									bind:value={webConfig.EXTERNAL_WEB_SEARCH_API_KEY}
+								/>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'yandex'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Yandex Web Search URL')}
+								</div>
+
+								<div class="flex w-full">
+									<div class="flex-1">
+										<input
+											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+											type="text"
+											placeholder={$i18n.t('Enter Yandex Web Search URL')}
+											bind:value={webConfig.YANDEX_WEB_SEARCH_URL}
+											autocomplete="off"
+										/>
+									</div>
+								</div>
+							</div>
+
+							<div class="mt-2">
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Yandex Web Search API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Yandex Web Search API Key')}
+									bind:value={webConfig.YANDEX_WEB_SEARCH_API_KEY}
+								/>
+							</div>
+
+							<div class="mb-2.5">
+								<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
+									{$i18n.t('Yandex Web Search config')}
+								</div>
+
+								<Tooltip
+									content={$i18n.t(
+										'Leave empty to use the default config, or enter a valid json (see https://yandex.cloud/en/docs/search-api/api-ref/WebSearch/search#yandex.cloud.searchapi.v2.WebSearchRequest)'
+									)}
+									placement="top-start"
+								>
+									<Textarea
+										className={textareaClass}
+										bind:value={webConfig.YANDEX_WEB_SEARCH_CONFIG}
+										placeholder={$i18n.t(
+											'Leave empty to use the default config, or enter a valid json (see https://yandex.cloud/en/docs/search-api/api-ref/WebSearch/search#yandex.cloud.searchapi.v2.WebSearchRequest)'
+										)}
+									/>
+								</Tooltip>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'youcom'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('You.com API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter You.com API Key')}
+									bind:value={webConfig.YOUCOM_API_KEY}
+								/>
+							</div>
+						</div>
+					{:else if webConfig.WEB_SEARCH_ENGINE === 'linkup'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Linkup API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Linkup API Key')}
+									bind:value={webConfig.LINKUP_API_KEY}
+								/>
+							</div>
+
+							<div class="mt-2">
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Parameters')}
+								</div>
+
+								<Textarea
+									className={textareaClass}
+									bind:value={webConfig.LINKUP_SEARCH_PARAMS}
+									placeholder={`{\n  "depth": "standard",\n  "outputType": "sourcedAnswer"\n}`}
 								/>
 							</div>
 						</div>
 					{/if}
 
-					<div class="mb-2.5 w-full">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
-							{$i18n.t('Concurrent Requests')}
-						</div>
+					{#if webConfig.WEB_SEARCH_ENGINE === 'duckduckgo'}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('DDGS Backend')}
+								</div>
 
+								<div class="flex w-full">
+									<div class="flex-1">
+										<SettingsSelect bind:value={webConfig.DDGS_BACKEND} className="w-full">
+											<option value="auto">{$i18n.t('Auto (Random)')}</option>
+											<option value="bing">{$i18n.t('Bing')}</option>
+											<option value="brave">{$i18n.t('Brave')}</option>
+											<option value="duckduckgo">{$i18n.t('DuckDuckGo')}</option>
+											<option value="google">{$i18n.t('Google')}</option>
+											<option value="grokipedia">{$i18n.t('Grokipedia')}</option>
+											<option value="mojeek">{$i18n.t('Mojeek')}</option>
+											<option value="wikipedia">{$i18n.t('Wikipedia')}</option>
+											<option value="yahoo">{$i18n.t('Yahoo')}</option>
+											<option value="yandex">{$i18n.t('Yandex')}</option>
+										</SettingsSelect>
+									</div>
+								</div>
+							</div>
+						</div>
+					{/if}
+				{/if}
+
+				{#if webConfig.ENABLE_WEB_SEARCH}
+					<AdminSettingField
+						label={$i18n.t('Search Limits')}
+						description={$i18n.t('Control result volume and parallel search requests.')}
+					>
+						<div class="flex gap-2">
+							<div class="w-full">
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Search Result Count')}
+								</div>
+
+								<input
+									class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+									placeholder={$i18n.t('Search Result Count')}
+									bind:value={webConfig.WEB_SEARCH_RESULT_COUNT}
+									required
+								/>
+							</div>
+
+							<div class="w-full">
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									<Tooltip
+										content={$i18n.t(
+											'Limit concurrent search queries. 0 = unlimited (default). Set to 1 for sequential execution (recommended for APIs with strict rate limits like Brave free tier).'
+										)}
+										placement="top-start"
+									>
+										{$i18n.t('Concurrent Requests')}
+									</Tooltip>
+								</div>
+
+								<input
+									class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+									placeholder={$i18n.t('Concurrent Requests')}
+									bind:value={webConfig.WEB_SEARCH_CONCURRENT_REQUESTS}
+									type="number"
+									min="0"
+								/>
+							</div>
+						</div>
+					</AdminSettingField>
+
+					<AdminSettingField
+						label={$i18n.t('Fetch URL Content Length Limit')}
+						description={$i18n.t(
+							'Maximum characters to return from fetched URLs. Leave empty for no limit.'
+						)}
+					>
 						<input
-							class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-							placeholder={$i18n.t('Concurrent Requests')}
-							bind:value={webConfig.WEB_LOADER_CONCURRENT_REQUESTS}
-							required
+							class={inputClass}
+							placeholder={$i18n.t('No limit')}
+							bind:value={webConfig.WEB_FETCH_MAX_CONTENT_LENGTH}
+							type="number"
+							min="0"
 						/>
-					</div>
+					</AdminSettingField>
 
-					<div class="  mb-2.5 flex w-full justify-between">
-						<div class=" self-center text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Youtube Language')}
+					<AdminSettingField
+						label={$i18n.t('Domain Filter List')}
+						description={$i18n.t('Restrict or exclude domains using a comma-separated list.')}
+					>
+						<input
+							class={inputClass}
+							placeholder={$i18n.t(
+								'Enter domains separated by commas (e.g., example.com,site.org,!excludedsite.com)'
+							)}
+							bind:value={webConfig.WEB_SEARCH_DOMAIN_FILTER_LIST}
+						/>
+					</AdminSettingField>
+				{/if}
+
+				<AdminSettingRow
+					label={$i18n.t('Bypass Embedding and Retrieval')}
+					description={webConfig.BYPASS_WEB_SEARCH_EMBEDDING_AND_RETRIEVAL
+						? $i18n.t('Inject the entire content as context for comprehensive processing.')
+						: $i18n.t('Use segmented retrieval for focused and relevant content extraction.')}
+				>
+					<Switch bind:state={webConfig.BYPASS_WEB_SEARCH_EMBEDDING_AND_RETRIEVAL} />
+				</AdminSettingRow>
+
+				<AdminSettingRow
+					label={$i18n.t('Bypass Web Loader')}
+					description={$i18n.t('Use search results without fetching page contents.')}
+				>
+					<Switch bind:state={webConfig.BYPASS_WEB_SEARCH_WEB_LOADER} />
+				</AdminSettingRow>
+
+				<AdminSettingRow
+					label={$i18n.t('Trust Proxy Environment')}
+					description={webConfig.WEB_SEARCH_TRUST_ENV
+						? $i18n.t('Use proxy environment variables to fetch page contents.')
+						: $i18n.t('Fetch page contents without proxy environment variables.')}
+				>
+					<Switch bind:state={webConfig.WEB_SEARCH_TRUST_ENV} />
+				</AdminSettingRow>
+			</AdminSettingSection>
+
+			<AdminSettingSection title={$i18n.t('Loader')}>
+				<AdminSettingRow
+					label={$i18n.t('Web Loader Engine')}
+					description={$i18n.t('Choose how web result pages are fetched and read.')}
+				>
+					<SettingsSelect
+						bind:value={webConfig.WEB_LOADER_ENGINE}
+						placeholder={$i18n.t('Select a engine')}
+					>
+						<option value="">{$i18n.t('Default')}</option>
+						{#each webLoaderEngines as engine}
+							<option value={engine}>{engine}</option>
+						{/each}
+					</SettingsSelect>
+				</AdminSettingRow>
+
+				{#if webConfig.WEB_LOADER_ENGINE === '' || webConfig.WEB_LOADER_ENGINE === 'safe_web'}
+					<AdminSettingField
+						label={$i18n.t('Timeout')}
+						description={$i18n.t('Maximum time to wait while loading web content.')}
+					>
+						<input
+							class={inputClass}
+							placeholder={$i18n.t('Timeout')}
+							bind:value={webConfig.WEB_LOADER_TIMEOUT}
+						/>
+					</AdminSettingField>
+
+					<AdminSettingRow
+						label={$i18n.t('Verify SSL Certificate')}
+						description={$i18n.t('Validate SSL certificates when fetching web content.')}
+					>
+						<Switch bind:state={webConfig.ENABLE_WEB_LOADER_SSL_VERIFICATION} />
+					</AdminSettingRow>
+				{:else if webConfig.WEB_LOADER_ENGINE === 'playwright'}
+					<div class="mb-2.5 flex w-full flex-col">
+						<div>
+							<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+								{$i18n.t('Playwright WebSocket URL')}
+							</div>
+
+							<div class="flex w-full">
+								<div class="flex-1">
+									<input
+										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+										type="text"
+										placeholder={$i18n.t('Enter Playwright WebSocket URL')}
+										bind:value={webConfig.PLAYWRIGHT_WS_URL}
+										autocomplete="off"
+									/>
+								</div>
+							</div>
 						</div>
-						<div class="flex items-center relative">
-							<input
-								class="flex-1 w-full rounded-lg text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-								type="text"
-								placeholder={$i18n.t('Enter language codes')}
-								bind:value={webConfig.YOUTUBE_LOADER_LANGUAGE}
-								autocomplete="off"
+
+						<div class="mt-2">
+							<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+								{$i18n.t('Playwright Timeout (ms)')}
+							</div>
+
+							<div class="flex w-full">
+								<div class="flex-1">
+									<input
+										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+										placeholder={$i18n.t('Enter Playwright Timeout')}
+										bind:value={webConfig.PLAYWRIGHT_TIMEOUT}
+										autocomplete="off"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				{:else if webConfig.WEB_LOADER_ENGINE === 'firecrawl' && webConfig.WEB_SEARCH_ENGINE !== 'firecrawl'}
+					<div class="mb-2.5 flex w-full flex-col">
+						<div>
+							<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+								{$i18n.t('Firecrawl API Base URL')}
+							</div>
+
+							<div class="flex w-full">
+								<div class="flex-1">
+									<input
+										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+										type="text"
+										placeholder={$i18n.t('Enter Firecrawl API Base URL')}
+										bind:value={webConfig.FIRECRAWL_API_BASE_URL}
+										autocomplete="off"
+									/>
+								</div>
+							</div>
+						</div>
+
+						<div class="mt-2">
+							<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+								{$i18n.t('Firecrawl API Key')}
+							</div>
+
+							<SensitiveInput
+								variant="settings"
+								placeholder={$i18n.t('Enter Firecrawl API Key')}
+								bind:value={webConfig.FIRECRAWL_API_KEY}
 							/>
 						</div>
 					</div>
+				{:else if webConfig.WEB_LOADER_ENGINE === 'tavily'}
+					<div class="mb-2.5 flex w-full flex-col">
+						<div>
+							<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+								{$i18n.t('Tavily Extract Depth')}
+							</div>
 
-					<div class="  mb-2.5 flex flex-col w-full justify-between">
-						<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('Youtube Proxy URL')}
+							<div class="flex w-full">
+								<div class="flex-1">
+									<input
+										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+										type="text"
+										placeholder={$i18n.t('Enter Tavily Extract Depth')}
+										bind:value={webConfig.TAVILY_EXTRACT_DEPTH}
+										autocomplete="off"
+									/>
+								</div>
+							</div>
 						</div>
-						<div class="flex items-center relative">
-							<input
-								class="flex-1 w-full rounded-lg text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
-								type="text"
-								placeholder={$i18n.t('Enter proxy URL (e.g. https://user:password@host:port)')}
-								bind:value={webConfig.YOUTUBE_LOADER_PROXY_URL}
-								autocomplete="off"
+
+						{#if webConfig.WEB_SEARCH_ENGINE !== 'tavily'}
+							<div class="mt-2">
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Tavily API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Tavily API Key')}
+									bind:value={webConfig.TAVILY_API_KEY}
+								/>
+							</div>
+						{/if}
+					</div>
+				{:else if webConfig.WEB_LOADER_ENGINE === 'microsoft_web_iq'}
+					<div class="mb-2.5 flex w-full flex-col">
+						{#if webConfig.WEB_SEARCH_ENGINE !== 'microsoft_web_iq'}
+							<div>
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Microsoft Web IQ API Base URL')}
+								</div>
+
+								<div class="flex w-full">
+									<div class="flex-1">
+										<input
+											class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+											type="text"
+											placeholder={$i18n.t('Enter Microsoft Web IQ API Base URL')}
+											bind:value={webConfig.MICROSOFT_WEB_IQ_API_BASE_URL}
+											autocomplete="off"
+										/>
+									</div>
+								</div>
+							</div>
+
+							<div class="mt-2">
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Microsoft Web IQ API Key')}
+								</div>
+
+								<SensitiveInput
+									variant="settings"
+									placeholder={$i18n.t('Enter Microsoft Web IQ API Key')}
+									bind:value={webConfig.MICROSOFT_WEB_IQ_API_KEY}
+								/>
+							</div>
+
+							<div class="mt-2">
+								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+									{$i18n.t('Language')}
+								</div>
+
+								<input
+									class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+									type="text"
+									placeholder={$i18n.t('Enter language')}
+									bind:value={webConfig.MICROSOFT_WEB_IQ_LANGUAGE}
+									autocomplete="off"
+								/>
+							</div>
+						{/if}
+					</div>
+				{:else if webConfig.WEB_LOADER_ENGINE === 'external'}
+					<div class="mb-2.5 flex w-full flex-col">
+						<div>
+							<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+								{$i18n.t('External Web Loader URL')}
+							</div>
+
+							<div class="flex w-full">
+								<div class="flex-1">
+									<input
+										class="w-full 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 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+										type="text"
+										placeholder={$i18n.t('Enter External Web Loader URL')}
+										bind:value={webConfig.EXTERNAL_WEB_LOADER_URL}
+										autocomplete="off"
+									/>
+								</div>
+							</div>
+						</div>
+
+						<div class="mt-2">
+							<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
+								{$i18n.t('External Web Loader API Key')}
+							</div>
+
+							<SensitiveInput
+								variant="settings"
+								placeholder={$i18n.t('Enter External Web Loader API Key')}
+								bind:value={webConfig.EXTERNAL_WEB_LOADER_API_KEY}
 							/>
 						</div>
 					</div>
-				</div>
-			</div>
+				{/if}
+
+				<AdminSettingField
+					label={$i18n.t('Concurrent Requests')}
+					description={$i18n.t('Limit parallel web loader requests.')}
+				>
+					<input
+						class={inputClass}
+						placeholder={$i18n.t('Concurrent Requests')}
+						bind:value={webConfig.WEB_LOADER_CONCURRENT_REQUESTS}
+						required
+					/>
+				</AdminSettingField>
+
+				<AdminSettingField
+					label={$i18n.t('Youtube Language')}
+					description={$i18n.t('Preferred transcript language codes, separated by commas.')}
+				>
+					<input
+						class={inputClass}
+						type="text"
+						placeholder={$i18n.t('Enter language codes')}
+						bind:value={webConfig.YOUTUBE_LOADER_LANGUAGE}
+						autocomplete="off"
+					/>
+				</AdminSettingField>
+
+				<AdminSettingField
+					label={$i18n.t('Youtube Proxy URL')}
+					description={$i18n.t('Proxy URL used for Youtube loader requests.')}
+				>
+					<input
+						class={inputClass}
+						type="text"
+						placeholder={$i18n.t('Enter proxy URL (e.g. https://user:password@host:port)')}
+						bind:value={webConfig.YOUTUBE_LOADER_PROXY_URL}
+						autocomplete="off"
+					/>
+				</AdminSettingField>
+			</AdminSettingSection>
 		{/if}
 	</div>
 	<div class="flex justify-end pt-6 text-sm font-normal">
diff --git a/src/lib/components/chat/Settings/About.svelte b/src/lib/components/chat/Settings/About.svelte
index 081b13269f..3b3cd7538e 100644
--- a/src/lib/components/chat/Settings/About.svelte
+++ b/src/lib/components/chat/Settings/About.svelte
@@ -154,7 +154,7 @@
 			<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
+					>Tim J. Baek</a
 				>
 			</div>
 		</UserSettingSection>
diff --git a/src/lib/components/chat/Settings/Audio.svelte b/src/lib/components/chat/Settings/Audio.svelte
index 77f2b82dd3..332d93fc01 100644
--- a/src/lib/components/chat/Settings/Audio.svelte
+++ b/src/lib/components/chat/Settings/Audio.svelte
@@ -41,8 +41,6 @@
 	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 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') {
@@ -80,13 +78,13 @@
 		}
 	};
 
-	const toggleResponseAutoPlayback = async () => {
-		responseAutoPlayback = !responseAutoPlayback;
+	const setResponseAutoPlayback = async (enabled: boolean) => {
+		responseAutoPlayback = enabled;
 		saveSettings({ responseAutoPlayback: responseAutoPlayback });
 	};
 
-	const toggleSpeechAutoSend = async () => {
-		speechAutoSend = !speechAutoSend;
+	const setSpeechAutoSend = async (enabled: boolean) => {
+		speechAutoSend = enabled;
 		saveSettings({ speechAutoSend: speechAutoSend });
 	};
 
@@ -231,17 +229,13 @@
 					'Send transcribed voice input immediately after speech recognition finishes.'
 				)}
 			>
-				<button
-					class={actionButtonClass}
-					on:click={() => {
-						toggleSpeechAutoSend();
+				<Switch
+					state={speechAutoSend}
+					ariaLabel={$i18n.t('Instant Auto-Send After Voice Transcription')}
+					on:change={(event) => {
+						setSpeechAutoSend(event.detail);
 					}}
-					type="button"
-					role="switch"
-					aria-checked={speechAutoSend}
-				>
-					{speechAutoSend === true ? $i18n.t('On') : $i18n.t('Off')}
-				</button>
+				/>
 			</UserSettingRow>
 		</UserSettingSection>
 
@@ -283,17 +277,13 @@
 				label={$i18n.t('Auto-Playback Response')}
 				description={$i18n.t('Play assistant responses aloud automatically.')}
 			>
-				<button
-					class={actionButtonClass}
-					on:click={() => {
-						toggleResponseAutoPlayback();
+				<Switch
+					state={responseAutoPlayback}
+					ariaLabel={$i18n.t('Auto-Playback Response')}
+					on:change={(event) => {
+						setResponseAutoPlayback(event.detail);
 					}}
-					type="button"
-					role="switch"
-					aria-checked={responseAutoPlayback}
-				>
-					{responseAutoPlayback === true ? $i18n.t('On') : $i18n.t('Off')}
-				</button>
+				/>
 			</UserSettingRow>
 
 			<UserSettingRow
diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index 8706c4c115..6ca3fd65c5 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -14,6 +14,7 @@
 	import UserSettingRow from './UserSettingRow.svelte';
 	import UserSettingSection from './UserSettingSection.svelte';
 	import SettingsSelect from '$lib/components/common/SettingsSelect.svelte';
+	import Switch from '$lib/components/common/Switch.svelte';
 	export let saveSettings: Function;
 	export let getModels: Function;
 
@@ -33,13 +34,14 @@
 	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();
+	const setNotificationEnabled = async (enabled: boolean) => {
+		const permission = enabled ? await Notification.requestPermission() : 'granted';
 
 		if (permission === 'granted') {
-			notificationEnabled = !notificationEnabled;
+			notificationEnabled = enabled;
 			saveSettings({ notificationEnabled: notificationEnabled });
 		} else {
+			notificationEnabled = false;
 			toast.error(
 				$i18n.t(
 					'Response notifications cannot be activated as the website permissions have been denied. Please visit your browser settings to grant the necessary access.'
@@ -273,17 +275,13 @@
 				label={$i18n.t('Notifications')}
 				description={$i18n.t('Allow browser notifications for completed responses.')}
 			>
-				<button
-					class={actionButtonClass}
-					on:click={() => {
-						toggleNotification();
+				<Switch
+					state={notificationEnabled}
+					ariaLabel={$i18n.t('Notifications')}
+					on:change={(event) => {
+						setNotificationEnabled(event.detail);
 					}}
-					type="button"
-					role="switch"
-					aria-checked={notificationEnabled}
-				>
-					{notificationEnabled === true ? $i18n.t('On') : $i18n.t('Off')}
-				</button>
+				/>
 			</UserSettingRow>
 		</UserSettingSection>