diff --git a/src/lib/components/admin/Settings/Audio.svelte b/src/lib/components/admin/Settings/Audio.svelte
index fab2e06ad..863cbe34c 100644
--- a/src/lib/components/admin/Settings/Audio.svelte
+++ b/src/lib/components/admin/Settings/Audio.svelte
@@ -210,7 +210,7 @@
 	<div class=" space-y-3 overflow-y-scroll scrollbar-hidden h-full">
 		<div class="flex flex-col gap-3">
 			<div>
-				<div class=" mb-2.5 text-base font-medium">{$i18n.t('Speech-to-Text')}</div>
+				<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('Speech-to-Text')}</div>
 
 				<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
@@ -498,7 +498,7 @@
 			</div>
 
 			<div>
-				<div class=" mb-2.5 text-base font-medium">{$i18n.t('Text-to-Speech')}</div>
+				<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('Text-to-Speech')}</div>
 
 				<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
diff --git a/src/lib/components/admin/Settings/CodeExecution.svelte b/src/lib/components/admin/Settings/CodeExecution.svelte
index 6050fb26b..5838a2f4d 100644
--- a/src/lib/components/admin/Settings/CodeExecution.svelte
+++ b/src/lib/components/admin/Settings/CodeExecution.svelte
@@ -41,7 +41,7 @@
 		{#if config}
 			<div>
 				<div class="mb-3.5">
-					<div class=" mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
+					<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
 
 					<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
@@ -164,7 +164,7 @@
 				</div>
 
 				<div class="mb-3.5">
-					<div class=" mb-2.5 text-base font-medium">{$i18n.t('Code Interpreter')}</div>
+					<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('Code Interpreter')}</div>
 
 					<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
diff --git a/src/lib/components/admin/Settings/Connections.svelte b/src/lib/components/admin/Settings/Connections.svelte
index 100e440d5..93cf755be 100644
--- a/src/lib/components/admin/Settings/Connections.svelte
+++ b/src/lib/components/admin/Settings/Connections.svelte
@@ -219,7 +219,7 @@
 	<div class=" overflow-y-scroll scrollbar-hidden h-full">
 		{#if ENABLE_OPENAI_API !== null && ENABLE_OLLAMA_API !== null && connectionsConfig !== null}
 			<div class="mb-3.5">
-				<div class=" mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
+				<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
 
 				<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
diff --git a/src/lib/components/admin/Settings/Documents.svelte b/src/lib/components/admin/Settings/Documents.svelte
index 35e048491..c47031268 100644
--- a/src/lib/components/admin/Settings/Documents.svelte
+++ b/src/lib/components/admin/Settings/Documents.svelte
@@ -317,7 +317,7 @@
 		<div class=" space-y-2.5 overflow-y-scroll scrollbar-hidden h-full pr-1.5">
 			<div class="">
 				<div class="mb-3">
-					<div class=" mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
+					<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
 
 					<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
@@ -914,7 +914,7 @@
 
 				{#if !RAGConfig.BYPASS_EMBEDDING_AND_RETRIEVAL}
 					<div class="mb-3">
-						<div class=" mb-2.5 text-base font-medium">{$i18n.t('Embedding')}</div>
+						<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('Embedding')}</div>
 
 						<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
@@ -1089,7 +1089,7 @@
 					</div>
 
 					<div class="mb-3">
-						<div class=" mb-2.5 text-base font-medium">{$i18n.t('Retrieval')}</div>
+						<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('Retrieval')}</div>
 
 						<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
@@ -1332,7 +1332,7 @@
 				{/if}
 
 				<div class="mb-3">
-					<div class=" mb-2.5 text-base font-medium">{$i18n.t('Files')}</div>
+					<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('Files')}</div>
 
 					<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
@@ -1444,7 +1444,7 @@
 				</div>
 
 				<div class="mb-3">
-					<div class=" mb-2.5 text-base font-medium">{$i18n.t('Integration')}</div>
+					<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('Integration')}</div>
 
 					<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
@@ -1464,7 +1464,7 @@
 				</div>
 
 				<div class="mb-3">
-					<div class=" mb-2.5 text-base font-medium">{$i18n.t('Danger Zone')}</div>
+					<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('Danger Zone')}</div>
 
 					<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
