diff --git a/src/lib/components/admin/Settings.svelte b/src/lib/components/admin/Settings.svelte
index 0f66575568..04c5332c37 100644
--- a/src/lib/components/admin/Settings.svelte
+++ b/src/lib/components/admin/Settings.svelte
@@ -24,9 +24,8 @@
 	import Integrations from './Settings/Integrations.svelte';
 	import Subagents from './Settings/Subagents.svelte';
 
-	import DocumentChartBar from '../icons/DocumentChartBar.svelte';
 	import Search from '../icons/Search.svelte';
-	import User from '../icons/User.svelte';
+	import AdminTabIcon from './Settings/AdminTabIcon.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -338,11 +337,15 @@
 <div class="flex flex-col lg:flex-row w-full h-full min-h-0 pb-2">
 	<nav
 		id="admin-settings-tabs-container"
-		class="shrink-0 min-w-0 lg:min-h-0 flex lg:block border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-white/6 lg:w-[15rem]"
+		class="shrink-0 min-w-0 lg:min-h-0 flex lg:block border-b lg:border-b-0 lg:border-r border-gray-100/30 dark:border-white/[0.02] lg:w-[15rem]"
 	>
 		<div
-			class="tabs flex min-w-0 flex-1 overflow-x-auto lg:overflow-x-hidden lg:overflow-y-auto lg:flex-col p-1 gap-px"
+			class="tabs flex min-w-0 flex-1 overflow-x-auto lg:overflow-x-hidden lg:overflow-y-auto lg:flex-col p-1 lg:pt-4 gap-px"
 		>
+			<span class="hidden lg:block text-[0.625rem] text-gray-400 dark:text-gray-600 px-2 mb-1">
+				{$i18n.t('Admin')}
+			</span>
+
 			<div
 				class="hidden lg:flex items-center gap-1.5 h-7 px-2 lg:w-full shrink-0 rounded-lg text-xs bg-gray-50/70 dark:bg-white/[0.03] mb-2"
 				id="settings-search"
@@ -360,12 +363,6 @@
 				/>
 			</div>
 
-			<span
-				class="hidden lg:block text-[0.625rem] text-gray-400 dark:text-gray-600 px-2 mt-1.5 mb-0.5"
-			>
-				{$i18n.t('Admin')}
-			</span>
-
 			<!-- {$i18n.t('General')} -->
 			<!-- {$i18n.t('Authentication')} -->
 			<!-- {$i18n.t('Connections')} -->
@@ -388,189 +385,7 @@
 					draggable="false"
 					class={tabButtonClass(selectedTab === tab.id)}
 				>
