diff --git a/src/pages/paymentPage.tsx b/src/pages/paymentPage.tsx
index 3bb3dec..07ee29f 100644
--- a/src/pages/paymentPage.tsx
+++ b/src/pages/paymentPage.tsx
@@ -174,5 +174,24 @@ const SuccessfulPayment = () => {
   );
 };
 
+const CancelledPayment = () => (
+  <section className="flex items-center justify-center py-32 bg-gray-100 md:m-0 px-4  ">
+    <div className="bg-white p-6 rounded shadow-md text-center">
+      <h1 className="text-2xl font-medium text-red-500">
+        ❌ Payment Was Cancelled
+      </h1>
+      <p className="mt-4">
+        Checkout Details about your carts If you wish to adjust !
+      </p>
+      <p className="mt-2">Thank you for shopping with us.</p>
+
+      <Link to="/carts">
+        <button className="mt-4 inline-block px-4 py-2 text-white bg-red-500 rounded transition-colors duration-300 cursor-pointer hover:bg-green-600">
+          Checkout your Carts
+        </button>
+      </Link>
+    </div>
+  </section>
+);
 export default Payment;
-export { SuccessfulPayment };
+export { SuccessfulPayment, CancelledPayment };
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index 7d68147..ce5cc50 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -33,7 +33,10 @@ import BuyerOrders from "../pages/BuyerOrders";
 import SignupVerification from "../pages/SignupVerification";
 import SmoothScroll from "../utils/SmoothScroll";
 import NotFound from "../pages/NotFound";
-import Payment, { SuccessfulPayment } from "../pages/paymentPage";
+import Payment, {
+  CancelledPayment,
+  SuccessfulPayment,
+} from "../pages/paymentPage";
 
 const AppRoutes = () => {
   const navigate = useNavigate();
@@ -60,57 +63,57 @@ const AppRoutes = () => {
 
   return (
     <SmoothScroll>
-    <Routes>
-      <Route path="/" element={<RootLayout />}>
-        <Route index element={<Homepage />} />
-        <Route path="products" element={<ProductPage />} />
-        <Route path="products/:id" element={<ProductDetails />} />
-        <Route path="/carts" element={<CartManagement />} />
-        <Route path="/wishes" element={<BuyerWishesList />} />
-        <Route path="/orders" element={<BuyerOrders />} />
-        <Route path="/payment" element={<Payment />} />
-        <Route path="/payment/success" element={<SuccessfulPayment />} />
-        <Route path="/payment/canceled" element={<Payment />} />
-      </Route>
-      <Route path="chat" element={<ChatPage />} />
-      <Route path="/password-reset-link" element={<GetLinkPage />} />
-      <Route path="/reset-password" element={<ResetPassword />} />
-      <Route path="/register" element={<RegisterUser />} />
-      <Route path="/verify-user" element={<SignupVerification />} />
+      <Routes>
+        <Route path="/" element={<RootLayout />}>
+          <Route index element={<Homepage />} />
+          <Route path="products" element={<ProductPage />} />
+          <Route path="products/:id" element={<ProductDetails />} />
+          <Route path="/carts" element={<CartManagement />} />
+          <Route path="/wishes" element={<BuyerWishesList />} />
+          <Route path="/orders" element={<BuyerOrders />} />
+          <Route path="/payment" element={<Payment />} />
+          <Route path="/payment/success" element={<SuccessfulPayment />} />
+          <Route path="/payment/canceled" element={<CancelledPayment />} />
+        </Route>
+        <Route path="chat" element={<ChatPage />} />
+        <Route path="/password-reset-link" element={<GetLinkPage />} />
+        <Route path="/reset-password" element={<ResetPassword />} />
+        <Route path="/register" element={<RegisterUser />} />
+        <Route path="/verify-user" element={<SignupVerification />} />
 
-      <Route
-        path="/login"
-        element={(
-          <AlreadyLogged>
-            <Login />
-          </AlreadyLogged>
-        )}
-      />
-      <Route path="2fa-verify" element={<OtpVerificationForm />} />
-      <Route path="/dashboard" element={<SellerDashboard />} />
-      <Route path="/dashboard/addproduct" element={<AddProduct />} />
-      <Route path="/update-password" element={<UpdatePasswordPage />} />
-      <Route path="/profile" element={<UsersProfile />} />
-      <Route path="/profile/update" element={<UpdateUserProfile />} />
-      <Route path="/dashboard/products" element={<Products />} />
-      <Route path="/dashboard/products/:id" element={<AddProduct />} />
-      <Route path="/dashboard/orders" element={<SellerOrder />} />
-      <Route path="/admin/dashboard" element={<Dashboard />} />
-      <Route path="/admin/users" element={<UserManagement />} />
-      <Route path="/admin/settings" element={<Settings />} />
-      <Route path="/admin/analytics" element={<Analytics />} />
-      <Route path="/admin/Products" element={<Products />} />
-      <Route
-        path="/dashboard/notifications"
-        element={<SellerNotifications />}
-      />
-      <Route
-        path="/dashboard/notifications/:id"
-        element={<NotificationDetail />}
-      />
-      <Route path="/dashboard/wishes" element={<Wishes />} />
-      <Route path="/*" element={<NotFound />} />
-    </Routes>
+        <Route
+          path="/login"
+          element={(
+            <AlreadyLogged>
+              <Login />
+            </AlreadyLogged>
+          )}
+        />
+        <Route path="2fa-verify" element={<OtpVerificationForm />} />
+        <Route path="/dashboard" element={<SellerDashboard />} />
+        <Route path="/dashboard/addproduct" element={<AddProduct />} />
+        <Route path="/update-password" element={<UpdatePasswordPage />} />
+        <Route path="/profile" element={<UsersProfile />} />
+        <Route path="/profile/update" element={<UpdateUserProfile />} />
+        <Route path="/dashboard/products" element={<Products />} />
+        <Route path="/dashboard/products/:id" element={<AddProduct />} />
+        <Route path="/dashboard/orders" element={<SellerOrder />} />
+        <Route path="/admin/dashboard" element={<Dashboard />} />
+        <Route path="/admin/users" element={<UserManagement />} />
+        <Route path="/admin/settings" element={<Settings />} />
+        <Route path="/admin/analytics" element={<Analytics />} />
+        <Route path="/admin/Products" element={<Products />} />
+        <Route
+          path="/dashboard/notifications"
+          element={<SellerNotifications />}
+        />
+        <Route
+          path="/dashboard/notifications/:id"
+          element={<NotificationDetail />}
+        />
+        <Route path="/dashboard/wishes" element={<Wishes />} />
+        <Route path="/*" element={<NotFound />} />
+      </Routes>
     </SmoothScroll>
   );
 };