diff --git a/public/scripts/extensions/tts/index.js b/public/scripts/extensions/tts/index.js
index 48d2d6d82..2e67611cd 100644
--- a/public/scripts/extensions/tts/index.js
+++ b/public/scripts/extensions/tts/index.js
@@ -71,7 +71,6 @@ async function moduleWorker() {
     processAudioJobQueue()
     updateUiAudioPlayState()
 
-
     // Auto generation is disabled
     if (extension_settings.tts.auto_generation == false) {
         return
@@ -229,7 +228,7 @@ async function onTtsVoicesClick() {
 
 function updateUiAudioPlayState() {
     if (extension_settings.tts.enabled == true) {
-        audioControl.style.display = 'flex'
+        $('#ttsExtensionMenuItem').show();
         let img
         // Give user feedback that TTS is active by setting the stop icon if processing or playing
         if (!audioElement.paused || isTtsProcessing()) {
@@ -237,9 +236,9 @@ function updateUiAudioPlayState() {
         } else {
             img = 'fa-solid fa-circle-play extensionsMenuExtensionButton'
         }
-        audioControl.className = img
+        $('#tts_media_control').attr('class', img);
     } else {
-        audioControl.style.display = 'none'
+        $('#ttsExtensionMenuItem').hide();
     }
 }
 
diff --git a/public/style.css b/public/style.css
index 3bdb5cae2..1d567a3a1 100644
--- a/public/style.css
+++ b/public/style.css
@@ -543,6 +543,11 @@ code {
     opacity: 0.7;
 }
 
+#extensionsMenu>div:hover {
+    filter: brightness(1.2);
+    opacity: 1;
+}
+
 .options-content a div:first-child {
     min-width: 20px;
 }