diff --git a/src/pages/CheckoutPage2.tsx b/src/pages/CheckoutPage2.tsx
index d8d6abe..32bff5b 100644
--- a/src/pages/CheckoutPage2.tsx
+++ b/src/pages/CheckoutPage2.tsx
@@ -254,7 +254,7 @@ function CheckoutConfigCard({
             </div>
 
             <div className="px-6 pb-6">
-                <motion.button whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.98 }} onClick={onProceed} className="w-full py-4 rounded-full bg-[#f95f62] text-white font-poppins text-base font-medium hover:bg-[#e8545a] transition-colors shadow-lg shadow-[#f95f62]/20">
+                <motion.button whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.98 }} onClick={() => navigate(`/payment/390`)} className="w-full py-4 rounded-full bg-[#f95f62] text-white font-poppins text-base font-medium hover:bg-[#e8545a] transition-colors shadow-lg shadow-[#f95f62]/20">
                     Proceed to Pay
                 </motion.button>
             </div>
@@ -604,13 +604,13 @@ export function CheckoutPage2({
                     onClick={() => navigate(-1)}
                     className="flex items-center gap-2 text-[#8e8e8e] hover:text-[#2a2a2a] transition-colors font-poppins text-sm font-normal mb-8"
                 >
-                    <ArrowLeft className="w-4 h-4" />Back to Cart
+                    <ArrowLeft className="w-4 h-4" />Back
                 </button>
 
                 <div className="mb-10">
                     <h2 className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight">
                         <span className="font-light">Checkout</span>{' '}
-                        <span className="font-bold italic bg-gradient-to-r from-[#F95F62] to-[#F95FAF] bg-clip-text text-transparent">
+                        <span className="font-bold italic bg-gradient-to-r from-[#F95F62] to-[#F95FAF] bg-clip-text text-transparent pr-3">
                             {city?.name || checkoutItem.city}
                         </span>
                     </h2>
diff --git a/src/pages/PaymentDetailsPage.tsx b/src/pages/PaymentDetailsPage.tsx
index 7054559..0f22825 100644
--- a/src/pages/PaymentDetailsPage.tsx
+++ b/src/pages/PaymentDetailsPage.tsx
@@ -10,7 +10,7 @@ import { Card, CardContent, CardHeader } from '../components/ui/card';
 import { Separator } from '../components/ui/separator';
 import { useGetUserProfileDetailsQuery } from '../Redux/services/profile.service';
 import LoadingSpinner from '../components/LoadingSpinner';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useGetCardBookingDetailsQuery, useStoreRecepientDetailsMutation, useStoreRecipientDetailsMutation } from '../Redux/services/cards.service';
 import { toast } from 'sonner';
 
@@ -190,6 +190,7 @@ export function PaymentDetailsPage({
     city: '',
     postalCode: ''
   });
+  const navigate = useNavigate()
 
   const userId = localStorage.getItem("userId");
   const { bookingId } = useParams()
@@ -314,7 +315,7 @@ export function PaymentDetailsPage({
 
         {/* Back Button */}
         <button
-          onClick={onBackClick}
+          onClick={() => navigate(-1)}
           className="flex items-center gap-2 text-[#8e8e8e] hover:text-[#2a2a2a] transition-colors font-poppins text-sm font-normal mb-8"
         >
           <ArrowLeft className="w-4 h-4" /> Back
@@ -324,8 +325,9 @@ export function PaymentDetailsPage({
         <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-8">
           <div className="flex items-center gap-4 mb-2">
             <h1 className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight">
-              <span className="font-light">Secure</span>{' '}
-              <span className="font-bold italic bg-gradient-to-r from-[#F95F62] to-[#F95FAF] bg-clip-text text-transparent">Checkout</span>
+              <span className="font-light">Review &
+              </span>{' '}
+              <span className="font-bold italic bg-gradient-to-r from-[#F95F62] to-[#F95FAF] bg-clip-text text-transparent pr-2">Pay</span>
             </h1>
             <div className="flex items-center gap-2 text-[#22a86b]">
               <Shield className="w-4 h-4" />
@@ -603,7 +605,7 @@ export function PaymentDetailsPage({
                 ) : (
                   <>
                     <Lock className="w-4 h-4" />
-                    Complete Payment · ${bookingDetails.totalAmount}
+                    Complete Payment · ${bookingDetails?.totalAmount}
                   </>
                 )}
               </motion.button>