-					<div class="self-center">
-						{#if tab.id === 'general'}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
-								fill="currentColor"
-								class="w-4 h-4"
-							>
-								<path
-									fill-rule="evenodd"
-									d="M6.955 1.45A.5.5 0 0 1 7.452 1h1.096a.5.5 0 0 1 .497.45l.17 1.699c.484.12.94.312 1.356.562l1.321-1.081a.5.5 0 0 1 .67.033l.774.775a.5.5 0 0 1 .034.67l-1.08 1.32c.25.417.44.873.561 1.357l1.699.17a.5.5 0 0 1 .45.497v1.096a.5.5 0 0 1-.45.497l-1.699.17c-.12.484-.312.94-.562 1.356l1.082 1.322a.5.5 0 0 1-.034.67l-.774.774a.5.5 0 0 1-.67.033l-1.322-1.08c-.416.25-.872.44-1.356.561l-.17 1.699a.5.5 0 0 1-.497.45H7.452a.5.5 0 0 1-.497-.45l-.17-1.699a4.973 4.973 0 0 1-1.356-.562L4.108 13.37a.5.5 0 0 1-.67-.033l-.774-.775a.5.5 0 0 1-.034-.67l1.08-1.32a4.971 4.971 0 0 1-.561-1.357l-1.699-.17A.5.5 0 0 1 1 8.548V7.452a.5.5 0 0 1 .45-.497l1.699-.17c.12-.484.312-.94.562-1.356L2.629 4.107a.5.5 0 0 1 .034-.67l.774-.774a.5.5 0 0 1 .67-.033L5.43 3.71a4.97 4.97 0 0 1 1.356-.561l.17-1.699ZM6 8c0 .538.212 1.026.558 1.385l.057.057a2 2 0 0 0 2.828-2.828l-.058-.056A2 2 0 0 0 6 8Z"
-									clip-rule="evenodd"
-								/>
-							</svg>
-						{:else if tab.id === 'authentication'}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
-								fill="currentColor"
-								class="w-4 h-4"
-							>
-								<path
-									fill-rule="evenodd"
-									d="M8 1.5A3.5 3.5 0 0 0 4.5 5v1H4a2 2 0 0 0-2 2v4.5a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-.5V5A3.5 3.5 0 0 0 8 1.5ZM6 6V5a2 2 0 1 1 4 0v1H6Zm2 3a.75.75 0 0 0-.75.75v1a.75.75 0 0 0 1.5 0v-1A.75.75 0 0 0 8 9Z"
-									clip-rule="evenodd"
-								/>
-							</svg>
-						{:else if tab.id === 'connections'}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
-								fill="currentColor"
-								class="w-4 h-4"
-							>
-								<path
-									d="M1 9.5A3.5 3.5 0 0 0 4.5 13H12a3 3 0 0 0 .917-5.857 2.503 2.503 0 0 0-3.198-3.019 3.5 3.5 0 0 0-6.628 2.171A3.5 3.5 0 0 0 1 9.5Z"
-								/>
-							</svg>
-						{:else if tab.id === 'models'}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 20 20"
-								fill="currentColor"
-								class="w-4 h-4"
-							>
-								<path
-									fill-rule="evenodd"
-									d="M10 1c3.866 0 7 1.79 7 4s-3.134 4-7 4-7-1.79-7-4 3.134-4 7-4zm5.694 8.13c.464-.264.91-.583 1.306-.952V10c0 2.21-3.134 4-7 4s-7-1.79-7-4V8.178c.396.37.842.688 1.306.953C5.838 10.006 7.854 10.5 10 10.5s4.162-.494 5.694-1.37zM3 13.179V15c0 2.21 3.134 4 7 4s7-1.79 7-4v-1.822c-.396.37-.842.688-1.306.953-1.532.875-3.548 1.369-5.694 1.369s-4.162-.494-5.694-1.37A7.009 7.009 0 013 13.179z"
-									clip-rule="evenodd"
-								/>
-							</svg>
-						{:else if tab.id === 'evaluations'}
-							<DocumentChartBar />
-						{:else if tab.id === 'integrations'}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 24 24"
-								fill="currentColor"
-								class="size-4"
-							>
-								<path
-									fill-rule="evenodd"
-									d="M12 6.75a5.25 5.25 0 0 1 6.775-5.025.75.75 0 0 1 .313 1.248l-3.32 3.319c.063.475.276.934.641 1.299.365.365.824.578 1.3.64l3.318-3.319a.75.75 0 0 1 1.248.313 5.25 5.25 0 0 1-5.472 6.756c-1.018-.086-1.87.1-2.309.634L7.344 21.3A3.298 3.298 0 1 1 2.7 16.657l8.684-7.151c.533-.44.72-1.291.634-2.309A5.342 5.342 0 0 1 12 6.75ZM4.117 19.125a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75h-.008a.75.75 0 0 1-.75-.75v-.008Z"
-									clip-rule="evenodd"
-								/>
-							</svg>
-						{:else if tab.id === 'subagents'}
-							<User className="size-4" />
-						{:else if tab.id === 'documents'}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 24 24"
-								fill="currentColor"
-								class="w-4 h-4"
-							>
-								<path d="M11.625 16.5a1.875 1.875 0 1 0 0-3.75 1.875 1.875 0 0 0 0 3.75Z" />
-								<path
-									fill-rule="evenodd"
-									d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm6 16.5c.66 0 1.277-.19 1.797-.518l1.048 1.048a.75.75 0 0 0 1.06-1.06l-1.047-1.048A3.375 3.375 0 1 0 11.625 18Z"
-									clip-rule="evenodd"
-								/>
-								<path
-									d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z"
-								/>
-							</svg>
-						{:else if tab.id === 'web'}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 24 24"
-								fill="currentColor"
-								class="w-4 h-4"
-							>
-								<path
-									d="M21.721 12.752a9.711 9.711 0 0 0-.945-5.003 12.754 12.754 0 0 1-4.339 2.708 18.991 18.991 0 0 1-.214 4.772 17.165 17.165 0 0 0 5.498-2.477ZM14.634 15.55a17.324 17.324 0 0 0 .332-4.647c-.952.227-1.945.347-2.966.347-1.021 0-2.014-.12-2.966-.347a17.515 17.515 0 0 0 .332 4.647 17.385 17.385 0 0 0 5.268 0ZM9.772 17.119a18.963 18.963 0 0 0 4.456 0A17.182 17.182 0 0 1 12 21.724a17.18 17.18 0 0 1-2.228-4.605ZM7.777 15.23a18.87 18.87 0 0 1-.214-4.774 12.753 12.753 0 0 1-4.34-2.708 9.711 9.711 0 0 0-.944 5.004 17.165 17.165 0 0 0 5.498 2.477ZM21.356 14.752a9.765 9.765 0 0 1-7.478 6.817 18.64 18.64 0 0 0 1.988-4.718 18.627 18.627 0 0 0 5.49-2.098ZM2.644 14.752c1.682.971 3.53 1.688 5.49 2.099a18.64 18.64 0 0 0 1.988 4.718 9.765 9.765 0 0 1-7.478-6.816ZM13.878 2.43a9.755 9.755 0 0 1 6.116 3.986 11.267 11.267 0 0 1-3.746 2.504 18.63 18.63 0 0 0-2.37-6.49ZM12 2.276a17.152 17.152 0 0 1 2.805 7.121c-.897.23-1.837.353-2.805.353-.968 0-1.908-.122-2.805-.353A17.151 17.151 0 0 1 12 2.276ZM10.122 2.43a18.629 18.629 0 0 0-2.37 6.49 11.266 11.266 0 0 1-3.746-2.504 9.754 9.754 0 0 1 6.116-3.985Z"
-								/>
-							</svg>
-						{:else if tab.id === 'code-execution'}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
-								fill="currentColor"
-								class="size-4"
-							>
-								<path
-									fill-rule="evenodd"
-									d="M2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm2.22 1.97a.75.75 0 0 0 0 1.06l.97.97-.97.97a.75.75 0 1 0 1.06 1.06l1.5-1.5a.75.75 0 0 0 0-1.06l-1.5-1.5a.75.75 0 0 0-1.06 0ZM8.75 8.5a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 0-1.5h-2.5Z"
-									clip-rule="evenodd"
-								/>
-							</svg>
-						{:else if tab.id === 'interface'}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
-								fill="currentColor"
-								class="w-4 h-4"
-							>
-								<path
-									fill-rule="evenodd"
-									d="M2 4.25A2.25 2.25 0 0 1 4.25 2h7.5A2.25 2.25 0 0 1 14 4.25v5.5A2.25 2.25 0 0 1 11.75 12h-1.312c.1.128.21.248.328.36a.75.75 0 0 1 .234.545v.345a.75.75 0 0 1-.75.75h-4.5a.75.75 0 0 1-.75-.75v-.345a.75.75 0 0 1 .234-.545c.118-.111.228-.232.328-.36H4.25A2.25 2.25 0 0 1 2 9.75v-5.5Zm2.25-.75a.75.75 0 0 0-.75.75v4.5c0 .414.336.75.75.75h7.5a.75.75 0 0 0 .75-.75v-4.5a.75.75 0 0 0-.75-.75h-7.5Z"
-									clip-rule="evenodd"
-								/>
-							</svg>
-						{:else if tab.id === 'audio'}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
-								fill="currentColor"
-								class="w-4 h-4"
-							>
-								<path
-									d="M7.557 2.066A.75.75 0 0 1 8 2.75v10.5a.75.75 0 0 1-1.248.56L3.59 11H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.59l3.162-2.81a.75.75 0 0 1 .805-.124ZM12.95 3.05a.75.75 0 1 0-1.06 1.06 5.5 5.5 0 0 1 0 7.78.75.75 0 1 0 1.06 1.06 7 7 0 0 0 0-9.9Z"
-								/>
-								<path
-									d="M10.828 5.172a.75.75 0 1 0-1.06 1.06 2.5 2.5 0 0 1 0 3.536.75.75 0 1 0 1.06 1.06 4 4 0 0 0 0-5.656Z"
-								/>
-							</svg>
-						{:else if tab.id === 'images'}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
-								fill="currentColor"
-								class="w-4 h-4"
-							>
-								<path
-									fill-rule="evenodd"
-									d="M2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm10.5 5.707a.5.5 0 0 0-.146-.353l-1-1a.5.5 0 0 0-.708 0L9.354 9.646a.5.5 0 0 1-.708 0L6.354 7.354a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0-.146.353V12a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V9.707ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-									clip-rule="evenodd"
-								/>
-							</svg>
-						{:else if tab.id === 'pipelines'}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 24 24"
-								fill="currentColor"
-								class="size-4"
-							>
-								<path
-									d="M11.644 1.59a.75.75 0 0 1 .712 0l9.75 5.25a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.712 0l-9.75-5.25a.75.75 0 0 1 0-1.32l9.75-5.25Z"
-								/>
-								<path
-									d="m3.265 10.602 7.668 4.129a2.25 2.25 0 0 0 2.134 0l7.668-4.13 1.37.739a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.71 0l-9.75-5.25a.75.75 0 0 1 0-1.32l1.37-.738Z"
-								/>
-								<path
-									d="m10.933 19.231-7.668-4.13-1.37.739a.75.75 0 0 0 0 1.32l9.75 5.25c.221.12.489.12.71 0l9.75-5.25a.75.75 0 0 0 0-1.32l-1.37-.738-7.668 4.13a2.25 2.25 0 0 1-2.134-.001Z"
-								/>
-							</svg>
-						{:else if tab.id === 'db'}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
-								fill="currentColor"
-								class="w-4 h-4"
-							>
-								<path d="M8 7c3.314 0 6-1.343 6-3s-2.686-3-6-3-6 1.343-6 3 2.686 3 6 3Z" />
-								<path
-									d="M8 8.5c1.84 0 3.579-.37 4.914-1.037A6.33 6.33 0 0 0 14 6.78V8c0 1.657-2.686 3-6 3S2 9.657 2 8V6.78c.346.273.72.5 1.087.683C4.42 8.131 6.16 8.5 8 8.5Z"
-								/>
-								<path
-									d="M8 12.5c1.84 0 3.579-.37 4.914-1.037.366-.183.74-.41 1.086-.684V12c0 1.657-2.686 3-6 3s-6-1.343-6-3v-1.22c.346.273.72.5 1.087.683C4.42 12.131 6.16 12.5 8 12.5Z"
-								/>
-							</svg>
-						{/if}
-					</div>
+					<AdminTabIcon id={tab.id} className="size-3.5" strokeWidth="2" />
 					<div class="self-center truncate">{$i18n.t(tab.title)}</div>
 				</a>
 			{/each}
diff --git a/src/lib/components/admin/Settings/AdminTabIcon.svelte b/src/lib/components/admin/Settings/AdminTabIcon.svelte
new file mode 100644
index 0000000000..711f16c418
--- /dev/null
+++ b/src/lib/components/admin/Settings/AdminTabIcon.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+	import CodeBracket from '$lib/components/icons/CodeBracket.svelte';
+	import Computer from '$lib/components/icons/Computer.svelte';
+	import Database from '$lib/components/icons/Database.svelte';
+	import Document from '$lib/components/icons/Document.svelte';
+	import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
+	import Link from '$lib/components/icons/Link.svelte';
+	import Lock from '$lib/components/icons/Lock.svelte';
+	import Photo from '$lib/components/icons/Photo.svelte';
+	import QueueList from '$lib/components/icons/QueueList.svelte';
+	import SettingsAlt from '$lib/components/icons/SettingsAlt.svelte';
+	import SoundHigh from '$lib/components/icons/SoundHigh.svelte';
+	import UserCircle from '$lib/components/icons/UserCircle.svelte';
+	import WrenchAlt from '$lib/components/icons/WrenchAlt.svelte';
+
+	export let id: string;
+	export let className = 'size-3.5';
+	export let strokeWidth = '2';
+</script>
+
+{#if id === 'general'}
+	<SettingsAlt {className} {strokeWidth} />
+{:else if id === 'authentication'}
+	<Lock {className} {strokeWidth} />
+{:else if id === 'connections'}
+	<Link {className} {strokeWidth} />
+{:else if id === 'models'}
+	<svg
+		aria-hidden="true"
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke="currentColor"
+		stroke-width={strokeWidth}
+		class={className}
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M4 7.5C4 5.57 7.58 4 12 4s8 1.57 8 3.5S16.42 11 12 11 4 9.43 4 7.5Z"
+		/>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M4 7.5v4C4 13.43 7.58 15 12 15s8-1.57 8-3.5v-4"
+		/>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M4 11.5v4C4 17.43 7.58 19 12 19s8-1.57 8-3.5v-4"
+		/>
+	</svg>
+{:else if id === 'subagents'}
+	<UserCircle {className} {strokeWidth} />
+{:else if id === 'evaluations'}
+	<svg
+		aria-hidden="true"
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke="currentColor"
+		stroke-width={strokeWidth}
+		class={className}
+	>
+		<path stroke-linecap="round" stroke-linejoin="round" d="M5 20V10" />
+		<path stroke-linecap="round" stroke-linejoin="round" d="M12 20V4" />
+		<path stroke-linecap="round" stroke-linejoin="round" d="M19 20v-7" />
+	</svg>
+{:else if id === 'integrations'}
+	<WrenchAlt {className} {strokeWidth} />
+{:else if id === 'documents'}
+	<Document {className} {strokeWidth} />
+{:else if id === 'web'}
+	<GlobeAlt {className} {strokeWidth} />
+{:else if id === 'code-execution'}
+	<CodeBracket {className} {strokeWidth} />
+{:else if id === 'interface'}
+	<Computer {className} {strokeWidth} />
+{:else if id === 'audio'}
+	<SoundHigh {className} {strokeWidth} />
+{:else if id === 'images'}
+	<Photo {className} {strokeWidth} />
+{:else if id === 'pipelines'}
+	<QueueList {className} {strokeWidth} />
+{:else if id === 'db'}
+	<Database {className} {strokeWidth} />
+{/if}
diff --git a/src/lib/components/admin/Settings/Audio.svelte b/src/lib/components/admin/Settings/Audio.svelte
index f3edc332c1..7cb4047e98 100644
--- a/src/lib/components/admin/Settings/Audio.svelte
+++ b/src/lib/components/admin/Settings/Audio.svelte
@@ -236,9 +236,11 @@
 	<div class=" space-y-3 flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5 -mr-1.5">
 		<div class="flex flex-col gap-3">
 			<div>
-				<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Speech-to-Text')}</div>
+				<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+					{$i18n.t('Speech-to-Text')}
+				</div>
 
-				<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+				<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 				{#if STT_ENGINE !== 'web'}
 					<div class="mb-2">
@@ -289,7 +291,7 @@
 						</div>
 					</div>
 
-					<hr class="border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class="border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div class="mb-2 py-0.5 flex w-full justify-between">
 						<div class=" self-center text-xs font-normal">{$i18n.t('Request Format')}</div>
@@ -304,7 +306,7 @@
 						</div>
 					</div>
 
-					<hr class="border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class="border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div>
 						<div class=" mb-1.5 text-xs font-normal">{$i18n.t('STT Model')}</div>
@@ -330,7 +332,7 @@
 						</div>
 					</div>
 
-					<hr class="border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class="border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div>
 						<div class=" mb-1.5 text-xs font-normal">{$i18n.t('STT Model')}</div>
@@ -364,7 +366,7 @@
 							/>
 						</div>
 
-						<hr class="border-gray-100/30 dark:border-gray-850/30 my-2" />
+						<hr class="border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 						<div>
 							<div class=" mb-1.5 text-xs font-normal">{$i18n.t('Azure Region')}</div>
@@ -432,7 +434,7 @@
 						</div>
 					</div>
 
-					<hr class="border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class="border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div>
 						<div class=" mb-1.5 text-xs font-normal">{$i18n.t('STT Model')}</div>
@@ -457,7 +459,7 @@
 						</div>
 					</div>
 
-					<hr class="border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class="border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div>
 						<div class="flex items-center justify-between mb-2">
@@ -539,9 +541,11 @@
 			</div>
 
 			<div>
-				<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Text-to-Speech')}</div>
+				<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+					{$i18n.t('Text-to-Speech')}
+				</div>
 
-				<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+				<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 				<div class="mb-2 py-0.5 flex w-full justify-between">
 					<div class=" self-center text-xs font-normal">{$i18n.t('Text-to-Speech Engine')}</div>
@@ -602,7 +606,7 @@
 							<SensitiveInput placeholder={$i18n.t('API Key')} bind:value={TTS_API_KEY} required />
 						</div>
 
-						<hr class="border-gray-100/30 dark:border-gray-850/30 my-2" />
+						<hr class="border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 						<div>
 							<div class=" mb-1.5 text-xs font-normal">{$i18n.t('Azure Region')}</div>
diff --git a/src/lib/components/admin/Settings/Authentication.svelte b/src/lib/components/admin/Settings/Authentication.svelte
index 7ba46c5437..edd70e56a4 100644
--- a/src/lib/components/admin/Settings/Authentication.svelte
+++ b/src/lib/components/admin/Settings/Authentication.svelte
@@ -114,9 +114,11 @@
 	<div class="space-y-3 flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5 -mr-1.5">
 		{#if adminConfig !== null}
 			<div class="mb-3">
-				<div class="mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('User Access')}</div>
+				<div class="mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+					{$i18n.t('User Access')}
+				</div>
 
-				<hr class="border-gray-100/30 dark:border-gray-850/30 my-2" />
+				<hr class="border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 				<div class="  mb-2.5 flex w-full justify-between">
 					<div class=" self-center text-xs font-normal">{$i18n.t('Default User Role')}</div>
@@ -237,9 +239,11 @@
 						</div>
 					{/if}
 				</div>
-				<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Pending Accounts')}</div>
+				<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+					{$i18n.t('Pending Accounts')}
+				</div>
 
-				<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+				<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 				<div class="mb-2.5 flex w-full items-center justify-between pr-2">
 					<div class=" self-center text-xs font-normal">
@@ -502,9 +506,11 @@
 		</div>
 		{#if oauthConfig}
 			<div class="mb-3">
-				<div class="mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('OAuth / OIDC')}</div>
+				<div class="mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+					{$i18n.t('OAuth / OIDC')}
+				</div>
 
-				<hr class="border-gray-100/30 dark:border-gray-850/30 my-2" />
+				<hr class="border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 				<div class="pr-1.5">
 					<div class="space-y-3">
diff --git a/src/lib/components/admin/Settings/CodeExecution.svelte b/src/lib/components/admin/Settings/CodeExecution.svelte
index 698a30b15b..dea0997802 100644
--- a/src/lib/components/admin/Settings/CodeExecution.svelte
+++ b/src/lib/components/admin/Settings/CodeExecution.svelte
@@ -41,9 +41,11 @@
 		{#if config}
 			<div>
 				<div class="mb-3.5">
-					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Code Execution')}</div>
+					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('Code Execution')}
+					</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div class="mb-2.5">
 						<div class=" flex w-full justify-between">
@@ -170,9 +172,11 @@
 				</div>
 
 				<div class="mb-3.5">
-					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Code Interpreter')}</div>
+					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('Code Interpreter')}
+					</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div class="mb-2.5">
 						<div class=" flex w-full justify-between">
@@ -296,7 +300,7 @@
 							</div>
 						{/if}
 
-						<hr class="border-gray-100/30 dark:border-gray-850/30 my-2" />
+						<hr class="border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 						<div>
 							<div class="py-0.5 w-full">
diff --git a/src/lib/components/admin/Settings/Connections.svelte b/src/lib/components/admin/Settings/Connections.svelte
index 5c94e9237e..474bcdb079 100644
--- a/src/lib/components/admin/Settings/Connections.svelte
+++ b/src/lib/components/admin/Settings/Connections.svelte
@@ -219,9 +219,11 @@
 	<div class=" flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5 -mr-1.5">
 		{#if ENABLE_OPENAI_API !== null && ENABLE_OLLAMA_API !== null && connectionsConfig !== null}
 			<div class="mb-3.5">
-				<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('General')}</div>
+				<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+					{$i18n.t('General')}
+				</div>
 
-				<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+				<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 				<div class="my-2">
 					<div class="mt-2 space-y-2">
@@ -384,7 +386,7 @@
 					</div>
 				</div>
 
-				<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+				<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 				<div class="my-2">
 					<div class="flex justify-between items-center text-sm">
diff --git a/src/lib/components/admin/Settings/Documents.svelte b/src/lib/components/admin/Settings/Documents.svelte
index 447fbd4d27..740bf86241 100644
--- a/src/lib/components/admin/Settings/Documents.svelte
+++ b/src/lib/components/admin/Settings/Documents.svelte
@@ -376,9 +376,11 @@
 		<div class=" space-y-2.5 flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5 -mr-1.5">
 			<div class="">
 				<div class="mb-3">
-					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('General')}</div>
+					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('General')}
+					</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div class="mb-2.5 flex flex-col w-full justify-between">
 						<div class="flex w-full justify-between mb-1">
@@ -1036,9 +1038,11 @@
 
 				{#if !RAGConfig.BYPASS_EMBEDDING_AND_RETRIEVAL}
 					<div class="mb-3">
-						<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Embedding')}</div>
+						<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+							{$i18n.t('Embedding')}
+						</div>
 
-						<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+						<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 						<div class="  mb-2.5 flex flex-col w-full justify-between">
 							<div class="flex w-full justify-between">
@@ -1250,9 +1254,11 @@
 				{/if}
 
 				<div class="mb-3">
-					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Retrieval')}</div>
+					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('Retrieval')}
+					</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					{#if !RAGConfig.BYPASS_EMBEDDING_AND_RETRIEVAL}
 						<div class="  mb-2.5 flex w-full justify-between">
@@ -1532,9 +1538,11 @@
 				</div>
 
 				<div class="mb-3">
-					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Files')}</div>
+					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('Files')}
+					</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div class="  mb-2.5 flex w-full justify-between">
 						<div class=" self-center text-xs font-normal">{$i18n.t('Allowed File Extensions')}</div>
@@ -1644,9 +1652,11 @@
 				</div>
 
 				<div class="mb-3">
-					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Integration')}</div>
+					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('Integration')}
+					</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div class="  mb-2.5 flex w-full justify-between">
 						<div class=" self-center text-xs font-normal">{$i18n.t('Google Drive')}</div>
@@ -1664,9 +1674,11 @@
 				</div>
 
 				<div class="mb-3">
-					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Danger Zone')}</div>
+					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('Danger Zone')}
+					</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div class="  mb-2.5 flex w-full justify-between">
 						<div class=" self-center text-xs font-normal">{$i18n.t('Reset Upload Directory')}</div>
