diff --git a/apps/site/src/components/navbar/dropdown.astro b/apps/site/src/components/navbar/dropdown.astro
index 248fb177..b88cd03b 100644
--- a/apps/site/src/components/navbar/dropdown.astro
+++ b/apps/site/src/components/navbar/dropdown.astro
@@ -1,12 +1,12 @@
 ---
-import { Dropdown as DropdownContainer, DropdownItems } from "astro-navbar";
 const { title, lastItem, children } = Astro.props;
 ---
 
-<li class="relative">
-  <DropdownContainer class="group">
-    <button
-      class="flex items-center gap-1 w-full lg:w-auto lg:px-3 py-2 text-[13px] font-semibold text-slate-600 hover:text-emerald-700 transition-colors">
+<li class="relative list-none">
+  <details class="group relative">
+    <summary
+      class="flex cursor-pointer list-none items-center gap-1 px-3.5 py-2 text-[13.5px] font-semibold text-slate-600 hover:text-emerald-700 hover:bg-slate-100/70 rounded-full transition-colors [&::-webkit-details-marker]:hidden select-none"
+    >
       <span>{title}</span>
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -14,34 +14,30 @@ const { title, lastItem, children } = Astro.props;
         viewBox="0 0 24 24"
         stroke-width="2.5"
         stroke="currentColor"
-        class="w-3 h-3 mt-0.5 group-open:rotate-180 transition-transform">
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
+        class="w-3 h-3 mt-0.5 transition-transform duration-200 group-open:rotate-180"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
       </svg>
-    </button>
-    <DropdownItems>
-      <div
-        class:list={[
-          "lg:absolute w-full lg:w-48 z-50 mt-1",
-          lastItem
-            ? "lg:right-0 origin-top-right"
-            : "lg:left-0 origin-top-left",
-        ]}>
-        <div
-          class="px-3 lg:py-2 lg:bg-white lg:rounded-xl lg:shadow-md lg:border lg:border-slate-200/80 flex flex-col gap-0.5">
-          {
-            children.map((item) => (
-              <a
-                href={item.path}
-                class="py-1.5 text-[12.5px] font-medium text-slate-600 hover:text-emerald-700 transition-colors">
-                {item.title}
-              </a>
-            ))
-          }
-        </div>
+    </summary>
+
+    <div
+      class:list={[
+        "absolute z-50 mt-1.5 w-52 rounded-2xl border border-slate-200/90 bg-white/95 backdrop-blur-md p-1.5 shadow-xl transition-all",
+        lastItem ? "right-0 origin-top-right" : "left-0 origin-top-left",
+      ]}
+    >
+      <div class="flex flex-col gap-0.5">
+        {
+          children.map((item) => (
+            <a
+              href={item.path}
+              class="flex items-center px-3 py-2 text-[13px] font-medium text-slate-700 hover:text-emerald-700 hover:bg-emerald-50/70 rounded-xl transition-colors"
+            >
+              {item.title}
+            </a>
+          ))
+        }
       </div>
-    </DropdownItems>
-  </DropdownContainer>
+    </div>
+  </details>
 </li>
diff --git a/apps/site/src/components/navbar/navbar.astro b/apps/site/src/components/navbar/navbar.astro
index f0cb20c8..3b8e3dd6 100644
--- a/apps/site/src/components/navbar/navbar.astro
+++ b/apps/site/src/components/navbar/navbar.astro
@@ -194,6 +194,13 @@ const menuitems = [
           if (closeIcon) closeIcon.classList.add("hidden");
         }
       }
+
+      // Close all open <details> menus when clicking outside
+      document.querySelectorAll("header details[open]").forEach(function (details) {
+        if (!details.contains(e.target)) {
+          details.removeAttribute("open");
+        }
+      });
     });
   })();
 </script>