diff --git a/web/src/bookshelf.ts b/web/src/bookshelf.ts
index e6a4b30..4e51ef7 100644
--- a/web/src/bookshelf.ts
+++ b/web/src/bookshelf.ts
@@ -6,19 +6,19 @@ import { showToast } from "./toast";
 function clearFilters(): void {
   const filterForm = document.getElementById("filter-form") as HTMLFormElement;
   if (!filterForm) return;
-
   // Reset all form fields
-  const inputs = filterForm.querySelectorAll("input, select");
-  inputs.forEach((input) => {
-    if (input instanceof HTMLInputElement && input.type === "checkbox") {
-      input.checked = false;
-    } else {
-      (input as HTMLInputElement).value = "";
-    }
-  });
-
-  // Trigger HTMX reload with cleared filters
-  window.htmx.trigger(filterForm, "change");
+  filterForm.reset();
+  // Manually reset pagination values
+  const limitInput = filterForm.querySelector(
+    'input[name="limit"]',
+  ) as HTMLInputElement;
+  const offsetInput = filterForm.querySelector(
+    'input[name="offset"]',
+  ) as HTMLInputElement;
+  if (limitInput) limitInput.value = "50";
+  if (offsetInput) offsetInput.value = "0";
+  // Trigger form submit with cleared filters
+  window.htmx.trigger(filterForm, "submit");
 }
 
 // Alpine.js component
@@ -91,38 +91,34 @@ Alpine.data("bookshelf", () => ({
         return;
       }
 
-      // Clear existing filter values
-      filterForm.innerHTML = `
-          <input type="hidden" name="limit" value="50"/>
-          <input type="hidden" name="offset" value="0"/>
-      `;
-
+      // Don't clear form - just update values
       // Populate form fields from filter data
       Object.entries(filterData).forEach(([key, value]) => {
         if (value) {
           // Only set non-empty values
-          const input = document.createElement("input");
-          input.type = "hidden";
-          input.name = key;
-          input.value = value;
-          filterForm.appendChild(input);
-
-          // Also update visible form fields if they exist
-          const visibleField = document.querySelector(
+          // Update visible form fields if they exist
+          const visibleField = filterForm.querySelector(
             `[name="${key}"]`,
           ) as HTMLInputElement;
           if (visibleField) {
-            visibleField.value = value;
+            if (visibleField.type === "checkbox") {
+              visibleField.checked = value === "true";
+            } else {
+              visibleField.value = value;
+            }
+          } else {
+            // Create hidden input if visible field doesn't exist
+            const input = document.createElement("input");
+            input.type = "hidden";
+            input.name = key;
+            input.value = value;
+            filterForm.appendChild(input);
           }
         }
       });
 
-      // Trigger HTMX to apply the filter
-      // Use the first input to trigger the change event
-      const firstInput = filterForm.querySelector("input");
-      if (firstInput) {
-        window.htmx.trigger(firstInput, "change");
-      }
+      // Trigger HTMX to apply the filter by submitting the form
+      window.htmx.trigger(filterForm, "submit");
 
       showToast(`Filter applied: ${filterName}`, "success");