diff --git a/core/templates/base.html b/core/templates/base.html
index f8cd44f..8808457 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -14,11 +14,13 @@
     <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-slider@2.0.5/dist/css/bulma-slider.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar@6.1.18/dist/css/bulma-calendar.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@creativebulma/bulma-tagsinput@1.0.3/dist/css/bulma-tagsinput.min.css">
     <script src="https://cdn.jsdelivr.net/npm/bulma-calendar@6.1.18/dist/js/bulma-calendar.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bulma-slider@2.0.5/dist/js/bulma-slider.min.js"></script>
     <script src="https://unpkg.com/htmx.org@1.8.0" integrity="sha384-cZuAZ+ZbwkNRnrKi05G/fjBX+azI9DNOkNYysZ0I/X5ZFgsmMiBXgDZof30F5ofc" crossorigin="anonymous"></script>
     <script src="https://unpkg.com/htmx.org@1.8.0/dist/ext/remove-me.js"></script>
     <script src="https://unpkg.com/hyperscript.org@0.9.7"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@creativebulma/bulma-tagsinput@1.0.3/dist/js/bulma-tagsinput.min.js"></script>
     <script>
       document.addEventListener('DOMContentLoaded', () => {
 
@@ -70,6 +72,8 @@
       .htmx-request.htmx-indicator{
           opacity:1
       }
+
+      
     </style>
   </head>
   <body>
diff --git a/core/templates/ui/drilldown/drilldown.html b/core/templates/ui/drilldown/drilldown.html
index 91033c1..9af17db 100644
--- a/core/templates/ui/drilldown/drilldown.html
+++ b/core/templates/ui/drilldown/drilldown.html
@@ -3,21 +3,58 @@
 {% block content %}
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <script>
-    function populateSearch(field, value) {
+    function addTag(value) {
+      var inputTags = document.getElementById('tags');
+      var btiInstance = inputTags.BulmaTagsInput();
+      btiInstance.add(value);
+    }
+    function delTag(value) {
+      var inputTags = document.getElementById('tags');
+      var btiInstance = inputTags.BulmaTagsInput();
+      btiInstance.remove(value);
+    }
+    function toggleTag(field, value) {
       var queryElement = document.getElementById('query');
+      var tagText = `${field}: ${value}`;
       var present = true;
       if (present == true) {
         var toAppend = ` AND ${field}: "${value}"`;
         var toRemove = `${field}: "${value}"`;
+        var tagText = `${field}: ${value}`;
       } else {
         var toAppend = ` AND NOT ${field}: "${value}"`;
         var toRemove = `NOT ${field}: "${value}"`;
       }
       if (!queryElement.value.includes(toAppend) && !queryElement.value.includes(toRemove)) {
-        queryElement.value+=toAppend;
+        addTag(tagText);
       } else {
-          queryElement.value = queryElement.value.replaceAll(toAppend, "");
-          queryElement.value = queryElement.value.replaceAll(toRemove, "");
+        delTag(tagText);
+      }
+    }
+    function populateSearch(field, value, fromTag=false) {
+      var queryElement = document.getElementById('query');
+      var present = true;
+      if (present == true) {
+        var toAppend = ` AND ${field}: "${value}"`;
+        var toRemove = `${field}: "${value}"`;
+        var tagText = `${field}: ${value}`;
+      } else {
+        var toAppend = ` AND NOT ${field}: "${value}"`;
+        var toRemove = `NOT ${field}: "${value}"`;
+      }
+      if (!queryElement.value.includes(toAppend) && !queryElement.value.includes(toRemove)) {
+        
+        if (fromTag) {
+          queryElement.value+=toAppend;
+        } else {
+          queryElement.value+=toAppend;
+        }
+      } else {
+          if (fromTag) {
+            queryElement.value = queryElement.value.replaceAll(toAppend, "");
+            queryElement.value = queryElement.value.replaceAll(toRemove, "");
+          } else {
+          }
       }
       if (field == "src") {
         document.getElementById("source").selectedIndex = 0;
@@ -181,34 +218,30 @@
                     for(var i = 0; i < calendars.length; i++) {
                       // Add listener to select event
                       calendars[i].on('save', date => {
-                        console.log(date);
                         htmx.trigger("#search", "click");
                       });
                     }
-
-                    // To access to bulmaCalendar instance of an element
-                    var element = document.querySelector('#my-element');
-                    if (element) {
-                      // bulmaCalendar instance is available as element.bulmaCalendar
-                      element.bulmaCalendar.on('select', function(datepicker) {
-                        console.log(datepicker.data.value());
-                      });
-                    }
                   </script>
                 </div>
               </div>
               <div class="control">
-                <label class="radio">
+                <label class="radio button has-text-link">
                   <input type="radio" value="desc" name="sorting" checked>
-                  Desc
+                  <span class="icon" data-tooltip="Sort descending">
+                    <i class="fa-solid fa-sort-down"></i>
+                  </span>
                 </label>
-                <label class="radio">
+                <label class="radio button">
                   <input type="radio" value="asc" name="sorting">
-                  Asc
+                  <span class="icon" data-tooltip="Sort ascending">
+                    <i class="fa-solid fa-sort-up"></i>
+                  </span>
                 </label>
-                <label class="radio">
+                <label class="radio button">
                   <input type="radio" value="none" name="sorting">
-                  None
+                  <span class="icon" data-tooltip="No sort">
+                    <i class="fa-solid fa-sort"></i>
+                  </span>
                 </label>
               </div>
             </div>
@@ -218,6 +251,34 @@
       <div class="is-hidden"></div>
     </form>
   </div>
+  <div class="block">
+    <input id="tags" class="input" type="tags" placeholder="Add query" value="">
+    <script>
+      var inputTags = document.getElementById('tags');
+      new BulmaTagsInput(inputTags);
+      inputTags.BulmaTagsInput().on('before.add', function(item) {
+        var spl = item.split(": ");
+        var field = spl[0];
+        try {
+          var value = JSON.parse(spl[1]);
+        } catch {
+          var value = spl[1];
+        }
+        populateSearch(field, value, fromTag=true);
+        return `${field}: ${value}`;
+      });
+      inputTags.BulmaTagsInput().on('after.remove', function(item) {
+        var spl = item.split(": ");
+        var field = spl[0];
+        try {
+          var value = JSON.parse(spl[1]);
+        } catch {
+          var value = spl[1];
+        }
+        populateSearch(field, value, fromTag=true);
+      });
+    </script>
+  </div>
   <div class="block">
     <div id="results">
     </div>
diff --git a/core/templates/ui/drilldown/results.html b/core/templates/ui/drilldown/results.html
index 74b1813..3c4c103 100644
--- a/core/templates/ui/drilldown/results.html
+++ b/core/templates/ui/drilldown/results.html
@@ -65,7 +65,7 @@
             {% endif %}
               <td>
                 <a class="has-text-link is-underlined"
-                  onclick="populateSearch('src', '{{ item.src|escapejs }}')">
+                  onclick="toggleTag('src', '{{ item.src|escapejs }}')">
                   {% if item.src == 'irc' %}
                     <span class="icon" data-tooltip="IRC">
                       <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
@@ -79,7 +79,7 @@
               </td>
               <td>
                 <a class="has-text-link is-underlined"
-                  onclick="populateSearch('type', '{{ item.type|escapejs }}')">
+                  onclick="toggleTag('type', '{{ item.type|escapejs }}')">
                   {% if item.type == 'msg' %}
                     <span class="icon" data-tooltip="Message">
                       <i class="fa-solid fa-message"></i>
@@ -124,7 +124,7 @@
               <td style="max-width: 10em" class="wrap">{{ item.msg }}</td>
               <td>
                 <a class="has-text-link is-underlined"
-                  onclick="populateSearch('host', '{{ item.host|escapejs }}')">
+                  onclick="toggleTag('host', '{{ item.host|escapejs }}')">
                   {{ item.host }}
                 </a>
               </td>
@@ -145,7 +145,7 @@
                       </span>
                     {% endif %}
                   </div>
-                  <a class="nowrap-child has-text-link is-underlined" onclick="populateSearch('nick', '{{ item.nick|escapejs }}')">
+                  <a class="nowrap-child has-text-link is-underlined" onclick="toggleTag('nick', '{{ item.nick|escapejs }}')">
                     {{ item.nick }}
                   </a>
                     {% if item.num_chans is not None %}
@@ -173,7 +173,7 @@
               <td>
                 <div class="nowrap-parent">
                   <a class="nowrap-child has-text-link is-underlined"
-                    onclick="populateSearch('channel', '{{ item.channel|escapejs }}')">
+                    onclick="toggleTag('channel', '{{ item.channel|escapejs }}')">
                     {{ item.channel }}
                   </a>
                   {% if item.num_users is not None %}
@@ -187,7 +187,7 @@
               </td>
               <td>
                 <a class="has-text-link is-underlined"
-                  onclick="populateSearch('net', '{{ item.net|escapejs }}')">
+                  onclick="toggleTag('net', '{{ item.net|escapejs }}')">
                   {{ item.net }}
                 </a>
               </td>
