diff --git a/frontend/src/app/components/Flicker/flicker.tsx b/frontend/src/app/components/Flicker/flicker.tsx
new file mode 100644
index 0000000..7f18050
--- /dev/null
+++ b/frontend/src/app/components/Flicker/flicker.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect } from "react";
+
+const SEQUENCE = [
+  { glowing: [true,true,true,true,true,true,true,true,true,true,true], duration: 1000 },
+  { glowing: [true,true,true,true,true,true,true,false,false,false,false], duration: 80 },
+  { glowing: [true,true,true,true,true,true,true,true,true,true,true], duration: 2000 },
+  { glowing: [false,true,true,false,true,true,false,false,false,true,true], duration: 80 },
+  { glowing: [false,false,false,false,false,false,false,false,false,false,false], duration: 100 },
+  { glowing: [true,true,true,true,true,true,true,true,true,true,true], duration: 2000 },
+  { glowing: [false,false,false,false,false,false,false,false,false,false,false], duration: 100 },
+  { glowing: [true,true,true,true,true,true,true,true,true,true,true], duration: 200 },
+  { glowing: [false,false,false,false,false,false,false,false,false,false,false], duration: 100 },
+  { glowing: [true,true,true,true,true,true,true,true,true,true,true], duration: 2000 },
+  { glowing: [false,false,false,false,false,false,true,true,true,true,true], duration: 80 },
+  { glowing: [true,true,true,true,true,true,false,false,false,true,true], duration: 80 },
+  { glowing: [true,true,true,true,true,true,true,true,true,true,true], duration: 2000 },
+  { glowing: [false,true,true,true,true,true,true,true,true,true,true], duration: 30 },
+];
+
+interface FlickerProps {
+  onGlowChange?: (isGlowing: boolean) => void;
+}
+
+export default function Flicker({ onGlowChange }: FlickerProps) {
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout>;
+
+    const runSequence = (index: number) => {
+      const glowingArray = SEQUENCE[index].glowing;
+
+   
+      const glowingCount = glowingArray.filter(Boolean).length;
+      const isGlowing = glowingCount > glowingArray.length * 0.7;
+
+      onGlowChange?.(isGlowing);
+
+      timeout = setTimeout(() => {
+        const next = (index + 1) % SEQUENCE.length;
+        runSequence(next);
+      }, SEQUENCE[index].duration);
+    };
+
+    runSequence(0);
+
+    return () => clearTimeout(timeout);
+  }, [onGlowChange]);
+
+  return null; 
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/TrackWinner/TrackWinner.tsx b/frontend/src/app/components/TrackWinner/TrackWinner.tsx
index 4ddb122..b48bbd8 100644
--- a/frontend/src/app/components/TrackWinner/TrackWinner.tsx
+++ b/frontend/src/app/components/TrackWinner/TrackWinner.tsx
@@ -1,53 +1,4 @@
-// "use client";
-// import type { ReactElement } from "react";
-// import Lottie from "lottie-react";
-// import confettiAnimation from "../../../../public/animations/confetti.json";
-// import { cabinetBlack, cabinetBold, cabinetRegular } from "@/app/utils/fonts";
-// import { useEffect, useRef } from "react";
 
