diff --git a/src/components/About/About.css b/src/components/About/About.css
index 2fe6bd9..45f779a 100644
--- a/src/components/About/About.css
+++ b/src/components/About/About.css
@@ -304,7 +304,6 @@
   position: absolute;
   width: 60%;
   font-size: 1.5rem;
-  text-align: center;
   z-index: 10;
 }
 
@@ -317,12 +316,6 @@
   }
 }
 
-@media (max-width: 1390px) {
-  .abtp {
-    font-size: 1.2rem;
-  }
-}
-
 @media (max-width: 1300px) {
   .details-container {
     width: 100%;
@@ -361,6 +354,7 @@ html {
 
   .abouth1 {
     font-size: 2.5rem;
+    margin-bottom: -64px;
   }
 }
 
@@ -370,9 +364,9 @@ html {
   }
 
   .aboutsvg1 {
-    height: 90%;
+    height: 75%;
     display: flex;
-    width: 95%;
+    width: 92%;
     backdrop-filter: blur(10px);
     z-index: 3;
   }
@@ -415,19 +409,19 @@ html {
   }
 }
 
+@media (max-height: 550px) {
+  .abtp {
+    font-size: 1rem;
+  }
+}
+
 @media (max-width: 420px) {
   .circle1 {
     display: none;
   }
 
   .abtp {
-    font-size: 0.9rem;
+    font-size: 0.97rem;
     width: 80%;
   }
 }
-
-@media (max-height: 550px) {
-  .abtp {
-    font-size: 1rem;
-  }
-}
diff --git a/src/components/About/About.jsx b/src/components/About/About.jsx
index e6e225b..129dd36 100644
--- a/src/components/About/About.jsx
+++ b/src/components/About/About.jsx
@@ -13,12 +13,15 @@ const About = () => {
     <div className="relative overflow-hidden">
       <div className="absolute bg-gradient-to-b from-[#0a0a0a] from-10% to-transparent z-50 bg-no-repeat right-0 left-0 top-0 min-h-32" />
       <div id="about" className="about-container pt-[80px]">
-        <Image className="top-left" src={top_left} />
-        <Image className="bottom-right z-0" src={bottom_right} />
-        <Image className="circle1" src={circle1} />
-        <Image className="circle2" src={circle2} />
-        <Image className="circle3" src={circle3} />
-        <h1 className="text-5xl abouth1 font-base-neue-bold max-md:text-4xl pb-[18px] text-center">
+        <Image className="pointer-events-none top-left" src={top_left} />
+        <Image
+          className="pointer-events-none bottom-right z-0"
+          src={bottom_right}
+        />
+        <Image className="pointer-events-none circle1" src={circle1} />
+        <Image className="pointer-events-none circle2" src={circle2} />
+        <Image className="pointer-events-none circle3" src={circle3} />
+        <h1 className="text-5xl abouth1 font-base-neue-bold max-md:text-4xl pb-0 md:pb-[18px] text-center">
           ABOUT
         </h1>
         <div className="details-container">
@@ -160,12 +163,13 @@ const About = () => {
             </defs>
           </svg>
 
-          <p className="abtp font-syne-medium">
+          <p className="px-2 md:p-0 abtp text-left sm:text-center font-syne-medium">
             Level up your coding skills and slay real-world challenges! Whether
             you're a seasoned developer or a coding newbie, HFT is the place to
             collaborate with like-minded tech enthusiasts to build
             groundbreaking solutions.
             <br />
+            <br />
             Join us for a 24-hour coding marathon filled with caffeine, food,
             and endless possibilities. So, gather your squad and let's code a
             better tomorrow at Hack For Tomorrow!
diff --git a/src/components/BlobAnimation.jsx b/src/components/BlobAnimation.jsx
index 5eb0b05..c392f23 100644
--- a/src/components/BlobAnimation.jsx
+++ b/src/components/BlobAnimation.jsx
@@ -32,7 +32,7 @@ const BlobAnimation = () => {
     <>
       <div className="relative h-screen w-screen overflow-hidden">
         <Image
-          className="absolute top-0 left-0 z-0"
+          className="pointer-events-none absolute top-0 left-0 z-0"
           src={topleft}
           alt="topleft"
         />
@@ -42,13 +42,13 @@ const BlobAnimation = () => {
           alt="constellation"
         /> */}
         <Image
-          className="hidden lg:block absolute bg-cover right-0 top-0 h-full z-0"
+          className="hidden pointer-events-none lg:block absolute bg-cover right-0 top-0 h-full z-0"
           src={right}
           alt="bot-right"
         />
-        <Image className="lcircle1" src={circle1} />
-        <Image className="lcircle2" src={circle2} />
-        <Image className="lcircle3" src={circle3} />
+        <Image className="pointer-events-none lcircle1" src={circle1} />
+        <Image className="pointer-events-none lcircle2" src={circle2} />
+        <Image className="pointer-events-none lcircle3" src={circle3} />
         <div className="absolute bg-gradient-to-b from-transparent from-95% to-[#0a0a0a] z-0 to-100% bg-no-repeat right-0 left-0 top-0 bottom-0" />
         <div
           className="container max-w-full sm:max-w-[70%] relative m-auto flex flex-col min-h-screen text-our_white justify-center gap-[20px] z-0"
@@ -56,12 +56,12 @@ const BlobAnimation = () => {
           data-aos-duration="1100"
         >
           <Image
-            className="hidden sm:block absolute bottom-0 md:bottom-0 md:right-[-8rem] z-0"
+            className="pointer-events-none hidden sm:block absolute bottom-0 md:bottom-0 md:right-[-8rem] z-0"
             src={astro2}
             alt="astro"
           />
           <Image
-            className="sm:hidden absolute bottom-0 sm:bottom-0 right-0 max-sm: sm:right-[-4rem] z-0"
+            className="pointer-events-none sm:hidden absolute bottom-0 sm:bottom-0 right-0 max-sm: sm:right-[-4rem] z-0"
             src={astro3}
             alt="astro-mob"
           />
diff --git a/src/components/FAQ/FAQ.jsx b/src/components/FAQ/FAQ.jsx
index cc11d8d..db8fe59 100644
--- a/src/components/FAQ/FAQ.jsx
+++ b/src/components/FAQ/FAQ.jsx
@@ -43,12 +43,15 @@ const FAQ = () => {
   ];
   return (
     <div id="faq" className="faq mt-[80px] px-4 relative">
-      <Image className="bottom-right1 top-[-80px] z-[0]" src={bottom_right} />
+      <Image
+        className="pointer-events-none bottom-right1 top-[-80px] z-[0]"
+        src={bottom_right}
+      />
       <div className="relative container flex flex-col z-10 items-start px-10 py-10 mx-auto faq-container overflow-hidden ">
         <Image
           src={Bg}
           alt="bg"
-          className="absolute z-0 top-0 bottom-0 right-0 left-0 opacity-80"
+          className="pointer-events-none absolute z-0 top-0 bottom-0 right-0 left-0 opacity-80"
           fill
         />
         {/* <Image
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index e70f186..8e09f56 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -6,11 +6,21 @@ import MECLogo from "@/assets/logos/mec@official.svg";
 import ExcelLogo from "@/assets/logos/excel@2024.svg";
 
 import excel from "@/assets/Footer/excel.svg";
-import { FaInstagram, FaFacebookF, FaLinkedinIn } from "react-icons/fa";
-import { FaXTwitter } from "react-icons/fa6";
+import {
+  FaInstagram,
+  FaFacebookF,
+  FaLinkedinIn,
+  FaMapMarkerAlt,
+} from "react-icons/fa";
+import {FaXTwitter} from "react-icons/fa6";
 
 const Footer = () => {
   const FooterSocials = [
+    {
+      item: "Instagram",
+      link: "https://www.instagram.com/excelmec",
+      icon: FaInstagram,
+    },
     {
       item: "Twitter",
       link: "https://x.com/excelmec",
@@ -21,16 +31,16 @@ const Footer = () => {
       link: "https://www.facebook.com/excelmec",
       icon: FaFacebookF,
     },
-    {
-      item: "Instagram",
-      link: "https://www.instagram.com/excelmec",
-      icon: FaInstagram,
-    },
     {
       item: "LinkedIn",
       link: "https://www.linkedin.com/company/excelmec",
       icon: FaLinkedinIn,
     },
+    {
+      item: "GMap",
+      link: "https://maps.app.goo.gl/PycGaWgidy8eDQsx9",
+      icon: FaMapMarkerAlt,
+    },
   ];
   return (
     <footer className="max-md:min-h-dvh container relative z-10 flex flex-col items-center justify-between pt-32 px-6 pb-6 m-auto mt-[80px] sm:p-10">
@@ -38,7 +48,7 @@ const Footer = () => {
         <Image
           src={excel}
           alt="excellogo"
-          className="skeleton"
+          className="skeleton pointer-events-none"
           data-aos="fade-up"
         ></Image>
         <div className="mt-3 text-center">
@@ -66,7 +76,7 @@ const Footer = () => {
         <Image
           src={ExcelLogo}
           alt="ExcelLogo"
-          className="h-[64px] w-fit cursor-pointer max-md:h-[50px]"
+          className="h-[64px] pointer-events-none w-fit cursor-pointer max-md:h-[50px]"
           onClick={() => {
             window.open("https://excelmec.org", "_blank");
           }}
@@ -86,7 +96,7 @@ const Footer = () => {
         <Image
           src={MECLogo}
           alt="mec"
-          className="h-[62px] max-md:scale-90 w-fit cursor-pointer max-md:h-[64px]"
+          className="h-[62px] pointer-events-none max-md:scale-90 w-fit cursor-pointer max-md:h-[64px]"
           onClick={() => {
             window.open("https://www.mec.ac.in", "_blank");
           }}
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 866a5fd..a415cbc 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -87,7 +87,7 @@ const Navbar = () => {
       </div> */}
       <div className=" tracking-[0.1rem] font-base-neue-black text-3xl">
         <a href="https://www.excelmec.org">
-          <Image src={ExcelLogoMob} className="w-8" />
+          <Image src={ExcelLogoMob} className="pointer-events-none w-8" />
         </a>
       </div>
 
diff --git a/src/components/Partners/partners.jsx b/src/components/Partners/partners.jsx
index 4ce66fe..4006018 100644
--- a/src/components/Partners/partners.jsx
+++ b/src/components/Partners/partners.jsx
@@ -42,8 +42,12 @@ const Partners = () => {
 
   return (
     <section className="partners-section pt-[80px] " id="partners">
-      <Image className="top-left1" src={top_left} />
-      <Image className="bottom-right1" src={bottom_right} alt="bot-right" />
+      <Image className="pointer-events-none top-left1" src={top_left} />
+      <Image
+        className="pointer-events-none bottom-right1"
+        src={bottom_right}
+        alt="bot-right"
+      />
       {/* <div className="absolute bg-gradient-to-b from-[#2d0c14] to-5% to-transparent bg-no-repeat inset-0" /> */}
       {/* <div className="absolute bg-no-repeat inset-0" /> */}
       <h1 className="text-5xl partners-title max-md:text-4xl">
@@ -61,7 +65,7 @@ const Partners = () => {
               <Image
                 src={KeyValue}
                 alt="KEYVALUE LOGO"
-                className="partner-logo styled-partner"
+                className="pointer-events-none partner-logo styled-partner"
               />
             </a>
             <p className="partner-label font-syne-medium">Platinum Partner</p>
@@ -75,7 +79,7 @@ const Partners = () => {
               <Image
                 src={Geojit}
                 alt="GEOJIT LOGO"
-                className="partner-logo styled-partner"
+                className="pointer-events-none partner-logo styled-partner"
               />
             </a>
             <p className="partner-label font-syne-medium">Platinum Partner</p>
@@ -88,7 +92,7 @@ const Partners = () => {
             <Image
               src={Polygon}
               alt="POLYGON LOGO"
-              className="partner-logo"
+              className="pointer-events-none partner-logo"
               width={240}
               height={70}
             />
@@ -98,7 +102,7 @@ const Partners = () => {
             <Image
               src={Devfolio}
               alt="DEVFOLIO LOGO"
-              className="partner-logo"
+              className="pointer-events-none partner-logo"
               width={240}
               height={70}
             />
@@ -108,7 +112,7 @@ const Partners = () => {
             <Image
               src={EthIndia}
               alt="ETHINDIA LOGO"
-              className="partner-logo"
+              className="pointer-events-none partner-logo"
               width={240}
               height={70}
             />
@@ -125,7 +129,7 @@ const Partners = () => {
               <Image
                 src={KSUM}
                 alt="KERALA STARTUP MISSION LOGO"
-                className="partner-logo styled-partner"
+                className="pointer-events-none partner-logo styled-partner"
                 width={240}
                 height={70}
               />
diff --git a/src/components/Timeline/Timeline.jsx b/src/components/Timeline/Timeline.jsx
index a4212a7..7a070bc 100644
--- a/src/components/Timeline/Timeline.jsx
+++ b/src/components/Timeline/Timeline.jsx
@@ -1,8 +1,8 @@
 "use client";
 
 import TimelineCard from "./TimelineCard";
-import { TimelineData } from "@/constants";
-import { timelineItemClasses } from "@mui/lab";
+import {TimelineData} from "@/constants";
+import {timelineItemClasses} from "@mui/lab";
 import Timeline from "@mui/lab/Timeline";
 import "../About/About.css";
 import circle1 from "../../assets/backgrounds/about/circle1.png";
@@ -21,11 +21,14 @@ const TimelineSection = () => {
     >
       {/* <div className="absolute " /> */}
 
-      <Image className="top-left12 top-[-80px]" src={top_left} />
-      <Image className="bottom-right" src={bottom_right} />
-      <Image className="circle1" src={circle1} />
-      <Image className="circle2" src={circle2} />
-      <Image className="circle3" src={circle3} />
+      <Image
+        className="pointer-events-none top-left12 top-[-80px]"
+        src={top_left}
+      />
+      <Image className="pointer-events-none bottom-right" src={bottom_right} />
+      <Image className="pointer-events-none circle1" src={circle1} />
+      <Image className="pointer-events-none circle2" src={circle2} />
+      <Image className="pointer-events-none circle3" src={circle3} />
       <div className="container flex flex-col items-center justify-center min-h-screen m-auto font-generalSans text-our_white">
         <h2
           className="font-base-neue-bold text-5xl tracking-widest mirror-vertical text-center text-white xl:scale-100 max-md:text-4xl text-[#FFFFFF]/[0.8] "
diff --git a/src/components/WhyParticipate/WhyParticipate.jsx b/src/components/WhyParticipate/WhyParticipate.jsx
index 2fefdb9..78b96ed 100644
--- a/src/components/WhyParticipate/WhyParticipate.jsx
+++ b/src/components/WhyParticipate/WhyParticipate.jsx
@@ -1,8 +1,8 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, {useState, useRef, useEffect} from "react";
 import InfoCard from "./InfoCard";
 import Image from "next/image";
-import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
-import { Swiper, SwiperSlide } from "swiper/react";
+import {FaChevronLeft, FaChevronRight} from "react-icons/fa";
+import {Swiper, SwiperSlide} from "swiper/react";
 import "swiper/css";
 import "swiper/css/effect-coverflow";
 import "swiper/css/pagination";
@@ -133,8 +133,11 @@ const WhyParticipate = () => {
     <>
       <div id="why" className="main-container pt-[80px]">
         <div className="absolute  right-0 left-0 top-0 bottom-0" />
-        <Image className="top-left1" src={top_left} />
-        <Image className="bottom-right1" src={bottom_right} />
+        <Image className="pointer-events-none top-left1" src={top_left} />
+        <Image
+          className="pointer-events-none bottom-right1"
+          src={bottom_right}
+        />
         {/* <Image className="circle11" src={circle1} /> */}
         {/* <Image className="circle21" src={circle2} /> */}
         {/* <Image className="circle31" src={circle3} /> */}
@@ -157,11 +160,11 @@ const WhyParticipate = () => {
               slideShadows: false,
             }}
             breakpoints={{
-              480: { slidesPerView: 1, spaceBetween: 10 },
-              768: { slidesPerView: 1.4, spaceBetween: 20 },
-              1024: { slidesPerView: 2, spaceBetween: 20 },
-              1280: { slidesPerView: 2, spaceBetween: 40 },
-              1536: { slidesPerView: 3, spaceBetween: 30 },
+              480: {slidesPerView: 1, spaceBetween: 10},
+              768: {slidesPerView: 1.4, spaceBetween: 20},
+              1024: {slidesPerView: 2, spaceBetween: 20},
+              1280: {slidesPerView: 2, spaceBetween: 40},
+              1536: {slidesPerView: 3, spaceBetween: 30},
             }}
             // autoplay={{
             //   delay: 3000,
diff --git a/src/components/prizes/prizes.css b/src/components/prizes/prizes.css
index b5a9efd..50b4bcb 100644
--- a/src/components/prizes/prizes.css
+++ b/src/components/prizes/prizes.css
@@ -63,13 +63,13 @@
   border: 1px solid rgba(255, 255, 255, 0.4);
   backdrop-filter: blur(20px);
   border-radius: 15px;
-  padding: 40px;
-  width: 320px;
+  padding: 20px 30px;
+  width: 300px;
   text-align: center;
   color: #ffffff;
   position: relative;
   z-index: 1;
-  margin: 0 -20px;
+  margin: 0 -15px;
   transform: scale(0.95);
   transition: transform 0.3s ease-in-out, z-index 0.3s ease-in-out;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -91,41 +91,32 @@
 }
 
 .icon {
-  height: 200px;
-  width: 250px;
+  height: 160px;
+  width: 190px;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
-  margin-bottom: 20px;
+  margin: auto;
 }
 
 .second-prize .icon {
   background: url("../../assets/Gallery/silver.png") no-repeat center center;
   background-size: cover;
-  height: 200px;
-  width: 250px;
   position: relative;
-  margin-bottom: 20px;
   backdrop-filter: blur(8px);
 }
 
 .first-prize .icon {
   background: url("../../assets/Gallery/gold.png") no-repeat center center;
   background-size: cover;
-  height: 200px;
-  width: 250px;
   position: relative;
-  margin-bottom: 20px;
   backdrop-filter: blur(8px);
 }
 
 .third-prize .icon {
   background: url("../../assets/Gallery/bronze.png") no-repeat center center;
   background-size: cover;
-  height: 200px;
-  width: 250px;
   position: relative;
-  margin-bottom: 20px;
   backdrop-filter: blur(8px);
 }
 
@@ -141,13 +132,13 @@
 .price {
   font-size: 2.5rem;
   font-weight: bold;
-  margin: 20px 0;
+  margin: 10px 0;
 }
 
 @media (max-width: 768px) {
   .pricing-cards {
     flex-direction: column;
-    gap: 30px;
+    gap: 0px;
   }
 
   .glass-card {
@@ -158,10 +149,16 @@
 
   .first-prize {
     order: 1;
+    transform: translateY(-30px) scale(1);
+  }
+  .first-prize:hover {
+    order: 1;
+    transform: translateY(-30px) scale(1.05);
   }
 
   .second-prize {
     order: 2;
+    margin-bottom: 1rem;
   }
 
   .third-prize {
@@ -169,8 +166,8 @@
   }
 
   .icon {
-    height: 120px;
-    width: 120px;
+    height: 180px;
+    width: 230px;
   }
 
   .pricing-header {
@@ -199,11 +196,6 @@
     padding: 15px;
   }
 
-  .icon {
-    height: 100px;
-    width: 100px;
-  }
-
   .prize-title {
     font-size: 1rem;
   }
diff --git a/src/components/prizes/prizes.jsx b/src/components/prizes/prizes.jsx
index 3f6c4e8..5022719 100644
--- a/src/components/prizes/prizes.jsx
+++ b/src/components/prizes/prizes.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useState} from "react";
 import "./prizes.css";
 import right from "@/assets/Landing/right2.svg";
 import Image from "next/image";
@@ -30,12 +30,15 @@ function Pricing() {
   return (
     <div className="pricing-section pt-[120px]" id="prizes">
       <Image
-        className="bottom-right"
+        className="pointer-events-none bottom-right"
         src={bottom_right}
         alt="bot-right"
       />
-      <Image className="top-left12" src={top_left} />
-      <Image className="circle21 scale-[1.5] right-[100px] opacity-60" src={circle2} />
+      <Image className="pointer-events-none top-left12" src={top_left} />
+      <Image
+        className="pointer-events-none circle21 scale-[1.5] right-[100px] opacity-60"
+        src={circle2}
+      />
       {/* <div className="absolute right-0 left-0 top-0 bottom-0" /> */}
       {/* <div className="absolute bg-gradient-to-b from-transparent from-95% to-[#2d0c14] bg-no-repeat inset-0" /> */}
       <h1 className="text-5xl tracking-wider pricing-header font-base-neue-bold max-md:text-4xl">
@@ -73,7 +76,7 @@ function Pricing() {
   );
 }
 
-function CyclingCount({ end }) {
+function CyclingCount({end}) {
   const [displayedCount, setDisplayedCount] = useState("0000");
   const endString = end.toString().padStart(4, "0");