diff --git a/package.json b/package.json
index b60061b..eed8ed7 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "baffle": "^0.3.6",
     "framer-motion": "^11.5.4",
+    "gsap": "^3.12.5",
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
diff --git a/src/App.jsx b/src/App.jsx
index 3a8ad35..0d7a104 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,6 +7,7 @@ import Navbar from "@/components/Navbar/index";
 import Cursor from "./components/Cursor";
 import CursorVariantProvider from "@/context/CursorVariantProvider";
 import Loader from "@/components/Loader";
+import ScrollToTop from "@/components/ScrollToTop";
 
 const navLinks = [
   { name: "About Us", path: "/about-us" },
@@ -34,6 +35,7 @@ function App() {
             <Navbar links={navLinks} />
             <Cursor />
             <ToastContainer />
+            <ScrollToTop />
             <Routes>
               {routes.map((route) => (
                 <Route
diff --git a/src/assets/images/About/oval.svg b/src/assets/images/About/oval.svg
new file mode 100644
index 0000000..58da4ae
--- /dev/null
+++ b/src/assets/images/About/oval.svg
@@ -0,0 +1,7 @@
+<svg width="1919" height="220" viewBox="0 0 1919 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1919" height="220" fill="#2D2D2D"/>
+<rect width="1920" height="1080" transform="translate(0 -2801)" fill="#232323"/>
+<rect y="-2801" width="1920" height="5710" fill="#232323"/>
+<rect y="-854" width="1919" height="1075" fill="#F9F9F9"/>
+<ellipse cx="959.5" cy="375" rx="1053.5" ry="373" fill="#E76941"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/AboutUs/index.jsx b/src/components/AboutUs/index.jsx
index 8875979..a0c36ba 100644
--- a/src/components/AboutUs/index.jsx
+++ b/src/components/AboutUs/index.jsx
@@ -84,7 +84,7 @@ export default function AboutSection() {
       <section className="relative min-h-fit bg-secondary-dark text-white py-12 px-4 md:px-6 lg:px-8 overflow-hidden">
         <div className="absolute top-4 -left-1 w-8 h-8 bg-white rounded-full opacity-100" />
         <div className="absolute -top-2 right-20 w-20 h-20 bg-primary-dark rounded-full opacity-100 z-10" />
-        <div className="max-w-full mx-auto px-24 relative z-20">
+        <div className="max-w-full mx-auto px-12 relative z-20">
           <h1
             className="text-secondary-dark shadow-black font-poppins font-extrabold text-4xl md:text-6xl lg:text-8xl mb-12 relative z-20"
             style={{
diff --git a/src/components/EventsHighlight/index.jsx b/src/components/EventsHighlight/index.jsx
new file mode 100644
index 0000000..c468d23
--- /dev/null
+++ b/src/components/EventsHighlight/index.jsx
@@ -0,0 +1,116 @@
+import { useEffect, useRef } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+function EventsHighlight() {
+  const containerRef = useRef(null);
+
+  const images = [
+    {
+      key: 0,
+      url: "/CodeX-Website/gallery/Community Session/cs1.jpg",
+      alt: "Image 1",
+      side: "left",
+    },
+    {
+      key: 1,
+      url: "/CodeX-Website/gallery/AIML SESSION/aiml1.jpg",
+      alt: "Image 2",
+      side: "right",
+    },
+    {
+      key: 2,
+      url: "/CodeX-Website/gallery//AIML SESSION/aiml6.jpg",
+      alt: "Image 3",
+      side: "left",
+    },
+    {
+      key: 3,
+      url: "/CodeX-Website/gallery/Community Session/cs3.jpg",
+      alt: "Image 4",
+      side: "right",
+    },
+    {
+      key: 4,
+      url: "/CodeX-Website/gallery/HackTober Fest/htf1_1.jpg",
+      alt: "Image 5",
+      side: "left",
+    },
+    {
+      key: 5,
+      url: "/CodeX-Website/gallery/Laser Lock/ll1.jpg",
+      alt: "Image 6",
+      side: "right",
+    },
+  ];
+
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+
+    // Set up each image animation
+    images.forEach((_, index) => {
+      const imageSection = containerRef.current.children[index];
+
+      gsap.fromTo(
+        imageSection,
+        {
+          opacity: 1,
+          y: "20vh",
+        },
+        {
+          opacity: 1,
+          y: "-100vh",
+          ease: "none",
+          scrollTrigger: {
+            trigger: imageSection,
+            start: "top bottom",
+            end: "bottom top",
+            scrub: 1,
+            markers: false,
+          },
+        },
+      );
+    });
+
+    return () => {
+      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+    };
+  }, []);
+
+  return (
+    <div className="relative">
+      {/* Fixed description */}
+      <div className="sticky top-1/2 z-0 text-center">
+        <h2 className="xs:text-4xl md:text-6xl lg:text-8xl font-bold text-black mb-4 text-white mt-[48vh] tracking-tighter font-black font-poppins">
+          Events Highlight
+        </h2>
+      </div>
+
+      {/* Images container */}
+      <div ref={containerRef} className="relative">
+        {images.map((image) => (
+          <div
+            key={image.key}
+            className={`relative h-[50vh] flex items-center justify-center ${
+              image.side === "left" ? "ml-24" : "mr-24"
+            }`}
+          >
+            <div
+              className={`absolute ${
+                image.side === "left" ? "left-0 z-100" : "right-0"
+              } xs:w-[20rem] md:w-[30rem]`}
+            >
+              <img
+                src={image.url}
+                alt={image.alt}
+                className="w-full object-contain rounded-lg shadow-xl"
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default EventsHighlight;
diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
deleted file mode 100644
index f81d6c7..0000000
--- a/src/components/Footer/index.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useState, useContext } from "react";
-import { Link, useLocation } from "react-router-dom";
-import PropTypes from "prop-types";
-import SymbiosisLogo from "@/assets/images/symbiosis-logo.png";
-import CodexLogo from "@/assets/images/codex-logo.png";
-import { CursorVariantContext } from "@/context/CursorVariantProvider";
-import Heading from "@/components/Heading/index";
-
-function Footer() {
-  const [isOpen, setIsOpen] = useState(false);
-  const location = useLocation();
-
-  const { setCursorVariantNone, setCursorVariantDefault } =
-    useContext(CursorVariantContext);
-
-  const handleLinkClick = () => {
-    setIsOpen(false);
-  };
-
-  return (
-    <footer className="bg-primary py-6 mt-8">
-      <div className="container mx-auto">
-        <div className="flex justify-between items-center mb-4">
-          <p className="text-white font-bold">CONNECT WITH US</p>
-          <div className="flex space-x-4">
-            <a href="#" className="text-white hover:text-gray-300">
-              <i className="fab fa-instagram"></i>
-            </a>
-            <a href="#" className="text-white hover:text-gray-300">
-              <i className="fab fa-facebook-f"></i>
-            </a>
-            <a href="#" className="text-white hover:text-gray-300">
-              <i className="fab fa-linkedin-in"></i>
-            </a>
-            <a href="#" className="text-white hover:text-gray-300">
-              <i className="fab fa-github"></i>
-            </a>
-          </div>
-        </div>
-        <div className="flex justify-between items-center">
-          <div className="flex items-center space-x-4">
-            <img
-              src={SymbiosisLogo}
-              alt="Symbiosis Institute of Technology"
-              className="h-8"
-            />
-            <p className="text-white font-bold">MADE WITH LOVE BY</p>
-            <img src={CodexLogo} alt="Team Codex" className="h-8" />
-          </div>
-          <p className="text-center text-white">
-            © 2024 CODEX | ALL RIGHTS RESERVED
-          </p>
-        </div>
-      </div>
-    </footer>
-  );
-}
-
-export default Footer;
diff --git a/src/components/ScrollToTop/index.jsx b/src/components/ScrollToTop/index.jsx
new file mode 100644
index 0000000..50dc1f6
--- /dev/null
+++ b/src/components/ScrollToTop/index.jsx
@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+function ScrollToTop() {
+  const location = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [location]);
+
+  return null;
+}
+
+export default ScrollToTop;
diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
index b42e3b0..66542c3 100644
--- a/src/pages/Home/index.jsx
+++ b/src/pages/Home/index.jsx
@@ -1,7 +1,12 @@
 import { useContext } from "react";
 import { CursorVariantContext } from "@/context/CursorVariantProvider";
 import PageTransition from "@/components/PageTransition";
+import EventsHighlight from "../../components/EventsHighlight";
+import SkewButton from "../../components/SkewButton";
 import AboutSection from "@/components/AboutUs";
+import TeamMember from "../Teams/TeamMember";
+import teamMembersData from "../Teams/teamsdata.json";
+import Heading from "@/components/Heading";
 
 function Home() {
   const { setCursorVariantText, setCursorVariantDefault } =
@@ -24,6 +29,26 @@ function Home() {
         </div>
       </div>
       <AboutSection />
+      <div className="min-h-screen mt-32">
+        <div className="flex justify-center items-center">
+          <div className="flex-grow mx-auto pr-5 pl-5 space-x-30 py-8">
+            <Heading
+              text="MEET OUR TEAM"
+              className="text-center absolute top-0 left-0 right-0 mb-24"
+            />
+            <div className="flex flex-row flex-wrap gap-16 justify-center items-center mt-12">
+              {teamMembersData.slice(0, 3).map((member) => (
+                <TeamMember key={member.name} member={member} />
+              ))}
+            </div>
+            <SkewButton text="SEE ALL" link="/teams" className="mt-16" />
+          </div>
+        </div>
+      </div>
+      <EventsHighlight />
+      <div className="h-[50vh]">
+        <SkewButton link="/events" text="See all events" />
+      </div>
     </PageTransition>
   );
 }