diff --git a/modules/web.html b/modules/web.html
index 5592686..e005eaf 100644
--- a/modules/web.html
+++ b/modules/web.html
@@ -26,8 +26,8 @@
             button, .btn{background:transparent;border:1px solid rgba(255,255,255,0.06); padding:8px 12px;border-radius:8px;color:inherit;cursor:pointer}
             .btn.primary{background:linear-gradient(90deg,var(--accent), #6cc7ff); color:#001; border:none; font-weight:600}
             .list{background:#07121a; border-radius:8px; padding:8px; overflow:auto; border:1px solid rgba(255,255,255,0.02)}
-            ul.playlist{list-style:none; padding:6px; margin:0; font-family: "Consolas",monospace; font-size:13px}
-            ul.playlist li{padding:6px 8px; border-radius:6px; display:flex; justify-content:space-between; gap:8px}
+            ul.playlist{list-style:none; padding:6px; margin:0; font-family: "Consolas",monospace; font-size:13px;}
+            ul.playlist li{padding:6px 8px; border-radius:6px; display:flex; justify-content:space-between; gap:8px; transition: background-color 0.12s ease;}
             ul.playlist li:hover{background:rgba(255,255,255,0.02)}
             ul.playlist li.current{background:rgba(62,166,255,0.08)}
             ul.playlist li.selected{background:rgba(62, 165, 255, 0.305)}
@@ -35,7 +35,7 @@
             .two-col{display:flex; gap:8px; align-items:flex-start; height:100%}
             .box{display:flex; flex-direction:column; gap:8px; flex-grow: 1; overflow: hidden;}
             .listbox{height:100%; min-height:220px; overflow:auto; border-radius:6px; background:var(--card); padding:8px; font-size:14px; scrollbar-width: none;}
-            .listbox div.item{padding:6px; border-radius:6px}
+            .listbox div.item{padding:6px; border-radius:6px; transition: background-color 0.12s ease;}
             .listbox div.item:hover{background:rgba(255,255,255,0.02); cursor:pointer}
             .listbox div.item.selected{background:rgba(62, 165, 255, 0.305)}
             .small{font-size:12px; color:var(--muted)}
@@ -224,6 +224,11 @@
                         node.className = "item";
                         node.textContent = f;
                         node.addEventListener("click", () => {
+                            if(node.classList.contains("selected")) {
+                                node.classList.remove("selected");
+                                selectedSubFile = null;
+                                return;
+                            }
                             Array.from(dirsBox.children).forEach(c=>c.classList.remove("selected"));
                             node.classList.add("selected"); selectedSubFile = f;
                         });
@@ -326,6 +331,13 @@
             }
 
             function onDirClicked(name, node){
+                if(node.classList.contains("selected")) {
+                    node.classList.remove("selected");
+                    selectedSubFile = null;
+                    applySubdir({dir: selectedDir});
+                    selectedDir = null;
+                    return;
+                }
                 Array.from(document.getElementById("dirs-box").children).forEach(c => c.classList.remove("selected"));
                 node.classList.add("selected");
                 selectedDir = name;