diff --git a/src/components/AboutSection.jsx b/src/components/AboutSection.jsx
index 9c6e362..03c6d3d 100644
--- a/src/components/AboutSection.jsx
+++ b/src/components/AboutSection.jsx
@@ -3,7 +3,10 @@ import { siteConfig } from "../config/navbarHero";
 
 export default function AboutSection() {
   return (
-    <section className="bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16">
+    <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">
           <img
@@ -29,12 +32,15 @@ export default function AboutSection() {
           </p>
 
           <div className="flex flex-col sm:flex-row sm:justify-center md:justify-start items-center mt-6 gap-4">
-            <Button
-              className="bg-white text-blue-600 px-10 shadow-lg py-2 rounded-md border border-black transition duration-300 ease-in-out hover:bg-[rgba(6,25,70,1)] hover:text-white"
+            <a
+              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"
               style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
             >
               {siteConfig.about.button}
-            </Button>
+            </a>
           </div>
         </div>
       </div>
diff --git a/src/components/Achievements.jsx b/src/components/Achievements.jsx
index 8967e85..32fea95 100644
--- a/src/components/Achievements.jsx
+++ b/src/components/Achievements.jsx
@@ -19,7 +19,7 @@ export default function Achievements() {
           solidifying their reputation for excellence in mechanical engineering.
         </p>
         <button
-          className="bg-white text-blue-800 border border-blue-800 px-4 py-2 rounded hover:bg-blue-50 md:mb-12"
+          className="bg-[rgba(6,25,70,1)] text-white border-blue-800 px-4 py-2 rounded hover:bg-blue-50 md:mb-12  hover:text-black"
           onClick={() => navigate("/achievements")}
         >
           View All Achievements &gt;
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 29667b5..d88d923 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,16 +1,11 @@
 import { Link } from "react-router-dom";
-import {
-  FaFacebookF,
-  FaTwitter,
-  FaInstagram,
-  FaLinkedinIn,
-} from "react-icons/fa";
+import { FaInstagram, FaLinkedinIn } from "react-icons/fa";
 import { FiMail, FiPhone } from "react-icons/fi";
 import { GoLocation } from "react-icons/go";
+
 const Footer = ({
   title = "ASME NIT Rourkela Chapter",
   description = "The American Society of Mechanical Engineers Student Chapter at NIT Rourkela, fostering a culture of innovation and technical learning through innovation, collaboration, and hands-on learning.",
-
   social = {
     instagram: "https://www.instagram.com/asme.nitrkl/",
     linkedin: "https://www.linkedin.com/company/asme-nit-rourkela",
@@ -18,21 +13,20 @@ const Footer = ({
   year = new Date().getFullYear(),
 }) => {
   return (
-    <footer className="bg-[#0B2044] text-white px-10 py-8">
-      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
-        {/* Left Section */}
-        <div>
-          <div className="flex gap-4 mb-4 flex-wrap">
+    <footer className="bg-[#0B2044] text-white px-4 py-8 sm:px-8 sm:py-10 md:px-12 md:py-12">
+      <div className="max-w-7xl mx-auto grid grid-cols-1 gap-10 sm:gap-12 md:grid-cols-3 md:gap-8">
+        {/* Logo and Description Section */}
+        <div className="order-1 md:order-none">
+          <div className="flex items-center gap-4 mb-6 flex-wrap">
             <img
               src="https://res.cloudinary.com/dswk9scro/image/upload/v1752377324/Group_cropped_qgqzw9.png"
               alt="ASME Logo"
-              className="w-8 h-8 object-contain"
+              className="w-12 h-12 object-contain"
             />
-            <h2 className="text-xl font-bold">{title}</h2>
+            <h2 className="text-2xl font-bold">{title}</h2>
           </div>
-
-          <p className="text-sm">{description}</p>
-          <div className="flex gap-4 mt-4 text-lg">
+          <p className="text-base mb-6">{description}</p>
+          <div className="flex gap-6 text-2xl">
             <a
               href={social.instagram}
               aria-label="Instagram"
@@ -52,10 +46,10 @@ const Footer = ({
           </div>
         </div>
 
-        {/* Middle Section */}
-        <div>
-          <h3 className="text-xl font-semibold">Quick Links</h3>
-          <ul className="mt-2 space-y-1 text-sm">
+        {/* Quick Links Section */}
+        <div className="order-3 md:order-none">
+          <h3 className="text-2xl font-semibold mb-6">Quick Links</h3>
+          <ul className="space-y-3 text-base">
             <li>
               <Link to="/team" className="hover:underline">
                 Team
@@ -79,20 +73,20 @@ const Footer = ({
           </ul>
         </div>
 
-        {/* Right Section */}
-        <div>
-          <h3 className="text-xl font-semibold">Contact Info</h3>
-          <div className="text-sm mt-4 text-white space-y-4">
+        {/* Contact Info Section */}
+        <div className="order-2 md:order-none">
+          <h3 className="text-2xl font-semibold mb-6">Contact Info</h3>
+          <div className="text-base space-y-6">
             <div className="flex items-center gap-4">
-              <FiMail className=" text-[#51B8F2] text-xl  hover:text-white transition" />
+              <FiMail className="text-[#51B8F2] text-2xl hover:text-white transition" />
               <span>asme.nitrkl@gmail.com</span>
             </div>
             <div className="flex items-center gap-4">
-              <FiPhone className="text-[#51B8F2] text-xl hover:text-white transition" />
+              <FiPhone className="text-[#51B8F2] text-2xl hover:text-white transition" />
               <span>+91-1234567890</span>
             </div>
             <div className="flex items-start gap-4">
-              <GoLocation className=" text-[#51B8F2] text-xl mt-1 hover:text-white transition" />
+              <GoLocation className="text-[#51B8F2] text-2xl mt-1 hover:text-white transition" />
               <span>
                 National Institute of Technology Rourkela, <br /> Odisha -
                 769008
@@ -102,7 +96,7 @@ const Footer = ({
         </div>
       </div>
 
-      <div className="text-center text-sm mt-8 border-t border-white/20 pt-4">
+      <div className="text-center text-base mt-10 border-t border-white/20 pt-6">
         © {year} {title}. All rights reserved.
       </div>
     </footer>
diff --git a/src/components/HeroSection.jsx b/src/components/HeroSection.jsx
index e41e171..14442e5 100644
--- a/src/components/HeroSection.jsx
+++ b/src/components/HeroSection.jsx
@@ -34,12 +34,15 @@ export default function HeroSection() {
             >
               {siteConfig.hero.primaryButton}
             </Button>
-            <Button
-              className="bg-transparent text-[rgba(55,115,236,1)] underline-offset-4 transition duration-300 ease-in-out hover:bg-[rgba(55,115,236,1)] hover:text-white "
+            <a
+              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"
               style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
             >
               {siteConfig.hero.secondaryLink}
-            </Button>
+            </a>
           </div>
         </div>
 
diff --git a/src/components/MissionSection.jsx b/src/components/MissionSection.jsx
index fbf4c4b..ea270d6 100644
--- a/src/components/MissionSection.jsx
+++ b/src/components/MissionSection.jsx
@@ -3,7 +3,7 @@ import { siteConfig } from "../config/navbarHero";
 
 export default function MissionSection() {
   return (
-    <section className="w-full bg-white py-20 flex justify-center">
+    <section id="cards" className="w-full bg-white py-20 flex justify-center">
       <div className="w-full max-w-none mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3  max-[1250px]:px-6 gap-14 place-items-center">
         {siteConfig.missions.map(({ title, description }, index) => (
           <MissionCard key={index} title={title} description={description} />