diff --git a/web/index.html b/web/index.html
index 8ca2df5f4..2446207e8 100644
--- a/web/index.html
+++ b/web/index.html
@@ -104,12 +104,12 @@
 
 <script src="js/gui/gui.js?v=3"></script>
 <script src="js/utils.js?v1"></script>
-<script src="js/gui/message.js?v=3"></script>
+<script src="js/gui/message.js?v=4"></script>
 <script src="js/log.js?v=5"></script>
 <script src="js/event/event.js?v=6"></script>
 <script src="js/input/keys.js?v=3"></script>
 <script src="js/settings/opts.js?v=3"></script>
-<script src="js/settings/settings.js?v=7"></script>
+<script src="js/settings/settings.js?v=8"></script>
 <script src="js/env.js?v=6"></script>
 <script src="js/input/input.js?v=3"></script>
 <script src="js/gameList.js?v=5"></script>
@@ -122,7 +122,7 @@
 <script src="js/api/api.js?v=3"></script>
 <script src="js/workerManager.js?v=1"></script>
 <script src="js/stats/stats.js?v=1"></script>
-<script src="js/controller.js?v=12"></script>
+<script src="js/controller.js?v=13"></script>
 <script src="js/input/keyboard.js?v=6"></script>
 <script src="js/input/touch.js?v=3"></script>
 <script src="js/input/joystick.js?v=3"></script>
diff --git a/web/js/controller.js b/web/js/controller.js
index 3b7d7dc5b..d0e336e73 100644
--- a/web/js/controller.js
+++ b/web/js/controller.js
@@ -301,11 +301,10 @@
                 ..._default,
                 _uber: true,
                 name: 'settings',
-                keyRelease: key => {
-                    if (key === KEY.SETTINGS) {
-                        !settings.ui.toggle() && setState(lastState)
-                    }
-                },
+                keyRelease: (() => {
+                    settings.ui.onToggle = (o) => !o && setState(lastState);
+                    return (key) => key === KEY.SETTINGS && settings.ui.toggle()
+                })(),
                 menuReady: showMenuScreen
             },
 
diff --git a/web/js/gui/gui.js b/web/js/gui/gui.js
index 95b4ee13a..c63a4b890 100644
--- a/web/js/gui/gui.js
+++ b/web/js/gui/gui.js
@@ -74,14 +74,18 @@ const gui = (() => {
 
     const panel = (root, title = '', cc = '', content, buttons = [], onToggle) => {
         const state = {
-            br: null,
             shown: false,
             loading: false,
             title: title,
         }
 
+        const tHandlers = [];
+        onToggle && tHandlers.push(onToggle);
+
         const _root = root || _create('div');
         _root.classList.add('panel');
+        gui.hide(_root);
+
         const header = _create('div', (el) => el.classList.add('panel__header'));
         const _content = _create('div', (el) => {
             if (cc) {
@@ -131,23 +135,21 @@ const gui = (() => {
             _title.innerText = state.loading ? `${state.title}...` : state.title;
         }
 
-        function toggle(show = true) {
-            state.shown = show;
-
-            // hack not transparent jpeg corners :_;
-            show ? _root.parentElement.style.borderRadius = '0px' :
-                state.br ? _root.parentElement.style.borderRadius = state.br :
-                    state.br = window.getComputedStyle(_root.parentElement).borderRadius
-
-            onToggle && onToggle(state.shown, _root)
-
-            state.shown ? gui.show(_root) : gui.hide(_root)
-            return state.shown;
-        }
+        const toggle = (() => {
+            let br = window.getComputedStyle(_root.parentElement).borderRadius;
+            return (force) => {
+                state.shown = force !== undefined ? force : !state.shown;
+                // hack for not transparent jpeg corners :_;
+                _root.parentElement.style.borderRadius = state.shown ? '0px' : br;
+                tHandlers.forEach(h => h?.(state.shown, _root));
+                state.shown ? gui.show(_root) : gui.hide(_root)
+            }
+        })()
 
         return {
             contentEl: _content,
             isHidden: () => !state.shown,
+            onToggle: (fn) => tHandlers.push(fn),
             setContent,
             setLoad,
             toggle,
diff --git a/web/js/settings/settings.js b/web/js/settings/settings.js
index 5fed80af1..76c20c330 100644
--- a/web/js/settings/settings.js
+++ b/web/js/settings/settings.js
@@ -276,16 +276,6 @@ const settings = (() => {
             event.pub(KEYBOARD_TOGGLE_FILTER_MODE, {mode: true});
         })
 
-    panel.toggle(false);
-
-    const toggle = (() => {
-        let x = false;
-        return () => {
-            x = !x;
-            panel.toggle(x);
-        }
-    })();
-
     function _getType(value) {
         if (value === undefined) return option.undefined
         else if (Array.isArray(value)) return option.list
@@ -334,7 +324,10 @@ const settings = (() => {
         import: _import,
         export: _export,
         ui: {
-            toggle,
+            set onToggle(fn) {
+                panel.onToggle(fn);
+            },
+            toggle: () => panel.toggle(),
         },
         set renderer(fn) {
             _renderer = fn;
@@ -501,7 +494,7 @@ settings.renderer = (() => {
                         .withDescription(
                             'Whether games should open in full-screen mode after starting up (excluding mobile devices)'
                         )
-                        .add(gui.checkbox(k, onChange, value, 'Enbabled', 'settings__option-checkbox'))
+                        .add(gui.checkbox(k, onChange, value, 'Enabled', 'settings__option-checkbox'))
                         .build()
                     break;
                 default: