diff --git a/src/app/(site)/events/page.tsx b/src/app/(site)/events/page.tsx
index 72824cc..177f371 100644
--- a/src/app/(site)/events/page.tsx
+++ b/src/app/(site)/events/page.tsx
@@ -1,4 +1,4 @@
-import EventCard from "@/components/events/event-card";
+import { CustomCarousel } from "@/components/CustomCarousel";
 import SlideShow from "@/components/events/slide-show";
 import { BackgroundGradient } from "@/components/ui/background-gradient";
 import Image from "next/image";
@@ -32,12 +32,10 @@ const Events = async ({}: Props) => {
         builds a strong tech community.
       </h2>
       <div className="grid grid-cols-1  md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {eventList.map((event, idx: number) => (
-          <EventCard key={idx} event={event} />
-        ))}
+        <CustomCarousel events={eventList} />
       </div>
       <div className="w-full flex mt-10 mb-5 text-white justify-center font-bold text-3xl md:text-5xl items-center">
-        <span>Our Gallary</span>
+        <span>Our Gallery</span>
         <span className="bg-gradient-to-r from-[#31B553] to-[#0AA294] bg-clip-text text-transparent ml-2">
           .
         </span>
@@ -47,49 +45,4 @@ const Events = async ({}: Props) => {
   );
 };
 
-// const eventList = [
-//   {
-//     title: "Make things float in air",
-//     slug: "make-things-float-in-air",
-//     description: "Hover over this card to unleash the power of CSS perspective",
-//     image: "/events/event.png",
-//   },
-//   {
-//     title: "Make things float in air",
-//     slug: "make-things-float-in-air",
-//     description: "Hover over this card to unleash the power of CSS perspective",
-//     image: "/events/event.png",
-//   },
-//   {
-//     title: "Make things float in air",
-//     slug: "make-things-float-in-air",
-//     description: "Hover over this card to unleash the power of CSS perspective",
-//     image: "/events/event.png",
-//   },
-//   {
-//     title: "Make things float in air",
-//     slug: "make-things-float-in-air",
-//     description: "Hover over this card to unleash the power of CSS perspective",
-//     image: "/events/event.png",
-//   },
-//   {
-//     title: "Make things float in air",
-//     slug: "make-things-float-in-air",
-//     description: "Hover over this card to unleash the power of CSS perspective",
-//     image: "/events/event.png",
-//   },
-//   {
-//     title: "Make things float in air",
-//     slug: "make-things-float-in-air",
-//     description: "Hover over this card to unleash the power of CSS perspective",
-//     image: "/events/event.png",
-//   },
-//   {
-//     title: "Make things float in air",
-//     slug: "make-things-float-in-air",
-//     description: "Hover over this card to unleash the power of CSS perspective",
-//     image: "/events/event.png",
-//   },
-// ];
-
-export default Events;
+export default Events;
\ No newline at end of file
diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
index 3db8730..8b20f60 100644
--- a/src/app/(site)/page.tsx
+++ b/src/app/(site)/page.tsx
@@ -1,7 +1,7 @@
 import AboutUs from "@/components/home/about-us";
 import Domains from "@/components/home/domains";
 import Landing from "@/components/home/landing";
-import OurEvents from "@/components/home/our-events";
+import CustomCarousel from "@/components/CustomCarousel";
 import { getAllEvents } from "@/sanity/data/home-data";
 
 export default async function Home() {
@@ -11,7 +11,7 @@ export default async function Home() {
       <Landing />
       <AboutUs />
       <Domains />
-      <OurEvents events={events}/>
+      <CustomCarousel event={events}/>
     </div>
   );
 }
diff --git a/src/components/CustomCarousel.tsx b/src/components/CustomCarousel.tsx
new file mode 100644
index 0000000..0fa75b7
--- /dev/null
+++ b/src/components/CustomCarousel.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import React, { useEffect, useState, useRef } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { Event } from "@/sanity/schemas/event-schema";
+import { CardContainer, CardBody, CardItem } from "./ui/3d-card";
+
+type Props = {
+  event: Event[];
+};
+
+const CustomCarousel: React.FC<Props> = ({ event }) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isHovered, setIsHovered] = useState<number | null>(null);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const startCarousel = () => {
+    intervalRef.current = setInterval(() => {
+      setActiveIndex((prevIndex) =>
+        prevIndex === event.length - 1 ? 0 : prevIndex + 1
+      );
+    }, 1000);
+  };
+
+  const stopCarousel = () => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+  };
+
+  const handleMouseEnter = (index: number) => {
+    setIsHovered(index);
+    stopCarousel();
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(null);
+    startCarousel();
+  };
+
+  useEffect(() => {
+    startCarousel();
+    return () => stopCarousel();
+  }, []);
+
+  return (
+    <>
+      <div className="h-full w-fill flex flex-col items-center justify-center gap-4">
+        <div className="text-5xl font-bold text-center text-white flex flex-col items-center justify-center">
+          <h1 className="bg-gradient-to-r from-[#31B553] to-[#0AA294] bg-clip-text text-transparent">
+            Our Events
+          </h1>
+          <Image
+            src="hero-sep.svg"
+            height={10}
+            width={300}
+            alt="Hero Separator"
+            className="mt-5 pl-14 items-center justify-center justify-items-center place-items-center"
+          />
+        </div>
+      </div>
+      <div className="flex flex-wrap justify-center">
+        {event.map((evt, index) => (
+          <CardContainer
+            // key={evt._id}
+            className={`${
+              index === isHovered || (isHovered === null && index === activeIndex)
+                ? "scale-110 z-10"
+                : "scale-100 opacity-70 z-0"
+            } transition-transform duration-300 ease-in-out`}
+            containerClassName="m-2"
+            onMouseEnter={() => handleMouseEnter(index)}
+            onMouseLeave={handleMouseLeave}
+          >
+            <Link href={`/events/${evt.slug}`}>
+              <CardBody className="relative">
+                <Image
+                  src={evt.poster}
+                  alt={evt.title}
+                  width={320}
+                  height={320}
+                  className="object-cover w-full h-full"
+                />
+                <CardItem
+                  className="absolute bottom-2 left-2 text-white text-lg font-semibold"
+                  translateZ={50}
+                >
+                  {evt.title}
+                </CardItem>
+              </CardBody>
+            </Link>
+          </CardContainer>
+        ))}
+    </div>
+    </>
+  );
+};
+
+export default CustomCarousel;
diff --git a/src/components/events/event-card.tsx b/src/components/events/event-card.tsx
index 6decb85..97a5804 100644
--- a/src/components/events/event-card.tsx
+++ b/src/components/events/event-card.tsx
@@ -4,7 +4,6 @@ import Image from "next/image";
 import React from "react";
 import { CardBody, CardContainer, CardItem } from "../ui/3d-card";
 import Link from "next/link";
