diff --git a/src/lib/components/admin/Settings/Models/ModelControls.svelte b/src/lib/components/admin/Settings/Models/ModelControls.svelte
index 49b5abc62e..63bc17dffd 100644
--- a/src/lib/components/admin/Settings/Models/ModelControls.svelte
+++ b/src/lib/components/admin/Settings/Models/ModelControls.svelte
@@ -23,7 +23,7 @@
 	const actionClass =
 		'flex size-7 shrink-0 items-center justify-center rounded-lg text-gray-500 transition hover:bg-black/5 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-200';
 	const inputClass =
-		'w-full min-w-0 bg-transparent py-1 text-[0.8125rem] text-gray-700 outline-hidden placeholder:text-gray-300 dark:text-gray-300 dark:placeholder:text-gray-700';
+		'w-full min-w-0 bg-transparent py-1 text-[0.8125rem] outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700 font-normal text-gray-900 dark:text-gray-100';
 
 	const keyFor = (label: string, items: object) => {
 		let base = label
@@ -134,7 +134,9 @@
 
 <div>
 	<div class="flex h-7 w-full items-center justify-between">
-		<span class="text-xs text-gray-600 dark:text-gray-400">{$i18n.t('Model controls')}</span>
+		<span class="text-xs font-normal text-gray-600 dark:text-gray-400"
+			>{$i18n.t('Model controls')}</span
+		>
 		<button
 			type="button"
 			class="rounded p-1 text-gray-500 transition hover:bg-black/5 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-200"
@@ -159,7 +161,7 @@
 				>
 				<button
 					type="button"
-					class="flex min-w-0 flex-1 items-center justify-between gap-3 py-1 text-left text-[0.8125rem] text-gray-700 dark:text-gray-300"
+					class="flex min-w-0 flex-1 items-center justify-between gap-3 py-1 text-left text-[0.8125rem] font-normal text-gray-900 dark:text-gray-100"
 					aria-label={`${$i18n.t('Edit')} ${control.label}`}
 					on:click={() => edit(key)}
 				>
@@ -202,7 +204,8 @@
 		<form class="space-y-2.5" on:submit|preventDefault|stopPropagation={apply}>
 			<div class="grid grid-cols-[minmax(0,1fr)_minmax(0,8rem)] gap-4">
 				<label class="block min-w-0 text-xs leading-4">
-					<span class="text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Name')}</span>
+					<span class="text-xs font-normal text-gray-600 dark:text-gray-400">{$i18n.t('Name')}</span
+					>
 					<input
 						bind:this={nameInput}
 						class={inputClass}
@@ -213,7 +216,9 @@
 					/>
 				</label>
 				<label class="block min-w-0 text-xs leading-4">
-					<span class="text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Default option')}</span>
+					<span class="text-xs font-normal text-gray-600 dark:text-gray-400"
+						>{$i18n.t('Default option')}</span
+					>
 					<NativeSelect
 						value={defaultOption}
 						options={[
@@ -228,11 +233,15 @@
 				</label>
 			</div>
 			<label class="block text-xs leading-4">
-				<span class="text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Description')}</span>
+				<span class="text-xs font-normal text-gray-600 dark:text-gray-400"
+					>{$i18n.t('Description')}</span
+				>
 				<input class={inputClass} placeholder={$i18n.t('Optional')} bind:value={description} />
 			</label>
 			<div class="flex items-center justify-between">
-				<span class="text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Display')}</span>
+				<span class="text-xs font-normal text-gray-600 dark:text-gray-400"
+					>{$i18n.t('Display')}</span
+				>
 				<div class="flex gap-1">
 					{#each ['menu', 'slider'] as mode}
 						<button
@@ -249,7 +258,9 @@
 				</div>
 			</div>
 			<div>
-				<span class="text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Options')}</span>
+				<span class="text-xs font-normal text-gray-600 dark:text-gray-400"
+					>{$i18n.t('Options')}</span
+				>
 				<div class="divide-y divide-gray-100/60 dark:divide-gray-850/60" use:sortable={moveOption}>
 					{#each options as option, index (option.id)}
 						<div class="py-1.5">
diff --git a/src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte b/src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte
index 9aca267d77..c563a5254a 100644
--- a/src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte
+++ b/src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte
@@ -108,8 +108,8 @@
 
 <div
 	class={layout === 'grid'
-		? 'grid grid-cols-1 gap-x-5 gap-y-1 pb-safe-bottom text-xs text-gray-600 dark:text-gray-400 sm:grid-cols-2 lg:grid-cols-3'
-		: 'space-y-1 pb-safe-bottom text-xs text-gray-600 dark:text-gray-400'}
+		? 'grid grid-cols-1 gap-x-5 gap-y-1 pb-safe-bottom text-xs text-gray-900 dark:text-gray-100 sm:grid-cols-2 lg:grid-cols-3'
+		: 'space-y-1 pb-safe-bottom text-xs text-gray-900 dark:text-gray-100'}
 >
 	<div>
 		<Tooltip
@@ -118,11 +118,11 @@
 			className="inline-tooltip"
 		>
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.streamChatResponse.label')}
 				</div>
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition"
+					class="p-1 px-3 text-xs flex rounded-sm transition font-normal text-gray-900 dark:text-gray-100"
 					on:click={() => {
 						params.stream_response =
 							(params?.stream_response ?? null) === null
@@ -153,11 +153,11 @@
 				className="inline-tooltip"
 			>
 				<div class="flex w-full justify-between">
-					<div class=" self-center text-xs">
+					<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 						{$i18n.t('settings.personal.general.parameters.streamDeltaChunkSize.label')}
 					</div>
 					<button
-						class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+						class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 						type="button"
 						on:click={() => {
 							params.stream_delta_chunk_size =
@@ -195,11 +195,11 @@
 				className="inline-tooltip"
 			>
 				<div class="flex w-full justify-between">
-					<div class=" self-center text-xs">
+					<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 						{$i18n.t('settings.personal.general.parameters.contextCompactionThreshold.label')}
 					</div>
 					<button
-						class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+						class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 						type="button"
 						on:click={() => {
 							params.compact_token_threshold =
@@ -219,7 +219,7 @@
 				<div class="flex mt-0.5 space-x-2">
 					<div class=" flex-1">
 						<input
-							class="text-sm w-full bg-transparent outline-hidden outline-none"
+							class="text-sm w-full bg-transparent outline-hidden outline-none font-normal text-gray-900 dark:text-gray-100"
 							type="number"
 							aria-label={$i18n.t(
 								'settings.personal.general.parameters.contextCompactionThreshold.label'
@@ -243,11 +243,11 @@
 			className="inline-tooltip"
 		>
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.functionCalling.label')}
 				</div>
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition"
+					class="p-1 px-3 text-xs flex rounded-sm transition font-normal text-gray-900 dark:text-gray-100"
 					on:click={() => {
 						if ((params?.function_calling ?? null) === null) {
 							params.function_calling = 'native';
@@ -278,11 +278,11 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.reasoningTags.label')}
 				</div>
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						if ((params?.reasoning_tags ?? null) === null) {
@@ -313,7 +313,7 @@
 			<div class="flex mt-0.5 space-x-2">
 				<div class=" flex-1">
 					<input
-						class="text-sm w-full bg-transparent outline-hidden outline-none"
+						class="text-sm w-full bg-transparent outline-hidden outline-none font-normal text-gray-900 dark:text-gray-100"
 						type="text"
 						aria-label={$i18n.t('Start Tag')}
 						placeholder={$i18n.t('Start Tag')}
@@ -324,7 +324,7 @@
 
 				<div class=" flex-1">
 					<input
-						class="text-sm w-full bg-transparent outline-hidden outline-none"
+						class="text-sm w-full bg-transparent outline-hidden outline-none font-normal text-gray-900 dark:text-gray-100"
 						type="text"
 						aria-label={$i18n.t('End Tag')}
 						placeholder={$i18n.t('End Tag')}
@@ -343,12 +343,12 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.seed.label')}
 				</div>
 
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.seed = (params?.seed ?? null) === null ? 0 : null;
@@ -367,7 +367,7 @@
 			<div class="flex mt-0.5 space-x-2">
 				<div class=" flex-1">
 					<input
-						class="text-sm w-full bg-transparent outline-hidden outline-none"
+						class="text-sm w-full bg-transparent outline-hidden outline-none font-normal text-gray-900 dark:text-gray-100"
 						type="number"
 						aria-label={$i18n.t('settings.personal.general.parameters.seed.label')}
 						placeholder={$i18n.t('Enter Seed')}
@@ -387,12 +387,12 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.stopSequence.label')}
 				</div>
 
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.stop = (params?.stop ?? null) === null ? '' : null;
@@ -411,7 +411,7 @@
 			<div class="flex mt-0.5 space-x-2">
 				<div class=" flex-1">
 					<input
-						class="text-sm w-full bg-transparent outline-hidden outline-none"
+						class="text-sm w-full bg-transparent outline-hidden outline-none font-normal text-gray-900 dark:text-gray-100"
 						type="text"
 						aria-label={$i18n.t('settings.personal.general.parameters.stopSequence.label')}
 						placeholder={$i18n.t('Enter stop sequence')}
@@ -430,11 +430,11 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.temperature.label')}
 				</div>
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.temperature = (params?.temperature ?? null) === null ? 0.8 : null;
@@ -467,11 +467,11 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.reasoningEffort.label')}
 				</div>
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.reasoning_effort = (params?.reasoning_effort ?? null) === null ? 'medium' : null;
@@ -490,7 +490,7 @@
 			<div class="flex mt-0.5 space-x-2">
 				<div class=" flex-1">
 					<input
-						class="text-sm w-full bg-transparent outline-hidden outline-none"
+						class="text-sm w-full bg-transparent outline-hidden outline-none font-normal text-gray-900 dark:text-gray-100"
 						type="text"
 						aria-label={$i18n.t('settings.personal.general.parameters.reasoningEffort.label')}
 						placeholder={$i18n.t('Enter reasoning effort')}
@@ -511,11 +511,11 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.logitBias.label')}
 				</div>
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.logit_bias = (params?.logit_bias ?? null) === null ? '' : null;
@@ -534,7 +534,7 @@
 			<div class="flex mt-0.5 space-x-2">
 				<div class=" flex-1">
 					<input
-						class="text-sm w-full bg-transparent outline-hidden outline-none"
+						class="text-sm w-full bg-transparent outline-hidden outline-none font-normal text-gray-900 dark:text-gray-100"
 						type="text"
 						aria-label={$i18n.t('settings.personal.general.parameters.logitBias.label')}
 						placeholder={$i18n.t(
@@ -557,12 +557,12 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.maxTokens.label')}
 				</div>
 
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.max_tokens = (params?.max_tokens ?? null) === null ? 128 : null;
@@ -599,11 +599,11 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.topK.label')}
 				</div>
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.top_k = (params?.top_k ?? null) === null ? 40 : null;
@@ -657,12 +657,12 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.topP.label')}
 				</div>
 
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.top_p = (params?.top_p ?? null) === null ? 0.9 : null;
@@ -697,11 +697,11 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.minP.label')}
 				</div>
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.min_p = (params?.min_p ?? null) === null ? 0.0 : null;
@@ -736,12 +736,12 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.frequencyPenalty.label')}
 				</div>
 
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.frequency_penalty = (params?.frequency_penalty ?? null) === null ? 1.1 : null;
@@ -776,12 +776,12 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.presencePenalty.label')}
 				</div>
 
 				<button
-					class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none"
+					class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.presence_penalty = (params?.presence_penalty ?? null) === null ? 0.0 : null;
@@ -814,11 +814,11 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.mirostat.label')}
 				</div>
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.mirostat = (params?.mirostat ?? null) === null ? 0 : null;
@@ -854,11 +854,11 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.mirostatEta.label')}
 				</div>
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.mirostat_eta = (params?.mirostat_eta ?? null) === null ? 0.1 : null;
@@ -893,12 +893,12 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.mirostatTau.label')}
 				</div>
 
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.mirostat_tau = (params?.mirostat_tau ?? null) === null ? 5.0 : null;
@@ -931,12 +931,12 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.repeatLastN.label')}
 				</div>
 
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.repeat_last_n = (params?.repeat_last_n ?? null) === null ? 64 : null;
@@ -972,12 +972,12 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.tfsZ.label')}
 				</div>
 
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.tfs_z = (params?.tfs_z ?? null) === null ? 1 : null;
@@ -1012,12 +1012,12 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.repeatPenalty.label')}
 				</div>
 
 				<button
-					class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none"
+					class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.repeat_penalty = (params?.repeat_penalty ?? null) === null ? 1.1 : null;
@@ -1053,11 +1053,11 @@
 				className="inline-tooltip"
 			>
 				<div class="flex w-full justify-between">
-					<div class=" self-center text-xs">
+					<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 						{$i18n.t('settings.personal.general.parameters.useMmap.label')}
 					</div>
 					<button
-						class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+						class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 						type="button"
 						on:click={() => {
 							params.use_mmap = (params?.use_mmap ?? null) === null ? true : null;
@@ -1096,12 +1096,12 @@
 				className="inline-tooltip"
 			>
 				<div class="flex w-full justify-between">
-					<div class=" self-center text-xs">
+					<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 						{$i18n.t('settings.personal.general.parameters.useMlock.label')}
 					</div>
 
 					<button
-						class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+						class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 						type="button"
 						on:click={() => {
 							params.use_mlock = (params?.use_mlock ?? null) === null ? true : null;
@@ -1140,13 +1140,13 @@
 			className="inline-tooltip"
 		>
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.think.label')} ({$i18n.t(
 						'settings.personal.general.parameters.ollama.label'
 					)})
 				</div>
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition"
+					class="p-1 px-3 text-xs flex rounded-sm transition font-normal text-gray-900 dark:text-gray-100"
 					on:click={() => {
 						if ((params?.think ?? null) === null) {
 							params.think = true;
@@ -1177,7 +1177,7 @@
 			<div class="flex mt-0.5 space-x-2">
 				<div class=" flex-1">
 					<input
-						class="text-sm w-full bg-transparent outline-hidden outline-none"
+						class="text-sm w-full bg-transparent outline-hidden outline-none font-normal text-gray-900 dark:text-gray-100"
 						type="text"
 						aria-label={`${$i18n.t('settings.personal.general.parameters.think.label')} (${$i18n.t('settings.personal.general.parameters.ollama.label')})`}
 						placeholder={$i18n.t("e.g. 'low', 'medium', 'high'")}
@@ -1196,13 +1196,13 @@
 			className="inline-tooltip"
 		>
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.format.label')} ({$i18n.t(
 						'settings.personal.general.parameters.ollama.label'
 					)})
 				</div>
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition"
+					class="p-1 px-3 text-xs flex rounded-sm transition font-normal text-gray-900 dark:text-gray-100"
 					on:click={() => {
 						params.format = (params?.format ?? null) === null ? 'json' : null;
 					}}
@@ -1238,14 +1238,14 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.numKeep.label')} ({$i18n.t(
 						'settings.personal.general.parameters.ollama.label'
 					)})
 				</div>
 
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.num_keep = (params?.num_keep ?? null) === null ? 24 : null;
@@ -1280,14 +1280,14 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.numCtx.label')} ({$i18n.t(
 						'settings.personal.general.parameters.ollama.label'
 					)})
 				</div>
 
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.num_ctx = (params?.num_ctx ?? null) === null ? 2048 : null;
@@ -1324,14 +1324,14 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs">
+				<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 					{$i18n.t('settings.personal.general.parameters.numBatch.label')} ({$i18n.t(
 						'settings.personal.general.parameters.ollama.label'
 					)})
 				</div>
 
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
 						params.num_batch = (params?.num_batch ?? null) === null ? 512 : null;
@@ -1369,14 +1369,14 @@
 				className="inline-tooltip"
 			>
 				<div class="flex w-full justify-between">
-					<div class=" self-center text-xs">
+					<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 						{$i18n.t('settings.personal.general.parameters.numThread.label')} ({$i18n.t(
 							'settings.personal.general.parameters.ollama.label'
 						)})
 					</div>
 
 					<button
-						class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+						class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 						type="button"
 						on:click={() => {
 							params.num_thread = (params?.num_thread ?? null) === null ? 2 : null;
@@ -1412,14 +1412,14 @@
 				className="inline-tooltip"
 			>
 				<div class="flex w-full justify-between">
-					<div class=" self-center text-xs">
+					<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 						{$i18n.t('settings.personal.general.parameters.numGpu.label')} ({$i18n.t(
 							'settings.personal.general.parameters.ollama.label'
 						)})
 					</div>
 
 					<button
-						class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
+						class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 						type="button"
 						on:click={() => {
 							params.num_gpu = (params?.num_gpu ?? null) === null ? 0 : null;
@@ -1455,13 +1455,13 @@
 				className="inline-tooltip"
 			>
 				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs">
+					<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 						{$i18n.t('settings.personal.general.parameters.keepAlive.label')} ({$i18n.t(
 							'settings.personal.general.parameters.ollama.label'
 						)})
 					</div>
 					<button
-						class="p-1 px-3 text-xs flex rounded-sm transition"
+						class="p-1 px-3 text-xs flex rounded-sm transition font-normal text-gray-900 dark:text-gray-100"
 						on:click={() => {
 							params.keep_alive = (params?.keep_alive ?? null) === null ? '5m' : null;
 						}}
@@ -1479,7 +1479,7 @@
 			{#if (params?.keep_alive ?? null) !== null}
 				<div class="flex mt-0.5 space-x-2">
 					<input
-						class="w-full text-sm bg-transparent outline-hidden"
+						class="w-full text-sm bg-transparent outline-hidden font-normal text-gray-900 dark:text-gray-100"
 						type="text"
 						aria-label={`${$i18n.t('settings.personal.general.parameters.keepAlive.label')} (${$i18n.t('settings.personal.general.parameters.ollama.label')})`}
 						placeholder={$i18n.t("e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.")}
diff --git a/src/lib/components/chat/Settings/Advanced/CustomParams.svelte b/src/lib/components/chat/Settings/Advanced/CustomParams.svelte
index 1e0fb4f921..a76b199be0 100644
--- a/src/lib/components/chat/Settings/Advanced/CustomParams.svelte
+++ b/src/lib/components/chat/Settings/Advanced/CustomParams.svelte
@@ -71,14 +71,14 @@
 					: 'mb-1 grid grid-cols-[1fr_auto] items-center gap-y-0.5 py-0.5'}
 			>
 				<label class="min-w-0">
-					{#if compact}<span class="block text-xs text-gray-400 dark:text-gray-600"
+					{#if compact}<span class="block text-xs font-normal text-gray-600 dark:text-gray-400"
 							>{$i18n.t('Parameter')}</span
 						>{/if}
 					<input
 						type="text"
 						class={compact
-							? 'w-full min-w-0 bg-transparent py-1 text-[0.8125rem] text-gray-700 outline-none placeholder:text-gray-300 dark:text-gray-300 dark:placeholder:text-gray-700'
-							: 'min-w-0 w-full bg-transparent text-xs text-gray-400 dark:text-gray-600 outline-none'}
+							? 'w-full min-w-0 bg-transparent py-1 text-[0.8125rem] font-normal text-gray-900 outline-none placeholder:text-gray-300 dark:text-gray-100 dark:placeholder:text-gray-700'
+							: 'min-w-0 w-full bg-transparent text-xs font-normal text-gray-900 dark:text-gray-100 outline-none'}
 						aria-label={$i18n.t('Custom Parameter Name')}
 						list={`${id}-names`}
 						autocomplete="off"
@@ -99,14 +99,14 @@
 					/>
 				</label>
 				<label class={compact ? 'min-w-0' : 'order-last col-span-2'}>
-					{#if compact}<span class="block text-xs text-gray-400 dark:text-gray-600"
+					{#if compact}<span class="block text-xs font-normal text-gray-600 dark:text-gray-400"
 							>{$i18n.t('Value')}</span
 						>{/if}
 					<input
 						type="text"
 						class={compact
-							? 'w-full min-w-0 bg-transparent py-1 text-[0.8125rem] text-gray-700 outline-none placeholder:text-gray-300 dark:text-gray-300 dark:placeholder:text-gray-700'
-							: 'w-full min-w-0 bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none'}
+							? 'w-full min-w-0 bg-transparent py-1 text-[0.8125rem] font-normal text-gray-900 outline-none placeholder:text-gray-300 dark:text-gray-100 dark:placeholder:text-gray-700'
+							: 'w-full min-w-0 bg-transparent text-[0.8125rem] font-normal text-gray-900 dark:text-gray-100 outline-none'}
 						aria-label={$i18n.t('Custom Parameter Value')}
 						list={options.length ? `${id}-values-${index}` : undefined}
 						autocomplete="off"
diff --git a/src/lib/components/workspace/Models/ActionsSelector.svelte b/src/lib/components/workspace/Models/ActionsSelector.svelte
index c4f4aaee05..d7d94c5224 100644
--- a/src/lib/components/workspace/Models/ActionsSelector.svelte
+++ b/src/lib/components/workspace/Models/ActionsSelector.svelte
@@ -34,7 +34,9 @@
 {#if actions.length > 0}
 	<div>
 		<div class="flex w-full items-center gap-2 mb-1">
-			<div class=" self-center text-xs text-gray-500">{$i18n.t('Actions')}</div>
+			<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
+				{$i18n.t('Actions')}
+			</div>
 
 			{#if selectableActions.length > 0}
 				<TypeaheadSelector
@@ -77,7 +79,7 @@
 							/>
 						</div>
 
-						<div class=" py-0.5 text-xs capitalize">
+						<div class="py-0.5 text-xs capitalize font-normal text-gray-900 dark:text-gray-100">
 							<Tooltip
 								content={resolveLocalizedResource(action, $i18n.language, 'description') ||
 									action.id}
diff --git a/src/lib/components/workspace/Models/BuiltinTools.svelte b/src/lib/components/workspace/Models/BuiltinTools.svelte
index 6daa3fa496..e379d38946 100644
--- a/src/lib/components/workspace/Models/BuiltinTools.svelte
+++ b/src/lib/components/workspace/Models/BuiltinTools.svelte
@@ -95,7 +95,7 @@
 </script>
 
 <div>
-	<div class="mb-1.5 text-xs text-gray-400 dark:text-gray-600">
+	<div class="mb-1.5 text-xs font-normal text-gray-600 dark:text-gray-400">
 		{$i18n.t('settings.admin.models.builtinTools.title')}
 	</div>
 	<div class="grid grid-cols-1 gap-x-5 gap-y-1 sm:grid-cols-2 lg:grid-cols-3">
@@ -110,7 +110,7 @@
 				/>
 				<button
 					type="button"
-					class="min-w-0 cursor-pointer text-left text-xs text-gray-600 dark:text-gray-400"
+					class="min-w-0 cursor-pointer text-left text-xs font-normal text-gray-900 dark:text-gray-100"
 					on:click={() => setBuiltinTool(tool, builtinTools[tool] === false)}
 				>
 					<Tooltip
diff --git a/src/lib/components/workspace/Models/Capabilities.svelte b/src/lib/components/workspace/Models/Capabilities.svelte
index 70c0e4a044..9ca4410273 100644
--- a/src/lib/components/workspace/Models/Capabilities.svelte
+++ b/src/lib/components/workspace/Models/Capabilities.svelte
@@ -79,7 +79,7 @@
 </script>
 
 <div>
-	<div class="mb-1.5 text-xs text-gray-400 dark:text-gray-600">
+	<div class="mb-1.5 text-xs font-normal text-gray-600 dark:text-gray-400">
 		{$i18n.t('settings.admin.models.capabilities.title')}
 	</div>
 	<div class="grid grid-cols-1 gap-x-5 gap-y-1 sm:grid-cols-2 lg:grid-cols-3">
@@ -94,7 +94,7 @@
 				/>
 				<button
 					type="button"
-					class="min-w-0 cursor-pointer text-left text-xs text-gray-600 dark:text-gray-400"
+					class="min-w-0 cursor-pointer text-left text-xs font-normal text-gray-900 dark:text-gray-100"
 					on:click={() => setCapability(capability, !capabilities[capability])}
 				>
 					<Tooltip
diff --git a/src/lib/components/workspace/Models/DefaultFeatures.svelte b/src/lib/components/workspace/Models/DefaultFeatures.svelte
index f5dfdf460c..f132c839d4 100644
--- a/src/lib/components/workspace/Models/DefaultFeatures.svelte
+++ b/src/lib/components/workspace/Models/DefaultFeatures.svelte
@@ -43,7 +43,7 @@
 </script>
 
 <div>
-	<div class="mb-1.5 text-xs text-gray-400 dark:text-gray-600">
+	<div class="mb-1.5 text-xs font-normal text-gray-600 dark:text-gray-400">
 		{$i18n.t('settings.admin.models.defaultFeatures.title')}
 	</div>
 	<div class="grid grid-cols-1 gap-x-5 gap-y-1 sm:grid-cols-2 lg:grid-cols-3">
@@ -58,7 +58,7 @@
 				/>
 				<button
 					type="button"
-					class="min-w-0 cursor-pointer text-left text-xs text-gray-600 dark:text-gray-400"
+					class="min-w-0 cursor-pointer text-left text-xs font-normal text-gray-900 dark:text-gray-100"
 					on:click={() => setFeature(feature, !featureIds.includes(feature))}
 				>
 					<Tooltip
diff --git a/src/lib/components/workspace/Models/DefaultFiltersSelector.svelte b/src/lib/components/workspace/Models/DefaultFiltersSelector.svelte
index 23a5bcb1f4..409c980bfc 100644
--- a/src/lib/components/workspace/Models/DefaultFiltersSelector.svelte
+++ b/src/lib/components/workspace/Models/DefaultFiltersSelector.svelte
@@ -28,7 +28,9 @@
 
 <div>
 	<div class="flex w-full items-center gap-2 mb-1">
-		<div class=" self-center text-xs text-gray-500">{$i18n.t('Default Filters')}</div>
+		<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
+			{$i18n.t('Default Filters')}
+		</div>
 
 		{#if filters.length > 0}
 			<TypeaheadSelector
@@ -76,7 +78,7 @@
 							/>
 						</div>
 
-						<div class=" py-0.5 text-xs capitalize">
+						<div class="py-0.5 text-xs capitalize font-normal text-gray-900 dark:text-gray-100">
 							<Tooltip content={filter.meta?.description ?? filter.id}>
 								{filter.name}
 							</Tooltip>
diff --git a/src/lib/components/workspace/Models/FiltersSelector.svelte b/src/lib/components/workspace/Models/FiltersSelector.svelte
index 111c195fe3..853d7fb243 100644
--- a/src/lib/components/workspace/Models/FiltersSelector.svelte
+++ b/src/lib/components/workspace/Models/FiltersSelector.svelte
@@ -34,7 +34,9 @@
 {#if filters.length > 0}
 	<div>
 		<div class="flex w-full items-center gap-2 mb-1">
-			<div class=" self-center text-xs text-gray-500">{$i18n.t('Filters')}</div>
+			<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
+				{$i18n.t('Filters')}
+			</div>
 
 			{#if selectableFilters.length > 0}
 				<TypeaheadSelector
@@ -85,7 +87,7 @@
 							/>
 						</div>
 
-						<div class=" py-0.5 text-xs capitalize">
+						<div class="py-0.5 text-xs capitalize font-normal text-gray-900 dark:text-gray-100">
 							<Tooltip
 								content={resolveLocalizedResource(filter, $i18n.language, 'description') ||
 									filter.id}
diff --git a/src/lib/components/workspace/Models/Knowledge.svelte b/src/lib/components/workspace/Models/Knowledge.svelte
index 5148c92731..ed51e515cd 100644
--- a/src/lib/components/workspace/Models/Knowledge.svelte
+++ b/src/lib/components/workspace/Models/Knowledge.svelte
@@ -174,7 +174,7 @@
 		<div class="flex w-full items-center gap-2 mb-1">
 			<div class="min-w-0">
 				<slot name="label">
-					<div class=" self-center text-xs text-gray-500">
+					<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 						{$i18n.t('Knowledge')}
 					</div>
 				</slot>
@@ -228,7 +228,7 @@
 				{#each selectedItems as file, fileIdx}
 					<Tooltip content={file.description || file.name || file.id}>
 						<div
-							class="flex max-w-56 items-center gap-1.5 py-0.5 pr-2 text-xs text-gray-700 dark:text-gray-200"
+							class="flex max-w-56 items-center gap-1.5 py-0.5 pr-2 text-xs font-normal text-gray-900 dark:text-gray-100"
 						>
 							<button
 								type="button"
diff --git a/src/lib/components/workspace/Models/LocalizedPromptSuggestions.svelte b/src/lib/components/workspace/Models/LocalizedPromptSuggestions.svelte
index e854221d11..cf02fee0aa 100644
--- a/src/lib/components/workspace/Models/LocalizedPromptSuggestions.svelte
+++ b/src/lib/components/workspace/Models/LocalizedPromptSuggestions.svelte
@@ -60,7 +60,7 @@
 		<span
 			slot="label"
 			title={localeLabel}
-			class="flex flex-wrap items-center gap-x-3 gap-y-1 text-[0.6875rem] text-gray-400 dark:text-gray-600"
+			class="flex flex-wrap items-center gap-x-3 gap-y-1 text-[0.6875rem] text-gray-900 dark:text-gray-100"
 		>
 			{#if hasCustomLocalePrompts}
 				<button
diff --git a/src/lib/components/workspace/Models/ModelEditor.svelte b/src/lib/components/workspace/Models/ModelEditor.svelte
index 975de2bc40..334957ce10 100644
--- a/src/lib/components/workspace/Models/ModelEditor.svelte
+++ b/src/lib/components/workspace/Models/ModelEditor.svelte
@@ -46,6 +46,7 @@
 	import TerminalSelector from './TerminalSelector.svelte';
 	import TTSVoiceInput from './TTSVoiceInput.svelte';
 	import VoiceAvatarSettings from './VoiceAvatarSettings.svelte';
+	import Photo from '$lib/components/icons/Photo.svelte';
 	import {
 		avatarAssetIds,
 		type AnimationFiles,
@@ -118,6 +119,7 @@
 	let filesInputElement;
 	let inputFiles;
 
+	let showSystemPrompt = true;
 	let showAdvanced = false;
 	let showPreview = false;
 	let showAccessControlModal = false;
@@ -618,6 +620,7 @@
 			}
 
 			system = model?.params?.system ?? '';
+			showSystemPrompt = !system.trim();
 
 			params = { system: '', ...model?.params };
 			params.stop = params?.stop
@@ -724,6 +727,40 @@
 </script>
 
 {#if loaded}
+	<input
+		bind:this={backgroundInput}
+		type="file"
+		accept="image/png,image/jpeg,image/webp,image/gif"
+		hidden
+		on:change={async () => {
+			const selected = backgroundInput.files?.[0];
+			backgroundInput.value = '';
+			if (!selected || readOnly || loading) return;
+			loading = true;
+			const candidate = URL.createObjectURL(selected);
+			try {
+				if (!['image/png', 'image/jpeg', 'image/webp', 'image/gif'].includes(selected.type)) {
+					throw new Error($i18n.t('Background image must be PNG, JPEG, WebP, or GIF.'));
+				}
+				if (selected.size > 5 * 1024 * 1024)
+					throw new Error($i18n.t('Background image must be at most 5 MiB.'));
+				const image = new Image();
+				image.src = candidate;
+				await image.decode();
+				if (image.naturalWidth * image.naturalHeight > 25_000_000) {
+					throw new Error($i18n.t('Background image must be at most 25 megapixels.'));
+				}
+				clearBackgroundPreview();
+				backgroundPreview = candidate;
+				backgroundFile = selected;
+			} catch (error) {
+				URL.revokeObjectURL(candidate);
+				toast.error(error instanceof Error ? error.message : $i18n.t('Invalid background image.'));
+			} finally {
+				loading = false;
+			}
+		}}
+	/>
 	<ConfirmDialog
 		bind:show={showDiscard}
 		title={$i18n.t('Discard unsaved changes?')}
@@ -904,12 +941,78 @@
 				>
 					<div class="w-full px-1">
 						<fieldset disabled={readOnly} class="flex min-w-0 w-full flex-col gap-3">
+							<div
+								class="group/header relative mt-2 w-full transition-[height] duration-200 motion-reduce:transition-none {backgroundPreview ||
+								info.meta.background_image_url
+									? 'h-36 sm:h-48'
+									: 'h-20'}"
+							>
+								{#if backgroundPreview || info.meta.background_image_url}
+									<img
+										src={backgroundPreview ?? info.meta.background_image_url}
+										alt={$i18n.t('Background image preview')}
+										class="[mask-image:linear-gradient(to_bottom,black_15%,rgba(0,0,0,0.65)_40%,transparent_85%)] absolute inset-0 h-full w-full rounded-xl object-cover"
+									/>
+								{:else}
+									<div
+										aria-hidden="true"
+										class="[mask-image:linear-gradient(to_bottom,black_15%,rgba(0,0,0,0.65)_40%,transparent_85%)] absolute inset-0 h-full w-full rounded-xl bg-gray-100 dark:bg-gray-850"
+									></div>
+								{/if}
+								{#if !readOnly}
+									<div
+										class="[@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/header:opacity-100 [@media(hover:hover)]:group-focus-within/header:opacity-100 absolute end-3 flex items-center gap-1 text-xs {backgroundPreview ||
+										info.meta.background_image_url
+											? 'bottom-9'
+											: 'bottom-5 sm:bottom-3'}"
+									>
+										{#if loading}<Spinner />{/if}
+										{#if backgroundPreview || info.meta.background_image_url}
+											<button
+												type="button"
+												class="rounded-md px-2 py-1 text-xs font-normal text-gray-500 transition hover:text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:opacity-50 dark:text-gray-400 dark:hover:text-white"
+												disabled={loading}
+												title={$i18n.t('PNG, JPEG, WebP, or GIF. Up to 5 MiB and 25 megapixels.')}
+												on:click={() => backgroundInput.click()}
+												>{$i18n.t('Change background')}</button
+											>
+											<button
+												type="button"
+												class="rounded-md px-2 py-1 text-xs font-normal text-gray-500 transition hover:text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:opacity-50 dark:text-gray-400 dark:hover:text-white"
+												disabled={loading}
+												on:click={() => {
+													clearBackgroundPreview();
+													backgroundFile = null;
+													info.meta.background_image_url = null;
+												}}>{$i18n.t('Remove')}</button
+											>
+										{:else}
+											<button
+												type="button"
+												class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-gray-500 transition hover:text-gray-700 disabled:opacity-50 dark:text-gray-400 dark:hover:text-gray-300"
+												disabled={loading}
+												title={$i18n.t('PNG, JPEG, WebP, or GIF. Up to 5 MiB and 25 megapixels.')}
+												on:click={() => backgroundInput.click()}
+											>
+												<Photo />
+												{$i18n.t('Add background')}
+											</button>
+										{/if}
+									</div>
+								{/if}
+							</div>
+
 							<div class="flex w-full min-w-0 items-center gap-3 py-0.5">
-								<div class="flex min-w-0 flex-1 items-center gap-3">
+								<div
+									class="relative flex min-w-0 flex-1 items-center gap-3 px-4 pb-2 {backgroundPreview ||
+									info.meta.background_image_url
+										? '-mt-14 sm:-mt-16'
+										: '-mt-9'}"
+								>
 									<!-- LICENSE covers this Open WebUI fallback logo.
 									Do not alter, remove, obscure, or replace it except as LICENSE permits:
 									https://docs.openwebui.com/license. -->
-									<div class="group relative size-12 shrink-0 md:size-14">
+									<div class="group relative size-11 shrink-0">
 										<button
 											class="group relative flex size-full items-center overflow-hidden rounded-xl {info
 												.meta.profile_image_url !== `${WEBUI_BASE_URL}/static/favicon.png`
@@ -976,7 +1079,7 @@
 										{/if}
 									</div>
 
-									<div class="min-w-0 flex-1">
+									<div class="min-w-0 w-full flex-1">
 										<div class="flex min-w-0 items-center gap-2">
 											{#if editingLocale}
 												<input
@@ -1024,515 +1127,491 @@
 								</div>
 							</div>
 
-							{#if preset}
+							<div class="flex min-w-0 flex-col gap-3 px-4">
 								<div>
-									<div class="mb-1 text-xs text-gray-400 dark:text-gray-600">
-										{$i18n.t('Base Model (From)')}
-									</div>
-
-									<ModelSelector
-										id="workspace-base-model"
-										placeholder={$i18n.t('Select a base model (e.g. llama3, gpt-4o)')}
-										searchPlaceholder={$i18n.t('Search a model')}
-										items={getBaseModelItems($models)}
-										triggerClassName="text-xs"
-										selectionOnly
-										includeHidden={$user?.role === 'admin'}
-										bind:value={info.base_model_id}
-									/>
-								</div>
-							{/if}
-
-							{#if preset || info.base_model_id}
-								<div class="space-y-2">
-									<div class="flex items-center justify-between gap-3">
-										<span class="text-xs text-gray-500">{$i18n.t('Background Image')}</span>
-										<div class="flex gap-3 text-xs">
-											<button
-												type="button"
-												disabled={loading}
-												on:click={() => backgroundInput.click()}
-											>
-												{backgroundPreview || info.meta.background_image_url
-													? $i18n.t('Replace')
-													: $i18n.t('Upload')}
-											</button>
-											{#if backgroundPreview || info.meta.background_image_url}
+									<div class="mb-1 flex w-full items-center justify-between">
+										{#if editingLocale}
+											<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
+												{$i18n.t('Description ({{language}})', {
+													language: editingLocaleLabel || editingLocale
+												})}
+											</div>
+											<div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
 												<button
 													type="button"
-													disabled={loading}
-													on:click={() => {
-														clearBackgroundPreview();
-														backgroundFile = null;
-														info.meta.background_image_url = null;
-													}}>{$i18n.t('Reset')}</button
+													on:click={() =>
+														setLocalizedField('description', info.meta.description ?? '')}
 												>
-											{/if}
-										</div>
-									</div>
-									<input
-										bind:this={backgroundInput}
-										type="file"
-										accept="image/png,image/jpeg,image/webp,image/gif"
-										hidden
-										on:change={async () => {
-											const selected = backgroundInput.files?.[0];
-											backgroundInput.value = '';
-											if (!selected || loading) return;
-											loading = true;
-											const candidate = URL.createObjectURL(selected);
-											try {
-												if (
-													!['image/png', 'image/jpeg', 'image/webp', 'image/gif'].includes(
-														selected.type
-													)
-												) {
-													throw new Error(
-														$i18n.t('Background image must be PNG, JPEG, WebP, or GIF.')
-													);
-												}
-												if (selected.size > 5 * 1024 * 1024)
-													throw new Error($i18n.t('Background image must be at most 5 MiB.'));
-												const image = new Image();
-												image.src = candidate;
-												await image.decode();
-												if (image.naturalWidth * image.naturalHeight > 25_000_000) {
-													throw new Error(
-														$i18n.t('Background image must be at most 25 megapixels.')
-													);
-												}
-												clearBackgroundPreview();
-												backgroundPreview = candidate;
-												backgroundFile = selected;
-											} catch (error) {
-												URL.revokeObjectURL(candidate);
-												toast.error(
-													error instanceof Error
-														? error.message
-														: $i18n.t('Invalid background image.')
-												);
-											} finally {
-												loading = false;
-											}
-										}}
-									/>
-									{#if backgroundPreview || info.meta.background_image_url}
-										<img
-											src={backgroundPreview ?? info.meta.background_image_url}
-											alt={$i18n.t('Background image preview')}
-											class="h-28 w-full rounded-lg object-cover"
-										/>
-									{/if}
-									<p class="text-xs text-gray-400">
-										{$i18n.t('PNG, JPEG, WebP, or GIF. Up to 5 MiB and 25 megapixels.')}
-									</p>
-								</div>
-							{/if}
-
-							<div>
-								<div class="mb-1 flex w-full items-center justify-between">
-									<div class="self-center text-xs text-gray-400 dark:text-gray-600">
-										{editingLocale
-											? $i18n.t('Description ({{language}})', {
-													language: editingLocaleLabel || editingLocale
-												})
-											: $i18n.t('Description')}
+													{$i18n.t('Copy default')}
+												</button>
+												{#if localizedField('description')}
+													<button type="button" on:click={() => clearLocalizedField('description')}>
+														{$i18n.t('Use default')}
+													</button>
+												{/if}
+											</div>
+										{:else}
+											<button
+												class="flex w-full items-center justify-between gap-3 rounded-sm text-start text-xs font-normal text-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+												type="button"
+												aria-pressed={enableDescription ? 'true' : 'false'}
+												aria-label={enableDescription
+													? $i18n.t('Custom description enabled')
+													: $i18n.t('Default description enabled')}
+												on:click={() => {
+													enableDescription = !enableDescription;
+												}}
+											>
+												<span class="font-normal text-gray-600 dark:text-gray-400"
+													>{$i18n.t('Description')}</span
+												>
+												{#if !enableDescription}
+													<span>{$i18n.t('Default')}</span>
+												{:else}
+													<span>{$i18n.t('Custom')}</span>
+												{/if}
+											</button>
+										{/if}
 									</div>
 
 									{#if editingLocale}
-										<div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
-											<button
-												type="button"
-												on:click={() =>
-													setLocalizedField('description', info.meta.description ?? '')}
-											>
-												{$i18n.t('Copy default')}
-											</button>
-											{#if localizedField('description')}
-												<button type="button" on:click={() => clearLocalizedField('description')}>
-													{$i18n.t('Use default')}
-												</button>
-											{/if}
-										</div>
-									{:else}
-										<button
-											class="text-xs text-gray-500 transition hover:text-gray-700 dark:hover:text-gray-300"
-											type="button"
-											aria-pressed={enableDescription ? 'true' : 'false'}
-											aria-label={enableDescription
-												? $i18n.t('Custom description enabled')
-												: $i18n.t('Default description enabled')}
-											on:click={() => {
-												enableDescription = !enableDescription;
-											}}
-										>
-											{#if !enableDescription}
-												<span>{$i18n.t('Default')}</span>
-											{:else}
-												<span>{$i18n.t('Custom')}</span>
-											{/if}
-										</button>
+										<Textarea
+											className="w-full resize-none overflow-y-hidden bg-transparent py-1 text-[0.8125rem] outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700 font-normal text-gray-900 dark:text-gray-100"
+											placeholder={info.meta.description ||
+												$i18n.t('Add a short description about what this model does')}
+											minSize={32}
+											value={localizedField('description')}
+											onInput={(e) =>
+												setLocalizedField(
+													'description',
+													(e.currentTarget as HTMLTextAreaElement).value
+												)}
+										/>
+									{:else if enableDescription}
+										<Textarea
+											className="w-full resize-none overflow-y-hidden bg-transparent py-1 text-[0.8125rem] outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700 font-normal text-gray-900 dark:text-gray-100"
+											placeholder={$i18n.t('Add a short description about what this model does')}
+											minSize={32}
+											bind:value={info.meta.description}
+										/>
 									{/if}
 								</div>
 
-								{#if editingLocale}
-									<Textarea
-										className="w-full resize-none overflow-y-hidden bg-transparent py-1 text-[0.8125rem] text-gray-700 outline-hidden placeholder:text-gray-300 dark:text-gray-300 dark:placeholder:text-gray-700"
-										placeholder={info.meta.description ||
-											$i18n.t('Add a short description about what this model does')}
-										minSize={32}
-										value={localizedField('description')}
-										onInput={(e) =>
-											setLocalizedField(
-												'description',
-												(e.currentTarget as HTMLTextAreaElement).value
-											)}
-									/>
-								{:else if enableDescription}
-									<Textarea
-										className="w-full resize-none overflow-y-hidden bg-transparent py-1 text-[0.8125rem] text-gray-700 outline-hidden placeholder:text-gray-300 dark:text-gray-300 dark:placeholder:text-gray-700"
-										placeholder={$i18n.t('Add a short description about what this model does')}
-										minSize={32}
-										bind:value={info.meta.description}
-									/>
-								{/if}
-							</div>
+								<div class="flex min-w-0 flex-col gap-2">
+									{#if preset}
+										<div
+											class="grid min-w-0 gap-2 sm:grid-cols-[8rem_minmax(0,1fr)] sm:items-center sm:gap-4"
+										>
+											<div class="text-xs font-normal text-gray-600 dark:text-gray-400">
+												{$i18n.t('Base Model (From)')}
+											</div>
 
-							<div class="w-full max-w-full">
-								<Tags
-									tags={info?.meta?.tags ?? []}
-									{suggestionTags}
-									on:delete={(e) => {
-										const tagName = e.detail;
-										info.meta.tags = info.meta.tags.filter((tag) => tag.name !== tagName);
-									}}
-									on:add={(e) => {
-										const tagName = e.detail;
-										if (!(info?.meta?.tags ?? null)) {
-											info.meta.tags = [{ name: tagName }];
-										} else {
-											info.meta.tags = [...info.meta.tags, { name: tagName }];
-										}
-									}}
-								/>
+											<div class="min-w-0">
+												<ModelSelector
+													id="workspace-base-model"
+													placeholder={$i18n.t('Select a base model (e.g. llama3, gpt-4o)')}
+													searchPlaceholder={$i18n.t('Search a model')}
+													items={getBaseModelItems($models)}
+													triggerClassName="text-xs font-normal text-gray-900 dark:text-gray-100"
+													selectionOnly
+													includeHidden={$user?.role === 'admin'}
+													bind:value={info.base_model_id}
+												/>
+											</div>
+										</div>
+									{/if}
+
+									<div
+										class="grid min-w-0 gap-2 sm:grid-cols-[8rem_minmax(0,1fr)] sm:items-start sm:gap-4"
+									>
+										<div class="pt-1 text-xs font-normal text-gray-600 dark:text-gray-400">
+											{$i18n.t('Tags')}
+										</div>
+										<div class="min-w-0">
+											<Tags
+												tags={info?.meta?.tags ?? []}
+												{suggestionTags}
+												on:delete={(e) => {
+													const tagName = e.detail;
+													info.meta.tags = info.meta.tags.filter((tag) => tag.name !== tagName);
+												}}
+												on:add={(e) => {
+													const tagName = e.detail;
+													if (!(info?.meta?.tags ?? null)) {
+														info.meta.tags = [{ name: tagName }];
+													} else {
+														info.meta.tags = [...info.meta.tags, { name: tagName }];
+													}
+												}}
+											/>
+										</div>
+									</div>
+								</div>
 							</div>
 						</fieldset>
 
-						<section class="mt-2.5">
-							<div class="mb-2 text-xs text-gray-400 dark:text-gray-600">
-								{$i18n.t('Model Params')}
-							</div>
-
-							<div class="space-y-2.5">
-								<fieldset disabled={readOnly} class="min-w-0">
-									<div class="mb-1 text-xs text-gray-600 dark:text-gray-400">
+						<div class="px-4">
+							<section class="mt-4">
+								<div class="space-y-2">
+									<div class="text-xs font-normal text-gray-600 dark:text-gray-400">
 										{$i18n.t('System Prompt')}
 									</div>
-									<div>
-										<Textarea
-											className="min-h-12 w-full resize-none overflow-y-hidden bg-transparent py-1 text-[0.8125rem] text-gray-700 outline-hidden placeholder:text-gray-300 dark:text-gray-300 dark:placeholder:text-gray-700"
-											placeholder={$i18n.t(
-												'Write your model system prompt content here\ne.g.) You are Mario from Super Mario Bros, acting as an assistant.'
-											)}
-											rows={2}
-											minSize={48}
-											bind:value={system}
-										/>
-									</div>
-									{#if chatVariablesPreview.fields.length > 0 || chatVariablesPreview.userFields.length > 0 || chatVariablesPreview.warnings.length > 0}
-										<div class="mt-2 border-t border-gray-100/60 pt-2 dark:border-gray-850/60">
-											<div class="mb-1.5 flex items-center justify-between gap-2">
-												<div class="text-xs text-gray-500 dark:text-gray-400">
-													{$i18n.t('Detected Variables')}
-												</div>
-												{#if chatVariablesPreview.fields.length + chatVariablesPreview.userFields.length > 0}
-													<div class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
-														{chatVariablesPreview.fields.length +
-															chatVariablesPreview.userFields.length}
-													</div>
-												{/if}
+
+									{#if showSystemPrompt || !system.trim()}
+										<fieldset disabled={readOnly} class="min-w-0">
+											<div>
+												<Textarea
+													className="min-h-12 w-full resize-none overflow-y-hidden bg-transparent py-1 text-[0.8125rem] outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700 font-normal text-gray-900 dark:text-gray-100"
+													placeholder={$i18n.t(
+														'Write your model system prompt content here\ne.g.) You are Mario from Super Mario Bros, acting as an assistant.'
+													)}
+													rows={2}
+													minSize={48}
+													bind:value={system}
+												/>
 											</div>
-
-											{#if chatVariablesPreview.fields.length > 0}
-												<div class="mb-1 text-[0.6875rem] text-gray-400 dark:text-gray-600">
-													{$i18n.t('Chat Variables')}
-												</div>
-												<div class="flex flex-wrap gap-x-3 gap-y-1.5 text-xs">
-													{#each chatVariablesPreview.fields as field}
-														<div class="flex items-center gap-1 text-gray-600 dark:text-gray-300">
-															<span class="font-medium">{field.key}</span>
-															<span class="text-gray-400 dark:text-gray-600">{field.type}</span>
-															{#if field.required}
-																<span class="text-amber-600 dark:text-amber-400">required</span>
-															{/if}
+											{#if chatVariablesPreview.fields.length > 0 || chatVariablesPreview.userFields.length > 0 || chatVariablesPreview.warnings.length > 0}
+												<div class="mt-2 border-t border-gray-100/60 pt-2 dark:border-gray-850/60">
+													<div class="mb-1.5 flex items-center justify-between gap-2">
+														<div class="text-xs font-normal text-gray-600 dark:text-gray-400">
+															{$i18n.t('Detected Variables')}
 														</div>
-													{/each}
-												</div>
-											{/if}
+														{#if chatVariablesPreview.fields.length + chatVariablesPreview.userFields.length > 0}
+															<div class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
+																{chatVariablesPreview.fields.length +
+																	chatVariablesPreview.userFields.length}
+															</div>
+														{/if}
+													</div>
 
-											{#if chatVariablesPreview.userFields.length > 0}
-												<div class="mb-1 mt-2 text-[0.6875rem] text-gray-400 dark:text-gray-600">
-													{$i18n.t('User Variables')}
-												</div>
-												<div class="flex flex-wrap gap-x-3 gap-y-1.5 text-xs">
-													{#each chatVariablesPreview.userFields as field}
-														<div class="flex items-center gap-1 text-gray-600 dark:text-gray-300">
-															<span class="font-medium">{field.key}</span>
+													{#if chatVariablesPreview.fields.length > 0}
+														<div
+															class="mb-1 text-[0.6875rem] font-normal text-gray-600 dark:text-gray-400"
+														>
+															{$i18n.t('Chat Variables')}
 														</div>
-													{/each}
+														<div class="flex flex-wrap gap-x-3 gap-y-1.5 text-xs">
+															{#each chatVariablesPreview.fields as field}
+																<div
+																	class="flex items-center gap-1 font-normal text-gray-900 dark:text-gray-100"
+																>
+																	<span class="font-medium">{field.key}</span>
+																	<span class="text-gray-400 dark:text-gray-600">{field.type}</span>
+																	{#if field.required}
+																		<span class="text-amber-600 dark:text-amber-400">required</span>
+																	{/if}
+																</div>
+															{/each}
+														</div>
+													{/if}
+
+													{#if chatVariablesPreview.userFields.length > 0}
+														<div
+															class="mb-1 mt-2 text-[0.6875rem] font-normal text-gray-600 dark:text-gray-400"
+														>
+															{$i18n.t('User Variables')}
+														</div>
+														<div class="flex flex-wrap gap-x-3 gap-y-1.5 text-xs">
+															{#each chatVariablesPreview.userFields as field}
+																<div
+																	class="flex items-center gap-1 font-normal text-gray-900 dark:text-gray-100"
+																>
+																	<span class="font-medium">{field.key}</span>
+																</div>
+															{/each}
+														</div>
+													{/if}
+
+													{#if chatVariablesPreview.warnings.length > 0}
+														<div
+															class="mt-2 flex flex-col gap-1 text-xs text-amber-600 dark:text-amber-400"
+														>
+															{#each chatVariablesPreview.warnings as warning}
+																<div>{warning}</div>
+															{/each}
+														</div>
+													{/if}
 												</div>
 											{/if}
-
-											{#if chatVariablesPreview.warnings.length > 0}
-												<div
-													class="mt-2 flex flex-col gap-1 text-xs text-amber-600 dark:text-amber-400"
-												>
-													{#each chatVariablesPreview.warnings as warning}
-														<div>{warning}</div>
-													{/each}
-												</div>
-											{/if}
-										</div>
-									{/if}
-								</fieldset>
-
-								<div class="flex h-7 w-full justify-between">
-									<div class="self-center text-xs text-gray-600 dark:text-gray-400">
-										{$i18n.t('Advanced Params')}
-									</div>
-
-									<button
-										class="text-xs text-gray-500 transition hover:text-gray-700 dark:hover:text-gray-300"
-										type="button"
-										on:click={() => {
-											showAdvanced = !showAdvanced;
-										}}
-									>
-										{#if showAdvanced}
-											<span>{$i18n.t('Hide')}</span>
-										{:else}
-											<span>{$i18n.t('Show')}</span>
-										{/if}
-									</button>
-								</div>
-
-								{#if showAdvanced}
-									<fieldset disabled={readOnly} class="min-w-0 my-2">
-										<AdvancedParams admin={true} custom={true} layout="grid" bind:params />
-									</fieldset>
-								{/if}
-								{#if admin}
-									<fieldset disabled={readOnly} class="min-w-0">
-										<ModelControls bind:controls={params.model_controls} />
-									</fieldset>
-								{/if}
-							</div>
-						</section>
-
-						<fieldset disabled={readOnly} class="min-w-0">
-							<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
-
-							<section class="my-2.5">
-								<div class="flex w-full items-center justify-between">
-									<div class="self-center text-xs text-gray-400 dark:text-gray-600">
-										{$i18n.t('Prompts')}
-									</div>
-
-									{#if !editingLocale}
+										</fieldset>
+									{:else}
 										<button
-											class="text-xs text-gray-500 transition hover:text-gray-700 dark:hover:text-gray-300"
 											type="button"
+											aria-label={$i18n.t('System Prompt')}
+											aria-expanded={false}
 											on:click={() => {
-												if ((info?.meta?.suggestion_prompts ?? null) === null) {
-													info.meta.suggestion_prompts = [{ content: '', title: ['', ''] }];
-												} else {
-													info.meta.suggestion_prompts = null;
-												}
+												showSystemPrompt = true;
 											}}
+											class="w-full cursor-text text-start line-clamp-5 whitespace-pre-wrap break-words text-[0.8125rem] font-normal text-gray-900 dark:text-gray-100"
 										>
-											{#if (info?.meta?.suggestion_prompts ?? null) === null}
-												<span>{$i18n.t('Default')}</span>
-											{:else}
-												<span>{$i18n.t('Custom')}</span>
-											{/if}
+											{system}
+										</button>
+									{/if}
+									{#if system.trim()}
+										<button
+											class="block text-xs text-gray-500 transition hover:text-gray-700 dark:hover:text-gray-300"
+											type="button"
+											aria-expanded={showSystemPrompt}
+											on:click={() => {
+												showSystemPrompt = !showSystemPrompt;
+											}}
+										>
+											{showSystemPrompt ? $i18n.t('Show less') : $i18n.t('Show more')}
 										</button>
 									{/if}
-								</div>
 
-								{#if editingLocale}
-									<LocalizedPromptSuggestions
-										promptSuggestions={info.meta.suggestion_prompts ?? []}
-										bind:localizedPromptSuggestions={info.meta.i18n}
-										locale={editingLocale}
-										localeLabel={editingLocaleLabel}
-									/>
-								{:else if info?.meta?.suggestion_prompts}
-									<PromptSuggestions bind:promptSuggestions={info.meta.suggestion_prompts} />
-								{/if}
+									<button
+										type="button"
+										class="group flex h-7 w-full items-center justify-between gap-3 rounded-sm text-start text-xs focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+										aria-expanded={showAdvanced}
+										on:click={() => (showAdvanced = !showAdvanced)}
+									>
+										<span class="font-normal text-gray-600 dark:text-gray-400"
+											>{$i18n.t('Advanced Params')}</span
+										>
+										<span
+											aria-hidden="true"
+											class="text-gray-500 transition group-hover:text-gray-700 dark:group-hover:text-gray-300"
+											>{showAdvanced ? $i18n.t('Hide') : $i18n.t('Show')}</span
+										>
+									</button>
+
+									{#if showAdvanced}
+										<fieldset disabled={readOnly} class="min-w-0 my-2">
+											<AdvancedParams admin={true} custom={true} layout="grid" bind:params />
+										</fieldset>
+									{/if}
+									{#if admin}
+										<fieldset disabled={readOnly} class="min-w-0">
+											<ModelControls bind:controls={params.model_controls} />
+										</fieldset>
+									{/if}
+								</div>
 							</section>
 
-							<div class="my-3">
-								<Knowledge bind:selectedItems={knowledge} />
-							</div>
+							<fieldset disabled={readOnly} class="min-w-0">
+								<hr class="my-3 border-gray-100/60 dark:border-gray-850/60" />
 
-							<div class="my-3">
-								<ToolsSelector bind:selectedToolIds={toolIds} tools={$tools ?? []} />
-							</div>
-
-							<div class="my-3">
-								<SkillsSelector bind:selectedSkillIds={skillIds} skills={skillsList} />
-							</div>
-
-							{#if ($functions ?? []).filter((func) => func.type === 'filter').length > 0 || ($functions ?? []).filter((func) => func.type === 'action').length > 0}
-								<hr class="my-3 border-gray-100/30 dark:border-gray-850/30" />
-
-								{#if ($functions ?? []).filter((func) => func.type === 'filter').length > 0}
-									<div class="my-3">
-										<FiltersSelector
-											bind:selectedFilterIds={filterIds}
-											filters={($functions ?? []).filter((func) => func.type === 'filter')}
-										/>
+								<section class="my-3">
+									<div class="flex w-full items-center justify-between">
+										{#if editingLocale}
+											<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
+												{$i18n.t('Prompts')}
+											</div>
+										{:else}
+											<button
+												class="flex w-full items-center justify-between gap-3 rounded-sm text-start text-xs font-normal text-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+												type="button"
+												aria-pressed={(info?.meta?.suggestion_prompts ?? null) !== null}
+												on:click={() => {
+													if ((info?.meta?.suggestion_prompts ?? null) === null) {
+														info.meta.suggestion_prompts = [{ content: '', title: ['', ''] }];
+													} else {
+														info.meta.suggestion_prompts = null;
+													}
+												}}
+											>
+												<span class="font-normal text-gray-600 dark:text-gray-400"
+													>{$i18n.t('Prompts')}</span
+												>
+												{#if (info?.meta?.suggestion_prompts ?? null) === null}
+													<span>{$i18n.t('Default')}</span>
+												{:else}
+													<span>{$i18n.t('Custom')}</span>
+												{/if}
+											</button>
+										{/if}
 									</div>
 
-									{@const toggleableFilters = $functions.filter(
-										(func) =>
-											func.type === 'filter' &&
-											(filterIds.includes(func.id) || func?.is_global) &&
-											func?.meta?.toggle
-									)}
+									{#if editingLocale}
+										<LocalizedPromptSuggestions
+											promptSuggestions={info.meta.suggestion_prompts ?? []}
+											bind:localizedPromptSuggestions={info.meta.i18n}
+											locale={editingLocale}
+											localeLabel={editingLocaleLabel}
+										/>
+									{:else if info?.meta?.suggestion_prompts}
+										<PromptSuggestions bind:promptSuggestions={info.meta.suggestion_prompts} />
+									{/if}
+								</section>
 
-									{#if toggleableFilters.length > 0}
+								<div class="my-3">
+									<Knowledge bind:selectedItems={knowledge} />
+								</div>
+
+								<div class="my-3">
+									<ToolsSelector bind:selectedToolIds={toolIds} tools={$tools ?? []} />
+								</div>
+
+								<div class="my-3">
+									<SkillsSelector bind:selectedSkillIds={skillIds} skills={skillsList} />
+								</div>
+
+								{#if ($functions ?? []).filter((func) => func.type === 'filter').length > 0 || ($functions ?? []).filter((func) => func.type === 'action').length > 0}
+									<hr class="my-3 border-gray-100/60 dark:border-gray-850/60" />
+
+									{#if ($functions ?? []).filter((func) => func.type === 'filter').length > 0}
 										<div class="my-3">
-											<DefaultFiltersSelector
-												bind:selectedFilterIds={defaultFilterIds}
-												filters={toggleableFilters}
+											<FiltersSelector
+												bind:selectedFilterIds={filterIds}
+												filters={($functions ?? []).filter((func) => func.type === 'filter')}
+											/>
+										</div>
+
+										{@const toggleableFilters = $functions.filter(
+											(func) =>
+												func.type === 'filter' &&
+												(filterIds.includes(func.id) || func?.is_global) &&
+												func?.meta?.toggle
+										)}
+
+										{#if toggleableFilters.length > 0}
+											<div class="my-3">
+												<DefaultFiltersSelector
+													bind:selectedFilterIds={defaultFilterIds}
+													filters={toggleableFilters}
+												/>
+											</div>
+										{/if}
+									{/if}
+
+									{#if ($functions ?? []).filter((func) => func.type === 'action').length > 0}
+										<div class="my-3">
+											<ActionsSelector
+												bind:selectedActionIds={actionIds}
+												actions={($functions ?? []).filter((func) => func.type === 'action')}
 											/>
 										</div>
 									{/if}
 								{/if}
 
-								{#if ($functions ?? []).filter((func) => func.type === 'action').length > 0}
+								<hr class="my-3 border-gray-100/60 dark:border-gray-850/60" />
+
+								<div class="my-3">
+									<Capabilities bind:capabilities />
+								</div>
+
+								{#if Object.keys(capabilities).filter((key) => capabilities[key]).length > 0}
+									{@const availableFeatures = Object.entries(capabilities)
+										.filter(
+											([key, value]) =>
+												value &&
+												['web_search', 'code_interpreter', 'image_generation'].includes(key)
+										)
+										.map(([key, value]) => key)}
+
+									{#if availableFeatures.length > 0}
+										<div class="my-3">
+											<DefaultFeatures {availableFeatures} bind:featureIds={defaultFeatureIds} />
+										</div>
+									{/if}
+								{/if}
+
+								{#if capabilities.builtin_tools}
 									<div class="my-3">
-										<ActionsSelector
-											bind:selectedActionIds={actionIds}
-											actions={($functions ?? []).filter((func) => func.type === 'action')}
+										<BuiltinTools bind:builtinTools />
+									</div>
+								{/if}
+
+								{#if capabilities.terminal}
+									<div class="my-3">
+										<TerminalSelector bind:terminalId />
+									</div>
+								{/if}
+
+								{#if $config?.audio?.realtime?.enabled}
+									<div class="my-3">
+										<div class="flex w-full justify-between mb-1">
+											<label
+												for="realtime-voice-input"
+												class="self-center text-xs font-normal text-gray-600 dark:text-gray-400"
+											>
+												{$i18n.t('Realtime Voice')}
+											</label>
+										</div>
+										<TTSVoiceInput
+											className="font-normal text-gray-900 dark:text-gray-100"
+											id="realtime-voice"
+											bind:value={voice.voice}
+											placeholder={$i18n.t('Admin default')}
 										/>
 									</div>
 								{/if}
-							{/if}
-
-							<hr class="my-3 border-gray-100/30 dark:border-gray-850/30" />
-
-							<div class="my-3">
-								<Capabilities bind:capabilities />
-							</div>
-
-							{#if Object.keys(capabilities).filter((key) => capabilities[key]).length > 0}
-								{@const availableFeatures = Object.entries(capabilities)
-									.filter(
-										([key, value]) =>
-											value && ['web_search', 'code_interpreter', 'image_generation'].includes(key)
-									)
-									.map(([key, value]) => key)}
-
-								{#if availableFeatures.length > 0}
-									<div class="my-3">
-										<DefaultFeatures {availableFeatures} bind:featureIds={defaultFeatureIds} />
-									</div>
+								{#if $config?.audio?.realtime?.enabled || voiceAvatar}
+									<VoiceAvatarSettings
+										bind:value={voiceAvatar}
+										bind:file={avatarFile}
+										bind:animationFiles
+										disabled={loading}
+									/>
 								{/if}
-							{/if}
-
-							{#if capabilities.builtin_tools}
-								<div class="my-3">
-									<BuiltinTools bind:builtinTools />
-								</div>
-							{/if}
-
-							{#if capabilities.terminal}
-								<div class="my-3">
-									<TerminalSelector bind:terminalId />
-								</div>
-							{/if}
-
-							{#if $config?.audio?.realtime?.enabled}
 								<div class="my-3">
 									<div class="flex w-full justify-between mb-1">
-										<label
-											for="realtime-voice-input"
-											class="self-center text-xs font-normal text-gray-500"
-										>
-											{$i18n.t('Realtime Voice')}
-										</label>
+										<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
+											{$i18n.t('TTS Voice')}
+										</div>
 									</div>
 									<TTSVoiceInput
-										id="realtime-voice"
-										bind:value={voice.voice}
-										placeholder={$i18n.t('Admin default')}
+										className="font-normal text-gray-900 dark:text-gray-100"
+										bind:value={tts.voice}
+										{voices}
+										placeholder={$i18n.t('e.g. alloy, echo, shimmer')}
 									/>
 								</div>
-							{/if}
-							{#if $config?.audio?.realtime?.enabled || voiceAvatar}
-								<VoiceAvatarSettings
-									bind:value={voiceAvatar}
-									bind:file={avatarFile}
-									bind:animationFiles
-									disabled={loading}
-								/>
-							{/if}
-							<div class="my-3">
-								<div class="flex w-full justify-between mb-1">
-									<div class="self-center text-xs font-normal text-gray-500">
-										{$i18n.t('TTS Voice')}
-									</div>
-								</div>
-								<TTSVoiceInput
-									bind:value={tts.voice}
-									{voices}
-									placeholder={$i18n.t('e.g. alloy, echo, shimmer')}
-								/>
-							</div>
-						</fieldset>
+							</fieldset>
 
-						<hr class="my-3 border-gray-100/30 dark:border-gray-850/30" />
+							<hr class="my-3 border-gray-100/60 dark:border-gray-850/60" />
 
-						{#if !readOnly}
-							<div class="my-2 flex items-center justify-end gap-2">
-								{#if edit}
-									<input
-										type="text"
-										aria-label={$i18n.t('Commit message')}
-										placeholder={$i18n.t('Describe this change')}
-										class="min-w-0 flex-1 border-0 bg-transparent px-1 text-xs outline-hidden focus:ring-0"
-										bind:value={commitMessage}
-									/>
-								{/if}
-								<button
-									class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-gray-900 px-2.5 text-xs text-white transition hover:bg-black disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
-									type="submit"
-									disabled={loading || (edit && !configurationChanged)}
-								>
-									<div class=" self-center font-normal">
-										{#if edit}
-											{$i18n.t('Save & Update')}
-										{:else}
-											{$i18n.t('Save & Create')}
-										{/if}
-									</div>
-
-									{#if loading}
-										<div class="ml-1.5 self-center">
-											<Spinner />
-										</div>
+							{#if !readOnly}
+								<div class="my-2 flex items-center justify-end gap-2">
+									{#if edit}
+										<input
+											type="text"
+											aria-label={$i18n.t('Commit message')}
+											placeholder={$i18n.t('Describe this change')}
+											class="min-w-0 flex-1 border-0 bg-transparent px-1 text-xs outline-hidden focus:ring-0"
+											bind:value={commitMessage}
+										/>
 									{/if}
-								</button>
-							</div>
-						{/if}
+									<button
+										class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-gray-900 px-2.5 text-xs text-white transition hover:bg-black disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
+										type="submit"
+										disabled={loading || (edit && !configurationChanged)}
+									>
+										<div class=" self-center font-normal">
+											{#if edit}
+												{$i18n.t('Save & Update')}
+											{:else}
+												{$i18n.t('Save & Create')}
+											{/if}
+										</div>
 
-						<div class="my-2 pb-2 text-xs text-gray-400 dark:text-gray-500">
-							<div class="flex w-full justify-between mb-2">
-								<div class="self-center text-xs font-normal">{$i18n.t('JSON Preview')}</div>
+										{#if loading}
+											<div class="ml-1.5 self-center">
+												<Spinner />
+											</div>
+										{/if}
+									</button>
+								</div>
+							{/if}
 
-								<div class="flex items-center">
+							<div class="my-2 pb-2 text-xs text-gray-400 dark:text-gray-500">
+								<div class="mb-2 flex w-full items-center gap-2">
+									<button
+										type="button"
+										class="group flex h-7 min-w-0 flex-1 items-center justify-between gap-3 rounded-sm text-start text-xs focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+										aria-expanded={showPreview}
+										on:click={() => (showPreview = !showPreview)}
+									>
+										<span class="font-normal text-gray-600 dark:text-gray-400"
+											>{$i18n.t('JSON Preview')}</span
+										>
+										<span
+											aria-hidden="true"
+											class="text-gray-500 transition group-hover:text-gray-700 dark:group-hover:text-gray-300"
+											>{showPreview ? $i18n.t('Hide') : $i18n.t('Show')}</span
+										>
+									</button>
 									<button
 										class="px-1.5 py-0.5 text-xs flex rounded-sm transition"
 										type="button"
@@ -1547,33 +1626,19 @@
 									>
 										{$i18n.t('Copy')}
 									</button>
-									<button
-										class="px-1.5 py-0.5 text-xs flex rounded-sm transition"
-										type="button"
-										on:click={() => {
-											showPreview = !showPreview;
-										}}
-									>
-										{#if showPreview}
-											<span class="self-center">{$i18n.t('Hide')}</span>
-										{:else}
-											<span class="self-center">{$i18n.t('Show')}</span>
-										{/if}
-									</button>
 								</div>
+								{#if showPreview}
+									<div>
+										<textarea
+											class="w-full bg-transparent text-xs leading-5 outline-hidden resize-none font-normal text-gray-900 dark:text-gray-100"
+											rows="8"
+											value={JSON.stringify(readOnly ? model : modelInfo, null, 2)}
+											disabled
+											readonly
+										/>
+									</div>
+								{/if}
 							</div>
-
-							{#if showPreview}
-								<div>
-									<textarea
-										class="w-full bg-transparent text-xs leading-5 outline-hidden resize-none"
-										rows="8"
-										value={JSON.stringify(readOnly ? model : modelInfo, null, 2)}
-										disabled
-										readonly
-									/>
-								</div>
-							{/if}
 						</div>
 					</div>
 				</form>
diff --git a/src/lib/components/workspace/Models/PromptSuggestions.svelte b/src/lib/components/workspace/Models/PromptSuggestions.svelte
index 2cb826e019..96e2feb6e6 100644
--- a/src/lib/components/workspace/Models/PromptSuggestions.svelte
+++ b/src/lib/components/workspace/Models/PromptSuggestions.svelte
@@ -51,7 +51,7 @@
 
 <div class="space-y-2">
 	<div class="mb-1 flex min-h-7 w-full flex-wrap items-center justify-between gap-x-2 gap-y-1">
-		<div class="min-w-fit flex-1 self-center text-xs text-gray-500 dark:text-gray-400">
+		<div class="min-w-fit flex-1 self-center text-xs font-normal text-gray-600 dark:text-gray-400">
 			<slot name="label">{$i18n.t('Default Prompt Suggestions')}</slot>
 		</div>
 
@@ -163,7 +163,7 @@
 						<div class="grid min-w-0 gap-1 md:grid-cols-2 md:gap-1.5">
 							<Tooltip content={$i18n.t('e.g. Tell me a fun fact')} placement="top-start">
 								<input
-									class="w-full bg-transparent text-[0.8125rem] leading-5 text-gray-700 outline-hidden placeholder:text-gray-300 dark:text-gray-200 dark:placeholder:text-gray-700"
+									class="w-full bg-transparent text-[0.8125rem] leading-5 outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700 font-normal text-gray-900 dark:text-gray-100"
 									placeholder={$i18n.t('Title')}
 									aria-label={$i18n.t('Title')}
 									value={prompt.title[0]}
@@ -176,7 +176,7 @@
 
 							<Tooltip content={$i18n.t('e.g. about the Roman Empire')} placement="top-start">
 								<input
-									class="w-full bg-transparent text-[0.8125rem] leading-5 text-gray-500 outline-hidden placeholder:text-gray-300 dark:text-gray-500 dark:placeholder:text-gray-700"
+									class="w-full bg-transparent text-[0.8125rem] leading-5 outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700 font-normal text-gray-900 dark:text-gray-100"
 									placeholder={$i18n.t('Subtitle')}
 									aria-label={$i18n.t('Subtitle')}
 									value={prompt.title[1]}
@@ -194,7 +194,7 @@
 							placement="top-start"
 						>
 							<textarea
-								class="min-h-5 w-full resize-none overflow-hidden bg-transparent text-[0.8125rem] leading-5 text-gray-700 outline-hidden placeholder:text-gray-300 dark:text-gray-200 dark:placeholder:text-gray-700"
+								class="min-h-5 w-full resize-none overflow-hidden bg-transparent text-[0.8125rem] leading-5 outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700 font-normal text-gray-900 dark:text-gray-100"
 								placeholder={$i18n.t('Content')}
 								aria-label={$i18n.t('Content')}
 								rows="1"
diff --git a/src/lib/components/workspace/Models/SkillsSelector.svelte b/src/lib/components/workspace/Models/SkillsSelector.svelte
index 8ea4d2220a..e348cb2ff9 100644
--- a/src/lib/components/workspace/Models/SkillsSelector.svelte
+++ b/src/lib/components/workspace/Models/SkillsSelector.svelte
@@ -29,7 +29,9 @@
 
 <div>
 	<div class="flex w-full items-center gap-2 mb-1">
-		<div class=" self-center text-xs text-gray-500">{$i18n.t('Skills')}</div>
+		<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
+			{$i18n.t('Skills')}
+		</div>
 
 		{#if activeSkills.length > 0}
 			<TypeaheadSelector
@@ -72,7 +74,7 @@
 						<Tooltip
 							content={resolveLocalizedResource(skill, $i18n.language, 'description') || skill.id}
 						>
-							<div class=" py-0.5 text-xs capitalize">
+							<div class="py-0.5 text-xs capitalize font-normal text-gray-900 dark:text-gray-100">
 								{resolveLocalizedResource(skill, $i18n.language)}
 							</div>
 						</Tooltip>
diff --git a/src/lib/components/workspace/Models/TerminalSelector.svelte b/src/lib/components/workspace/Models/TerminalSelector.svelte
index f30da05842..b827ea23a3 100644
--- a/src/lib/components/workspace/Models/TerminalSelector.svelte
+++ b/src/lib/components/workspace/Models/TerminalSelector.svelte
@@ -15,11 +15,13 @@
 
 {#if terminals.length > 0}
 	<div class="flex w-full justify-between mb-1">
-		<div class="self-center text-xs font-normal text-gray-500">{$i18n.t('Terminal')}</div>
+		<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
+			{$i18n.t('Terminal')}
+		</div>
 	</div>
 
 	<select
-		class="block h-5 w-full py-0 text-xs leading-5 bg-transparent outline-hidden cursor-pointer"
+		class="block h-5 w-full py-0 text-xs leading-5 bg-transparent outline-hidden cursor-pointer font-normal text-gray-900 dark:text-gray-100"
 		bind:value={terminalId}
 	>
 		<option value="">{$i18n.t('None')}</option>
diff --git a/src/lib/components/workspace/Models/ToolsSelector.svelte b/src/lib/components/workspace/Models/ToolsSelector.svelte
index b1389f8ccb..92b1cad64b 100644
--- a/src/lib/components/workspace/Models/ToolsSelector.svelte
+++ b/src/lib/components/workspace/Models/ToolsSelector.svelte
@@ -29,7 +29,9 @@
 
 <div>
 	<div class="flex w-full items-center gap-2 mb-1">
-		<div class=" self-center text-xs text-gray-500">{$i18n.t('Tools')}</div>
+		<div class="self-center text-xs font-normal text-gray-600 dark:text-gray-400">
+			{$i18n.t('Tools')}
+		</div>
 
 		{#if tools.length > 0}
 			<TypeaheadSelector
@@ -70,7 +72,7 @@
 						<Tooltip
 							content={resolveLocalizedResource(tool, $i18n.language, 'description') || tool.id}
 						>
-							<div class=" py-0.5 text-xs capitalize">
+							<div class="py-0.5 text-xs capitalize font-normal text-gray-900 dark:text-gray-100">
 								{resolveLocalizedResource(tool, $i18n.language)}
 							</div>
 						</Tooltip>
diff --git a/src/lib/components/workspace/Models/VoiceAvatarSettings.svelte b/src/lib/components/workspace/Models/VoiceAvatarSettings.svelte
index 693c6dd74e..1f65732493 100644
--- a/src/lib/components/workspace/Models/VoiceAvatarSettings.svelte
+++ b/src/lib/components/workspace/Models/VoiceAvatarSettings.svelte
@@ -33,8 +33,12 @@
 
 <div class="my-3 flex items-center justify-between gap-3">
 	<div>
-		<div class="mb-1 text-xs text-gray-500">{$i18n.t('Voice avatar')}</div>
-		<div class="text-xs leading-5">{value ? $i18n.t('Custom avatar') : $i18n.t('Default orb')}</div>
+		<div class="mb-1 text-xs font-normal text-gray-600 dark:text-gray-400">
+			{$i18n.t('Voice avatar')}
+		</div>
+		<div class="text-xs leading-5 font-normal text-gray-900 dark:text-gray-100">
+			{value ? $i18n.t('Custom avatar') : $i18n.t('Default orb')}
+		</div>
 	</div>
 	<button
 		type="button"