diff --git a/frontend/components/Nav.tsx b/frontend/components/Nav.tsx
index 7b7aab75..a7fa6cd3 100644
--- a/frontend/components/Nav.tsx
+++ b/frontend/components/Nav.tsx
@@ -7,7 +7,7 @@ export interface NavProps {
 
 export function Nav(props: NavProps) {
   return (
-    <nav class="mt-3 border-b border-jsr-cyan-300/30 flex gap-1 flex-col md:flex-row md:max-w-full md:overflow-auto">
+    <nav class="mt-3 border-b gap-1 border-jsr-cyan-300/30 flex flex-wrap md:flex-nowrap flex-row max-w-full overflow-auto items-end">
       {props.children}
     </nav>
   );
@@ -22,10 +22,8 @@ export interface NavItemProps {
 export function NavItem(props: NavItemProps) {
   return (
     <a
-      class={`md:px-4 px-2 py-2 text-sm md:text-base leading-none rounded-t-md md:hover:bg-jsr-cyan-100 md:hover:border-b-2 ${
-        props.active
-          ? "bg-jsr-cyan-200 md:bg-transparent border-b-2 border-jsr-cyan-700"
-          : "border-jsr-cyan-400"
+      class={`md:px-3 px-2 py-2 text-sm md:text-base min-h-10 leading-none rounded-none hover:bg-jsr-cyan-100 flex items-center ${
+        props.active ? "bg-jsr-cyan-100 font-semibold" : ""
       }`}
       href={props.href}
     >
diff --git a/frontend/static/styles.css b/frontend/static/styles.css
index 2208573d..5b5a6e41 100644
--- a/frontend/static/styles.css
+++ b/frontend/static/styles.css
@@ -210,4 +210,4 @@ body .ddoc .usage nav label {
     --base-text-weight-semibold: 500;
     --bgColor-muted: theme(colors.slate.50);
   }
-}
\ No newline at end of file
+}