-import { Meteors } from "../ui/meteors";
 import { Event } from "@/sanity/schemas/event-schema";
 
 type Props = {
@@ -13,21 +12,26 @@ type Props = {
 
 export default function EventCard({ event }: Props) {
   return (
-    <CardContainer className="inter-var w-[100%]">
-      <div className="absolute  h-full w-full bg-gradient-to-r from-[#31B553] to-[#0AA294] transform scale-[0.80] rounded-full blur-3xl" />
-      <CardBody className="relative  inset-0 bg-[#242424] z-40 w-auto sm:w-[30rem] h-auto rounded-xl p-6  ">
+    <CardContainer className="inter-var w-[100%] group">
+      {/* Highlighted Change: Updated the background scale effect */}
+      <div className="absolute h-full w-full bg-gradient-to-r from-[#31B553] to-[#0AA294] transform scale-[0.80] rounded-full blur-3xl transition-transform duration-300 ease-in-out group-hover:scale-[1.2]" />
+      
+      <CardBody className="relative inset-0 bg-[#242424] z-40 w-auto sm:w-[30rem] h-auto rounded-xl p-6 transition-transform duration-300 ease-in-out group-hover:scale-[1.2]">
         <CardItem translateZ="100" className="w-full mt-4">
-          <Image
-            src={event.poster}
-            height="1000"
-            width="1000"
-            className="h-60 w-full object-cover rounded-xl group-hover/card:shadow-xl"
-            alt={`${event.title} image`}
-          />
+          <div className="relative overflow-hidden rounded-xl">
+            {/* Highlighted Change: Updated the image scale effect */}
+            <Image
+              src={event.poster}
+              height="1000"
+              width="1000"
+              className="h-60 w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-[1.2] rounded-xl group-hover:shadow-xl"
+              alt={`${event.title} image`}
+            />
+          </div>
         </CardItem>
         <div className="flex justify-end items-end mt-6">
-          <CardItem translateZ={60} className="rounded-xl  text-xs font-bold">
-            <button className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6  text-white inline-block">
+          <CardItem translateZ={60} className="rounded-xl text-xs font-bold">
+            <button className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6 text-white inline-block">
               <span className="absolute inset-0 overflow-hidden rounded-full">
                 <span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
               </span>
@@ -53,7 +57,6 @@ export default function EventCard({ event }: Props) {
             </button>
           </CardItem>
         </div>
-        {/* <Meteors number={40} /> */}
       </CardBody>
     </CardContainer>
   );
diff --git a/src/components/ui/3d-card.tsx b/src/components/ui/3d-card.tsx
index aa868ac..3893983 100644
--- a/src/components/ui/3d-card.tsx
+++ b/src/components/ui/3d-card.tsx
@@ -9,6 +9,7 @@ import React, {
   useEffect,
 } from "react";
 
+// Context to manage whether the mouse is hovering over a card
 const MouseEnterContext = createContext<
   [boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined
 >(undefined);
@@ -17,10 +18,14 @@ export const CardContainer = ({
   children,
   className,
   containerClassName,
+  onMouseEnter, // Highlight: Added prop to handle mouse enter
+  onMouseLeave, // Highlight: Added prop to handle mouse leave
 }: {
   children?: React.ReactNode;
   className?: string;
   containerClassName?: string;
+  onMouseEnter?: () => void; // Highlight: Added prop to handle mouse enter
+  onMouseLeave?: () => void; // Highlight: Added prop to handle mouse leave
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [isMouseEntered, setIsMouseEntered] = useState(false);
@@ -36,14 +41,17 @@ export const CardContainer = ({
 
   const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
     setIsMouseEntered(true);
+    if (onMouseEnter) onMouseEnter(); // Highlight: Trigger the passed onMouseEnter callback
     if (!containerRef.current) return;
   };
 
   const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (onMouseLeave) onMouseLeave(); // Highlight: Trigger the passed onMouseLeave callback
     if (!containerRef.current) return;
     setIsMouseEntered(false);
     containerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)`;
   };
+
   return (
     <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>
       <div
@@ -84,10 +92,10 @@ export const CardBody = ({
 }) => {
   return (
     <div
-    className={cn(
-      "h-80 w-80 [transform-style:preserve-3d]  [&>*]:[transform-style:preserve-3d] shadow-2xl border-2 text-justify border-gray-800",
-      className
-    )}
+      className={cn(
+        "h-80 w-80 [transform-style:preserve-3d]  [&>*]:[transform-style:preserve-3d] shadow-2xl border-2 text-justify border-gray-800",
+        className
+      )}
     >
       {children}
     </div>