diff --git a/package-lock.json b/package-lock.json
index d8258316..87ec9bc7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,11 +18,13 @@
         "install": "^0.13.0",
         "lucide-react": "^0.365.0",
         "npm": "^10.5.2",
+        "pure-react-carousel": "^1.30.1",
         "react": "^18.2.0",
         "react-countup": "^6.5.3",
         "react-dom": "^18.2.0",
         "react-element-to-jsx-string": "^15.0.0",
         "react-fontawesome": "^1.7.1",
+        "react-icons": "^5.1.0",
         "react-intersection-observer": "^9.8.2",
         "react-router-dom": "^6.22.3",
         "react-router-hash-link": "^2.4.3",
@@ -2107,12 +2109,25 @@
         }
       }
     },
+    "node_modules/deep-freeze": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/deep-freeze/-/deep-freeze-0.0.1.tgz",
+      "integrity": "sha512-Z+z8HiAvsGwmjqlphnHW5oz6yWlOwu6EQfFTjmeTWlDeda3FS2yv3jhq35TX/ewmsnqB+RX2IdsIOyjJCQN5tg=="
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2163,6 +2178,14 @@
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
     },
+    "node_modules/equals": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/equals/-/equals-1.0.5.tgz",
+      "integrity": "sha512-wI15a6ZoaaXPv+55+Vh2Kqn3+efKRv8QPtcGTjW5xmanMnQzESdAt566jevtMZyt3W/jwLDTzXpMph5ECDJ2zg==",
+      "dependencies": {
+        "jkroso-type": "1"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
@@ -2970,6 +2993,11 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jkroso-type": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/jkroso-type/-/jkroso-type-1.1.1.tgz",
+      "integrity": "sha512-zZgay+fPG6PgMUrpyFADmQmvLo39+AZa7Gc5pZhev2RhDxwANEq2etwD8d0e6rTg5NkwOIlQmaEmns3draC6Ng=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -6160,6 +6188,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/pure-react-carousel": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/pure-react-carousel/-/pure-react-carousel-1.30.1.tgz",
+      "integrity": "sha512-B1qi62hZk0OFqRR4cTjtgIeOn/Ls5wo+HsLtrXT4jVf5et8ldBHSt+6LsYRJN86Or8dm+XbnJNEHy6WDJ0/DQw==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "deep-freeze": "0.0.1",
+        "deepmerge": "^2.2.1",
+        "equals": "^1.0.5",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "15.x || 16.x || 17.x || 18.x",
+        "react-dom": "15.x || 16.x || 17.x || 18.x"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -6241,6 +6285,14 @@
         "react": ">=0.12.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.1.0.tgz",
+      "integrity": "sha512-D3zug1270S4hbSlIRJ0CUS97QE1yNNKDjzQe3HqY0aefp2CBn9VgzgES27sRR2gOvFK+0CNx/BW0ggOESp6fqQ==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-intersection-observer": {
       "version": "9.8.2",
       "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.8.2.tgz",
diff --git a/package.json b/package.json
index 98ec413f..56225dfb 100644
--- a/package.json
+++ b/package.json
@@ -23,11 +23,13 @@
     "install": "^0.13.0",
     "lucide-react": "^0.365.0",
     "npm": "^10.5.2",
+    "pure-react-carousel": "^1.30.1",
     "react": "^18.2.0",
     "react-countup": "^6.5.3",
     "react-dom": "^18.2.0",
     "react-element-to-jsx-string": "^15.0.0",
     "react-fontawesome": "^1.7.1",
+    "react-icons": "^5.1.0",
     "react-intersection-observer": "^9.8.2",
     "react-router-dom": "^6.22.3",
     "react-router-hash-link": "^2.4.3",
@@ -54,4 +56,3 @@
     "vite": "^5.2.0"
   }
 }
