diff --git a/web/static/js/filters.js b/web/static/js/filters.js
new file mode 100644
index 0000000..00d12fd
--- /dev/null
+++ b/web/static/js/filters.js
@@ -0,0 +1,7 @@
+document.addEventListener('DOMContentLoaded', function () {
+  document.querySelectorAll('select[data-filter-nav]').forEach(function (sel) {
+    sel.addEventListener('change', function () {
+      window.location.href = this.value;
+    });
+  });
+});
diff --git a/web/templates/layouts/admin.html b/web/templates/layouts/admin.html
index e53bc04..72805be 100644
--- a/web/templates/layouts/admin.html
+++ b/web/templates/layouts/admin.html
@@ -14,5 +14,6 @@
             {{block "content" .}}{{end}}
         </main>
     </div>
+    <script src="/static/js/filters.js"></script>
 </body>
 </html>
diff --git a/web/templates/layouts/base.html b/web/templates/layouts/base.html
index 3e1d79d..c609247 100644
--- a/web/templates/layouts/base.html
+++ b/web/templates/layouts/base.html
@@ -15,6 +15,7 @@
         </main>
     </div>
     <span class="hidden ring-blue-400 bg-blue-50 border-blue-400 hover:text-red-500"></span>
+    <script src="/static/js/filters.js"></script>
     <script>
       if (document.querySelector('pre.mermaid')) {
         var s = document.createElement('script');
diff --git a/web/templates/pages/admin/tickets/list.html b/web/templates/pages/admin/tickets/list.html
index 831d3f5..49c05df 100644
--- a/web/templates/pages/admin/tickets/list.html
+++ b/web/templates/pages/admin/tickets/list.html
@@ -10,7 +10,7 @@
 <div class="flex items-center gap-4 mb-4">
     <div class="flex items-center gap-1.5">
         <label class="text-xs font-medium text-gray-500 uppercase">Status</label>
-        <select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
+        <select data-filter-nav class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
             <option value="{{filterURL "/admin/tickets" $filters "status" ""}}" {{if not .StatusFilter}}selected{{end}}>All</option>
             <option value="{{filterURL "/admin/tickets" $filters "status" "open"}}" {{if eq .StatusFilter "open"}}selected{{end}}>Open</option>
             <option value="{{filterURL "/admin/tickets" $filters "status" "in_progress"}}" {{if eq .StatusFilter "in_progress"}}selected{{end}}>In Progress</option>
@@ -19,7 +19,7 @@
     </div>
     <div class="flex items-center gap-1.5">
         <label class="text-xs font-medium text-gray-500 uppercase">Priority</label>
-        <select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
+        <select data-filter-nav class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
             <option value="{{filterURL "/admin/tickets" $filters "priority" ""}}" {{if not .PriorityFilter}}selected{{end}}>All</option>
             <option value="{{filterURL "/admin/tickets" $filters "priority" "high"}}" {{if eq .PriorityFilter "high"}}selected{{end}}>High</option>
             <option value="{{filterURL "/admin/tickets" $filters "priority" "medium"}}" {{if eq .PriorityFilter "medium"}}selected{{end}}>Medium</option>
@@ -29,7 +29,7 @@
     {{if .Products}}
     <div class="flex items-center gap-1.5">
         <label class="text-xs font-medium text-gray-500 uppercase">Product</label>
-        <select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
+        <select data-filter-nav class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
             <option value="{{filterURL "/admin/tickets" $filters "product" ""}}" {{if not .ProductFilter}}selected{{end}}>All</option>
             {{range .Products}}
             <option value="{{filterURL "/admin/tickets" $filters "product" .}}" {{if eq $productFilter .}}selected{{end}}>{{.}}</option>
@@ -40,7 +40,7 @@
     {{if .Reporters}}
     <div class="flex items-center gap-1.5">
         <label class="text-xs font-medium text-gray-500 uppercase">Reporter</label>
-        <select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
+        <select data-filter-nav class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
             <option value="{{filterURL "/admin/tickets" $filters "reporter" ""}}" {{if not .ReporterFilter}}selected{{end}}>All</option>
             {{range .Reporters}}
             <option value="{{filterURL "/admin/tickets" $filters "reporter" .}}" {{if eq $reporterFilter .}}selected{{end}}>{{.}}</option>
diff --git a/web/templates/pages/tickets/list.html b/web/templates/pages/tickets/list.html
index 51a312c..06a7529 100644
--- a/web/templates/pages/tickets/list.html
+++ b/web/templates/pages/tickets/list.html
@@ -12,7 +12,7 @@
     <div class="flex items-center gap-4 mb-4">
         <div class="flex items-center gap-1.5">
             <label class="text-xs font-medium text-gray-500 uppercase">Status</label>
-            <select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
+            <select data-filter-nav class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
                 <option value="{{filterURL "/tickets" $filters "status" ""}}" {{if not .StatusFilter}}selected{{end}}>All</option>
                 <option value="{{filterURL "/tickets" $filters "status" "open"}}" {{if eq .StatusFilter "open"}}selected{{end}}>Open</option>
                 <option value="{{filterURL "/tickets" $filters "status" "in_progress"}}" {{if eq .StatusFilter "in_progress"}}selected{{end}}>In Progress</option>
@@ -21,7 +21,7 @@
         </div>
         <div class="flex items-center gap-1.5">
             <label class="text-xs font-medium text-gray-500 uppercase">Priority</label>
-            <select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
+            <select data-filter-nav class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
                 <option value="{{filterURL "/tickets" $filters "priority" ""}}" {{if not .PriorityFilter}}selected{{end}}>All</option>
                 <option value="{{filterURL "/tickets" $filters "priority" "high"}}" {{if eq .PriorityFilter "high"}}selected{{end}}>High</option>
                 <option value="{{filterURL "/tickets" $filters "priority" "medium"}}" {{if eq .PriorityFilter "medium"}}selected{{end}}>Medium</option>
@@ -31,7 +31,7 @@
         {{if .Products}}
         <div class="flex items-center gap-1.5">
             <label class="text-xs font-medium text-gray-500 uppercase">Product</label>
-            <select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
+            <select data-filter-nav class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
                 <option value="{{filterURL "/tickets" $filters "product" ""}}" {{if not .ProductFilter}}selected{{end}}>All</option>
                 {{range .Products}}
                 <option value="{{filterURL "/tickets" $filters "product" .}}" {{if eq $productFilter .}}selected{{end}}>{{.}}</option>