diff --git a/src/assets/Gallery/hftbn.jpeg b/src/assets/Gallery/hftbn.jpeg
deleted file mode 100644
index b88e97b..0000000
Binary files a/src/assets/Gallery/hftbn.jpeg and /dev/null differ
diff --git a/src/assets/Gallery/hftbrb.png b/src/assets/Gallery/hftbrb.png
new file mode 100644
index 0000000..4cdf60f
Binary files /dev/null and b/src/assets/Gallery/hftbrb.png differ
diff --git a/src/assets/Gallery/hftgn.jpg b/src/assets/Gallery/hftgn.jpg
deleted file mode 100644
index 575eed3..0000000
Binary files a/src/assets/Gallery/hftgn.jpg and /dev/null differ
diff --git a/src/assets/Gallery/hftgrb.png b/src/assets/Gallery/hftgrb.png
new file mode 100644
index 0000000..be96b51
Binary files /dev/null and b/src/assets/Gallery/hftgrb.png differ
diff --git a/src/assets/Gallery/hftsn.jpg b/src/assets/Gallery/hftsn.jpg
deleted file mode 100644
index 6592f0c..0000000
Binary files a/src/assets/Gallery/hftsn.jpg and /dev/null differ
diff --git a/src/assets/Gallery/hftsrb.png b/src/assets/Gallery/hftsrb.png
new file mode 100644
index 0000000..d0315eb
Binary files /dev/null and b/src/assets/Gallery/hftsrb.png differ
diff --git a/src/components/WhyParticipate/InfoCard.jsx b/src/components/WhyParticipate/InfoCard.jsx
index 153cf09..c9d1abb 100644
--- a/src/components/WhyParticipate/InfoCard.jsx
+++ b/src/components/WhyParticipate/InfoCard.jsx
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+
 const InfoCard = ({
   title,
   text,
@@ -8,19 +8,19 @@ const InfoCard = ({
   return (
     // <div className=" cardbgdiv flex justify-center items-center flex-shrink-0 ">
       // <div className="flex flex-col gap-2 w-[83%] ">
-        <div className={` cardcontainer1 rounded-[20px] flex flex-col h-[550px] items-center justify-center py-10 px-8 border-[0.2px] border-solid border-[#9291918f] backdrop-blur-[10px] bg-opacity-50 backdrop-saturate-[80%] bg-[rgba(255,255,255,0.1)]  `} >
+        <div className={` cardcontainer1 rounded-[20px] flex flex-col h-[100%] items-center justify-center  px-8 border-[0.2px] border-solid border-[#9291918f] backdrop-blur-[10px] bg-opacity-50 backdrop-saturate-[80%] bg-[rgba(255,255,255,0.1)]  `} >
           {/* <Image className='elementimg'
             src="/element.png" 
             alt="Description of the element" 
             width={150} 
             height={150} 
     /> */}
-          <h3 className={`text-4xl font-[500] mt-[20px] tracking-wide ${color}`}>
+          <h3 className={` cardtitle  font-[500] mt-[30px] tracking-wide ${color}`}>
             {title} 
           </h3>
         <div className="flex rounded-b-[10px]   relative py-10 px-8 gap-10 min-h-[80%] rounded-[12px] ">
           <span className={`absolute w-[80%] h-[1px] mt-[10px] bg-white`} />
-          <p className="mt-[50px] text-xl font-[400] text-justify ">{text}</p>
+          <p className="mt-[50px] cardp font-[400] text-justify ">{text}</p>
         </div>
         </div>
       // </div>
diff --git a/src/components/WhyParticipate/WhyParticipate.css b/src/components/WhyParticipate/WhyParticipate.css
index 6d539fc..21dcbb2 100644
--- a/src/components/WhyParticipate/WhyParticipate.css
+++ b/src/components/WhyParticipate/WhyParticipate.css
@@ -7,7 +7,7 @@
     font-family: 'neue';
 }
 
-.swiper-button-next{
+/* .swiper-button-next{
     position: absolute;
     color: #fff;
     height: 50px;
@@ -30,9 +30,6 @@
     border: 5px solid #fff;
 }
 
-/* .cardcontainer1:hover{
-    scale: 1.02
-    } */
     
 .swiper-button-prev{
         position: absolute;
@@ -49,6 +46,10 @@
         transition: 0.4s ease-in-out;
 }
 
+html{
+    scroll-behavior: smooth;
+}
+
 .cardbgdiv{
     width: fit-content;
     padding: 0;
@@ -63,14 +64,7 @@
 
 
 
-
-/* .cardcontainer1{
-    box-shadow: 0px 0px 20px #ffffff4d;
-} */
-
 .main-container{
-    /* background-image: url(../../assets/WhyParticipate/bg2.jpg); */
-    /* background-image: linear-gradient(130deg, #1515924d, #1109254d); */
     background-image: url(../../assets/WhyParticipate/bgimg2.png);
     background-size: cover;
     background-repeat: no-repeat;
@@ -78,27 +72,32 @@
     width: 100vw;
 }
 
+.swiper{
+    height: 60%;
+    display: grid;
+    place-items: center;
+    padding: 0;
+    width: 90%;
+    
+}
+
+
+.swiper-wrapper{
+    width: 100%;
+}
+
+
 .cardcontainer1{
     box-shadow: 20px 0px 50px #0000002a,
                 -20px 0 50px #0000002a;
-    /* animation: bright-dim-border 5s infinite; */
     backdrop-filter: blur(10px);
 }
 
-/* @keyframes bright-dim-border {
-    0% {
-      border: 0.1px solid rgba(255, 255, 255, 0.5);
-      box-shadow: 0 0 2px rgba(255, 255, 255, 0.3);
-    }
-    50% {
-      border: 0.2px solid rgba(255, 255, 255, 1);
-      box-shadow: 0 0 3px rgba(255, 255, 255, 1);
-    }
-    100% {
-      border: 0.1px solid rgba(255, 255, 255, 0.5);
-      box-shadow: 0 0 2px rgba(255, 255, 255, 0.3);
-    }
-} */
+.swiper-slide-active{
+    height: 90%;
+}
+
+
 
 
 @media (max-width: 768px) {
@@ -123,4 +122,155 @@
     .cardcontainer1{
         scale: 0.9;
     }
-}
\ No newline at end of file
+
+    .cardtitle{
+        font-size: 2rem;
+        margin-top: 20px;
+    }
+} */
+
+.main-container{
+    background-image: url(../../assets/WhyParticipate/bgimg2.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    height: 100vh;
+    width: 100vw;
+}
+
+.swiper {
+    height: 80%;
+    display: flex;
+    align-items: center;
+    width: 90%;
+    margin: auto;
+    padding-top: 50px;
+    padding-bottom: 30px;
+}
+
+.swiper-wrapper {
+    width: 100%;
+
+}
+
+.cardcontainer1 {
+    box-shadow: 20px 0px 50px #0000002a,
+                -20px 0 50px #0000002a;
+    backdrop-filter: blur(10px);
+    transition: transform 0.3s ease-in-out;
+}
+
+.swiper-button-prev{
+    position: absolute;
+    color: #fff;
+    height: 50px;
+    width: 50px;
+    background-image: url(../../assets/WhyParticipate/arrow.png);
+    transform: rotate(180deg);
+    cursor: pointer;
+    z-index: 10;
+    display: flex;
+    top: 50%;
+    left: -10px;
+    transition: 0.4s ease-in-out;
+}
+
+.swiper-button-next{
+    position: absolute;
+    color: #fff;
+    height: 50px;
+    width: 50px;
+    background-image: url(../../assets/WhyParticipate/arrow.png);
+    cursor: pointer;
+    z-index: 10;
+    display: flex;
+    top: 50%;
+    right: -10px;
+    transition: 0.4s ease-in-out;
+}
+
+.cardtitle {
+    font-size: 2.3rem;
+    margin-top: 20px;
+    text-align: center;
+}   
+
+.cardp{
+    font-size: 1.3rem;
+    margin-bottom: 10px;
+}
+.cardcontainer1:hover {
+    transform: scale(1.02);
+}
+
+.swiper-slide-active {
+    height: 90%;
+}
+
+.cardcontainer1{
+    height: 100%;
+
+}
+
+
+
+
+
+
+/* For small devices */
+@media (max-width: 768px) {
+    .swiper {
+        height: 80%;
+    }
+
+    .swiper-button-next, .swiper-button-prev {
+        height: 30px;
+        width: 30px;
+        background-size: contain;
+    }
+
+    .cardcontainer1 {
+        scale: 0.9;
+        
+    }
+
+    .cardtitle {
+        font-size: 3rem;
+        margin-top: 15px;
+    }
+
+    .main-container{
+        background-image: url(../../assets/WhyParticipate/bgimg3.png);
+    }
+}
+
+/* For very small devices */
+@media (max-width: 480px) {
+    .swiper {
+        height: 85%;
+    }
+
+    .swiper-button-next, .swiper-button-prev {
+        height: 25px;
+        width: 25px;
+    }
+
+    .cardcontainer1 {
+        scale: 0.8;
+        padding: 0;
+    }
+
+    .cardtitle {
+        font-size: 2rem;
+    }
+}
+
+/* For larger screens */
+/* @media (min-width: 1280px) {
+    .swiper {
+        height: 60%;
+    }
+
+    .cardcontainer1 {
+        scale: 1.1;
+    }
+} */
diff --git a/src/components/WhyParticipate/WhyParticipate.jsx b/src/components/WhyParticipate/WhyParticipate.jsx
index 01154d2..40fe7c8 100644
--- a/src/components/WhyParticipate/WhyParticipate.jsx
+++ b/src/components/WhyParticipate/WhyParticipate.jsx
@@ -124,80 +124,48 @@ const WhyParticipate = () => {
     // </div>
 
     <>
-    <div className="main-container">
+    <div id = "why" className="main-container">
 
     
-      <div className="container h-[100vh] block place-content-center max-w-[95%] md:max-w-[70%] mx-auto  py-8">
+      <div className="container h-[100%] block place-content-center  md:max-w-[80%] mx-auto  py-8">
         <h2 className=" titleh2 text-5xl mb-[50px] text-center text-white py-5 tracking-wide ">
-          WHY PARTICIPATE ?
+          WHY PARTICIPATE
         </h2>
         
         <Swiper
-          effect={'coverflow'}
-          grabCursor={true}
-          navigation={true}
-          centeredSlides={true}
-          // slidesPerView={3}
-          loop={true}
-          coverflowEffect={{
-            rotate: 0,
-            stretch: 0,
-            depth: 150,
-            modifier: 2.5,
-            slideShadows: false,
-          }}
-          // autoplay={{
-          //   delay: 5000,
-          //   disableOnInteraction: false,
-          // }}
-          
-          modules={[EffectCoverflow, Pagination, Navigation, Autoplay]}
-          className="mySwiper"
-          slidesPerView={1} 
+    effect={'coverflow'}
+    grabCursor={true}
+    navigation={true}
+    centeredSlides={true}
+    loop={true}
+    coverflowEffect={{
+        rotate: 0,
+        stretch: 0,
+        depth: 150,
+        modifier: 2.5,
+        slideShadows: false,
+    }}
     breakpoints={{
-      640: {
-        slidesPerView: 1,
-        spaceBetween: 10,
-      },
-      768: {
-        slidesPerView: 1,
-        // spaceBetween: 40,
-      },
-      800: {
-        slidesPerView: 2,
-        spaceBetween: 20,
-      },
-      1024: { 
-        slidesPerView: 2,
-        spaceBetween: 30,
-      },
-      1280: { 
-        slidesPerView: 3,
-        spaceBetween: 30,
-      },
+        480: { slidesPerView: 1, spaceBetween: 10 },
+        768: { slidesPerView: 1.3, spaceBetween: 20 },
+        1024: { slidesPerView: 2, spaceBetween: 30 },
+        1280: { slidesPerView: 2, spaceBetween: 40 },
+        1536: { slidesPerView: 3, spaceBetween: 50 },
     }}
+    modules={[EffectCoverflow, Pagination, Navigation, Autoplay]}
+    className="mySwiper"
 >
-        
-        {cards.map((card, index) => (
-            <div
-              key={index}
-              className="flex-shrink-0 h-full "
-              style={{ width: `${cardWidth}px` }}
-            >
-              <div className="px-2">
-              <SwiperSlide>
-          
-                <InfoCard
-                  title={card.title}
-                  text={card.text}
-                  gradient={card.gradient}
-                  color={card.color}
-                  />
-              </SwiperSlide>
-              </div>
-            </div>
-          ))}
-      </Swiper>
+    {cards.map((card, index) => (
+        <SwiperSlide key={index}>
+            <InfoCard
+                title={card.title}
+                text={card.text}
+                gradient={card.gradient}
+                color={card.color}
+            />
+        </SwiperSlide>
+    ))}
+</Swiper>
 
       </div>
       </div>
diff --git a/src/components/prizes/prizes.css b/src/components/prizes/prizes.css
index f412fab..5d1e04c 100644
--- a/src/components/prizes/prizes.css
+++ b/src/components/prizes/prizes.css
@@ -1,4 +1,7 @@
-/* General Section Styling */
+@font-face{
+  font-family: 'neue';
+  src: url(../../assets/fonts/BaseNeue/BaseNeue-Black.woff);
+}
 .pricing-section {
   background: linear-gradient(
     to top right,
@@ -7,7 +10,7 @@
     rgba(82, 42, 76, 0.7),
     transparent 30%
   );
-  background-color: #160c15; /* Solid fallback background */
+  background-color: #160c15; 
   min-height: 100vh;
   padding: 50px 20px;
   display: flex;
@@ -15,9 +18,10 @@
   align-items: center;
   position: relative;
   color: white;
+  margin-top: 100px; 
+  text-align: center;
 }
 
-/* Subtle Glow Behind Cards */
 .pricing-cards::before {
   content: "";
   position: absolute;
@@ -31,60 +35,77 @@
   z-index: 1;
 }
 
-/* Typography */
+
 @import url("https://fonts.googleapis.com/css2?family=Syne:wght@700&family=Presta:wght@500&display=swap");
 
 .pricing-header {
-  font-family: "Syne", sans-serif;
+  font-family: 'neue';
   font-size: 3rem;
   color: #ffffff;
   margin-bottom: 10px;
 }
 
 .pricing-subheader {
-  font-size: 1.2rem;
+  font-size: 1.3rem;
   margin-bottom: 40px;
   color: #b8a0c9;
-  font-family: "Syne", sans-serif;
+  font-family: 'Syne-Medium';
+  font-weight: 100; 
+  letter-spacing: 0.05rem; 
   text-align: center;
+  padding-bottom: 30px;
 }
 
-/* Card Layout */
+
 .pricing-cards {
   display: flex;
-  gap: 20px;
+  gap: 0px;
   justify-content: center;
   flex-wrap: wrap;
   position: relative;
   z-index: 2;
+ 
 }
 
-/* Glassmorphism Effect for Cards */
+
 .glass-card {
-  /*background: rgba(255, 255, 255, 0.1);  Transparent background */
-  backdrop-filter: blur(10px); /* Frosted effect */
+ /*background: rgba(255, 255, 255, 0.1); 
+  border: 1px solid rgba(255, 255, 255, 0.063);
+  backdrop-filter: blur(10px); 
+  border-radius: 15px;
+  /*border-color: #ffffff;   */
+  border: 1px solid rgba(255, 255, 255, 0.2); 
+  backdrop-filter: blur(20px);
   border-radius: 15px;
-  border-color: #ffffff; /* Smooth edges */
+  border-color: rgba(255, 255, 255, 0.2);
   padding: 40px;
   width: 320px;
   text-align: center;
   color: #ffffff;
-  transition: transform 0.3s ease-in-out;
-  /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  Subtle shadow for depth */
+  font-family: 'Syne-Medium';
+  position: relative;
+  z-index: 1;
+  margin: 0 -20px; 
+  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);  */
 }
 
-/* Elevated Card Styling */
+
 .first-prize {
-  transform: translateY(-20px);
-  /* No border applied */
+  /*transform: translateY(-20px);
+  */
+  transform: translateY(-30px) scale(1.05);
+  z-index: 3;
 }
 
-/* Hover Effect */
+
 .glass-card:hover {
-  transform: translateY(-10px);
+  transform: scale(1.05); 
+  z-index: 4;
 }
 
-/* Icon Styling */
+
 .icon {
   height: 200px;
   width: 250px;
@@ -94,41 +115,42 @@
   margin-bottom: 20px;
 }
 
+
 .second-prize .icon {
-  background: url("../../assets/Gallery/hftsn.jpg") no-repeat center center;
+  background: url("../../assets/Gallery/hftsrb.png") no-repeat center center;
+  background-size: cover;
   height: 200px;
   width: 250px;
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
+  position: relative;
   margin-bottom: 20px;
+  backdrop-filter: blur(8px); 
 }
 
 .first-prize .icon {
-  background: url("../../assets/Gallery/hftgn.jpg") no-repeat center center;
+  background: url("../../assets/Gallery/hftgrb.png") no-repeat center center;
+  background-size: cover;
   height: 200px;
   width: 250px;
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
+  position: relative;
   margin-bottom: 20px;
+  backdrop-filter: blur(8px); 
 }
 
 .third-prize .icon {
-  background: url("../../assets/Gallery/hftbn.jpeg") no-repeat center center;
+  background: url("../../assets/Gallery/hftbrb.png") no-repeat center center;
+  background-size: cover;
   height: 200px;
   width: 250px;
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
+  position: relative;
   margin-bottom: 20px;
+  backdrop-filter: blur(8px);
 }
 
-/* Prize Title */
+
 .prize-title {
   font-size: 1.8rem;
   font-weight: bolder;
-  font-family: "Presta medium";
+  font-family: 'neue';
   color: #ffffff;
   margin-bottom: 15px;
   text-transform: uppercase;
@@ -138,8 +160,8 @@
   -webkit-text-fill-color: transparent;
 }
 
-/* Prize Amount */
 .price {
+  font-family: 'neue';
   font-size: 2.5rem;
   font-weight: bold;
   background: linear-gradient(180deg, #ff7dff, #ffffff);
@@ -148,14 +170,72 @@
   margin: 20px 0;
 }
 
-/* Responsive Design */
 @media (max-width: 768px) {
   .pricing-cards {
-    flex-direction: column;
-    align-items: center;
+    flex-direction: column; 
+    gap: 30px; 
   }
+
   .glass-card {
     width: 100%;
     max-width: 320px;
+    margin: 0 auto;
+  }
+
+  
+  .first-prize {
+    order: 1;
+  }
+
+  .second-prize {
+    order: 2; 
+  }
+
+  .third-prize {
+    order: 3; 
+  }
+
+  .icon {
+    height: 120px; 
+    width: 120px;
+  }
+
+  .pricing-header {
+    font-size: 1.8rem;
+  }
+
+  .prize-title {
+    font-size: 1.3rem;
+  }
+
+  .price {
+    font-size: 1.6rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .pricing-header {
+    font-size: 1.3rem;
+  }
+
+  .pricing-subheader {
+    font-size: 0.8rem;
+  }
+
+  .glass-card {
+    padding: 15px;
+  }
+
+  .icon {
+    height: 100px;
+    width: 100px;
+  }
+
+  .prize-title {
+    font-size: 1rem;
+  }
+
+  .price {
+    font-size: 1.4rem;
   }
 }
diff --git a/src/components/prizes/prizes.jsx b/src/components/prizes/prizes.jsx
index 7bf5b14..a76756e 100644
--- a/src/components/prizes/prizes.jsx
+++ b/src/components/prizes/prizes.jsx
@@ -24,7 +24,7 @@ function Pricing() {
 
   return (
     <div className="pricing-section">
-      <h1 className="pricing-header">Prizes</h1>
+      <h1 className="pricing-header">PRIZES</h1>
       <p className="pricing-subheader">Win exciting prizes in our hackathon!</p>
       <div className="pricing-cards">
         <div className="pricing-card second-prize glass-card">