diff --git a/src/lib/components/admin/Settings/Evaluations.svelte b/src/lib/components/admin/Settings/Evaluations.svelte
index 3e760772c..68f853882 100644
--- a/src/lib/components/admin/Settings/Evaluations.svelte
+++ b/src/lib/components/admin/Settings/Evaluations.svelte
@@ -104,7 +104,7 @@
 		{#if evaluationConfig !== null}
 			<div class="">
 				<div class="mb-3">
-					<div class=" mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
+					<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
 
 					<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
@@ -119,7 +119,7 @@
 
 				{#if evaluationConfig.ENABLE_EVALUATION_ARENA_MODELS}
 					<div class="mb-3">
-						<div class=" mb-2.5 text-base font-medium flex justify-between items-center">
+						<div class=" mt-0.5 mb-2.5 text-base font-medium flex justify-between items-center">
 							<div>
 								{$i18n.t('Manage')}
 							</div>
diff --git a/src/lib/components/admin/Settings/General.svelte b/src/lib/components/admin/Settings/General.svelte
index ec01b586f..580b5ca37 100644
--- a/src/lib/components/admin/Settings/General.svelte
+++ b/src/lib/components/admin/Settings/General.svelte
@@ -118,11 +118,11 @@
 		updateHandler();
 	}}
 >
-	<div class="mt-0.5 space-y-3 overflow-y-scroll scrollbar-hidden h-full">
+	<div class="space-y-3 overflow-y-scroll scrollbar-hidden h-full">
 		{#if adminConfig !== null}
 			<div class="">
 				<div class="mb-3.5">
-					<div class=" mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
+					<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
 
 					<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
@@ -280,7 +280,7 @@
 				</div>
 
 				<div class="mb-3">
-					<div class=" mb-2.5 text-base font-medium">{$i18n.t('Authentication')}</div>
+					<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('Authentication')}</div>
 
 					<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
@@ -637,7 +637,7 @@
 				</div>
 
 				<div class="mb-3">
-					<div class=" mb-2.5 text-base font-medium">{$i18n.t('Features')}</div>
+					<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('Features')}</div>
 
 					<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
diff --git a/src/lib/components/admin/Settings/Images.svelte b/src/lib/components/admin/Settings/Images.svelte
index 939e82e2f..a738f35bd 100644
--- a/src/lib/components/admin/Settings/Images.svelte
+++ b/src/lib/components/admin/Settings/Images.svelte
@@ -18,6 +18,7 @@
 	import Switch from '$lib/components/common/Switch.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Textarea from '$lib/components/common/Textarea.svelte';
+	import CodeEditorModal from '$lib/components/common/CodeEditorModal.svelte';
 	const dispatch = createEventDispatcher();
 
 	const i18n = getContext('i18n');
@@ -27,6 +28,7 @@
 	let models = null;
 	let config = null;
 
+	let showComfyUIWorkflowEditor = false;
 	let requiredWorkflowNodes = [
 		{
 			type: 'prompt',
@@ -68,24 +70,48 @@
 	};
 
 	const updateConfigHandler = async () => {
-		const res = await updateConfig(localStorage.token, config)
-			.catch((error) => {
-				toast.error(`${error}`);
-				return null;
-			})
-			.catch((error) => {
-				toast.error(`${error}`);
-				return null;
-			});
+		if (
+			config.IMAGE_GENERATION_ENGINE === 'automatic1111' &&
+			config.AUTOMATIC1111_BASE_URL === ''
+		) {
+			toast.error($i18n.t('AUTOMATIC1111 Base URL is required.'));
+			config.ENABLE_IMAGE_GENERATION = false;
+
+			return null;
+		} else if (config.IMAGE_GENERATION_ENGINE === 'comfyui' && config.COMFYUI_BASE_URL === '') {
+			toast.error($i18n.t('ComfyUI Base URL is required.'));
+			config.ENABLE_IMAGE_GENERATION = false;
+
+			return null;
+		} else if (config.IMAGE_GENERATION_ENGINE === 'openai' && config.OPENAI_API_KEY === '') {
+			toast.error($i18n.t('OpenAI API Key is required.'));
+			config.ENABLE_IMAGE_GENERATION = false;
+
+			return null;
+		} else if (config.IMAGE_GENERATION_ENGINE === 'gemini' && config.GEMINI_API_KEY === '') {
+			toast.error($i18n.t('Gemini API Key is required.'));
+			config.ENABLE_IMAGE_GENERATION = false;
+
+			return null;
+		}
+
+		const res = await updateConfig(localStorage.token, config).catch((error) => {
+			toast.error(`${error}`);
+			return null;
+		});
 
 		if (res) {
 			config = res;
-		}
 
-		if (config.enabled) {
-			backendConfig.set(await getBackendConfig());
-			getModels();
+			if (config.ENABLE_IMAGE_GENERATION) {
+				backendConfig.set(await getBackendConfig());
+				getModels();
+			}
+
+			return config;
 		}
+
+		return null;
 	};
 
 	const validateJSON = (json) => {
@@ -121,15 +147,11 @@
 			});
 		}
 