diff --git a/src/lib/components/admin/Settings/Evaluations.svelte b/src/lib/components/admin/Settings/Evaluations.svelte
index 6a31e7c06d..124fba0075 100644
--- a/src/lib/components/admin/Settings/Evaluations.svelte
+++ b/src/lib/components/admin/Settings/Evaluations.svelte
@@ -104,9 +104,11 @@
 		{#if evaluationConfig !== null}
 			<div class="">
 				<div class="mb-3">
-					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('General')}</div>
+					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('General')}
+					</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div class="mb-2.5 flex w-full justify-between">
 						<div class=" text-xs font-normal">{$i18n.t('Arena Models')}</div>
@@ -119,7 +121,9 @@
 
 				{#if evaluationConfig.ENABLE_EVALUATION_ARENA_MODELS}
 					<div class="mb-3">
-						<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600 flex justify-between items-center">
+						<div
+							class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600 flex justify-between items-center"
+						>
 							<div>
 								{$i18n.t('Manage')}
 							</div>
@@ -139,7 +143,7 @@
 							</div>
 						</div>
 
-						<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+						<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 						<div class="flex flex-col gap-2">
 							{#if (evaluationConfig?.EVALUATION_ARENA_MODELS ?? []).length > 0}
diff --git a/src/lib/components/admin/Settings/Events.svelte b/src/lib/components/admin/Settings/Events.svelte
index bc688cf694..b692d04658 100644
--- a/src/lib/components/admin/Settings/Events.svelte
+++ b/src/lib/components/admin/Settings/Events.svelte
@@ -392,7 +392,7 @@
 <Modal bind:show={showWebhookModal} size="sm">
 	<div>
 		<div class="flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
-			<h1 class="text-lg font-normal self-center ">
+			<h1 class="text-lg font-normal self-center">
 				{editing ? $i18n.t('Edit webhook') : $i18n.t('Add webhook')}
 			</h1>
 
@@ -688,8 +688,8 @@
 />
 
 <div class="mb-3">
-	<div class="mt-0.5 mb-2.5 text-base font-normal">{$i18n.t('Events')}</div>
-	<hr class="border-gray-100/30 dark:border-gray-850/30 my-2" />
+	<div class="mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Events')}</div>
+	<hr class="border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 	<div class="mb-2.5 flex flex-col w-full justify-between">
 		<div class="flex justify-between items-center mb-1">
diff --git a/src/lib/components/admin/Settings/General.svelte b/src/lib/components/admin/Settings/General.svelte
index 1bb505cbbc..fab9994bf0 100644
--- a/src/lib/components/admin/Settings/General.svelte
+++ b/src/lib/components/admin/Settings/General.svelte
@@ -81,9 +81,11 @@
 		{#if adminConfig !== null}
 			<div class="">
 				<div class="mb-3.5">
-					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('General')}</div>
+					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('General')}
+					</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div class="mb-2.5">
 						<div class=" mb-1 text-xs font-normal flex space-x-2 items-center">
@@ -239,9 +241,11 @@
 				</div>
 
 				<div class="mb-3">
-					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Features')}</div>
+					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('Features')}
+					</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div class="mb-2.5 flex w-full items-center justify-between pr-2">
 						<div class=" self-center text-xs font-normal">
@@ -392,7 +396,7 @@
 				<div class="mb-3.5">
 					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('UI')}</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div class="mb-2.5">
 						<div class="flex w-full justify-between">
diff --git a/src/lib/components/admin/Settings/Images.svelte b/src/lib/components/admin/Settings/Images.svelte
index 6569b7613c..85976f0df9 100644
--- a/src/lib/components/admin/Settings/Images.svelte
+++ b/src/lib/components/admin/Settings/Images.svelte
@@ -293,9 +293,11 @@
 		{#if config}
 			<div>
 				<div class="mb-3">
-					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('General')}</div>
+					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('General')}
+					</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div class="mb-2.5">
 						<div class="flex w-full justify-between items-center">
@@ -311,9 +313,11 @@
 				</div>
 
 				<div class="mb-3">
-					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Create Image')}</div>
+					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('Create Image')}
+					</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					{#if config.ENABLE_IMAGE_GENERATION}
 						<div class="mb-2.5">
@@ -884,9 +888,11 @@
 				</div>
 
 				<div class="mb-3">
-					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Edit Image')}</div>
+					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('Edit Image')}
+					</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div class="mb-2.5">
 						<div class="flex w-full justify-between items-center">
diff --git a/src/lib/components/admin/Settings/Integrations.svelte b/src/lib/components/admin/Settings/Integrations.svelte
index 39525f65d9..6c07a23488 100644
--- a/src/lib/components/admin/Settings/Integrations.svelte
+++ b/src/lib/components/admin/Settings/Integrations.svelte
@@ -164,9 +164,11 @@
 		{#if servers !== null}
 			<div class="">
 				<div class="mb-3">
-					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Tools')}</div>
+					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('Tools')}
+					</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div class="mb-2.5 flex flex-col w-full justify-between">
 						<div class="flex justify-between items-center mb-0.5">
