diff --git a/src/App.js b/src/App.js
index 53de8e7..86d38e7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -115,9 +115,9 @@ function App() {
                 items: cafe.items.filter((item) =>
                   filteredData.some((filtered) =>
                     filtered.itemList.some(
-                      (i) => i.itemId === item.itemId && i.availability
-                    )
-                  )
+                      (i) => i.itemId === item.itemId && i.availability,
+                    ),
+                  ),
                 ),
               };
             }
@@ -156,30 +156,6 @@ function App() {
   //     console.error("Error handling notifications:", error);
   //   }
   // };
-  useEffect(() => {
-    const askNotificationPermission = async () => {
-      let permission = Notification.permission;
-      if (permission === "default") {
-        setModal("req_notification");
-      }
-      if (permission === "granted") await resetNotificationSubscription();
-
-      permission = await Notification.requestPermission();
-      if (permission === "granted") {
-        await subscribeUser();
-      } else if (permission === "denied") {
-        setModal("blocked_notification");
-        console.error("Notification permission denied.");
-      }
-    };
-
-    if ("serviceWorker" in navigator) {
-      window.addEventListener("load", async () => {
-        await askNotificationPermission();
-      });
-    }
-  }, []);
-
   useEffect(() => {
     if (socket == null) return;
 
@@ -245,11 +221,13 @@ function App() {
     });
 
     socket.on("checkUserTokenRes", async (data) => {
+      console.log(data)
       if (data.status !== 200) {
         removeLocalStorage("auth");
         setDeviceType("guestDevice");
       } else {
         setUser(data.data.user);
+        console.log('setting user')
         if (
           data.data.user.password == "unsetunsetunset" &&
           localStorage.getItem("settings")
@@ -332,19 +310,79 @@ function App() {
   };
 
   // Function to close the modal
-  const closeModal = () => {
-    setIsModalOpen(false);
-    document.body.style.overflow = "auto";
+  const closeModal = (closeTheseContent = []) => {
+    if (
+      closeTheseContent.length === 0 ||
+      closeTheseContent.includes(modalContent)
+    ) {
+      setIsModalOpen(false);
+      document.body.style.overflow = "auto";
 
-    const queryParams = new URLSearchParams(location.search);
+      const queryParams = new URLSearchParams(location.search);
 
-    // Remove the 'modal' parameter
-    queryParams.delete("modal");
+      // Remove the 'modal' parameter
+      queryParams.delete("modal");
 
-    // Update the URL without the 'modal' parameter
-    navigate({ search: queryParams.toString() }, { replace: true });
+      // Update the URL without the 'modal' parameter
+      navigate({ search: queryParams.toString() }, { replace: true });
+    }
   };
 
+  useEffect(() => {
+    const askNotificationPermission = async () => {
+      let permission = Notification.permission;
+
+      // Check current permission
+      if (permission === "default") {
+        setModal("req_notification");
+
+        // Request permission and wait for the result
+        permission = await Notification.requestPermission();
+      }
+
+      // If permission is already granted, reset subscriptions
+      if (permission === "granted") {
+        await resetNotificationSubscription();
+        closeModal(["req_notification", "denied_notification"]);
+      } else if (permission === "denied") {
+        setModal("blocked_notification");
+        console.error("Notification permission denied.");
+      }
+
+      // Continuously check until permission is granted
+      while (permission !== "granted") {
+        await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait for 1 second
+        const permissionn = Notification.permission;
+
+        if (permissionn === "granted") {
+          closeModal(["req_notification", "denied_notification"]);
+          await resetNotificationSubscription();
+          break;
+        } else if (permissionn === "denied") {
+          setModal("blocked_notification");
+          console.error("Notification permission denied.");
+          break;
+        }
+      }
+    };
+    const handleLoad = async () => {
+      while (modalContent !== "transaction_pending" || modalContent !== "transaction_confirmed") {
+      if (user != null && (user.roleId < 3 || user.roleId > 2)) {
+        await askNotificationPermission();
+      }
+    }
+    };
+    handleLoad();
+    if ("serviceWorker" in navigator) {
+      window.addEventListener("load", handleLoad);
+
+      // Cleanup the event listener on component unmount
+      return () => {
+        window.removeEventListener("load", handleLoad);
+      };
+    }
+  }, [user]);
+
   return (
     <div className="App">
       <header className="App-header">
diff --git a/src/helpers/transactionHelpers.js b/src/helpers/transactionHelpers.js
index b103815..1dfc62e 100644
--- a/src/helpers/transactionHelpers.js
+++ b/src/helpers/transactionHelpers.js
@@ -13,7 +13,7 @@ export async function confirmTransaction(transactionId) {
           "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
-      }
+      },
     );
     if (!response.ok) {
       return false;
@@ -37,7 +37,7 @@ export async function declineTransaction(transactionId) {
           "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
-      }
+      },
     );
 
     if (!response.ok) {
@@ -61,7 +61,7 @@ export async function cancelTransaction(transactionId) {
           "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
-      }
+      },
     );
 
     console.log(response);
@@ -86,7 +86,7 @@ export async function handleClaimHasPaid(transactionId) {
           "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
-      }
+      },
     );
 
     if (!response.ok) {
@@ -111,7 +111,7 @@ export async function handleConfirmHasPaid(transactionId) {
           "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
-      }
+      },
     );
 
     if (!response.ok) {
@@ -135,7 +135,7 @@ export async function getTransaction(transactionId) {
           "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
-      }
+      },
     );
 
     if (!response.ok) {
@@ -160,7 +160,7 @@ export async function getTransactions(shopId, demand) {
           "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
-      }
+      },
     );
 
     if (!response.ok) {
@@ -179,7 +179,7 @@ export const handlePaymentFromClerk = async (
   user_email,
   payment_type,
   serving_type,
-  tableNo
+  tableNo,
 ) => {
   try {
     const token = getLocalStorage("auth");
@@ -208,7 +208,7 @@ export const handlePaymentFromClerk = async (
           tableNo,
           transactions: structuredItems,
         }),
-      }
+      },
     );
 
     if (response.ok) {
@@ -233,7 +233,7 @@ export const handlePaymentFromGuestSide = async (
   user_email,
   payment_type,
   serving_type,
-  tableNo
+  tableNo,
 ) => {
   try {
     const token = getLocalStorage("authGuestSide");
@@ -262,7 +262,7 @@ export const handlePaymentFromGuestSide = async (
           tableNo,
           transactions: structuredItems,
         }),
-      }
+      },
     );
     const res = await response.json();
     console.log(res);
@@ -289,7 +289,7 @@ export const handlePaymentFromGuestDevice = async (
   serving_type,
   tableNo,
   notes,
-  socketId
+  socketId,
 ) => {
   try {
     const token = getLocalStorage("auth");
@@ -319,7 +319,7 @@ export const handlePaymentFromGuestDevice = async (
           notes: notes,
           socketId,
         }),
-      }
+      },
     );
 
     if (response.ok) {
@@ -364,7 +364,7 @@ const getHeaders = (method = "GET") => {
 export const getFavourite = async (cafeId) => {
   const response = await fetch(
     `${API_BASE_URL}/transaction/get-favourite/${cafeId}`,
-    getHeaders()
+    getHeaders(),
   );
   return response.json();
 };
@@ -377,7 +377,7 @@ export const getAnalytics = async (cafeId, filter) => {
       headers: {
         "Content-Type": "application/json",
       },
-    }
+    },
   );
   return response.json();
 };
@@ -385,7 +385,7 @@ export const getAnalytics = async (cafeId, filter) => {
 export const getIncome = async (cafeId) => {
   const response = await fetch(
     `${API_BASE_URL}/transaction/get-income/${cafeId}`,
-    getHeaders()
+    getHeaders(),
   );
   return response.json();
 };