diff --git a/src/public/app/dialogs/options.js b/src/public/app/dialogs/options.js
deleted file mode 100644
index 0b145a70e..000000000
--- a/src/public/app/dialogs/options.js
+++ /dev/null
@@ -1,34 +0,0 @@
-"use strict";
-
-import server from '../services/server.js';
-import utils from "../services/utils.js";
-
-const $dialog = $("#options-dialog");
-
-export async function showDialog(openTab) {
-    const options = await server.get('options');
-
-    utils.openDialog($dialog);
-
-    (await Promise.all([
-        import('./options/appearance.js'),
-        import('./options/shortcuts.js'),
-        import('./options/code_notes.js'),
-        import('./options/password.js'),
-        import('./options/etapi.js'),
-        import('./options/backup.js'),
-        import('./options/sync.js'),
-        import('./options/other.js'),
-        import('./options/advanced.js')
-    ]))
-        .map(m => new m.default)
-        .forEach(tab => {
-            if (tab.optionsLoaded) {
-                tab.optionsLoaded(options)
-            }
-        });
-
-    if (openTab) {
-        $(`.nav-link[href='#options-${openTab}']`).trigger("click");
-    }
-}
diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index a33f7dd3f..de933fbb2 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -74,6 +74,7 @@ import DeleteNotesDialog from "../widgets/dialogs/delete_notes.js";
 import InfoDialog from "../widgets/dialogs/info.js";
 import ConfirmDialog from "../widgets/dialogs/confirm.js";
 import PromptDialog from "../widgets/dialogs/prompt.js";
+import OptionsDialog from "../widgets/dialogs/options.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -222,6 +223,7 @@ export default class DesktopLayout {
             .child(new DeleteNotesDialog())
             .child(new InfoDialog())
             .child(new ConfirmDialog())
-            .child(new PromptDialog());
+            .child(new PromptDialog())
+            .child(new OptionsDialog());
     }
 }
diff --git a/src/public/app/services/root_command_executor.js b/src/public/app/services/root_command_executor.js
index bbaacc67b..f87f5e7b2 100644
--- a/src/public/app/services/root_command_executor.js
+++ b/src/public/app/services/root_command_executor.js
@@ -15,10 +15,6 @@ export default class RootCommandExecutor extends Component {
         appContext.triggerEvent("readOnlyTemporarilyDisabled", { noteContext });
     }
 