@@ -309,9 +311,11 @@
 						</div>
 					</div>
 
-					<div class="mt-8 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Knowledge')}</div>
+					<div class="mt-8 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('Knowledge')}
+					</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<ExternalKnowledge />
 				</div>
diff --git a/src/lib/components/admin/Settings/Interface.svelte b/src/lib/components/admin/Settings/Interface.svelte
index 2ca39471f9..c51e74c083 100644
--- a/src/lib/components/admin/Settings/Interface.svelte
+++ b/src/lib/components/admin/Settings/Interface.svelte
@@ -108,9 +108,11 @@
 	>
 		<div class="  flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5 -mr-1.5">
 			<div class="mb-3.5">
-				<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Tasks')}</div>
+				<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+					{$i18n.t('Tasks')}
+				</div>
 
-				<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+				<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 				<div class=" mb-2 font-normal flex items-center">
 					<div class=" text-xs mr-1">{$i18n.t('Task Model')}</div>
@@ -224,7 +226,7 @@
 					</div>
 				</div>
 
-				<hr class=" border-gray-100/30 dark:border-gray-850/30 my-3" />
+				<hr class=" border-gray-100/20 dark:border-white/[0.025] my-3" />
 
 				<div class="mb-2.5 flex w-full items-center justify-between">
 					<div class=" self-center text-xs font-normal">
@@ -298,7 +300,7 @@
 					</div>
 				{/if}
 
-				<hr class=" border-gray-100/30 dark:border-gray-850/30 my-3" />
+				<hr class=" border-gray-100/20 dark:border-white/[0.025] my-3" />
 
 				<div class="mb-2.5 flex w-full items-center justify-between">
 					<div class=" self-center text-xs font-normal">
diff --git a/src/lib/components/admin/Settings/Models.svelte b/src/lib/components/admin/Settings/Models.svelte
index 8410580584..54a4ba0b81 100644
--- a/src/lib/components/admin/Settings/Models.svelte
+++ b/src/lib/components/admin/Settings/Models.svelte
@@ -484,7 +484,7 @@
 		</div>
 
 		<div
-			class="py-2 bg-white dark:bg-gray-900 rounded-3xl border border-gray-100/30 dark:border-gray-850/30"
+			class="py-2 bg-white dark:bg-gray-900 rounded-3xl border border-gray-100/20 dark:border-white/[0.025]"
 		>
 			<div class="px-3.5 flex flex-1 items-center w-full space-x-2 py-0.5 pb-2">
 				<div class="flex flex-1 items-center">
@@ -564,7 +564,7 @@
 								<div class="flex items-center">{$i18n.t('Disable All')}</div>
 							</button>
 
