diff --git a/.version b/.version
index 96d7717..cae9add 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-2.8.1
\ No newline at end of file
+2.8.2
\ No newline at end of file
diff --git a/files/global.css b/files/global.css
index c4e723e..2cb0e17 100644
--- a/files/global.css
+++ b/files/global.css
@@ -157,14 +157,31 @@ figure {
   cursor: pointer;
 }
 
-.tooltip a object {
+.tooltip a {
   cursor: pointer;
 }
 
+.tagtoggle {
+  cursor: pointer;
+  float: right;
+  padding: 12px;
+
+}
+
+.tagflex {
+  display: flex;
+}
+
+.tag {
+  flex: 1;
+}
+
+input {
+  pointer-events: none;
+}
+
 .tooltiptext {
-  display: none;
   cursor: default;
-  width: max-content;
   position: absolute;
   z-index: 100;
   opacity: 0;
@@ -176,11 +193,24 @@ figure {
 
 .tooltip .infotext {
   padding: 12px;
+  width: max-content;
 }
 
-.tooltip .tagdropdown {
+.tooltiptext.tagdropdown {
+  width: max-content;
+  right: 0;
   padding: 0;
   margin: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease, opacity 0.3s ease;
+  max-height: 0;
+  opacity: 0;
+}
+
+.tooltiptext.tagdropdown.show {
+  max-height: 286px;
+  overflow-y: scroll;
+  opacity: 1;
 }
 
 .tooltip:hover .infotext {
@@ -193,12 +223,27 @@ figure {
   opacity: 1;
 }
 
-.tooltip .tooltiptext .tagentry {
+.tagentryparent {
+  width: 100%;
+  overflow: hidden;
+  transition: max-height 0.3s ease, opacity 0.3s ease;
+  max-height: 0;
+  opacity: 0;
+}
+
+.tagentryparent.show {
+  max-height: 286px;
+  opacity: 1;
+  overflow-y: scroll;
+}
+
+.tagentry {
   list-style: none;
   width: 100%;
   cursor: pointer;
   margin: 0;
   padding: 0;
+  display: block;
 }
 
 .tooltip .tooltiptext ol {
@@ -208,7 +253,6 @@ figure {
 
 .tooltip .tooltiptext .tagentry label {
   cursor: pointer;
-  width: 100%;
   height: 100%;
   padding: 12px;
   display: block;
diff --git a/templates/default.css b/templates/default.css
index 4e238d1..055d33b 100644
--- a/templates/default.css
+++ b/templates/default.css
@@ -52,7 +52,11 @@
   background-color: var(--color2);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color7);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color4);
 }
 
diff --git a/templates/index.html.j2 b/templates/index.html.j2
index 4b102ff..a69545d 100644
--- a/templates/index.html.j2
+++ b/templates/index.html.j2
@@ -1,16 +1,24 @@
 {%- macro render_tags(tag_tree, parent) -%}
-<ol>
-  {%- for key, value in tag_tree.items() %}
-  <li class="tagentry">
-    <label onclick="filter()" title="{{ key }}" id="{{ parent }}|{{ key }}">
-      <input class="tag" type="checkbox" />{{ key }}{# {% if value %} <object data="{{ root }}.static/icons/arrow-down.svg" height="15em"></object>{% endif %} #}
-    </label>
-    {%- if value %}
+{%- for key, value in tag_tree.items() %}
+<li class="tagentry">
+  <div class="tagflex">
+    <label class="tag" title="{{ key }}" id="{{ parent }}|{{ key }}">
+      <input type="checkbox" class="tagcheckbox" />{{ key }}
+    </label>{% if value %} <span class="tagtoggle" data-tagid="{{ parent }}|{{ key }}">
+      <svg width="1em" height="1em" viewBox="0 0 129.87601 129.87624">
+        <g id="layer1" transform="translate(-33.816833,-52.685642)">
+          <path stroke="currentColor" style="fill:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+            d="M 54.476483,95.484647 98.754836,139.76308 143.03319,95.484647" id="path1" />
+        </g>
+      </svg></span>{% endif %}
+  </div>
+  {%- if value %}
+  <ol class="tagentryparent">
     {{ render_tags(value, parent + '|' + key) }}
-    {%- endif %}
-  </li>
-  {%- endfor %}
-</ol>
+  </ol>
+  {%- endif %}
+</li><br>
+{%- endfor %}
 {%- endmacro -%}
 <!DOCTYPE html>
 <html lang="en">
@@ -62,8 +70,13 @@
       </div>
       <div class="navright">
         {% if tags %}
-        <li class="tooltip" onclick="tagdropdown()">
-          <a>Filter by Tags {#<object data="{{ root }}.static/icons/arrow-down.svg" height="15em"></object>#}</a>
+        <li class="tooltip">
+          <a id="tagtogglelink">Filter by Tags <svg width="0.8em" height="0.8em" viewBox="0 0 129.87601 129.87624">
+              <g id="layer1" transform="translate(-33.816833,-52.685642)">
+                <path stroke="currentColor" style="fill:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+                  d="M 54.476483,95.484647 98.754836,139.76308 143.03319,95.484647" id="path1" />
+              </g>
+            </svg></a>
           <ol class="tooltiptext tagdropdown" id="tagdropdown">
             <span class="tagentry">
               <label onclick="recursive()">
@@ -175,7 +188,7 @@
     let shown = [];
     let subfolders = [];
     let controllers = {};
-    {# let tagdropdownshown = false; #}
+    let tagdropdownshown = false;
 
     function requestMetadata() {
       fetch(".metadata.json").then(response => {
@@ -205,19 +218,39 @@
         .catch(error => console.error('Failed to fetch data:', error));
     }
 
-    {# function tagdropdown() {
-      if (tagdropdownshown) {
-        document.getElementById("tagdropdown").style.display = "none";
-        document.getElementById("tagdropdown").style.opacity = 0;
-        document.getElementById("tagdropdown").parentElement.getElementsByTagName("a")[0].getElementsByTagName("object")[0].style = "transform: rotate(0deg)";
-        tagdropdownshown = false;
-      } else {
-        document.getElementById("tagdropdown").style.display = "block";
-        document.getElementById("tagdropdown").style.opacity = 1;
-        document.getElementById("tagdropdown").parentElement.getElementsByTagName("a")[0].getElementsByTagName("object")[0].style = "transform: rotate(180deg)";
-        tagdropdownshown = true;
-      }
-    } #}
+    function setupTagHandlers() {
+      const tagContainer = document.getElementById("tagdropdown");
+
+      tagContainer.addEventListener("change", debounce(filter, 150));
+
+      tagContainer.addEventListener("click", function (event) {
+        const toggle = event.target.closest(".tagtoggle");
+        if (toggle) {
+          event.stopPropagation();
+          const tagid = toggle.dataset.toggleid;
+          toggleTag(tagid);
+        }
+      });
+    }
+
+    function toggleTag(tagid) {
+      const tag = document.getElementById(tagid);
+      const ol = tag?.closest(".tagentry")?.querySelector(".tagentryparent");
+      const svg = tag?.parentElement.querySelector(".tagtoggle svg");
+
+      if (!ol || !svg) return;
+
+      ol.classList.toggle("show");
+      svg.style.transform = ol.classList.contains("show") ? "rotate(180deg)" : "rotate(0deg)";
+    }
+
+    function debounce(fn, delay) {
+      let timeoutId;
+      return function (...args) {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => fn.apply(this, args), delay);
+      };
+    }
 
     function openSwipe(img) {
       const options = {
@@ -332,7 +365,7 @@
       const path = decodeURIComponent(window.location.href.split("#")[0].replace("index.html", ""))
 
       const selected_tags = [];
-      const tagcheckboxes = document.querySelectorAll("#tagdropdown input[class='tag']:checked");
+      const tagcheckboxes = document.querySelectorAll("#tagdropdown input[class='tagcheckbox']:checked");
 
       tagcheckboxes.forEach((checkbox) => {
         let tag = checkbox.parentElement.id.trim().substring(1);
@@ -373,7 +406,7 @@
     }
 
     function setFilter(selected) {
-      const tagcheckboxes = document.querySelectorAll("#tagdropdown input[class='tag']");
+      const tagcheckboxes = document.querySelectorAll("#tagdropdown input[class='tagcheckbox']");
       selected.forEach((tag) => {
         tagcheckboxes.forEach((checkbox) => {
           if (checkbox.parentElement.id.trim().substring(1).replace(" ", "%20") == tag) {
@@ -383,8 +416,40 @@
       });
     }
 
+    function setupDropdownToggle() {
+      const toggleLink = document.getElementById("tagtogglelink");
+      const dropdown = document.getElementById("tagdropdown");
+
+      toggleLink.addEventListener("click", function (event) {
+        event.stopPropagation();
+        const svg = this.querySelector("svg");
+        dropdown.classList.toggle("show");
+        if (svg) svg.style.transform = dropdown.classList.contains("show") ? "rotate(180deg)" : "rotate(0deg)";
+        tagdropdownshown = dropdown.classList.contains("show");
+      });
+
+      document.addEventListener("click", function (event) {
+        if (!dropdown.contains(event.target) && !toggleLink.contains(event.target)) {
+          dropdown.classList.remove("show");
+          tagdropdownshown = false;
+          const svg = toggleLink.querySelector("svg");
+          if (svg) svg.style.transform = "rotate(0deg)";
+        }
+      });
+    }
+
     function onLoad() {
+      document.querySelectorAll('.tagtoggle').forEach(toggle => {
+        toggle.addEventListener('mouseup', function (event) {
+          event.stopPropagation();
+          const tagid = this.getAttribute('data-tagid');
+          toggleTag(tagid);
+        });
+      });
       requestMetadata();
+      setupDropdownToggle();
+      setupTagHandlers();
+      document.getElementById("recursive").addEventListener("change", debounce(recursive, 150));
     }
 
     window.addEventListener ?
diff --git a/test/example/subfolder/DSC01106.jpg.xmp b/test/example/subfolder/DSC01106.jpg.xmp
index b80aaa7..2d873b6 100644
--- a/test/example/subfolder/DSC01106.jpg.xmp
+++ b/test/example/subfolder/DSC01106.jpg.xmp
@@ -1,7 +1,30 @@
 <?xml version="1.0" encoding="utf-8"?>
 <x:xmpmeta x:xmptk="XMP Core 4.4.0-Exiv2" xmlns:x="adobe:ns:meta/">
-<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-<rdf:Description rdf:about="" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:exif="http://ns.adobe.com/exif/1.0/" xmlns:lr="http://ns.adobe.com/lightroom/1.0/" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmpMM:DerivedFrom="DSC01106.jpg">
-<dc:subject><rdf:Bag><rdf:li>st</rdf:li><rdf:li>clear</rdf:li><rdf:li>dark</rdf:li><rdf:li>moon</rdf:li><rdf:li>night</rdf:li><rdf:li>night sky</rdf:li><rdf:li>sky</rdf:li></rdf:Bag></dc:subject><lr:hierarchicalSubject><rdf:Bag><rdf:li>st|clear</rdf:li><rdf:li>st|dark</rdf:li><rdf:li>st|moon</rdf:li><rdf:li>st|night</rdf:li><rdf:li>st|night sky</rdf:li><rdf:li>st|sky</rdf:li></rdf:Bag></lr:hierarchicalSubject></rdf:Description>
-</rdf:RDF>
+    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+        <rdf:Description rdf:about="" xmlns:dc="http://purl.org/dc/elements/1.1/"
+            xmlns:exif="http://ns.adobe.com/exif/1.0/" xmlns:lr="http://ns.adobe.com/lightroom/1.0/"
+            xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/"
+            xmpMM:DerivedFrom="DSC01106.jpg">
+            <dc:subject>
+                <rdf:Bag>
+                    <rdf:li>st</rdf:li>
+                    <rdf:li>clear</rdf:li>
+                    <rdf:li>dark</rdf:li>
+                    <rdf:li>moon</rdf:li>
+                    <rdf:li>night</rdf:li>
+                    <rdf:li>night sky</rdf:li>
+                    <rdf:li>sky</rdf:li>
+                </rdf:Bag>
+            </dc:subject>
+            <lr:hierarchicalSubject>
+                <rdf:Bag>
+                    <rdf:li>st|clear</rdf:li>
+                    <rdf:li>st|dark</rdf:li>
+                    <rdf:li>st|moon</rdf:li>
+                    <rdf:li>st|night</rdf:li>
+                    <rdf:li>st|sky|night sky</rdf:li>
+                </rdf:Bag>
+            </lr:hierarchicalSubject>
+        </rdf:Description>
+    </rdf:RDF>
 </x:xmpmeta>
\ No newline at end of file
diff --git a/themes/alpenglow-dark.css b/themes/alpenglow-dark.css
index da6046c..6e3d41b 100644
--- a/themes/alpenglow-dark.css
+++ b/themes/alpenglow-dark.css
@@ -97,7 +97,11 @@ body {
   background-color: var(--color6);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color3);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color3);
 }
 
diff --git a/themes/alpenglow.css b/themes/alpenglow.css
index f6c80e0..54e631a 100644
--- a/themes/alpenglow.css
+++ b/themes/alpenglow.css
@@ -96,7 +96,11 @@ body {
   background-color: var(--color3);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color7);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color7);
 }
 
diff --git a/themes/aritim-dark.css b/themes/aritim-dark.css
index c156a22..4c169b0 100644
--- a/themes/aritim-dark.css
+++ b/themes/aritim-dark.css
@@ -74,7 +74,11 @@
   background-color: var(--bcolor1);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor3);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor3);
 }
 
diff --git a/themes/aritim.css b/themes/aritim.css
index 45b0310..be5dcec 100644
--- a/themes/aritim.css
+++ b/themes/aritim.css
@@ -74,7 +74,11 @@
   background-color: var(--bcolor1);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor3);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor3);
 }
 
diff --git a/themes/autumn.css b/themes/autumn.css
index 9eb82c5..f325b4d 100644
--- a/themes/autumn.css
+++ b/themes/autumn.css
@@ -79,7 +79,11 @@
   font-family: "Playfair Display", serif;
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color3);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color3);
 }
 
diff --git a/themes/carnation.css b/themes/carnation.css
index e9b2b3a..07f14af 100644
--- a/themes/carnation.css
+++ b/themes/carnation.css
@@ -73,7 +73,11 @@
   background-color: var(--bcolor2);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor4);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor4);
 }
 