-
diff --git a/public/ashtesham.jpeg b/public/ashtesham.jpeg
new file mode 100644
index 00000000..8121f545
Binary files /dev/null and b/public/ashtesham.jpeg differ
diff --git a/public/avantika-img.jpg b/public/avantika-img.jpg
new file mode 100644
index 00000000..5ea28950
Binary files /dev/null and b/public/avantika-img.jpg differ
diff --git a/public/harshit-img.jpg b/public/harshit-img.jpg
new file mode 100644
index 00000000..a0179ffb
Binary files /dev/null and b/public/harshit-img.jpg differ
diff --git a/public/logo.jpg b/public/logo.jpg
index c4478fcc..3c234cd2 100644
Binary files a/public/logo.jpg and b/public/logo.jpg differ
diff --git a/public/rakeshsaw.jpeg b/public/rakeshsaw.jpeg
new file mode 100644
index 00000000..cae8032c
Binary files /dev/null and b/public/rakeshsaw.jpeg differ
diff --git a/public/vinod.jpg b/public/vinod.jpg
new file mode 100644
index 00000000..44647bf2
Binary files /dev/null and b/public/vinod.jpg differ
diff --git a/src/Sections/AboutUs.tsx b/src/Sections/AboutUs.tsx
index c816c375..f04513fe 100644
--- a/src/Sections/AboutUs.tsx
+++ b/src/Sections/AboutUs.tsx
@@ -1,34 +1,15 @@
 export const AboutUs = () => {
   return (
-    <div
-      id="aboutus"
-      className="flex flex-col items-center justify-center bg-black w-screen min-h-screen"
-    >
-      <div className="mt-20 md:mt-0">
-        <h2 className="text-white text-3xl font-bold md:mb-8 ">About Us</h2>
+    <div id="aboutus" className="bg-black flex items-center justify-center w-screen">
+      <div className="max-w-4xl mt-20 px-4 lg:px-8 md:mt-30">
+        <h2 className="text-white text-3xl font-bold mb-8 text-center lg:mb-4">About Us</h2> {/* Adjusted margin for larger screens */}
         <div className="p-1 rounded-lg shadow-lg"></div>
-      </div>
-      <div className="flex flex-col items-center mt-8 px-4 lg:px-8">
-        <div className="flex flex-wrap items-center justify-between gap-x-12 gap-y-8 w-full lg:flex-nowrap">
-          <div className="flex-1">
-            <h2 className="text-2xl mb-4 text-center text-neutral-200">
-              Welcome to the Cloud Native Community Group - New Delhi. We are
-              the New Delhi chapter of the Cloud Native Community Groups (CNCG),
-              operating under the{" "}
-              <span className="text-[#0086FF]">
-                Cloud Native Computing Foundation
-              </span>{" "}
-              (CNCF). Our focus is on knowledge sharing and exploring the
-              potential of cloud native technologies. Through our meetups,
-              educational sessions, and practical activities, we aim to empower
-              individuals in navigating the cloud native ecosystem. We are
-              dedicated to hosting at least one meetup every month and take
-              pride in being recognized as the leading CNCG community worldwide.
-              We prioritize creating an inclusive learning environment, adhering
-              to the CNCF Code of Conduct to ensure everyone feels welcome and
-              respected.
-            </h2>
-          </div>
+        <div className="mt-8">
+          <h2 className="text-xl mb-4 text-neutral-200 text-center leading-relaxed">
+            Welcome to the Cloud Native Community Group - New Delhi. We are the New Delhi chapter of the Cloud Native Community Groups (CNCG), operating under the{" "}
+            <span className="text-[#0086FF]">Cloud Native Computing Foundation</span>{" "}
+            (CNCF). Our focus is on knowledge sharing and exploring the potential of cloud native technologies. Through our meetups, educational sessions, and practical activities, we aim to empower individuals in navigating the cloud native ecosystem. We are dedicated to hosting at least one meetup every month and take pride in being recognized as the leading CNCG community worldwide. We prioritize creating an inclusive learning environment, adhering to the CNCF Code of Conduct to ensure everyone feels welcome and respected.
+          </h2>
         </div>
       </div>
     </div>
diff --git a/src/Sections/Developers.tsx b/src/Sections/Developers.tsx
index ba43da63..03af0ea2 100644
--- a/src/Sections/Developers.tsx
+++ b/src/Sections/Developers.tsx
@@ -35,10 +35,26 @@ export const Developers = () => {
       imageUrl: "./daksh-img.jpg",
       role: "Designer",
     },
+    {
+      name: "Avantika Sharma",
+      linkedin: "https://www.linkedin.com/in/avantika-sharma-a65b17250/",
+      twitter: "https://x.com/Avantika230703?t=TDlZBwUMdGtK1jJXDR0Bpg&s=09",
+      github: "https://github.com/AvantikaSharma2307",
+      imageUrl: "./avantika-img.jpg",
+      role: "Developer",
+    },
+    {
+      name: "Harshit Rawat",
+      linkedin: "https://www.linkedin.com/in/harshit-rawat-0a6944274?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app",
+      twitter: "https://x.com/harshit_rwt?t=ja0bPAy3eDRRpLvJntqwbw&s=09",
+      github: "https://github.com/itsharshitrwt",
+      imageUrl: "./harshit-img.jpg",
+      role: "Developer",
+    },
   ];
   return (
-    <div className="flex flex-col items-center justify-center bg-black w-screen h-screen">
-      <div>
+    <div className="flex flex-col items-center justify-center bg-black w-screen">
+      <div className="mt-20 lg:mt-20">
         <h2 className="text-white text-3xl font-bold text-center mb-20">
           Developers
         </h2>
@@ -52,7 +68,7 @@ export const Developers = () => {
             image="/"
           ></InfiniteMovingCards>
         </div>
-        <div className="flex items-center justify-center md:mt-20">
+        <div className="flex items-center justify-center mt-10 mb-10 md:mt-20">
           <Link to="https://github.com/cncgnd">
             <button className="bg-pink rounded-xl p-4 text-white font-bold transition duration-300 ease-in-out hover:bg-opacity-80 hover:text-opacity-80">
               Want to Contribute ?
diff --git a/src/Sections/Events.tsx b/src/Sections/Events.tsx
index 374f325c..903239ab 100644
--- a/src/Sections/Events.tsx
+++ b/src/Sections/Events.tsx
@@ -2,8 +2,8 @@ import { HoverEffect } from "@/components/ui/card-hover-effect";
 
 export const Events = () => {
   return (
-    <div className="flex flex-col items-center justify-center bg-black w-screen h-full">
-      <div>
+    <div className="flex flex-col items-center justify-center bg-black w-screen">
+      <div className="mt-20 md:mt-30">
         <h2
           className="text-white text-3xl font-bold mb-4 text-center mt-2"
           id="events"
diff --git a/src/Sections/Home.tsx b/src/Sections/Home.tsx
index b10276e6..bb57a8d8 100644
--- a/src/Sections/Home.tsx
+++ b/src/Sections/Home.tsx
@@ -11,12 +11,12 @@ import { Team } from "./Team";
 
 import { Sponsors } from "./Sponsors";
 import { ScrollToTopButton } from "@/components/ScrollToTopButton";
-import { Talks } from "./Talks";
+import Talk from "./Talks";
 import { Link } from "react-router-dom";
 
 export const Home = () => {
   return (
-    <div className="h-full w-screen flex flex-col">
+    <div className="h-full w-screen flex flex-col bg-black">
       <Header></Header>
 
       <div
@@ -56,7 +56,7 @@ export const Home = () => {
         <Sponsors />
       </div>
       <div>
-        <Talks />
+        <Talk />
       </div>
       <div>
         <Team></Team>
diff --git a/src/Sections/Sponsors.tsx b/src/Sections/Sponsors.tsx
index 1a88972f..191fc8f6 100644
--- a/src/Sections/Sponsors.tsx
+++ b/src/Sections/Sponsors.tsx
@@ -34,7 +34,7 @@ export const Sponsors = () => {
   }, []);
 
   return (
-    <div className="flex flex-col items-center justify-center bg-black w-screen h-full">
+    <div className="flex flex-col items-center justify-center bg-black w-screen">
       <div className="">
         <h2 className="text-white text-3xl font-bold mb-20 text-center mt-20" id="sponsors">Our Sponsors</h2>
         <div className="p-4 rounded-lg shadow-lg grid sm:grid-cols-2 md:grid-cols-4 gap-20 grid-container" ref={sponsorRef}>
diff --git a/src/Sections/Stats.tsx b/src/Sections/Stats.tsx
index 3a264912..abff2524 100644
--- a/src/Sections/Stats.tsx
+++ b/src/Sections/Stats.tsx
@@ -43,10 +43,10 @@ export const Stats = () => {
 
   return (
     <div
-      className="flex flex-col items-center justify-center bg-black w-screen h-full"
+      className="flex flex-col items-center justify-center bg-black w-screen"
       ref={ref}
     >
-      <h2 className="text-white text-3xl font-bold mb-16 mr-5 mt-[150px]">
+      <h2 className="text-white text-3xl font-bold mb-16 mr-5 mt-20 lg:mt-30">
         Stats
       </h2>
       <div className="flex flex-row justify-between w-full max-w-[1200px] px-5 md:px-20 py-5">
diff --git a/src/Sections/Talks.tsx b/src/Sections/Talks.tsx
index 2afa35ea..da671a9f 100644
--- a/src/Sections/Talks.tsx
+++ b/src/Sections/Talks.tsx
@@ -1,12 +1,109 @@
-export const Talks = () => {
+import React from "react";
+import RotatingCard from "@/components/ui/rotating-card";
+import { RiArrowLeftSLine, RiArrowRightSLine } from "react-icons/ri";
+
+const items = [
+  {
+    imageurl: "./ashish.JPG",
+    title: "Prometheus in Action: Get Started with Monitoring by Ashish Kumar ",
+    description:
+      "Ashish Kumar demonstrates Prometheus, showcasing its query language, operational ease, and seamless service discovery integration. ",
+    videoUrl: "https://youtu.be/77zhEy-J4po",
+    altText: "Picture of Ashish Speaking",
+  },
+  {
+    imageurl: "./ashtesham.jpeg",
+    title: "Message Queues Made Easy with RabbitMQ & Python by Ahtesham Zaidi",
+    description:
+      "A deep dive into the world of messaging queues, discussing their importance, the role of message brokers, and the transition from traditional approaches to modern, decoupled systems.",
+    videoUrl: "https://youtu.be/Zklx7ZB9LW4",
+    altText: "Picture of Ashtesham Speaking",
+  },
+  {
+    imageurl: "./vinod.jpg",
+    title: "Scaling Apps with KEDA by Vinod Kumar",
+    description:
+      "This session takes a comprehensive look at 'Scaling apps with KEDA' in Kubernetes environments. ",
+    videoUrl: "https://youtu.be/SdCwTV_J-cI",
+    altText: "Event Video Thumbnail",
+  },
+  {
+    imageurl: "./rakeshsaw.jpeg",
+    title:
+      "Kubernetes Secrets Management using External Secret Operator (ESO) by Rakesh Saw ",
+    description:
+      "Rakesh Saw delves into the intricacies of managing Kubernetes secrets securely and efficiently using the External Secret Operator (ESO).",
+    videoUrl: "https://youtu.be/9PQwgURcqIw",
+    altText: "Rakesh Saw Speaking",
+  },
+];
+
+const Talks = () => {
+  const [currentSlide, setCurrentSlide] = React.useState(0);
+
+  const handleNext = () => {
+    setCurrentSlide((prevSlide) => Math.min(prevSlide + 1, items.length - 1));
+  };
+
+  const handlePrev = () => {
+    setCurrentSlide((prevSlide) => Math.max(prevSlide - 1, 0));
+  };
+
   return (
-    <div className="flex flex-col items-center justify-center bg-black w-screen h-full">
+    <div
+      id="talks"
+      className="flex flex-col items-center justify-center bg-black w-screen"
+    >
       <div>
-        <h2 className="text-white text-3xl font-bold mb-20 mt-[150px]">
+        <h2 className="text-white text-3xl font-bold pt-30 pb-10 lg:mt-40 lg:mb-10 mt-9">
           Previous Talks
         </h2>
-        <div className="p-1 rounded-lg shadow-lg"></div>
+      </div>
+
+      <div className="relative w-full max-w-5xl overflow-hidden">
+        <div className="absolute top-1/2 transform -translate-y-1/2 left-0 z-10">
+          <button
+            className={`px-4 py-2 bg-pink text-white rounded-full focus:outline-none hover:bg-pink-600 ${
+              currentSlide === 0 ? "opacity-50 cursor-not-allowed" : ""
+            }`}
+            onClick={handlePrev}
+            disabled={currentSlide === 0}
+          >
+            <RiArrowLeftSLine size={24} />
+          </button>
+        </div>
+        <div className="absolute top-1/2 transform -translate-y-1/2 right-0 z-10">
+          <button
+            className={`px-4 py-2 bg-pink text-white rounded-full focus:outline-none hover:bg-pink-600 ${
+              currentSlide >= items.length - 1
+                ? "opacity-50 cursor-not-allowed"
+                : ""
+            }`}
+            onClick={handleNext}
+            disabled={currentSlide >= items.length - 1}
+          >
+            <RiArrowRightSLine size={24} />
+          </button>
+        </div>
+        <div
+          className="flex transition-transform duration-500 ease-in-out"
+          style={{ transform: `translateX(-${currentSlide * 100}%)` }}
+        >
+          {items.map((item, index) => (
+            <div key={index} className="w-full flex-shrink-0">
+              <RotatingCard
+                title={item.title}
+                imageUrl={item.imageurl}
+                description={item.description}
+                altText={item.altText}
+                videoUrl={item.videoUrl}
+              />
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );
 };
+
+export default Talks;
diff --git a/src/Sections/Team.tsx b/src/Sections/Team.tsx
index a12d467c..d85495a1 100644
--- a/src/Sections/Team.tsx
+++ b/src/Sections/Team.tsx
@@ -35,12 +35,12 @@ export const Team = () => {
       imageUrl: "./Harsh.jpeg",
       linkedin: "https://www.linkedin.com/in/its-harsshhh/",
       twitter: "https://twitter.com/Choley_Bhature",
-      role: "Organizer",
+      role: "Design Lead",
     },
   ];
   return (
-    <div id="team" className="flex flex-col items-center justify-center bg-black w-screen h-screen">
-      <div>
+    <div id="team" className="flex flex-col items-center justify-center bg-black w-screen">
+      <div className="mt-20 lg:mt-20">
         <h2 className="text-white text-3xl font-bold text-center mb-20">
           Our Team
         </h2>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 5d0ea1ac..082c54ec 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -32,7 +32,7 @@ export const Footer = () => {
                 </a>
               </div>
             </div>
-            <div className="md:ml-20 flex flex-col">
+            <div className="md:ml-20 flex flex-col ml-28">
               <Link to="https://community.cncf.io/new-delhi/">
                 <button className="bg-pink font-bold text-white p-4 px-9 rounded-xl">
                   Join Now
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 6c0685f9..3e3084d4 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -38,19 +38,21 @@ export const Header = () => {
 
           <a
             href="/"
-            className="flex items-center space-x-2 rtl:space-x-reverse"
+            className="flex items-center space-x-22 rtl:space-x-reverse md:mr-0 mr-9"
           >
             <img
               src="./logo.jpg"
               alt="Logo"
               width={90}
-              height={90}
-              className="rounded-full"
+              height={90} 
+              className="md:mr-0 mr-4 sm:mr-0"
+              
             />
-            <span className="self-center text-xl font-bold whitespace-nowrap dark:text-white flex flex-col">
-              <p>CNCG NEW DELHI</p>
+            <span className="self-center text-xl text-md font-bold whitespace-nowrap dark:text-white flex flex-col md:mr-0 md:ml-0 ml-1">
+              <p>&nbsp;CNCG NEW DELHI</p>
             </span>
           </a>
+
           <div
             className={`hidden md:flex md:items-center md:justify-between w-full md:w-auto md:order-1`}
             id="navbar-sticky"
@@ -80,6 +82,14 @@ export const Header = () => {
                   Team
                 </button>
               </li>
+              <li>
+                <button
+                  onClick={(e) => scrollToComponent("talks", e)}
+                  className="block py-2 px-3 text-gray-900 rounded md:hover:bg-transparent md:hover:text-blue md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+                >
+                  Talks
+                </button>
+              </li>
               <li>
                 <button
                   onClick={(e) => scrollToComponent("sponsors", e)}
@@ -92,7 +102,7 @@ export const Header = () => {
           </div>
           <button
             onClick={() => setShowSidebar(!showSidebar)}
-            className="md:hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink p-2"
+            className="md:hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink mr-3"
           >
             {showSidebar ? (
               <svg
@@ -126,7 +136,7 @@ export const Header = () => {
       </nav>
       {showSidebar && (
         <div className="md:hidden fixed inset-0 bg-white dark:bg-gray-900 z-30">
-          <ul className="flex flex-col p-4 md:p-0 mt-4 border border-gray-100 bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white ">
+          <ul className="flex flex-col p-4 md:p-0 mt-4 bg-white md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white ">
             <li>
               <button
                 onClick={(e) => {
@@ -185,7 +195,7 @@ export const Header = () => {
           <button onClick={() => setShowSidebar(!showSidebar)}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              className="h-8 w-8 text-black dark:text-white"
+              className="h-8 w-8 text-black dark:text-white mt-3 ml-3"
               viewBox="0 0 20 20"
               fill="currentColor"
             >
diff --git a/src/components/ui/infinite-moving-cards.tsx b/src/components/ui/infinite-moving-cards.tsx
index 1c282133..5fbaf4db 100644
--- a/src/components/ui/infinite-moving-cards.tsx
+++ b/src/components/ui/infinite-moving-cards.tsx
@@ -79,21 +79,21 @@ export const InfiniteMovingCards = ({
     <div
       ref={containerRef}
       className={cn(
-        "scroller relative z-20 max-w-[1400px] overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_5%,white_90%,transparent)]",
+        "scroller relative z-20 max-w-[350px] overflow-hidden md:[mask-image:linear-gradient(to_right,transparent,white_5%,white_90%,transparent)] md:max-w-[1400px] lg:max-w-[1400px] xl:max-w-[1400px] ",
         className
       )}
     >
       <ul
         ref={scrollerRef}
         className={cn(
-          "flex min-w-full shrink-0 gap-4 py-4 w-max flex-nowrap",
+          "flex shrink-0 gap-4 md:py-4 md:w-max flex-nowrap w-min md:h-[350px]",
           start && "animate-scroll",
           pauseOnHover && "hover:[animation-play-state:paused]"
         )}
       >
         {items.map((item) => (
           <li
-            className="bg-white p-5 flex flex-col items-center justify-center mb-5 rounded-2xl py-6 relative w-[300px]"
+            className="bg-white md:p-5 p-10 flex flex-col items-center justify-center mb-5 rounded-2xl py-6 relative w-100px md:w-[300px]"
             key={item.name}
           >
             <div className="rounded-full overflow-hidden w-20 h-20 flex-shrink-0 flex justify-center items-center ml-[10px]">
@@ -105,17 +105,18 @@ export const InfiniteMovingCards = ({
             </div>
 
             <blockquote className="text-center">
-              <div className="relative z-20 mt-6 flex flex-col items-center justify-center mb-5">
-                <span className="leading-[1.6] text-gray-700 font-bold text-xl">
+
+              <div className="md:relative md:z-20 md:mt-6 flex flex-col items-center justify-center md:mb-5">
+                <span className="leading-[1.6] text-gray-700 font-bold md:text-xl text-sm">
                   {item.name}
                 </span>
-                <span className="leading-[1.6] text-gray-500 text-sm mb-5">
+                <span className="leading-[1.6] text-gray-500 md:text-sm md:mb-5">
                   {item.role}
                 </span>
 
                 {item.linkedin && (
                   <a
-                    className="leading-[1.6] text-gray-700 text-lg hover:text-blue"
+                    className="leading-[1.6] text-gray-700 md:text-lg hover:text-blue"
                     href={item.linkedin}
                   >
                     <FontAwesomeIcon icon={faLinkedin} className="mr-2" />
@@ -123,7 +124,7 @@ export const InfiniteMovingCards = ({
                   </a>
                 )}
                 {item.twitter && (<a
-                  className="leading-[1.6] text-gray-700 text-lg hover:text-blue"
+                  className="leading-[1.6] text-gray-700 md:text-lg hover:text-blue"
                   href={item.twitter}
                 >
                   <FontAwesomeIcon icon={faTwitter} className="mr-2" />
@@ -131,7 +132,7 @@ export const InfiniteMovingCards = ({
                 </a>)}
 
                 {item.github && (<a
-                  className="leading-[1.6] text-gray-700 text-lg hover:text-blue"
+                  className="leading-[1.6] text-gray-700 md:text-lg hover:text-blue"
                   href={item.github}
                 >
                   <FontAwesomeIcon icon={faGithub} className="mr-2" />
@@ -147,3 +148,4 @@ export const InfiniteMovingCards = ({
     </div>
   );
 };
+
diff --git a/src/components/ui/rotating-card.tsx b/src/components/ui/rotating-card.tsx
new file mode 100644
index 00000000..2a30ef56
--- /dev/null
+++ b/src/components/ui/rotating-card.tsx
@@ -0,0 +1,45 @@
+const RotatingCard = ({imageUrl, description, altText, videoUrl, title} : {
+  imageUrl: string,
+  description: string,
+  videoUrl: string,
+  altText: string, 
+  title: string
+}) => {
+  return (
+    <section
+      className="flex justify-center items-center gap-x-16 text-white rounded-large " 
+    >
+      <div
+        className="md:w-[300px] md:h-[420px] h-[220px] w-[250px] bg-transparent cursor-pointer group perspective rounded-large"
+      >
+        <div
+          className="relative preserve-3d group-hover:my-rotate-y-180 w-full h-full duration-1000 rounded-large"
+        >
+          <div className="absolute backface-hidden  w-full h-full rounded-large">
+            <img src={imageUrl} alt={altText} className="w-full h-full object-cover rounded-large" style={{ borderRadius: "10px" }} />
+          </div>
+          <div
+            className="absolute my-rotate-y-180 backface-hidden w-full h-full bg-gray-100 overflow-hidden rounded-large"
+            style={{ borderRadius: "10px" }} 
+          >
+            <div className="text-center flex flex-col items-center justify-start h-full text-gray-800 pt-6 px-2 pb-24">
+              <h1 className="md:text-3xl text-sm font-semibold">{title}</h1>
+              <div className="flex items-center">
+                <p className="text-black text-center px-4 py-2 pt-4 text-wrap truncate">{description}</p>
+              </div>
+              <a
+                href={videoUrl}
+                className="px-6 py-2 md:font-semibold text-white rounded-full absolute -bottom-20 delay-500 group-hover:bottom-10 scale-0 group-hover:scale-125 bg-pink transition duration-300 ease-in-out hover:text-opacity-80"
+              >
+                Watch Now
+              </a>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default RotatingCard;
diff --git a/src/index.css b/src/index.css
index b5c61c95..bd6213e1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 06ebd766..c26c855f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,27 @@
 /** @type {import('tailwindcss').Config} */
 const colors = require("tailwindcss/colors");
+const plugin = require("tailwindcss/plugin");
 const {
   default: flattenColorPalette,
 } = require("tailwindcss/lib/util/flattenColorPalette");
- 
+
+const eventCardUtilities = plugin(function ({ addUtilities }) {
+  addUtilities({
+    ".my-rotate-y-180": {
+      transform: "rotateY(180deg)",
+    },
+    ".preserve-3d": {
+      transformStyle: "preserve-3d",
+    },
+    ".perspective": {
+      perspective: "1000px",
+    },
+    ".backface-hidden": {
+      backfaceVisibility: "hidden",
+    },
+  });
+});
+
 module.exports = {
   darkMode: ["class"],
   content: [
@@ -90,7 +108,7 @@ module.exports = {
     },
   },
   plugins: [require("tailwindcss-animate")],
-  plugins: [addVariablesForColors],
+  plugins: [addVariablesForColors, eventCardUtilities],
   
 }