-							<hr class="border-gray-100 dark:border-gray-800 my-1" />
+							<hr class="border-gray-100/40 dark:border-white/[0.03] my-1" />
 
 							<button
 								class="select-none flex w-full gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl"
diff --git a/src/lib/components/admin/Settings/Pipelines.svelte b/src/lib/components/admin/Settings/Pipelines.svelte
index cfcd13148b..64d9b52ba9 100644
--- a/src/lib/components/admin/Settings/Pipelines.svelte
+++ b/src/lib/components/admin/Settings/Pipelines.svelte
@@ -418,7 +418,7 @@
 					</div>
 				</div>
 
-				<hr class="border-gray-100/30 dark:border-gray-850/30 my-3 w-full" />
+				<hr class="border-gray-100/20 dark:border-white/[0.025] my-3 w-full" />
 
 				{#if pipelines !== null}
 					{#if pipelines.length > 0}
diff --git a/src/lib/components/admin/Settings/WebSearch.svelte b/src/lib/components/admin/Settings/WebSearch.svelte
index 93f0c9878a..cb891be37f 100644
--- a/src/lib/components/admin/Settings/WebSearch.svelte
+++ b/src/lib/components/admin/Settings/WebSearch.svelte
@@ -154,9 +154,11 @@
 		{#if webConfig}
 			<div class="">
 				<div class="mb-3">
-					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('General')}</div>
+					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('General')}
+					</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div class="  mb-2.5 flex w-full justify-between">
 						<div class=" self-center text-xs font-normal">
@@ -1137,9 +1139,11 @@
 				</div>
 
 				<div class="mb-3">
-					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Loader')}</div>
+					<div class=" mt-0.5 mb-2.5 text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('Loader')}
+					</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
+					<hr class=" border-gray-100/20 dark:border-white/[0.025] my-2" />
 
 					<div class="  mb-2.5 flex w-full justify-between">
 						<div class=" self-center text-xs font-normal">
diff --git a/src/lib/components/chat/Settings/About.svelte b/src/lib/components/chat/Settings/About.svelte
index c5819d5b42..da02daa485 100644
--- a/src/lib/components/chat/Settings/About.svelte
+++ b/src/lib/components/chat/Settings/About.svelte
@@ -98,7 +98,7 @@
 		</div>
 
 		{#if ollamaVersion}
-			<hr class=" border-gray-100/30 dark:border-gray-850/30" />
+			<hr class=" border-gray-100/20 dark:border-white/[0.025]" />
 
 			<div>
 				<div class="text-xs text-gray-400 dark:text-gray-600 mb-2.5">
@@ -112,7 +112,7 @@
 			</div>
 		{/if}
 
-		<hr class=" border-gray-100/30 dark:border-gray-850/30" />
+		<hr class=" border-gray-100/20 dark:border-white/[0.025]" />
 
 		{#if $config?.license_metadata}
 			<div class="mb-2 text-xs">
diff --git a/src/lib/components/chat/Settings/Audio.svelte b/src/lib/components/chat/Settings/Audio.svelte
index a816ea5d19..478725a40d 100644
--- a/src/lib/components/chat/Settings/Audio.svelte
+++ b/src/lib/components/chat/Settings/Audio.svelte
@@ -319,7 +319,7 @@
 			</div>
 		</div>
 
-		<hr class=" border-gray-100/30 dark:border-gray-850/30" />
+		<hr class=" border-gray-100/20 dark:border-white/[0.025]" />
 
 		{#if TTSEngine === 'browser-kokoro'}
 			{#if TTSModel}
diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index 6a01dbffc1..9de08fe474 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -296,7 +296,7 @@
 		</div>
 
 		{#if $user?.role === 'admin' || (($user?.permissions.chat?.controls ?? true) && ($user?.permissions.chat?.system_prompt ?? true))}
-			<hr class="border-gray-100/30 dark:border-gray-850/30 my-3" />
+			<hr class="border-gray-100/20 dark:border-white/[0.025] my-3" />
 
 			<div>
 				<div class="text-xs text-gray-400 dark:text-gray-600 my-2.5">
diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index ce06653413..77b4fbe1e6 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -597,7 +597,7 @@
 >
 	<nav
 		id="settings-tabs-container"
-		class="shrink-0 min-w-0 md:min-h-0 flex md:block border-b md:border-b-0 md:border-r border-gray-200 dark:border-white/6 md:w-[15rem]"
+		class="shrink-0 min-w-0 md:min-h-0 flex md:block border-b md:border-b-0 md:border-r border-gray-100/30 dark:border-white/[0.02] md:w-[15rem]"
 	>
 		<button
 			class="flex items-center gap-1.5 h-7 px-2 m-1 md:mb-0 md:w-[calc(100%-0.5rem)] shrink-0 rounded-lg text-xs text-gray-400 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-75"
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 9bafd2e2c0..b7256120bf 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -1006,7 +1006,7 @@
 				: 'invisible'}"
 		>
 			<div
-				class="sidebar px-1.5 pt-1.5 pb-1 flex justify-between space-x-1 text-gray-600 dark:text-gray-400 sticky top-0 z-10 -mb-2"
+				class="sidebar px-1 pt-1.5 pb-1 flex justify-between space-x-1 text-gray-600 dark:text-gray-400 sticky top-0 z-10 -mb-2"
 			>
 				<a
 					class="flex items-center rounded-xl size-8.5 h-full justify-center hover:bg-gray-100/50 dark:hover:bg-gray-850/50 transition no-drag-region"
@@ -1067,10 +1067,10 @@
 				}}
 			>
 				<div class="pb-1">
-					<div class="px-1.5 flex justify-center text-gray-800 dark:text-gray-200">
+					<div class="px-1 flex justify-center text-gray-800 dark:text-gray-200">
 						<a
 							id="sidebar-new-chat-button"
-							class="group grow flex items-center space-x-2.5 rounded-xl px-2.5 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-900 transition outline-none"
+							class="group grow flex items-center space-x-2 rounded-xl px-2 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-900 transition outline-none"
 							href="/"
 							draggable="false"
 							on:click={newChatHandler}
@@ -1088,10 +1088,10 @@
 						</a>
 					</div>
 
-					<div class="px-1.5 flex justify-center text-gray-800 dark:text-gray-200">
+					<div class="px-1 flex justify-center text-gray-800 dark:text-gray-200">
 						<button
 							id="sidebar-search-button"
-							class="group grow flex items-center space-x-2.5 rounded-xl px-2.5 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-900 transition outline-none"
+							class="group grow flex items-center space-x-2 rounded-xl px-2 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-900 transition outline-none"
 							on:click={() => {
 								showSearch.set(true);
 							}}
@@ -1114,12 +1114,12 @@
 							{@const meta = getMenuItemMeta(itemId)}
 							{#if meta && isMenuItemVisible(itemId)}
 								<div
-									class="px-1.5 flex justify-center text-gray-800 dark:text-gray-200"
+									class="px-1 flex justify-center text-gray-800 dark:text-gray-200"
 									data-id={itemId}
 								>
 									<a
 										id="sidebar-{itemId}-button"
-										class="grow flex items-center space-x-2.5 rounded-xl px-2.5 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+										class="grow flex items-center space-x-2 rounded-xl px-2 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
 										href={meta.href}
 										on:click={itemClickHandler}
 										draggable="false"
@@ -1556,7 +1556,7 @@
 				</SidebarSection>
 			</div>
 
-			<div class="px-1.5 pt-1 pb-1.5 sticky bottom-0 z-10 -mt-2 sidebar">
+			<div class="px-1 pt-1 pb-1.5 sticky bottom-0 z-10 -mt-2 sidebar">
 				<div
 					class=" sidebar-bg-gradient-to-t bg-linear-to-t from-gray-50 dark:from-gray-950 to-transparent from-50% pointer-events-none absolute inset-0 -z-10 -mt-6"
 				></div>
@@ -1569,7 +1569,7 @@
 						>
 							<button
 								type="button"
-								class=" flex items-center rounded-xl py-2 px-1.5 w-full hover:bg-gray-100/50 dark:hover:bg-gray-900/50 transition"
+								class=" flex items-center rounded-xl py-2 px-1 w-full hover:bg-gray-100/50 dark:hover:bg-gray-900/50 transition"
 								aria-label={$i18n.t('User menu')}
 							>
 								<div class=" self-center mr-3 relative flex-shrink-0">
diff --git a/src/lib/components/layout/Sidebar/ChatItem.svelte b/src/lib/components/layout/Sidebar/ChatItem.svelte
index 58ccbcfb2d..a0bd4bc8f1 100644
--- a/src/lib/components/layout/Sidebar/ChatItem.svelte
+++ b/src/lib/components/layout/Sidebar/ChatItem.svelte
@@ -453,8 +453,7 @@
 	{#if confirmEdit}
 		<div
 			id="sidebar-chat-item"
-			class=" w-full flex justify-between rounded-xl px-[11px] py-[6px] {id === $chatId ||
-			confirmEdit
+			class=" w-full flex justify-between rounded-xl px-2 py-[6px] {id === $chatId || confirmEdit
 				? ($settings?.highContrastMode ?? false)
 					? 'bg-gray-100 dark:bg-gray-800 selected'
 					: 'bg-gray-100 dark:bg-gray-900 selected'
@@ -493,8 +492,7 @@
 	{:else}
 		<a
 			id="sidebar-chat-item"
-			class=" w-full flex justify-between rounded-xl px-[11px] py-[6px] {id === $chatId ||
-			confirmEdit
+			class=" w-full flex justify-between rounded-xl px-2 py-[6px] {id === $chatId || confirmEdit
 				? ($settings?.highContrastMode ?? false)
 					? 'bg-gray-100 dark:bg-gray-800 selected'
 					: 'bg-gray-100 dark:bg-gray-900 selected'
diff --git a/src/lib/components/layout/Sidebar/PinnedModelItem.svelte b/src/lib/components/layout/Sidebar/PinnedModelItem.svelte
index c45277a4ae..c5404c52a8 100644
--- a/src/lib/components/layout/Sidebar/PinnedModelItem.svelte
+++ b/src/lib/components/layout/Sidebar/PinnedModelItem.svelte
@@ -29,7 +29,7 @@
 		}}
 	>
 		<a
-			class="grow flex items-center space-x-2.5 rounded-xl px-2.5 py-[7px] group-hover:bg-gray-100 dark:group-hover:bg-gray-900 transition"
+			class="grow flex items-center space-x-2 rounded-xl px-2 py-[7px] group-hover:bg-gray-100 dark:group-hover:bg-gray-900 transition"
 			href="/?model={model?.id}"
 			on:click={onClick}
 			draggable="false"
@@ -46,7 +46,7 @@
 			</div>
 
 			<div class="flex self-center translate-y-[0.5px]">
-				<div class=" self-center text-sm  line-clamp-1">
+				<div class=" self-center text-sm line-clamp-1">
 					{model?.name ?? model.id}
 				</div>
 			</div>
diff --git a/src/lib/components/layout/Sidebar/PinnedNoteList.svelte b/src/lib/components/layout/Sidebar/PinnedNoteList.svelte
index 7b5223365b..92abc54127 100644
--- a/src/lib/components/layout/Sidebar/PinnedNoteList.svelte
+++ b/src/lib/components/layout/Sidebar/PinnedNoteList.svelte
@@ -62,7 +62,7 @@
 	{#each sortedPinnedNotes as note (note.id)}
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
-			class="flex items-center text-gray-800 dark:text-gray-200 cursor-grab relative group rounded-xl px-2.5 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+			class="flex items-center text-gray-800 dark:text-gray-200 cursor-grab relative group rounded-xl px-2 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
 			data-id={note.id}
 		>
 			<a