diff --git a/themes/catpuccin.css b/themes/catpuccin.css
index 9c3dc66..399133c 100644
--- a/themes/catpuccin.css
+++ b/themes/catpuccin.css
@@ -79,7 +79,11 @@
   font-family: "Nunito", sans-serif;
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color4);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color4);
 }
 
diff --git a/themes/cornflower.css b/themes/cornflower.css
index 27af7ed..3a1c502 100644
--- a/themes/cornflower.css
+++ b/themes/cornflower.css
@@ -73,7 +73,11 @@
   background-color: var(--bcolor2);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor4);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor4);
 }
 
diff --git a/themes/default-dark.css b/themes/default-dark.css
index 5af9582..a600bbe 100644
--- a/themes/default-dark.css
+++ b/themes/default-dark.css
@@ -52,7 +52,11 @@
   background-color: var(--color3);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color4);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color4);
 }
 
diff --git a/themes/default.css b/themes/default.css
index 5250ede..6dd3ef7 100644
--- a/themes/default.css
+++ b/themes/default.css
@@ -52,7 +52,11 @@
   background-color: var(--color2);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color4);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color4);
 }
 
diff --git a/themes/ivy.css b/themes/ivy.css
index d36deef..3a887f6 100644
--- a/themes/ivy.css
+++ b/themes/ivy.css
@@ -73,7 +73,11 @@
   background-color: var(--bcolor2);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor4);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor4);
 }
 