-		await updateConfig(localStorage.token, config).catch((error) => {
-			toast.error(`${error}`);
-			loading = false;
-			return null;
-		});
-
-		getModels();
+		const res = await updateConfigHandler();
+		if (res) {
+			dispatch('save');
+		}
 
-		dispatch('save');
 		loading = false;
 	};
 
@@ -179,457 +201,555 @@
 	<div class=" space-y-3 overflow-y-scroll scrollbar-hidden pr-2">
 		{#if config}
 			<div>
-				<div class=" mb-2.5 text-base font-medium">{$i18n.t('Create Image')}</div>
+				<div>
+					<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('Create Image')}</div>
 
-				<hr class=" border-gray-100 dark:border-gray-850 my-2" />
+					<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
-				<div>
-					<div class=" py-1 flex w-full justify-between">
-						<div class=" self-center text-xs font-medium">
-							{$i18n.t('Image Generation (Experimental)')}
-						</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('Image Generation')}
+								</div>
+							</div>
 
-						<div class="px-1">
-							<Switch
-								bind:state={config.ENABLE_IMAGE_GENERATION}
-								on:change={(e) => {
-									const enabled = e.detail;
-
-									if (enabled) {
-										if (
-											config.IMAGE_GENERATION_ENGINE === 'automatic1111' &&
-											config.AUTOMATIC1111_BASE_URL === ''
-										) {
-											toast.error($i18n.t('AUTOMATIC1111 Base URL is required.'));
-											config.ENABLE_IMAGE_GENERATION = false;
-										} else if (
-											config.IMAGE_GENERATION_ENGINE === 'comfyui' &&
-											config.COMFYUI_BASE_URL === ''
-										) {
-											toast.error($i18n.t('ComfyUI Base URL is required.'));
-											config.ENABLE_IMAGE_GENERATION = false;
-										} else if (
-											config.IMAGE_GENERATION_ENGINE === 'openai' &&
-											config.OPENAI_API_KEY === ''
-										) {
-											toast.error($i18n.t('OpenAI API Key is required.'));
-											config.ENABLE_IMAGE_GENERATION = false;
-										} else if (
-											config.IMAGE_GENERATION_ENGINE === 'gemini' &&
-											config.GEMINI_API_KEY === ''
-										) {
-											toast.error($i18n.t('Gemini API Key is required.'));
-											config.ENABLE_IMAGE_GENERATION = false;
-										}
-									}
-
-									updateConfigHandler();
-								}}
-							/>
+							<Switch bind:state={config.ENABLE_IMAGE_GENERATION} />
 						</div>
 					</div>
-				</div>
 
-				{#if config.enabled}
-					<div class=" py-1 flex w-full justify-between">
-						<div class=" self-center text-xs font-medium">{$i18n.t('Image Prompt Generation')}</div>
-						<div class="px-1">
-							<Switch bind:state={config.ENABLE_IMAGE_PROMPT_GENERATION} />
-						</div>
-					</div>
-				{/if}
-
-				<div class=" py-1 flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">{$i18n.t('Image Generation Engine')}</div>
-					<div class="flex items-center relative">
-						<select
-							class=" dark:bg-gray-900 w-fit pr-8 cursor-pointer rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
-							bind:value={config.IMAGE_GENERATION_ENGINE}
-							placeholder={$i18n.t('Select Engine')}
-							on:change={async () => {
-								updateConfigHandler();
-							}}
-						>
-							<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>
-						</select>
-					</div>
-				</div>
-			</div>
-			<hr class=" border-gray-100 dark:border-gray-850" />
-
-			<div class="flex flex-col gap-2">
-				{#if (config?.IMAGE_GENERATION_ENGINE ?? 'automatic1111') === 'automatic1111'}
-					<div>
-						<div class=" mb-2 text-sm font-medium">{$i18n.t('AUTOMATIC1111 Base URL')}</div>
-						<div class="flex w-full">
-							<div class="flex-1 mr-2">
-								<input
-									class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
-									placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
-									bind:value={config.AUTOMATIC1111_BASE_URL}
-								/>
+					{#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="">
+										{$i18n.t('Image Prompt Generation')}
+									</div>
+								</div>
+
+								<Switch bind:state={config.ENABLE_IMAGE_PROMPT_GENERATION} />
 							</div>
-							<button
-								class="px-2.5 bg-gray-50 hover:bg-gray-100 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 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'));
-									}
-								}}
-							>
-								<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>
+					{/if}
 
-						<div class="mt-2 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-medium"
-								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">
+								<div class="">
+									{$i18n.t('Image Generation Engine')}
+								</div>
+							</div>
 
