diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index c578dfd..0c208ce 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
+import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useRouter, useSearchParams } from "next/navigation";
 import {
@@ -237,9 +237,11 @@ function TicketWorkbenchContent() {
   const [saveViewOpen, setSaveViewOpen] = useState(false);
   const [saveViewName, setSaveViewName] = useState("");
   const [addFilterOpen, setAddFilterOpen] = useState(false);
-  const [addFilterField, setAddFilterField] = useState<string | null>(null); // which field type is selected
+  const [addFilterField, setAddFilterField] = useState<string | null>(null);
   const [addFilterOperator, setAddFilterOperator] = useState("is");
   const [addFilterValue, setAddFilterValue] = useState("");
+  const [filterPopoverPos, setFilterPopoverPos] = useState({ left: 0, top: 0 });
+  const addFilterBtnRef = useRef<HTMLButtonElement>(null);
 
   const [dialogOpen, setDialogOpen] = useState(false);
   const [newSubject, setNewSubject] = useState("");
@@ -840,13 +842,12 @@ function TicketWorkbenchContent() {
                 ))}
               <div>
                 <button
+                  ref={addFilterBtnRef}
                   type="button"
-                  onClick={(event) => {
-                    const rect = event.currentTarget.getBoundingClientRect();
-                    const popover = document.getElementById("add-filter-popover");
-                    if (popover) {
-                      popover.style.left = `${rect.left}px`;
-                      popover.style.top = `${rect.bottom + 4}px`;
+                  onClick={() => {
+                    if (addFilterBtnRef.current) {
+                      const rect = addFilterBtnRef.current.getBoundingClientRect();
+                      setFilterPopoverPos({ left: rect.left, top: rect.bottom + 4 });
                     }
                     setAddFilterOpen((prev) => !prev);
                   }}
@@ -1408,8 +1409,8 @@ function TicketWorkbenchContent() {
             }}
           />
           <div
-            id="add-filter-popover"
             className="fixed z-[9999] w-52 rounded-md border border-border bg-popover p-1 shadow-lg"
+            style={{ left: filterPopoverPos.left, top: filterPopoverPos.top }}
           >
             {!addFilterField ? (
               <>