diff --git a/web/components/issues/issue-update-status.tsx b/web/components/issues/issue-update-status.tsx
index 277404dfa..a3a8ca83b 100644
--- a/web/components/issues/issue-update-status.tsx
+++ b/web/components/issues/issue-update-status.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { observer } from "mobx-react";
 import { RefreshCw } from "lucide-react";
 import { TIssue } from "@plane/types";
 // types
@@ -9,7 +10,7 @@ type Props = {
   issueDetail?: TIssue;
 };
 
-export const IssueUpdateStatus: React.FC<Props> = (props) => {
+export const IssueUpdateStatus: React.FC<Props> = observer((props) => {
   const { isSubmitting, issueDetail } = props;
   // hooks
   const { getProjectById } = useProject();
@@ -33,4 +34,4 @@ export const IssueUpdateStatus: React.FC<Props> = (props) => {
       </div>
     </>
   );
-};
+});
diff --git a/web/layouts/settings-layout/workspace/sidebar.tsx b/web/layouts/settings-layout/workspace/sidebar.tsx
index d6cb77cf9..f49eb84d9 100644
--- a/web/layouts/settings-layout/workspace/sidebar.tsx
+++ b/web/layouts/settings-layout/workspace/sidebar.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 // hooks
@@ -6,7 +7,7 @@ import { EUserWorkspaceRoles, WORKSPACE_SETTINGS_LINKS } from "@/constants/works
 import { useUser } from "@/hooks/store";
 // constants
 
-export const WorkspaceSettingsSidebar = () => {
+export const WorkspaceSettingsSidebar = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -44,4 +45,4 @@ export const WorkspaceSettingsSidebar = () => {
       </div>
     </div>
   );
-};
+});