-					<div>
-						<div class=" mb-2 text-sm font-medium">
-							{$i18n.t('AUTOMATIC1111 Api Auth String')}
-						</div>
-						<SensitiveInput
-							placeholder={$i18n.t('Enter api auth string (e.g. username:password)')}
-							bind:value={config.AUTOMATIC1111_API_AUTH}
-							required={false}
-						/>
-
-						<div class="mt-2 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-medium"
-								href="https://github.com/AUTOMATIC1111/stable-diffusion-webui/discussions/13993"
-								target="_blank"
+							<select
+								class=" dark:bg-gray-900 w-fit pr-8 cursor-pointer rounded-sm px-2 text-xs bg-transparent outline-hidden text-right"
+								bind:value={config.IMAGE_GENERATION_ENGINE}
+								placeholder={$i18n.t('Select Engine')}
 							>
-								{$i18n
-									.t('(e.g. `sh webui.sh --api --api-auth username_password`)')
-									.replace('_', ':')}
-							</a>
+								<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>
+							</select>
 						</div>
 					</div>
 
-					<div class="mb-1 text-xs text-gray-400 dark:text-gray-500">
-						<div class="w-full">
-							<div class=" mb-1.5 text-xs font-medium">{$i18n.t('Additional Parameters')}</div>
-							<div class="flex w-full">
-								<div class="flex-1">
-									<Textarea
-										className="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
-										bind:value={config.AUTOMATIC1111_PARAMS}
-										placeholder={$i18n.t('Enter additional parameters in JSON format')}
-										minSize={100}
-									/>
+					{#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="">
+										{$i18n.t('Default Model')}
+									</div>
 								</div>
-							</div>
-						</div>
-					</div>
-				{:else if config?.IMAGE_GENERATION_ENGINE === 'comfyui'}
-					<div class="">
-						<div class=" mb-2 text-sm font-medium">{$i18n.t('ComfyUI Base URL')}</div>
-						<div class="flex w-full">
-							<div class="flex-1 mr-2">
-								<input
-									class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
-									placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
-									bind:value={config.COMFYUI_BASE_URL}
-								/>
-							</div>
-							<button
-								class="px-2.5 bg-gray-50 hover:bg-gray-100 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 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'));
-									}
-								}}
-							>
-								<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"
+
+								<Tooltip content={$i18n.t('Enter Model ID')} placement="top-start">
+									<input
+										list="model-list"
+										class=" rounded-lg text-right text-sm bg-transparent outline-hidden"
+										bind:value={config.IMAGE_GENERATION_MODEL}
+										placeholder={$i18n.t('Select a model')}
+										required
 									/>
