diff --git a/app/components/Headbar.tsx b/app/components/Headbar.tsx
index d6090aa..63c9d96 100644
--- a/app/components/Headbar.tsx
+++ b/app/components/Headbar.tsx
@@ -58,7 +58,7 @@ export default function Headbar() {
         />
         <button
           onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-          className="p-2 text-stone-200 hover:text-cyan-400 transition-colors"
+          className="p-2 text-stone-200 transition-colors hover:text-cyan-400"
           aria-label="Toggle menu"
         >
           <svg
@@ -82,14 +82,25 @@ export default function Headbar() {
       </div>
 
       {/* Mobile Navigation Menu */}
-      {mobileMenuOpen && (
-        <nav className="xl:hidden bg-stone-900 border-t border-stone-700">
-          <ul className="flex flex-col gap-2 p-4 font-bold text-sm tracking-wider text-stone-200">
+      <nav
+        id="mobile-navigation"
+        className={`xl:hidden flex flex-col overflow-hidden border-t border-stone-700 bg-stone-900 shadow-lg shadow-stone-950/40 transition-[max-height,opacity] duration-300 ease-out ${
+          mobileMenuOpen
+            ? "pointer-events-auto max-h-96 opacity-100"
+            : "pointer-events-none max-h-0 opacity-0"
+        }`}
+      >
+        <div className="px-4 pb-4">
+          <ul
+            className={`flex flex-col gap-2 pt-4 font-bold text-sm tracking-wider text-stone-200 transition-transform duration-300 ease-out ${
+              mobileMenuOpen ? "translate-y-0" : "-translate-y-16"
+            }`}
+          >
             <li>
               <Link
                 href="/"
                 onClick={() => setMobileMenuOpen(false)}
-                className="block py-2 px-4 hover:bg-stone-800 rounded transition-colors"
+                className="block rounded px-4 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:bg-stone-800"
               >
                 GAME*
               </Link>
@@ -98,7 +109,7 @@ export default function Headbar() {
               <Link
                 href="/patch_notes"
                 onClick={() => setMobileMenuOpen(false)}
-                className="block py-2 px-4 hover:bg-stone-800 rounded transition-colors"
+                className="block rounded px-4 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:bg-stone-800"
               >
                 PATCH NOTES*
               </Link>
@@ -107,26 +118,26 @@ export default function Headbar() {
               <Link
                 href="/dev_blog"
                 onClick={() => setMobileMenuOpen(false)}
-                className="dev-blog-transition block py-2 px-4 hover:bg-stone-800 rounded transition-colors"
+                className="dev-blog-transition block rounded px-4 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:bg-stone-800"
               >
                 DEV BLOG
               </Link>
             </li>
-            <li className="pt-2 border-t border-stone-700">
+            <li>
               <a
                 href="https://discord.gg/f6DGjvTWYT"
                 target="_blank"
                 rel="noopener noreferrer"
                 onClick={() => setMobileMenuOpen(false)}
               >
-                <button className="w-full px-4 py-2 bg-cyan-800 font-bold hover:bg-cyan-400 transition-all duration-300 hover:text-stone-800 rounded-lg">
+                <button className="w-full rounded-lg bg-cyan-800 px-4 py-2 font-bold transition-all duration-300 hover:bg-cyan-400 hover:text-stone-800">
                   DISCORD
                 </button>
               </a>
             </li>
           </ul>
-        </nav>
-      )}
+        </div>
+      </nav>
     </div>
   );
 }