-    showOptionsCommand({openTab}) {
-        import("../dialogs/options.js").then(d => d.showDialog(openTab));
-    }
-
     async showSQLConsoleCommand() {
         const sqlConsoleNote = await dateNoteService.createSqlConsole();
 
diff --git a/src/views/dialogs/options.ejs b/src/public/app/widgets/dialogs/options.js
similarity index 70%
rename from src/views/dialogs/options.ejs
rename to src/public/app/widgets/dialogs/options.js
index 082b5dd2d..056faab73 100644
--- a/src/views/dialogs/options.ejs
+++ b/src/public/app/widgets/dialogs/options.js
@@ -1,4 +1,11 @@
-<div id="options-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
+"use strict";
+
+import server from '../../services/server.js';
+import utils from "../../services/utils.js";
+import BasicWidget from "../basic_widget.js";
+
+const TPL = `
+<div class="options-dialog modal fade mx-auto" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg modal-dialog-scrollable" style="min-width: 1000px;" role="document">
         <div class="modal-content">
             <div class="modal-header">
@@ -54,4 +61,39 @@
             </div>
         </div>
     </div>
-</div>
+</div>`;
+
+
+export default class OptionsDialog extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+    }
+
+    async showOptionsEvent({openTab}) {
+        const options = await server.get('options');
+
+        utils.openDialog(this.$widget);
+
+        (await Promise.all([
+            import('./options/appearance.js'),
+            import('./options/shortcuts.js'),
+            import('./options/code_notes.js'),
+            import('./options/password.js'),
+            import('./options/etapi.js'),
+            import('./options/backup.js'),
+            import('./options/sync.js'),
+            import('./options/other.js'),
+            import('./options/advanced.js')
+        ]))
+            .map(m => new m.default)
+            .forEach(tab => {
+                if (tab.optionsLoaded) {
+                    tab.optionsLoaded(options)
+                }
+            });
+
+        if (openTab) {
+            $(`.nav-link[href='#options-${openTab}']`).trigger("click");
+        }
+    }
+}
diff --git a/src/public/app/dialogs/options/advanced.js b/src/public/app/widgets/dialogs/options/advanced.js
similarity index 98%
rename from src/public/app/dialogs/options/advanced.js
rename to src/public/app/widgets/dialogs/options/advanced.js
index c0b651ddf..a1ca62cc4 100644
--- a/src/public/app/dialogs/options/advanced.js
+++ b/src/public/app/widgets/dialogs/options/advanced.js
@@ -1,5 +1,5 @@
-import server from "../../services/server.js";
-import toastService from "../../services/toast.js";
+import server from "../../../services/server.js";
+import toastService from "../../../services/toast.js";
 
 const TPL = `
 <h4 style="margin-top: 0;">Sync</h4>
diff --git a/src/public/app/dialogs/options/appearance.js b/src/public/app/widgets/dialogs/options/appearance.js
similarity index 98%
rename from src/public/app/dialogs/options/appearance.js
rename to src/public/app/widgets/dialogs/options/appearance.js
index 3fc914498..5393e857f 100644
--- a/src/public/app/dialogs/options/appearance.js
+++ b/src/public/app/widgets/dialogs/options/appearance.js
@@ -1,6 +1,6 @@
-import server from "../../services/server.js";
-import utils from "../../services/utils.js";
-import appContext from "../../services/app_context.js";
+import server from "../../../services/server.js";
+import utils from "../../../services/utils.js";
+import appContext from "../../../services/app_context.js";
 
 const FONT_FAMILIES = [
     { value: "theme", label: "Theme defined" },
diff --git a/src/public/app/dialogs/options/backup.js b/src/public/app/widgets/dialogs/options/backup.js
similarity index 96%
rename from src/public/app/dialogs/options/backup.js
rename to src/public/app/widgets/dialogs/options/backup.js
index abb4d8dec..b5cd87939 100644
--- a/src/public/app/dialogs/options/backup.js
+++ b/src/public/app/widgets/dialogs/options/backup.js
@@ -1,5 +1,5 @@
-import server from "../../services/server.js";
-import toastService from "../../services/toast.js";
+import server from "../../../services/server.js";
+import toastService from "../../../services/toast.js";
 
 const TPL = `
 <h4>Automatic backup</h4>
diff --git a/src/public/app/dialogs/options/code_notes.js b/src/public/app/widgets/dialogs/options/code_notes.js
similarity index 88%
rename from src/public/app/dialogs/options/code_notes.js
rename to src/public/app/widgets/dialogs/options/code_notes.js
index 32703c0da..fc1d90d7e 100644
--- a/src/public/app/dialogs/options/code_notes.js
+++ b/src/public/app/widgets/dialogs/options/code_notes.js
@@ -1,8 +1,8 @@
-import mimeTypesService from "../../services/mime_types.js";
-import options from "../../services/options.js";
-import server from "../../services/server.js";
-import toastService from "../../services/toast.js";
-import utils from "../../services/utils.js";
+import mimeTypesService from "../../../services/mime_types.js";
+import options from "../../../services/options.js";
+import server from "../../../services/server.js";
+import toastService from "../../../services/toast.js";
+import utils from "../../../services/utils.js";
 
 const TPL = `
 <h4>Use vim keybindings in CodeNotes (no ex mode)</h4>
diff --git a/src/public/app/dialogs/options/etapi.js b/src/public/app/widgets/dialogs/options/etapi.js
similarity index 97%
rename from src/public/app/dialogs/options/etapi.js
rename to src/public/app/widgets/dialogs/options/etapi.js
index 58718ef7f..8709a5721 100644
--- a/src/public/app/dialogs/options/etapi.js
+++ b/src/public/app/widgets/dialogs/options/etapi.js
@@ -1,5 +1,5 @@
-import server from "../../services/server.js";
-import dialogService from "../../widgets/dialog.js";
+import server from "../../../services/server.js";
+import dialogService from "../../dialog.js";
 
 const TPL = `
 <h4>ETAPI</h4>
