diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index d1908af243..49b21aa35b 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/src/lib/components/chat/Chat.svelte
@@ -1059,14 +1059,6 @@
 			$models.map((m) => m.id).includes(modelId) ? modelId : ''
 		);
 
-		const userSettings = await getUserSettings(localStorage.token);
-
-		if (userSettings) {
-			settings.set(userSettings.ui);
-		} else {
-			settings.set(JSON.parse(localStorage.getItem('settings') ?? '{}'));
-		}
-
 		const chatInput = document.getElementById('chat-input');
 		setTimeout(() => chatInput?.focus(), 0);
 	};
@@ -1111,14 +1103,6 @@
 
 				chatTitle.set(chatContent.title);
 
-				const userSettings = await getUserSettings(localStorage.token);
-
-				if (userSettings) {
-					await settings.set(userSettings.ui);
-				} else {
-					await settings.set(JSON.parse(localStorage.getItem('settings') ?? '{}'));
-				}
-
 				params = chatContent?.params ?? {};
 				chatFiles = chatContent?.files ?? [];
 
diff --git a/src/lib/components/chat/Settings/Interface.svelte b/src/lib/components/chat/Settings/Interface.svelte
index 632602d22e..80942a09eb 100644
--- a/src/lib/components/chat/Settings/Interface.svelte
+++ b/src/lib/components/chat/Settings/Interface.svelte
@@ -5,19 +5,14 @@
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import { updateUserInfo } from '$lib/apis/users';
 	import { getUserPosition } from '$lib/utils';
+	import { setTextScale } from '$lib/utils/text-scale';
+
 	import Minus from '$lib/components/icons/Minus.svelte';
 	import Plus from '$lib/components/icons/Plus.svelte';
 	import Switch from '$lib/components/common/Switch.svelte';
 	import ManageFloatingActionButtonsModal from './Interface/ManageFloatingActionButtonsModal.svelte';
 	import ManageImageCompressionModal from './Interface/ManageImageCompressionModal.svelte';
-	import {
-		DEFAULT_TEXT_SCALE_INDEX,
-		TEXT_SCALE_MAX,
-		TEXT_SCALE_MIN,
-		TEXT_SCALE_VALUES,
-		findClosestTextScaleIndex,
-		getScaleFromIndex
-	} from '$lib/utils/text-scale';
+
 	const dispatch = createEventDispatcher();
 
 	const i18n = getContext('i18n');
@@ -105,45 +100,7 @@
 	let showManageFloatingActionButtonsModal = false;
 	let showManageImageCompressionModal = false;
 
-	let textScaleIndex = DEFAULT_TEXT_SCALE_INDEX;
-	let unsubscribeTextScale: (() => void) | undefined;
-
-	const persistTextScale = () => {
-		const scale = getScaleFromIndex(textScaleIndex);
-
-		if ($settings?.textScale === scale) {
-			return;
-		}
-
-		saveSettings({ textScale: scale });
-	};
-
-	const decreaseTextScale = () => {
-		const previous = textScaleIndex;
-		textScaleIndex = Math.max(0, textScaleIndex - 1);
-
-		if (textScaleIndex === previous) {
-			return;
-		}
-
-		persistTextScale();
-	};
-
-	const increaseTextScale = () => {
-		const previous = textScaleIndex;
-		textScaleIndex = Math.min(TEXT_SCALE_VALUES.length - 1, textScaleIndex + 1);
-
-		if (textScaleIndex === previous) {
-			return;
-		}
-
-		persistTextScale();
-	};
-
-	$: currentTextScale = getScaleFromIndex(textScaleIndex);
-	$: textScaleDisplay = Number.isInteger(currentTextScale)
-		? `${currentTextScale.toFixed(0)}`
-		: `${currentTextScale.toFixed(1)}`;
+	let textScale = null;
 
 	const toggleLandingPageMode = async () => {
 		landingPageMode = landingPageMode === '' ? 'chat' : '';
@@ -227,6 +184,12 @@
 		saveSettings({ webSearch: webSearch });
 	};
 