diff --git a/themes/kjoe.css b/themes/kjoe.css
index ad746bc..b57d32e 100644
--- a/themes/kjoe.css
+++ b/themes/kjoe.css
@@ -72,7 +72,11 @@
   background-color: var(--color3);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color2);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color2);
 }
 
diff --git a/themes/monokai-vibrant.css b/themes/monokai-vibrant.css
index 59d68c3..040e7e8 100644
--- a/themes/monokai-vibrant.css
+++ b/themes/monokai-vibrant.css
@@ -55,7 +55,11 @@
   background-color: var(--bcolor2);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor3);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor3);
 }
 
diff --git a/themes/rainbow.css b/themes/rainbow.css
index 88ed0d5..f8c4f63 100644
--- a/themes/rainbow.css
+++ b/themes/rainbow.css
@@ -76,7 +76,11 @@
   background-color: var(--bcolor2);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor4);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor4);
 }
 
diff --git a/themes/spring.css b/themes/spring.css
index 5730598..514e69f 100644
--- a/themes/spring.css
+++ b/themes/spring.css
@@ -79,7 +79,11 @@
   font-family: "Lora", serif;
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor3);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor3);
 }
 
diff --git a/themes/steam.css b/themes/steam.css
index e51094b..3d463b1 100644
--- a/themes/steam.css
+++ b/themes/steam.css
@@ -80,7 +80,11 @@
   background-color: var(--color4);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color3);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color3);
 }
 
diff --git a/themes/summer.css b/themes/summer.css
index e3f927a..3ddb97d 100644
--- a/themes/summer.css
+++ b/themes/summer.css
@@ -80,7 +80,11 @@
   font-family: "Roboto", sans-serif;
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor3);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor3);
   color: var(--bcolor2);
 }
diff --git a/themes/sunflower.css b/themes/sunflower.css
index c86774d..4dbc525 100644
--- a/themes/sunflower.css
+++ b/themes/sunflower.css
@@ -74,7 +74,11 @@
   background-color: var(--bcolor2);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor4);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor4);
 }
 
diff --git a/themes/winter.css b/themes/winter.css
index 1bdc3a3..0e30620 100644
--- a/themes/winter.css
+++ b/themes/winter.css
@@ -88,7 +88,11 @@
   font-family: "Montserrat", sans-serif;
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color2);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color2);
 }
 
