diff --git a/src/public/app/dialogs/sort_child_notes.js b/src/public/app/dialogs/sort_child_notes.js
deleted file mode 100644
index e855b3fa2..000000000
--- a/src/public/app/dialogs/sort_child_notes.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import server from "../services/server.js";
-import utils from "../services/utils.js";
-
-const $dialog = $("#sort-child-notes-dialog");
-const $form = $("#sort-child-notes-form");
-
-let parentNoteId = null;
-
-$form.on('submit', async () => {
-    const sortBy = $form.find("input[name='sort-by']:checked").val();
-    const sortDirection = $form.find("input[name='sort-direction']:checked").val();
-    const foldersFirst = $form.find("input[name='sort-folders-first']").is(":checked");
-
-    await server.put(`notes/${parentNoteId}/sort-children`, {sortBy, sortDirection, foldersFirst});
-
-    utils.closeActiveDialog();
-});
-
-export async function showDialog(noteId) {
-    parentNoteId = noteId;
-
-    utils.openDialog($dialog);
-
-    $form.find('input:first').focus();
-}
diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index c8668109c..501443b3f 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -57,6 +57,7 @@ import HelpDialog from "../widgets/dialogs/help.js";
 import RecentChangesDialog from "../widgets/dialogs/recent_changes.js";
 import BackendLogDialog from "../widgets/dialogs/backend_log.js";
 import BranchPrefixDialog from "../widgets/dialogs/branch_prefix.js";
+import SortChildNotesDialog from "../widgets/dialogs/sort_child_notes.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -188,6 +189,7 @@ export default class DesktopLayout {
             .child(new HelpDialog())
             .child(new RecentChangesDialog())
             .child(new BackendLogDialog())
-            .child(new BranchPrefixDialog());
+            .child(new BranchPrefixDialog())
+            .child(new SortChildNotesDialog());
     }
 }
diff --git a/src/public/app/widgets/dialogs/sort_child_notes.js b/src/public/app/widgets/dialogs/sort_child_notes.js
new file mode 100644
index 000000000..65440efe4
--- /dev/null
+++ b/src/public/app/widgets/dialogs/sort_child_notes.js
@@ -0,0 +1,100 @@
+import server from "../../services/server.js";
+import utils from "../../services/utils.js";
+import BasicWidget from "../basic_widget.js";
+
+const TPL = `<div class="sort-child-notes-dialog modal mx-auto" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-lg" style="max-width: 500px" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title mr-auto">Sort children by ...</h5>
+
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <form class="sort-child-notes-form">
+                <div class="modal-body">
+                    <h5>Sorting criteria</h5>
+
+                    <div class="form-check">
+                        <label class="form-check-label">
+                           <input class="form-check-input" type="radio" name="sort-by" value="title" checked>
+                            title
+                        </label>
+                    </div>
+
+                    <div class="form-check">
+                        <label class="form-check-label">
+                            <input class="form-check-input" type="radio" name="sort-by" value="dateCreated">
+                            date created
+                        </label>
+                    </div>
+
+                    <div class="form-check">
+                        <label class="form-check-label">
+                            <input class="form-check-input" type="radio" name="sort-by" value="dateModified">
+                            date modified
+                        </label>
+                    </div>
+
+                    <br/>
+
+                    <h5>Sorting direction</h5>
+
+                    <div class="form-check">
+                        <label class="form-check-label">
+                            <input class="form-check-input" type="radio" name="sort-direction" value="asc" checked>
+                            ascending
+                        </label>
+                    </div>
+
+                    <div class="form-check">
+                        <label class="form-check-label">
+                            <input class="form-check-input" type="radio" name="sort-direction" value="desc">
+                            descending
+                        </label>
+                    </div>
+
+                    <br />
+
+                    <h5>Folders</h5>
+
+                    <div class="form-check">
+                        <label class="form-check-label">
+                            <input class="form-check-input" type="checkbox" name="sort-folders-first" value="1">
+                            sort folders at the top
+                        </label>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-primary">Sort <kbd>enter</kbd></button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>`;
+
+export default class SortChildNotesDialog extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+        this.$form = this.$widget.find(".sort-child-notes-form");
+
+        this.$form.on('submit', async () => {
+            const sortBy = this.$form.find("input[name='sort-by']:checked").val();
+            const sortDirection = this.$form.find("input[name='sort-direction']:checked").val();
+            const foldersFirst = this.$form.find("input[name='sort-folders-first']").is(":checked");
+
+            await server.put(`notes/${this.parentNoteId}/sort-children`, {sortBy, sortDirection, foldersFirst});
+
+            utils.closeActiveDialog();
+        });
+    }
+
+    async sortChildNotesEvent({node}) {
+        this.parentNoteId = node.data.noteId;
+
+        utils.openDialog(this.$widget);
+
+        this.$form.find('input:first').focus();
+    }
+}
diff --git a/src/public/app/widgets/note_tree.js b/src/public/app/widgets/note_tree.js
index 8ffdb220d..05cf3d3c0 100644
--- a/src/public/app/widgets/note_tree.js
+++ b/src/public/app/widgets/note_tree.js
@@ -1424,10 +1424,6 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
         this.collapseTree(node);
     }
 
