diff --git a/src/components/AboutSection.jsx b/src/components/AboutSection.jsx
index 03c6d3d..dd8cc10 100644
--- a/src/components/AboutSection.jsx
+++ b/src/components/AboutSection.jsx
@@ -1,22 +1,44 @@
-import Button from "./shared/Button";
+import { useState, useEffect } from "react";
 import { siteConfig } from "../config/navbarHero";
 
 export default function AboutSection() {
+  const [showFirst, setShowFirst] = useState(true);
+
+  useEffect(() => {
+    const interval = setInterval(() => setShowFirst((prev) => !prev), 4000);
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <section
       id="about"
       className="bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16"
     >
-      <div className="w-full max-w-[1600px] mx-auto flex flex-col md:flex-row items-center justify-between gap-y-10 gap-x-10 xl:gap-x-12 2xl:gap-x-14">
-        <div className="w-full max-w-[500px] px-2 md:px-0 mt-10 md:mt-0">
+      <div className="w-full max-w-[1600px] mx-auto flex flex-col md:flex-row items-start md:items-center justify-between gap-x-10 xl:gap-x-12 2xl:gap-x-14">
+        <div className="w-full px-4 relative flex justify-center items-center  h-[300px] sm:h-[350px] md:h-[500px]">
+          <img
+            src={siteConfig.about.image}
+            alt="About image 1"
+            className="block md:hidden  mb-10 rounded-md shadow-lg object-cover w-full h-full"
+          />
+
           <img
             src={siteConfig.about.image}
-            alt="ASME NIT Rourkela team members"
-            className="rounded-md shadow-lg object-cover w-full h-auto"
+            alt="About image 1 fade"
+            className={`hidden md:block rounded-md shadow-lg object-cover w-full h-full absolute top-0 left-0 right-0 bottom-0 m-auto transition-opacity duration-1000 ${
+              showFirst ? "opacity-100 z-10" : "opacity-0 z-0"
+            }`}
+          />
+          <img
+            src={siteConfig.hero.image}
+            alt="About image 2 fade"
+            className={`hidden md:block rounded-md shadow-lg object-cover w-full h-full absolute top-0 left-0 right-0 bottom-0 m-auto transition-opacity duration-1000 ${
+              showFirst ? "opacity-0 z-0" : "opacity-100 z-10"
+            }`}
           />
         </div>
 
-        <div className="w-full  text-center md:text-left space-y-4 max-w-[700px]">
+        <div className="w-full text-center md:text-left space-y-4 max-w-[700px]">
           <h1
             className="text-3xl sm:text-4xl md:text-[47px] lg:text-[56px] font-bold uppercase text-black leading-[120%]"
             style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
@@ -36,7 +58,7 @@ export default function AboutSection() {
               href="#cards"
               role="button"
               tabIndex={0}
-              className=" text-2xl h-12 justify-center items-center flex bg-[rgba(6,25,70,1)] text-[#ccc0c0] underline-offset-4 transition duration-300 ease-in-out hover:bg-none hover:bg-white hover:text-[#061946] font-semibold py-2 px-4 rounded"
+              className="text-2xl h-12 justify-center items-center flex bg-[rgba(6,25,70,1)] text-[#ccc0c0] underline-offset-4 transition duration-300 ease-in-out hover:bg-none hover:bg-white hover:text-[#061946] font-semibold py-2 px-4 rounded"
               style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
             >
               {siteConfig.about.button}
diff --git a/src/components/HeroSection.jsx b/src/components/HeroSection.jsx
index 1601dee..8eb6d10 100644
--- a/src/components/HeroSection.jsx
+++ b/src/components/HeroSection.jsx
@@ -1,9 +1,17 @@
+import { useState, useEffect } from "react";
 import Button from "./shared/Button";
 import { siteConfig } from "../config/navbarHero";
 
 export default function HeroSection() {
+  const [showFirst, setShowFirst] = useState(true);
+
+  useEffect(() => {
+    const interval = setInterval(() => setShowFirst((prev) => !prev), 4000);
+    return () => clearInterval(interval);
+  }, []);
+
   return (
-    <section className="bg-white min-h-[400px]  pt-[80px] sm:pt-[100px] md:pt-[120px] lg:pt-[130px] px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16">
+    <section className="bg-white min-h-[400px] pt-[40px] sm:pt-[30px] md:pt-[80px] lg:pt-[130px] px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-8">
       <div className="max-w-[1600px] mx-auto flex flex-col md:flex-row items-center md:items-start justify-center md:justify-between md:gap-x-12">
         <div className="w-full max-w-[700px] px-2 md:px-0 space-y-4 text-center md:text-left">
           <p
@@ -12,21 +20,18 @@ export default function HeroSection() {
           >
             {siteConfig.hero.title}
           </p>
-
           <h1
             className="text-3xl sm:text-4xl md:text-[47px] lg:text-[56px] xl:text-[64px] font-bold uppercase text-black leading-[120%]"
             style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
           >
             {siteConfig.hero.subtitle}
           </h1>
-
           <p
             className="text-base sm:text-lg text-[rgba(106,106,106,1)] leading-[150%] mt-4 max-w-2xl mx-auto md:mx-0"
             style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
           >
             {siteConfig.hero.description}
           </p>
-
           <div className="flex flex-col sm:flex-row sm:justify-center md:justify-start items-center mt-6 gap-4">
             <Button
               className="bg-[rgba(6,25,70,1)] text-white px-14 py-2 rounded-md transition duration-300 ease-in-out hover:bg-white hover:text-[rgba(6,25,70,1)]"
@@ -38,7 +43,7 @@ export default function HeroSection() {
               href="#about"
               role="button"
               tabIndex={0}
-              className=" h-12 justify-center items-center flex bg-gradient-to-r from-blue-900 to-blue-950 text-[#e2cede] underline-offset-4 transition duration-300 ease-in-out hover:bg-none hover:bg-white hover:text-[#061946] font-semibold py-2 px-4 rounded"
+              className="h-12 justify-center items-center flex bg-gradient-to-r from-blue-900 to-blue-950 text-[#e2cede] underline-offset-4 transition duration-300 ease-in-out hover:bg-none hover:bg-white hover:text-[#061946] font-semibold py-2 px-4 rounded"
               style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
             >
               {siteConfig.hero.secondaryLink}
@@ -46,12 +51,30 @@ export default function HeroSection() {
           </div>
         </div>
 
-        <div className="w-full max-w-[500px] px-2 md:px-0 mt-10 md:mt-0 ">
-          <img
-            src={siteConfig.hero.image}
-            alt="ASME NIT Rourkela team members"
-            className="rounded-md shadow-lg object-cover w-full h-auto"
-          />
+        <div className="w-full max-w-[1600px] px-2 md:px-0 relative h-[350px] md:h-[500px] flex justify-center items-center">
+          <div className="w-full max-w-[1600px] mt-0 px-2 md:px-0 relative flex justify-center items-center h-[300px] sm:h-[350px] md:h-[500px]">
+            <img
+              src={siteConfig.hero.image}
+              alt="Hero image 1"
+              className="rounded-md shadow-lg object-cover w-full h-full"
+            />
+
+            <img
+              src={siteConfig.about.image}
+              alt="Hero image 2"
+              className={`rounded-md shadow-lg object-cover w-full h-full absolute top-0 left-0 right-0 bottom-0 m-auto transition-opacity duration-1000 hidden md:block ${
+                showFirst ? "opacity-0 z-0" : "opacity-100 z-10"
+              }`}
+            />
+
+            <img
+              src={siteConfig.hero.image}
+              alt="Hero image 1 fade"
+              className={`rounded-md shadow-lg object-cover w-full h-full absolute top-0 left-0 right-0 bottom-0 m-auto transition-opacity duration-1000 hidden md:block ${
+                showFirst ? "opacity-100 z-10" : "opacity-0 z-0"
+              }`}
+            />
+          </div>
 
           <img
             src={siteConfig.hero.image1}
@@ -61,15 +84,14 @@ export default function HeroSection() {
               width: "705px",
               height: "705px",
               top: "-234px",
-              left: "-151px",
+              left: "-800px",
               opacity: 0.36,
             }}
           />
-
           <img
             src={siteConfig.hero.image2}
             alt="Background figure 2"
-            className="absolute hidden min-[980px]:block"
+            className="absolute hidden min-[1800px]:block"
             style={{
               width: "478px",
               height: "478px",
diff --git a/src/config/navbarHero.js b/src/config/navbarHero.js
index 5e5275e..8fbd4b8 100644
--- a/src/config/navbarHero.js
+++ b/src/config/navbarHero.js
@@ -19,7 +19,7 @@ export const siteConfig = {
     primaryButton: "Join Us",
     secondaryLink: "Learn More",
     image:
-      "https://res.cloudinary.com/dwjcki9ey/image/upload/v1752132771/image_1_w5ijjl.png",
+      "https://res.cloudinary.com/djqgs2pet/image/upload/v1756018619/IMG_20250822_234850_bxluqx.jpg",
     image1:
       "https://res.cloudinary.com/dwjcki9ey/image/upload/v1752159681/Ellipse_1_sxc0u7.png",
     image2:
@@ -32,7 +32,7 @@ export const siteConfig = {
       "ASME NIT Rourkela is dedicated to fostering engineering innovation among students. We serve as a pivotal connecting link between academia and industry, tackling technical obstacles with enthusiasm through our various initiatives and events. ASME NIT Rourkela is committed to fostering engineering innovation and practical application among students. All of us are free to make a positive impact through our various technical and non-events.",
     button: "Learn More",
     image:
-      "https://res.cloudinary.com/dwjcki9ey/image/upload/v1752132823/image_lxdaqf.png",
+      "https://res.cloudinary.com/djqgs2pet/image/upload/v1756018623/IMG-20250819-WA0130_pogbzm.jpg",
   },
 
   missions: [