diff --git a/met-web/src/components/FormioModalListener/index.tsx b/met-web/src/components/FormioModalListener/index.tsx
new file mode 100644
index 000000000..1ef377da3
--- /dev/null
+++ b/met-web/src/components/FormioModalListener/index.tsx
@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const FormioModalListener = () => {
+    const { pathname } = useLocation();
+
+    useEffect(() => {
+        const formioModal = document.querySelector('.formio-dialog');
+        if (formioModal) {
+            formioModal.remove();
+        }
+    }, [pathname]);
+
+    return null;
+};
+
+export default FormioModalListener;
diff --git a/met-web/src/routes/AuthenticatedRoutes.tsx b/met-web/src/routes/AuthenticatedRoutes.tsx
index d400331f4..c07c870ec 100644
--- a/met-web/src/routes/AuthenticatedRoutes.tsx
+++ b/met-web/src/routes/AuthenticatedRoutes.tsx
@@ -23,11 +23,13 @@ import { USER_ROLES } from 'services/userService/constants';
 import UserProfile from 'components/userManagement/userDetails';
 import ScrollToTop from 'components/scrollToTop';
 import ReportSettings from 'components/survey/report';
+import FormioModalListener from 'components/FormioModalListener';
 
 const AuthenticatedRoutes = () => {
     return (
         <>
             <ScrollToTop />
+            <FormioModalListener />
             <Routes>
                 <Route path="/" element={<Dashboard />} />
                 <Route path="/engagements" element={<EngagementListing />} />