diff --git a/src/components/ui/NavbarCentered.tsx b/src/components/ui/NavbarCentered.tsx
index 87db45b..830f7a3 100644
--- a/src/components/ui/NavbarCentered.tsx
+++ b/src/components/ui/NavbarCentered.tsx
@@ -1,6 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-
-import { Plus, ArrowRight } from "lucide-react";
+import { motion, AnimatePresence } from "motion/react";
 import { Plus, ArrowRight } from "lucide-react";
 import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
@@ -52,8 +51,8 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
     <>
       <nav
         className={cls(
-          "fixed z-1000 top-3 left-3 right-3 transition-all duration-500 ease-in-out",
-          isScrolled ? "h-15 bg-background/80 backdrop-blur-[2px] rounded-lg" : "h-20 bg-background/0 backdrop-blur-0"
+          "fixed z-1000 top-0 left-0 w-full transition-all duration-500 ease-in-out",
+          isScrolled ? "h-15 bg-background/80 backdrop-blur-sm" : "h-20 bg-background/0 backdrop-blur-0"
         )}
       >
         <div className="relative mx-auto flex items-center justify-between h-full w-content-width">
@@ -90,46 +89,51 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
         </div>
       </nav>
 
-      <div
-        ref={menuRef}
-        className={cls(
-          "md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded-lg bg-background/80 backdrop-blur-[2px] transition-all duration-300 ease-in-out",
-          menuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4 pointer-events-none"
-        )}
-      >
-        <div className="flex items-center justify-between mb-6">
-          <p className="text-xl text-foreground">Menu</p>
-          <button
-            className="flex items-center justify-center shrink-0 size-9 rounded cursor-pointer primary-button"
-            onClick={() => setMenuOpen(false)}
-            aria-label="Close menu"
+      <AnimatePresence>
+        {menuOpen && (
+          <motion.div
+            ref={menuRef}
+            initial={{ y: "-135%" }}
+            animate={{ y: 0 }}
+            exit={{ y: "-135%" }}
+            transition={{ type: "spring", damping: 26, stiffness: 170 }}
+            className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded card"
           >
-            <Plus className="w-1/2 h-1/2 text-primary-cta-text rotate-45" strokeWidth={1.5} />
-          </button>
-        </div>
-
-        <div className="flex flex-col gap-4">
-          {navItems.map((item, index) => (
-            <div key={item.name}>
-              <a
-                href={item.href}
-                onClick={(e) => handleNavClick(e, item.href, () => setMenuOpen(false))}
-                className="flex items-center justify-between py-2 text-base font-medium text-foreground"
+            <div className="flex items-center justify-between mb-6">
+              <p className="text-xl text-foreground">Menu</p>
+              <button
+                className="flex items-center justify-center shrink-0 size-9 rounded cursor-pointer primary-button"
+                onClick={() => setMenuOpen(false)}
+                aria-label="Close menu"
               >
-                {item.name}
-                <ArrowRight className="size-4 text-foreground" strokeWidth={1.5} />
-              </a>
-              {index < navItems.length - 1 && (
-                <div className="h-px bg-linear-to-r from-transparent via-foreground/20 to-transparent" />
-              )}
+                <Plus className="w-1/2 h-1/2 text-primary-cta-text rotate-45" strokeWidth={1.5} />
+              </button>
             </div>
-          ))}
-        </div>
 
-        <div className="mt-6">
-          <Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} className="w-full" />
-        </div>
-      </div>
+            <div className="flex flex-col gap-4">
+              {navItems.map((item, index) => (
+                <div key={item.name}>
+                  <a
+                    href={item.href}
+                    onClick={(e) => handleNavClick(e, item.href, () => setMenuOpen(false))}
+                    className="flex items-center justify-between py-2 text-base font-medium text-foreground"
+                  >
+                    {item.name}
+                    <ArrowRight className="size-4 text-foreground" strokeWidth={1.5} />
+                  </a>
+                  {index < navItems.length - 1 && (
+                    <div className="h-px bg-linear-to-r from-transparent via-foreground/20 to-transparent" />
+                  )}
+                </div>
+              ))}
+            </div>
+
+            <div className="mt-6">
+              <Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} className="w-full" />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </>
   );
 };