diff --git a/niapi/domain/web/resources/style.css b/niapi/domain/web/resources/style.css
index 236469c..24b40c4 100644
--- a/niapi/domain/web/resources/style.css
+++ b/niapi/domain/web/resources/style.css
@@ -769,10 +769,18 @@ select {
   border-width: 0;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .fixed {
   position: fixed;
 }
 
+.absolute {
+  position: absolute;
+}
+
 .relative {
   position: relative;
 }
@@ -790,6 +798,10 @@ select {
   left: 0px;
 }
 
+.right-0 {
+  right: 0px;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -860,6 +872,10 @@ select {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .flex {
   display: flex;
 }
@@ -900,6 +916,10 @@ select {
   height: 100%;
 }
 
+.h-5 {
+  height: 1.25rem;
+}
+
 .min-h-full {
   min-height: 100%;
 }
@@ -920,6 +940,14 @@ select {
   width: 100%;
 }
 
+.w-56 {
+  width: 14rem;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
 .max-w-7xl {
   max-width: 80rem;
 }
@@ -932,6 +960,10 @@ select {
   flex-grow: 1;
 }
 
+.origin-top-right {
+  transform-origin: top right;
+}
+
 .scale-100 {
   --tw-scale-x: 1;
   --tw-scale-y: 1;
@@ -1062,6 +1094,10 @@ select {
   border-radius: 0.375rem;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .border-0 {
   border-width: 0px;
 }
@@ -1101,6 +1137,11 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -1151,6 +1192,11 @@ select {
   padding-bottom: 1.5rem;
 }
 
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .pb-12 {
   padding-bottom: 3rem;
 }
@@ -1171,6 +1217,10 @@ select {
   padding-top: 2rem;
 }
 
+.text-left {
+  text-align: left;
+}
+
 .font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
@@ -1254,34 +1304,24 @@ select {
   color: rgb(17 24 39 / 0.6);
 }
 
-.text-neutral-900 {
-  --tw-text-opacity: 1;
-  color: rgb(23 23 23 / var(--tw-text-opacity));
-}
-
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
 .text-neutral-600 {
   --tw-text-opacity: 1;
   color: rgb(82 82 82 / var(--tw-text-opacity));
 }
 
-.text-slate-800 {
+.text-neutral-900 {
   --tw-text-opacity: 1;
-  color: rgb(30 41 59 / var(--tw-text-opacity));
+  color: rgb(23 23 23 / var(--tw-text-opacity));
 }
 
-.text-black {
+.text-white {
   --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-neutral-800 {
+.text-gray-700 {
   --tw-text-opacity: 1;
-  color: rgb(38 38 38 / var(--tw-text-opacity));
+  color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
 .antialiased {
@@ -1304,6 +1344,15 @@ select {
     var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
+    0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
     var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1322,6 +1371,15 @@ select {
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
 
+.ring-black {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
+}
+
+.ring-opacity-5 {
+  --tw-ring-opacity: 0.05;
+}
+
 .blur {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
@@ -1377,6 +1435,11 @@ select {
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .hover\:text-blue-900:hover {
   --tw-text-opacity: 1;
   color: rgb(30 58 138 / var(--tw-text-opacity));
@@ -1392,6 +1455,21 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.hover\:text-gray-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .focus\:ring-0:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
     var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1419,6 +1497,19 @@ select {
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-indigo-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
+.focus\:ring-offset-gray-100:focus {
+  --tw-ring-offset-color: #f3f4f6;
+}
+
 .focus-visible\:outline:focus-visible {
   outline-style: solid;
 }
@@ -1439,25 +1530,8 @@ select {
   outline-color: #dc2626;
 }
 
-:is(.dark .dark\:border-neutral-300\/10) {
-  border-color: rgb(212 212 212 / 0.1);
-}
-
-:is(.dark .dark\:border-neutral-300) {
-  --tw-border-opacity: 1;
-  border-color: rgb(212 212 212 / var(--tw-border-opacity));
-}
-
-:is(.dark .dark\:border-neutral-300\/60) {
-  border-color: rgb(212 212 212 / 0.6);
-}
-
-:is(.dark .dark\:border-neutral-300\/40) {
-  border-color: rgb(212 212 212 / 0.4);
-}
-
-:is(.dark .dark\:border-neutral-300\/20) {
-  border-color: rgb(212 212 212 / 0.2);
+.group:hover .group-hover\:block {
+  display: block;
 }
 
 :is(.dark .dark\:border-neutral-300\/30) {
@@ -1479,6 +1553,36 @@ select {
   background-color: rgb(10 10 10 / var(--tw-bg-opacity));
 }
 
+:is(.dark .dark\:bg-neutral-400) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(163 163 163 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-neutral-600) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(82 82 82 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-neutral-50) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-neutral-500) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(115 115 115 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-neutral-700) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-neutral-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
+
 :is(.dark .dark\:text-blue-200) {
   --tw-text-opacity: 1;
   color: rgb(191 219 254 / var(--tw-text-opacity));
@@ -1498,21 +1602,11 @@ select {
   color: rgb(212 212 212 / var(--tw-text-opacity));
 }
 
-:is(.dark .dark\:text-neutral-900) {
-  --tw-text-opacity: 1;
-  color: rgb(23 23 23 / var(--tw-text-opacity));
-}
-
 :is(.dark .dark\:text-white) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-:is(.dark .dark\:text-neutral-600) {
-  --tw-text-opacity: 1;
-  color: rgb(82 82 82 / var(--tw-text-opacity));
-}
-
 :is(.dark .dark\:placeholder-neutral-500)::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(115 115 115 / var(--tw-placeholder-opacity));
diff --git a/niapi/domain/web/templates/base/nav.html b/niapi/domain/web/templates/base/nav.html
index 5a0d58b..bdd0e96 100644
--- a/niapi/domain/web/templates/base/nav.html
+++ b/niapi/domain/web/templates/base/nav.html
@@ -138,16 +138,76 @@
         </svg>
       </button>
 
-      <a
-        href="/api"
-        class="text-sm font-semibold leading-6 text-blue-400 hover:text-blue-900 dark:text-blue-200 dark:hover:text-blue-500"
-        >API <span aria-hidden="true">&rarr;</span></a
-      >
+      <div class="relative inline-block text-left">
+        <div>
+          <button
+            type="button"
+            class="flex items-center rounded-full bg-white dark:bg-neutral-900 text-blue-400 hover:text-blue-900 dark:text-blue-200 dark:hover:text-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-100"
+            id="menu-button"
+            aria-expanded="false"
+            aria-haspopup="true"
+          >
+            <span class="sr-only">Open API Menu</span>
+            &nbsp;API&nbsp;
+            <!-- https://feathericons.dev/?search=more-vertical&iconset=feather -->
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              width="24"
+              height="24"
+              class="main-grid-item-icon pointer-events-none"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            >
+              <circle cx="12" cy="12" r="1"></circle>
+              <circle cx="12" cy="5" r="1"></circle>
+              <circle cx="12" cy="19" r="1"></circle>
+            </svg>
+          </button>
+        </div>
+
+        <div
+          class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white dark:bg-neutral-800 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none hidden"
+          id="menu"
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="menu-button"
+          tabindex="-1"
+        >
+          <div class="py-1" role="none">
+            <a
+              href="/api/elements"
+              class="text-blue-400 hover:text-blue-900 dark:text-blue-200 dark:hover:text-blue-500 block px-4 py-2 text-sm"
+              role="menuitem"
+              tabindex="-1"
+              id="menu-item-0"
+              >Elements</a
+            >
+            <a
+              href="/api/swagger"
+              class="text-blue-400 hover:text-blue-900 dark:text-blue-200 dark:hover:text-blue-500 block px-4 py-2 text-sm"
+              role="menuitem"
+              tabindex="-1"
+              id="menu-item-1"
+              >Swagger</a
+            >
+            <a
+              href="/api/redoc"
+              class="text-blue-400 hover:text-blue-900 dark:text-blue-200 dark:hover:text-blue-500 block px-4 py-2 text-sm"
+              role="menuitem"
+              tabindex="-1"
+              id="menu-item-2"
+              >ReDoc</a
+            >
+          </div>
+        </div>
+      </div>
     </div>
   </nav>
-  <!-- Mobile menu, show/hide based on menu open state. -->
   <div class="lg:hidden" role="dialog" aria-modal="true">
-    <!-- Background backdrop, show/hide based on slide-over state. -->
     <div class="fixed inset-0 z-10"></div>
     <div
       class="fixed inset-y-0 left-0 z-10 w-full overflow-y-auto bg-white px-6 py-6"
@@ -246,5 +306,22 @@
       dropdownContent.addEventListener("mouseleave", hideDropdown);
     }
   });
+
+  let button = document.getElementById("menu-button");
+  let menu = document.getElementById("menu");
+
+  button.addEventListener("click", function (event) {
+    let isShown = menu.classList.toggle("hidden");
+    button.setAttribute("aria-expanded", !isShown);
+  });
+
+  window.onclick = function (event) {
+    if (!event.target.matches("#menu-button")) {
+      if (!menu.classList.contains("hidden")) {
+        menu.classList.add("hidden");
+        button.setAttribute("aria-expanded", false);
+      }
+    }
+  };
 </script>
 {% endblock %}