diff --git a/public/index.html b/public/index.html
index 5635d12c0..da654f3fb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1103,7 +1103,7 @@
                         <span id="font_scale_counter">select</span>
                     </div>
                     <div class="range-block-range">
-                        <input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.1">
+                        <input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.05">
                     </div>
                 </div>
                 <hr>
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index 1f2fe4a3f..101a08a38 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -23,8 +23,6 @@ const sheld_width = {
     w1000px: 1,
 }
 
-var font_scale = 1;
-
 let power_user = {
     collapse_newlines: false,
     force_pygmalion_formatting: false,
@@ -43,7 +41,7 @@ let power_user = {
     play_sound_unfocused: true,
     sort_field: 'name',
     sort_order: 'asc',
-    font_scale: '1'
+    font_scale: 1,
 };
 
 const storage_keys = {
@@ -60,7 +58,7 @@ const storage_keys = {
     avatar_style: "TavernAI_avatar_style",
     chat_display: "TavernAI_chat_display",
     sheld_width: "TavernAI_sheld_width",
-    font_scale: "TavernAI_font_scale"
+    font_scale: "TavernAI_font_scale",
 };
 
 //Updated at the bottom of this script document based on 'focus' and 'blur' events
@@ -113,32 +111,23 @@ function applySheldWidth() {
         r.style.setProperty('--sheldWidth', '800px');
     }
 }
-function applyFontScale() {
 
-    const sliders = [
-        {
-            sliderId: "#font_scale",
-            counterId: "#font_scale_counter",
-            format: (val) => `${val}`,
-            setValue: (val) => { font_scale = Number(val); },
-        }
-    ];
+async function applyFontScale() {
+    power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1);
 
-    sliders.forEach(slider => {
-        $(document).on("input", slider.sliderId, function () {
-            const value = $(this).val();
-            const formattedValue = slider.format(value);
-            slider.setValue(value);
-            $(slider.counterId).text(formattedValue);
-            console.log('saving');
-            saveSettingsDebounced();
-        });
-    });
+    // temporarily unset transition from chat to not make the browser calculate the animation
+    const chat = document.getElementById('chat');
+    const chatTransition = window.getComputedStyle(chat).transition;
+    chat.style.transition = 'unset';
 
-    power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? chat_styles.DEFAULT);
-    let r = document.documentElement;
-    r.style.setProperty('--fontScale', power_user.font_scale);
-    $("#font_scale_counter").html(power_user.font_scale);
+    // now apply the font scale to the document
+    document.documentElement.style.setProperty('--fontScale', power_user.font_scale);
+    $("#font_scale_counter").text(power_user.font_scale);
+
+    // a small delay to let the browser do the layout redraw
+    await delay(1);
+    // set transition back to chat
+    chat.style.transition = chatTransition;
 }
 
 applyAvatarStyle();
@@ -175,7 +164,7 @@ function loadPowerUserSettings(settings) {
     power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND);
     power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT);
     power_user.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? sheld_width.DEFAULT);
-    power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? font_scale);
+    power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1);
 
     $("#force-pygmalion-formatting-checkbox").prop("checked", power_user.force_pygmalion_formatting);
     $("#collapse-newlines-checkbox").prop("checked", power_user.collapse_newlines);
@@ -290,8 +279,8 @@ $(document).ready(() => {
 
     $(`input[name="font_scale"]`).on('input', function (e) {
         power_user.font_scale = Number(e.target.value);
+        $("#font_scale_counter").text(power_user.font_scale);
         localStorage.setItem(storage_keys.font_scale, power_user.font_scale);
-        /* console.log("font scale: " + power_user.font_scale); */
         applyFontScale();
     });