diff --git a/src/components/ui/NavbarCentered.tsx b/src/components/ui/NavbarCentered.tsx
index 26cde44..87db45b 100644
--- a/src/components/ui/NavbarCentered.tsx
+++ b/src/components/ui/NavbarCentered.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 
+import { Plus, ArrowRight } from "lucide-react";
 import { Plus, ArrowRight } from "lucide-react";
 import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
@@ -89,46 +90,46 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
         </div>
       </nav>
 
-      {menuOpen && (
-          <div
-            ref={menuRef}
-            
-            className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded-lg bg-background/80 backdrop-blur-[2px]"
-          >
-            <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"
-              >
-                <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"
-                  >
-                    {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>
-          </div>
+      <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"
+          >
+            <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"
+              >
+                {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>
+      </div>
     </>
   );
 };