diff --git a/package-lock.json b/package-lock.json
index 8e3a37d..2e897ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,8 @@
         "@ant-design/plots": "^1.2.6",
         "@autocomplete/material-ui": "0.0.17",
         "@capacitor-mlkit/barcode-scanning": "^8.0.1",
+        "@capacitor/app": "^8.0.1",
+        "@capacitor/core": "^8.1.0",
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
         "@emotion/react": "^11.11.4",
@@ -978,12 +980,20 @@
         "@capacitor/core": ">=8.0.0"
       }
     },
+    "node_modules/@capacitor/app": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/app/-/app-8.0.1.tgz",
+      "integrity": "sha512-yeG3yyA0ETKqvgqexwHMBlmVOF13A1hRXzv/km0Ptv5TrNIZvZJK4MTI3uiqvnbHrzoJGP5DwWAjEXEfi90v3Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@capacitor/core": ">=8.0.0"
+      }
+    },
     "node_modules/@capacitor/core": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.1.0.tgz",
       "integrity": "sha512-UfMBMWc1v7J+14AhH03QmeNwV3HZx3qnOWhpwnHfzALEwAwlV/itQOQqcasMQYhOHWL0tiymc5ByaLTn7KKQxw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
diff --git a/package.json b/package.json
index 213d7b5..5365059 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
     "@ant-design/plots": "^1.2.6",
     "@autocomplete/material-ui": "0.0.17",
     "@capacitor-mlkit/barcode-scanning": "^8.0.1",
+    "@capacitor/app": "^8.0.1",
+    "@capacitor/core": "^8.1.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.11.4",
diff --git a/src/App.jsx b/src/App.jsx
index 6ea87ea..f56faf2 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -15,8 +15,8 @@ const IndividualBooking = lazy(() => import('./Pages/SelfBooking/IndividualBooki
 
 const commonSubDir = import.meta.env.ENV_COMMON_BASE_URL;
 const subDirectory = import.meta.env.ENV_BASE_URL;
-
 import '../ownLib/my-ui-lib.css';
+import CardSkeleton from './Components/Skeleton/CardSkeleton.jsx';
 import CustomerMenuPage from './Pages/Reports/MenuQRCode/CustomerMenuPage.jsx';
 import WeightScaleApp from './Pages/BookingScreen/WeightscaleApp.jsx';
 import useSubscriptionManager from './useSubscriptionManager.js';
@@ -37,7 +37,7 @@ const LOGIN_PAGES = ['signin', 'login', 'auth'];
 const AppRoutes = () => {
   const ItemCard = useSelector(GlobalItemCard);
   const { sessionData, logout } = useSessionManager(ItemCard);
-  const { remainingDays, handleCancel, freeExtend, extendModel, setExtendModel } = useSubscriptionManager(sessionData, logout);
+  const { remainingDays, handleCancel, freeExtend, extendModel,handlePay, setExtendModel } = useSubscriptionManager(sessionData, logout);
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -91,10 +91,11 @@ const AppRoutes = () => {
         clearSession();
         window.location.replace(`${commonSubDir}`);
       } else {
-        window.history.go(1); // block back on web
+        window.history.go(1);
       }
     };
 
+    // Add event listener on mount
     window.addEventListener('popstate', handlePopState);
     return () => window.removeEventListener('popstate', handlePopState);
   }, [location.pathname]);
@@ -186,7 +187,6 @@ const AppRoutes = () => {
       />
     );
   }
-
   return (
     <Suspense fallback={<CardSkeleton />}>
       <Routes>