-								</svg>
-							</button>
+
+									<datalist id="model-list">
+										{#each models ?? [] as model}
+											<option value={model.id}>{model.name}</option>
+										{/each}
+									</datalist>
+								</Tooltip>
+							</div>
 						</div>
-					</div>
 
-					<div class="">
-						<div class=" mb-2 text-sm font-medium">{$i18n.t('ComfyUI API Key')}</div>
-						<div class="flex w-full">
-							<div class="flex-1 mr-2">
-								<SensitiveInput
-									placeholder={$i18n.t('sk-1234')}
-									bind:value={config.COMFYUI_API_KEY}
-									required={false}
-								/>
+						<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 Size')}
+									</div>
+								</div>
+
+								<Tooltip content={$i18n.t('Enter Image Size (e.g. 512x512)')} placement="top-start">
+									<input
+										class=" rounded-lg text-right text-sm bg-transparent outline-hidden"
+										placeholder={$i18n.t('Enter Image Size (e.g. 512x512)')}
+										bind:value={config.IMAGE_SIZE}
+										required
+									/>
+								</Tooltip>
 							</div>
 						</div>
-					</div>
 
-					<div class="">
-						<div class=" mb-2 text-sm font-medium">{$i18n.t('ComfyUI Workflow')}</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>
 
-						{#if config.COMFYUI_WORKFLOW}
-							<Textarea
-								class="w-full rounded-lg mb-1 py-2 px-4 text-xs bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden disabled:text-gray-600 resize-none"
-								rows="10"
-								bind:value={config.COMFYUI_WORKFLOW}
-								required
-							/>
+									<Tooltip
+										content={$i18n.t('Enter Number of Steps (e.g. 50)')}
+										placement="top-start"
+									>
+										<input
+											class=" rounded-lg text-right text-sm bg-transparent outline-hidden"
+											placeholder={$i18n.t('Enter Number of Steps (e.g. 50)')}
+											bind:value={config.IMAGE_STEPS}
+											required
+										/>
+									</Tooltip>
+								</div>
+							</div>
 						{/if}
+					{/if}
 
-						<div class="flex w-full">
-							<div class="flex-1">
-								<input
-									id="upload-comfyui-workflow-input"
-									hidden
-									type="file"
-									accept=".json"
-									on:change={(e) => {
-										const file = e.target.files[0];
-										const reader = new FileReader();
-
-										reader.onload = (e) => {
-											config.COMFYUI_WORKFLOW = e.target.result;
-											e.target.value = null;
-										};
-
-										reader.readAsText(file);
-									}}
-								/>
+					{#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>
 
-								<button
-									class="w-full text-sm font-medium py-2 bg-transparent hover:bg-gray-50 border border-dashed border-gray-50 dark:border-gray-850 dark:hover:bg-gray-850 text-center rounded-xl"
-									type="button"
-									on:click={() => {
-										document.getElementById('upload-comfyui-workflow-input')?.click();
-									}}
-								>
-									{$i18n.t('Click here to upload a workflow.json file.')}
-								</button>
+								<div class="flex w-full">
+									<div class="flex-1">
+										<input
+											class="w-full text-sm bg-transparent outline-hidden text-right"
+											placeholder={$i18n.t('API Base URL')}
+											bind:value={config.IMAGES_OPENAI_API_BASE_URL}
+										/>
+									</div>
+								</div>
 							</div>
 						</div>
 
-						<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
-							{$i18n.t('Make sure to export a workflow.json file as API format from 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('OpenAI API Key')}
+									</div>
+								</div>
+
+								<div class="flex w-full">
+									<div class="flex-1">
+										<SensitiveInput
+											inputClassName="text-right w-full"
+											placeholder={$i18n.t('API Key')}
+											bind:value={config.IMAGES_OPENAI_API_KEY}
+											required={false}
+										/>
+									</div>
+								</div>
+							</div>
 						</div>
-					</div>
 
-					{#if config.COMFYUI_WORKFLOW}
-						<div class="">
-							<div class=" mb-2 text-sm font-medium">{$i18n.t('ComfyUI Workflow Nodes')}</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="text-xs flex flex-col gap-1.5">
-								{#each requiredWorkflowNodes as node}
-									<div class="flex w-full items-center">
-										<div class="shrink-0">
-											<div
-												class=" capitalize line-clamp-1 font-medium px-3 py-1 w-20 text-center bg-green-500/10 text-green-700 dark:text-green-200"
-											>
-												{node.type}{node.type === 'prompt' ? '*' : ''}
-											</div>
-										</div>
-										<div class="">
-											<Tooltip content={$i18n.t('Input Key (e.g. text, unet_name, steps)')}>
-												<input
-													class="py-1 px-3 w-24 text-xs text-center bg-transparent outline-hidden border-r border-gray-50 dark:border-gray-850"
-													placeholder={$i18n.t('Key')}
-													bind:value={node.key}
-													required
-												/>
-											</Tooltip>
-										</div>
+								<div class="flex w-full">
+									<div class="flex-1">
+										<input
+											class="w-full text-sm bg-transparent outline-hidden text-right"
+											placeholder={$i18n.t('API Version')}
+											bind:value={config.IMAGES_OPENAI_API_VERSION}
+										/>
+									</div>
+								</div>
+							</div>
+						</div>
+					{: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>
 
-										<div class="w-full">
-											<Tooltip
-												content={$i18n.t('Comma separated Node Ids (e.g. 1 or 1,2)')}
-												placement="top-start"
-											>
-												<input
-													class="w-full py-1 px-4 text-xs bg-transparent outline-hidden"
-													placeholder={$i18n.t('Node Ids')}
-													bind:value={node.node_ids}
-												/>
-											</Tooltip>
-										</div>
+								<div class="flex w-full">
+									<div class="flex-1 mr-2">
+										<input
+											class="w-full text-sm bg-transparent outline-hidden text-right"
+											placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
+											bind:value={config.AUTOMATIC1111_BASE_URL}
+										/>
 									</div>
-								{/each}
+									<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'));
+											}
+										}}
+									>
+										<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-2 text-xs text-right text-gray-400 dark:text-gray-500">
-								{$i18n.t('*Prompt node ID(s) are required for image generation')}
+							<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-medium"
+									href="https://github.com/AUTOMATIC1111/stable-diffusion-webui/discussions/3734"
+									target="_blank"
+								>
+									{$i18n.t('(e.g. `sh webui.sh --api`)')}
+								</a>
 							</div>
 						</div>
-					{/if}
-				{:else if config?.IMAGE_GENERATION_ENGINE === 'openai'}
-					<div>
-						<div class=" mb-2 text-sm font-medium">{$i18n.t('OpenAI API Config')}</div>
-						<div class="flex w-full">
-							<div class="flex-1 mr-2">
-								<input
-									class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
-									placeholder={$i18n.t('API Base URL')}
-									bind:value={config.IMAGES_OPENAI_API_BASE_URL}
-									required
-								/>
+
+						<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
+											inputClassName="text-right w-full"
+											placeholder={$i18n.t('Enter api auth string (e.g. username:password)')}
+											bind:value={config.AUTOMATIC1111_API_AUTH}
+											required={false}
+										/>
+									</div>
+								</div>
+							</div>
+
+							<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-medium"
+									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>
-					</div>
 
-					<div>
-						<div class=" mb-2 text-sm font-medium">{$i18n.t('API Key')}</div>
-						<div class="flex w-full">
-							<div class="flex-1 mr-2">
-								<SensitiveInput
-									placeholder={$i18n.t('API Key')}
-									bind:value={config.IMAGES_OPENAI_API_KEY}
-									required
-								/>
+						<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 py-2 px-3 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+										bind:value={config.AUTOMATIC1111_PARAMS}
+										placeholder={$i18n.t('Enter additional parameters in JSON format')}
+										minSize={100}
+									/>
+								</div>
 							</div>
 						</div>
-					</div>
+					{: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>
 
-					<div>
-						<div class=" mb-2 text-sm font-medium">{$i18n.t('API Version')}</div>
-						<div class="flex w-full">
-							<div class="flex-1 mr-2">
-								<input
-									class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
-									placeholder={$i18n.t('API Version')}
-									bind:value={config.IMAGES_OPENAI_API_VERSION}
-								/>
+								<div class="flex w-full">
+									<div class="flex-1 mr-2">
+										<input
+											class="w-full text-sm bg-transparent outline-hidden 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'));
+											}
+										}}
+									>
+										<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>
-				{:else if config?.IMAGE_GENERATION_ENGINE === 'gemini'}
-					<div>
-						<div class=" mb-1.5 text-sm font-medium">{$i18n.t('Gemini API Config')}</div>
 
-						<div class="flex gap-2 mb-1">
+						<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
+											inputClassName="text-right w-full"
+											placeholder={$i18n.t('sk-1234')}
+											bind:value={config.COMFYUI_API_KEY}
+											required={false}
+										/>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div class="mb-2.5">
 							<input
-								class="flex-1 w-full text-sm bg-transparent outline-none"
-								placeholder={$i18n.t('API Base URL')}
-								bind:value={config.IMAGES_GEMINI_API_BASE_URL}
-								required
-							/>
+								id="upload-comfyui-workflow-input"
+								hidden
+								type="file"
+								accept=".json"
+								on:change={(e) => {
+									const file = e.target.files[0];
+									const reader = new FileReader();
+
+									reader.onload = (e) => {
+										config.COMFYUI_WORKFLOW = e.target.result;
+										e.target.value = null;
+									};
 
-							<SensitiveInput
-								placeholder={$i18n.t('API Key')}
-								bind:value={config.IMAGES_GEMINI_API_KEY}
+									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>
+								</div>
+
+								<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">
+								<CodeEditorModal
+									bind:show={showComfyUIWorkflowEditor}
+									value={config.COMFYUI_WORKFLOW}
+									lang="json"
+									onChange={(e) => {
+										config.COMFYUI_WORKFLOW = e;
+									}}
+									onSave={() => {
+										console.log('Saved');
+									}}
+								/>
+								<!-- {#if config.COMFYUI_WORKFLOW}
+									<Textarea
+										class="w-full rounded-lg my-1 py-2 px-3 text-xs bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden disabled:text-gray-600 resize-none"
+										rows="10"
+										bind:value={config.COMFYUI_WORKFLOW}
+										required
+									/>
+								{/if} -->
+								{$i18n.t('Make sure to export a workflow.json file as API format from ComfyUI.')}
+							</div>
 						</div>
-					</div>
-				{/if}
-			</div>
 
-			{#if config?.ENABLE_IMAGE_GENERATION}
-				<hr class=" border-gray-100 dark:border-gray-850" />
+						{#if config.COMFYUI_WORKFLOW}
+							<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 Workflow Nodes')}
+										</div>
+									</div>
+								</div>
 
-				<div>
-					<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Default Model')}</div>
-					<div class="flex w-full">
-						<div class="flex-1 mr-2">
-							<div class="flex w-full">
-								<div class="flex-1">
-									<Tooltip content={$i18n.t('Enter Model ID')} placement="top-start">
+								<div class="mt-1 text-xs flex flex-col gap-1.5">
+									{#each requiredWorkflowNodes as node}
+										<div class="flex w-full flex-col">
+											<div class="shrink-0">
+												<div class=" capitalize line-clamp-1 w-20 text-gray-400 dark:text-gray-500">
+													{node.type}{node.type === 'prompt' ? '*' : ''}
+												</div>
+											</div>
+
+											<div class="flex mt-0.5 items-center">
+												<div class="">
+													<Tooltip content={$i18n.t('Input Key (e.g. text, unet_name, steps)')}>
+														<input
+															class="py-1 w-24 text-xs bg-transparent outline-hidden"
+															placeholder={$i18n.t('Key')}
+															bind:value={node.key}
+															required
+														/>
+													</Tooltip>
+												</div>
+
+												<div class="px-2 text-gray-400 dark:text-gray-500">:</div>
+
+												<div class="w-full">
+													<Tooltip
+														content={$i18n.t('Comma separated Node Ids (e.g. 1 or 1,2)')}
+														placement="top-start"
+													>
+														<input
+															class="w-full py-1 text-xs bg-transparent outline-hidden"
+															placeholder={$i18n.t('Node Ids')}
+															bind:value={node.node_ids}
+														/>
+													</Tooltip>
+												</div>
+											</div>
+										</div>
+									{/each}
+								</div>
+
+								<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
+									{$i18n.t('*Prompt node ID(s) are required for image generation')}
+								</div>
+							</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>
+
+								<div class="flex w-full">
+									<div class="flex-1">
 										<input
-											list="model-list"
-											class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
-											bind:value={config.IMAGE_GENERATION_MODEL}
-											placeholder={$i18n.t('Select a model')}
-											required
+											class="w-full text-sm bg-transparent outline-hidden text-right"
+											placeholder={$i18n.t('API Base URL')}
+											bind:value={config.IMAGES_GEMINI_API_BASE_URL}
 										/>
-
-										<datalist id="model-list">
-											{#each models ?? [] as model}
-												<option value={model.id}>{model.name}</option>
-											{/each}
-										</datalist>
-									</Tooltip>
+									</div>
 								</div>
 							</div>
 						</div>
-					</div>
-				</div>
 
-				<div>
-					<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Image Size')}</div>
-					<div class="flex w-full">
-						<div class="flex-1 mr-2">
-							<Tooltip content={$i18n.t('Enter Image Size (e.g. 512x512)')} placement="top-start">
-								<input
-									class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
-									placeholder={$i18n.t('Enter Image Size (e.g. 512x512)')}
-									bind:value={config.IMAGE_SIZE}
-									required
-								/>
-							</Tooltip>
-						</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('Gemini API Key')}
+									</div>
+								</div>
 
-				{#if ['comfyui', 'automatic1111', ''].includes(config?.IMAGE_GENERATION_ENGINE)}
-					<div>
-						<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Steps')}</div>
-						<div class="flex w-full">
-							<div class="flex-1 mr-2">
-								<Tooltip content={$i18n.t('Enter Number of Steps (e.g. 50)')} placement="top-start">
-									<input
-										class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
-										placeholder={$i18n.t('Enter Number of Steps (e.g. 50)')}
-										bind:value={config.IMAGE_STEPS}
-										required
-									/>
-								</Tooltip>
+								<div class="flex w-full">
+									<div class="flex-1">
+										<SensitiveInput
+											inputClassName="text-right w-full"
+											placeholder={$i18n.t('API Key')}
+											bind:value={config.IMAGES_GEMINI_API_KEY}
+											required={true}
+										/>
+									</div>
+								</div>
 							</div>
 						</div>
-					</div>
-				{/if}
-			{/if}
+					{/if}
+				</div>
+			</div>
 		{/if}
 	</div>
 
diff --git a/src/lib/components/admin/Settings/Interface.svelte b/src/lib/components/admin/Settings/Interface.svelte
index 3114bea68..37e80a75d 100644
--- a/src/lib/components/admin/Settings/Interface.svelte
+++ b/src/lib/components/admin/Settings/Interface.svelte
@@ -111,7 +111,7 @@
 	>
 		<div class="  overflow-y-scroll scrollbar-hidden h-full pr-1.5">
 			<div class="mb-3.5">
-				<div class=" mb-2.5 text-base font-medium">{$i18n.t('Tasks')}</div>
+				<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('Tasks')}</div>
 
 				<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
@@ -384,7 +384,7 @@
 			</div>
 
 			<div class="mb-3.5">
-				<div class=" mb-2.5 text-base font-medium">{$i18n.t('UI')}</div>
+				<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('UI')}</div>
 
 				<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
diff --git a/src/lib/components/admin/Settings/Tools.svelte b/src/lib/components/admin/Settings/Tools.svelte
index f0169a0ec..d6d3bffd1 100644
--- a/src/lib/components/admin/Settings/Tools.svelte
+++ b/src/lib/components/admin/Settings/Tools.svelte
@@ -59,7 +59,7 @@
 		{#if servers !== null}
 			<div class="">
 				<div class="mb-3">
-					<div class=" mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
+					<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
 
 					<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
diff --git a/src/lib/components/admin/Settings/WebSearch.svelte b/src/lib/components/admin/Settings/WebSearch.svelte
index 7a78f275d..e7325cb58 100644
--- a/src/lib/components/admin/Settings/WebSearch.svelte
+++ b/src/lib/components/admin/Settings/WebSearch.svelte
@@ -95,7 +95,7 @@
 		{#if webConfig}
 			<div class="">
 				<div class="mb-3">
-					<div class=" mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
+					<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
 
 					<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
@@ -724,7 +724,7 @@
 				</div>
 
 				<div class="mb-3">
-					<div class=" mb-2.5 text-base font-medium">{$i18n.t('Loader')}</div>
+					<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('Loader')}</div>
 
 					<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
diff --git a/src/lib/components/common/CodeEditorModal.svelte b/src/lib/components/common/CodeEditorModal.svelte
new file mode 100644
index 000000000..dcc8546e8
--- /dev/null
+++ b/src/lib/components/common/CodeEditorModal.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { onMount, getContext } from 'svelte';
+
+	import CodeEditor from './CodeEditor.svelte';
+	import Drawer from './Drawer.svelte';
+
+	const i18n = getContext('i18n');
+
+	let {
+		show = $bindable(),
+		value = $bindable(),
+		lang = 'python',
+		onChange = () => {},
+		onSave = () => {}
+	} = $props();
+
+	let boilerplate = ``;
+
+	let codeEditor = $state(null);
+	let _content = $state(value);
+
+	$effect(() => {
+		if (_content) {
+			value = _content;
+		}
+	});
+</script>
+
+<Drawer bind:show>
+	<div class="flex h-full flex-col">
+		<div
+			class=" sticky top-0 z-30 flex justify-between bg-white px-4.5 pt-3 pb-3 dark:bg-gray-900 dark:text-gray-100"
+		>
+			<div class=" font-primary self-center text-lg font-medium">
+				{$i18n.t('Code Editor')}
+			</div>
+			<button
+				class="self-center"
+				aria-label="Close"
+				onclick={() => {
+					show = false;
+				}}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					class="h-5 w-5"
+				>
+					<path
+						d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+					/>
+				</svg>
+			</button>
+		</div>
+
+		<div
+			class="flex h-full w-full flex-1 flex-col md:flex-row md:space-x-4 dark:text-gray-200 overflow-y-auto"
+		>
+			<div class=" flex h-full w-full flex-col sm:flex-row sm:justify-center sm:space-x-6">
+				<CodeEditor bind:this={codeEditor} {value} {boilerplate} {lang} {onChange} {onSave} />
+			</div>
+		</div>
+	</div>
+</Drawer>
diff --git a/src/lib/components/common/Drawer.svelte b/src/lib/components/common/Drawer.svelte
index 50d5c7dac..198f21e2f 100644
--- a/src/lib/components/common/Drawer.svelte
+++ b/src/lib/components/common/Drawer.svelte
@@ -2,7 +2,6 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { flyAndScale } from '$lib/utils/transitions';
 	import { fade, fly, slide } from 'svelte/transition';
-	import { isApp } from '$lib/stores';
 
 	export let show = false;
 	export let className = '';
@@ -54,26 +53,25 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-
-<div
-	bind:this={modalElement}
-	class="modal fixed right-0 {$isApp
-		? ' ml-[4.5rem] max-w-[calc(100%-4.5rem)]'
-		: ''} left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-999 overflow-hidden overscroll-contain"
-	in:fly={{ y: 100, duration: 100 }}
-	on:mousedown={() => {
-		show = false;
-	}}
->
+{#if show}
 	<div
-		class=" mt-auto w-full bg-gray-50 dark:bg-gray-900 dark:text-gray-100 {className} max-h-[100dvh] overflow-y-auto scrollbar-hidden"
-		on:mousedown={(e) => {
-			e.stopPropagation();
+		bind:this={modalElement}
+		class="modal fixed right-0 bottom-0 left-0 z-999 flex h-screen max-h-[100dvh] w-full justify-center overflow-hidden overscroll-contain bg-black/60"
+		in:fly={{ y: 100, duration: 100 }}
+		on:mousedown={() => {
+			show = false;
 		}}
 	>
-		<slot />
+		<div
+			class=" mt-auto w-full bg-gray-50 dark:bg-gray-900 dark:text-gray-100 {className} scrollbar-hidden max-h-[100dvh] overflow-y-auto"
+			on:mousedown={(e) => {
+				e.stopPropagation();
+			}}
+		>
+			<slot />
+		</div>
 	</div>
-</div>
+{/if}
 
 <style>
 	.modal-content {