diff --git a/src/public/app/dialogs/backend_log.js b/src/public/app/dialogs/backend_log.js
deleted file mode 100644
index ac145f13d..000000000
--- a/src/public/app/dialogs/backend_log.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import server from "../services/server.js";
-import utils from "../services/utils.js";
-
-const $dialog = $("#backend-log-dialog");
-const $backendLogTextArea = $("#backend-log-textarea");
-const $refreshBackendLog = $("#refresh-backend-log-button");
-
-export async function showDialog() {
-    utils.openDialog($dialog);
-
-    load();
-}
-
-function scrollToBottom() {
-    $backendLogTextArea.scrollTop($backendLogTextArea[0].scrollHeight);
-}
-
-async function load() {
-    const backendLog = await server.get('backend-log');
-
-    $backendLogTextArea.text(backendLog);
-
-    scrollToBottom();
-}
-
-$refreshBackendLog.on('click', load);
-
-$dialog.on('shown.bs.modal', scrollToBottom);
\ No newline at end of file
diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index 3bc745601..0b33f9c0c 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -55,6 +55,7 @@ import AboutDialog from "../widgets/dialogs/about.js";
 import NoteSourceDialog from "../dialogs/note_source.js";
 import HelpDialog from "../widgets/dialogs/help.js";
 import RecentChangesDialog from "../widgets/dialogs/recent_changes.js";
+import BackendLogDialog from "../widgets/dialogs/backend_log.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -184,6 +185,7 @@ export default class DesktopLayout {
             .child(new AboutDialog())
             .child(new NoteSourceDialog())
             .child(new HelpDialog())
-            .child(new RecentChangesDialog());
+            .child(new RecentChangesDialog())
+            .child(new BackendLogDialog());
     }
 }
diff --git a/src/public/app/services/root_command_executor.js b/src/public/app/services/root_command_executor.js
index 52fe5507a..33a797033 100644
--- a/src/public/app/services/root_command_executor.js
+++ b/src/public/app/services/root_command_executor.js
@@ -78,10 +78,6 @@ export default class RootCommandExecutor extends Component {
         this.searchNotesCommand({ancestorNoteId: noteId});
     }
 
-    showBackendLogCommand() {
-        import("../dialogs/backend_log.js").then(d => d.showDialog());
-    }
-
     openNoteExternallyCommand() {
         const noteId = appContext.tabManager.getActiveContextNoteId();
 
diff --git a/src/public/app/widgets/dialogs/backend_log.js b/src/public/app/widgets/dialogs/backend_log.js
new file mode 100644
index 000000000..0a6bb3889
--- /dev/null
+++ b/src/public/app/widgets/dialogs/backend_log.js
@@ -0,0 +1,53 @@
+import server from "../../services/server.js";
+import utils from "../../services/utils.js";
+import BasicWidget from "../basic_widget.js";
+
+const TPL = `
+<div class="backend-log-dialog modal fade mx-auto" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-xl" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Backend log</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <textarea class="backend-log-textarea" readonly="readonly" style="min-height: 600px; width: 100%;"></textarea>
+            </div>
+            <div class="modal-footer">
+                <button class="refresh-backend-log-button btn btn-primary">Refresh</button>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+export default class BackendLogDialog extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+        this.$backendLogTextArea = this.$widget.find(".backend-log-textarea");
+        this.$refreshBackendLog = this.$widget.find(".refresh-backend-log-button");
+
+        this.$refreshBackendLog.on('click', () => this.load());
+
+        this.$widget.on('shown.bs.modal', () => this.scrollToBottom());
+    }
+
+    scrollToBottom() {
+        this.$backendLogTextArea.scrollTop(this.$backendLogTextArea[0].scrollHeight);
+    }
+
+    async load() {
+        const backendLog = await server.get('backend-log');
+
+        this.$backendLogTextArea.text(backendLog);
+
+        this.scrollToBottom();
+    }
+
+    async showBackendLogEvent() {
+        utils.openDialog(this.$widget);
+
+        this.load();
+    }
+}
diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs
index 1f87081c7..fb86e7bab 100644
--- a/src/views/desktop.ejs
+++ b/src/views/desktop.ejs
@@ -31,7 +31,6 @@
 <%- include('dialogs/confirm.ejs') %>
 <%- include('dialogs/clone_to.ejs') %>
 <%- include('dialogs/move_to.ejs') %>
-<%- include('dialogs/backend_log.ejs') %>
 <%- include('dialogs/include_note.ejs') %>
 <%- include('dialogs/sort_child_notes.ejs') %>
 <%- include('dialogs/delete_notes.ejs') %>
diff --git a/src/views/dialogs/backend_log.ejs b/src/views/dialogs/backend_log.ejs
deleted file mode 100644
index 9405ef181..000000000
--- a/src/views/dialogs/backend_log.ejs
+++ /dev/null
@@ -1,18 +0,0 @@
-<div id="backend-log-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-xl" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">Backend log</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                <textarea id="backend-log-textarea" readonly="readonly" style="min-height: 600px; width: 100%;"></textarea>
-            </div>
-            <div class="modal-footer">
-                <button id="refresh-backend-log-button" class="btn btn-primary">Refresh</button>
-            </div>
-        </div>
-    </div>
-</div>