diff --git a/components/common/nav-menu.tsx b/components/common/nav-menu.tsx
index 6ff8617..c053b99 100644
--- a/components/common/nav-menu.tsx
+++ b/components/common/nav-menu.tsx
@@ -12,16 +12,20 @@ interface NavMenu {
 export default function NavMenu({ open, setOpen }: NavMenu) {
   const pathname = usePathname();
 
-  if (!open) return null;
 
   return (
     <ul
       id="mobile-menu"
       aria-label="Mobile navigation menu"
-      className="absolute top-full left-1/2 w-full max-w-sm
-      -translate-x-1/2 rounded-b-2xl border border-border
-      bg-background/95 backdrop-blur-md shadow-lg
-      md:hidden flex flex-col items-start justify-center gap-2 p-4"
+      className={`absolute top-full left-1/2 w-full max-w-sm
+-translate-x-1/2 rounded-b-2xl border border-border
+bg-background/95 backdrop-blur-md shadow-lg overflow-hidden
+md:hidden flex flex-col items-start gap-2 px-4
+transition-all duration-300 ease-in-out origin-top
+${open
+          ? "max-h-96 opacity-100 py-4 translate-y-0"
+          : "max-h-0 opacity-0 py-0 -translate-y-3 pointer-events-none border-transparent"
+        }`}
     >
       {navbarConfig.items.map((item) => {
         const isActive = pathname === item.href;
diff --git a/components/common/navbar.tsx b/components/common/navbar.tsx
index bddf729..7b0e13a 100644
--- a/components/common/navbar.tsx
+++ b/components/common/navbar.tsx
@@ -15,7 +15,7 @@ export default function Navbar() {
   return (
     <nav
       className={`fixed top-4 left-1/2 z-50 w-[95%] max-w-6xl -translate-x-1/2
-      flex items-center justify-between
+      flex items-center justify-between transition-all duration-300 ease-out
       ${open ? "rounded-t-2xl" : "rounded-2xl"} md:rounded-2xl border border-border
       backdrop-blur-md
       px-6 py-3 shadow-lg`}