diff --git a/web/core/components/issues/filters.tsx b/web/core/components/issues/filters.tsx
index ad8668707..4b80ba12f 100644
--- a/web/core/components/issues/filters.tsx
+++ b/web/core/components/issues/filters.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useState } from "react";
+import { observer } from "mobx-react";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
@@ -29,7 +30,7 @@ type Props = {
   workspaceSlug: string;
   canUserCreateIssue: boolean | undefined;
 };
-const HeaderFilters = ({ currentProjectDetails, projectId, workspaceSlug, canUserCreateIssue }: Props) => {
+const HeaderFilters = observer(({ currentProjectDetails, projectId, workspaceSlug, canUserCreateIssue }: Props) => {
   // states
   const [analyticsModal, setAnalyticsModal] = useState(false);
   // store hooks
@@ -140,6 +141,6 @@ const HeaderFilters = ({ currentProjectDetails, projectId, workspaceSlug, canUse
       )}
     </>
   );
-};
+});
 
 export default HeaderFilters;
diff --git a/web/core/components/project/filters.tsx b/web/core/components/project/filters.tsx
index 25a7ab834..9434f7995 100644
--- a/web/core/components/project/filters.tsx
+++ b/web/core/components/project/filters.tsx
@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { ListFilter } from "lucide-react";
 // types
@@ -19,7 +20,7 @@ type Props = {
   isMobile?: boolean;
 };
 
-const HeaderFilters = ({ filterMenuButton, isMobile, classname = "", filterClassname = "" }: Props) => {
+const HeaderFilters = observer(({ filterMenuButton, isMobile, classname = "", filterClassname = "" }: Props) => {
   // router
   const { workspaceSlug } = useParams();
   const {
@@ -89,5 +90,5 @@ const HeaderFilters = ({ filterMenuButton, isMobile, classname = "", filterClass
       </div>
     </div>
   );
-};
+});
 export default HeaderFilters;