diff --git a/src/Components/Nav/Navbar.jsx b/src/Components/Nav/Navbar.jsx
index fbd4227..ba2e547 100644
--- a/src/Components/Nav/Navbar.jsx
+++ b/src/Components/Nav/Navbar.jsx
@@ -8,6 +8,7 @@ const Navbar = () => {
   const [menuOpen, setMenuOpen] = useState(false);
   const [activeSection, setActiveSection] = useState("home");
   const [isDarkMode, setIsDarkMode] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
 
   useEffect(() => {
     const savedTheme = localStorage.getItem("theme");
@@ -20,6 +21,16 @@ const Navbar = () => {
     }
   }, []);
 
+  // small scroll listener to add background/shadow after scrolling a bit
+  useEffect(() => {
+    const onScroll = () => {
+      setScrolled(window.scrollY > 10);
+    };
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
   const toggleMenu = () => {
     setMenuOpen(!menuOpen);
   };
@@ -85,37 +96,40 @@ const Navbar = () => {
   };
 
   return (
-    <nav className="fixed top-6 left-0 right-0 z-50 pointer-events-auto">
-      <div className="max-w-screen-xl mx-auto px-4">
-        {/* grid: spacer | centered nav | controls */}
+    <nav
+      className={`fixed top-0 left-0 right-0 w-full z-50 pointer-events-auto transition-all duration-300 ${
+        scrolled ? "backdrop-blur-sm bg-white/70 dark:bg-gray-900/70 shadow-md" : "bg-transparent"
+      }`}
+      aria-label="Primary"
+    >
+      {/* container with comfortable vertical padding to avoid overlapping page content */}
+      <div className="max-w-screen-xl mx-auto px-4 py-3">
+        {/* grid: left spacer | center nav | right controls */}
         <div className="grid grid-cols-3 items-center">
-          {/* left: spacer (removed TPS image as requested) */}
+          {/* left spacer */}
           <div className="flex items-center">
             <div style={{ width: 44 }} />
           </div>
 
-          {/* center: 3D nav card */}
+          {/* center: stretch nav */}
           <div className="flex justify-center">
-            <div
-              className="hidden md:flex items-center nav-center"
-              style={{ perspective: "1000px" }}
-            >
-              <div className="nav-card bg-gradient-to-r from-white/90 to-gray-100/60 dark:from-gray-800/75 dark:to-gray-900/70 backdrop-blur-sm rounded-2xl px-5 py-3 shadow-2xl">
-                <ul className="flex items-center space-x-6 rtl:space-x-reverse">
+            <div className="w-full">
+              <div className="hidden md:flex items-center w-full">
+                <ul className="flex items-center justify-between w-full px-3">
                   {navItems.map((item) => (
-                    <li key={item.key}>
+                    <li key={item.key} className="flex-1">
                       <Link
                         to={item.key}
                         smooth
                         duration={500}
                         spy={true}
-                        offset={-70}
+                        offset={-80}
                         onSetActive={() => setActiveSection(item.key)}
                         onClick={() => {
                           setActiveSection(item.key);
                           setMenuOpen(false);
                         }}
-                        className={`nav-item relative inline-flex items-center text-base md:text-lg font-semibold px-6 py-3 rounded-full transition-all duration-300 focus:outline-none select-none
+                        className={`nav-item relative inline-flex w-full justify-center text-base md:text-lg font-semibold py-3 rounded-full transition-all duration-300 focus:outline-none select-none
                           ${
                             activeSection === item.key
                               ? "text-yellow-500"
@@ -125,52 +139,94 @@ const Navbar = () => {
                         role="link"
                         aria-current={activeSection === item.key ? "page" : undefined}
                       >
-                        {/* glow layer */}
                         <span className="nav-item-glow" aria-hidden="true" />
-
                         <span className="relative z-10">{item.label}</span>
                       </Link>
                     </li>
                   ))}
                 </ul>
               </div>
+
+              {/* mobile compact center (if needed) */}
+              <div className="md:hidden flex justify-center">
+                <div className="flex items-center gap-3 rtl:gap-x-reverse">
+                  {navItems.slice(0, 3).map((item) => (
+                    <Link
+                      key={item.key}
+                      to={item.key}
+                      smooth
+                      duration={500}
+                      spy={true}
+                      offset={-70}
+                      onSetActive={() => setActiveSection(item.key)}
+                      onClick={() => {
+                        setActiveSection(item.key);
+                        setMenuOpen(false);
+                      }}
+                      className={`nav-item relative inline-flex items-center text-sm font-semibold px-4 py-2 rounded-full transition-all duration-300
+                          ${
+                            activeSection === item.key
+                              ? "text-yellow-500"
+                              : "text-gray-800 dark:text-white"
+                          }
+                        `}
+                    >
+                      <span className="nav-item-glow" aria-hidden="true" />
+                      <span className="relative z-10">{item.label}</span>
+                    </Link>
+                  ))}
+                </div>
+              </div>
             </div>
           </div>
 
-          {/* right: controls (dark mode, language toggle, mobile) */}
+          {/* right: controls */}
           <div className="flex justify-end items-center space-x-2 rtl:space-x-reverse">
+            {/* Dark mode - refined icon with subtle motion */}
             <button
               onClick={toggleDarkMode}
               type="button"
-              className="inline-flex items-center p-2 w-11 h-11 justify-center text-sm text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
+              className="group inline-flex items-center p-2 w-12 h-12 justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+              aria-pressed={isDarkMode}
               aria-label={isDarkMode ? "Light Mode" : "Dark Mode"}
               title={isDarkMode ? "Light Mode" : "Dark Mode"}
             >
-              {isDarkMode ? (
-                <svg className="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
-                  <path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
-                </svg>
-              ) : (
-                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                  <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-                </svg>
-              )}
+              <svg
+                className="w-6 h-6 transform transition-transform duration-350"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                {/* Moon shape (when light) */}
+                <path
+                  d="M21 12.79A9 9 0 1111.21 3a7 7 0 109.79 9.79z"
+                  fill="currentColor"
+                  style={{ opacity: isDarkMode ? 0 : 1, transition: "opacity 220ms" }}
+                />
+                {/* Sun: center circle + rays (when dark) */}
+                <g style={{ opacity: isDarkMode ? 1 : 0, transition: "opacity 220ms" }} fill="currentColor">
+                  <circle cx="12" cy="12" r="3" />
+                  <path d="M12 2v1M12 21v1M4.2 4.2l.7.7M19.1 19.1l.7.7M1 12h1M22 12h1M4.2 19.8l.7-.7M19.1 4.9l.7-.7" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" />
+                </g>
+              </svg>
             </button>
 
-            {/* Language toggle (only EN / AR) with a globe + letters icon */}
+            {/* Language toggle - professional globe + pill */}
             <button
               onClick={toggleLang}
               type="button"
-              className="inline-flex items-center px-3 py-2 rounded-lg border border-transparent hover:border-gray-200 dark:hover:border-gray-700 transition-all duration-200 text-sm font-medium"
+              className="inline-flex items-center px-3 py-2 rounded-lg border border-transparent hover:border-gray-200 dark:hover:border-gray-700 transition-all duration-300 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
               aria-label="Toggle language"
               title={i18n.language === "ar" ? "العربية" : "English"}
             >
-              <span className="flex items-center gap-2">
-                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.5" />
-                  <path d="M2 12h20M12 2v20M4.5 6.5c3 2.5 6 2.5 15 0" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
-                </svg>
-                <span className="text-sm font-semibold">{i18n.language === "ar" ? "ع" : "EN"}</span>
+              <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.5" />
+                <path d="M2 12h20M12 2v20" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+
+              <span className="inline-flex items-center justify-center w-9 h-6 text-xs font-semibold rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white">
+                {i18n.language === "ar" ? "ع" : "EN"}
               </span>
             </button>
 
@@ -178,20 +234,20 @@ const Navbar = () => {
             <button
               onClick={toggleMenu}
               type="button"
-              className="inline-flex items-center p-2 w-11 h-11 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+              className="inline-flex items-center p-2 w-11 h-11 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
               aria-controls="navbar-menu"
               aria-expanded={menuOpen}
             >
               <span className="sr-only">Open main menu</span>
-              <svg className="w-6 h-6" viewBox="0 0 17 14" fill="none">
+              <svg className="w-6 h-6" viewBox="0 0 17 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M1 1h15M1 7h15M1 13h15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
               </svg>
             </button>
           </div>
         </div>
 
-        {/* Mobile menu (centered items in column) */}
-        <div className={`${menuOpen ? "block" : "hidden"} md:hidden mt-3 bg-white/90 dark:bg-gray-900/80 backdrop-blur-sm rounded-lg p-3`}> 
+        {/* Mobile menu */}
+        <div className={`${menuOpen ? "block" : "hidden"} md:hidden mt-3 bg-white/95 dark:bg-gray-900/85 backdrop-blur-sm rounded-lg p-3`}> 
           <ul className="flex flex-col items-center space-y-3">
             {navItems.map((item) => (
               <li key={item.key} className="w-full">
@@ -200,7 +256,7 @@ const Navbar = () => {
                   smooth
                   duration={500}
                   spy={true}
-                  offset={-70}
+                  offset={-80}
                   onSetActive={() => setActiveSection(item.key)}
                   onClick={() => {
                     setActiveSection(item.key);
@@ -222,32 +278,22 @@ const Navbar = () => {
         </div>
       </div>
 
-      {/* inline CSS for 3D / hover visual polish */}
+      {/* inline CSS for polish */}
       <style>{`
-        .nav-center { perspective: 1000px; }
-        .nav-card { transform-style: preserve-3d; transition: transform 0.35s cubic-bezier(.2,.9,.3,1), box-shadow 0.35s; }
-        .nav-item { transform-style: preserve-3d; transition: transform 0.28s, box-shadow 0.28s, color 0.2s; position: relative; }
-        .nav-item:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 20px 34px rgba(2,6,23,0.14); }
-        .nav-item:active { transform: translateY(-4px) scale(1.03); }
-        .nav-item-glow { position: absolute; inset: -8px; border-radius: 9999px; filter: blur(14px); opacity:0; transition: opacity 0.35s, transform 0.35s; pointer-events:none; z-index:0; }
-        .nav-item .relative { z-index: 10; }
-        .nav-item-glow { background: radial-gradient(circle at 50% 40%, rgba(250,204,21,0.14), transparent 30%); transform: scale(0.98); }
-        .nav-item:hover .nav-item-glow { opacity:0.9; transform: scale(1.03); }
-
-        /* IMPORTANT: active (aria-current) NO longer elevates - only color change and subtle underline */
-        .nav-item[aria-current="page"] { transform: none !important; box-shadow: none !important; }
+        /* core nav item polish */
+        .nav-item { transform-style: preserve-3d; transition: transform 0.28s, box-shadow 0.28s, color 0.2s; position: relative; display: inline-flex; }
+        .nav-item:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 18px 30px rgba(2,6,23,0.10); }
+        .nav-item:active { transform: translateY(-3px) scale(1.02); }
+        .nav-item-glow { position: absolute; inset: -6px; border-radius: 9999px; filter: blur(12px); opacity:0; transition: opacity 0.28s, transform 0.28s; pointer-events:none; z-index:0; background: radial-gradient(circle at 50% 40%, rgba(250,204,21,0.12), transparent 30%); transform: scale(0.98); }
+        .nav-item:hover .nav-item-glow { opacity:0.9; transform: scale(1.02); }
         .nav-item[aria-current="page"]::after { content: ""; position: absolute; height: 3px; left: 18%; right: 18%; bottom: -6px; border-radius: 9999px; background: linear-gradient(90deg, rgba(250,204,21,0.95), rgba(250,200,40,0.9)); opacity: 1; }
-
-        /* ensure text doesn't wrap */
         .nav-item span { white-space: nowrap; }
 
-        /* small accessibility tweak: focus visible style */
+        /* focus for accessibility */
         .nav-item:focus-visible { outline: 3px solid rgba(99,102,241,0.12); outline-offset: 4px; }
 
-        /* mobile: slightly larger tappable targets */
-        @media (max-width: 767px) {
-          .nav-item { padding-left: 1rem; padding-right: 1rem; }
-        }
+        /* reduce nav height overlap: ensure page content doesn't hide under nav (optional note) */
+        /* If you want, add: body { padding-top: 68px; } in global css so page content starts below navbar. */
       `}</style>
     </nav>
   );