diff --git a/modules/web/index.html b/modules/web/index.html
index aaff119..9fe58e5 100644
--- a/modules/web/index.html
+++ b/modules/web/index.html
@@ -219,7 +219,7 @@
                     </div>
 
                     <div class="box" id="section-queue">
-                        <div class="frame-title" onclick="toggleSection('section-queue')"><div>Queue<button id="clear-btn" class="btn">✖ Clear</button></div></div>
+                        <div class="frame-title" id="queue-title"><div>Queue<button id="clear-btn" class="btn">✖ Clear</button></div></div>
                         <div class="collapsible-content listbox" id="queue-box" style="flex-grow: 1;">
                             <ul class="playlist" id="queue-ul"></ul>
                         </div>
diff --git a/modules/web/web.js b/modules/web/web.js
index 34ebbab..adb575c 100644
--- a/modules/web/web.js
+++ b/modules/web/web.js
@@ -255,8 +255,6 @@ document.getElementById("jingle-btn").addEventListener("contextmenu", (e) => {
     e.preventDefault();
     ws.send(JSON.stringify({action:"jingle", top: true}));
 });
-document.getElementById("clear-btn").addEventListener("click", () => ws.send(JSON.stringify({action:"clear_toplay"})));
-
 document.getElementById("skipidx-btn").addEventListener("click", () => {
     if (selectedPlaylistIndex == null) return;
     const action = skipped_idx.includes(selectedPlaylistIndex)
@@ -265,6 +263,12 @@ document.getElementById("skipidx-btn").addEventListener("click", () => {
     ws.send(JSON.stringify(action));
 });
 
+document.getElementById("queue-title").addEventListener("click", () => toggleSection("section-queue"));
+document.getElementById("clear-btn").addEventListener("click", (e) => {
+    e.stopPropagation();
+    ws.send(JSON.stringify({action:"clear_toplay"}));
+});
+
 function addSelectedFileToQueue(top) {
     let fullPath = null;
     let success = false;