diff --git a/src/public/app/dialogs/options/other.js b/src/public/app/widgets/dialogs/options/other.js
similarity index 98%
rename from src/public/app/dialogs/options/other.js
rename to src/public/app/widgets/dialogs/options/other.js
index dde89b6ad..bd236bf77 100644
--- a/src/public/app/dialogs/options/other.js
+++ b/src/public/app/widgets/dialogs/options/other.js
@@ -1,6 +1,6 @@
-import utils from "../../services/utils.js";
-import server from "../../services/server.js";
-import toastService from "../../services/toast.js";
+import utils from "../../../services/utils.js";
+import server from "../../../services/server.js";
+import toastService from "../../../services/toast.js";
 
 const TPL = `
 <style>
diff --git a/src/public/app/dialogs/options/password.js b/src/public/app/widgets/dialogs/options/password.js
similarity index 94%
rename from src/public/app/dialogs/options/password.js
rename to src/public/app/widgets/dialogs/options/password.js
index 471d1deb1..1560ae3ad 100644
--- a/src/public/app/dialogs/options/password.js
+++ b/src/public/app/widgets/dialogs/options/password.js
@@ -1,6 +1,6 @@
-import server from "../../services/server.js";
-import protectedSessionHolder from "../../services/protected_session_holder.js";
-import toastService from "../../services/toast.js";
+import server from "../../../services/server.js";
+import protectedSessionHolder from "../../../services/protected_session_holder.js";
+import toastService from "../../../services/toast.js";
 
 const TPL = `
 <h3 id="password-heading"></h3>
diff --git a/src/public/app/dialogs/options/shortcuts.js b/src/public/app/widgets/dialogs/options/shortcuts.js
similarity index 97%
rename from src/public/app/dialogs/options/shortcuts.js
rename to src/public/app/widgets/dialogs/options/shortcuts.js
index 173e2a28b..00968c195 100644
--- a/src/public/app/dialogs/options/shortcuts.js
+++ b/src/public/app/widgets/dialogs/options/shortcuts.js
@@ -1,6 +1,6 @@
-import server from "../../services/server.js";
-import utils from "../../services/utils.js";
-import dialogService from "../../widgets/dialog.js";
+import server from "../../../services/server.js";
+import utils from "../../../services/utils.js";
+import dialogService from "../../dialog.js";
 
 const TPL = `
 <h4>Keyboard shortcuts</h4>
diff --git a/src/public/app/dialogs/options/sync.js b/src/public/app/widgets/dialogs/options/sync.js
similarity index 96%
rename from src/public/app/dialogs/options/sync.js
rename to src/public/app/widgets/dialogs/options/sync.js
index c81acb895..af3dc7838 100644
--- a/src/public/app/dialogs/options/sync.js
+++ b/src/public/app/widgets/dialogs/options/sync.js
@@ -1,5 +1,5 @@
-import server from "../../services/server.js";
-import toastService from "../../services/toast.js";
+import server from "../../../services/server.js";
+import toastService from "../../../services/toast.js";
 
 const TPL = `
 <h4 style="margin-top: 0px;">Sync configuration</h4>
diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs
index 8c151ea29..4c1cabd90 100644
--- a/src/views/desktop.ejs
+++ b/src/views/desktop.ejs
@@ -17,8 +17,6 @@
 
 <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
 
-<%- include('dialogs/options.ejs') %>
-
 <script type="text/javascript">
     global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */