diff --git a/web/hooks/use-reload-confirmation.tsx b/web/hooks/use-reload-confirmation.tsx
index cdaff736522..d85a706f402 100644
--- a/web/hooks/use-reload-confirmation.tsx
+++ b/web/hooks/use-reload-confirmation.tsx
@@ -1,15 +1,16 @@
 import { useCallback, useEffect, useState } from "react";
 
-const useReloadConfirmations = (message?: string) => {
+const useReloadConfirmations = (message?: string, isActive = true) => {
   const [showAlert, setShowAlert] = useState(false);
 
   const handleBeforeUnload = useCallback(
     (event: BeforeUnloadEvent) => {
+      if(!isActive) return;
       event.preventDefault();
       event.returnValue = "";
       return message ?? "Are you sure you want to leave?";
     },
-    [message]
+    [message, isActive]
   );
 
   useEffect(() => {
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index be512dda031..3b7ae036c62 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -56,8 +56,6 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
   // toast alert
   const { setToastAlert } = useToast();
 
-  //TODO:fix reload confirmations, with mobx
-  const { setShowAlert } = useReloadConfirmations();
 
   const { handleSubmit, setValue, watch, getValues, control, reset } = useForm<IPage>({
     defaultValues: { name: "", description_html: "" },
@@ -89,6 +87,10 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
 
   const pageStore = usePage(pageId as string);
 
+  //TODO:fix reload confirmations, with mobx
+  const { setShowAlert } = useReloadConfirmations(undefined, pageStore?.isSubmitting === "submitting");
+
+
   useEffect(
     () => () => {
       if (pageStore) {