diff --git a/public/index.html b/public/index.html
index 615afaac7..d837524e5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -48,6 +48,7 @@
     <script type="module" src="scripts/group-chats.js"></script>
     <script type="module" src="scripts/power-user.js"></script>
     <script type="module" src="scripts/kai-settings.js"></script>
+    <script type="module" src="scripts/textgen-settings.js"></script>
 
     <title>Tavern.AI</title>
 </head>
@@ -122,7 +123,7 @@
                         <h4>API key</h4>
                         <h5>Where to get (<a href="/notes/6" target="_blank">?</a>)</h5>
                         <input id="api_key_novel" name="api_key_novel" class="text_pole" maxlength="500" size="35" value="" autocomplete="off">
-                        <input id="api_button_novel" type="submit" value="Connect">
+                        <input id="api_button_novel" class="menu_button" type="submit" value="Connect">
                         <img id="api_loading_novel" src="img/load.svg">
                     </form>
                     <div id="online_status3">
@@ -137,27 +138,32 @@
                     <select id="model_novel_select" class="option_select_right_menu" style='margin-bottom: 16px;'>
                         <option value="euterpe-v2">Euterpe</option>
                         <option value="krake-v2">Krake</option>
-                    </select><br>
-                    Preset settings
-                    <a href="/notes/7" class="notes-link" target="_blank">
-                        <span class="note-link-span">?</span>
-                    </a><br>
+                    </select>
+                    <h4>
+                        Preset settings
+                        <a href="/notes/7" class="notes-link" target="_blank">
+                            <span class="note-link-span">?</span>
+                        </a>
+                    </h4>
                     <select id="settings_perset_novel" class="option_select_right_menu">
                         <option value="gui">Default</option>
                     </select>
-                </div>
+                    </div>
                 <div id="textgenerationwebui_api" style="display: none;position: relative;">
                     <div class="oobabooga_logo">
                         <a href="https://github.com/oobabooga/text-generation-webui" target="_blank">
                             oobabooga/text-generation-webui
                         </a>
                     </div>
-                    <span>Make sure you run it:
+                    <span>
+                        Make sure you run it:
                         <ul>
-                            <li>with
+                            <li>
+                                with
                                 <pre>--no-stream</pre> option
                             </li>
-                            <li>in notebook mode (not
+                            <li>
+                                in notebook mode (not
                                 <pre>--cai-chat</pre> or
                                 <pre>--chat</pre>)
                             </li>
@@ -457,7 +463,7 @@
                                         Top K
                                     </div>
                                     <div class="range-block-counter">
-                                        <span id=" top_k_counter_textgenerationwebui">select</span>
+                                        <span id="top_k_counter_textgenerationwebui">select</span>
                                     </div>
                                     <div class="range-block-range">
                                         <input type="range" id="top_k_textgenerationwebui" name="volume" min="0" max="200" step="1">
@@ -467,7 +473,7 @@
                                             Top P
                                         </div>
                                         <div class="range-block-counter">
-                                            <span id=" top_p_counter_textgenerationwebui">select</span>
+                                            <span id="top_p_counter_textgenerationwebui">select</span>
                                         </div>
                                         <div class="range-block-range">
                                             <input type="range" id="top_p_textgenerationwebui" name="volume" min="0" max="1" step="0.1">
@@ -478,7 +484,7 @@
                                             Typical P
                                         </div>
                                         <div class="range-block-counter">
-                                            <span id=" typical_p_counter_textgenerationwebui">select</span>
+                                            <span id="typical_p_counter_textgenerationwebui">select</span>
                                         </div>
                                         <div class="range-block-range">
                                             <input type="range" id="typical_p_textgenerationwebui" name="volume" min="0" max="1" step="0.1">
@@ -489,7 +495,7 @@
                                             Penalty Alpha
                                         </div>
                                         <div class="range-block-counter">
-                                            <span id=" penalty_alpha_counter_textgenerationwebui">select</span>
+                                            <span id="penalty_alpha_counter_textgenerationwebui">select</span>
                                         </div>
                                         <div class="range-block-range">
                                             <input type="range" id="penalty_alpha_textgenerationwebui" name="volume" min="0" max="5" step="0.05" />
diff --git a/public/script.js b/public/script.js
index 2bfcc4e09..564857702 100644
--- a/public/script.js
+++ b/public/script.js
@@ -6,6 +6,11 @@ import {
     loadKoboldSettings,
 } from "./scripts/kai-settings.js";
 
+import {
+    textgenerationwebui_settings,
+    loadTextGenSettings,
+} from "./scripts/textgen-settings.js";
+
 import {
     world_info_budget,
     world_info_data,
@@ -245,16 +250,6 @@ var user_avatar = "you.png";
 var amount_gen = 80; //default max length of AI generated responses
 var max_context = 2048;
 
-var textgenerationwebui_settings = {
-    temp: 0.5,
-    top_p: 0.9,
-    top_k: 0,
-    typical_p: 1,
-    rep_pen: 1.1,
-    rep_pen_size: 0,
-    penalty_alpha: 0,
-};
-
 var is_pygmalion = false;
 var tokens_already_generated = 0;
 var message_already_generated = "";
@@ -1973,8 +1968,7 @@ async function getSettings(type) {
 
                 //Load AI model config settings (temp, context length, anchors, and anchor order)
 
-                textgenerationwebui_settings =
-                    settings.textgenerationwebui_settings || textgenerationwebui_settings;
+                loadTextGenSettings(settings.textgenerationwebui_settings);
 
                 amount_gen = settings.amount_gen;
                 if (settings.max_context !== undefined)
@@ -2084,23 +2078,6 @@ async function getSettings(type) {
                     api_server_textgenerationwebui
                 );
 
-                for (var i of [
-                    "temp",
-                    "rep_pen",
-                    "rep_pen_size",
-                    "top_k",
-                    "top_p",
-                    "typical_p",
-                    "penalty_alpha",
-                ]) {
-                    $("#" + i + "_textgenerationwebui").val(
-                        textgenerationwebui_settings[i]
-                    );
-                    $("#" + i + "_counter_textgenerationwebui").html(
-                        textgenerationwebui_settings[i]
-                    );
-                }
-
                 selected_button = settings.selected_button;
 
             }
@@ -3712,31 +3689,6 @@ $(document).ready(function () {
         }
     });
 
-
-
-    for (var i of [
-        "temp",
-        "rep_pen",
-        "rep_pen_size",
-        "top_k",
-        "top_p",
-        "typical_p",
-        "penalty_alpha",
-    ]) {
-        $("#" + i + "_textgenerationwebui").attr("x-setting-id", i);
-        $(document).on("input", "#" + i + "_textgenerationwebui", function () {
-            var i = $(this).attr("x-setting-id");
-            var val = $(this).val();
-            if (isInt(val)) {
-                $("#" + i + "_counter_textgenerationwebui").html($(this).val() + ".00");
-            } else {
-                $("#" + i + "_counter_textgenerationwebui").html($(this).val());
-            }
-            textgenerationwebui_settings[i] = parseFloat(val);
-            saveSettingsDebounced();
-        });
-    }
-
     ////////////////// OPTIMIZED RANGE SLIDER LISTENERS////////////////
 
     const sliders = [
diff --git a/public/scripts/textgen-settings.js b/public/scripts/textgen-settings.js
new file mode 100644
index 000000000..847e54c94
--- /dev/null
+++ b/public/scripts/textgen-settings.js
@@ -0,0 +1,51 @@
+import {
+    saveSettingsDebounced,
+} from "../script.js";
+
+export {
+    textgenerationwebui_settings,
+    loadTextGenSettings,
+}
+
+let textgenerationwebui_settings = {
+    temp: 0.5,
+    top_p: 0.9,
+    top_k: 0,
+    typical_p: 1,
+    rep_pen: 1.1,
+    rep_pen_size: 0,
+    penalty_alpha: 0,
+};
+
+const setting_names = [
+    "temp",
+    "rep_pen",
+    "rep_pen_size",
+    "top_k",
+    "top_p",
+    "typical_p",
+    "penalty_alpha",
+];
+
+function loadTextGenSettings(settings) {
+    textgenerationwebui_settings = settings ? settings : textgenerationwebui_settings;
+
+    for (const i of setting_names) {
+        const val = parseFloat(textgenerationwebui_settings[i]);
+        $(`#${i}_textgenerationwebui`).val(val);
+        $(`#${i}_counter_textgenerationwebui`).text(val.toFixed(2));
+    }
+}
+
+$(document).ready(function() {
+    for (const i of setting_names) {
+        $(`#${i}_textgenerationwebui`).attr("x-setting-id", i);
+        $(document).on("input", `#${i}_textgenerationwebui`, function () {
+            const id = $(this).attr("x-setting-id");
+            const val = parseFloat($(this).val());
+            $(`#${id}_counter_textgenerationwebui`).text(val.toFixed(2));
+            textgenerationwebui_settings[id] = parseFloat(val);
+            saveSettingsDebounced();
+        });
+    }
+})
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 42fb0ff53..21f44ea04 100644
--- a/public/style.css
+++ b/public/style.css
@@ -787,7 +787,8 @@ img[src*="user-slash-solid.svg"] {
 }
 
 #api_button:hover,
-#api_button_novel:hover {
+#api_button_novel:hover,
+#api_button_textgenerationwebui {
     background-color: green;
 }