-// export default function TrackWinner({ scrollProgress }: { scrollProgress: number }): ReactElement {
-//   const lottieRef = useRef<any>(null);
-
-//   useEffect(() => {
-//     if (!lottieRef.current) return;
-//     const anim = lottieRef.current;
-//     const totalFrames = anim.getDuration(true);
-//     const frame = Math.floor(scrollProgress * totalFrames);
-//     anim.goToAndStop(frame, true);
-//   }, [scrollProgress]);
-
-//   return (
-//     <div className="primary-gradient-background w-[19.985rem] sm:w-[19.985rem] md:w-[23.985rem] lg:w-[26.313rem] h-[18.369rem] sm:h-[18.369rem] md:h-[18.369rem] lg:h-[29.063rem] p-[2px] rounded-[2rem]">
-//       <div className="bg-[#110C24] flex flex-col h-full w-full rounded-[2rem] justify-between py-8">
-//         <div className="flex justify-center gap-4">
-//           <Lottie
-//             lottieRef={lottieRef}
-//             animationData={confettiAnimation}
-//             loop={false}
-//             autoplay={false}
-//             style={{ width: 60, height: 60 }}
-//           />
-//           <div className="flex p-0">
-//             <p className={`${cabinetBold.className} text-primary-gradient-color font-extrabold text-2xl sm:text-2xl md:text-2xl lg:text-[2.875rem] relative top-[1.3rem]`}>
-//               Track Winner
-//             </p>
-//           </div>
-//         </div>
-//         <div className="flex flex-col items-start gap-1 lg:gap-2 px-6">
-//           <p className={`${cabinetRegular.className} text-white text-xs sm:text-xs md:text-xl lg:text-2xl tracking-wide w-full`}>
-//             New Track Added !
-//           </p>
-//           <p className={`${cabinetBlack.className} text-4xl sm:text-4xl md:text-5xl lg:text-7xl text-[#F5C144]`}>
-//             Rs. 15,000
-//           </p>
-//           <p className={`${cabinetRegular.className} text-white text-xs sm:text-xs md:text-xl lg:text-2xl italic tracking-wide w-full`}>
-//             per track
-//           </p>
-//         </div>
-//       </div>
-//     </div>
-//   );
-// }
 "use client";
 import type { ReactElement } from "react";
 import { DotLottieReact } from "@lottiefiles/dotlottie-react";
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index b569788..9830772 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -38,6 +38,9 @@
   .exp-gradient-background {
   background: linear-gradient(270deg, #F5C144 0%, #6633CC 100%);
   }
+  .blockchain-background {
+  background: linear-gradient(60deg, #6633CC 0%,#F5C144 150%);
+  }
 
   .text-primary-gradient-color {
     @apply bg-gradient-to-r from-primary from-1% to-secondary bg-clip-text text-transparent;
diff --git a/frontend/src/app/sections/Tracks/TracksCard.tsx b/frontend/src/app/sections/Tracks/TracksCard.tsx
index 86c0f24..33f6a7d 100644
--- a/frontend/src/app/sections/Tracks/TracksCard.tsx
+++ b/frontend/src/app/sections/Tracks/TracksCard.tsx
@@ -1,25 +1,27 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import TracksHeading from "@/app/components/Tracks/TracksHeadingCard";
+import TracksBodyCard from "@/app/components/Tracks/TracksBodyCard";
 import InteractiveTechnologySVG from "@/app/assets/icons/InteractiveTechnology";
 import InteractiveTechnologyNewSVG from "@/app/assets/icons/InteractiveTechnologyNew";
 import DataScienceSVG from "@/app/assets/icons/DataScience";
-import BlockchainSVG from "@/app/assets/icons/Blockchain";
-import OpenInnovationSVG from "@/app/assets/icons/OpenInnovation";
-import EdTechSVG from "@/app/assets/icons/EdTech";
-import TracksBodyCard from "@/app/components/Tracks/TracksBodyCard";
-import { useRef } from "react";
 import DataScienceNew from "@/app/assets/icons/DataScienceNew";
+import BlockchainSVG from "@/app/assets/icons/Blockchain";
 import BlockchainNew from "@/app/assets/icons/BlockChainNew";
+import OpenInnovationSVG from "@/app/assets/icons/OpenInnovation";
 import OpenInnovationNew from "@/app/assets/icons/OpenInnovationNew";
+import EdTechSVG from "@/app/assets/icons/EdTech";
 import EdTechNew from "@/app/assets/icons/EdTechNew";
 import EnvironmentTrackSVG from "@/app/assets/icons/EnvironmentTrack";
 import EnvironmentTrackBodySVG from "@/app/assets/icons/EnvironmentTrackBody";
 
 const TracksCard = () => {
   const [selectedTrack, setSelectedTrack] = useState<string>(
-    "Interactive Technology",
+    "Interactive Technology"
   );
+  const [animKey, setAnimKey] = useState(0);
+
+  const autoSwitchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const trackData = [
     {
@@ -44,17 +46,17 @@ const TracksCard = () => {
           : "bg-violet hover:bg-purpures hover:text-magnolia transition-all duration-300",
       bodyStyling: "bg-purpures text-magnolia",
       description:
-        "Dive deep into the captivating realm of Data Analysis and Predictive Modeling, Leveraging algorithms and Artificial Intellignce.",
+        "Dive deep into the captivating realm of Data Analysis and Predictive Modeling, Leveraging algorithms and Artificial Intelligence.",
     },
     {
       title: "Blockchain",
       svg: <BlockchainSVG height={25} width={25} />,
-      svgBody: <BlockchainNew height={50} width={50} />,
+      svgBody: <BlockchainSVG height={50} width={50} />,
       headStyling:
         selectedTrack === "Blockchain"
-          ? "bg-magnolia text-dark-purple active"
-          : "bg-violet hover:bg-magnolia hover:text-dark-purple transition-all duration-300",
-      bodyStyling: "bg-magnolia text-dark-purple",
+          ? "blockchain-background text-white active"
+          : "bg-violet hover:blockchain-background hover:text-white transition-all duration-300",
+      bodyStyling: "blockchain-background text-white",
       description:
         "Embrace Decentralization with DeerHack. Explore smart contracts, secure transactions, and reshape industries at the forefront of innovation.",
     },
@@ -90,24 +92,48 @@ const TracksCard = () => {
         selectedTrack === "Environment"
           ? "gradient-bg text-magnolia active invert "
           : "bg-violet hover:gradient-bg hover:text-magnolia hover:invert transition-all duration-300",
-      bodyStyling: "gradient-bg text-magnolia invert transition-all duration-300",
+      bodyStyling:
+        "gradient-bg text-magnolia invert transition-all duration-300",
       description:
         "Think Green, Code Clean at DeerHack. Dive into the world of climate-positive innovation. Turn environmental challenges into elegant, scalable, and sustainable tech solutions.",
     },
   ];
 
+  // Function to handle track selection manually
   const handleTrackSelection = (title: string) => {
     setSelectedTrack(title);
+    setAnimKey((prev) => prev + 1);
+    resetAutoSwitchTimer();
+  };
+
+  // Auto switch logic
+  const resetAutoSwitchTimer = () => {
+    if (autoSwitchTimer.current) clearTimeout(autoSwitchTimer.current);
+
+    autoSwitchTimer.current = setTimeout(() => {
+      const currentIndex = trackData.findIndex(
+        (track) => track.title === selectedTrack
+      );
+      const nextIndex = (currentIndex + 1) % trackData.length;
+      setSelectedTrack(trackData[nextIndex].title);
+      setAnimKey((prev) => prev + 1);
+      resetAutoSwitchTimer(); // schedule next switch
+    }, 10000); // 8 seconds
   };
 
-  const containerRef = useRef<HTMLDivElement>(null);
+  // Start auto-switch when component mounts
+  useEffect(() => {
+    resetAutoSwitchTimer();
+    return () => {
+      if (autoSwitchTimer.current) clearTimeout(autoSwitchTimer.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedTrack]);
 
   return (
-    <div className="lg:w-[70.36rem]  mx-5 lg:mx-auto transition-all duration-300 ease-in">
-     
+    <div className="lg:w-[70.36rem] mx-5 lg:mx-auto transition-all duration-300 ease-in">
       <div
-        className={`flex  lg:justify-center items-start text-magnolia  lg:gap-[12px] md:gap-6 gap-3 overflow-x-auto no-scrollbar justify-evenly px-3`}
-        ref={containerRef}
+        className={`flex lg:justify-center items-start text-magnolia lg:gap-[12px] md:gap-6 gap-3 overflow-x-auto no-scrollbar justify-evenly px-3`}
       >
         {trackData.map((track, index) => (
           <TracksHeading
@@ -123,17 +149,22 @@ const TracksCard = () => {
       {trackData.map(
         (track, index) =>
           selectedTrack === track.title && (
-            <TracksBodyCard
-              key={index}
-              svg={track.svgBody}
-              title={track.title}
-              description={track.description}
-              bodyStyling={track.bodyStyling}
-            />
-          ),
+            <div
+              key={animKey}
+              className="animate-track-fade-in"
+            >
+              <TracksBodyCard
+                key={index}
+                svg={track.svgBody}
+                title={track.title}
+                description={track.description}
+                bodyStyling={track.bodyStyling}
+              />
+            </div>
+          )
       )}
     </div>
   );
 };
 
-export default TracksCard;
+export default TracksCard;
\ No newline at end of file
diff --git a/frontend/src/app/sections/home/Hero.tsx b/frontend/src/app/sections/home/Hero.tsx
index 1132b07..953c7a4 100644
--- a/frontend/src/app/sections/home/Hero.tsx
+++ b/frontend/src/app/sections/home/Hero.tsx
@@ -5,20 +5,40 @@ import styles from "./styles.module.css";
 import DeerHack26Logo from "@/app/assets/icons/Deerhack26";
 import { cabinetBold, cabinetMedium, satoshiBlack, satoshiBold } from "@/fonts";
 import Link from "next/link";
+// import { useState, useEffect } from "react";
+import Flicker from "@/app/components/Flicker/flicker";
+import { useState, useCallback } from "react";
+
 
 
 const Hero = () => {
+  const [isGlowing, setIsGlowing] = useState(true);
+
+const handleGlowChange = useCallback((allGlowing: boolean) => {
+  setIsGlowing(allGlowing);
+}, []);
   return (
     <div
       className={` ${styles.hero_background_container} flex justify-center w-full `}
       id="hero_container"
     >
     {/*Original div --> <div className={` px-10 py-10 lg:py-8 lg:px-14 text-center  rounded-3xl border-2 border-secondary  absolute lg:top-48 lg:w-[427px] lg:h-[447px] w-[304px] h-[319px] top-48 ${styles.muted_color} md:w-[500px] md:h-[500px] md:top-72 `}> */}
-    <div className={` px-10 py-10 lg:py-8 lg:px-14 text-center  rounded-3xl border-2 border-secondary  absolute lg:top-60 lg:w-[427px]  w-[304px]  top-48 ${styles.muted_color} md:w-[500px] h-fit md:top-72 `}>
-      <p
+   <div
+  className={`px-10 py-10 lg:py-8 lg:px-14 text-center rounded-3xl absolute lg:top-60 lg:w-[427px] w-[304px] top-48 ${styles.muted_color} md:w-[500px] h-fit md:top-72`}
+  style={{
+    border: isGlowing ? "2px solid #FFB401" : "2px solid #B98402",
+    transition: "border 0.1s ease, box-shadow 0.1s ease",
+    boxShadow: isGlowing
+      ? "0 0 10px rgba(245,193,68,0.9), inset 0 0 10px rgba(102,51,204,0.8)"
+      : "0 0 6px rgba(245,193,68,0.2), inset 0 0 6px rgba(102,51,204,0.2)",
+  }}
+
+>
+   <Flicker onGlowChange={handleGlowChange} />
+    <p
           className={`  text-2xl md:text-4xl lg:text-3xl font-bold text-center text-heropage-gradient ${cabinetBold.className}`}
         >
-          12th - 14th June
+             12th - 14th June
         </p>
         <DeerHack26Logo className="mt-3 h-auto w-full md:mt-6" width={309} height={130} />
         {/* <div