diff --git a/package.json b/package.json
index 3fcb40a..c3ec2ac 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@firq/fgosite",
 	"type": "module",
-	"version": "0.2.0-pre.50",
+	"version": "0.2.0-pre.51",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",
diff --git a/src/components/navbar/navbarMobile.astro b/src/components/navbar/navbarMobile.astro
index 9337a47..7ee8c25 100644
--- a/src/components/navbar/navbarMobile.astro
+++ b/src/components/navbar/navbarMobile.astro
@@ -13,6 +13,15 @@ const hamburger_src_url = `url("${hamburger.src}")`
   </label>
 </div>
 
+<script>
+  const dropdownBtn = document.querySelector(".dropdown-btn")!;
+  const dropdownContent = document.querySelector(".dropdown-content")!;
+
+  dropdownBtn.addEventListener("click", () => {
+    dropdownContent.classList.toggle("menu-open");
+  });
+</script>
+
 <style define:vars={{ hamburger_src_url }}>
   input[type="checkbox"] {
     opacity: 0;
@@ -20,9 +29,11 @@ const hamburger_src_url = `url("${hamburger.src}")`
     touch-action: manipulation;
   }
 
-  input[type="checkbox"]:checked ~ .dropdown-content {
+  .dropdown-content.menu-open {
     display: flex;
     height: auto;
+    transform: translateY(0);
+    transition: transform var(--a-time-default) var(--a-animation-1);
   }
 
   .dropdown-content {
@@ -33,11 +44,12 @@ const hamburger_src_url = `url("${hamburger.src}")`
     justify-content: center;
     background-color: var(--c-primary-background);
     width: 100%;
-    height: 0px;
     list-style-type: none;
     line-height: 3em;
     margin: 0.5rem 0px 0px;
     padding: 0;
+    transform: translateY(-1em);
+    transition: transform var(--a-time-default) var(--a-animation-1);
   }
 
   .dropdown-btn {