diff --git a/package-lock.json b/package-lock.json
index 894829a..1767489 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,7 +63,6 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1599,7 +1598,6 @@
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1641,7 +1639,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1747,7 +1744,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2003,7 +1999,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3053,7 +3048,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3114,7 +3108,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3124,7 +3117,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -3152,9 +3144,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.11.0.tgz",
-      "integrity": "sha512-uI4JkMmjbWCZc01WVP2cH7ZfSzH91JAZUDd7/nIprDgWxBV1TkkmLToFh7EbMTcMak8URFRa2YoBL/W8GWnCTQ==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz",
+      "integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==",
       "license": "MIT",
       "dependencies": {
         "cookie": "^1.0.1",
@@ -3174,12 +3166,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.11.0.tgz",
-      "integrity": "sha512-e49Ir/kMGRzFOOrYQBdoitq3ULigw4lKbAyKusnvtDu2t4dBX4AGYPrzNvorXmVuOyeakai6FUPW5MmibvVG8g==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.12.0.tgz",
+      "integrity": "sha512-pfO9fiBcpEfX4Tx+iTYKDtPbrSLLCbwJ5EqP+SPYQu1VYCXdy79GSj0wttR0U4cikVdlImZuEZ/9ZNCgoaxwBA==",
       "license": "MIT",
       "dependencies": {
-        "react-router": "7.11.0"
+        "react-router": "7.12.0"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -3420,7 +3412,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
       "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -3542,7 +3533,6 @@
       "integrity": "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/src/Pages/Home_Page/Event_Section/Event.jsx b/src/Pages/Home_Page/Event_Section/Event.jsx
index 05af4a4..2135c98 100644
--- a/src/Pages/Home_Page/Event_Section/Event.jsx
+++ b/src/Pages/Home_Page/Event_Section/Event.jsx
@@ -2,7 +2,10 @@ import React, { useEffect, useRef } from "react";
 import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { useNavigate } from "react-router-dom";
-
+import HacknocturneImg from "../../../assets/Hacknocturne.jpeg";
+import csocImg from "../../../assets/csoc.jpeg";
+import techvistaraImg from "../../../assets/Techvistara.jpg";
+import codecafeImg from "../../../assets/CodeCafe.jpg";
 gsap.registerPlugin(ScrollTrigger);
 
 export const Event = () => {
@@ -15,7 +18,7 @@ export const Event = () => {
       slug: "hacknocturne",
       name: "HackNocturne",
       number: 0,
-      image: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800&q=80",
+      image: HacknocturneImg,
       description:
         "HackNocturne is CodeShack's flagship annual inter-college hackathon where students participate in a 24-hour non-stop coding challenge.",
       buttonText: "VIEW DETAILS"
@@ -25,7 +28,7 @@ export const Event = () => {
       slug: "tech-vistara",
       name: "Tech Vistara",
       number: 1,
-      image: "https://images.unsplash.com/photo-1509062522246-3755977927d7?w=800&q=80",
+      image: techvistaraImg,
       description:
         "Orientation program designed to introduce freshers to tech culture.",
       buttonText: "LEARN MORE"
@@ -35,7 +38,7 @@ export const Event = () => {
       slug: "codecafe",
       name: "CodeCafe",
       number: 2,
-      image: "https://images.unsplash.com/photo-1531482615713-2afd69097998?w=800&q=80",
+      image: codecafeImg,
       description:
         "Webinar and talk series on technology, placements, and careers.",
       buttonText: "EXPLORE"
@@ -45,7 +48,7 @@ export const Event = () => {
       slug: "csoc",
       name: "CSoC (CodeShack Summer of Code)",
       number: 3,
-      image: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&q=80",
+      image: csocImg,
       description:
         "A structured summer learning program focused on real-world skills.",
       buttonText: "JOIN NOW"
@@ -53,106 +56,106 @@ export const Event = () => {
   ];
 
   useEffect(() => {
-  cardsRef.current.forEach((card, index) => {
-    if (!card) return;
-
-    const numberEl = card.querySelector(".event-number");
-    const glowEl = card.querySelector(".event-glow");
-
-    const valueObj = { value: 0 };
-    const targetValue = events[index].number;
-
-    /* Timeline (paused by default) */
-    const tl = gsap.timeline({ paused: true });
-
-    /* Card animation */
-    tl.fromTo(
-      card,
-      { opacity: 0, y: 80 },
-      {
-        opacity: 1,
-        y: 0,
-        duration: 1,
-        ease: "power3.out"
-      },
-      0
-    );
-
-    /* Glow animation */
-    tl.fromTo(
-      glowEl,
-      { opacity: 0, scale: 0.6 },
-      {
-        opacity: 0.8,
-        scale: 1.2,
-        duration: 0.6,
-        ease: "power2.out"
-      },
-      0.1
-    );
-
-    tl.to(
-      glowEl,
-      {
-        opacity: 0.25,
-        scale: 1,
-        duration: 0.6,
-        ease: "power2.out"
-      },
-      0.8
-    );
-
-    /* Number animation */
-    tl.to(
-      valueObj,
-      {
-        value: targetValue,
-        duration: 1.2,
-        ease: "power2.out",
-        snap: { value: 1 },
-        onUpdate: () => {
-          numberEl.textContent = String(valueObj.value).padStart(2, "0");
+    cardsRef.current.forEach((card, index) => {
+      if (!card) return;
+
+      const numberEl = card.querySelector(".event-number");
+      const glowEl = card.querySelector(".event-glow");
+
+      const valueObj = { value: 0 };
+      const targetValue = events[index].number;
+
+      /* Timeline (paused by default) */
+      const tl = gsap.timeline({ paused: true });
+
+      /* Card animation */
+      tl.fromTo(
+        card,
+        { opacity: 0, y: 80 },
+        {
+          opacity: 1,
+          y: 0,
+          duration: 1,
+          ease: "power3.out"
+        },
+        0
+      );
+
+      /* Glow animation */
+      tl.fromTo(
+        glowEl,
+        { opacity: 0, scale: 0.6 },
+        {
+          opacity: 0.8,
+          scale: 1.2,
+          duration: 0.6,
+          ease: "power2.out"
+        },
+        0.1
+      );
+
+      tl.to(
+        glowEl,
+        {
+          opacity: 0.25,
+          scale: 1,
+          duration: 0.6,
+          ease: "power2.out"
+        },
+        0.8
+      );
+
+      /* Number animation */
+      tl.to(
+        valueObj,
+        {
+          value: targetValue,
+          duration: 1.2,
+          ease: "power2.out",
+          snap: { value: 1 },
+          onUpdate: () => {
+            numberEl.textContent = String(valueObj.value).padStart(2, "0");
+          }
+        },
+        0
+      );
+
+      /* ScrollTrigger */
+      ScrollTrigger.create({
+        trigger: card,
+        start: "top 80%",
+
+        onEnter: () => {
+          tl.restart();
+        },
+
+        onLeaveBack: () => {
+          // Fade out smoothly when scrolling up
+          gsap.to(card, {
+            opacity: 0,
+            y: 80,
+            duration: 0.5,
+            ease: "power2.in",
+            onComplete: () => {
+              // Reset everything AFTER fade-out
+              tl.pause(0);
+
+              valueObj.value = 0;
+              numberEl.textContent = "00";
+
+              gsap.set(glowEl, {
+                opacity: 0,
+                scale: 0.6
+              });
+            }
+          });
         }
-      },
-      0
-    );
-
-    /* ScrollTrigger */
-    ScrollTrigger.create({
-  trigger: card,
-  start: "top 80%",
-
-  onEnter: () => {
-    tl.restart();
-  },
-
-  onLeaveBack: () => {
-    // Fade out smoothly when scrolling up
-    gsap.to(card, {
-      opacity: 0,
-      y: 80,
-      duration: 0.5,
-      ease: "power2.in",
-      onComplete: () => {
-        // Reset everything AFTER fade-out
-        tl.pause(0);
-
-        valueObj.value = 0;
-        numberEl.textContent = "00";
-
-        gsap.set(glowEl, {
-          opacity: 0,
-          scale: 0.6
-        });
-      }
-    });
-  }
-});
+      });
 
-  });
+    });
 
-  return () => ScrollTrigger.getAll().forEach(t => t.kill());
-}, []);
+    return () => ScrollTrigger.getAll().forEach(t => t.kill());
+  }, []);
 
 
 
diff --git a/src/Pages/Home_Page/Event_Section/EventDetailPage.jsx b/src/Pages/Home_Page/Event_Section/EventDetailPage.jsx
index ac4b9ef..8d74a0e 100644
--- a/src/Pages/Home_Page/Event_Section/EventDetailPage.jsx
+++ b/src/Pages/Home_Page/Event_Section/EventDetailPage.jsx
@@ -1,37 +1,234 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useParams, useNavigate } from "react-router-dom";
-import { ArrowLeft } from "lucide-react";
+import { ArrowLeft, ChevronLeft, ChevronRight, Calendar, Clock, X, FileText, Key, Camera } from "lucide-react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import HacknocturneImg from "../../../assets/Hacknocturne.jpeg";
+import HacknocturneCat1 from "../../../assets/hacknocturneCat1.jpeg";
+import HacknocturneCat2 from "../../../assets/hacknocturneCat2.jpeg";
+import Winner1Img from "../../../assets/winner1.png";
+import Winner2Img from "../../../assets/winner2.png";
+import Winner3Img from "../../../assets/winner3.png";
+import TechvistaraImg from "../../../assets/Techvistara.jpg";
+import CodeCafeImg from "../../../assets/CodeCafe.jpg";
+import CsocImg from "../../../assets/csoc.jpeg";
+
+// Placeholder imports for Tech Vistara domains - replace with actual images
+import DsaImg from "../../../assets/dsa.png";
+import WebDevImg from "../../../assets/webdev.png";
+import ComputerFundamentalsImg from "../../../assets/Techvistara.jpg"; // Placeholder
+import RosImg from "../../../assets/cybersecurity.png";
+import PersonalBrandingImg from "../../../assets/uiux.png";
+import VideoEditingImg from "../../../assets/aiml.png";
+import LaptopGuideImg from "../../../assets/laptopguide.png";
+
+// Placeholder imports for CodeCafe episodes - replace with actual images
+import Episode1Img from "../../../assets/CodeCafe.jpg"; // Placeholder
+import Episode2Img from "../../../assets/codecafeep2.png";
+
+// Event Gallery Images for CodeCafe Episode 2
+import EventImg1 from "../../../assets/eventimg1.png";
+import EventImg2 from "../../../assets/eventimg2.jpg";
+
+gsap.registerPlugin(ScrollTrigger);
 
 export const EventDetailPage = () => {
   const { eventId } = useParams();
   const navigate = useNavigate();
+  const winnerCardsRef = useRef([]);
+  const domainItemsRef = useRef([]);
+  const [selectedEpisode, setSelectedEpisode] = useState(null);
+  const episodeCardsRef = useRef([]);
 
   useEffect(() => {
     window.scrollTo(0, 0);
   }, [eventId]);
 
+  // Carousel state and auto-play
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const hacknocturneImages = [HacknocturneCat1, HacknocturneImg, HacknocturneCat2];
+
+  useEffect(() => {
+    if (eventId === "hacknocturne") {
+      const interval = setInterval(() => {
+        setCurrentImageIndex((prevIndex) =>
+          (prevIndex + 1) % hacknocturneImages.length
+        );
+      }, 3000); // Change image every 3 seconds
+
+      return () => clearInterval(interval);
+    }
+  }, [eventId]);
+
+  // GSAP animation for winner cards
+  useEffect(() => {
+    if (eventId === "hacknocturne") {
+      winnerCardsRef.current.forEach((card) => {
+        if (!card) return;
+
+        const tl = gsap.timeline({ paused: true });
+
+        tl.fromTo(
+          card,
+          { opacity: 0, y: 80 },
+          {
+            opacity: 1,
+            y: 0,
+            duration: 1,
+            ease: "power3.out"
+          }
+        );
+
+        ScrollTrigger.create({
+          trigger: card,
+          start: "top 80%",
+          onEnter: () => {
+            tl.restart();
+          },
+          onLeaveBack: () => {
+            gsap.to(card, {
+              opacity: 0,
+              y: 80,
+              duration: 0.5,
+              ease: "power2.in",
+              onComplete: () => {
+                tl.pause(0);
+              }
+            });
+          }
+        });
+      });
+
+      return () => ScrollTrigger.getAll().forEach(t => t.kill());
+    }
+  }, [eventId]);
+
+  // GSAP animation for Tech Vistara and CSoC domain timeline
+  useEffect(() => {
+    if (eventId === "tech-vistara" || eventId === "csoc") {
+      domainItemsRef.current.forEach((item) => {
+        if (!item) return;
+
+        const tl = gsap.timeline({ paused: true });
+
+        tl.fromTo(
+          item,
+          { opacity: 0, scale: 0.8, y: 30 },
+          {
+            opacity: 1,
+            scale: 1,
+            y: 0,
+            duration: 0.6,
+            ease: "back.out(1.2)"
+          }
+        );
+
+        ScrollTrigger.create({
+          trigger: item,
+          start: "top 85%",
+          onEnter: () => {
+            tl.restart();
+          },
+          onLeaveBack: () => {
+            gsap.to(item, {
+              opacity: 0,
+              scale: 0.8,
+              y: 30,
+              duration: 0.4,
+              ease: "power2.in",
+              onComplete: () => {
+                tl.pause(0);
+              }
+            });
+          }
+        });
+      });
+
+      return () => ScrollTrigger.getAll().forEach(t => t.kill());
+    }
+  }, [eventId]);
+
+  // GSAP animation for CodeCafe episode cards
+  useEffect(() => {
+    if (eventId === "codecafe") {
+      episodeCardsRef.current.forEach((card) => {
+        if (!card) return;
+
+        const tl = gsap.timeline({ paused: true });
+
+        tl.fromTo(
+          card,
+          { opacity: 0, y: 60 },
+          {
+            opacity: 1,
+            y: 0,
+            duration: 0.8,
+            ease: "power3.out"
+          }
+        );
+
+        ScrollTrigger.create({
+          trigger: card,
+          start: "top 80%",
+          onEnter: () => {
+            tl.restart();
+          },
+          onLeaveBack: () => {
+            gsap.to(card, {
+              opacity: 0,
+              y: 60,
+              duration: 0.5,
+              ease: "power2.in",
+              onComplete: () => {
+                tl.pause(0);
+              }
+            });
+          }
+        });
+      });
+
+      return () => ScrollTrigger.getAll().forEach(t => t.kill());
+    }
+  }, [eventId]);
+
+  const nextImage = () => {
+    setCurrentImageIndex((prevIndex) =>
+      (prevIndex + 1) % hacknocturneImages.length
+    );
+  };
+
+  const prevImage = () => {
+    setCurrentImageIndex((prevIndex) =>
+      prevIndex === 0 ? hacknocturneImages.length - 1 : prevIndex - 1
+    );
+  };
+
   const events = {
     hacknocturne: {
       id: 1,
       name: "HackNocturne",
+      image: HacknocturneImg,
       description:
         "HackNocturne is CodeShack's flagship annual inter-college hackathon where students participate in a 24-hour non-stop coding challenge. Teams work together to build innovative solutions for real-world problems while learning new technologies and collaborating under time pressure. The event promotes creativity, teamwork, and hands-on experience. HackNocturne features a prize money, along with certificates, swag, and recognition for top-performing teams.",
     },
     "tech-vistara": {
       id: 2,
       name: "Tech Vistara",
+      image: TechvistaraImg,
       description:
         "Tech Vistara is the official orientation program by CodeShack for first-year students. It is designed to help freshers understand what engineering and technology are really about beyond classrooms and exams. The session acts as a beginner-friendly guide that introduces different tech domains, learning paths, useful resources, and opportunities available in college. Tech Vistara helps first-year students take their first confident step into their technical journey and avoid common mistakes early on.",
     },
     codecafe: {
       id: 3,
       name: "CodeCafe",
+      image: CodeCafeImg,
       description:
         "CodeCafe is a webinar and talk series conducted by CodeShack that focuses on technology, placements, career guidance, and industry insights. The sessions are interactive and beginner-friendly, featuring seniors, alumni, and industry professionals who share their experiences and practical advice. CodeCafe aims to create an open and relaxed environment where students can learn, ask questions, and gain clarity about their academic and career paths.",
     },
     csoc: {
       id: 4,
       name: "CSoC (CodeShack Summer of Code)",
+      image: CsocImg,
       description:
         "CSoC (CodeShack Summer of Code) is a structured 4–5 week summer learning program focused on helping students upskill in various technical domains such as Web Development, App Development, and Data Structures & Algorithms. The program includes guided learning, hands-on assignments, and mentor support. It concludes with a hackathon where participants apply what they have learned to build real projects, making CSoC a complete learning-to-building experience.",
     },
@@ -59,10 +256,10 @@ export const EventDetailPage = () => {
     <div className="min-h-screen text-white bg-tech-grid">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {/* Hero Image Section with Overlay Text */}
-        <div className=" h-96 sm:h-[500px] md:h-[600px] mb-12 overflow-hidden rounded-2xl">
+        <div className="relative h-96 sm:h-[500px] md:h-[600px] mb-12 overflow-hidden rounded-2xl">
           {/* Background Image */}
           <img
-            src={`https://images.unsplash.com/photo-1531482615713-2afd69097998?w=1600&q=80`}
+            src={event.image}
             alt={event.name}
             className="w-full h-full object-cover"
           />
@@ -97,7 +294,804 @@ export const EventDetailPage = () => {
               {event.description}
             </p>
           </div>
+
+          {/* Episodes Section - Only for CodeCafe */}
+          {eventId === "codecafe" && (
+            <div className="mt-12 pb-16 border-b border-gray-700">
+              <h2 className="text-2xl sm:text-3xl font-bold mb-12 text-white">
+                Episodes So Far
+              </h2>
+
+              <div className="grid md:grid-cols-2 gap-8">
+                {/* Episode 1 */}
+                <div
+                  ref={(el) => (episodeCardsRef.current[0] = el)}
+                  className="bg-gradient-to-br from-gray-900 to-black border border-gray-700 rounded-2xl overflow-hidden hover:border-purple-600/50 transition-all duration-300"
+                >
+                  {/* Episode Image */}
+                  <div className="relative h-48 overflow-hidden">
+                    <img
+                      src={Episode1Img}
+                      alt="Episode 1"
+                      className="w-full h-full object-cover transform transition-transform duration-300 hover:scale-110"
+                    />
+                    <div className="absolute top-4 left-4 bg-purple-600 text-white px-4 py-2 rounded-full font-bold text-sm">
+                      EP-01
+                    </div>
+                  </div>
+
+                  {/* Episode Content */}
+                  <div className="p-6">
+                    <h3 className="text-xl font-bold text-white mb-3">
+                      Breaking Into Tech: A Freshman's Guide
+                    </h3>
+                    <p className="text-gray-400 text-sm mb-4 leading-relaxed">
+                      An insightful session covering the essential steps for first-year students to kickstart their tech journey. Topics included choosing the right tech stack, building projects, and preparing for internships.
+                    </p>
+
+                    {/* Speaker Info */}
+                    <div className="border-t border-gray-700 pt-4 mt-4">
+                      <p className="text-xs text-gray-500 mb-2">SPEAKER</p>
+                      <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 bg-gradient-to-br from-purple-600 to-purple-700 rounded-full flex items-center justify-center text-white font-bold">
+                          RS
+                        </div>
+                        <div>
+                          <p className="text-white font-semibold">Rahul Sharma</p>
+                          <p className="text-gray-400 text-xs">Software Engineer @ Google</p>
+                        </div>
+                      </div>
+                      <div className="mt-3 space-y-1">
+                        <div className="flex items-center gap-2 text-xs text-gray-500">
+                          <Calendar size={14} className="text-purple-500" />
+                          <span>Date: January 15, 2024</span>
+                        </div>
+                        <div className="flex items-center gap-2 text-xs text-gray-500">
+                          <Clock size={14} className="text-purple-500" />
+                          <span>Duration: 1.5 hours</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Episode 2 */}
+                <div
+                  ref={(el) => (episodeCardsRef.current[1] = el)}
+                  onClick={() => setSelectedEpisode(2)}
+                  className="bg-gradient-to-br from-gray-900 to-black border border-gray-700 rounded-2xl overflow-hidden hover:border-purple-600/50 transition-all duration-300 cursor-pointer"
+                >
+                  {/* Episode Image */}
+                  <div className="relative h-48 overflow-hidden">
+                    <img
+                      src={Episode2Img}
+                      alt="Episode 2"
+                      className="w-full h-full object-cover transform transition-transform duration-300 hover:scale-110"
+                    />
+                    <div className="absolute top-4 left-4 bg-purple-600 text-white px-4 py-2 rounded-full font-bold text-sm">
+                      EP-02
+                    </div>
+                  </div>
+
+                  {/* Episode Content */}
+                  <div className="p-6">
+                    <h3 className="text-xl font-bold text-white mb-3">
+                      AI in Software Engineering: The Future is Here
+                    </h3>
+                    <p className="text-gray-400 text-sm mb-4 leading-relaxed">
+                      An insightful session on how Artificial Intelligence is transforming software engineering, the shifting role of engineers, and practical advice for students and aspiring founders.
+                    </p>
+
+                    {/* Speaker Info */}
+                    <div className="border-t border-gray-700 pt-4 mt-4">
+                      <p className="text-xs text-gray-500 mb-2">SPEAKER</p>
+                      <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 bg-gradient-to-br from-purple-600 to-purple-700 rounded-full flex items-center justify-center text-white font-bold">
+                          KA
+                        </div>
+                        <div>
+                          <p className="text-white font-semibold">Khushagra Agarwal</p>
+                          <p className="text-gray-400 text-xs">Co-founder @ Zryth Solutions</p>
+                        </div>
+                      </div>
+                      <div className="mt-3 space-y-1">
+                        <div className="flex items-center gap-2 text-xs text-gray-500">
+                          <Calendar size={14} className="text-purple-500" />
+                          <span>Date: December 27, 2025</span>
+                        </div>
+                        <div className="flex items-center gap-2 text-xs text-gray-500">
+                          <Clock size={14} className="text-purple-500" />
+                          <span>Duration: 1.5 hours</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Domain Timeline Section - Only for Tech Vistara */}
+          {eventId === "tech-vistara" && (
+            <div className="mt-12 pb-16 border-b border-gray-700">
+              <h2 className="text-2xl sm:text-3xl font-bold mb-12 text-white">
+                Domains Covered
+              </h2>
+
+              {/* Timeline Container */}
+              <div className="relative">
+                {/* Vertical Dotted Line in the Middle */}
+                <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 border-l-2 border-dotted border-orange-500/50 hidden md:block"></div>
+
+                {/* Timeline Items */}
+                <div className="space-y-16">
+                  {/* 1. DSA - Left Content, Right Image */}
+                  <div
+                    ref={(el) => (domainItemsRef.current[0] = el)}
+                    className="relative grid md:grid-cols-2 gap-8 items-center"
+                  >
+                    {/* Content Left */}
+                    <div className="md:text-right order-2 md:order-1">
+                      <div className="border border-gray-700 rounded-2xl p-6 md:mr-8 bg-black/20">
+                        <h3 className="text-2xl font-bold text-white mb-3">Data Structures & Algorithms</h3>
+                        <p className="text-gray-400 text-sm md:text-base leading-relaxed">
+                          Learn the fundamentals of DSA, essential for coding interviews and competitive programming. Master arrays, linked lists, trees, graphs, and algorithmic problem-solving techniques.
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Center Dot */}
+                    <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-orange-500 rounded-full border-4 border-black hidden md:block z-10"></div>
+
+                    {/* Image Right */}
+                    <div className="order-1 md:order-2">
+                      <div className="overflow-hidden rounded-2xl border border-gray-700 shadow-xl md:ml-8">
+                        <img
+                          src={DsaImg}
+                          alt="DSA Domain"
+                          className="w-full h-64 object-cover transform transition-transform duration-300 hover:scale-110"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 2. Web Development - Right Content, Left Image */}
+                  <div
+                    ref={(el) => (domainItemsRef.current[1] = el)}
+                    className="relative grid md:grid-cols-2 gap-8 items-center"
+                  >
+                    {/* Image Left */}
+                    <div className="order-1">
+                      <div className="overflow-hidden rounded-2xl border border-gray-700 shadow-xl md:mr-8">
+                        <img
+                          src={WebDevImg}
+                          alt="Web Development"
+                          className="w-full h-64 object-cover transform transition-transform duration-300 hover:scale-110"
+                        />
+                      </div>
+                    </div>
+
+                    {/* Center Dot */}
+                    <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-orange-500 rounded-full border-4 border-black hidden md:block z-10"></div>
+
+                    {/* Content Right */}
+                    <div className="md:text-left order-2">
+                      <div className="border border-gray-700 rounded-2xl p-6 md:ml-8 bg-black/20">
+                        <h3 className="text-2xl font-bold text-white mb-3">Web Development</h3>
+                        <p className="text-gray-400 text-sm md:text-base leading-relaxed">
+                          Master modern web technologies including HTML5, CSS3, JavaScript, and React. Build responsive, interactive websites and web applications from scratch to deployment.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 3. Cyber Security - Left Content, Right Image */}
+                  <div
+                    ref={(el) => (domainItemsRef.current[2] = el)}
+                    className="relative grid md:grid-cols-2 gap-8 items-center"
+                  >
+                    {/* Content Left */}
+                    <div className="md:text-right order-2 md:order-1">
+                      <div className="border border-gray-700 rounded-2xl p-6 md:mr-8 bg-black/20">
+                        <h3 className="text-2xl font-bold text-white mb-3">Cyber Security</h3>
+                        <p className="text-gray-400 text-sm md:text-base leading-relaxed">
+                          Protect systems and networks from digital attacks. Learn about ethical hacking, network security, cryptography, and security protocols to safeguard information.
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Center Dot */}
+                    <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-orange-500 rounded-full border-4 border-black hidden md:block z-10"></div>
+
+                    {/* Image Right */}
+                    <div className="order-1 md:order-2">
+                      <div className="overflow-hidden rounded-2xl border border-gray-700 shadow-xl md:ml-8">
+                        <img
+                          src={RosImg}
+                          alt="Cyber Security"
+                          className="w-full h-64 object-cover transform transition-transform duration-300 hover:scale-110"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 4. UI/UX Design - Right Content, Left Image */}
+                  <div
+                    ref={(el) => (domainItemsRef.current[3] = el)}
+                    className="relative grid md:grid-cols-2 gap-8 items-center"
+                  >
+                    {/* Image Left */}
+                    <div className="order-1">
+                      <div className="overflow-hidden rounded-2xl border border-gray-700 shadow-xl md:mr-8">
+                        <img
+                          src={PersonalBrandingImg}
+                          alt="UI/UX Design"
+                          className="w-full h-64 object-cover transform transition-transform duration-300 hover:scale-110"
+                        />
+                      </div>
+                    </div>
+
+                    {/* Center Dot */}
+                    <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-orange-500 rounded-full border-4 border-black hidden md:block z-10"></div>
+
+                    {/* Content Right */}
+                    <div className="md:text-left order-2">
+                      <div className="border border-gray-700 rounded-2xl p-6 md:ml-8 bg-black/20">
+                        <h3 className="text-2xl font-bold text-white mb-3">UI/UX Design</h3>
+                        <p className="text-gray-400 text-sm md:text-base leading-relaxed">
+                          Design intuitive and beautiful user interfaces. Master design principles, wireframing, prototyping, and user research to create exceptional digital experiences.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 5. AI/ML - Left Content, Right Image */}
+                  <div
+                    ref={(el) => (domainItemsRef.current[4] = el)}
+                    className="relative grid md:grid-cols-2 gap-8 items-center"
+                  >
+                    {/* Content Left */}
+                    <div className="md:text-right order-2 md:order-1">
+                      <div className="border border-gray-700 rounded-2xl p-6 md:mr-8 bg-black/20">
+                        <h3 className="text-2xl font-bold text-white mb-3">AI & Machine Learning</h3>
+                        <p className="text-gray-400 text-sm md:text-base leading-relaxed">
+                          Explore the world of Artificial Intelligence. Learn about machine learning algorithms, deep learning, neural networks, and how to build intelligent systems.
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Center Dot */}
+                    <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-orange-500 rounded-full border-4 border-black hidden md:block z-10"></div>
+
+                    {/* Image Right */}
+                    <div className="order-1 md:order-2">
+                      <div className="overflow-hidden rounded-2xl border border-gray-700 shadow-xl md:ml-8">
+                        <img
+                          src={VideoEditingImg}
+                          alt="AI/ML"
+                          className="w-full h-64 object-cover transform transition-transform duration-300 hover:scale-110"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 6. Laptop Guide - Right Content, Left Image */}
+                  <div
+                    ref={(el) => (domainItemsRef.current[5] = el)}
+                    className="relative grid md:grid-cols-2 gap-8 items-center"
+                  >
+                    {/* Image Left */}
+                    <div className="order-1">
+                      <div className="overflow-hidden rounded-2xl border border-gray-700 shadow-xl md:mr-8">
+                        <img
+                          src={LaptopGuideImg}
+                          alt="Laptop Guide"
+                          className="w-full h-64 object-cover transform transition-transform duration-300 hover:scale-110"
+                        />
+                      </div>
+                    </div>
+
+                    {/* Center Dot */}
+                    <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-orange-500 rounded-full border-4 border-black hidden md:block z-10"></div>
+
+                    {/* Content Right */}
+                    <div className="md:text-left order-2">
+                      <div className="border border-gray-700 rounded-2xl p-6 md:ml-8 bg-black/20">
+                        <h3 className="text-2xl font-bold text-white mb-3">Laptop Buying Guide</h3>
+                        <p className="text-gray-400 text-sm md:text-base leading-relaxed">
+                          Make informed decisions when purchasing a laptop for engineering and development. Learn about specs, performance requirements, and budget-friendly options.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Domain Timeline Section - Only for CSoC */}
+          {eventId === "csoc" && (
+            <div className="mt-12 pb-16 border-b border-gray-700">
+              <h2 className="text-2xl sm:text-3xl font-bold mb-12 text-white">
+                Domains Covered
+              </h2>
+
+              {/* Timeline Container */}
+              <div className="relative">
+                {/* Vertical Dotted Line in the Middle */}
+                <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 border-l-2 border-dotted border-purple-500/50 hidden md:block"></div>
+
+                {/* Timeline Items */}
+                <div className="space-y-16">
+                  {/* 1. Web Development - Left Content, Right Image */}
+                  <div
+                    ref={(el) => (domainItemsRef.current[0] = el)}
+                    className="relative grid md:grid-cols-2 gap-8 items-center"
+                  >
+                    {/* Content Left */}
+                    <div className="md:text-right order-2 md:order-1">
+                      <div className="border border-gray-700 rounded-2xl p-6 md:mr-8 bg-black/20">
+                        <h3 className="text-2xl font-bold text-white mb-3">Web Development</h3>
+                        <p className="text-gray-400 text-sm md:text-base leading-relaxed">
+                          Master the art of building modern web applications. Learn HTML, CSS, JavaScript, and popular frameworks like React. Build responsive, interactive websites and deploy them to production.
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Center Dot */}
+                    <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-purple-500 rounded-full border-4 border-black hidden md:block z-10"></div>
+
+                    {/* Image Right */}
+                    <div className="order-1 md:order-2">
+                      <div className="overflow-hidden rounded-2xl border border-gray-700 shadow-xl md:ml-8">
+                        <img
+                          src="https://images.unsplash.com/photo-1547658719-da2b51169166?w=800&q=80"
+                          alt="Web Development"
+                          className="w-full h-64 object-cover transform transition-transform duration-300 hover:scale-110"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 2. App Development - Right Content, Left Image */}
+                  <div
+                    ref={(el) => (domainItemsRef.current[1] = el)}
+                    className="relative grid md:grid-cols-2 gap-8 items-center"
+                  >
+                    {/* Image Left */}
+                    <div className="order-1">
+                      <div className="overflow-hidden rounded-2xl border border-gray-700 shadow-xl md:mr-8">
+                        <img
+                          src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=800&q=80"
+                          alt="App Development"
+                          className="w-full h-64 object-cover transform transition-transform duration-300 hover:scale-110"
+                        />
+                      </div>
+                    </div>
+
+                    {/* Center Dot */}
+                    <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-purple-500 rounded-full border-4 border-black hidden md:block z-10"></div>
+
+                    {/* Content Right */}
+                    <div className="md:text-left order-2">
+                      <div className="border border-gray-700 rounded-2xl p-6 md:ml-8 bg-black/20">
+                        <h3 className="text-2xl font-bold text-white mb-3">App Development</h3>
+                        <p className="text-gray-400 text-sm md:text-base leading-relaxed">
+                          Create powerful mobile applications for Android and iOS. Learn native development or cross-platform frameworks like React Native and Flutter. Build apps that solve real-world problems.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 3. DSA - Left Content, Right Image */}
+                  <div
+                    ref={(el) => (domainItemsRef.current[2] = el)}
+                    className="relative grid md:grid-cols-2 gap-8 items-center"
+                  >
+                    {/* Content Left */}
+                    <div className="md:text-right order-2 md:order-1">
+                      <div className="border border-gray-700 rounded-2xl p-6 md:mr-8 bg-black/20">
+                        <h3 className="text-2xl font-bold text-white mb-3">Data Structures & Algorithms</h3>
+                        <p className="text-gray-400 text-sm md:text-base leading-relaxed">
+                          Build a strong foundation in DSA for coding interviews and competitive programming. Master essential data structures, algorithmic techniques, and problem-solving strategies to excel in technical assessments.
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Center Dot */}
+                    <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-purple-500 rounded-full border-4 border-black hidden md:block z-10"></div>
+
+                    {/* Image Right */}
+                    <div className="order-1 md:order-2">
+                      <div className="overflow-hidden rounded-2xl border border-gray-700 shadow-xl md:ml-8">
+                        <img
+                          src="https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=800&q=80"
+                          alt="DSA"
+                          className="w-full h-64 object-cover transform transition-transform duration-300 hover:scale-110"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+
+          {/* Winners Section - Only for HackNocturne */}
+          {eventId === "hacknocturne" && (
+            <div className="mt-12 pb-16 border-b border-gray-700">
+              <h2 className="text-2xl sm:text-3xl font-bold mb-12 text-white">
+                Winners
+              </h2>
+
+              <div className="space-y-20">
+                {/* 1st Place - Photo Right, Description Left */}
+                <div
+                  ref={(el) => (winnerCardsRef.current[0] = el)}
+                  className="grid md:grid-cols-2 gap-8 items-center"
+                >
+                  {/* Description Left */}
+                  <div className="order-2 md:order-1">
+                    <div className="bg-gradient-to-br from-yellow-600/20 to-orange-600/20 border border-yellow-500/30 rounded-2xl p-8">
+                      <div className="flex items-center gap-3 mb-4">
+                        <div className="bg-yellow-500 text-black w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold">
+                          1
+                        </div>
+                        <h3 className="text-3xl font-bold text-white">Team Losers</h3>
+                      </div>
+                      <div className="mb-4">
+                        <p className="text-yellow-400 text-xl font-semibold">🏆 Champion</p>
+                      </div>
+                      <div className="bg-black/40 rounded-lg p-4 border border-yellow-500/20">
+                        <p className="text-gray-300 text-sm mb-2">Prize Amount</p>
+                        <p className="text-yellow-400 text-3xl font-bold">₹25,000</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Photo Right */}
+                  <div className="order-1 md:order-2">
+                    <div className="overflow-hidden rounded-2xl border-2 border-yellow-500/30 shadow-2xl shadow-yellow-500/20">
+                      <img
+                        src={Winner1Img}
+                        alt="Team Losers"
+                        className="w-full h-80 object-cover transform transition-transform duration-300 hover:scale-110"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {/* 2nd Place - Photo Left, Description Right */}
+                <div
+                  ref={(el) => (winnerCardsRef.current[1] = el)}
+                  className="grid md:grid-cols-2 gap-8 items-center"
+                >
+                  {/* Photo Left */}
+                  <div className="order-1">
+                    <div className="overflow-hidden rounded-2xl border-2 border-gray-500/30 shadow-2xl shadow-gray-500/20">
+                      <img
+                        src={Winner2Img}
+                        alt="Team CodeWin"
+                        className="w-full h-80 object-cover transform transition-transform duration-300 hover:scale-110"
+                      />
+                    </div>
+                  </div>
+
+                  {/* Description Right */}
+                  <div className="order-2">
+                    <div className="bg-gradient-to-br from-gray-700/20 to-gray-800/20 border border-gray-500/30 rounded-2xl p-8">
+                      <div className="flex items-center gap-3 mb-4">
+                        <div className="bg-gray-400 text-black w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold">
+                          2
+                        </div>
+                        <h3 className="text-3xl font-bold text-white">Team CodeWin</h3>
+                      </div>
+                      <div className="mb-4">
+                        <p className="text-gray-300 text-xl font-semibold">🥈 2nd Place</p>
+                      </div>
+                      <div className="bg-black/40 rounded-lg p-4 border border-gray-500/20">
+                        <p className="text-gray-300 text-sm mb-2">Prize Amount</p>
+                        <p className="text-gray-300 text-3xl font-bold">₹15,000</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* 3rd Place - Photo Right, Description Left */}
+                <div
+                  ref={(el) => (winnerCardsRef.current[2] = el)}
+                  className="grid md:grid-cols-2 gap-8 items-center"
+                >
+                  {/* Description Left */}
+                  <div className="order-2 md:order-1">
+                    <div className="bg-gradient-to-br from-orange-700/20 to-orange-900/20 border border-orange-500/30 rounded-2xl p-8">
+                      <div className="flex items-center gap-3 mb-4">
+                        <div className="bg-orange-600 text-white w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold">
+                          3
+                        </div>
+                        <h3 className="text-3xl font-bold text-white">Team CodeX</h3>
+                      </div>
+                      <div className="mb-4">
+                        <p className="text-orange-400 text-xl font-semibold">🥉 3rd Place</p>
+                      </div>
+                      <div className="bg-black/40 rounded-lg p-4 border border-orange-500/20">
+                        <p className="text-gray-300 text-sm mb-2">Prize Amount</p>
+                        <p className="text-orange-400 text-3xl font-bold">₹10,000</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Photo Right */}
+                  <div className="order-1 md:order-2">
+                    <div className="overflow-hidden rounded-2xl border-2 border-orange-500/30 shadow-2xl shadow-orange-500/20">
+                      <img
+                        src={Winner3Img}
+                        alt="Team CodeX"
+                        className="w-full h-80 object-cover transform transition-transform duration-300 hover:scale-110"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Image Carousel - Only for HackNocturne */}
+          {eventId === "hacknocturne" && (
+            <div className="mt-20">
+              <h2 className="text-2xl sm:text-3xl font-bold mb-6 text-white">
+                Event Gallery
+              </h2>
+
+              <div className="relative w-full h-[400px] sm:h-[500px] md:h-[600px] rounded-2xl overflow-hidden group">
+                {/* Carousel Container with Sliding Animation */}
+                <div
+                  className="flex h-full transition-transform duration-700 ease-in-out"
+                  style={{ transform: `translateX(-${currentImageIndex * 100}%)` }}
+                >
+                  {hacknocturneImages.map((image, index) => (
+                    <img
+                      key={index}
+                      src={image}
+                      alt={`HackNocturne ${index + 1}`}
+                      className="w-full h-full object-cover flex-shrink-0"
+                    />
+                  ))}
+                </div>
+
+                {/* Navigation Buttons */}
+                <button
+                  onClick={prevImage}
+                  className="absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white p-3 rounded-full transition-all opacity-0 group-hover:opacity-100 z-10"
+                  aria-label="Previous image"
+                >
+                  <ChevronLeft size={24} />
+                </button>
+
+                <button
+                  onClick={nextImage}
+                  className="absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white p-3 rounded-full transition-all opacity-0 group-hover:opacity-100 z-10"
+                  aria-label="Next image"
+                >
+                  <ChevronRight size={24} />
+                </button>
+
+                {/* Indicator Dots */}
+                <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10">
+                  {hacknocturneImages.map((_, index) => (
+                    <button
+                      key={index}
+                      onClick={() => setCurrentImageIndex(index)}
+                      className={`w-3 h-3 rounded-full transition-all ${index === currentImageIndex
+                        ? "bg-orange-500 w-8"
+                        : "bg-white/50 hover:bg-white/80"
+                        }`}
+                      aria-label={`Go to image ${index + 1}`}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
         </div>
+
+        {/* Episode Modal */}
+        {selectedEpisode === 2 && (
+          <div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4 overflow-y-auto">
+            <div className="bg-black/40 backdrop-blur-xl border border-purple-400/20 rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto my-8 custom-scrollbar">
+              {/* Modal Header */}
+              <div className="sticky top-0 bg-purple-900/30 backdrop-blur-md border-b border-purple-400/20 p-6 flex justify-between items-start z-10">
+                <div>
+                  <div className="bg-white/10 text-white px-3 py-1 rounded-full font-bold text-xs inline-block mb-2">
+                    EP-02
+                  </div>
+                  <h2 className="text-2xl md:text-3xl font-bold text-white">
+                    AI in Software Engineering: The Future is Here
+                  </h2>
+                  <div className="flex items-center gap-4 mt-3 text-sm text-white/90">
+                    <div className="flex items-center gap-2">
+                      <Calendar size={16} />
+                      <span>December 27, 2025</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Clock size={16} />
+                      <span>1.5 hours</span>
+                    </div>
+                  </div>
+                </div>
+                <button
+                  onClick={() => setSelectedEpisode(null)}
+                  className="bg-white/10 hover:bg-white/20 text-white p-2 rounded-full transition-colors"
+                >
+                  <X size={24} />
+                </button>
+              </div>
+
+              {/* Modal Content */}
+              <div className="p-6 md:p-8 space-y-8">
+                {/* Speaker Info */}
+                <div className="bg-white/5 backdrop-blur-sm border border-purple-400/20 rounded-xl p-6">
+                  <p className="text-xs text-gray-400 mb-3 uppercase tracking-wider">Featured Speaker</p>
+                  <div className="flex items-center gap-4">
+                    <div className="w-16 h-16 bg-gradient-to-br from-purple-500/80 to-purple-600/80 rounded-full flex items-center justify-center text-white font-bold text-xl">
+                      KA
+                    </div>
+                    <div>
+                      <h3 className="text-xl font-bold text-white">Khushagra Agarwal</h3>
+                      <p className="text-purple-300">Co-founder @ Zryth Solutions</p>
+                      <p className="text-gray-400 text-sm mt-1">Alumnus & CEO of an AI Solutions Company</p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Event Overview */}
+                <div className="prose prose-invert max-w-none">
+                  <h3 className="text-2xl font-bold text-white mb-4 flex items-center gap-2">
+                    <FileText className="text-purple-400" size={24} /> Event Overview
+                  </h3>
+                  <p className="text-gray-300 leading-relaxed">
+                    The session featured Kushagra Agarwal, an alumnus and CEO of Zit Solutions, an AI solutions company.
+                    The talk focused on how Artificial Intelligence is transforming software engineering, the shifting role
+                    of engineers, and practical advice for students and aspiring founders.
+                  </p>
+                </div>
+
+                {/* Key Themes Section */}
+                <div className="space-y-6">
+                  <h3 className="text-2xl font-bold text-white mb-6 flex items-center gap-2">
+                    <Key className="text-purple-400" size={24} /> Key Themes & Insights
+                  </h3>
+
+                  {/* Theme 1 */}
+                  <div className="bg-white/5 backdrop-blur-sm border border-purple-400/20 rounded-xl p-6">
+                    <h4 className="text-xl font-bold text-purple-300 mb-4">
+                      1. The Shift from Writing to Reviewing
+                    </h4>
+                    <div className="space-y-3 text-gray-300">
+                      <div className="flex gap-3">
+                        <span className="text-purple-500 mt-1">•</span>
+                        <div>
+                          <strong className="text-white">Changing Landscape:</strong> The engineering role is shifting
+                          from writing raw code to reviewing AI-generated code and designing architectures.
+                        </div>
+                      </div>
+                      <div className="flex gap-3">
+                        <span className="text-purple-500 mt-1">•</span>
+                        <div>
+                          <strong className="text-white">The "Chaos" of Speed:</strong> While AI allows developers to
+                          build in 5 minutes what used to take hours, debugging can now take significantly longer if
+                          the developer does not understand the underlying code.
+                        </div>
+                      </div>
+                      <div className="flex gap-3">
+                        <span className="text-purple-500 mt-1">•</span>
+                        <div>
+                          <strong className="text-white">Core Fundamentals:</strong> Despite AI's capabilities, core
+                          computer science concepts (Operating Systems, Databases, Networks, DSA) remain crucial.
+                          Engineers must understand how things work "under the hood" to effectively review and debug AI outputs.
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Theme 2 */}
+                  <div className="bg-white/5 backdrop-blur-sm border border-purple-400/20 rounded-xl p-6">
+                    <h4 className="text-xl font-bold text-purple-300 mb-4">
+                      2. AI in the Software Development Lifecycle
+                    </h4>
+                    <div className="space-y-3 text-gray-300">
+                      <div className="flex gap-3">
+                        <span className="text-purple-400 mt-1">•</span>
+                        <div>
+                          <strong className="text-white">Requirements:</strong> AI tools can now automate note-taking
+                          and summarize client requirements, reducing human error in translation.
+                        </div>
+                      </div>
+                      <div className="flex gap-3">
+                        <span className="text-purple-400 mt-1">•</span>
+                        <div>
+                          <strong className="text-white">Prototyping:</strong> Tools can generate wireframes and designs
+                          (e.g., Figma) from prompts, speeding up the initial design phase.
+                        </div>
+                      </div>
+                      <div className="flex gap-3">
+                        <span className="text-purple-400 mt-1">•</span>
+                        <div>
+                          <strong className="text-white">Coding & Architecture:</strong> AI can handle boilerplate code
+                          and implementation, but humans must define the High-Level Design (HLD) and Low-Level Design (LLD)
+                          to ensure the system is scalable and correct.
+                        </div>
+                      </div>
+                      <div className="flex gap-3">
+                        <span className="text-purple-400 mt-1">•</span>
+                        <div>
+                          <strong className="text-white">Testing:</strong> AI agents can automate testing (e.g., using
+                          frameworks like Playwright) by simulating user interactions, drastically reducing testing time.
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Theme 3 */}
+                  <div className="bg-white/5 backdrop-blur-sm border border-purple-400/20 rounded-xl p-6">
+                    <h4 className="text-xl font-bold text-purple-300 mb-4">
+                      3. Challenges in Production
+                    </h4>
+                    <div className="space-y-3 text-gray-300">
+                      <div className="flex gap-3">
+                        <span className="text-purple-300 mt-1">•</span>
+                        <div>
+                          <strong className="text-white">Debugging:</strong> This remains a weak point for AI because
+                          it lacks the full business and code context required to understand complex interdependencies.
+                        </div>
+                      </div>
+                      <div className="flex gap-3">
+                        <span className="text-purple-300 mt-1">•</span>
+                        <div>
+                          <strong className="text-white">Hallucinations & Limits:</strong> The speaker shared case
+                          studies where AI failed at specific tasks like mathematics or physics due to "hallucinations."
+                          The solution involved breaking problems into smaller chunks and using "Agentic AI" or external
+                          tools (like calculators) rather than relying on one large prompt.
+                        </div>
+                      </div>
+                      <div className="flex gap-3">
+                        <span className="text-purple-300 mt-1">•</span>
+                        <div>
+                          <strong className="text-white">Context Window:</strong> Early attempts failed because prompts
+                          were too large; optimizing prompts is often more effective than fine-tuning models.
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Event Pictures Placeholder */}
+                <div className="space-y-4">
+                  <h3 className="text-2xl font-bold text-white flex items-center gap-2">
+                    <Camera className="text-purple-400" size={24} /> Event Gallery
+                  </h3>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="overflow-hidden rounded-xl border border-gray-700">
+                      <img
+                        src={EventImg1}
+                        alt="Event Photo 1"
+                        className="w-full h-48 object-cover hover:scale-110 transition-transform duration-300"
+                      />
+                    </div>
+                    <div className="overflow-hidden rounded-xl border border-gray-700">
+                      <img
+                        src={EventImg2}
+                        alt="Event Photo 2"
+                        className="w-full h-48 object-cover hover:scale-110 transition-transform duration-300"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/Pages/Home_Page/Hero_Section/Hero.jsx b/src/Pages/Home_Page/Hero_Section/Hero.jsx
index af3547b..31b04f2 100644
--- a/src/Pages/Home_Page/Hero_Section/Hero.jsx
+++ b/src/Pages/Home_Page/Hero_Section/Hero.jsx
@@ -28,7 +28,7 @@ import collegeLogo from "../../../assets/collegeLogo.png";
 export const Hero = () => {
   return (
     <section className="relative min-h-screen flex items-center justify-center">
-      
+
       {/* Subtle grid background */}
       <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff08_1px,transparent_1px),linear-gradient(to_bottom,#ffffff08_1px,transparent_1px)] bg-[size:40px_40px]" />
 
@@ -36,26 +36,26 @@ export const Hero = () => {
       <div className="absolute bottom-[-200px] left-1/2 -translate-x-1/2 w-[1200px] h-[400px] bg-orange-500/40 blur-[150px] rounded-full" />
 
       {/* Content */}
-      <div className="relative z-10 max-w-6xl mx-auto px-6 text-center">
+      <div className="relative z-10 w-full max-w-6xl mx-auto px-6 text-center flex flex-col items-center justify-center">
 
         {/* College Branding */}
         <motion.div
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6 }}
-          className="flex flex-col items-center mb-8"
+          className="flex flex-col items-center justify-center mb-8 w-full"
         >
-          
+
           <img
             src={collegeLogo}
             alt="College Logo"
-            className="h-14 mb-3"
+            className="h-14 mb-3 mx-auto"
           />
-         
-          <p className="text-sm tracking-widest uppercase text-gray-400">
+
+          <p className="text-sm tracking-widest uppercase text-gray-400 text-center">
             Sir M. Visvesvaraya Institute of Technology, Bengaluru
           </p>
-          
+
         </motion.div>
 
         {/* Terminal prompt */}
@@ -63,7 +63,7 @@ export const Hero = () => {
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ delay: 0.4 }}
-          className="mb-6 inline-block bg-black/60 border border-orange-500/30 rounded-md px-4 py-2 font-mono text-sm text-orange-400"
+          className="mb-6 inline-flex items-center justify-center bg-black/60 border border-orange-500/30 rounded-md px-4 py-2 font-mono text-sm text-orange-400"
         >
           <span className="text-green-400">student@codeshack</span>
           <span className="text-white">:</span>
@@ -76,7 +76,7 @@ export const Hero = () => {
           initial={{ opacity: 0, y: 40 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
-          className="text-4xl sm:text-6xl md:text-7xl font-extrabold mb-6"
+          className="text-4xl sm:text-6xl md:text-7xl font-extrabold mb-6 text-center w-full"
         >
           &lt;<span className="text-orange-500">CODESHACK</span>/&gt;
         </motion.h1>
@@ -86,7 +86,7 @@ export const Hero = () => {
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ delay: 0.9 }}
-          className="text-lg sm:text-xl md:text-2xl text-gray-300 mb-8"
+          className="text-lg sm:text-xl md:text-2xl text-gray-300 mb-8 text-center w-full flex items-center justify-center"
         >
           <TextType
             text={[
@@ -106,7 +106,7 @@ export const Hero = () => {
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ delay: 1.2 }}
-          className="text-gray-400 max-w-3xl mx-auto mb-10 leading-relaxed"
+          className="text-gray-400 max-w-3xl mx-auto mb-10 leading-relaxed text-center px-4"
         >
           CODESHACK is the official student technical community fostering
           open-source culture, hands-on development, and problem-solving skills.
@@ -119,14 +119,14 @@ export const Hero = () => {
           initial={{ opacity: 0, scale: 0.9 }}
           animate={{ opacity: 1, scale: 1 }}
           transition={{ delay: 1.8 }}
-          className="mt-10 flex justify-center"
+          className="mt-10 flex items-center justify-center w-full"
         >
-          <svg width="300" height="140" viewBox="0 0 240 140" fill="none">
-            <rect x="10" y="20" width="250" height="100" rx="14" fill="#111" stroke="#f97316" />
-            <text x="30" y="55" fill="#f97316" fontFamily="monospace" fontSize="14">
+          <svg width="300" height="120" viewBox="0 0 300 120" fill="none" className="mx-auto">
+            <rect x="20" y="10" width="260" height="100" rx="14" fill="#111" stroke="#f97316" strokeWidth="2" />
+            <text x="40" y="50" fill="#f97316" fontFamily="monospace" fontSize="14">
               $ learn • build • contribute
             </text>
-            <text x="30" y="80" fill="#aaa" fontFamily="monospace" fontSize="12">
+            <text x="40" y="75" fill="#aaa" fontFamily="monospace" fontSize="12">
               linux | open-source | community
             </text>
           </svg>
diff --git a/src/assets/CodeCafe.jpg b/src/assets/CodeCafe.jpg
new file mode 100644
index 0000000..13c3a5d
Binary files /dev/null and b/src/assets/CodeCafe.jpg differ
diff --git a/src/assets/Hacknocturne.jpeg b/src/assets/Hacknocturne.jpeg
new file mode 100644
index 0000000..5cd1528
Binary files /dev/null and b/src/assets/Hacknocturne.jpeg differ
diff --git a/src/assets/Techvistara.jpg b/src/assets/Techvistara.jpg
new file mode 100644
index 0000000..53fca59
Binary files /dev/null and b/src/assets/Techvistara.jpg differ
diff --git a/src/assets/aiml.png b/src/assets/aiml.png
new file mode 100644
index 0000000..3dbeb8d
Binary files /dev/null and b/src/assets/aiml.png differ
diff --git a/src/assets/codecafeep2.png b/src/assets/codecafeep2.png
new file mode 100644
index 0000000..d652a4f
Binary files /dev/null and b/src/assets/codecafeep2.png differ
diff --git a/src/assets/csoc.jpeg b/src/assets/csoc.jpeg
new file mode 100644
index 0000000..2ad023d
Binary files /dev/null and b/src/assets/csoc.jpeg differ
diff --git a/src/assets/cybersecurity.png b/src/assets/cybersecurity.png
new file mode 100644
index 0000000..3d89f83
Binary files /dev/null and b/src/assets/cybersecurity.png differ
diff --git a/src/assets/dsa.png b/src/assets/dsa.png
new file mode 100644
index 0000000..10a0da7
Binary files /dev/null and b/src/assets/dsa.png differ
diff --git a/src/assets/eventimg1.png b/src/assets/eventimg1.png
new file mode 100644
index 0000000..4b79e68
Binary files /dev/null and b/src/assets/eventimg1.png differ
diff --git a/src/assets/eventimg2.jpg b/src/assets/eventimg2.jpg
new file mode 100644
index 0000000..9d85afe
Binary files /dev/null and b/src/assets/eventimg2.jpg differ
diff --git a/src/assets/hacknocturneCat1.jpeg b/src/assets/hacknocturneCat1.jpeg
new file mode 100644
index 0000000..45e7aba
Binary files /dev/null and b/src/assets/hacknocturneCat1.jpeg differ
diff --git a/src/assets/hacknocturneCat2.jpeg b/src/assets/hacknocturneCat2.jpeg
new file mode 100644
index 0000000..252ff6a
Binary files /dev/null and b/src/assets/hacknocturneCat2.jpeg differ
diff --git a/src/assets/laptopguide.png b/src/assets/laptopguide.png
new file mode 100644
index 0000000..2a8c1e4
Binary files /dev/null and b/src/assets/laptopguide.png differ
diff --git a/src/assets/uiux.png b/src/assets/uiux.png
new file mode 100644
index 0000000..07a873c
Binary files /dev/null and b/src/assets/uiux.png differ
diff --git a/src/assets/webdev.png b/src/assets/webdev.png
new file mode 100644
index 0000000..4d8edfd
Binary files /dev/null and b/src/assets/webdev.png differ
diff --git a/src/assets/winner1.png b/src/assets/winner1.png
new file mode 100644
index 0000000..507748a
Binary files /dev/null and b/src/assets/winner1.png differ
diff --git a/src/assets/winner2.png b/src/assets/winner2.png
new file mode 100644
index 0000000..9357fa0
Binary files /dev/null and b/src/assets/winner2.png differ
diff --git a/src/assets/winner3.png b/src/assets/winner3.png
new file mode 100644
index 0000000..f19a22e
Binary files /dev/null and b/src/assets/winner3.png differ
diff --git a/src/index.css b/src/index.css
index b01be23..95b7c53 100644
--- a/src/index.css
+++ b/src/index.css
@@ -15,16 +15,41 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-html, body {
+html,
+body {
   max-width: 100%;
   overflow-x: hidden;
 }
 
 .bg-tech-grid {
   background-image:
-    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
+    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
   background-size: 40px 40px;
   background-color: #0b0b0b;
 }
 
+/* Custom Scrollbar for Modal */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 8px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, rgba(167, 139, 250, 0.4), rgba(139, 92, 246, 0.4));
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, rgba(167, 139, 250, 0.6), rgba(139, 92, 246, 0.6));
+}
+
+/* Firefox scrollbar */
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(167, 139, 250, 0.4) rgba(0, 0, 0, 0.3);
+}
\ No newline at end of file