diff --git a/src/Redux/services/cards.service.ts b/src/Redux/services/cards.service.ts
index 08116c9..fbc43e3 100644
--- a/src/Redux/services/cards.service.ts
+++ b/src/Redux/services/cards.service.ts
@@ -34,6 +34,13 @@ export const cardsApi = createApi({
                 body: recipientDetails
             }),
         }),
+        addCardToCart: builder.mutation({
+            query: (cardBookingDetails) => ({ // keep the name of the variables being passed here same as when calling the mutation hook
+                url: `/website/passes/add-to-cart`,
+                method: "POST",
+                body: cardBookingDetails
+            }),
+        }),
     })
 });
 
@@ -41,5 +48,6 @@ export const {
     useGetCardsinCartQuery,
     useGetCheckoutPageDataQuery,
     useGetCardBookingDetailsQuery,
-    useStoreRecipientDetailsMutation
+    useStoreRecipientDetailsMutation,
+    useAddCardToCartMutation
 } = cardsApi;
\ No newline at end of file
diff --git a/src/pages/CheckoutPage2.tsx b/src/pages/CheckoutPage2.tsx
index 4897c2f..4235469 100644
--- a/src/pages/CheckoutPage2.tsx
+++ b/src/pages/CheckoutPage2.tsx
@@ -7,8 +7,9 @@ import Navbar from '../components/Navbar';
 import { Footer } from '../components/Footer';
 import { ImageWithFallback } from '../components/figma/ImageWithFallback';
 import { useNavigate } from 'react-router-dom';
-import { useGetCheckoutPageDataQuery } from '../Redux/services/cards.service';
+import { useAddCardToCartMutation, useGetCheckoutPageDataQuery } from '../Redux/services/cards.service';
 import LoadingSpinner from '../components/LoadingSpinner';
+import { toast } from 'sonner';
 
 /* ─── Types ─── */
 export interface CartItem {
@@ -202,15 +203,17 @@ function CheckoutConfigCard({
     const [noOfDays, setNoOfDays] = useState(item?.minNumber)
 
     const cityId = localStorage.getItem("cityId")
-
+    const cityName = localStorage.getItem("cityName")
     const cardTypeId = item?.cardType?.id
     const cardId = item?.id
     const cardMode = item?.cardType?.name === "selective_pass" ? "flexi" : "unlimited"
     const adultPrice = item?.adultPrice * noOfAdults
     const childPrice = item?.childPrice * noOfChildren
     const basePrice = adultPrice + childPrice
-    const taxAmount = 10
-    const strikedPrice = basePrice - 20
+    const taxAmount = basePrice * 0.1
+    const strikedPrice = basePrice + 20
+
+    const [addCardToCart] = useAddCardToCartMutation()
 
     useEffect(() => {
         setNoOfAttractions(item?.minNumber)
@@ -224,23 +227,35 @@ function CheckoutConfigCard({
     const navigate = useNavigate();
 
     const cardBookingDetails = {
-        cityId,
-        cardTypeId,
-        cardId,
-        noOfAdults,
-        cardMode,
-        noOfChildren,
+        cityXid: cityId,
+        cardTypeXid: cardTypeId,
+        cardXid: cardId,
+        cardMode, // stays as-is
+        totalAdult: noOfAdults,
+        baseAmount: basePrice, // static value
         taxAmount,
+        totalChild: noOfChildren,
         noOfAttractions,
         noOfDays
+    };
+
+    const handleProceedToPayment = async () => {
+        try {
+            console.log("Adding card to cart", cardBookingDetails);
+            const response = await addCardToCart(cardBookingDetails);
+            console.log(response)
+            const bookingId = response?.data?.id
+            navigate(`/payment/${bookingId}`)
+        } catch (error) {
+            console.error("Error adding card to cart:", error);
+            toast.error("Failed to move forward. Please try again.");
+        }
     }
 
-
-
     return (
         <div className="bg-white rounded-2xl shadow-[0px_4px_24px_0px_rgba(0,0,0,0.06)] overflow-hidden w-full max-w-[400px]">
             <div className="pt-6 pb-2 text-center">
-                <h4 className="font-poppins text-lg leading-snug font-medium text-[#2a2a2a]">{item?.city}</h4>
+                <h4 className="font-poppins text-lg leading-snug font-medium text-[#2a2a2a]">{cityName}</h4>
                 <div className="mt-2 flex justify-center">
                     <span className={`inline-flex items-center px-4 py-1 rounded-full font-poppins text-xs font-medium ${item?.cardType?.name === 'selective_pass' ? 'bg-[#f95faf]/10 text-[#f95faf]' : 'bg-[#f95f62]/10 text-[#f95f62]'}`}>
                         {item?.cardType?.displayName}
@@ -296,12 +311,12 @@ function CheckoutConfigCard({
                                         <button
                                             key={i}
                                             onClick={() => {
-                                                cardMode === "flexi" ? setNoOfAttractions(i) : setNoOfDays(i);   // 👈 update attractions state
+                                                cardMode === "flexi" ? setNoOfAttractions(i) : setNoOfDays(i);
                                                 setDropdownOpen(false);
                                             }}
                                             className={`w-full px-3 py-2 text-left font-poppins text-sm transition-colors ${(cardMode === "flexi" ? noOfAttractions === i : noOfDays === i)
-                                                    ? "bg-[#f95f62]/10 text-[#f95f62] font-medium"
-                                                    : "text-[#2a2a2a] hover:bg-gray-50 font-normal"
+                                                ? "bg-[#f95f62]/10 text-[#f95f62] font-medium"
+                                                : "text-[#2a2a2a] hover:bg-gray-50 font-normal"
                                                 }`}
 
                                         >
@@ -317,14 +332,14 @@ function CheckoutConfigCard({
                 <div className="flex items-center justify-between py-5">
                     <span className="font-poppins text-sm font-normal text-[#2a2a2a]">You Pay</span>
                     <div className="flex items-center gap-2">
-                        <span className="font-poppins text-sm font-normal text-[#aaa] line-through">${basePrice}</span>
-                        <span className="font-poppins text-2xl font-medium text-[#f95f62] tracking-tight">${strikedPrice}</span>
+                        <span className="font-poppins text-sm font-normal text-[#aaa] line-through">${strikedPrice}</span>
+                        <span className="font-poppins text-2xl font-medium text-[#f95f62] tracking-tight">${basePrice}</span>
                     </div>
                 </div>
             </div>
 
             <div className="px-6 pb-6">
-                <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">
+                <motion.button whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.98 }} onClick={handleProceedToPayment} 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 cursor-pointer">
                     Proceed to Pay
                 </motion.button>
             </div>
@@ -414,7 +429,7 @@ export function CheckoutPage2({
 
             <div className="w-full px-4 sm:px-6 lg:px-10 xl:px-16 pt-32 pb-24 max-w-[1440px] mx-auto">
                 <button 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">