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>