diff --git a/src/pages/CheckoutPage2.tsx b/src/pages/CheckoutPage2.tsx
index 7f8f136..4897c2f 100644
--- a/src/pages/CheckoutPage2.tsx
+++ b/src/pages/CheckoutPage2.tsx
@@ -199,23 +199,44 @@ function CheckoutConfigCard({
     const [noOfAdults, setNoOfAdults] = useState(1)
     const [noOfChildren, setNoOfChildren] = useState(0)
     const [noOfAttractions, setNoOfAttractions] = useState(item?.minNumber);
+    const [noOfDays, setNoOfDays] = useState(item?.minNumber)
 
+    const cityId = localStorage.getItem("cityId")
+
+    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 originalPrice = adultPrice + childPrice
-    const totalPrice = originalPrice - 20
+    const basePrice = adultPrice + childPrice
+    const taxAmount = 10
+    const strikedPrice = basePrice - 20
 
     useEffect(() => {
         setNoOfAttractions(item?.minNumber)
+        setNoOfDays(item?.minNumber)
     }, [item])
 
     const numberArray = Array.from(
         { length: item?.maxNumber - item?.minNumber + 1 },
         (_, i) => item?.minNumber + i
     );
-
     const navigate = useNavigate();
 
+    const cardBookingDetails = {
+        cityId,
+        cardTypeId,
+        cardId,
+        noOfAdults,
+        cardMode,
+        noOfChildren,
+        taxAmount,
+        noOfAttractions,
+        noOfDays
+    }
+
+
+
     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">
@@ -259,7 +280,7 @@ function CheckoutConfigCard({
                     </span>
                     <div className="relative">
                         <button onClick={() => setDropdownOpen(!dropdownOpen)} className="flex items-center gap-2 border border-[#f95f62]/30 rounded-lg px-3 py-1.5 min-w-[72px] justify-between hover:border-[#f95f62] transition-colors">
-                            <span className="font-poppins text-base font-medium text-[#f95f62] tabular-nums">{noOfAttractions}</span>
+                            <span className="font-poppins text-base font-medium text-[#f95f62] tabular-nums">{cardMode === "flexi" ? noOfAttractions : noOfDays}</span>
                             <ChevronDown className={`w-4 h-4 text-[#f95f62] transition-transform ${dropdownOpen ? 'rotate-180' : ''}`} />
                         </button>
                         <AnimatePresence>
@@ -275,13 +296,14 @@ function CheckoutConfigCard({
                                         <button
                                             key={i}
                                             onClick={() => {
-                                                setNoOfAttractions(i);   // 👈 update attractions state
+                                                cardMode === "flexi" ? setNoOfAttractions(i) : setNoOfDays(i);   // 👈 update attractions state
                                                 setDropdownOpen(false);
                                             }}
-                                            className={`w-full px-3 py-2 text-left font-poppins text-sm transition-colors ${noOfAttractions === i
-                                                ? "bg-[#f95f62]/10 text-[#f95f62] font-medium"
-                                                : "text-[#2a2a2a] hover:bg-gray-50 font-normal"
+                                            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"
                                                 }`}
+
                                         >
                                             {i}
                                         </button>
@@ -295,8 +317,8 @@ 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">${originalPrice}</span>
-                        <span className="font-poppins text-2xl font-medium text-[#f95f62] tracking-tight">${totalPrice}</span>
+                        <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>
                     </div>
                 </div>
             </div>
@@ -330,6 +352,7 @@ export function CheckoutPage2({
     const navigate = useNavigate();
 
     // Default item (you can pass via props later)
+    const baseUrl = import.meta.env.VITE_BASE_URL;
 
     const cityId = localStorage.getItem("cityId")
     const { data: checkoutPageData, isLoading } = useGetCheckoutPageDataQuery(cityId)
@@ -339,6 +362,7 @@ export function CheckoutPage2({
     const cards = checkoutPageData?.cards ?? []
     const flexiCard = checkoutPageData?.cards[0] ?? null
     const unlimitedCard = checkoutPageData?.cards[1] ?? null
+    const attractions = checkoutPageData?.attractions ?? [];
 
     const [checkoutItem, setCheckoutItem] = useState(flexiCard);
 
@@ -351,15 +375,13 @@ export function CheckoutPage2({
     if (isLoading) {
         return <LoadingSpinner />
     } else {
-        console.log(flexiCard)
+        // console.log(flexiCard)
     }
 
     const handleCheckoutItemChange = (cardObject: any) => {
         setCheckoutItem(cardObject);
     };
 
-    // const attractions = attractionsData[checkoutItem.city]?.[checkoutItem.cardType] || [];
-    // const offers = offersData[checkoutItem.cardType] || [];
 
     return (
         <div className="min-h-screen bg-[#fafafa] font-poppins">
@@ -452,15 +474,15 @@ export function CheckoutPage2({
                         </div>
 
                         {/* Offers Section (Exact) */}
-                        {/* <div>
-                            <h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a]">{checkoutItem.cardType} Card Offers</h3>
-                            <p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1 mb-4">Exclusive deals and discounts included with your {checkoutItem.cardType} pass</p>
+                        <div>
+                            <h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a]">{checkoutItem?.cardType?.displayName} Offers</h3>
+                            <p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1 mb-4">Exclusive deals and discounts included with your {checkoutItem?.cardType.displayName} pass</p>
                             <div className="flex gap-3 overflow-x-auto pb-2 -mx-4 px-4 snap-x snap-mandatory scrollbar-hide">
-                                {offers.map((offer, idx) => (
-                                    <div key={idx} className="relative bg-white rounded-xl shrink-0 w-[180px] h-[260px] snap-start">
+                                {checkoutItem?.offers.map((offer: any) => (
+                                    <div key={offer.id} className="relative bg-white rounded-xl shrink-0 w-[180px] h-[260px] snap-start">
                                         <div className="flex flex-col gap-2 items-start overflow-hidden p-3 rounded-xl h-full">
                                             <div className="h-[120px] w-full rounded-lg overflow-hidden shrink-0 relative">
-                                                <ImageWithFallback src={offer.image} alt={offer.title} className="absolute inset-0 w-full h-full object-cover rounded-lg" />
+                                                <ImageWithFallback src={`${baseUrl}/${offer.websiteBannerImage}`} alt={offer.title} className="absolute inset-0 w-full h-full object-cover rounded-lg" />
                                             </div>
                                             <div className="w-full h-[44px] overflow-hidden">
                                                 <p className="font-['Poppins',sans-serif] font-normal text-[18px] text-black tracking-[-0.72px] leading-[22px] line-clamp-2">{offer.title}</p>
@@ -473,32 +495,32 @@ export function CheckoutPage2({
                                     </div>
                                 ))}
                             </div>
-                        </div> */}
+                        </div>
 
                         {/* Attractions Section (Exact) */}
-                        {/* <div>
+                        <div>
                             <div className="flex items-center justify-between">
                                 <h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a]">Available Attractions</h3>
                                 <span className="font-poppins text-xs font-medium text-[#F95F62] bg-[#F95F62]/10 px-3 py-1 rounded-full">{attractions.length} included</span>
                             </div>
                             <p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1 mb-4">Explore all the experiences you can enjoy with your pass</p>
                             <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
-                                {attractions.map((a) => (
+                                {attractions.map((a: any) => (
                                     <div key={a.id} className="group relative rounded-xl overflow-hidden">
                                         <div className="aspect-[4/3] relative">
-                                            <ImageWithFallback src={a.image} alt={a.name} className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
+                                            <ImageWithFallback src={a.thumbnail} alt={a.title} className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
                                             <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent" />
                                             <div className="absolute top-2 right-2">
                                                 <span className="inline-flex px-2 py-0.5 rounded-full bg-white/90 backdrop-blur-sm text-[10px] font-poppins font-medium text-[#555]">{a.category}</span>
                                             </div>
                                             <div className="absolute bottom-2 left-2 right-2">
-                                                <h6 className="font-poppins text-sm leading-snug font-medium text-white drop-shadow-sm">{a.name}</h6>
+                                                <h6 className="font-poppins text-sm leading-snug font-medium text-white drop-shadow-sm">{a.title}</h6>
                                             </div>
                                         </div>
                                     </div>
                                 ))}
                             </div>
-                        </div> */}
+                        </div>
                     </div>
 
                     {/* Right Column - Config Card */}