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

---
 src/lib/components/admin/Settings.svelte      |  8 ----
 .../components/admin/Settings/Audio.svelte    |  2 +
 .../admin/Settings/Authentication.svelte      |  4 ++
 .../admin/Settings/CodeExecution.svelte       |  4 ++
 .../admin/Settings/Connections.svelte         |  2 +
 .../components/admin/Settings/Database.svelte |  2 +
 .../admin/Settings/Documents.svelte           |  2 +
 .../admin/Settings/Evaluations.svelte         |  2 +
 .../components/admin/Settings/General.svelte  |  2 +
 .../components/admin/Settings/Images.svelte   |  2 +
 .../admin/Settings/Integrations.svelte        |  2 +
 .../admin/Settings/Interface.svelte           |  4 ++
 .../admin/Settings/Pipelines.svelte           |  2 +
 .../admin/Settings/Subagents.svelte           |  2 +
 .../admin/Settings/WebSearch.svelte           |  2 +
 src/lib/components/admin/Users/Groups.svelte  | 28 ++++--------
 .../admin/Users/Groups/GroupItem.svelte       | 12 ++---
 src/lib/components/chat/Settings/About.svelte |  2 +
 .../chat/Settings/ArchivedChats.svelte        |  4 ++
 src/lib/components/chat/Settings/Audio.svelte |  2 +
 .../chat/Settings/Connections.svelte          |  2 +
 .../chat/Settings/DataControls.svelte         |  4 ++
 .../components/chat/Settings/General.svelte   |  2 +
 .../chat/Settings/Integrations.svelte         |  2 +
 .../components/chat/Settings/Interface.svelte |  2 +
 .../chat/Settings/Personalization.svelte      |  4 ++
 .../components/chat/Settings/Shortcuts.svelte |  4 ++
 src/lib/components/chat/SettingsModal.svelte  |  7 ---
 .../workspace/Models/ModelEditor.svelte       | 44 ++++++++++---------
 src/routes/(app)/playground/+layout.svelte    |  2 +-
 30 files changed, 100 insertions(+), 63 deletions(-)

diff --git a/src/lib/components/admin/Settings.svelte b/src/lib/components/admin/Settings.svelte
index de18b564c8..9e08acda6d 100644
--- a/src/lib/components/admin/Settings.svelte
+++ b/src/lib/components/admin/Settings.svelte
@@ -307,8 +307,6 @@
 		}, 100);
 	};
 
