diff --git a/public/images/aswan.jpg b/public/images/aswan.jpg
index 14bf7f8..6f21b8d 100644
Binary files a/public/images/aswan.jpg and b/public/images/aswan.jpg differ
diff --git a/public/images/edfu.jpg b/public/images/edfu.jpg
index 01e6c26..76d8d8a 100644
Binary files a/public/images/edfu.jpg and b/public/images/edfu.jpg differ
diff --git a/public/images/esna.jpeg b/public/images/esna.jpeg
new file mode 100644
index 0000000..62c3a72
Binary files /dev/null and b/public/images/esna.jpeg differ
diff --git a/public/images/komombo.jpg b/public/images/komombo.jpg
index a1c5c1a..3e81e84 100644
Binary files a/public/images/komombo.jpg and b/public/images/komombo.jpg differ
diff --git a/public/images/lock.jpg b/public/images/lock.jpg
index f8c6423..98dd71c 100644
Binary files a/public/images/lock.jpg and b/public/images/lock.jpg differ
diff --git a/public/images/luxor.jpg b/public/images/luxor.jpg
index 7a677a3..6416a1a 100644
Binary files a/public/images/luxor.jpg and b/public/images/luxor.jpg differ
diff --git a/public/images/map_dark.jpg b/public/images/map_dark.jpg
new file mode 100644
index 0000000..f9ff19d
Binary files /dev/null and b/public/images/map_dark.jpg differ
diff --git a/public/images/silsila.jpg b/public/images/silsila.jpg
index 110ff3d..877f3a9 100644
Binary files a/public/images/silsila.jpg and b/public/images/silsila.jpg differ
diff --git a/src/app/itinerary/page.jsx b/src/app/itinerary/page.jsx
index a751276..4adb0fd 100644
--- a/src/app/itinerary/page.jsx
+++ b/src/app/itinerary/page.jsx
@@ -3,15 +3,14 @@ import { Footer } from '@/components/Footer'
 import { Header } from '@/components/Header'
 import Iti1 from '@/components/Iti1'
 import Timeline from '@/components/Timeline'
+import { Itinerary } from '@/components/Itinerary'
 
