diff --git a/src/App.css b/src/App.css
index 9b6403be..347db958 100644
--- a/src/App.css
+++ b/src/App.css
@@ -16,4 +16,58 @@ body,
 
 body{
     background: #F1EADC;
-}
\ No newline at end of file
+}
+/* Navbar with gradient background and glassmorphism */
+nav.bg-blur {
+    backdrop-filter: blur(10px); /* Glassmorphism blur */
+    background: linear-gradient(90deg, rgba(224, 240, 177, 1) 0%, rgba(188, 222, 232, 1) 100%);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); /* Stronger shadow */
+    border-radius: 10px; /* Rounded corners */
+    z-index: 50;
+    padding: 10px 0; /* Ensures padding for height */
+  }
+  
+  /* Default link styling */
+  .nav-link {
+    color: black;
+    padding: 10px 20px; /* More padding for larger clickable area */
+    border-radius: 20px; /* Rounded corners for links */
+    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* Transition effects */
+  }
+  
+  /* Active link with gradient background */
+  .active-link {
+    background: linear-gradient(90deg, #ff7e5f, #feb47b); /* Gradient for active link */
+    color: white;
+    padding: 10px 20px; /* Keep padding the same for consistency */
+    border-radius: 20px; /* Consistent rounded corners */
+    box-shadow: 0 4px 10px rgba(255, 126, 95, 0.5); /* Stronger shadow */
+  }
+  
+  /* Hover effect for non-active links */
+  .nav-link:hover {
+    background: rgba(255, 255, 255, 0.2); /* Light background on hover */
+    color: #ff7e5f; /* Change color on hover */
+    box-shadow: 0 4px 20px rgba(255, 126, 95, 0.5); /* Glow effect */
+  }
+  
+  /* Mobile menu styles */
+  .mobile-menu {
+    background: rgba(255, 255, 255, 0.9); /* Slightly opaque background */
+    backdrop-filter: blur(5px); /* Glassmorphism effect */
+    border-radius: 8px; /* Rounded corners */
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); /* Stronger shadow */
+  }
+  
+  /* Mobile link styling */
+  .mobile-link {
+    padding: 10px 20px; /* Consistent padding */
+    border-radius: 10px; /* Rounded corners */
+    transition: background 0.3s ease, color 0.3s ease; /* Transition effects */
+  }
+  
+  .mobile-link:hover {
+    background: rgba(255, 126, 95, 0.2); /* Hover background */
+    color: #ff7e5f; /* Change color on hover */
+  }
+  
\ No newline at end of file
diff --git a/src/Components/Shared/Navbar.jsx b/src/Components/Shared/Navbar.jsx
index 5f60e88f..f44a494e 100644
--- a/src/Components/Shared/Navbar.jsx
+++ b/src/Components/Shared/Navbar.jsx
@@ -1,117 +1,45 @@
-import { useState, useEffect } from "react";
+import React, { useState } from "react";
 import Logo from "../../assets/Logo/logo.png";
 import { Link, useLocation } from "react-router-dom";
 
 const Navbar = () => {
-  const [isScrolled, setIsScrolled] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const location = useLocation();
 
-  useEffect(() => {
-    const handleScroll = () => {
-      const scrollPosition = window.scrollY;
-      if (scrollPosition > 50) {
-        setIsScrolled(true);
-      } else {
-        setIsScrolled(false);
-      }
-    };
-
-    window.addEventListener("scroll", handleScroll);
-
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  }, []);
-
   const toggleMenu = () => {
     setIsMenuOpen(!isMenuOpen);
   };
-  const isHomePage = location.pathname === "/";
-  const buttonTextClass = isScrolled
-    ? "text-gray-900"
-    : isHomePage
-    ? "text-white"
-    : "text-black";
+
+  const currentPath = location.pathname;
+
+  const isActiveLink = (path) => currentPath === path;
 
   return (
-    <nav
-      className={`w-full fixed top-0 z-50 transition duration-300 ${
-        isScrolled ? "bg-[#E0F0B1]" : "bg-transparent"
-      } 
-                   ${isScrolled ? "text-gray-800" : "text-black"} 
-                   ${isScrolled ? "shadow-lg" : ""}`}
-    >
+    <nav className="bg-blur fixed w-full top-0 z-50"> {/* Applied glassmorphism */}
       <div className="max-w-7xl mx-auto px-4">
-        <div className="flex justify-between items-center h-16 ">
+        <div className="flex justify-between items-center h-16">
           <Link to="/">
             <div className="flex-shrink-0">
-              <img
-                className="w-14 h-14 bg-white rounded-full p-1 "
-                alt="logo"
-                src={Logo}
-              />
+              <img className="w-14 h-14 bg-white rounded-full p-1" alt="logo" src={Logo} />
             </div>
           </Link>
           <div className="hidden md:flex">
             <ul className="ml-4 flex space-x-4 font-semibold">
-              <li>
-                <a
-                  href="/"
-                  className={`hover:${
-                    isScrolled ? "text-gray-900" : "text-gray-800"
-                  }`}
-                >
-                  Home
-                </a>
-              </li>
-              <li>
-                <a
-                  href="/event"
-                  className={`hover:${
-                    isScrolled ? "text-gray-900" : "text-gray-800"
-                  }`}
-                >
-                  Events
-                </a>
-              </li>
-              <li>
-                <a
-                  href="/menu"
-                  className={`hover:${
-                    isScrolled ? "text-gray-900" : "text-gray-800"
-                  }`}
-                >
-                  Menu
-                </a>
-              </li>
-              <li>
-                <a
-                  href="/register"
-                  className={`hover:${
-                    isScrolled ? "text-gray-900" : "text-gray-800"
-                  }`}
-                >
-                  Reservation
-                </a>
-              </li>
-              <li>
-                <a
-                  href="/boardgame"
-                  className={`hover:${
-                    isScrolled ? "text-gray-900" : "text-gray-800"
-                  }`}
-                >
-                  Boardgames
-                </a>
-              </li>
+              {["/", "/event", "/menu", "/register", "/boardgame"].map((path, index) => (
+                <li key={index}>
+                  <Link
+                    to={path}
+                    className={`nav-link ${isActiveLink(path) ? "active-link" : ""}`}
+                  >
+                    {/* Add icons here if desired */}
+                    {path === "/" ? "Home" : path.replace("/", "").charAt(0).toUpperCase() + path.slice(2)}
+                  </Link>
+                </li>
+              ))}
             </ul>
           </div>
           <div className="flex md:hidden">
-            <button
-              onClick={toggleMenu}
-              className={`${buttonTextClass} focus:outline-none`}
-            >
+            <button onClick={toggleMenu} className="text-black focus:outline-none">
               <svg
                 className="h-6 w-6"
                 fill="none"
@@ -132,52 +60,17 @@ const Navbar = () => {
       </div>
       {/* Mobile Menu */}
       {isMenuOpen && (
-        <div
-          className={`md:hidden ${
-            isScrolled ? "bg-amber-100 shadow-lg" : "bg-[#E0F0B1] shadow-lg"
-          }`}
-        >
+        <div className="md:hidden mobile-menu">
           <div className="px-4 pt-4 pb-4 space-y-2">
-            <a
-              href="/"
-              className={`block px-4 py-3 rounded-md text-base font-semibold transition duration-300 ${
-                isScrolled ? "text-gray-900" : "text-gray-800"
-              } hover:bg-amber-300 hover:text-black`}
-            >
-              Home
-            </a>
-            <a
-              href="/event"
-              className={`block px-4 py-3 rounded-md text-base font-semibold transition duration-300 ${
-                isScrolled ? "text-gray-900" : "text-gray-800"
-              } hover:bg-amber-300 hover:text-black`}
-            >
-              Events
-            </a>
-            <a
-              href="/menu"
-              className={`block px-4 py-3 rounded-md text-base font-semibold transition duration-300 ${
-                isScrolled ? "text-gray-900" : "text-gray-800"
-              } hover:bg-amber-300 hover:text-black`}
-            >
-              Menu
-            </a>
-            <a
-              href="/register"
-              className={`block px-4 py-3 rounded-md text-base font-semibold transition duration-300 ${
-                isScrolled ? "text-gray-900" : "text-gray-800"
-              } hover:bg-amber-300 hover:text-black`}
-            >
-              Reservation
-            </a>
-            <a
-              href="/boardgame"
-              className={`block px-4 py-3 rounded-md text-base font-semibold transition duration-300 ${
-                isScrolled ? "text-gray-900" : "text-gray-800"
-              } hover:bg-amber-300 hover:text-black`}
-            >
-              Boardgames
-            </a>
+            {["/", "/event", "/menu", "/register", "/boardgame"].map((path, index) => (
+              <Link
+                key={index}
+                to={path}
+                className={`block mobile-link ${isActiveLink(path) ? "active-link" : ""}`}
+              >
+                {path === "/" ? "Home" : path.replace("/", "").charAt(0).toUpperCase() + path.slice(2)}
+              </Link>
+            ))}
           </div>
         </div>
       )}