-	$: selectedTabTitle = allSettings.find((tab) => tab.id === selectedTab)?.title ?? 'Settings';
-
 	const tabButtonClass = (active) =>
 		`flex items-center gap-1.5 h-7 px-2 lg:w-full shrink-0 rounded-lg text-xs text-left transition-colors duration-75 select-none ${
 			active
@@ -394,12 +392,6 @@
 
 	<div class="flex-1 min-h-0 p-4 lg:px-5 flex flex-col">
 		<div class="w-full h-full min-h-0 flex flex-col">
-			{#if selectedTab !== 'models'}
-				<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">
-					{$i18n.t(selectedTabTitle)}
-				</h2>
-			{/if}
-
 			<div class="flex-1 min-h-0 overflow-hidden">
 				{#if selectedTab === 'general'}
 					<General
diff --git a/src/lib/components/admin/Settings/Audio.svelte b/src/lib/components/admin/Settings/Audio.svelte
index f6576c5ab8..3047900b38 100644
--- a/src/lib/components/admin/Settings/Audio.svelte
+++ b/src/lib/components/admin/Settings/Audio.svelte
@@ -233,6 +233,8 @@
 		dispatch('save');
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Audio')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		<div class="flex flex-col gap-3">
 			<div>
diff --git a/src/lib/components/admin/Settings/Authentication.svelte b/src/lib/components/admin/Settings/Authentication.svelte
index 36b3905e5a..75cd8fd055 100644
--- a/src/lib/components/admin/Settings/Authentication.svelte
+++ b/src/lib/components/admin/Settings/Authentication.svelte
@@ -118,6 +118,10 @@
 </script>
 
 <form class="flex h-full flex-col justify-between text-sm" on:submit|preventDefault={submitHandler}>
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">
+		{$i18n.t('Authentication')}
+	</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if adminConfig !== null}
 			<AdminSettingSection title={$i18n.t('User Access')} first>
diff --git a/src/lib/components/admin/Settings/CodeExecution.svelte b/src/lib/components/admin/Settings/CodeExecution.svelte
index c27fd451d0..d2b7f200f5 100644
--- a/src/lib/components/admin/Settings/CodeExecution.svelte
+++ b/src/lib/components/admin/Settings/CodeExecution.svelte
@@ -47,6 +47,10 @@
 		saveHandler();
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">
+		{$i18n.t('Code Execution')}
+	</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if config}
 			<AdminSettingSection first>
diff --git a/src/lib/components/admin/Settings/Connections.svelte b/src/lib/components/admin/Settings/Connections.svelte
index f9321fbcf4..753f093310 100644
--- a/src/lib/components/admin/Settings/Connections.svelte
+++ b/src/lib/components/admin/Settings/Connections.svelte
@@ -218,6 +218,8 @@
 />
 
 <form class="flex h-full flex-col justify-between text-sm" on:submit|preventDefault={submitHandler}>
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Connections')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if ENABLE_OPENAI_API !== null && ENABLE_OLLAMA_API !== null && connectionsConfig !== null}
 			<AdminSettingSection first>
diff --git a/src/lib/components/admin/Settings/Database.svelte b/src/lib/components/admin/Settings/Database.svelte
index 07e136c43f..1075270bd6 100644
--- a/src/lib/components/admin/Settings/Database.svelte
+++ b/src/lib/components/admin/Settings/Database.svelte
@@ -49,6 +49,8 @@
 </script>
 
 <div class="flex flex-col h-full justify-between text-sm">
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Database')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		<input
 			id="config-json-input"
diff --git a/src/lib/components/admin/Settings/Documents.svelte b/src/lib/components/admin/Settings/Documents.svelte
index 9a95db1ab0..0155708db0 100644
--- a/src/lib/components/admin/Settings/Documents.svelte
+++ b/src/lib/components/admin/Settings/Documents.svelte
@@ -374,6 +374,8 @@
 		submitHandler();
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Documents')}</h2>
+
 	{#if RAGConfig}
 		<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 			<div class="">
diff --git a/src/lib/components/admin/Settings/Evaluations.svelte b/src/lib/components/admin/Settings/Evaluations.svelte
index 75db7244b5..4de6a49248 100644
--- a/src/lib/components/admin/Settings/Evaluations.svelte
+++ b/src/lib/components/admin/Settings/Evaluations.svelte
@@ -104,6 +104,8 @@
 		dispatch('save');
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Evaluations')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if evaluationConfig !== null}
 			<AdminSettingSection first>
diff --git a/src/lib/components/admin/Settings/General.svelte b/src/lib/components/admin/Settings/General.svelte
index 85a783e54d..2f073928f2 100644
--- a/src/lib/components/admin/Settings/General.svelte
+++ b/src/lib/components/admin/Settings/General.svelte
@@ -84,6 +84,8 @@
 		updateHandler();
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('General')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if adminConfig !== null}
 			<AdminSettingSection first>
diff --git a/src/lib/components/admin/Settings/Images.svelte b/src/lib/components/admin/Settings/Images.svelte
index b6daaf2652..9b3b8c5e8b 100644
--- a/src/lib/components/admin/Settings/Images.svelte
+++ b/src/lib/components/admin/Settings/Images.svelte
@@ -289,6 +289,8 @@
 		saveHandler();
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Images')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if config}
 			<div>
diff --git a/src/lib/components/admin/Settings/Integrations.svelte b/src/lib/components/admin/Settings/Integrations.svelte
index e4d6cb82a3..03cfbf7c3b 100644
--- a/src/lib/components/admin/Settings/Integrations.svelte
+++ b/src/lib/components/admin/Settings/Integrations.svelte
@@ -161,6 +161,8 @@
 		updateHandler();
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Integrations')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if servers !== null}
 			<AdminSettingSection title={$i18n.t('Tools')} first>
diff --git a/src/lib/components/admin/Settings/Interface.svelte b/src/lib/components/admin/Settings/Interface.svelte
index 12cda1dddb..1a17355594 100644
--- a/src/lib/components/admin/Settings/Interface.svelte
+++ b/src/lib/components/admin/Settings/Interface.svelte
@@ -108,6 +108,10 @@
 			dispatch('save');
 		}}
 	>
+		<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">
+			{$i18n.t('Interface')}
+		</h2>
+
 		<div class="  flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 			<div class="mb-5">
 				<div class=" mb-2 text-xs text-gray-400 dark:text-gray-600">
diff --git a/src/lib/components/admin/Settings/Pipelines.svelte b/src/lib/components/admin/Settings/Pipelines.svelte
index d2eefd56bf..2e519cae85 100644
--- a/src/lib/components/admin/Settings/Pipelines.svelte
+++ b/src/lib/components/admin/Settings/Pipelines.svelte
@@ -238,6 +238,8 @@
 		updateHandler();
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Pipelines')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if PIPELINES_LIST !== null}
 			{#if PIPELINES_LIST.length > 0}
diff --git a/src/lib/components/admin/Settings/Subagents.svelte b/src/lib/components/admin/Settings/Subagents.svelte
index 21e7479c70..47b72233f0 100644
--- a/src/lib/components/admin/Settings/Subagents.svelte
+++ b/src/lib/components/admin/Settings/Subagents.svelte
@@ -57,6 +57,8 @@
 </script>
 
 <form class="flex h-full flex-col justify-between text-sm" on:submit|preventDefault={save}>
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Sub-agents')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if loading}
 			<div class="flex justify-center py-8"><Spinner className="size-6" /></div>
diff --git a/src/lib/components/admin/Settings/WebSearch.svelte b/src/lib/components/admin/Settings/WebSearch.svelte
index ef10f652af..26337137ae 100644
--- a/src/lib/components/admin/Settings/WebSearch.svelte
+++ b/src/lib/components/admin/Settings/WebSearch.svelte
@@ -152,6 +152,8 @@
 		saveHandler();
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Web Search')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if webConfig}
 			<div class="">
diff --git a/src/lib/components/admin/Users/Groups.svelte b/src/lib/components/admin/Users/Groups.svelte
index 27ec1d785c..0440c9ac2c 100644
--- a/src/lib/components/admin/Users/Groups.svelte
+++ b/src/lib/components/admin/Users/Groups.svelte
@@ -1,16 +1,10 @@
 <script>
 	import { toast } from 'svelte-sonner';
-	import dayjs from 'dayjs';
-	import relativeTime from 'dayjs/plugin/relativeTime';
-	dayjs.extend(relativeTime);
-
 	import { onMount, getContext } from 'svelte';
 	import { goto } from '$app/navigation';
 
-	import { WEBUI_NAME, config, user, showSidebar, knowledge } from '$lib/stores';
-	import { WEBUI_BASE_URL } from '$lib/constants';
+	import { user } from '$lib/stores';
 
-	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Plus from '$lib/components/icons/Plus.svelte';
 	import UsersSolid from '$lib/components/icons/UsersSolid.svelte';
 	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
@@ -22,11 +16,7 @@
 	import Check from '$lib/components/icons/Check.svelte';
 	import Select from '$lib/components/common/Select.svelte';
 	import { createNewGroup, getGroups } from '$lib/apis/groups';
-	import {
-		getUserDefaultPermissions,
-		getAllUsers,
-		updateUserDefaultPermissions
-	} from '$lib/apis/users';
+	import { getUserDefaultPermissions, updateUserDefaultPermissions } from '$lib/apis/users';
 
 	const i18n = getContext('i18n');
 
@@ -146,16 +136,14 @@
 		</div>
 	</div>
 
-	<div
-		class="py-2 bg-white dark:bg-gray-900 rounded-3xl border border-gray-100/30 dark:border-gray-850/30"
-	>
-		<div class="flex items-center w-full space-x-2 py-0.5 px-3.5">
-			<div class="flex flex-1">
+	<div class="space-y-1">
+		<div class="flex h-8 flex-1 items-center w-full gap-2">
+			<div class="flex min-w-0 flex-1">
 				<div class="self-center ml-1 mr-3">
 					<Search className="size-3.5" />
 				</div>
 				<input
-					class="w-full text-sm py-1 rounded-r-xl outline-hidden bg-transparent"
+					class="w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
 					bind:value={query}
 					aria-label={$i18n.t('Search Groups')}
 					placeholder={$i18n.t('Search Groups')}
@@ -203,7 +191,7 @@
 		</div>
 
 		{#if filteredGroups.length !== 0}
-			<div class="my-2 px-3 grid grid-cols-1 gap-1">
+			<div class="my-1 gap-x-2 gap-y-0.5 grid lg:grid-cols-2">
 				{#each filteredGroups as group}
 					<GroupItem {group} {setGroups} {defaultPermissions} />
 				{/each}
@@ -232,7 +220,7 @@
 	{/if}
 
 	<button
-		class="flex items-center justify-between rounded-lg w-full transition mt-4"
+		class="flex items-center justify-between rounded-2xl w-full transition mt-2 px-2.5 py-2 hover:bg-gray-50/70 dark:hover:bg-gray-850/50"
 		aria-haspopup="dialog"
 		on:click={() => {
 			showDefaultPermissionsModal = true;
diff --git a/src/lib/components/admin/Users/Groups/GroupItem.svelte b/src/lib/components/admin/Users/Groups/GroupItem.svelte
index 912f1b5499..bb9a7aae85 100644
--- a/src/lib/components/admin/Users/Groups/GroupItem.svelte
+++ b/src/lib/components/admin/Users/Groups/GroupItem.svelte
@@ -63,32 +63,32 @@
 />
 
 <button
-	class="flex space-x-4 cursor-pointer text-left w-full px-3.5 py-2.5 dark:hover:bg-gray-850/50 hover:bg-gray-50 transition rounded-2xl"
+	class="flex space-x-4 cursor-pointer text-left w-full px-2.5 py-1.5 rounded-2xl hover:bg-gray-50/70 dark:hover:bg-gray-850/50 transition"
 	on:click={() => {
 		showEdit = true;
 	}}
 >
 	<div class="w-full">
 		<div class="flex items-center justify-between">
-			<div class="flex-1">
-				<div class="flex items-center gap-2">
+			<div class="flex-1 min-w-0 pl-1">
+				<div class="flex items-center gap-1.5">
 					<div class="text-sm font-normal line-clamp-1">{group.name}</div>
 				</div>
 
-				<div class="flex items-center gap-2 mt-0.5 line-clamp-1">
+				<div class="flex items-center gap-1.5 px-1 line-clamp-1">
 					<div class="text-xs text-gray-500 shrink-0">
 						{$i18n.t('{{COUNT}} members', { COUNT: group?.member_count ?? 0 })}
 					</div>
 
 					{#if group?.description}
-						<div class="text-xs text-gray-500 line-clamp-1">
+						<div class="text-xs overflow-hidden text-ellipsis line-clamp-1">
 							{group.description}
 						</div>
 					{/if}
 				</div>
 			</div>
 
-			<div class="flex self-center ml-2">
+			<div class="flex self-center ml-2 p-1.5 dark:text-gray-300">
 				<Pencil className="size-3.5" />
 			</div>
 		</div>
diff --git a/src/lib/components/chat/Settings/About.svelte b/src/lib/components/chat/Settings/About.svelte
index f6c56c5eef..436ef398f7 100644
--- a/src/lib/components/chat/Settings/About.svelte
+++ b/src/lib/components/chat/Settings/About.svelte
@@ -45,6 +45,8 @@
 </script>
 
 <div id="tab-about" class="flex flex-col h-full justify-between space-y-3 text-sm">
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('About')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5 space-y-3">
 		<div>
 			<div class="text-xs text-gray-400 dark:text-gray-600 mb-2.5 flex space-x-2 items-center">
diff --git a/src/lib/components/chat/Settings/ArchivedChats.svelte b/src/lib/components/chat/Settings/ArchivedChats.svelte
index d572b28e5b..9a55563e03 100644
--- a/src/lib/components/chat/Settings/ArchivedChats.svelte
+++ b/src/lib/components/chat/Settings/ArchivedChats.svelte
@@ -174,6 +174,10 @@
 />
 
 <div id="tab-archived-chats" class="flex flex-col h-full text-sm">
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">
+		{$i18n.t('Archived Chats')}
+	</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		<div>
 			<div class="text-xs text-gray-400 dark:text-gray-600 mb-2">
diff --git a/src/lib/components/chat/Settings/Audio.svelte b/src/lib/components/chat/Settings/Audio.svelte
index 4fcc4cc028..9592d33c36 100644
--- a/src/lib/components/chat/Settings/Audio.svelte
+++ b/src/lib/components/chat/Settings/Audio.svelte
@@ -175,6 +175,8 @@
 		dispatch('save');
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Audio')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5 space-y-3">
 		<div>
 			<div class="text-xs text-gray-400 dark:text-gray-600 mb-2">
diff --git a/src/lib/components/chat/Settings/Connections.svelte b/src/lib/components/chat/Settings/Connections.svelte
index a29d9ba630..e660904419 100644
--- a/src/lib/components/chat/Settings/Connections.svelte
+++ b/src/lib/components/chat/Settings/Connections.svelte
@@ -76,6 +76,8 @@
 		updateHandler();
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Connections')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if config !== null}
 			<div class="">
diff --git a/src/lib/components/chat/Settings/DataControls.svelte b/src/lib/components/chat/Settings/DataControls.svelte
index 001193d889..8eaf975c63 100644
--- a/src/lib/components/chat/Settings/DataControls.svelte
+++ b/src/lib/components/chat/Settings/DataControls.svelte
@@ -133,6 +133,10 @@
 />
 
 <div id="tab-chats" class="flex flex-col h-full text-sm">
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">
+		{$i18n.t('Data Controls')}
+	</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5 space-y-3">
 		<input
 			id="chat-import-input"
diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index 12e3770c59..d2164580bf 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -206,6 +206,8 @@
 </script>
 
 <div class="flex flex-col h-full justify-between text-sm" id="tab-general">
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('General')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		<div class="">
 			<div class="text-xs text-gray-400 dark:text-gray-600 mb-2">
diff --git a/src/lib/components/chat/Settings/Integrations.svelte b/src/lib/components/chat/Settings/Integrations.svelte
index 7ce3e27f9d..f5258c09ec 100644
--- a/src/lib/components/chat/Settings/Integrations.svelte
+++ b/src/lib/components/chat/Settings/Integrations.svelte
@@ -80,6 +80,8 @@
 		updateHandler();
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Integrations')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if servers !== null}
 			<div>
diff --git a/src/lib/components/chat/Settings/Interface.svelte b/src/lib/components/chat/Settings/Interface.svelte
index 85ec5c4c06..c171af9fd3 100644
--- a/src/lib/components/chat/Settings/Interface.svelte
+++ b/src/lib/components/chat/Settings/Interface.svelte
@@ -307,6 +307,8 @@
 		dispatch('save');
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Interface')}</h2>
+
 	<input
 		bind:this={filesInputElement}
 		bind:files={inputFiles}
diff --git a/src/lib/components/chat/Settings/Personalization.svelte b/src/lib/components/chat/Settings/Personalization.svelte
index a0384a3450..c49a490650 100644
--- a/src/lib/components/chat/Settings/Personalization.svelte
+++ b/src/lib/components/chat/Settings/Personalization.svelte
@@ -29,6 +29,10 @@
 		dispatch('save');
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">
+		{$i18n.t('Personalization')}
+	</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5 py-1">
 		<div>
 			<div class="flex items-center justify-between mb-1">
diff --git a/src/lib/components/chat/Settings/Shortcuts.svelte b/src/lib/components/chat/Settings/Shortcuts.svelte
index df661a8623..8d84981af1 100644
--- a/src/lib/components/chat/Settings/Shortcuts.svelte
+++ b/src/lib/components/chat/Settings/Shortcuts.svelte
@@ -39,6 +39,10 @@
 </script>
 
 <div id="tab-shortcuts" class="flex h-full flex-col text-sm">
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">
+		{$i18n.t('Keyboard Shortcuts')}
+	</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		<div class="flex items-center gap-2 px-1 pb-1">
 			<span class="flex-1 text-[0.625rem] font-medium text-gray-400 dark:text-gray-600">
diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index ce63b6bc63..6fc02a910f 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -750,7 +750,6 @@
 	$: if ($user?.role !== 'admin' && isAdminTab(selectedTab)) {
 		selectedTab = 'general';
 	}
-	$: selectedTabTitle = allKnownSettings.find((tab) => tab.id === selectedTab)?.title ?? 'Settings';
 
 	onMount(() => {
 		availableSettings = getAvailableSettings();
@@ -1001,12 +1000,6 @@
 	</nav>
 
 	<div class="flex-1 min-h-0 p-4 md:px-5 flex flex-col">
-		{#if selectedTab !== 'account' && selectedTab !== 'admin:models'}
-			<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">
-				{$i18n.t(selectedTabTitle)}
-			</h2>
-		{/if}
-
 		<div class="flex-1 min-h-0 overflow-hidden">
 			{#if selectedTab === 'general'}
 				<General
diff --git a/src/lib/components/workspace/Models/ModelEditor.svelte b/src/lib/components/workspace/Models/ModelEditor.svelte
index 8f38b0b428..e3dcaa289a 100644
--- a/src/lib/components/workspace/Models/ModelEditor.svelte
+++ b/src/lib/components/workspace/Models/ModelEditor.svelte
@@ -527,20 +527,20 @@
 
 		{#if !edit || (edit && model)}
 			<form
-				class="flex flex-col md:flex-row w-full gap-3 md:gap-6"
+				class="flex flex-col md:flex-row w-full gap-3"
 				on:submit|preventDefault={() => {
 					submitHandler();
 				}}
 			>
 				<div class="w-full px-1">
-					<div class="flex flex-row gap-4 md:gap-6 w-full">
-						<div class="self-start flex justify-center my-2 shrink-0">
-							<div class="self-center">
+					<div class="flex flex-row gap-3 w-full">
+						<div class="self-start flex justify-center py-1 shrink-0">
+							<div class="self-center group">
 								<button
-									class="rounded-2xl flex shrink-0 items-center {info.meta.profile_image_url !==
-									`${WEBUI_BASE_URL}/static/favicon.png`
+									class="relative flex size-14 md:size-16 shrink-0 items-center overflow-hidden rounded-xl {info
+										.meta.profile_image_url !== `${WEBUI_BASE_URL}/static/favicon.png`
 										? 'bg-transparent'
-										: 'bg-white'} shadow-xl group relative"
+										: 'bg-gray-50 dark:bg-gray-850'} ring-1 ring-gray-200/70 transition hover:ring-gray-300 dark:ring-white/10 dark:hover:ring-white/20"
 									type="button"
 									aria-label={$i18n.t('Upload profile image')}
 									on:click={() => {
@@ -551,26 +551,28 @@
 										<img
 											src={info.meta.profile_image_url}
 											alt="model profile"
-											class="rounded-xl size-20 md:size-48 object-cover shrink-0"
+											class="size-full object-cover"
 										/>
 									{:else}
 										<img
 											src="{WEBUI_BASE_URL}/static/favicon.png"
 											alt="model profile"
-											class=" rounded-xl size-20 md:size-48 object-cover shrink-0"
+											class="size-full object-cover"
 										/>
 									{/if}
 
-									<div class="absolute bottom-0 right-0 z-10">
-										<div class="m-1.5">
+									<div
+										class="absolute bottom-0 right-0 z-10 opacity-0 transition group-hover:opacity-100"
+									>
+										<div class="m-1">
 											<div
-												class="shadow-xl p-1 rounded-full border-2 border-white bg-gray-800 text-white group-hover:bg-gray-600 transition dark:border-black dark:bg-white dark:group-hover:bg-gray-200 dark:text-black"
+												class="rounded-full bg-gray-900 p-1 text-white shadow-sm transition dark:bg-white dark:text-black"
 											>
 												<svg
 													xmlns="http://www.w3.org/2000/svg"
 													viewBox="0 0 16 16"
 													fill="currentColor"
-													class="size-5"
+													class="size-3"
 												>
 													<path
 														fill-rule="evenodd"
@@ -583,13 +585,13 @@
 									</div>
 
 									<div
-										class="absolute top-0 bottom-0 left-0 right-0 bg-white dark:bg-black rounded-lg opacity-0 group-hover:opacity-20 transition"
+										class="absolute inset-0 bg-white opacity-0 transition group-hover:opacity-20 dark:bg-black"
 									></div>
 								</button>
 
-								<div class="flex w-full mt-1 justify-end">
+								<div class="mt-1 flex w-full justify-center">
 									<button
-										class="px-2 py-1 text-gray-500 rounded-lg text-xs"
+										class="rounded-lg px-1.5 py-0.5 text-[0.6875rem] text-gray-400 transition hover:text-gray-600 dark:hover:text-gray-300"
 										on:click={() => {
 											info.meta.profile_image_url = `${WEBUI_BASE_URL}/static/favicon.png`;
 										}}
@@ -602,11 +604,11 @@
 						</div>
 
 						<div class="flex flex-col w-full flex-1">
-							<div class="flex justify-between items-start my-2">
+							<div class="flex justify-between items-start gap-3 py-1">
 								<div class=" flex flex-col w-full">
 									<div class="flex-1 w-full">
 										<input
-											class="text-3xl w-full bg-transparent outline-hidden"
+											class="w-full bg-transparent text-lg font-medium text-gray-900 outline-hidden placeholder:text-gray-300 dark:text-white dark:placeholder:text-gray-700 md:text-xl"
 											placeholder={$i18n.t('Model Name')}
 											bind:value={name}
 											required
@@ -616,7 +618,7 @@
 									<div class="flex-1 w-full">
 										<div>
 											<input
-												class="text-xs w-full bg-transparent outline-hidden"
+												class="w-full bg-transparent py-0.5 text-xs text-gray-500 outline-hidden placeholder:text-gray-300 dark:text-gray-500 dark:placeholder:text-gray-700"
 												placeholder={$i18n.t('Model ID')}
 												bind:value={id}
 												disabled={edit}
@@ -628,7 +630,7 @@
 
 								<div class="shrink-0">
 									<button
-										class="bg-gray-50 shrink-0 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2 py-1 rounded-full flex gap-1 items-center"
+										class="flex h-7 shrink-0 items-center gap-1 rounded-lg bg-gray-50 px-2 text-xs text-gray-700 transition hover:bg-gray-100 dark:bg-white/[0.03] dark:text-gray-300 dark:hover:bg-white/[0.06]"
 										type="button"
 										on:click={() => {
 											showAccessControlModal = true;
@@ -636,7 +638,7 @@
 									>
 										<LockClosed strokeWidth="2.5" className="size-3.5 shrink-0" />
 
-										<div class="text-sm font-normal shrink-0">
+										<div class="font-normal shrink-0">
 											{$i18n.t('Access')}
 										</div>
 									</button>
diff --git a/src/routes/(app)/playground/+layout.svelte b/src/routes/(app)/playground/+layout.svelte
index ef1dc84f0d..c11ff08f88 100644
--- a/src/routes/(app)/playground/+layout.svelte
+++ b/src/routes/(app)/playground/+layout.svelte
@@ -21,7 +21,7 @@
 		? 'md:max-w-[calc(100%-var(--sidebar-width))]'
 		: ''} max-w-full"
 >
-	<nav class="   px-2.5 pt-1.5 backdrop-blur-xl w-full drag-region select-none">
+	<nav class="   px-2.5 backdrop-blur-xl w-full drag-region select-none">
 		<div class=" flex items-center">
 			{#if $mobile}
 				<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center self-end">