diff --git a/public/scripts/extensions/tts/index.js b/public/scripts/extensions/tts/index.js
index c60d93053..2bde3f0de 100644
--- a/public/scripts/extensions/tts/index.js
+++ b/public/scripts/extensions/tts/index.js
@@ -1,5 +1,5 @@
 import { callPopup, cancelTtsPlay, eventSource, event_types, isStreamingEnabled, name2, saveSettingsDebounced, substituteParams } from '../../../script.js';
-import { ModuleWorkerWrapper, doExtrasFetch, extension_settings, getApiUrl, getContext, modules } from '../../extensions.js';
+import { ModuleWorkerWrapper, doExtrasFetch, extension_settings, getApiUrl, getContext, modules, renderExtensionTemplateAsync } from '../../extensions.js';
 import { delay, escapeRegex, getBase64Async, getStringHash, onlyUnique } from '../../utils.js';
 import { EdgeTtsProvider } from './edge.js';
 import { ElevenLabsTtsProvider } from './elevenlabs.js';
@@ -592,6 +592,7 @@ function onEnableClick() {
     );
     updateUiAudioPlayState();
     saveSettingsDebounced();
+    $('body').toggleClass('tts', extension_settings.tts.enabled);
 }
 
 
@@ -1075,93 +1076,9 @@ export async function initVoiceMap(unrestricted = false) {
     updateVoiceMap();
 }
 
-$(document).ready(function () {
-    function addExtensionControls() {
-        const settingsHtml = `
-        <div id="tts_settings">
-            <div class="inline-drawer">
-                <div class="inline-drawer-toggle inline-drawer-header">
-                    <b>TTS</b>
-                    <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
-                </div>
-                <div class="inline-drawer-content">
-                    <div id="tts_status">
-                    </div>
-                    <span>Select TTS Provider</span> </br>
-                    <div class="tts_block">
-                        <select id="tts_provider" class="flex1">
-                        </select>
-                        <input id="tts_refresh" class="menu_button" type="submit" value="Reload" />
-                    </div>
-                    <div>
-                        <label class="checkbox_label" for="tts_enabled">
-                            <input type="checkbox" id="tts_enabled" name="tts_enabled">
-                            <small>Enabled</small>
-                        </label>
-                        <label class="checkbox_label" for="tts_narrate_user">
-                            <input type="checkbox" id="tts_narrate_user">
-                            <small>Narrate user messages</small>
-                        </label>
-                        <label class="checkbox_label" for="tts_auto_generation">
-                            <input type="checkbox" id="tts_auto_generation">
-                            <small>Auto Generation</small>
-                        </label>
-                        <label class="checkbox_label" for="tts_periodic_auto_generation" title="Requires auto generation to be enabled.">
-                            <input type="checkbox" id="tts_periodic_auto_generation">
-                            <small>Narrate by paragraphs (when streaming)</small>
-                        </label>
-                        <label class="checkbox_label" for="tts_narrate_quoted">
-                            <input type="checkbox" id="tts_narrate_quoted">
-                            <small>Only narrate "quotes"</small>
-                        </label>
-                        <label class="checkbox_label" for="tts_narrate_dialogues">
-                            <input type="checkbox" id="tts_narrate_dialogues">
-                            <small>Ignore *text, even "quotes", inside asterisks*</small>
-                        </label>
-                        <label class="checkbox_label" for="tts_narrate_translated_only">
-                            <input type="checkbox" id="tts_narrate_translated_only">
-                            <small>Narrate only the translated text</small>
-                        </label>
-                        <label class="checkbox_label" for="tts_skip_codeblocks">
-                            <input type="checkbox" id="tts_skip_codeblocks">
-                            <small>Skip codeblocks</small>
-                        </label>
-                        <label class="checkbox_label" for="tts_skip_tags">
-                            <input type="checkbox" id="tts_skip_tags">
-                            <small>Skip &lt;tagged&gt; blocks</small>
-                        </label>
-                        <label class="checkbox_label" for="tts_pass_asterisks">
-                        <input type="checkbox" id="tts_pass_asterisks">
-                        <small>Pass Asterisks to TTS Engine</small>
-                        </label>
-                    </div>
-                    <div id="playback_rate_block" class="range-block">
-                        <hr>
-                        <div class="range-block-title justifyLeft" data-i18n="Audio Playback Speed">
-                            <small>Audio Playback Speed</small>
-                        </div>
-                        <div class="range-block-range-and-counter">
-                            <div class="range-block-range">
-                                <input type="range" id="playback_rate" name="volume" min="0" max="3" step="0.05">
-                            </div>
-                            <div class="range-block-counter">
-                                <input type="number" min="0" max="3" step="0.05" data-for="playback_rate" id="playback_rate_counter">
-                            </div>
-                        </div>
-                    </div>
-                    <div id="tts_voicemap_block">
-                    </div>
-                    <hr>
-                    <form id="tts_provider_settings" class="inline-drawer-content">
-                    </form>
-                    <div class="tts_buttons">
-                        <input id="tts_voices" class="menu_button" type="submit" value="Available voices" />
-                    </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        `;
+jQuery(async function () {
+    async function addExtensionControls() {
+        const settingsHtml = $(await renderExtensionTemplateAsync('tts', 'settings'));
         $('#tts_container').append(settingsHtml);
         $('#tts_refresh').on('click', onRefreshClick);
         $('#tts_enabled').on('click', onEnableClick);
@@ -1190,7 +1107,7 @@ $(document).ready(function () {
         $('#tts_provider').on('change', onTtsProviderChange);
         $(document).on('click', '.mes_narrate', onNarrateOneMessage);
     }
-    addExtensionControls(); // No init dependencies
+    await addExtensionControls(); // No init dependencies
     loadSettings(); // Depends on Extension Controls and loadTtsProvider
     loadTtsProvider(extension_settings.tts.currentProvider); // No dependencies
     addAudioControl(); // Depends on Extension Controls
diff --git a/public/scripts/extensions/tts/settings.html b/public/scripts/extensions/tts/settings.html
new file mode 100644
index 000000000..de917d127
--- /dev/null
+++ b/public/scripts/extensions/tts/settings.html
@@ -0,0 +1,83 @@
+<div id="tts_settings">
+    <div class="inline-drawer">
+        <div class="inline-drawer-toggle inline-drawer-header">
+            <b>TTS</b>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+        <div class="inline-drawer-content">
+            <div id="tts_status">
+            </div>
+            <span>Select TTS Provider</span> </br>
+            <div class="tts_block">
+                <select id="tts_provider" class="flex1">
+                </select>
+                <input id="tts_refresh" class="menu_button" type="submit" value="Reload" />
+            </div>
+            <div>
+                <label class="checkbox_label" for="tts_enabled">
+                    <input type="checkbox" id="tts_enabled" name="tts_enabled">
+                    <small>Enabled</small>
+                </label>
+                <label class="checkbox_label" for="tts_narrate_user">
+                    <input type="checkbox" id="tts_narrate_user">
+                    <small>Narrate user messages</small>
+                </label>
+                <label class="checkbox_label" for="tts_auto_generation">
+                    <input type="checkbox" id="tts_auto_generation">
+                    <small>Auto Generation</small>
+                </label>
+                <label class="checkbox_label" for="tts_periodic_auto_generation" title="Requires auto generation to be enabled.">
+                    <input type="checkbox" id="tts_periodic_auto_generation">
+                    <small>Narrate by paragraphs (when streaming)</small>
+                </label>
+                <label class="checkbox_label" for="tts_narrate_quoted">
+                    <input type="checkbox" id="tts_narrate_quoted">
+                    <small>Only narrate "quotes"</small>
+                </label>
+                <label class="checkbox_label" for="tts_narrate_dialogues">
+                    <input type="checkbox" id="tts_narrate_dialogues">
+                    <small>Ignore *text, even "quotes", inside asterisks*</small>
+                </label>
+                <label class="checkbox_label" for="tts_narrate_translated_only">
+                    <input type="checkbox" id="tts_narrate_translated_only">
+                    <small>Narrate only the translated text</small>
+                </label>
+                <label class="checkbox_label" for="tts_skip_codeblocks">
+                    <input type="checkbox" id="tts_skip_codeblocks">
+                    <small>Skip codeblocks</small>
+                </label>
+                <label class="checkbox_label" for="tts_skip_tags">
+                    <input type="checkbox" id="tts_skip_tags">
+                    <small>Skip &lt;tagged&gt; blocks</small>
+                </label>
+                <label class="checkbox_label" for="tts_pass_asterisks">
+                <input type="checkbox" id="tts_pass_asterisks">
+                <small>Pass Asterisks to TTS Engine</small>
+                </label>
+            </div>
+            <div id="playback_rate_block" class="range-block">
+                <hr>
+                <div class="range-block-title justifyLeft" data-i18n="Audio Playback Speed">
+                    <small>Audio Playback Speed</small>
+                </div>
+                <div class="range-block-range-and-counter">
+                    <div class="range-block-range">
+                        <input type="range" id="playback_rate" name="volume" min="0" max="3" step="0.05">
+                    </div>
+                    <div class="range-block-counter">
+                        <input type="number" min="0" max="3" step="0.05" data-for="playback_rate" id="playback_rate_counter">
+                    </div>
+                </div>
+            </div>
+            <div id="tts_voicemap_block">
+            </div>
+            <hr>
+            <form id="tts_provider_settings" class="inline-drawer-content">
+            </form>
+            <div class="tts_buttons">
+                <input id="tts_voices" class="menu_button" type="submit" value="Available voices" />
+            </div>
+            </div>
+        </div>
+    </div>
+</div>