diff --git a/src/App.jsx b/src/App.jsx
index de85312..41aef08 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,6 @@
 import Footer from "./components/Footer.jsx";
 import Navbar from "./components/Navbar.jsx";
-import { Outlet } from "react-router";
+import { Outlet } from "react-router-dom";
 
 const App = () => {
   return (
diff --git a/src/components/Achievements.jsx b/src/components/Achievements.jsx
index 32fea95..06cd587 100644
--- a/src/components/Achievements.jsx
+++ b/src/components/Achievements.jsx
@@ -1,13 +1,13 @@
-import { useNavigate } from "react-router";
+import { useNavigate } from "react-router-dom";
 import achievementsData from "../config/achievement";
 
 export default function Achievements() {
   const navigate = useNavigate();
 
   return (
-    <div className="px-4 md:px-12 py-10 max-w-screen-xl mx-auto">
-      <div style={{ marginBottom: "12rem" }}>
-        <h2 className="text-3xl font-bold text-[#0B2044] mb-4">
+    <div className="px-4 pt-32 md:pt-40 md:px-12 py-8 max-w-screen-xl mx-auto">
+      <div className="md:mb-48 mb-12">
+        <h2 className="text-3xl font-bold text-blue-900 mb-4">
           Our Achievements
         </h2>
         <p className="text-gray-700 mb-6 max-w-3xl">
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index d88d923..326e20a 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -46,10 +46,15 @@ const Footer = ({
           </div>
         </div>
 
-        {/* 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">
+        {/* Middle Section */}
+        <div>
+          <h3 className="text-lg font-semibold">Quick Links</h3>
+          <ul className="mt-2 space-y-1 text-sm">
+            <li>
+              <Link to="/about" className="hover:underline">
+                About us
+              </Link>
+            </li>
             <li>
               <Link to="/team" className="hover:underline">
                 Team
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 8bc4172..adf542e 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,12 +1,27 @@
 import { siteConfig } from "../config/navbarHero";
 import Button from "./shared/Button";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 export default function Navbar() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 50);
+    };
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
   return (
-    <header className="bg-white w-full px-0 min-[1100px]:sticky fixed top-0 left-0 z-50 ">
+    <header
+      className={`w-full px-0 min-[1100px]:sticky fixed top-0 left-0 z-50 transition-all duration-300 ${
+        scrolled ? "bg-white/80 backdrop-blur-md shadow-md" : "bg-transparent"
+      }`}
+    >
       <div className="max-w-[1920px] w-screen mx-auto px-4 sm:px-6 md:px-8 lg:px-10 py-3 flex items-center text-black font-['Helvetica'] font-normal text-[20px] leading-[100%] tracking-[-0.015em]">
         <div className="flex items-center space-x-3 min-[900px]:space-x-6 flex-shrink-0">
           <img
@@ -32,10 +47,19 @@ export default function Navbar() {
         </nav>
 
         <div className="hidden min-[1100px]:flex items-center space-x-4 text-sm flex-shrink-0 ml-auto ">
-          <Button className="border border-black bg-white text-black px-3 py-1.5 text-sm transition duration-300 ease-in-out hover:bg-[rgba(55,115,236,1)] hover:text-white hover:border-none">
+          <Button
+            backgroundColor="white"
+            textColor="black"
+            className="border border-black px-3 py-1.5 text-sm transition duration-300 ease-in-out hover:bg-[rgba(55,115,236,1)] hover:text-white hover:border-none"
+          >
             Join Us
           </Button>
-          <Button className="bg-[rgba(6,25,70,1)] text-white px-3 py-1.5 text-sm transition duration-300 ease-in-out hover:bg-white hover:text-[rgba(6,25,70,1)]">
+
+          <Button
+            backgroundColor="rgba(6,25,70,1)"
+            textColor="white"
+            className="px-3 py-1.5 text-sm transition duration-300 ease-in-out hover:bg-white hover:text-[rgba(6,25,70,1)]"
+          >
             Contact Us
           </Button>
         </div>
@@ -50,73 +74,79 @@ export default function Navbar() {
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            {mobileMenuOpen ? (
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            ) : (
+            {!mobileMenuOpen ? (
               <path
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth={2}
                 d="M4 6h16M4 12h16M4 18h16"
               />
-            )}
+            ) : null}
           </svg>
         </button>
       </div>
 
-      {mobileMenuOpen && (
-        <div className="min-[1100px]:hidden fixed inset-0 bg-[#173477ec] px-6 py-6 z-40 overflow-auto text-white">
-          <button
-            className="absolute top-6 right-6 text-white"
-            onClick={() => setMobileMenuOpen(false)}
-            aria-label="Close menu"
+      <div
+        className={`min-[1100px]:hidden fixed inset-0 px-6 py-6 z-40 overflow-auto text-white bg-[#173477ec] transition-all duration-500 ease-in-out
+          ${
+            mobileMenuOpen
+              ? "opacity-100 translate-y-0 pointer-events-auto"
+              : "opacity-0 -translate-y-8 pointer-events-none"
+          }`}
+        style={{ willChange: "opacity, transform" }}
+      >
+        <button
+          className="absolute top-6 right-6 text-white"
+          onClick={() => setMobileMenuOpen(false)}
+          aria-label="Close menu"
+        >
+          <svg
+            className="w-8 h-8"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
           >
-            <svg
-              className="w-8 h-8"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+
+        <nav className="mt-14 flex flex-col w-full">
+          {siteConfig.navigation.links.map((item) => (
+            <a
+              key={item.name}
+              href={item.href}
+              className="w-full py-4 text-lg font-semibold text-center text-white hover:text-blue-300 transition-colors"
+              onClick={() => setMobileMenuOpen(false)}
             >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
+              {item.name}
+            </a>
+          ))}
+        </nav>
 
-          <nav className="mt-14 flex flex-col w-full">
-            {siteConfig.navigation.links.map((item) => (
-              <a
-                key={item.name}
-                href={item.href}
-                className="w-full py-4 text-lg font-semibold text-center text-white hover:text-blue-300 transition-colors"
-                onClick={() => setMobileMenuOpen(false)}
-              >
-                {item.name}
-              </a>
-            ))}
-          </nav>
+        <div className="mt-8 flex flex-col space-y-4 pt-6 w-full">
+          <Button
+            backgroundColor="transparent"
+            textColor="white"
+            className="w-full border border-white px-4 py-3 text-center text-base transition duration-300 hover:bg-white hover:text-[rgba(6,25,70,1)]"
+          >
+            Join Us
+          </Button>
 
-          <div className="mt-8 flex flex-col space-y-4 pt-6 w-full">
-            <Button className="w-full border border-white bg-transparent text-white px-4 py-3 text-center text-base transition duration-300 hover:bg-white hover:text-[rgba(6,25,70,1)]">
-              Join Us
-            </Button>
-            <Button className="w-full bg-white text-[rgba(6,25,70,1)] px-4 py-3 text-center text-base transition duration-300 hover:bg-blue-100">
-              Contact Us
-            </Button>
-          </div>
+          <Button
+            backgroundColor="white"
+            textColor="rgba(6,25,70,1)"
+            className="w-full px-4 py-3 text-center text-base transition duration-300 hover:bg-blue-100"
+          >
+            Contact Us
+          </Button>
         </div>
-      )}
+      </div>
     </header>
   );
 }
diff --git a/src/main.jsx b/src/main.jsx
index bca00c0..4aac412 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,7 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
-import { BrowserRouter, Route, Routes } from "react-router";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import App from "./App.jsx";
 import Test from "./components/Test.jsx";
 import Home from "./pages/landing-page/Home.jsx";