+	const setTextScaleHandler = (scale) => {
+		textScale = scale;
+		setTextScale(textScale);
+		saveSettings({ textScale });
+	};
+
 	onMount(async () => {
 		titleAutoGenerate = $settings?.title?.auto ?? true;
 		autoTags = $settings?.autoTags ?? true;
@@ -301,19 +264,7 @@
 		backgroundImageUrl = $settings?.backgroundImageUrl ?? null;
 		webSearch = $settings?.webSearch ?? null;
 
-		textScaleIndex = findClosestTextScaleIndex($settings?.textScale ?? 1);
-
-		unsubscribeTextScale = settings.subscribe((uiSettings) => {
-			const nextScaleIndex = findClosestTextScaleIndex(uiSettings?.textScale ?? 1);
-
-			if (nextScaleIndex !== textScaleIndex) {
-				textScaleIndex = nextScaleIndex;
-			}
-		});
-	});
-
-	onDestroy(() => {
-		unsubscribeTextScale?.();
+		textScale = $settings?.textScale ?? null;
 	});
 </script>
 
@@ -382,7 +333,7 @@
 						</label>
 
 						<div class="flex items-center gap-1 text-xs px-1" aria-live="polite">
-							<span>{textScaleDisplay}x</span>
+							<span>{textScale}x</span>
 						</div>
 					</div>
 
@@ -390,7 +341,10 @@
 						<button
 							type="button"
 							class="rounded-lg p-1 transition outline-gray-200 hover:bg-gray-100 dark:outline-gray-700 dark:hover:bg-gray-800"
-							on:click={decreaseTextScale}
+							on:click={() => {
+								textScale = Math.max(1, textScale);
+								setTextScaleHandler(textScale);
+							}}
 							aria-labelledby="ui-scale-label"
 							aria-label={$i18n.t('Decrease UI Scale')}
 						>
@@ -402,23 +356,28 @@
 								id="ui-scale-slider"
 								class="w-full"
 								type="range"
-								min={0}
-								max={TEXT_SCALE_VALUES.length - 1}
-								step={1}
-								bind:value={textScaleIndex}
-								on:change={persistTextScale}
+								min="1"
+								max="1.5"
+								step={0.01}
+								bind:value={textScale}
+								on:change={() => {
+									setTextScaleHandler(textScale);
+								}}
 								aria-labelledby="ui-scale-label"
-								aria-valuemin={TEXT_SCALE_MIN}
-								aria-valuemax={TEXT_SCALE_MAX}
-								aria-valuenow={currentTextScale}
-								aria-valuetext={`${textScaleDisplay}x`}
+								aria-valuemin="1"
+								aria-valuemax="1.5"
+								aria-valuenow={textScale}
+								aria-valuetext={`${textScale}x`}
 							/>
 						</div>
 
 						<button
 							type="button"
 							class="rounded-lg p-1 transition outline-gray-200 hover:bg-gray-100 dark:outline-gray-700 dark:hover:bg-gray-800"
-							on:click={increaseTextScale}
+							on:click={() => {
+								textScale = Math.min(1.5, textScale);
+								setTextScaleHandler(textScale);
+							}}
 							aria-labelledby="ui-scale-label"
 							aria-label={$i18n.t('Increase UI Scale')}
 						>
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index 4d235accf5..5d8cc62513 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -5,7 +5,6 @@ import type { Banner } from '$lib/types';
 import type { Socket } from 'socket.io-client';
 
 import emojiShortCodes from '$lib/emoji-shortcodes.json';
-import { resolveTextScale, setDocumentTextScale } from '$lib/utils/text-scale';
 
 // Backend
 export const WEBUI_NAME = writable(APP_NAME);
@@ -69,13 +68,6 @@ export const banners: Writable<Banner[]> = writable([]);
 
 export const settings: Writable<Settings> = writable({});
 
-if (typeof window !== 'undefined') {
-	settings.subscribe(($settings) => {
-		const clampedScale = resolveTextScale($settings?.textScale ?? 1);
-		setDocumentTextScale(clampedScale);
-	});
-}
-
 export const audioQueue = writable(null);
 
 export const showSidebar = writable(false);