-export default function Itinerary() {
+export default function ItineraryPage() {
   return (
     <>
       <Header />
       <main>
-        <Iti1 />
-        <Timeline />
-        <CallToAction3 />
+        <Itinerary />
       </main>
       <Footer />
     </>
diff --git a/src/components/Itinerary.jsx b/src/components/Itinerary.jsx
new file mode 100644
index 0000000..1899c41
--- /dev/null
+++ b/src/components/Itinerary.jsx
@@ -0,0 +1,149 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+import { H1, H2, H3, H4, P, PS, PXS, PXXS } from '@/components/text'
+import { ChevronDownIcon } from '@heroicons/react/24/outline'
+
+const itineraryDays = {
+  day1: {
+    title: "Day 1: Luxor",
+    image: "/images/luxor.jpg",
+    content: [
+      "Welcome to Luxor, often referred to as the world's greatest open-air museum.Begin your journey by exploring the city's rich history and captivating landmarks.",
+      "Visit the magnificent Karnak Temple, one of the largest religious complexes in the world, and marvel at its towering columns and intricate hieroglyphs. Then, head to the Luxor Temple, a stunning example of ancient Egyptian architecture.",
+      "In the evening, enjoy a traditional Egyptian dinner on our Dahabiya, followed by a relaxing evening under the stars.."
+    ]
+  },
+  day2: {
+    title: "Day 2: Sailing to Esna",
+    image: "/images/esna.jpeg",
+    content: [
+      "Set sail on the serene waters of the Nile, as we journey towards the charming town of Esna.",
+      "As the dahabiya glides through the tranquil river, take in the breathtaking views of the lush landscapes and ancient monuments that line the banks.",
+      "In the evening, VEDA docks at Esna and explore the local markets, where you can discover unique handicrafts and interact with friendly locals."
+    ]
+  },
+  day3: {
+    title: "Day 3: Crossing the Esna Lock",
+    image: "/images/lock.jpg",
+    content: [
+      "Experience the fascinating process of crossing the Esna Lock, a marvel of engineering that allows vessels to navigate the varying water levels of the Nile.",
+      "Witness the skilled operation of the lock as the dahabiya is raised or lowered to continue its journey upstream. This unique experience offers a glimpse into the intricate workings of river navigation and provides an excellent opportunity for photography.",
+      "After crossing the lock, continue sailing towards Edfu, enjoying the serene ambiance and scenic vistas along the way."
+    ]
+  },
+  day4: {
+    title: "Day 4: Edfu",
+    image: "/images/edfu.jpg",
+    content: [
+      "Arrive in Edfu, home to one of Egypt's best-preserved temples dedicated to the falcon god Horus.",
+      "Explore the impressive Temple of Edfu, with its massive pylons, detailed reliefs, and captivating myths depicted on its walls. Discover the fascinating stories of ancient Egyptian deities and their significance in the culture and religion of the time.",
+      "After the temple visit, return to the dahabiya for a leisurely afternoon sail, with opportunities for relaxation and rejuvenation on board."
+    ]
+  },
+  day5: {
+    title: "Day 5: Silsila",
+    image: "/images/silsila.jpg",
+    content: [
+      "Together we will visit the historic site of Gebel el-Silsila, known for its ancient sandstone quarries.",
+      "Explore the remnants of temples, shrines, and inscriptions that reveal the area's significance as a source of building materials for many of Egypt's monumental structures. Gain insight into the craftsmanship and artistry of the ancient Egyptians as you wander through this unique archaeological site.",
+      "In the evening, continue our journey along the Nile, soaking in the tranquil beauty of the river."
+    ]
+  },
+  day6: {
+    title: "Day 6: Kom Ombo",
+    image: "/images/komombo.jpg",
+    content: [
+      "Our journey brings us to Kom Ombo, a unique temple dedicated to two gods: Sobek, the crocodile god, and Horus the Elder, the falcon-headed god.",
+      "Explore the symmetrical design of the temple, with its dual sanctuaries and fascinating reliefs depicting medical instruments, surgical scenes, and ancient calendars. Don't miss the nearby Crocodile Museum, where you can view mummified crocodiles and learn about the sacred role of these creatures in ancient Egyptian culture.",
+      "Return to the dahabiya for a relaxing evening as we sail towards Aswan."
+    ]
+  },
+  day7: {
+    title: "Day 7: Aswan",
+    image: "/images/aswan.jpg",
+    content: [
+      "We will conclude our journey in the picturesque city of Aswan, known for its stunning landscapes and rich cultural heritage.",
+      "Visit the majestic Philae Temple, dedicated to the goddess Isis, and marvel at its beautiful island setting. Explore the bustling Aswan market, where you can shop for spices, jewelry, and local crafts. In the afternoon, take a peaceful felucca ride around Elephantine Island and enjoy the gentle breeze and scenic views.",
+      "As the day draws to a close, gather for a farewell dinner on board, celebrating the unforgettable experiences and memories created during the VEDA Retreat."
+    ]
+  }
+}
+
+export function Itinerary() {
+  const [currentDay, setCurrentDay] = useState('day1')
+  const intervalRef = useRef(null)
+  const dayData = itineraryDays[currentDay]
+
+  const getNextDay = (day = currentDay) => {
+    const days = ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7']
+    const currentIndex = days.indexOf(day)
+    const nextIndex = (currentIndex + 1) % days.length
+    return days[nextIndex]
+  }
+
+  // Function to start the auto-loop
+  const startAutoLoop = () => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current)
+    }
+    intervalRef.current = setInterval(() => {
+      setCurrentDay(prevDay => getNextDay(prevDay))
+    }, 5000) // 5 seconds
+  }
+
+  // Auto-loop setup
+  useEffect(() => {
+    startAutoLoop()
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+      }
+    }
+  }, [])
+
+  // Handle manual click - this will reset the auto-loop timer
+  const handleManualAdvance = () => {
+    setCurrentDay(getNextDay())
+    startAutoLoop() // Restart the timer after manual interaction
+  }
+
+  return (
+    <div className="relative bg-transparent mb-0">
+      <div className="relative mx-auto max-w-8xl lg:grid lg:grid-cols-2 lg:items-stretch">
+        {/* Left column with changeable day content */}
+        <div className="relative min-h-80">
+          <img
+            alt={`Journey Image ${currentDay}`}
+            src={dayData.image}
+            className="w-full h-full object-cover"
+          />
+          {/* Black overlay */}
+          <div className="absolute inset-0 bg-black opacity-60"></div>
+          {/* paragraphs */}
+          <div className="absolute inset-0 flex items-start justify-center mx-auto max-w-lg flex-col text-start px-10">
+            <H2 className=" text-white text-3xl font-semibold">{dayData.title}</H2>
+            {dayData.content.map((paragraph, index) => (
+              <PS key={index} className=" mt-4 text-white text-start font-medium">{paragraph}</PS>
+            ))}
+            <div className="mt-6 flex justify-center items-center ">
+              <ChevronDownIcon 
+                onClick={handleManualAdvance}
+                className="h-8 w-8 text-white animate-bounce cursor-pointer hover:text-gray-300 transition-colors duration-200 animate-pulse"
+              />
+            </div>
+          </div>
+        </div>
+        
+        {/* Right column with map */}
+        <div className="relative min-h-80">
+          <img
+            alt="Journey Map"
+            src="/images/map_dark.jpg"
+            className="w-full h-auto object-contain"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}