diff --git a/web/js/pqueue.ui.js b/web/js/pqueue.ui.js
index 46f67f0..4d7c86b 100644
--- a/web/js/pqueue.ui.js
+++ b/web/js/pqueue.ui.js
@@ -283,8 +283,7 @@
 
             const root = UI.el("div", { class: "pqueue-root" });
             dom.root = root;
-
-            root.appendChild(UI.renderToolbar());
+            
             const sections = UI.el("div", { class: "pqueue-sections" });
             const metrics = UI.renderMetrics();
             if (metrics) sections.appendChild(metrics);
@@ -294,6 +293,11 @@
             root.appendChild(sections);
             state.container.appendChild(root);
 
+            // Place toolbar outside of scrollable sections at the bottom
+            const toolbarHost = UI.el("div", { class: "pqueue-toolbar-host" });
+            toolbarHost.appendChild(UI.renderToolbar());
+            state.container.appendChild(toolbarHost);
+
             dom.sections = sections;
 
             requestAnimationFrame(() => {
diff --git a/web/js/pqueue.ui.render.js b/web/js/pqueue.ui.render.js
index 0689b9f..ff2f273 100644
--- a/web/js/pqueue.ui.render.js
+++ b/web/js/pqueue.ui.render.js
@@ -46,8 +46,7 @@
 
         const root = UI.el("div", { class: "pqueue-root" });
         dom.root = root;
-
-        root.appendChild(UI.renderToolbar());
+        
         const sections = UI.el("div", { class: "pqueue-sections" });
         const metrics = UI.renderMetrics();
         if (metrics) sections.appendChild(metrics);
@@ -57,6 +56,11 @@
         root.appendChild(sections);
         state.container.appendChild(root);
 
+        // Place toolbar outside of scrollable sections at the bottom
+        const toolbarHost = UI.el("div", { class: "pqueue-toolbar-host" });
+        toolbarHost.appendChild(UI.renderToolbar());
+        state.container.appendChild(toolbarHost);
+
         dom.sections = sections;
 
         requestAnimationFrame(() => {