diff --git a/Frontend/src/Component/Headers/Nav.tsx b/Frontend/src/Component/Headers/Nav.tsx
index 5fde710..f741263 100644
--- a/Frontend/src/Component/Headers/Nav.tsx
+++ b/Frontend/src/Component/Headers/Nav.tsx
@@ -2,14 +2,26 @@ import { Link, NavLink, useNavigate } from "react-router";
 import logo from "../../Assets/logo.png";
 import { useState } from "react";
 
-
-
 function Nav() {
   const [isOpen, setIsOpen] = useState(false);
-
   const navigate = useNavigate();
 
   return (
+
+    <nav className="bg-white bg-gradient-to-b from-amber-100 via-amber-50 to-white shadow sticky top-0 z-20 border-b border-amber-200">
+      <div className="max-w-screen-xl flex items-center justify-between mx-auto px-4 py-2">
+        {/* Logo and Title */}
+
+    <nav className="bg-white bg-gradient-to-b from-amber-100 via-amber-50 to-white transition-all shadow sticky w-full top-0 start-0 border-b border-amber-200 z-100">
+      <div className="max-w-screen-xl flex items-center justify-between mx-auto p-4">
+
+        <div className="flex items-center">
+          <Link to="/" className="flex items-center space-x-3">
+            <img src={logo} className="h-14 w-auto" alt="Logo" />
+            <span className="text-3xl font-semibold text-amber-900 hover:text-amber-600 transition-colors">
+              Ayurleaf
+            </span>
+
     <nav className="bg-white bg-gradient-to-b  from-amber-100 via-amber-50 to-white transition-all shadow sticky w-full z-20 top-0 start-0 border-b border-amber-200">
       <div className="max-w-screen-xl flex items-center justify-between  p-6">
         {/* Logo and Title */}
@@ -17,11 +29,39 @@ function Nav() {
           <Link to="/" className="flex items-center space-x-5">
             <img src={logo} className="h-20 w-auto" alt="Logo" />
             <span className="text-4xl font-semibold text-amber-900 hover:text-amber-600">Ayurleaf</span>
+
           </Link>
         </div>
 
         {/* Desktop Nav Links */}
+
+        <div className="hidden md:flex md:space-x-12 absolute left-1/2 transform -translate-x-1/2">
+          {[
+            { to: "/fitness", label: "AyuFit" },
+            { to: "/products", label: "AyuMed" },
+            { to: "/doctors", label: "AyuDoctor" },
+            { to: "/hospitals", label: "AyuHospitals" },
+          ].map((link) => (
+            <NavLink
+              key={link.to}
+              to={link.to}
+              className={({ isActive }) =>
+                `relative text-lg font-medium tracking-wide px-4 py-1 rounded-md
+                 transition-all duration-200 ease-out
+                 ${isActive ? "text-amber-900 bg-amber-200" : "text-amber-800"}
+                 hover:text-white hover:bg-amber-600 hover:scale-110`
+              }
+            >
+              {link.label}
+            </NavLink>
+          ))}
+
+        <div className="hidden md:flex md:space-x-8 absolute left-1/2 transform -translate-x-1/2">
+          <NavLink to="/" className="text-2xl font-medium text-amber-800 underline hover:text-amber-600">
+            Home
+          </NavLink>
         <div className="hidden md:flex md:space-x-32 absolute left-1/2 transform -translate-x-1/2">
+
           <NavLink
             to="/fitness"
             className={({ isActive }) =>
@@ -39,18 +79,28 @@ function Nav() {
           <NavLink to="/hospitals" className="text-2xl font-medium text-amber-800 hover:text-amber-600">
             AyuHospitals
           </NavLink>
-        </div>
 
-        
-       
+        </div>
 
         {/* Hamburger Button */}
         <button
           className="md:hidden text-amber-900 p-2 rounded-md focus:outline-none"
           onClick={() => setIsOpen(!isOpen)}
         >
-          <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d={isOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"} />
+          <svg
+            className="w-7 h-7"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+          >
+            <path
+              d={
+                isOpen
+                  ? "M6 18L18 6M6 6l12 12"
+                  : "M4 6h16M4 12h16M4 18h16"
+              }
+            />
           </svg>
         </button>
       </div>
@@ -58,25 +108,26 @@ function Nav() {
       {/* Mobile Menu */}
       {isOpen && (
         <div className="md:hidden bg-amber-50 border-t border-amber-200 p-4">
-          <NavLink to="/fitness" className="block py-2 text-2xl text-amber-900 hover:text-amber-600">
-            AyuFit
-          </NavLink>
-          <NavLink to="/products" className="block py-2 text-2xl text-amber-900 hover:text-amber-600">
-            AyuMed
-          </NavLink>
-          <NavLink to="/doctors" className="block py-2 text-2xl text-amber-900 hover:text-amber-600">
-            AyuDoctor
-          </NavLink>
-          <NavLink to="/hospitals" className="block py-2 text-2xl text-amber-900 hover:text-amber-600">
-            AyuHospitals
-          </NavLink>
+          {[
+            { to: "/fitness", label: "AyuFit" },
+            { to: "/products", label: "AyuMed" },
+            { to: "/doctors", label: "AyuDoctor" },
+            { to: "/hospitals", label: "AyuHospitals" },
+          ].map((link) => (
+            <NavLink
+              key={link.to}
+              to={link.to}
+              className="block py-2 text-xl text-amber-900 hover:text-white hover:bg-amber-600 hover:scale-105 rounded-md transition-all"
+            >
+              {link.label}
+            </NavLink>
+          ))}
           <button
-            onClick={() => navigate('/BMI')}
-            className="w-full mt-3 text-black bg-amber-500 hover:bg-amber-600 font-medium rounded-lg text-3xl px-6 py-3"
+            onClick={() => navigate("/BMI")}
+            className="w-full mt-3 text-black bg-amber-500 hover:bg-amber-600 font-medium rounded-lg text-2xl px-5 py-2 transition-colors"
           >
             Get Instant Help
           </button>
-        
         </div>
       )}
     </nav>
@@ -84,9 +135,3 @@ function Nav() {
 }
 
 export default Nav;
-
-
-
-
-
-