diff --git a/src/lib/utils/text-scale.ts b/src/lib/utils/text-scale.ts
index 3b68cf773c..a975c13bf9 100644
--- a/src/lib/utils/text-scale.ts
+++ b/src/lib/utils/text-scale.ts
@@ -1,55 +1,7 @@
-const TEXT_SCALE_VALUES = [1, 1.1, 1.2, 1.3, 1.4, 1.5] as const;
-
-export type TextScale = (typeof TEXT_SCALE_VALUES)[number];
-
-export const TEXT_SCALE_MIN = TEXT_SCALE_VALUES[0];
-export const TEXT_SCALE_MAX = TEXT_SCALE_VALUES[TEXT_SCALE_VALUES.length - 1];
-
-export const DEFAULT_TEXT_SCALE: TextScale = 1;
-export const DEFAULT_TEXT_SCALE_INDEX = TEXT_SCALE_VALUES.findIndex(
-	(scale) => scale === DEFAULT_TEXT_SCALE
-);
-
-export const getScaleFromIndex = (index: number): TextScale => {
-	if (!Number.isFinite(index)) {
-		return TEXT_SCALE_VALUES[DEFAULT_TEXT_SCALE_INDEX];
-	}
-
-	return TEXT_SCALE_VALUES[index] ?? TEXT_SCALE_VALUES[DEFAULT_TEXT_SCALE_INDEX];
-};
-
-export const findClosestTextScaleIndex = (value: unknown): number => {
-	const numeric = Number(value);
-
-	if (!Number.isFinite(numeric)) {
-		return DEFAULT_TEXT_SCALE_INDEX;
-	}
-
-	let closestIndex = DEFAULT_TEXT_SCALE_INDEX;
-	let smallestDistance = Number.POSITIVE_INFINITY;
-
-	TEXT_SCALE_VALUES.forEach((scale, idx) => {
-		const distance = Math.abs(scale - numeric);
-
-		if (distance < smallestDistance) {
-			closestIndex = idx;
-			smallestDistance = distance;
-		}
-	});
-
-	return closestIndex;
-};
-
-export const resolveTextScale = (value: unknown): TextScale => {
-	return TEXT_SCALE_VALUES[findClosestTextScaleIndex(value)] ?? DEFAULT_TEXT_SCALE;
-};
-
-export const setDocumentTextScale = (scale: TextScale) => {
+export const setTextScale = (scale) => {
 	if (typeof document === 'undefined') {
 		return;
 	}
 
-	document.documentElement.style.setProperty('--app-text-scale', scale.toString());
+	document.documentElement.style.setProperty('--app-text-scale', `${scale}`);
 };
-
-export { TEXT_SCALE_VALUES };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3985413ebd..a4376c4710 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -47,10 +47,12 @@
 
 	import { WEBUI_BASE_URL, WEBUI_HOSTNAME } from '$lib/constants';
 	import { bestMatchingLanguage } from '$lib/utils';
+	import { setTextScale } from '$lib/utils/text-scale';
 
 	import NotificationToast from '$lib/components/NotificationToast.svelte';
 	import AppSidebar from '$lib/components/app/AppSidebar.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
+	import { getUserSettings } from '$lib/apis/users';
 
 	// handle frontend updates (https://svelte.dev/docs/kit/configuration#version)
 	beforeNavigate(({ willUnload, to }) => {
@@ -524,8 +526,10 @@
 			}
 		});
 
-		if (typeof window !== 'undefined' && window.applyTheme) {
-			window.applyTheme();
+		if (typeof window !== 'undefined') {
+			if (window.applyTheme) {
+				window.applyTheme();
+			}
 		}
 
 		if (window?.electronAPI) {
@@ -584,7 +588,7 @@
 		};
 		window.addEventListener('resize', onResize);
 
-		user.subscribe((value) => {
+		user.subscribe(async (value) => {
 			if (value) {
 				$socket?.off('events', chatEventHandler);
 				$socket?.off('events:channel', channelEventHandler);
@@ -592,6 +596,14 @@
 				$socket?.on('events', chatEventHandler);
 				$socket?.on('events:channel', channelEventHandler);
 
+				const userSettings = await getUserSettings(localStorage.token);
+				if (userSettings) {
+					settings.set(userSettings.ui);
+				} else {
+					settings.set(JSON.parse(localStorage.getItem('settings') ?? '{}'));
+				}
+				setTextScale($settings?.textScale ?? 1);
+
 				// Set up the token expiry check
 				if (tokenTimer) {
 					clearInterval(tokenTimer);