-    sortChildNotesCommand({node}) {
-        import("../dialogs/sort_child_notes.js").then(d => d.showDialog(node.data.noteId));
-    }
-
     async recentChangesInSubtreeCommand({node}) {
         this.triggerCommand("showRecentChanges", {ancestorNoteId: node.data.noteId});
     }
diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs
index 0b48e3e14..260dbae1e 100644
--- a/src/views/desktop.ejs
+++ b/src/views/desktop.ejs
@@ -31,7 +31,6 @@
 <%- include('dialogs/clone_to.ejs') %>
 <%- include('dialogs/move_to.ejs') %>
 <%- include('dialogs/include_note.ejs') %>
-<%- include('dialogs/sort_child_notes.ejs') %>
 <%- include('dialogs/delete_notes.ejs') %>
 <%- include('dialogs/password_not_set.ejs') %>
 <%- include('dialogs/note_type_chooser.ejs') %>
diff --git a/src/views/dialogs/sort_child_notes.ejs b/src/views/dialogs/sort_child_notes.ejs
deleted file mode 100644
index ed38a0636..000000000
--- a/src/views/dialogs/sort_child_notes.ejs
+++ /dev/null
@@ -1,71 +0,0 @@
-<div id="sort-child-notes-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-lg" style="max-width: 500px" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title mr-auto">Sort children by ...</h5>
-
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <form id="sort-child-notes-form">
-                <div class="modal-body">
-                    <h5>Sorting criteria</h5>
-
-                    <div class="form-check">
-                        <input class="form-check-input" type="radio" name="sort-by" value="title" id="sort-by-title" checked>
-                        <label class="form-check-label" for="sort-by-title">
-                            title
-                        </label>
-                    </div>
-
-                    <div class="form-check">
-                        <input class="form-check-input" type="radio" name="sort-by" value="dateCreated" id="sort-by-date-created">
-                        <label class="form-check-label" for="sort-by-date-created">
-                            date created
-                        </label>
-                    </div>
-
-                    <div class="form-check">
-                        <input class="form-check-input" type="radio" name="sort-by" value="dateModified" id="sort-by-date-modified">
-                        <label class="form-check-label" for="sort-by-date-modified">
-                            date modified
-                        </label>
-                    </div>
-
-                    <br/>
-
-                    <h5>Sorting direction</h5>
-
-                    <div class="form-check">
-                        <input class="form-check-input" type="radio" name="sort-direction" value="asc" id="sort-direction-asc" checked>
-                        <label class="form-check-label" for="sort-direction-asc">
-                            ascending
-                        </label>
-                    </div>
-
-                    <div class="form-check">
-                        <input class="form-check-input" type="radio" name="sort-direction" value="desc" id="sort-direction-desc">
-                        <label class="form-check-label" for="sort-direction-desc">
-                            descending
-                        </label>
-                    </div>
-
-                    <br />
-
-                    <h5>Folders</h5>
-
-                    <div class="form-check">
-                        <input class="form-check-input" type="checkbox" name="sort-folders-first" value="1" id="sort-folders-first">
-                        <label class="form-check-label" for="sort-folders-first">
-                            sort folders at the top
-                        </label>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="submit" class="btn btn-primary">Sort <kbd>enter</kbd></button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>