diff --git a/public/script.js b/public/script.js
index e5ae1ff1a..4c9a5a8cc 100644
--- a/public/script.js
+++ b/public/script.js
@@ -260,7 +260,7 @@ export let CLIENT_VERSION = 'SillyTavern:UNKNOWN:Cohee#1207'; // For Horde heade
 let is_colab = false;
 let is_checked_colab = false;
 let is_mes_reload_avatar = false;
-let optionsPopper = Popper.createPopper(document.getElementById('send_form'), document.getElementById('options'), {
+let optionsPopper = Popper.createPopper(document.getElementById('options_button'), document.getElementById('options'), {
     placement: 'top-start'
 });
 let exportPopper = Popper.createPopper(document.getElementById('export_button'), document.getElementById('export_format_popup'), {
@@ -5784,22 +5784,22 @@ $(document).ready(function () {
     });
 
     const elementsToUpdate = {
-        '#description_textarea': function() { create_save_description = $("#description_textarea").val(); },
-        '#creator_notes_textarea': function() { create_save_creator_notes = $("#creator_notes_textarea").val(); },
-        '#character_version_textarea': function() { create_save_character_version = $("#character_version_textarea").val(); },
-        '#system_prompt_textarea': function() { create_save_system_prompt = $("#system_prompt_textarea").val(); },
-        '#post_history_instructions_textarea': function() { create_save_post_history_instructions = $("#post_history_instructions_textarea").val(); },
-        '#creator_textarea': function() { create_save_creator = $("#creator_textarea").val(); },
-        '#tags_textarea': function() { create_save_tags = $("#tags_textarea").val(); },
-        '#personality_textarea': function() { create_save_personality = $("#personality_textarea").val(); },
-        '#scenario_pole': function() { create_save_scenario = $("#scenario_pole").val(); },
-        '#mes_example_textarea': function() { create_save_mes_example = $("#mes_example_textarea").val(); },
-        '#firstmessage_textarea': function() { create_save_first_message = $("#firstmessage_textarea").val(); },
-        '#talkativeness_slider': function() { create_save_talkativeness = $("#talkativeness_slider").val(); },
+        '#description_textarea': function () { create_save_description = $("#description_textarea").val(); },
+        '#creator_notes_textarea': function () { create_save_creator_notes = $("#creator_notes_textarea").val(); },
+        '#character_version_textarea': function () { create_save_character_version = $("#character_version_textarea").val(); },
+        '#system_prompt_textarea': function () { create_save_system_prompt = $("#system_prompt_textarea").val(); },
+        '#post_history_instructions_textarea': function () { create_save_post_history_instructions = $("#post_history_instructions_textarea").val(); },
+        '#creator_textarea': function () { create_save_creator = $("#creator_textarea").val(); },
+        '#tags_textarea': function () { create_save_tags = $("#tags_textarea").val(); },
+        '#personality_textarea': function () { create_save_personality = $("#personality_textarea").val(); },
+        '#scenario_pole': function () { create_save_scenario = $("#scenario_pole").val(); },
+        '#mes_example_textarea': function () { create_save_mes_example = $("#mes_example_textarea").val(); },
+        '#firstmessage_textarea': function () { create_save_first_message = $("#firstmessage_textarea").val(); },
+        '#talkativeness_slider': function () { create_save_talkativeness = $("#talkativeness_slider").val(); },
     };
 
-    Object.keys(elementsToUpdate).forEach(function(id) {
-        $(id).on("input", function() {
+    Object.keys(elementsToUpdate).forEach(function (id) {
+        $(id).on("input", function () {
             if (menu_type == "create") {
                 elementsToUpdate[id]();
             } else {
@@ -5966,34 +5966,37 @@ $(document).ready(function () {
         }
     });
 
-    $("body").click(function () {
-        if ($("#options").css("opacity") == 1.0) {
-            $("#options").transition({
-                opacity: 0.0,
-                duration: 100, //animation_duration,
-                easing: animation_easing,
-                complete: function () {
-                    $("#options").css("display", "none");
-                },
-            });
-        }
-    });
+    let hideOptionsTimeout;
 
-    $("#options_button").click(function () {
-        // this is the options button click function, shows the options menu if closed
-        if (
-            $("#options").css("display") === "none" &&
-            $("#options").css("opacity") == 0.0
-        ) {
-            optionsPopper.update();
-            showBookmarksButtons();
-            $("#options").css("display", "block");
-            $("#options").transition({
-                opacity: 1.0, // the manual setting of CSS via JS is what allows the click-away feature to work
-                duration: 100,
-                easing: animation_easing,
-                complete: function () { optionsPopper.update(); },
-            });
+    function showOptions() {
+        showBookmarksButtons();
+        optionsPopper.update();
+        const optionsDiv = $("#options");
+        const optionsButtonDiv = $("#options_button");
+        const hideOptions = () => {
+            if (!optionsDiv.is(':hover') && !optionsButtonDiv.is(':hover')) {
+                optionsDiv.hide(200);
+            }
+        };
+
+        optionsDiv.on('mouseenter touchstart', () => clearTimeout(hideOptionsTimeout));
+        optionsButtonDiv.on('mouseenter touchstart', () => clearTimeout(hideOptionsTimeout));
+        optionsDiv.on('mouseleave', () => hideOptionsTimeout = setTimeout(hideOptions, 500));
+        optionsButtonDiv.on('mouseleave', () => hideOptionsTimeout = setTimeout(hideOptions, 500));
+        optionsDiv.show(200);
+    }
+
+    $("#options_button").on('mouseenter click touchstart', showOptions);
+
+    $(document).on('click touchend', (e) => {
+        const target = e.target;
+        const optionsDiv = $("#options");
+        const optionsButtonDiv = $("#options_button");
+        if (!$(target).closest(optionsDiv).length && !$(target).closest(optionsButtonDiv).length &&
+            target !== optionsDiv[0] && target !== optionsButtonDiv[0] &&
+            !optionsDiv.is(':hover') &&
+            !optionsButtonDiv.is(':hover')) {
+            optionsDiv.hide(200);
         }
     });
 
diff --git a/public/style.css b/public/style.css
index ead28da59..d096337dd 100644
--- a/public/style.css
+++ b/public/style.css
@@ -500,10 +500,9 @@ code {
 }
 
 #options {
-    opacity: 0.0;
-    display: none;
-    z-index: 1990;
-
+    display: flex;
+    z-index: 100;
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
 }
 
 .options-content {