From f5241916e1ce8b7eb5e7a95bfe49e73cef283ed7 Mon Sep 17 00:00:00 2001
From: James Perkins <james@unkey.dev>
Date: Thu, 27 Feb 2025 16:31:57 -0500
Subject: [PATCH 1/5] Split navigation into a navigation.tsx

This breaks navigation to a simple navigation.tsx file allowing for full
control on each page or segment, with the ability to make single changes
without breaking entire layouts.
---
 apps/dashboard/app/(app)/apis/navigation.tsx  | 23 +++++++
 apps/dashboard/app/(app)/apis/page.tsx        | 13 +---
 apps/dashboard/app/(app)/audit/navigation.tsx | 14 ++++
 apps/dashboard/app/(app)/audit/page.tsx       |  8 +--
 .../permissions/[permissionId]/navigation.tsx | 68 +++++++++++++++++++
 .../permissions/[permissionId]/page.tsx       | 63 +----------------
 .../authorization/permissions/navigation.tsx  | 30 ++++++++
 .../(app)/authorization/permissions/page.tsx  | 19 +-----
 .../roles/[roleId]/navigation.tsx             | 32 +++++++++
 .../authorization/roles/[roleId]/page.tsx     | 21 +-----
 .../(app)/authorization/roles/navigation.tsx  | 61 +++++++++++++++++
 .../app/(app)/authorization/roles/page.tsx    | 23 +------
 .../app/(app)/identities/navigation.tsx       | 16 +++++
 apps/dashboard/app/(app)/identities/page.tsx  | 11 +--
 apps/dashboard/app/(app)/logs/navigation.tsx  | 14 ++++
 apps/dashboard/app/(app)/logs/page.tsx        | 10 +--
 .../app/(app)/ratelimits/navigation.tsx       | 17 +++++
 apps/dashboard/app/(app)/ratelimits/page.tsx  | 14 +---
 .../(app)/settings/_navigation/navigation.tsx | 18 +++++
 .../app/(app)/settings/billing/page.tsx       |  9 +--
 .../settings/billing/plans/navigation.tsx     | 19 ++++++
 .../app/(app)/settings/billing/plans/page.tsx | 12 +---
 .../app/(app)/settings/general/page.tsx       | 10 +--
 .../settings/root-keys/[keyId]/navigation.tsx | 24 +++++++
 .../(app)/settings/root-keys/[keyId]/page.tsx | 16 +----
 .../(app)/settings/root-keys/navigation.tsx   | 23 +++++++
 .../app/(app)/settings/root-keys/new/page.tsx | 10 +--
 .../app/(app)/settings/root-keys/page.tsx     | 18 +----
 .../app/(app)/settings/team/page.tsx          |  9 +--
 .../app/(app)/settings/user/page.tsx          | 10 +--
 .../app/(app)/settings/vercel/navigation.tsx  |  0
 .../app/(app)/settings/vercel/page.tsx        |  9 +--
 32 files changed, 396 insertions(+), 248 deletions(-)
 create mode 100644 apps/dashboard/app/(app)/apis/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/audit/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/authorization/permissions/[permissionId]/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/authorization/permissions/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/authorization/roles/[roleId]/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/authorization/roles/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/identities/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/logs/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/ratelimits/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/settings/_navigation/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/settings/billing/plans/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/settings/root-keys/[keyId]/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/settings/root-keys/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/settings/vercel/navigation.tsx

diff --git a/apps/dashboard/app/(app)/apis/navigation.tsx b/apps/dashboard/app/(app)/apis/navigation.tsx
new file mode 100644
index 0000000000..74aa763f8a
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/navigation.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { Navbar } from "@/components/navbar";
+import { Nodes } from "@unkey/icons";
+import { CreateApiButton } from "./create-api-button";
+
+type NavigationProps = {
+  isNewApi: boolean;
+  apisLength: number;
+};
+
+export function Navigation({ isNewApi, apisLength }: NavigationProps) {
+  return (
+    <Navbar>
+      <Navbar.Breadcrumbs icon={<Nodes />}>
+        <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+      <Navbar.Actions>
+        <CreateApiButton key="createApi" defaultOpen={apisLength === 0 || isNewApi} />
+      </Navbar.Actions>
+    </Navbar>
+  );
+}
\ No newline at end of file
diff --git a/apps/dashboard/app/(app)/apis/page.tsx b/apps/dashboard/app/(app)/apis/page.tsx
index d4552b88f3..ea74303ecb 100644
--- a/apps/dashboard/app/(app)/apis/page.tsx
+++ b/apps/dashboard/app/(app)/apis/page.tsx
@@ -8,6 +8,7 @@ import { Nodes } from "@unkey/icons";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { ApiList } from "./client";
+import { Navigation } from "./navigation";
 
 export const dynamic = "force-dynamic";
 export const runtime = "edge";
@@ -47,17 +48,7 @@ export default async function ApisOverviewPage(props: Props) {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Nodes />}>
-          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <CreateApiButton
-            key="createApi"
-            defaultOpen={apis.length === 0 || props.searchParams.new}
-          />
-        </Navbar.Actions>
-      </Navbar>
+      <Navigation isNewApi={!!props.searchParams.new} apisLength={apis.length} />
       <PageContent>
         {unpaid ? (
           <div className="mt-10 flex min-h-[400px] flex-col items-center  justify-center space-y-6 rounded-lg border border-dashed px-4 md:mt-24">
diff --git a/apps/dashboard/app/(app)/audit/navigation.tsx b/apps/dashboard/app/(app)/audit/navigation.tsx
new file mode 100644
index 0000000000..b20598fe08
--- /dev/null
+++ b/apps/dashboard/app/(app)/audit/navigation.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { Navbar } from "@/components/navbar";
+import { InputSearch } from "@unkey/icons";
+
+export function Navigation() {
+  return (
+    <Navbar>
+      <Navbar.Breadcrumbs icon={<InputSearch />}>
+        <Navbar.Breadcrumbs.Link href="/audit">Audit</Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+    </Navbar>
+  );
+}
\ No newline at end of file
diff --git a/apps/dashboard/app/(app)/audit/page.tsx b/apps/dashboard/app/(app)/audit/page.tsx
index 64eacfe4a4..269634f0c1 100644
--- a/apps/dashboard/app/(app)/audit/page.tsx
+++ b/apps/dashboard/app/(app)/audit/page.tsx
@@ -1,4 +1,4 @@
-import { Navbar } from "@/components/navbar";
+import { Navigation } from "./navigation";
 import { getTenantId } from "@/lib/auth";
 import { InputSearch } from "@unkey/icons";
 import { Empty } from "@unkey/ui";
@@ -14,11 +14,7 @@ export default async function AuditPage() {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<InputSearch />}>
-          <Navbar.Breadcrumbs.Link href="/audit">Audit</Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-      </Navbar>
+       <Navigation />
       {workspace.auditLogBuckets.length > 0 ? (
         <LogsClient
           rootKeys={workspace.keys}
diff --git a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/navigation.tsx b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/navigation.tsx
new file mode 100644
index 0000000000..b0a4bf9fc9
--- /dev/null
+++ b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/navigation.tsx
@@ -0,0 +1,68 @@
+"use client";
+import { CopyButton } from "@/components/dashboard/copy-button";
+import { Navbar } from "@/components/navbar";
+import { ShieldKey } from "@unkey/icons";
+import { Badge } from "@/components/ui/badge";
+import { Button, TooltipTrigger, Tooltip, TooltipContent } from "@unkey/ui";
+import { DeletePermission } from "./delete-permission";
+import type { Permission } from "@unkey/db";
+// Reusable for settings where we only change the link
+export function Navigation({ permissionId, permission }: { permissionId: string, permission: Permission}) {
+ const shouldShowTooltip = permission.name.length > 16;
+
+  return (
+    <Navbar>
+        <Navbar.Breadcrumbs icon={<ShieldKey />}>
+          <Navbar.Breadcrumbs.Link href="/authorization/roles">
+            Authorization
+          </Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link href="/authorization/permissions">
+            Permissions
+          </Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link
+            href={`/authorization/permissions/${permissionId}`}
+            isIdentifier
+            active
+          >
+            {permissionId}
+          </Navbar.Breadcrumbs.Link>
+        </Navbar.Breadcrumbs>
+        <Navbar.Actions>
+          <Badge
+            key="permission-name"
+            variant="secondary"
+            className="w-40 font-mono font-medium ph-no-capture"
+          >
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className="flex items-center justify-between gap-2 w-full truncate">
+                  <span className="truncate">{permission.name}</span>
+                  <div>
+                    <CopyButton value={permission.name} />
+                  </div>
+                </div>
+              </TooltipTrigger>
+              {shouldShowTooltip && (
+                <TooltipContent>
+                  <span className="text-xs font-medium">{permission.name}</span>
+                </TooltipContent>
+              )}
+            </Tooltip>
+          </Badge>
+          <Badge
+            key="permission-id"
+            variant="secondary"
+            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
+          >
+            {permission.id}
+            <CopyButton value={permission.id} />
+          </Badge>
+          <DeletePermission
+            key="delete-permission"
+            trigger={<Button variant="destructive">Delete</Button>}
+            permission={permission}
+          />{" "}
+        </Navbar.Actions>
+      </Navbar>
+  );
+}
\ No newline at end of file
diff --git a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx
index a0411bb7be..788eae520e 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx
@@ -1,17 +1,11 @@
-import { CopyButton } from "@/components/dashboard/copy-button";
-import { Navbar } from "@/components/navbar";
 import { PageContent } from "@/components/page-content";
-import { Badge } from "@/components/ui/badge";
 import { Metric } from "@/components/ui/metric";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
-import { ShieldKey } from "@unkey/icons";
-import { Button } from "@unkey/ui";
 import { format } from "date-fns";
 import { notFound, redirect } from "next/navigation";
 import { Client } from "./client";
-import { DeletePermission } from "./delete-permission";
+import { Navigation } from "./navigation";
 
 export const revalidate = 0;
 
@@ -66,63 +60,10 @@ export default async function RolesPage(props: Props) {
       connectedKeys.add(key.keyId);
     }
   }
-  const shouldShowTooltip = permission.name.length > 16;
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<ShieldKey />}>
-          <Navbar.Breadcrumbs.Link href="/authorization/roles">
-            Authorization
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href="/authorization/permissions">
-            Permissions
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link
-            href={`/authorization/permissions/${props.params.permissionId}`}
-            isIdentifier
-            active
-          >
-            {props.params.permissionId}
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Badge
-            key="permission-name"
-            variant="secondary"
-            className="w-40 font-mono font-medium ph-no-capture"
-          >
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <div className="flex items-center justify-between gap-2 w-full truncate">
-                  <span className="truncate">{permission.name}</span>
-                  <div>
-                    <CopyButton value={permission.name} />
-                  </div>
-                </div>
-              </TooltipTrigger>
-              {shouldShowTooltip && (
-                <TooltipContent>
-                  <span className="text-xs font-medium">{permission.name}</span>
-                </TooltipContent>
-              )}
-            </Tooltip>
-          </Badge>
-          <Badge
-            key="permission-id"
-            variant="secondary"
-            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
-          >
-            {permission.id}
-            <CopyButton value={permission.id} />
-          </Badge>
-          <DeletePermission
-            key="delete-permission"
-            trigger={<Button variant="destructive">Delete</Button>}
-            permission={permission}
-          />{" "}
-        </Navbar.Actions>
-      </Navbar>
+      <Navigation permissionId={props.params.permissionId} permission={permission}/>
       <PageContent>
         <div className="flex flex-col min-h-screen gap-4">
           <div className="flex gap-4 mb-20">
diff --git a/apps/dashboard/app/(app)/authorization/permissions/navigation.tsx b/apps/dashboard/app/(app)/authorization/permissions/navigation.tsx
new file mode 100644
index 0000000000..38e5de00af
--- /dev/null
+++ b/apps/dashboard/app/(app)/authorization/permissions/navigation.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { Navbar } from "@/components/navbar";
+import { ShieldKey } from "@unkey/icons";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@unkey/ui";
+import { CreateNewPermission } from "./create-new-permission";
+
+// Reusable for settings where we only change the link
+export function Navigation({ numberOfPermissions }: { numberOfPermissions: number }) {
+  return (
+    <Navbar>
+        <Navbar.Breadcrumbs icon={<ShieldKey />}>
+          <Navbar.Breadcrumbs.Link href="/authorization/roles">
+            Authorization
+          </Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link href="/authorization/permissions" active>
+            Permissions
+          </Navbar.Breadcrumbs.Link>
+        </Navbar.Breadcrumbs>
+        <Navbar.Actions>
+          <Badge variant="secondary" className="h-8">
+            {Intl.NumberFormat().format(numberOfPermissions)} /{" "}
+            {Intl.NumberFormat().format(Number.POSITIVE_INFINITY)} used{" "}
+          </Badge>
+          <CreateNewPermission trigger={<Button variant="primary">Create New Permission</Button>} />
+        </Navbar.Actions>
+      </Navbar>
+  );
+}
\ No newline at end of file
diff --git a/apps/dashboard/app/(app)/authorization/permissions/page.tsx b/apps/dashboard/app/(app)/authorization/permissions/page.tsx
index 81a7a4ed98..08c4058a77 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/page.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/page.tsx
@@ -13,6 +13,7 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import { navigation } from "../constants";
 import { CreateNewPermission } from "./create-new-permission";
+import { Navigation } from "./navigation";
 
 export const revalidate = 0;
 
@@ -57,23 +58,7 @@ export default async function RolesPage() {
   });
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<ShieldKey />}>
-          <Navbar.Breadcrumbs.Link href="/authorization/roles">
-            Authorization
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href="/authorization/permissions" active>
-            Permissions
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Badge variant="secondary" className="h-8">
-            {Intl.NumberFormat().format(workspace.permissions.length)} /{" "}
-            {Intl.NumberFormat().format(Number.POSITIVE_INFINITY)} used{" "}
-          </Badge>
-          <CreateNewPermission trigger={<Button variant="primary">Create New Permission</Button>} />
-        </Navbar.Actions>
-      </Navbar>
+      <Navigation numberOfPermissions={workspace.permissions.length}/>
 
       <PageContent>
         <SubMenu navigation={navigation} segment="permissions" />
diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/navigation.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/navigation.tsx
new file mode 100644
index 0000000000..5896997c4e
--- /dev/null
+++ b/apps/dashboard/app/(app)/authorization/roles/[roleId]/navigation.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { Navbar } from "@/components/navbar";
+import { ShieldKey } from "@unkey/icons";
+import { DeleteRole } from "./delete-role";
+import { UpdateRole } from "./update-role";
+import { Button } from "@unkey/ui";
+import type { Role } from "@unkey/db";
+
+export function Navigation({role}: {role: Role} ) {
+  return (
+    <Navbar>
+        <Navbar.Breadcrumbs icon={<ShieldKey />}>
+          <Navbar.Breadcrumbs.Link href="/authorization/roles">
+            Authorization
+          </Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link href="/authorization/roles">Roles</Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link
+            href={`/authorization/permissions/${role.id}`}
+            isIdentifier
+            active
+          >
+            {role.id}
+          </Navbar.Breadcrumbs.Link>
+        </Navbar.Breadcrumbs>
+        <Navbar.Actions>
+          <UpdateRole role={role} trigger={<Button>Update Role</Button>} />
+          <DeleteRole role={role} trigger={<Button variant="destructive">Delete Role</Button>} />
+        </Navbar.Actions>
+      </Navbar>
+  );
+}
\ No newline at end of file
diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/page.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/page.tsx
index 2037a639f1..99debbcc0a 100644
--- a/apps/dashboard/app/(app)/authorization/roles/[roleId]/page.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/[roleId]/page.tsx
@@ -8,6 +8,7 @@ import { notFound, redirect } from "next/navigation";
 import { DeleteRole } from "./delete-role";
 import { type NestedPermissions, Tree } from "./tree";
 import { UpdateRole } from "./update-role";
+import { Navigation } from "./navigation";
 
 export const revalidate = 0;
 
@@ -110,25 +111,7 @@ export default async function RolesPage(props: Props) {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<ShieldKey />}>
-          <Navbar.Breadcrumbs.Link href="/authorization/roles">
-            Authorization
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href="/authorization/roles">Roles</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link
-            href={`/authorization/permissions/${props.params.roleId}`}
-            isIdentifier
-            active
-          >
-            {props.params.roleId}
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <UpdateRole role={role} trigger={<Button>Update Role</Button>} />
-          <DeleteRole role={role} trigger={<Button variant="destructive">Delete Role</Button>} />
-        </Navbar.Actions>
-      </Navbar>
+      <Navigation role={role}/>
       <PageContent>
         <div className="flex flex-col min-h-screen gap-8">
           <div className="flex items-center justify-between">
diff --git a/apps/dashboard/app/(app)/authorization/roles/navigation.tsx b/apps/dashboard/app/(app)/authorization/roles/navigation.tsx
new file mode 100644
index 0000000000..e1c7ca4bc5
--- /dev/null
+++ b/apps/dashboard/app/(app)/authorization/roles/navigation.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { Navbar } from "@/components/navbar";
+import { ShieldKey, } from "@unkey/icons";
+import { CreateNewRole } from "./create-new-role";
+import { Button } from "@unkey/ui";
+import { Badge } from "@/components/ui/badge";
+interface NavigationProps {
+  workspace: {
+    roles: Array<{
+      id: string;
+      name: string;
+      description: string | null;
+      keys: Array<{
+        key: {
+          deletedAtM: number | null;
+        };
+      }>;
+      permissions: Array<{
+        permission: any; // We could type this further if needed
+      }>;
+    }>;
+    permissions: Array<any>; // We need this for CreateNewRole component
+  };
+}
+
+export function Navigation({ workspace }: NavigationProps) {
+  return (
+    <Navbar >
+        <Navbar.Breadcrumbs icon={<ShieldKey />}>
+          <Navbar.Breadcrumbs.Link href="/authorization/roles">
+            Authorization
+          </Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link href="/authorization/roles" active>
+            Roles
+          </Navbar.Breadcrumbs.Link>
+        </Navbar.Breadcrumbs>
+        <Navbar.Actions>
+          <Badge variant="secondary" className="h-8">
+            {Intl.NumberFormat().format(workspace.roles.length)} /{" "}
+            {Intl.NumberFormat().format(Number.POSITIVE_INFINITY)} used{" "}
+          </Badge>
+          <CreateNewRole
+            trigger={<Button variant="primary">Create New Role</Button>}
+            permissions={workspace.permissions}
+          />
+        </Navbar.Actions>
+      </Navbar>
+  );
+}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/dashboard/app/(app)/authorization/roles/page.tsx b/apps/dashboard/app/(app)/authorization/roles/page.tsx
index e5afcc3231..1391ef5ea5 100644
--- a/apps/dashboard/app/(app)/authorization/roles/page.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/page.tsx
@@ -4,13 +4,13 @@ import { PageContent } from "@/components/page-content";
 import { Badge } from "@/components/ui/badge";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
-import { ShieldKey } from "@unkey/icons";
 import { Empty } from "@unkey/ui";
 import { Button } from "@unkey/ui";
 import { ChevronRight } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { navigation } from "../constants";
+import { Navigation } from "./navigation";
 import { CreateNewRole } from "./create-new-role";
 
 export const revalidate = 0;
@@ -57,26 +57,7 @@ export default async function RolesPage() {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<ShieldKey />}>
-          <Navbar.Breadcrumbs.Link href="/authorization/roles">
-            Authorization
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href="/authorization/roles" active>
-            Roles
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Badge variant="secondary" className="h-8">
-            {Intl.NumberFormat().format(workspace.roles.length)} /{" "}
-            {Intl.NumberFormat().format(Number.POSITIVE_INFINITY)} used{" "}
-          </Badge>
-          <CreateNewRole
-            trigger={<Button variant="primary">Create New Role</Button>}
-            permissions={workspace.permissions}
-          />
-        </Navbar.Actions>
-      </Navbar>
+      <Navigation workspace={workspace} />
 
       <PageContent>
         <SubMenu navigation={navigation} segment="roles" />
diff --git a/apps/dashboard/app/(app)/identities/navigation.tsx b/apps/dashboard/app/(app)/identities/navigation.tsx
new file mode 100644
index 0000000000..2913e73202
--- /dev/null
+++ b/apps/dashboard/app/(app)/identities/navigation.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { Navbar } from "@/components/navbar";
+import { Fingerprint } from "@unkey/icons";
+
+export function Navigation() {
+  return (
+    <Navbar>
+        <Navbar.Breadcrumbs icon={<Fingerprint />}>
+          <Navbar.Breadcrumbs.Link href="/identities" active>
+            Identities
+          </Navbar.Breadcrumbs.Link>
+        </Navbar.Breadcrumbs>
+      </Navbar>
+  );
+}
\ No newline at end of file
diff --git a/apps/dashboard/app/(app)/identities/page.tsx b/apps/dashboard/app/(app)/identities/page.tsx
index 886d10ba59..5f2f78fccc 100644
--- a/apps/dashboard/app/(app)/identities/page.tsx
+++ b/apps/dashboard/app/(app)/identities/page.tsx
@@ -1,10 +1,8 @@
-import { Navbar } from "@/components/navbar";
 import { OptIn } from "@/components/opt-in";
 import { PageContent } from "@/components/page-content";
 import { Table, TableBody, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
-import { Fingerprint } from "@unkey/icons";
 import { Empty } from "@unkey/ui";
 import { Loader2 } from "lucide-react";
 import { unstable_cache as cache } from "next/cache";
@@ -13,6 +11,7 @@ import { parseAsInteger, parseAsString } from "nuqs/server";
 import { Suspense } from "react";
 import { SearchField } from "./filter";
 import { Row } from "./row";
+import { Navigation } from "./navigation";
 type Props = {
   searchParams: {
     search?: string;
@@ -39,13 +38,7 @@ export default async function Page(props: Props) {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Fingerprint />}>
-          <Navbar.Breadcrumbs.Link href="/identities" active>
-            Identities
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-      </Navbar>
+      <Navigation/>
       <PageContent>
         <SearchField />
         <div className="flex flex-col gap-8 mb-20 mt-8">
diff --git a/apps/dashboard/app/(app)/logs/navigation.tsx b/apps/dashboard/app/(app)/logs/navigation.tsx
new file mode 100644
index 0000000000..4bccb0333f
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/navigation.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { Navbar } from "@/components/navbar";
+import { Layers3 } from "@unkey/icons";
+
+export function Navigation() {
+  return (
+    <Navbar>
+      <Navbar.Breadcrumbs icon={<Layers3 />}>
+          <Navbar.Breadcrumbs.Link href="/logs">Logs</Navbar.Breadcrumbs.Link>
+        </Navbar.Breadcrumbs>
+    </Navbar>
+  );
+}
\ No newline at end of file
diff --git a/apps/dashboard/app/(app)/logs/page.tsx b/apps/dashboard/app/(app)/logs/page.tsx
index f66b85084f..6cae7dd94b 100644
--- a/apps/dashboard/app/(app)/logs/page.tsx
+++ b/apps/dashboard/app/(app)/logs/page.tsx
@@ -1,11 +1,9 @@
 "use server";
-
-import { Navbar } from "@/components/navbar";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
-import { Layers3 } from "lucide-react";
 import { notFound } from "next/navigation";
 import { LogsClient } from "./components/logs-client";
+import { Navigation } from "./navigation";
 
 export default async function Page() {
   const tenantId = getTenantId();
@@ -21,11 +19,7 @@ export default async function Page() {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Layers3 />}>
-          <Navbar.Breadcrumbs.Link href="/logs">Logs</Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-      </Navbar>
+      <Navigation/>
       <LogsClient />
     </div>
   );
diff --git a/apps/dashboard/app/(app)/ratelimits/navigation.tsx b/apps/dashboard/app/(app)/ratelimits/navigation.tsx
new file mode 100644
index 0000000000..2d415ea540
--- /dev/null
+++ b/apps/dashboard/app/(app)/ratelimits/navigation.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { Navbar } from "@/components/navbar";
+import { Gauge, } from "@unkey/icons";
+import { CreateNamespaceButton } from "./_components/create-namespace-button";
+export function Navigation() {
+  return (
+    <Navbar>
+        <Navbar.Breadcrumbs icon={<Gauge />}>
+          <Navbar.Breadcrumbs.Link href="/ratelimits">Ratelimits</Navbar.Breadcrumbs.Link>
+        </Navbar.Breadcrumbs>
+        <Navbar.Actions>
+          <CreateNamespaceButton />
+        </Navbar.Actions>
+      </Navbar>
+  );
+}
\ No newline at end of file
diff --git a/apps/dashboard/app/(app)/ratelimits/page.tsx b/apps/dashboard/app/(app)/ratelimits/page.tsx
index ac85e73aa1..de3ecb432e 100644
--- a/apps/dashboard/app/(app)/ratelimits/page.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/page.tsx
@@ -1,10 +1,9 @@
-import { Navbar } from "@/components/navbar";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
-import { Gauge } from "@unkey/icons";
 import { redirect } from "next/navigation";
-import { CreateNamespaceButton } from "./_components/create-namespace-button";
+
 import { RatelimitClient } from "./_components/ratelimit-client";
+import { Navigation } from "./navigation";
 
 export const dynamic = "force-dynamic";
 export const runtime = "edge";
@@ -31,14 +30,7 @@ export default async function RatelimitOverviewPage() {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Gauge />}>
-          <Navbar.Breadcrumbs.Link href="/ratelimits">Ratelimits</Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <CreateNamespaceButton />
-        </Navbar.Actions>
-      </Navbar>
+      <Navigation/>
       <RatelimitClient ratelimitNamespaces={workspace.ratelimitNamespaces} />
     </div>
   );
diff --git a/apps/dashboard/app/(app)/settings/_navigation/navigation.tsx b/apps/dashboard/app/(app)/settings/_navigation/navigation.tsx
new file mode 100644
index 0000000000..cfa457b7a4
--- /dev/null
+++ b/apps/dashboard/app/(app)/settings/_navigation/navigation.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { Navbar } from "@/components/navbar";
+import { Gear } from "@unkey/icons";
+
+
+// Reusable for settings where we only change the link
+export function Navigation({href}: {href: string}) {
+  return (
+    <Navbar>
+        <Navbar.Breadcrumbs icon={<Gear />}>
+          <Navbar.Breadcrumbs.Link href={href} active>
+            Settings
+          </Navbar.Breadcrumbs.Link>
+        </Navbar.Breadcrumbs>
+      </Navbar>
+  );
+}
\ No newline at end of file
diff --git a/apps/dashboard/app/(app)/settings/billing/page.tsx b/apps/dashboard/app/(app)/settings/billing/page.tsx
index 1c23bbfd70..60ebe9fe46 100644
--- a/apps/dashboard/app/(app)/settings/billing/page.tsx
+++ b/apps/dashboard/app/(app)/settings/billing/page.tsx
@@ -24,6 +24,7 @@ import { redirect } from "next/navigation";
 import Stripe from "stripe";
 import { navigation } from "../constants";
 import { UserPaymentMethod } from "./user-payment-method";
+import { Navigation } from "../_navigation/navigation";
 
 export const revalidate = 0;
 
@@ -41,13 +42,7 @@ export default async function BillingPage() {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Gear />}>
-          <Navbar.Breadcrumbs.Link href="/settings/billing" active>
-            Settings
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-      </Navbar>
+      <Navigation href="/settings/billing"/>
       <PageContent>
         <SubMenu navigation={navigation} segment="billing" />
         <div className="flex flex-col gap-8 lg:flex-row mt-8 ">
diff --git a/apps/dashboard/app/(app)/settings/billing/plans/navigation.tsx b/apps/dashboard/app/(app)/settings/billing/plans/navigation.tsx
new file mode 100644
index 0000000000..6dc3b9cf18
--- /dev/null
+++ b/apps/dashboard/app/(app)/settings/billing/plans/navigation.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { Navbar } from "@/components/navbar";
+import { Gear } from "@unkey/icons";
+
+
+// Reusable for settings where we only change the link
+export function Navigation() {
+  return (
+    <Navbar>
+        <Navbar.Breadcrumbs icon={<Gear />}>
+          <Navbar.Breadcrumbs.Link href="/settings/billing">Billing</Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link href="/settings/billing/plans" active>
+            Plans
+          </Navbar.Breadcrumbs.Link>
+        </Navbar.Breadcrumbs>
+      </Navbar>
+  );
+}
\ No newline at end of file
diff --git a/apps/dashboard/app/(app)/settings/billing/plans/page.tsx b/apps/dashboard/app/(app)/settings/billing/plans/page.tsx
index d62c3238fe..bd4133a6e5 100644
--- a/apps/dashboard/app/(app)/settings/billing/plans/page.tsx
+++ b/apps/dashboard/app/(app)/settings/billing/plans/page.tsx
@@ -1,14 +1,13 @@
-import { Navbar } from "@/components/navbar";
 import { PageContent } from "@/components/page-content";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
-import { Gear } from "@unkey/icons";
 import { Button } from "@unkey/ui";
 import { ArrowLeft } from "lucide-react";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { ChangePlanButton } from "./button";
 import { tiers } from "./constants";
+import { Navigation } from "./navigation";
 
 export default async function Page() {
   const tenantId = getTenantId();
@@ -21,14 +20,7 @@ export default async function Page() {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Gear />}>
-          <Navbar.Breadcrumbs.Link href="/settings/billing">Billing</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href="/settings/billing/plans" active>
-            Plans
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-      </Navbar>
+      <Navigation/>
       <PageContent>
         <div>
           <Link
diff --git a/apps/dashboard/app/(app)/settings/general/page.tsx b/apps/dashboard/app/(app)/settings/general/page.tsx
index 165d5557dd..6e26d9262d 100644
--- a/apps/dashboard/app/(app)/settings/general/page.tsx
+++ b/apps/dashboard/app/(app)/settings/general/page.tsx
@@ -6,11 +6,11 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Code } from "@/components/ui/code";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
-import { Gear } from "@unkey/icons";
 import { redirect } from "next/navigation";
 import { navigation } from "../constants";
 import { UpdateWorkspaceImage } from "./update-workspace-image";
 import { UpdateWorkspaceName } from "./update-workspace-name";
+import { Navigation } from "../_navigation/navigation";
 
 export const dynamic = "force-dynamic";
 
@@ -27,13 +27,7 @@ export default async function SettingsPage() {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Gear />}>
-          <Navbar.Breadcrumbs.Link href="/settings/general" active>
-            Settings
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-      </Navbar>
+      <Navigation href="/settings/general"/>
       <PageContent>
         <SubMenu navigation={navigation} segment="general" />
         <div className="mb-20 flex flex-col gap-8 mt-8">
diff --git a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/navigation.tsx b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/navigation.tsx
new file mode 100644
index 0000000000..1de1e5b513
--- /dev/null
+++ b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/navigation.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { Navbar } from "@/components/navbar";
+import { Gear } from "@unkey/icons";
+import { Button } from "@unkey/ui";
+import Link from "next/link";
+
+export function Navigation({keyId}: {keyId: string}) {
+  return (
+    <Navbar>
+    <Navbar.Breadcrumbs icon={<Gear />}>
+      <Navbar.Breadcrumbs.Link href="/settings/root-keys">Root Keys</Navbar.Breadcrumbs.Link>
+      <Navbar.Breadcrumbs.Link
+        href={`/settings/root-keys/${keyId}`}
+        active
+        isIdentifier
+        className="w-[100px] truncate"
+      >
+        {keyId}
+      </Navbar.Breadcrumbs.Link>
+    </Navbar.Breadcrumbs>
+  </Navbar>
+  );
+}
\ No newline at end of file
diff --git a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx
index c06902ce3c..bd5cc01380 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx
@@ -17,6 +17,7 @@ import { Legacy } from "./permissions/legacy";
 import { apiPermissions } from "./permissions/permissions";
 import { Workspace } from "./permissions/workspace";
 import { UpdateRootKeyName } from "./update-root-key-name";
+import { Navigation } from "./navigation";
 
 export const dynamic = "force-dynamic";
 export const runtime = "edge";
@@ -128,20 +129,7 @@ export default async function RootKeyPage(props: {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Gear />}>
-          <Navbar.Breadcrumbs.Link href="/settings/root-keys">Root Keys</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link
-            href={`/settings/root-keys/${key.id}`}
-            active
-            isIdentifier
-            className="w-[100px] truncate"
-          >
-            {key.id}
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-      </Navbar>
-
+      <Navigation keyId={key.id}/>
       <PageContent>
         <PageLayout params={{ keyId: key.id }} rootKey={key}>
           <div className="flex flex-col gap-4">
diff --git a/apps/dashboard/app/(app)/settings/root-keys/navigation.tsx b/apps/dashboard/app/(app)/settings/root-keys/navigation.tsx
new file mode 100644
index 0000000000..9018a027ff
--- /dev/null
+++ b/apps/dashboard/app/(app)/settings/root-keys/navigation.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { Navbar } from "@/components/navbar";
+import { Gear } from "@unkey/icons";
+import { Button } from "@unkey/ui";
+import Link from "next/link";
+
+export function Navigation() {
+  return (
+    <Navbar>
+        <Navbar.Breadcrumbs icon={<Gear />}>
+          <Navbar.Breadcrumbs.Link href="/settings/root-keys" active>
+            Settings
+          </Navbar.Breadcrumbs.Link>
+        </Navbar.Breadcrumbs>
+        <Navbar.Actions>
+          <Link key="create-root-key" href="/settings/root-keys/new">
+            <Button variant="primary">Create New Root Key</Button>
+          </Link>
+        </Navbar.Actions>
+      </Navbar>
+  );
+}
\ No newline at end of file
diff --git a/apps/dashboard/app/(app)/settings/root-keys/new/page.tsx b/apps/dashboard/app/(app)/settings/root-keys/new/page.tsx
index 26baa2885b..de7eb96f24 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/new/page.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/new/page.tsx
@@ -6,6 +6,7 @@ import { db } from "@/lib/db";
 import { Gear } from "@unkey/icons";
 import { redirect } from "next/navigation";
 import { Client } from "./client";
+import { Navigation } from "../navigation";
 
 export const revalidate = 0;
 
@@ -30,14 +31,7 @@ export default async function SettingsKeysPage(_props: {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Gear />}>
-          <Navbar.Breadcrumbs.Link href="/settings/root-keys">Root Keys</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link active href="/settings/root-keys/new">
-            Create new key
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-      </Navbar>
+      <Navigation/>
       <PageContent>
         <PageHeader
           title="Create a new Root Key"
diff --git a/apps/dashboard/app/(app)/settings/root-keys/page.tsx b/apps/dashboard/app/(app)/settings/root-keys/page.tsx
index 37ce3468f4..8fcc2eccc2 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/page.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/page.tsx
@@ -1,15 +1,12 @@
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
 import { PageHeader } from "@/components/dashboard/page-header";
 import { RootKeyTable } from "@/components/dashboard/root-key-table";
-import { Navbar } from "@/components/navbar";
 import { PageContent } from "@/components/page-content";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
-import { Gear } from "@unkey/icons";
-import { Button } from "@unkey/ui";
-import Link from "next/link";
 import { redirect } from "next/navigation";
 import { navigation } from "../constants";
+import { Navigation } from "./navigation";
 
 export const revalidate = 0;
 
@@ -38,18 +35,7 @@ export default async function SettingsKeysPage(_props: {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Gear />}>
-          <Navbar.Breadcrumbs.Link href="/settings/root-keys" active>
-            Settings
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Link key="create-root-key" href="/settings/root-keys/new">
-            <Button variant="primary">Create New Root Key</Button>
-          </Link>
-        </Navbar.Actions>
-      </Navbar>
+      <Navigation/>
       <PageContent>
         <SubMenu navigation={navigation} segment="root-keys" />
 
diff --git a/apps/dashboard/app/(app)/settings/team/page.tsx b/apps/dashboard/app/(app)/settings/team/page.tsx
index ec340de203..fb2e627163 100644
--- a/apps/dashboard/app/(app)/settings/team/page.tsx
+++ b/apps/dashboard/app/(app)/settings/team/page.tsx
@@ -36,6 +36,7 @@ import type { MembershipRole } from "@clerk/types";
 import { Gear } from "@unkey/icons";
 import Link from "next/link";
 import { navigation } from "../constants";
+import { Navigation } from "../_navigation/navigation";
 
 type Member = {
   id: string;
@@ -51,13 +52,7 @@ export default function TeamPage() {
   if (!organization) {
     return (
       <div>
-        <Navbar>
-          <Navbar.Breadcrumbs icon={<Gear />}>
-            <Navbar.Breadcrumbs.Link href="/settings/team" active>
-              Settings
-            </Navbar.Breadcrumbs.Link>
-          </Navbar.Breadcrumbs>
-        </Navbar>
+        <Navigation href="/settings/team"/>
         <PageContent>
           <SubMenu navigation={navigation} segment="team" />
           <div className="mb-20 flex flex-col gap-8 mt-8">
diff --git a/apps/dashboard/app/(app)/settings/user/page.tsx b/apps/dashboard/app/(app)/settings/user/page.tsx
index 6b32924cc2..6cc3f9ab40 100644
--- a/apps/dashboard/app/(app)/settings/user/page.tsx
+++ b/apps/dashboard/app/(app)/settings/user/page.tsx
@@ -3,7 +3,7 @@ import { Navbar } from "@/components/navbar";
 import { PageContent } from "@/components/page-content";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
-import { Gear } from "@unkey/icons";
+import { Navigation } from "../_navigation/navigation";
 import { redirect } from "next/navigation";
 import { navigation } from "../constants";
 import { UpdateTheme } from "./update-theme";
@@ -26,13 +26,7 @@ export default async function SettingsPage() {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Gear />}>
-          <Navbar.Breadcrumbs.Link href="/settings/user" active>
-            Settings
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-      </Navbar>
+      <Navigation href="/settings/user"/>
       <PageContent>
         <SubMenu navigation={navigation} segment="user" />
 
diff --git a/apps/dashboard/app/(app)/settings/vercel/navigation.tsx b/apps/dashboard/app/(app)/settings/vercel/navigation.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/dashboard/app/(app)/settings/vercel/page.tsx b/apps/dashboard/app/(app)/settings/vercel/page.tsx
index 75dfc3f436..36bde8ee19 100644
--- a/apps/dashboard/app/(app)/settings/vercel/page.tsx
+++ b/apps/dashboard/app/(app)/settings/vercel/page.tsx
@@ -13,6 +13,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { navigation } from "../constants";
 import { Client } from "./client";
+import { Navigation } from "../_navigation/navigation";
 type Props = {
   searchParams: {
     configurationId?: string;
@@ -51,13 +52,7 @@ export default async function Page(props: Props) {
   if (!integration) {
     return (
       <div>
-        <Navbar>
-          <Navbar.Breadcrumbs icon={<Gear />}>
-            <Navbar.Breadcrumbs.Link href="/settings/vercel" active>
-              Settings
-            </Navbar.Breadcrumbs.Link>
-          </Navbar.Breadcrumbs>
-        </Navbar>
+        <Navigation href="/settings/vercel"/>
         <PageContent>
           <SubMenu navigation={navigation} segment="vercel" />
           <div className="mt-8" />

From 021252a1091e1839673e61909afe723eb4dc7e8a Mon Sep 17 00:00:00 2001
From: James Perkins <james@unkey.dev>
Date: Thu, 27 Feb 2025 16:32:18 -0500
Subject: [PATCH 2/5] formats the code

---
 apps/dashboard/app/(app)/apis/navigation.tsx  |   2 +-
 apps/dashboard/app/(app)/apis/page.tsx        |   4 -
 apps/dashboard/app/(app)/audit/navigation.tsx |   2 +-
 apps/dashboard/app/(app)/audit/page.tsx       |   5 +-
 .../permissions/[permissionId]/navigation.tsx | 115 +++++++++---------
 .../permissions/[permissionId]/page.tsx       |   2 +-
 .../authorization/permissions/navigation.tsx  |  34 +++---
 .../(app)/authorization/permissions/page.tsx  |   4 +-
 .../roles/[roleId]/navigation.tsx             |  38 +++---
 .../authorization/roles/[roleId]/page.tsx     |   9 +-
 .../(app)/authorization/roles/navigation.tsx  |  55 ++++-----
 .../app/(app)/authorization/roles/page.tsx    |   3 +-
 .../app/(app)/identities/navigation.tsx       |  14 +--
 apps/dashboard/app/(app)/identities/page.tsx  |   4 +-
 apps/dashboard/app/(app)/logs/navigation.tsx  |   6 +-
 apps/dashboard/app/(app)/logs/page.tsx        |   2 +-
 .../app/(app)/ratelimits/navigation.tsx       |  18 +--
 apps/dashboard/app/(app)/ratelimits/page.tsx  |   2 +-
 .../(app)/settings/_navigation/navigation.tsx |  17 ++-
 .../app/(app)/settings/billing/page.tsx       |   6 +-
 .../settings/billing/plans/navigation.tsx     |  17 ++-
 .../app/(app)/settings/billing/plans/page.tsx |   2 +-
 .../app/(app)/settings/general/page.tsx       |   5 +-
 .../settings/root-keys/[keyId]/navigation.tsx |  30 +++--
 .../(app)/settings/root-keys/[keyId]/page.tsx |   6 +-
 .../(app)/settings/root-keys/navigation.tsx   |  24 ++--
 .../app/(app)/settings/root-keys/new/page.tsx |   6 +-
 .../app/(app)/settings/root-keys/page.tsx     |   2 +-
 .../app/(app)/settings/team/page.tsx          |   4 +-
 .../app/(app)/settings/user/page.tsx          |   5 +-
 .../app/(app)/settings/vercel/page.tsx        |   4 +-
 31 files changed, 201 insertions(+), 246 deletions(-)

diff --git a/apps/dashboard/app/(app)/apis/navigation.tsx b/apps/dashboard/app/(app)/apis/navigation.tsx
index 74aa763f8a..082c9ab5fb 100644
--- a/apps/dashboard/app/(app)/apis/navigation.tsx
+++ b/apps/dashboard/app/(app)/apis/navigation.tsx
@@ -20,4 +20,4 @@ export function Navigation({ isNewApi, apisLength }: NavigationProps) {
       </Navbar.Actions>
     </Navbar>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/app/(app)/apis/page.tsx b/apps/dashboard/app/(app)/apis/page.tsx
index ea74303ecb..87dc416d47 100644
--- a/apps/dashboard/app/(app)/apis/page.tsx
+++ b/apps/dashboard/app/(app)/apis/page.tsx
@@ -1,10 +1,6 @@
-import { CreateApiButton } from "./create-api-button";
-
-import { Navbar } from "@/components/navbar";
 import { PageContent } from "@/components/page-content";
 import { getTenantId } from "@/lib/auth";
 import { and, db, eq, isNull, schema, sql } from "@/lib/db";
-import { Nodes } from "@unkey/icons";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { ApiList } from "./client";
diff --git a/apps/dashboard/app/(app)/audit/navigation.tsx b/apps/dashboard/app/(app)/audit/navigation.tsx
index b20598fe08..11b07f5bba 100644
--- a/apps/dashboard/app/(app)/audit/navigation.tsx
+++ b/apps/dashboard/app/(app)/audit/navigation.tsx
@@ -11,4 +11,4 @@ export function Navigation() {
       </Navbar.Breadcrumbs>
     </Navbar>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/app/(app)/audit/page.tsx b/apps/dashboard/app/(app)/audit/page.tsx
index 269634f0c1..9bb61ca259 100644
--- a/apps/dashboard/app/(app)/audit/page.tsx
+++ b/apps/dashboard/app/(app)/audit/page.tsx
@@ -1,9 +1,8 @@
-import { Navigation } from "./navigation";
 import { getTenantId } from "@/lib/auth";
-import { InputSearch } from "@unkey/icons";
 import { Empty } from "@unkey/ui";
 import { getWorkspace } from "./actions";
 import { LogsClient } from "./components/logs-client";
+import { Navigation } from "./navigation";
 
 export const dynamic = "force-dynamic";
 export const runtime = "edge";
@@ -14,7 +13,7 @@ export default async function AuditPage() {
 
   return (
     <div>
-       <Navigation />
+      <Navigation />
       {workspace.auditLogBuckets.length > 0 ? (
         <LogsClient
           rootKeys={workspace.keys}
diff --git a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/navigation.tsx b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/navigation.tsx
index b0a4bf9fc9..fbeabebb27 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/navigation.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/navigation.tsx
@@ -1,68 +1,69 @@
 "use client";
 import { CopyButton } from "@/components/dashboard/copy-button";
 import { Navbar } from "@/components/navbar";
-import { ShieldKey } from "@unkey/icons";
 import { Badge } from "@/components/ui/badge";
-import { Button, TooltipTrigger, Tooltip, TooltipContent } from "@unkey/ui";
-import { DeletePermission } from "./delete-permission";
 import type { Permission } from "@unkey/db";
+import { ShieldKey } from "@unkey/icons";
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from "@unkey/ui";
+import { DeletePermission } from "./delete-permission";
 // Reusable for settings where we only change the link
-export function Navigation({ permissionId, permission }: { permissionId: string, permission: Permission}) {
- const shouldShowTooltip = permission.name.length > 16;
+export function Navigation({
+  permissionId,
+  permission,
+}: { permissionId: string; permission: Permission }) {
+  const shouldShowTooltip = permission.name.length > 16;
 
   return (
     <Navbar>
-        <Navbar.Breadcrumbs icon={<ShieldKey />}>
-          <Navbar.Breadcrumbs.Link href="/authorization/roles">
-            Authorization
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href="/authorization/permissions">
-            Permissions
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link
-            href={`/authorization/permissions/${permissionId}`}
-            isIdentifier
-            active
-          >
-            {permissionId}
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Badge
-            key="permission-name"
-            variant="secondary"
-            className="w-40 font-mono font-medium ph-no-capture"
-          >
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <div className="flex items-center justify-between gap-2 w-full truncate">
-                  <span className="truncate">{permission.name}</span>
-                  <div>
-                    <CopyButton value={permission.name} />
-                  </div>
+      <Navbar.Breadcrumbs icon={<ShieldKey />}>
+        <Navbar.Breadcrumbs.Link href="/authorization/roles">Authorization</Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link href="/authorization/permissions">
+          Permissions
+        </Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link
+          href={`/authorization/permissions/${permissionId}`}
+          isIdentifier
+          active
+        >
+          {permissionId}
+        </Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+      <Navbar.Actions>
+        <Badge
+          key="permission-name"
+          variant="secondary"
+          className="w-40 font-mono font-medium ph-no-capture"
+        >
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex items-center justify-between gap-2 w-full truncate">
+                <span className="truncate">{permission.name}</span>
+                <div>
+                  <CopyButton value={permission.name} />
                 </div>
-              </TooltipTrigger>
-              {shouldShowTooltip && (
-                <TooltipContent>
-                  <span className="text-xs font-medium">{permission.name}</span>
-                </TooltipContent>
-              )}
-            </Tooltip>
-          </Badge>
-          <Badge
-            key="permission-id"
-            variant="secondary"
-            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
-          >
-            {permission.id}
-            <CopyButton value={permission.id} />
-          </Badge>
-          <DeletePermission
-            key="delete-permission"
-            trigger={<Button variant="destructive">Delete</Button>}
-            permission={permission}
-          />{" "}
-        </Navbar.Actions>
-      </Navbar>
+              </div>
+            </TooltipTrigger>
+            {shouldShowTooltip && (
+              <TooltipContent>
+                <span className="text-xs font-medium">{permission.name}</span>
+              </TooltipContent>
+            )}
+          </Tooltip>
+        </Badge>
+        <Badge
+          key="permission-id"
+          variant="secondary"
+          className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
+        >
+          {permission.id}
+          <CopyButton value={permission.id} />
+        </Badge>
+        <DeletePermission
+          key="delete-permission"
+          trigger={<Button variant="destructive">Delete</Button>}
+          permission={permission}
+        />{" "}
+      </Navbar.Actions>
+    </Navbar>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx
index 788eae520e..30f4a08356 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx
@@ -63,7 +63,7 @@ export default async function RolesPage(props: Props) {
 
   return (
     <div>
-      <Navigation permissionId={props.params.permissionId} permission={permission}/>
+      <Navigation permissionId={props.params.permissionId} permission={permission} />
       <PageContent>
         <div className="flex flex-col min-h-screen gap-4">
           <div className="flex gap-4 mb-20">
diff --git a/apps/dashboard/app/(app)/authorization/permissions/navigation.tsx b/apps/dashboard/app/(app)/authorization/permissions/navigation.tsx
index 38e5de00af..ea5388283f 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/navigation.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/navigation.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { Navbar } from "@/components/navbar";
-import { ShieldKey } from "@unkey/icons";
 import { Badge } from "@/components/ui/badge";
+import { ShieldKey } from "@unkey/icons";
 import { Button } from "@unkey/ui";
 import { CreateNewPermission } from "./create-new-permission";
 
@@ -10,21 +10,19 @@ import { CreateNewPermission } from "./create-new-permission";
 export function Navigation({ numberOfPermissions }: { numberOfPermissions: number }) {
   return (
     <Navbar>
-        <Navbar.Breadcrumbs icon={<ShieldKey />}>
-          <Navbar.Breadcrumbs.Link href="/authorization/roles">
-            Authorization
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href="/authorization/permissions" active>
-            Permissions
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Badge variant="secondary" className="h-8">
-            {Intl.NumberFormat().format(numberOfPermissions)} /{" "}
-            {Intl.NumberFormat().format(Number.POSITIVE_INFINITY)} used{" "}
-          </Badge>
-          <CreateNewPermission trigger={<Button variant="primary">Create New Permission</Button>} />
-        </Navbar.Actions>
-      </Navbar>
+      <Navbar.Breadcrumbs icon={<ShieldKey />}>
+        <Navbar.Breadcrumbs.Link href="/authorization/roles">Authorization</Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link href="/authorization/permissions" active>
+          Permissions
+        </Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+      <Navbar.Actions>
+        <Badge variant="secondary" className="h-8">
+          {Intl.NumberFormat().format(numberOfPermissions)} /{" "}
+          {Intl.NumberFormat().format(Number.POSITIVE_INFINITY)} used{" "}
+        </Badge>
+        <CreateNewPermission trigger={<Button variant="primary">Create New Permission</Button>} />
+      </Navbar.Actions>
+    </Navbar>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/app/(app)/authorization/permissions/page.tsx b/apps/dashboard/app/(app)/authorization/permissions/page.tsx
index 08c4058a77..977eb76662 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/page.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/page.tsx
@@ -1,11 +1,9 @@
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
-import { Navbar } from "@/components/navbar";
 import { PageContent } from "@/components/page-content";
 import { Badge } from "@/components/ui/badge";
 import { getTenantId } from "@/lib/auth";
 import { asc, db } from "@/lib/db";
 import { permissions } from "@unkey/db/src/schema";
-import { ShieldKey } from "@unkey/icons";
 import { Empty } from "@unkey/ui";
 import { Button } from "@unkey/ui";
 import { ChevronRight } from "lucide-react";
@@ -58,7 +56,7 @@ export default async function RolesPage() {
   });
   return (
     <div>
-      <Navigation numberOfPermissions={workspace.permissions.length}/>
+      <Navigation numberOfPermissions={workspace.permissions.length} />
 
       <PageContent>
         <SubMenu navigation={navigation} segment="permissions" />
diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/navigation.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/navigation.tsx
index 5896997c4e..2774804f33 100644
--- a/apps/dashboard/app/(app)/authorization/roles/[roleId]/navigation.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/[roleId]/navigation.tsx
@@ -1,32 +1,26 @@
 "use client";
 
 import { Navbar } from "@/components/navbar";
+import type { Role } from "@unkey/db";
 import { ShieldKey } from "@unkey/icons";
+import { Button } from "@unkey/ui";
 import { DeleteRole } from "./delete-role";
 import { UpdateRole } from "./update-role";
-import { Button } from "@unkey/ui";
-import type { Role } from "@unkey/db";
 
-export function Navigation({role}: {role: Role} ) {
+export function Navigation({ role }: { role: Role }) {
   return (
     <Navbar>
-        <Navbar.Breadcrumbs icon={<ShieldKey />}>
-          <Navbar.Breadcrumbs.Link href="/authorization/roles">
-            Authorization
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href="/authorization/roles">Roles</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link
-            href={`/authorization/permissions/${role.id}`}
-            isIdentifier
-            active
-          >
-            {role.id}
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <UpdateRole role={role} trigger={<Button>Update Role</Button>} />
-          <DeleteRole role={role} trigger={<Button variant="destructive">Delete Role</Button>} />
-        </Navbar.Actions>
-      </Navbar>
+      <Navbar.Breadcrumbs icon={<ShieldKey />}>
+        <Navbar.Breadcrumbs.Link href="/authorization/roles">Authorization</Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link href="/authorization/roles">Roles</Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link href={`/authorization/permissions/${role.id}`} isIdentifier active>
+          {role.id}
+        </Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+      <Navbar.Actions>
+        <UpdateRole role={role} trigger={<Button>Update Role</Button>} />
+        <DeleteRole role={role} trigger={<Button variant="destructive">Delete Role</Button>} />
+      </Navbar.Actions>
+    </Navbar>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/page.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/page.tsx
index 99debbcc0a..49515bf2e5 100644
--- a/apps/dashboard/app/(app)/authorization/roles/[roleId]/page.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/[roleId]/page.tsx
@@ -1,14 +1,9 @@
-import { Navbar } from "@/components/navbar";
 import { PageContent } from "@/components/page-content";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
-import { ShieldKey } from "@unkey/icons";
-import { Button } from "@unkey/ui";
 import { notFound, redirect } from "next/navigation";
-import { DeleteRole } from "./delete-role";
-import { type NestedPermissions, Tree } from "./tree";
-import { UpdateRole } from "./update-role";
 import { Navigation } from "./navigation";
+import { type NestedPermissions, Tree } from "./tree";
 
 export const revalidate = 0;
 
@@ -111,7 +106,7 @@ export default async function RolesPage(props: Props) {
 
   return (
     <div>
-      <Navigation role={role}/>
+      <Navigation role={role} />
       <PageContent>
         <div className="flex flex-col min-h-screen gap-8">
           <div className="flex items-center justify-between">
diff --git a/apps/dashboard/app/(app)/authorization/roles/navigation.tsx b/apps/dashboard/app/(app)/authorization/roles/navigation.tsx
index e1c7ca4bc5..23664b8f7b 100644
--- a/apps/dashboard/app/(app)/authorization/roles/navigation.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/navigation.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { Navbar } from "@/components/navbar";
-import { ShieldKey, } from "@unkey/icons";
-import { CreateNewRole } from "./create-new-role";
-import { Button } from "@unkey/ui";
 import { Badge } from "@/components/ui/badge";
+import { ShieldKey } from "@unkey/icons";
+import { Button } from "@unkey/ui";
+import { CreateNewRole } from "./create-new-role";
 interface NavigationProps {
   workspace: {
     roles: Array<{
@@ -26,36 +26,23 @@ interface NavigationProps {
 
 export function Navigation({ workspace }: NavigationProps) {
   return (
-    <Navbar >
-        <Navbar.Breadcrumbs icon={<ShieldKey />}>
-          <Navbar.Breadcrumbs.Link href="/authorization/roles">
-            Authorization
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href="/authorization/roles" active>
-            Roles
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Badge variant="secondary" className="h-8">
-            {Intl.NumberFormat().format(workspace.roles.length)} /{" "}
-            {Intl.NumberFormat().format(Number.POSITIVE_INFINITY)} used{" "}
-          </Badge>
-          <CreateNewRole
-            trigger={<Button variant="primary">Create New Role</Button>}
-            permissions={workspace.permissions}
-          />
-        </Navbar.Actions>
-      </Navbar>
+    <Navbar>
+      <Navbar.Breadcrumbs icon={<ShieldKey />}>
+        <Navbar.Breadcrumbs.Link href="/authorization/roles">Authorization</Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link href="/authorization/roles" active>
+          Roles
+        </Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+      <Navbar.Actions>
+        <Badge variant="secondary" className="h-8">
+          {Intl.NumberFormat().format(workspace.roles.length)} /{" "}
+          {Intl.NumberFormat().format(Number.POSITIVE_INFINITY)} used{" "}
+        </Badge>
+        <CreateNewRole
+          trigger={<Button variant="primary">Create New Role</Button>}
+          permissions={workspace.permissions}
+        />
+      </Navbar.Actions>
+    </Navbar>
   );
 }
-
-
-
-
-
-
-
-
-
-
-
diff --git a/apps/dashboard/app/(app)/authorization/roles/page.tsx b/apps/dashboard/app/(app)/authorization/roles/page.tsx
index 1391ef5ea5..7a7110f6e4 100644
--- a/apps/dashboard/app/(app)/authorization/roles/page.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/page.tsx
@@ -1,5 +1,4 @@
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
-import { Navbar } from "@/components/navbar";
 import { PageContent } from "@/components/page-content";
 import { Badge } from "@/components/ui/badge";
 import { getTenantId } from "@/lib/auth";
@@ -10,8 +9,8 @@ import { ChevronRight } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { navigation } from "../constants";
-import { Navigation } from "./navigation";
 import { CreateNewRole } from "./create-new-role";
+import { Navigation } from "./navigation";
 
 export const revalidate = 0;
 
diff --git a/apps/dashboard/app/(app)/identities/navigation.tsx b/apps/dashboard/app/(app)/identities/navigation.tsx
index 2913e73202..006d7de5fd 100644
--- a/apps/dashboard/app/(app)/identities/navigation.tsx
+++ b/apps/dashboard/app/(app)/identities/navigation.tsx
@@ -6,11 +6,11 @@ import { Fingerprint } from "@unkey/icons";
 export function Navigation() {
   return (
     <Navbar>
-        <Navbar.Breadcrumbs icon={<Fingerprint />}>
-          <Navbar.Breadcrumbs.Link href="/identities" active>
-            Identities
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-      </Navbar>
+      <Navbar.Breadcrumbs icon={<Fingerprint />}>
+        <Navbar.Breadcrumbs.Link href="/identities" active>
+          Identities
+        </Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+    </Navbar>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/app/(app)/identities/page.tsx b/apps/dashboard/app/(app)/identities/page.tsx
index 5f2f78fccc..67e0dd2625 100644
--- a/apps/dashboard/app/(app)/identities/page.tsx
+++ b/apps/dashboard/app/(app)/identities/page.tsx
@@ -10,8 +10,8 @@ import { redirect } from "next/navigation";
 import { parseAsInteger, parseAsString } from "nuqs/server";
 import { Suspense } from "react";
 import { SearchField } from "./filter";
-import { Row } from "./row";
 import { Navigation } from "./navigation";
+import { Row } from "./row";
 type Props = {
   searchParams: {
     search?: string;
@@ -38,7 +38,7 @@ export default async function Page(props: Props) {
 
   return (
     <div>
-      <Navigation/>
+      <Navigation />
       <PageContent>
         <SearchField />
         <div className="flex flex-col gap-8 mb-20 mt-8">
diff --git a/apps/dashboard/app/(app)/logs/navigation.tsx b/apps/dashboard/app/(app)/logs/navigation.tsx
index 4bccb0333f..00fb1eaf9c 100644
--- a/apps/dashboard/app/(app)/logs/navigation.tsx
+++ b/apps/dashboard/app/(app)/logs/navigation.tsx
@@ -7,8 +7,8 @@ export function Navigation() {
   return (
     <Navbar>
       <Navbar.Breadcrumbs icon={<Layers3 />}>
-          <Navbar.Breadcrumbs.Link href="/logs">Logs</Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
+        <Navbar.Breadcrumbs.Link href="/logs">Logs</Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
     </Navbar>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/app/(app)/logs/page.tsx b/apps/dashboard/app/(app)/logs/page.tsx
index 6cae7dd94b..1ddf195a00 100644
--- a/apps/dashboard/app/(app)/logs/page.tsx
+++ b/apps/dashboard/app/(app)/logs/page.tsx
@@ -19,7 +19,7 @@ export default async function Page() {
 
   return (
     <div>
-      <Navigation/>
+      <Navigation />
       <LogsClient />
     </div>
   );
diff --git a/apps/dashboard/app/(app)/ratelimits/navigation.tsx b/apps/dashboard/app/(app)/ratelimits/navigation.tsx
index 2d415ea540..e87482c34d 100644
--- a/apps/dashboard/app/(app)/ratelimits/navigation.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/navigation.tsx
@@ -1,17 +1,17 @@
 "use client";
 
 import { Navbar } from "@/components/navbar";
-import { Gauge, } from "@unkey/icons";
+import { Gauge } from "@unkey/icons";
 import { CreateNamespaceButton } from "./_components/create-namespace-button";
 export function Navigation() {
   return (
     <Navbar>
-        <Navbar.Breadcrumbs icon={<Gauge />}>
-          <Navbar.Breadcrumbs.Link href="/ratelimits">Ratelimits</Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <CreateNamespaceButton />
-        </Navbar.Actions>
-      </Navbar>
+      <Navbar.Breadcrumbs icon={<Gauge />}>
+        <Navbar.Breadcrumbs.Link href="/ratelimits">Ratelimits</Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+      <Navbar.Actions>
+        <CreateNamespaceButton />
+      </Navbar.Actions>
+    </Navbar>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/app/(app)/ratelimits/page.tsx b/apps/dashboard/app/(app)/ratelimits/page.tsx
index de3ecb432e..a2ecfe4002 100644
--- a/apps/dashboard/app/(app)/ratelimits/page.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/page.tsx
@@ -30,7 +30,7 @@ export default async function RatelimitOverviewPage() {
 
   return (
     <div>
-      <Navigation/>
+      <Navigation />
       <RatelimitClient ratelimitNamespaces={workspace.ratelimitNamespaces} />
     </div>
   );
diff --git a/apps/dashboard/app/(app)/settings/_navigation/navigation.tsx b/apps/dashboard/app/(app)/settings/_navigation/navigation.tsx
index cfa457b7a4..5fbdcc14d6 100644
--- a/apps/dashboard/app/(app)/settings/_navigation/navigation.tsx
+++ b/apps/dashboard/app/(app)/settings/_navigation/navigation.tsx
@@ -3,16 +3,15 @@
 import { Navbar } from "@/components/navbar";
 import { Gear } from "@unkey/icons";
 
-
 // Reusable for settings where we only change the link
-export function Navigation({href}: {href: string}) {
+export function Navigation({ href }: { href: string }) {
   return (
     <Navbar>
-        <Navbar.Breadcrumbs icon={<Gear />}>
-          <Navbar.Breadcrumbs.Link href={href} active>
-            Settings
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-      </Navbar>
+      <Navbar.Breadcrumbs icon={<Gear />}>
+        <Navbar.Breadcrumbs.Link href={href} active>
+          Settings
+        </Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+    </Navbar>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/app/(app)/settings/billing/page.tsx b/apps/dashboard/app/(app)/settings/billing/page.tsx
index 60ebe9fe46..cf1e56dc83 100644
--- a/apps/dashboard/app/(app)/settings/billing/page.tsx
+++ b/apps/dashboard/app/(app)/settings/billing/page.tsx
@@ -1,5 +1,4 @@
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
-import { Navbar } from "@/components/navbar";
 import { PageContent } from "@/components/page-content";
 import {
   Card,
@@ -16,15 +15,14 @@ import { type Workspace, db } from "@/lib/db";
 import { stripeEnv } from "@/lib/env";
 import { cn } from "@/lib/utils";
 import { type BillingTier, QUOTA, calculateTieredPrices } from "@unkey/billing";
-import { Gear } from "@unkey/icons";
 import { Button } from "@unkey/ui";
 import { Check, ExternalLink } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import Stripe from "stripe";
+import { Navigation } from "../_navigation/navigation";
 import { navigation } from "../constants";
 import { UserPaymentMethod } from "./user-payment-method";
-import { Navigation } from "../_navigation/navigation";
 
 export const revalidate = 0;
 
@@ -42,7 +40,7 @@ export default async function BillingPage() {
 
   return (
     <div>
-      <Navigation href="/settings/billing"/>
+      <Navigation href="/settings/billing" />
       <PageContent>
         <SubMenu navigation={navigation} segment="billing" />
         <div className="flex flex-col gap-8 lg:flex-row mt-8 ">
diff --git a/apps/dashboard/app/(app)/settings/billing/plans/navigation.tsx b/apps/dashboard/app/(app)/settings/billing/plans/navigation.tsx
index 6dc3b9cf18..176dfc9cea 100644
--- a/apps/dashboard/app/(app)/settings/billing/plans/navigation.tsx
+++ b/apps/dashboard/app/(app)/settings/billing/plans/navigation.tsx
@@ -3,17 +3,16 @@
 import { Navbar } from "@/components/navbar";
 import { Gear } from "@unkey/icons";
 
-
 // Reusable for settings where we only change the link
 export function Navigation() {
   return (
     <Navbar>
-        <Navbar.Breadcrumbs icon={<Gear />}>
-          <Navbar.Breadcrumbs.Link href="/settings/billing">Billing</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href="/settings/billing/plans" active>
-            Plans
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-      </Navbar>
+      <Navbar.Breadcrumbs icon={<Gear />}>
+        <Navbar.Breadcrumbs.Link href="/settings/billing">Billing</Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link href="/settings/billing/plans" active>
+          Plans
+        </Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+    </Navbar>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/app/(app)/settings/billing/plans/page.tsx b/apps/dashboard/app/(app)/settings/billing/plans/page.tsx
index bd4133a6e5..32f6558e0f 100644
--- a/apps/dashboard/app/(app)/settings/billing/plans/page.tsx
+++ b/apps/dashboard/app/(app)/settings/billing/plans/page.tsx
@@ -20,7 +20,7 @@ export default async function Page() {
 
   return (
     <div>
-      <Navigation/>
+      <Navigation />
       <PageContent>
         <div>
           <Link
diff --git a/apps/dashboard/app/(app)/settings/general/page.tsx b/apps/dashboard/app/(app)/settings/general/page.tsx
index 6e26d9262d..60d3f4d584 100644
--- a/apps/dashboard/app/(app)/settings/general/page.tsx
+++ b/apps/dashboard/app/(app)/settings/general/page.tsx
@@ -1,16 +1,15 @@
 import { CopyButton } from "@/components/dashboard/copy-button";
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
-import { Navbar } from "@/components/navbar";
 import { PageContent } from "@/components/page-content";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Code } from "@/components/ui/code";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
 import { redirect } from "next/navigation";
+import { Navigation } from "../_navigation/navigation";
 import { navigation } from "../constants";
 import { UpdateWorkspaceImage } from "./update-workspace-image";
 import { UpdateWorkspaceName } from "./update-workspace-name";
-import { Navigation } from "../_navigation/navigation";
 
 export const dynamic = "force-dynamic";
 
@@ -27,7 +26,7 @@ export default async function SettingsPage() {
 
   return (
     <div>
-      <Navigation href="/settings/general"/>
+      <Navigation href="/settings/general" />
       <PageContent>
         <SubMenu navigation={navigation} segment="general" />
         <div className="mb-20 flex flex-col gap-8 mt-8">
diff --git a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/navigation.tsx b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/navigation.tsx
index 1de1e5b513..5a930ae3ad 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/navigation.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/navigation.tsx
@@ -2,23 +2,21 @@
 
 import { Navbar } from "@/components/navbar";
 import { Gear } from "@unkey/icons";
-import { Button } from "@unkey/ui";
-import Link from "next/link";
 
-export function Navigation({keyId}: {keyId: string}) {
+export function Navigation({ keyId }: { keyId: string }) {
   return (
     <Navbar>
-    <Navbar.Breadcrumbs icon={<Gear />}>
-      <Navbar.Breadcrumbs.Link href="/settings/root-keys">Root Keys</Navbar.Breadcrumbs.Link>
-      <Navbar.Breadcrumbs.Link
-        href={`/settings/root-keys/${keyId}`}
-        active
-        isIdentifier
-        className="w-[100px] truncate"
-      >
-        {keyId}
-      </Navbar.Breadcrumbs.Link>
-    </Navbar.Breadcrumbs>
-  </Navbar>
+      <Navbar.Breadcrumbs icon={<Gear />}>
+        <Navbar.Breadcrumbs.Link href="/settings/root-keys">Root Keys</Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link
+          href={`/settings/root-keys/${keyId}`}
+          active
+          isIdentifier
+          className="w-[100px] truncate"
+        >
+          {keyId}
+        </Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+    </Navbar>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx
index bd5cc01380..a270db5fee 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx
@@ -1,4 +1,3 @@
-import { Navbar } from "@/components/navbar";
 import { PageContent } from "@/components/page-content";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { DialogTrigger } from "@/components/ui/dialog";
@@ -6,10 +5,10 @@ import { getTenantId } from "@/lib/auth";
 import { clickhouse } from "@/lib/clickhouse";
 import { type Permission, db, eq, schema } from "@/lib/db";
 import { env } from "@/lib/env";
-import { Gear } from "@unkey/icons";
 import { Button } from "@unkey/ui";
 import { notFound } from "next/navigation";
 import { AccessTable } from "./history/access-table";
+import { Navigation } from "./navigation";
 import { PageLayout } from "./page-layout";
 import { DialogAddPermissionsForAPI } from "./permissions/add-permission-for-api";
 import { Api } from "./permissions/api";
@@ -17,7 +16,6 @@ import { Legacy } from "./permissions/legacy";
 import { apiPermissions } from "./permissions/permissions";
 import { Workspace } from "./permissions/workspace";
 import { UpdateRootKeyName } from "./update-root-key-name";
-import { Navigation } from "./navigation";
 
 export const dynamic = "force-dynamic";
 export const runtime = "edge";
@@ -129,7 +127,7 @@ export default async function RootKeyPage(props: {
 
   return (
     <div>
-      <Navigation keyId={key.id}/>
+      <Navigation keyId={key.id} />
       <PageContent>
         <PageLayout params={{ keyId: key.id }} rootKey={key}>
           <div className="flex flex-col gap-4">
diff --git a/apps/dashboard/app/(app)/settings/root-keys/navigation.tsx b/apps/dashboard/app/(app)/settings/root-keys/navigation.tsx
index 9018a027ff..29dcf8b6b3 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/navigation.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/navigation.tsx
@@ -8,16 +8,16 @@ import Link from "next/link";
 export function Navigation() {
   return (
     <Navbar>
-        <Navbar.Breadcrumbs icon={<Gear />}>
-          <Navbar.Breadcrumbs.Link href="/settings/root-keys" active>
-            Settings
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Link key="create-root-key" href="/settings/root-keys/new">
-            <Button variant="primary">Create New Root Key</Button>
-          </Link>
-        </Navbar.Actions>
-      </Navbar>
+      <Navbar.Breadcrumbs icon={<Gear />}>
+        <Navbar.Breadcrumbs.Link href="/settings/root-keys" active>
+          Settings
+        </Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+      <Navbar.Actions>
+        <Link key="create-root-key" href="/settings/root-keys/new">
+          <Button variant="primary">Create New Root Key</Button>
+        </Link>
+      </Navbar.Actions>
+    </Navbar>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/app/(app)/settings/root-keys/new/page.tsx b/apps/dashboard/app/(app)/settings/root-keys/new/page.tsx
index de7eb96f24..4441691ff8 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/new/page.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/new/page.tsx
@@ -1,12 +1,10 @@
 import { PageHeader } from "@/components/dashboard/page-header";
-import { Navbar } from "@/components/navbar";
 import { PageContent } from "@/components/page-content";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
-import { Gear } from "@unkey/icons";
 import { redirect } from "next/navigation";
-import { Client } from "./client";
 import { Navigation } from "../navigation";
+import { Client } from "./client";
 
 export const revalidate = 0;
 
@@ -31,7 +29,7 @@ export default async function SettingsKeysPage(_props: {
 
   return (
     <div>
-      <Navigation/>
+      <Navigation />
       <PageContent>
         <PageHeader
           title="Create a new Root Key"
diff --git a/apps/dashboard/app/(app)/settings/root-keys/page.tsx b/apps/dashboard/app/(app)/settings/root-keys/page.tsx
index 8fcc2eccc2..7623d5f32d 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/page.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/page.tsx
@@ -35,7 +35,7 @@ export default async function SettingsKeysPage(_props: {
 
   return (
     <div>
-      <Navigation/>
+      <Navigation />
       <PageContent>
         <SubMenu navigation={navigation} segment="root-keys" />
 
diff --git a/apps/dashboard/app/(app)/settings/team/page.tsx b/apps/dashboard/app/(app)/settings/team/page.tsx
index fb2e627163..91c059977a 100644
--- a/apps/dashboard/app/(app)/settings/team/page.tsx
+++ b/apps/dashboard/app/(app)/settings/team/page.tsx
@@ -35,8 +35,8 @@ import { toast } from "@/components/ui/toaster";
 import type { MembershipRole } from "@clerk/types";
 import { Gear } from "@unkey/icons";
 import Link from "next/link";
-import { navigation } from "../constants";
 import { Navigation } from "../_navigation/navigation";
+import { navigation } from "../constants";
 
 type Member = {
   id: string;
@@ -52,7 +52,7 @@ export default function TeamPage() {
   if (!organization) {
     return (
       <div>
-        <Navigation href="/settings/team"/>
+        <Navigation href="/settings/team" />
         <PageContent>
           <SubMenu navigation={navigation} segment="team" />
           <div className="mb-20 flex flex-col gap-8 mt-8">
diff --git a/apps/dashboard/app/(app)/settings/user/page.tsx b/apps/dashboard/app/(app)/settings/user/page.tsx
index 6cc3f9ab40..ba52d35789 100644
--- a/apps/dashboard/app/(app)/settings/user/page.tsx
+++ b/apps/dashboard/app/(app)/settings/user/page.tsx
@@ -1,10 +1,9 @@
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
-import { Navbar } from "@/components/navbar";
 import { PageContent } from "@/components/page-content";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
-import { Navigation } from "../_navigation/navigation";
 import { redirect } from "next/navigation";
+import { Navigation } from "../_navigation/navigation";
 import { navigation } from "../constants";
 import { UpdateTheme } from "./update-theme";
 import { UpdateUserEmail } from "./update-user-email";
@@ -26,7 +25,7 @@ export default async function SettingsPage() {
 
   return (
     <div>
-      <Navigation href="/settings/user"/>
+      <Navigation href="/settings/user" />
       <PageContent>
         <SubMenu navigation={navigation} segment="user" />
 
diff --git a/apps/dashboard/app/(app)/settings/vercel/page.tsx b/apps/dashboard/app/(app)/settings/vercel/page.tsx
index 36bde8ee19..e3691fa6fa 100644
--- a/apps/dashboard/app/(app)/settings/vercel/page.tsx
+++ b/apps/dashboard/app/(app)/settings/vercel/page.tsx
@@ -11,9 +11,9 @@ import { Button } from "@unkey/ui";
 import { Vercel } from "@unkey/vercel";
 import Link from "next/link";
 import { notFound } from "next/navigation";
+import { Navigation } from "../_navigation/navigation";
 import { navigation } from "../constants";
 import { Client } from "./client";
-import { Navigation } from "../_navigation/navigation";
 type Props = {
   searchParams: {
     configurationId?: string;
@@ -52,7 +52,7 @@ export default async function Page(props: Props) {
   if (!integration) {
     return (
       <div>
-        <Navigation href="/settings/vercel"/>
+        <Navigation href="/settings/vercel" />
         <PageContent>
           <SubMenu navigation={navigation} segment="vercel" />
           <div className="mt-8" />

From 6dd6f56829254c95da14ef2d37d1e540db7fdcd1 Mon Sep 17 00:00:00 2001
From: James Perkins <james@unkey.dev>
Date: Thu, 27 Feb 2025 17:37:03 -0500
Subject: [PATCH 3/5] Refactoring

Refactors for a generic navigation and finishes the final ones
---
 .../keys/[keyAuthId]/[keyId]/navigation.tsx   | 52 ++++++++++++++++
 .../[apiId]/keys/[keyAuthId]/[keyId]/page.tsx | 31 +---------
 .../[keyId]/settings/navigation.tsx           | 59 +++++++++++++++++++
 .../[keyAuthId]/[keyId]/settings/page.tsx     | 37 ++----------
 .../[apiId]/keys/[keyAuthId]/navigation.tsx   | 51 ++++++++++++++++
 .../keys/[keyAuthId]/new/navigation.tsx       | 56 ++++++++++++++++++
 .../[apiId]/keys/[keyAuthId]/new/page.tsx     | 32 ++--------
 .../apis/[apiId]/keys/[keyAuthId]/page.tsx    | 27 ++-------
 .../app/(app)/apis/[apiId]/navigation.tsx     | 33 +++++++++++
 .../dashboard/app/(app)/apis/[apiId]/page.tsx | 23 +-------
 .../apis/[apiId]/settings/navigation.tsx      | 36 +++++++++++
 .../app/(app)/apis/[apiId]/settings/page.tsx  | 26 +-------
 apps/dashboard/app/(app)/apis/navigation.tsx  |  2 +-
 apps/dashboard/app/(app)/audit/navigation.tsx |  2 +-
 apps/dashboard/app/(app)/audit/page.tsx       |  6 +-
 .../permissions/[permissionId]/navigation.tsx |  2 +-
 .../authorization/permissions/navigation.tsx  |  2 +-
 .../roles/[roleId]/navigation.tsx             |  2 +-
 .../(app)/authorization/roles/navigation.tsx  |  2 +-
 .../identities/[identityId]/navigation.tsx    | 26 ++++++++
 .../(app)/identities/[identityId]/page.tsx    | 17 +-----
 .../app/(app)/identities/navigation.tsx       |  2 +-
 apps/dashboard/app/(app)/logs/navigation.tsx  |  2 +-
 apps/dashboard/app/(app)/logs/page.tsx        |  5 +-
 .../[namespaceId]/namespace-navbar.tsx        |  2 +-
 .../app/(app)/ratelimits/navigation.tsx       |  2 +-
 .../(app)/settings/_navigation/navigation.tsx | 17 ------
 .../app/(app)/settings/billing/page.tsx       |  5 +-
 .../settings/billing/plans/navigation.tsx     |  2 +-
 .../app/(app)/settings/general/page.tsx       |  6 +-
 .../settings/root-keys/[keyId]/navigation.tsx |  2 +-
 .../(app)/settings/root-keys/navigation.tsx   |  2 +-
 .../app/(app)/settings/team/page.tsx          | 14 ++---
 .../app/(app)/settings/user/page.tsx          |  5 +-
 .../app/(app)/settings/vercel/navigation.tsx  |  0
 .../app/(app)/settings/vercel/page.tsx        | 14 ++---
 .../components/{ => navigation}/navbar.tsx    |  0
 .../components/navigation/navigation.tsx      | 17 ++++++
 38 files changed, 390 insertions(+), 231 deletions(-)
 create mode 100644 apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/apis/[apiId]/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/apis/[apiId]/settings/navigation.tsx
 create mode 100644 apps/dashboard/app/(app)/identities/[identityId]/navigation.tsx
 delete mode 100644 apps/dashboard/app/(app)/settings/_navigation/navigation.tsx
 delete mode 100644 apps/dashboard/app/(app)/settings/vercel/navigation.tsx
 rename apps/dashboard/components/{ => navigation}/navbar.tsx (100%)
 create mode 100644 apps/dashboard/components/navigation/navigation.tsx

diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/navigation.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/navigation.tsx
new file mode 100644
index 0000000000..e5cf925807
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/navigation.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { Navbar } from "@/components/navigation/navbar";
+import { Nodes } from "@unkey/icons";
+import { CreateKeyButton } from "@/components/dashboard/create-key-button";
+import { CopyButton } from "@/components/dashboard/copy-button";
+import { Badge } from "@/components/ui/badge";
+import { Api } from "@unkey/db";
+
+type Key = {
+  id: string;
+  keyAuth: {
+    id: string;
+  };
+};
+
+interface NavigationProps {
+  api: Api;
+  apiKey: Key;
+}
+
+export function Navigation({ api, apiKey }: NavigationProps) {
+  return (
+    <Navbar>
+        <Navbar.Breadcrumbs icon={<Nodes />}>
+          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link href={`/apis/${api.id}`} isIdentifier>
+            {api.name}
+          </Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Ellipsis />
+          <Navbar.Breadcrumbs.Link
+            href={`/apis/${api.id}/keys/${apiKey.keyAuth.id}/${apiKey.id}`}
+            isIdentifier
+            active
+          >
+            {apiKey.id}
+          </Navbar.Breadcrumbs.Link>
+        </Navbar.Breadcrumbs>
+        <Navbar.Actions>
+          <Badge
+            variant="secondary"
+            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
+          >
+            {apiKey.id}
+            <CopyButton value={apiKey.id} />
+          </Badge>
+
+          <CreateKeyButton apiId={api.id} keyAuthId={apiKey.keyAuth.id} />
+        </Navbar.Actions>
+      </Navbar>
+  )
+}
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
index a184caee05..6dadc1cb5c 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
@@ -8,7 +8,7 @@ import { CreateNewRole } from "@/app/(app)/authorization/roles/create-new-role";
 import { StackedColumnChart } from "@/components/dashboard/charts";
 import { CopyButton } from "@/components/dashboard/copy-button";
 import { CreateKeyButton } from "@/components/dashboard/create-key-button";
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { PageContent } from "@/components/page-content";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
@@ -26,6 +26,7 @@ import ms from "ms";
 import { notFound } from "next/navigation";
 import PermissionTree from "./permission-list";
 import { VerificationTable } from "./verification-table";
+import { Navigation } from "./navigation";
 export default async function APIKeyDetailPage(props: {
   params: {
     apiId: string;
@@ -264,33 +265,7 @@ export default async function APIKeyDetailPage(props: {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Nodes />}>
-          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href={`/apis/${props.params.apiId}`} isIdentifier>
-            {api.name}
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Ellipsis />
-          <Navbar.Breadcrumbs.Link
-            href={`/apis/${props.params.apiId}/keys/${key.keyAuth.id}/${key.id}`}
-            isIdentifier
-            active
-          >
-            {key.id}
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Badge
-            variant="secondary"
-            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
-          >
-            {key.id}
-            <CopyButton value={key.id} />
-          </Badge>
-
-          <CreateKeyButton apiId={api.id} keyAuthId={key.keyAuthId} />
-        </Navbar.Actions>
-      </Navbar>
+      <Navigation api={api} apiKey={key}/>
 
       <PageContent>
         <div className="flex flex-col">
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/navigation.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/navigation.tsx
new file mode 100644
index 0000000000..5c7e379c33
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/navigation.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { Navbar } from "@/components/navigation/navbar";
+import { Nodes } from "@unkey/icons";
+import { CreateKeyButton } from "@/components/dashboard/create-key-button";
+import { CopyButton } from "@/components/dashboard/copy-button";
+import { Badge } from "@/components/ui/badge";
+
+type Key = {
+  id: string;
+  keyAuth: {
+    id: string;
+    api: {
+      id: string;
+      name: string;
+    };
+  };
+};
+
+interface NavigationProps {
+  apiId: string;
+  apiKey: Key;
+}
+
+export function Navigation({ apiId, apiKey }: NavigationProps) {
+  return (
+    <Navbar>
+        <Navbar.Breadcrumbs icon={<Nodes />}>
+          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link href={`/apis/${apiId}`} isIdentifier>
+            {apiKey.keyAuth.api.name}
+          </Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Ellipsis />
+          <Navbar.Breadcrumbs.Link
+            href={`/apis/${apiId}/keys/${apiKey.keyAuth.id}/${apiKey.id}`}
+            isIdentifier
+          >
+            {apiKey.id}
+          </Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link
+            href={`/apis/${apiId}/keys/${apiKey.keyAuth.id}/${apiKey.id}/settings`}
+            active
+          >
+            Settings
+          </Navbar.Breadcrumbs.Link>
+        </Navbar.Breadcrumbs>
+        <Navbar.Actions>
+          <Badge
+            variant="secondary"
+            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
+          >
+            {apiKey.id}
+            <CopyButton value={apiKey.id} />
+          </Badge>
+          <CreateKeyButton apiId={apiKey.keyAuth.api.id} keyAuthId={apiKey.keyAuth.id} />
+        </Navbar.Actions>
+      </Navbar>
+  )
+}
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/page.tsx
index bbab3407ad..2ed4ad7457 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/page.tsx
@@ -1,6 +1,6 @@
 import { CopyButton } from "@/components/dashboard/copy-button";
 import { CreateKeyButton } from "@/components/dashboard/create-key-button";
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { PageContent } from "@/components/page-content";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -19,6 +19,7 @@ import { UpdateKeyName } from "./update-key-name";
 import { UpdateKeyOwnerId } from "./update-key-owner-id";
 import { UpdateKeyRatelimit } from "./update-key-ratelimit";
 import { UpdateKeyRemaining } from "./update-key-remaining";
+import { Navigation } from "./navigation";
 
 type Props = {
   params: {
@@ -44,38 +45,8 @@ export default async function SettingsPage(props: Props) {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Nodes />}>
-          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href={`/apis/${props.params.apiId}`} isIdentifier>
-            {key.keyAuth.api.name}
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Ellipsis />
-          <Navbar.Breadcrumbs.Link
-            href={`/apis/${props.params.apiId}/keys/${key.keyAuth.id}/${key.id}`}
-            isIdentifier
-          >
-            {key.id}
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link
-            href={`/apis/${props.params.apiId}/keys/${key.keyAuth.id}/${key.id}/settings`}
-            active
-          >
-            Settings
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Badge
-            variant="secondary"
-            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
-          >
-            {key.id}
-            <CopyButton value={key.id} />
-          </Badge>
-          <CreateKeyButton apiId={key.keyAuth.api.id} keyAuthId={key.keyAuth.id} />
-        </Navbar.Actions>
-      </Navbar>
-
+      <Navigation apiId={props.params.apiId} apiKey={key}/>
+    
       <PageContent>
         <div className="mb-20 flex flex-col gap-8 ">
           <Link
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/navigation.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/navigation.tsx
new file mode 100644
index 0000000000..8de77520ea
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/navigation.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { Navbar } from "@/components/navigation/navbar";
+import { Nodes } from "@unkey/icons";
+import { CreateKeyButton } from "@/components/dashboard/create-key-button";
+import { CopyButton } from "@/components/dashboard/copy-button";
+import { Badge } from "@/components/ui/badge";
+
+type KeyAuthProps = {
+  id: string;
+  api: {
+    id: string;
+    name: string;
+    keyAuthId: string | null;
+  };
+  workspace: {
+    tenantId: string;
+  };
+};
+
+interface NavigationProps {
+  apiId: string;
+  keyA: KeyAuthProps;
+}
+
+export function Navigation({ apiId, keyA }: NavigationProps) {
+  return (
+    <Navbar>
+        <Navbar.Breadcrumbs icon={<Nodes />}>
+          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link href={`/apis/${apiId}`} isIdentifier>
+            {keyA.api.name}
+          </Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link active href={`/apis/${apiId}/keys/${keyA.id}`}>
+            Keys
+          </Navbar.Breadcrumbs.Link>
+        </Navbar.Breadcrumbs>
+        <Navbar.Actions>
+          <Badge
+            key="apiId"
+            variant="secondary"
+            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
+          >
+            {keyA.api.id}
+            <CopyButton value={keyA.api.id} />
+          </Badge>
+          <CreateKeyButton apiId={keyA.api.id} keyAuthId={keyA.api.keyAuthId!} />
+        </Navbar.Actions>
+      </Navbar>
+  )
+}
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/navigation.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/navigation.tsx
new file mode 100644
index 0000000000..2db3d36d10
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/navigation.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { Navbar } from "@/components/navigation/navbar";
+import { Nodes } from "@unkey/icons";
+import { CreateKeyButton } from "@/components/dashboard/create-key-button";
+import { CopyButton } from "@/components/dashboard/copy-button";
+import { Badge } from "@/components/ui/badge";
+
+type KeyAuthProps = {
+  id: string;
+  api: {
+    id: string;
+    name: string;
+    keyAuthId: string | null;
+  };
+  workspace: {
+    tenantId: string;
+  };
+};
+
+interface NavigationProps {
+  apiId: string;
+  keyA: KeyAuthProps;
+}
+
+export function Navigation({ apiId, keyA }: NavigationProps) {
+  return (
+    <Navbar>
+        <Navbar.Breadcrumbs icon={<Nodes />}>
+          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link href={`/apis/${apiId}`} isIdentifier>
+            {keyA.api.name}
+          </Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link href={`/apis/${apiId}/keys/${keyA.id}`}>
+            Keys
+          </Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link
+            active
+            href={`/apis/${apiId}/keys/${keyA.id}/new`}
+          >
+            Create new key
+          </Navbar.Breadcrumbs.Link>
+        </Navbar.Breadcrumbs>
+        <Navbar.Actions>
+          <Badge
+            key="apiId"
+            variant="secondary"
+            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
+          >
+            {keyA.api.id}
+            <CopyButton value={keyA.api.id} />
+          </Badge>
+        </Navbar.Actions>
+      </Navbar>
+  )
+}
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/page.tsx
index 3cb5df3789..8b6d143f50 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/page.tsx
@@ -1,5 +1,5 @@
 import { CopyButton } from "@/components/dashboard/copy-button";
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { PageContent } from "@/components/page-content";
 import { Badge } from "@/components/ui/badge";
 import { getTenantId } from "@/lib/auth";
@@ -7,6 +7,7 @@ import { db } from "@/lib/db";
 import { Nodes } from "@unkey/icons";
 import { notFound } from "next/navigation";
 import { CreateKey } from "./client";
+import { Navigation } from "./navigation";
 
 export default async function CreateKeypage(props: {
   params: {
@@ -30,33 +31,8 @@ export default async function CreateKeypage(props: {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Nodes />}>
-          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href={`/apis/${props.params.apiId}`} isIdentifier>
-            {keyAuth.api.name}
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href={`/apis/${props.params.apiId}/keys/${keyAuth.id}`}>
-            Keys
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link
-            active
-            href={`/apis/${props.params.apiId}/keys/${keyAuth.id}/new`}
-          >
-            Create new key
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Badge
-            key="apiId"
-            variant="secondary"
-            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
-          >
-            {keyAuth.api.id}
-            <CopyButton value={keyAuth.api.id} />
-          </Badge>
-        </Navbar.Actions>
-      </Navbar>
+      <Navigation apiId={props.params.apiId} keyA={keyAuth}/>
+      
 
       <PageContent>
         <CreateKey
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/page.tsx
index bf881155f0..c75dabc7be 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/page.tsx
@@ -5,12 +5,13 @@ import { notFound } from "next/navigation";
 import { CopyButton } from "@/components/dashboard/copy-button";
 import { CreateKeyButton } from "@/components/dashboard/create-key-button";
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { PageContent } from "@/components/page-content";
 import { Badge } from "@/components/ui/badge";
 import { Nodes } from "@unkey/icons";
 import { navigation } from "../../constants";
 import { Keys } from "./keys";
+import { Navigation } from "./navigation";
 
 export const dynamic = "force-dynamic";
 export const runtime = "edge";
@@ -37,28 +38,8 @@ export default async function APIKeysPage(props: {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Nodes />}>
-          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href={`/apis/${props.params.apiId}`} isIdentifier>
-            {keyAuth.api.name}
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link active href={`/apis/${props.params.apiId}/keys/${keyAuth.id}`}>
-            Keys
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Badge
-            key="apiId"
-            variant="secondary"
-            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
-          >
-            {keyAuth.api.id}
-            <CopyButton value={keyAuth.api.id} />
-          </Badge>
-          <CreateKeyButton apiId={keyAuth.api.id} keyAuthId={keyAuth.api.keyAuthId!} />
-        </Navbar.Actions>
-      </Navbar>
+      <Navigation apiId={props.params.apiId} keyA={keyAuth}/>
+      
 
       <PageContent>
         <SubMenu navigation={navigation(keyAuth.api.id, keyAuth.id!)} segment="keys" />
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/navigation.tsx b/apps/dashboard/app/(app)/apis/[apiId]/navigation.tsx
new file mode 100644
index 0000000000..4de035b2ce
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/navigation.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { Navbar } from "@/components/navigation/navbar";
+import { Nodes } from "@unkey/icons";
+import { CreateKeyButton } from "@/components/dashboard/create-key-button";
+import { CopyButton } from "@/components/dashboard/copy-button";
+import { Badge } from "@/components/ui/badge";
+import type { Api } from "@unkey/db";
+
+
+export function Navigation({ api }: {api: Api}) {
+  return (
+    <Navbar>
+        <Navbar.Breadcrumbs icon={<Nodes />}>
+          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link href={`/apis/${api.id}`} active isIdentifier>
+            {api.name}
+          </Navbar.Breadcrumbs.Link>
+        </Navbar.Breadcrumbs>
+        <Navbar.Actions>
+          <Badge
+            key="apiId"
+            variant="secondary"
+            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
+          >
+            {api.id}
+            <CopyButton value={api.id} />
+          </Badge>
+          <CreateKeyButton apiId={api.id} keyAuthId={api.keyAuthId!} />
+        </Navbar.Actions>
+      </Navbar>
+  );
+}
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/page.tsx
index cd16aae362..40b08671a0 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/page.tsx
@@ -2,7 +2,7 @@ import { AreaChart, StackedColumnChart } from "@/components/dashboard/charts";
 import { CopyButton } from "@/components/dashboard/copy-button";
 import { CreateKeyButton } from "@/components/dashboard/create-key-button";
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { PageContent } from "@/components/page-content";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
@@ -17,6 +17,7 @@ import { Empty } from "@unkey/ui";
 import { redirect } from "next/navigation";
 import { navigation } from "./constants";
 import { type Interval, IntervalSelect } from "./select";
+import { Navigation } from "./navigation";
 
 export const dynamic = "force-dynamic";
 export const runtime = "edge";
@@ -141,25 +142,7 @@ export default async function ApiPage(props: {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Nodes />}>
-          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href={`/apis/${props.params.apiId}`} active isIdentifier>
-            {api.name}
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Badge
-            key="apiId"
-            variant="secondary"
-            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
-          >
-            {api.id}
-            <CopyButton value={api.id} />
-          </Badge>
-          <CreateKeyButton apiId={api.id} keyAuthId={api.keyAuthId!} />
-        </Navbar.Actions>
-      </Navbar>
+      <Navigation api={api}/>
 
       <PageContent>
         <SubMenu navigation={navigation(api.id, api.keyAuthId!)} segment="overview" />
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/navigation.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/navigation.tsx
new file mode 100644
index 0000000000..3e2be94472
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/navigation.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { Navbar } from "@/components/navigation/navbar";
+import { Nodes } from "@unkey/icons";
+import { CreateKeyButton } from "@/components/dashboard/create-key-button";
+import { CopyButton } from "@/components/dashboard/copy-button";
+import { Badge } from "@/components/ui/badge";
+import type { Api } from "@unkey/db";
+
+
+export function Navigation({ api }: {api: Api}) {
+  return (
+    <Navbar>
+        <Navbar.Breadcrumbs icon={<Nodes />}>
+          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link href={`/apis/${api.id}`} isIdentifier>
+            {api.name}
+          </Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link active href={`/apis/${api.id}/settings`}>
+            Settings
+          </Navbar.Breadcrumbs.Link>
+        </Navbar.Breadcrumbs>
+        <Navbar.Actions>
+          <Badge
+            key="apiId"
+            variant="secondary"
+            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
+          >
+            {api.id}
+            <CopyButton value={api.id} />
+          </Badge>
+          <CreateKeyButton apiId={api.id} keyAuthId={api.keyAuthId!} />
+        </Navbar.Actions>
+      </Navbar>
+  );
+}
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/page.tsx
index 338732fb1d..1cd3403796 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/page.tsx
@@ -1,7 +1,7 @@
 import { CopyButton } from "@/components/dashboard/copy-button";
 import { CreateKeyButton } from "@/components/dashboard/create-key-button";
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { PageContent } from "@/components/page-content";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -17,6 +17,7 @@ import { DeleteApi } from "./delete-api";
 import { DeleteProtection } from "./delete-protection";
 import { UpdateApiName } from "./update-api-name";
 import { UpdateIpWhitelist } from "./update-ip-whitelist";
+import { Navigation } from "./navigation";
 
 export const dynamic = "force-dynamic";
 
@@ -57,28 +58,7 @@ export default async function SettingsPage(props: Props) {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Nodes />}>
-          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href={`/apis/${props.params.apiId}`} isIdentifier>
-            {api.name}
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link active href={`/apis/${props.params.apiId}/settings`}>
-            Settings
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Badge
-            key="apiId"
-            variant="secondary"
-            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
-          >
-            {api.id}
-            <CopyButton value={api.id} />
-          </Badge>
-          <CreateKeyButton apiId={api.id} keyAuthId={api.keyAuthId!} />
-        </Navbar.Actions>
-      </Navbar>
+      <Navigation api={api}/>
 
       <PageContent>
         <SubMenu navigation={navigation(api.id, api.keyAuthId!)} segment="settings" />
diff --git a/apps/dashboard/app/(app)/apis/navigation.tsx b/apps/dashboard/app/(app)/apis/navigation.tsx
index 082c9ab5fb..7e370d267f 100644
--- a/apps/dashboard/app/(app)/apis/navigation.tsx
+++ b/apps/dashboard/app/(app)/apis/navigation.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { Nodes } from "@unkey/icons";
 import { CreateApiButton } from "./create-api-button";
 
diff --git a/apps/dashboard/app/(app)/audit/navigation.tsx b/apps/dashboard/app/(app)/audit/navigation.tsx
index 11b07f5bba..f0d2bac6eb 100644
--- a/apps/dashboard/app/(app)/audit/navigation.tsx
+++ b/apps/dashboard/app/(app)/audit/navigation.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { InputSearch } from "@unkey/icons";
 
 export function Navigation() {
diff --git a/apps/dashboard/app/(app)/audit/page.tsx b/apps/dashboard/app/(app)/audit/page.tsx
index 9bb61ca259..6e59f489e7 100644
--- a/apps/dashboard/app/(app)/audit/page.tsx
+++ b/apps/dashboard/app/(app)/audit/page.tsx
@@ -2,8 +2,8 @@ import { getTenantId } from "@/lib/auth";
 import { Empty } from "@unkey/ui";
 import { getWorkspace } from "./actions";
 import { LogsClient } from "./components/logs-client";
-import { Navigation } from "./navigation";
-
+import { Navigation } from "@/components/navigation/navigation";
+import { InputSearch } from "@unkey/icons";
 export const dynamic = "force-dynamic";
 export const runtime = "edge";
 
@@ -13,7 +13,7 @@ export default async function AuditPage() {
 
   return (
     <div>
-      <Navigation />
+      <Navigation href="/audit" name="Audit" icon={<InputSearch/>}/>
       {workspace.auditLogBuckets.length > 0 ? (
         <LogsClient
           rootKeys={workspace.keys}
diff --git a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/navigation.tsx b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/navigation.tsx
index fbeabebb27..57a4f76a08 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/navigation.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/navigation.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { CopyButton } from "@/components/dashboard/copy-button";
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { Badge } from "@/components/ui/badge";
 import type { Permission } from "@unkey/db";
 import { ShieldKey } from "@unkey/icons";
diff --git a/apps/dashboard/app/(app)/authorization/permissions/navigation.tsx b/apps/dashboard/app/(app)/authorization/permissions/navigation.tsx
index ea5388283f..79869a083d 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/navigation.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/navigation.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { Badge } from "@/components/ui/badge";
 import { ShieldKey } from "@unkey/icons";
 import { Button } from "@unkey/ui";
diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/navigation.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/navigation.tsx
index 2774804f33..70acf56b65 100644
--- a/apps/dashboard/app/(app)/authorization/roles/[roleId]/navigation.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/[roleId]/navigation.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import type { Role } from "@unkey/db";
 import { ShieldKey } from "@unkey/icons";
 import { Button } from "@unkey/ui";
diff --git a/apps/dashboard/app/(app)/authorization/roles/navigation.tsx b/apps/dashboard/app/(app)/authorization/roles/navigation.tsx
index 23664b8f7b..27efc15ca9 100644
--- a/apps/dashboard/app/(app)/authorization/roles/navigation.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/navigation.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { Badge } from "@/components/ui/badge";
 import { ShieldKey } from "@unkey/icons";
 import { Button } from "@unkey/ui";
diff --git a/apps/dashboard/app/(app)/identities/[identityId]/navigation.tsx b/apps/dashboard/app/(app)/identities/[identityId]/navigation.tsx
new file mode 100644
index 0000000000..0cd3adb5f3
--- /dev/null
+++ b/apps/dashboard/app/(app)/identities/[identityId]/navigation.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { Navbar } from "@/components/navigation/navbar";
+import { Fingerprint, Nodes } from "@unkey/icons";
+
+type NavigationProps = {
+    identityId: string;
+};
+
+export function Navigation({ identityId }: NavigationProps) {
+  return (
+    <Navbar>
+        <Navbar.Breadcrumbs icon={<Fingerprint />}>
+          <Navbar.Breadcrumbs.Link href="/identities">Identities</Navbar.Breadcrumbs.Link>
+          <Navbar.Breadcrumbs.Link
+            href={`/identities/${identityId}`}
+            className="w-[200px] truncate"
+            active
+            isIdentifier
+          >
+            {identityId}
+          </Navbar.Breadcrumbs.Link>
+        </Navbar.Breadcrumbs>
+      </Navbar>
+  );
+}
diff --git a/apps/dashboard/app/(app)/identities/[identityId]/page.tsx b/apps/dashboard/app/(app)/identities/[identityId]/page.tsx
index bedbd84a76..7b54689ece 100644
--- a/apps/dashboard/app/(app)/identities/[identityId]/page.tsx
+++ b/apps/dashboard/app/(app)/identities/[identityId]/page.tsx
@@ -1,7 +1,7 @@
 import { notFound } from "next/navigation";
 
 import { CopyButton } from "@/components/dashboard/copy-button";
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { PageContent } from "@/components/page-content";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
@@ -22,6 +22,7 @@ import { Button } from "@unkey/ui";
 import { ChevronRight, Minus } from "lucide-react";
 import ms from "ms";
 import Link from "next/link";
+import { Navigation } from "./navigation";
 type Props = {
   params: {
     identityId: string;
@@ -58,19 +59,7 @@ export default async function Page(props: Props) {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Fingerprint />}>
-          <Navbar.Breadcrumbs.Link href="/identities">Identities</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link
-            href={`/identities/${props.params.identityId}`}
-            className="w-[200px] truncate"
-            active
-            isIdentifier
-          >
-            {props.params.identityId}
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-      </Navbar>
+      <Navigation identityId={props.params.identityId}/>
       <PageContent>
         <div className="flex flex-col gap-8">
           <div className="flex items-center justify-between gap-8">
diff --git a/apps/dashboard/app/(app)/identities/navigation.tsx b/apps/dashboard/app/(app)/identities/navigation.tsx
index 006d7de5fd..5459d31e49 100644
--- a/apps/dashboard/app/(app)/identities/navigation.tsx
+++ b/apps/dashboard/app/(app)/identities/navigation.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { Fingerprint } from "@unkey/icons";
 
 export function Navigation() {
diff --git a/apps/dashboard/app/(app)/logs/navigation.tsx b/apps/dashboard/app/(app)/logs/navigation.tsx
index 00fb1eaf9c..770fd58fbf 100644
--- a/apps/dashboard/app/(app)/logs/navigation.tsx
+++ b/apps/dashboard/app/(app)/logs/navigation.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { Layers3 } from "@unkey/icons";
 
 export function Navigation() {
diff --git a/apps/dashboard/app/(app)/logs/page.tsx b/apps/dashboard/app/(app)/logs/page.tsx
index 1ddf195a00..272e212523 100644
--- a/apps/dashboard/app/(app)/logs/page.tsx
+++ b/apps/dashboard/app/(app)/logs/page.tsx
@@ -3,8 +3,9 @@ import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
 import { notFound } from "next/navigation";
 import { LogsClient } from "./components/logs-client";
-import { Navigation } from "./navigation";
+import { Layers3 } from "@unkey/icons";
 
+import { Navigation } from "@/components/navigation/navigation";
 export default async function Page() {
   const tenantId = getTenantId();
 
@@ -19,7 +20,7 @@ export default async function Page() {
 
   return (
     <div>
-      <Navigation />
+      <Navigation href="/logs" name="Logs" icon={<Layers3/>} />
       <LogsClient />
     </div>
   );
diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/namespace-navbar.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/namespace-navbar.tsx
index fe37909959..ad129fd811 100644
--- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/namespace-navbar.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/namespace-navbar.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { CopyButton } from "@/components/dashboard/copy-button";
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { QuickNavPopover } from "@/components/navbar-popover";
 import { Badge } from "@/components/ui/badge";
 import { ChevronExpandY, Gauge } from "@unkey/icons";
diff --git a/apps/dashboard/app/(app)/ratelimits/navigation.tsx b/apps/dashboard/app/(app)/ratelimits/navigation.tsx
index e87482c34d..e49b307d16 100644
--- a/apps/dashboard/app/(app)/ratelimits/navigation.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/navigation.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { Gauge } from "@unkey/icons";
 import { CreateNamespaceButton } from "./_components/create-namespace-button";
 export function Navigation() {
diff --git a/apps/dashboard/app/(app)/settings/_navigation/navigation.tsx b/apps/dashboard/app/(app)/settings/_navigation/navigation.tsx
deleted file mode 100644
index 5fbdcc14d6..0000000000
--- a/apps/dashboard/app/(app)/settings/_navigation/navigation.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-"use client";
-
-import { Navbar } from "@/components/navbar";
-import { Gear } from "@unkey/icons";
-
-// Reusable for settings where we only change the link
-export function Navigation({ href }: { href: string }) {
-  return (
-    <Navbar>
-      <Navbar.Breadcrumbs icon={<Gear />}>
-        <Navbar.Breadcrumbs.Link href={href} active>
-          Settings
-        </Navbar.Breadcrumbs.Link>
-      </Navbar.Breadcrumbs>
-    </Navbar>
-  );
-}
diff --git a/apps/dashboard/app/(app)/settings/billing/page.tsx b/apps/dashboard/app/(app)/settings/billing/page.tsx
index cf1e56dc83..e5e94f737a 100644
--- a/apps/dashboard/app/(app)/settings/billing/page.tsx
+++ b/apps/dashboard/app/(app)/settings/billing/page.tsx
@@ -20,9 +20,10 @@ import { Check, ExternalLink } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import Stripe from "stripe";
-import { Navigation } from "../_navigation/navigation";
+import { Navigation } from "@/components/navigation/navigation";
 import { navigation } from "../constants";
 import { UserPaymentMethod } from "./user-payment-method";
+import { Gear } from "@unkey/icons";
 
 export const revalidate = 0;
 
@@ -40,7 +41,7 @@ export default async function BillingPage() {
 
   return (
     <div>
-      <Navigation href="/settings/billing" />
+      <Navigation href="/settings/billing" name="Settings" icon={<Gear/>} />
       <PageContent>
         <SubMenu navigation={navigation} segment="billing" />
         <div className="flex flex-col gap-8 lg:flex-row mt-8 ">
diff --git a/apps/dashboard/app/(app)/settings/billing/plans/navigation.tsx b/apps/dashboard/app/(app)/settings/billing/plans/navigation.tsx
index 176dfc9cea..4e84d1bb4e 100644
--- a/apps/dashboard/app/(app)/settings/billing/plans/navigation.tsx
+++ b/apps/dashboard/app/(app)/settings/billing/plans/navigation.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { Gear } from "@unkey/icons";
 
 // Reusable for settings where we only change the link
diff --git a/apps/dashboard/app/(app)/settings/general/page.tsx b/apps/dashboard/app/(app)/settings/general/page.tsx
index 60d3f4d584..42cee97f33 100644
--- a/apps/dashboard/app/(app)/settings/general/page.tsx
+++ b/apps/dashboard/app/(app)/settings/general/page.tsx
@@ -6,11 +6,11 @@ import { Code } from "@/components/ui/code";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
 import { redirect } from "next/navigation";
-import { Navigation } from "../_navigation/navigation";
+import { Navigation } from "@/components/navigation/navigation";
 import { navigation } from "../constants";
 import { UpdateWorkspaceImage } from "./update-workspace-image";
 import { UpdateWorkspaceName } from "./update-workspace-name";
-
+import { Gear } from "@unkey/icons";
 export const dynamic = "force-dynamic";
 
 export default async function SettingsPage() {
@@ -26,7 +26,7 @@ export default async function SettingsPage() {
 
   return (
     <div>
-      <Navigation href="/settings/general" />
+      <Navigation href="/settings/general" name="Settings" icon={<Gear/>} />
       <PageContent>
         <SubMenu navigation={navigation} segment="general" />
         <div className="mb-20 flex flex-col gap-8 mt-8">
diff --git a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/navigation.tsx b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/navigation.tsx
index 5a930ae3ad..0ac45b712d 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/navigation.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/navigation.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { Gear } from "@unkey/icons";
 
 export function Navigation({ keyId }: { keyId: string }) {
diff --git a/apps/dashboard/app/(app)/settings/root-keys/navigation.tsx b/apps/dashboard/app/(app)/settings/root-keys/navigation.tsx
index 29dcf8b6b3..a4dc05cb8a 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/navigation.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/navigation.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { Gear } from "@unkey/icons";
 import { Button } from "@unkey/ui";
 import Link from "next/link";
diff --git a/apps/dashboard/app/(app)/settings/team/page.tsx b/apps/dashboard/app/(app)/settings/team/page.tsx
index 91c059977a..fb18194acb 100644
--- a/apps/dashboard/app/(app)/settings/team/page.tsx
+++ b/apps/dashboard/app/(app)/settings/team/page.tsx
@@ -21,7 +21,7 @@ import { useAuth, useClerk, useOrganization } from "@clerk/nextjs";
 
 import { Loading } from "@/components/dashboard/loading";
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { PageContent } from "@/components/page-content";
 import {
   Select,
@@ -35,7 +35,7 @@ import { toast } from "@/components/ui/toaster";
 import type { MembershipRole } from "@clerk/types";
 import { Gear } from "@unkey/icons";
 import Link from "next/link";
-import { Navigation } from "../_navigation/navigation";
+import { Navigation } from "@/components/navigation/navigation";
 import { navigation } from "../constants";
 
 type Member = {
@@ -52,7 +52,7 @@ export default function TeamPage() {
   if (!organization) {
     return (
       <div>
-        <Navigation href="/settings/team" />
+        <Navigation href="/settings/team" name="Settings" icon={<Gear/>} />
         <PageContent>
           <SubMenu navigation={navigation} segment="team" />
           <div className="mb-20 flex flex-col gap-8 mt-8">
@@ -102,13 +102,7 @@ export default function TeamPage() {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Gear />}>
-          <Navbar.Breadcrumbs.Link href="/settings/team" active>
-            Settings
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-      </Navbar>
+      <Navigation href="/settings/team" icon={<Gear />} name="Settings"/>
       <PageContent>
         <SubMenu navigation={navigation} segment="team" />
         <div className="mb-20 flex flex-col gap-8 mt-8">
diff --git a/apps/dashboard/app/(app)/settings/user/page.tsx b/apps/dashboard/app/(app)/settings/user/page.tsx
index ba52d35789..0f7b0bbe11 100644
--- a/apps/dashboard/app/(app)/settings/user/page.tsx
+++ b/apps/dashboard/app/(app)/settings/user/page.tsx
@@ -3,12 +3,13 @@ import { PageContent } from "@/components/page-content";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
 import { redirect } from "next/navigation";
-import { Navigation } from "../_navigation/navigation";
+import { Navigation } from "@/components/navigation/navigation";
 import { navigation } from "../constants";
 import { UpdateTheme } from "./update-theme";
 import { UpdateUserEmail } from "./update-user-email";
 import { UpdateUserImage } from "./update-user-image";
 import { UpdateUserName } from "./update-user-name";
+import { Gear } from "@unkey/icons";
 
 export const revalidate = 0;
 
@@ -25,7 +26,7 @@ export default async function SettingsPage() {
 
   return (
     <div>
-      <Navigation href="/settings/user" />
+      <Navigation href="/settings/user" name="Settings" icon={<Gear/>} />
       <PageContent>
         <SubMenu navigation={navigation} segment="user" />
 
diff --git a/apps/dashboard/app/(app)/settings/vercel/navigation.tsx b/apps/dashboard/app/(app)/settings/vercel/navigation.tsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/apps/dashboard/app/(app)/settings/vercel/page.tsx b/apps/dashboard/app/(app)/settings/vercel/page.tsx
index e3691fa6fa..7e9e5a7a2e 100644
--- a/apps/dashboard/app/(app)/settings/vercel/page.tsx
+++ b/apps/dashboard/app/(app)/settings/vercel/page.tsx
@@ -1,5 +1,5 @@
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/navigation/navbar";
 import { PageContent } from "@/components/page-content";
 import { Code } from "@/components/ui/code";
 import { getTenantId } from "@/lib/auth";
@@ -11,7 +11,7 @@ import { Button } from "@unkey/ui";
 import { Vercel } from "@unkey/vercel";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { Navigation } from "../_navigation/navigation";
+import { Navigation } from "@/components/navigation/navigation";
 import { navigation } from "../constants";
 import { Client } from "./client";
 type Props = {
@@ -52,7 +52,7 @@ export default async function Page(props: Props) {
   if (!integration) {
     return (
       <div>
-        <Navigation href="/settings/vercel" />
+        <Navigation href="/settings/vercel" name="Settings" icon={<Gear/>} />
         <PageContent>
           <SubMenu navigation={navigation} segment="vercel" />
           <div className="mt-8" />
@@ -165,13 +165,7 @@ export default async function Page(props: Props) {
 
   return (
     <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Gear />}>
-          <Navbar.Breadcrumbs.Link href="/settings/billing" active>
-            Settings
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-      </Navbar>
+      <Navigation href="/settings/billing" icon={<Gear />} name="Settings"/>
       <PageContent>
         <SubMenu navigation={navigation} segment="vercel" />
         <div className="mt-8" />
diff --git a/apps/dashboard/components/navbar.tsx b/apps/dashboard/components/navigation/navbar.tsx
similarity index 100%
rename from apps/dashboard/components/navbar.tsx
rename to apps/dashboard/components/navigation/navbar.tsx
diff --git a/apps/dashboard/components/navigation/navigation.tsx b/apps/dashboard/components/navigation/navigation.tsx
new file mode 100644
index 0000000000..c471bfdd70
--- /dev/null
+++ b/apps/dashboard/components/navigation/navigation.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { Navbar } from "@/components/navigation/navbar";
+import { ReactNode } from "react";
+
+// Reusable for settings where we only change the link
+export function Navigation({ href, name, icon }: { href: string, name: string, icon: ReactNode }) {
+  return (
+    <Navbar>
+      <Navbar.Breadcrumbs icon={icon}>
+        <Navbar.Breadcrumbs.Link href={href} active>
+          {name}
+        </Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+    </Navbar>
+  );
+}

From 8a36a4fcdb3c0238c695fbc56ed05e0b10ac0ca9 Mon Sep 17 00:00:00 2001
From: James Perkins <james@unkey.dev>
Date: Thu, 27 Feb 2025 17:41:55 -0500
Subject: [PATCH 4/5] format all code

---
 .../keys/[keyAuthId]/[keyId]/navigation.tsx   | 60 ++++++++--------
 .../[apiId]/keys/[keyAuthId]/[keyId]/page.tsx |  8 +--
 .../[keyId]/settings/navigation.tsx           | 68 +++++++++----------
 .../[keyAuthId]/[keyId]/settings/page.tsx     | 10 +--
 .../[apiId]/keys/[keyAuthId]/navigation.tsx   | 50 +++++++-------
 .../keys/[keyAuthId]/new/navigation.tsx       | 56 +++++++--------
 .../[apiId]/keys/[keyAuthId]/new/page.tsx     |  7 +-
 .../apis/[apiId]/keys/[keyAuthId]/page.tsx    |  8 +--
 .../app/(app)/apis/[apiId]/navigation.tsx     | 45 ++++++------
 .../dashboard/app/(app)/apis/[apiId]/page.tsx |  9 +--
 .../apis/[apiId]/settings/navigation.tsx      | 51 +++++++-------
 .../app/(app)/apis/[apiId]/settings/page.tsx  |  8 +--
 apps/dashboard/app/(app)/audit/page.tsx       |  6 +-
 .../identities/[identityId]/navigation.tsx    | 28 ++++----
 .../(app)/identities/[identityId]/page.tsx    |  4 +-
 apps/dashboard/app/(app)/logs/page.tsx        |  4 +-
 .../[namespaceId]/namespace-navbar.tsx        |  2 +-
 .../app/(app)/settings/billing/page.tsx       |  6 +-
 .../app/(app)/settings/general/page.tsx       |  6 +-
 .../app/(app)/settings/team/page.tsx          |  7 +-
 .../app/(app)/settings/user/page.tsx          |  6 +-
 .../app/(app)/settings/vercel/page.tsx        |  7 +-
 .../components/navigation/navigation.tsx      |  4 +-
 23 files changed, 211 insertions(+), 249 deletions(-)

diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/navigation.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/navigation.tsx
index e5cf925807..784c049038 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/navigation.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/navigation.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { Navbar } from "@/components/navigation/navbar";
-import { Nodes } from "@unkey/icons";
-import { CreateKeyButton } from "@/components/dashboard/create-key-button";
 import { CopyButton } from "@/components/dashboard/copy-button";
+import { CreateKeyButton } from "@/components/dashboard/create-key-button";
+import { Navbar } from "@/components/navigation/navbar";
 import { Badge } from "@/components/ui/badge";
-import { Api } from "@unkey/db";
+import type { Api } from "@unkey/db";
+import { Nodes } from "@unkey/icons";
 
 type Key = {
   id: string;
@@ -22,31 +22,31 @@ interface NavigationProps {
 export function Navigation({ api, apiKey }: NavigationProps) {
   return (
     <Navbar>
-        <Navbar.Breadcrumbs icon={<Nodes />}>
-          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href={`/apis/${api.id}`} isIdentifier>
-            {api.name}
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Ellipsis />
-          <Navbar.Breadcrumbs.Link
-            href={`/apis/${api.id}/keys/${apiKey.keyAuth.id}/${apiKey.id}`}
-            isIdentifier
-            active
-          >
-            {apiKey.id}
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Badge
-            variant="secondary"
-            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
-          >
-            {apiKey.id}
-            <CopyButton value={apiKey.id} />
-          </Badge>
+      <Navbar.Breadcrumbs icon={<Nodes />}>
+        <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link href={`/apis/${api.id}`} isIdentifier>
+          {api.name}
+        </Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Ellipsis />
+        <Navbar.Breadcrumbs.Link
+          href={`/apis/${api.id}/keys/${apiKey.keyAuth.id}/${apiKey.id}`}
+          isIdentifier
+          active
+        >
+          {apiKey.id}
+        </Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+      <Navbar.Actions>
+        <Badge
+          variant="secondary"
+          className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
+        >
+          {apiKey.id}
+          <CopyButton value={apiKey.id} />
+        </Badge>
 
-          <CreateKeyButton apiId={api.id} keyAuthId={apiKey.keyAuth.id} />
-        </Navbar.Actions>
-      </Navbar>
-  )
+        <CreateKeyButton apiId={api.id} keyAuthId={apiKey.keyAuth.id} />
+      </Navbar.Actions>
+    </Navbar>
+  );
 }
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
index 6dadc1cb5c..e710b8bcaf 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
@@ -6,9 +6,6 @@ import { CreateNewPermission } from "@/app/(app)/authorization/permissions/creat
 import type { NestedPermissions } from "@/app/(app)/authorization/roles/[roleId]/tree";
 import { CreateNewRole } from "@/app/(app)/authorization/roles/create-new-role";
 import { StackedColumnChart } from "@/components/dashboard/charts";
-import { CopyButton } from "@/components/dashboard/copy-button";
-import { CreateKeyButton } from "@/components/dashboard/create-key-button";
-import { Navbar } from "@/components/navigation/navbar";
 import { PageContent } from "@/components/page-content";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
@@ -18,15 +15,14 @@ import { getTenantId } from "@/lib/auth";
 import { clickhouse } from "@/lib/clickhouse";
 import { and, db, eq, isNull, schema } from "@/lib/db";
 import { formatNumber } from "@/lib/fmt";
-import { Nodes } from "@unkey/icons";
 import { Empty } from "@unkey/ui";
 import { Button } from "@unkey/ui";
 import { Minus } from "lucide-react";
 import ms from "ms";
 import { notFound } from "next/navigation";
+import { Navigation } from "./navigation";
 import PermissionTree from "./permission-list";
 import { VerificationTable } from "./verification-table";
-import { Navigation } from "./navigation";
 export default async function APIKeyDetailPage(props: {
   params: {
     apiId: string;
@@ -265,7 +261,7 @@ export default async function APIKeyDetailPage(props: {
 
   return (
     <div>
-      <Navigation api={api} apiKey={key}/>
+      <Navigation api={api} apiKey={key} />
 
       <PageContent>
         <div className="flex flex-col">
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/navigation.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/navigation.tsx
index 5c7e379c33..0d2a447052 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/navigation.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/navigation.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { Navbar } from "@/components/navigation/navbar";
-import { Nodes } from "@unkey/icons";
-import { CreateKeyButton } from "@/components/dashboard/create-key-button";
 import { CopyButton } from "@/components/dashboard/copy-button";
+import { CreateKeyButton } from "@/components/dashboard/create-key-button";
+import { Navbar } from "@/components/navigation/navbar";
 import { Badge } from "@/components/ui/badge";
+import { Nodes } from "@unkey/icons";
 
 type Key = {
   id: string;
@@ -25,35 +25,35 @@ interface NavigationProps {
 export function Navigation({ apiId, apiKey }: NavigationProps) {
   return (
     <Navbar>
-        <Navbar.Breadcrumbs icon={<Nodes />}>
-          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href={`/apis/${apiId}`} isIdentifier>
-            {apiKey.keyAuth.api.name}
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Ellipsis />
-          <Navbar.Breadcrumbs.Link
-            href={`/apis/${apiId}/keys/${apiKey.keyAuth.id}/${apiKey.id}`}
-            isIdentifier
-          >
-            {apiKey.id}
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link
-            href={`/apis/${apiId}/keys/${apiKey.keyAuth.id}/${apiKey.id}/settings`}
-            active
-          >
-            Settings
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Badge
-            variant="secondary"
-            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
-          >
-            {apiKey.id}
-            <CopyButton value={apiKey.id} />
-          </Badge>
-          <CreateKeyButton apiId={apiKey.keyAuth.api.id} keyAuthId={apiKey.keyAuth.id} />
-        </Navbar.Actions>
-      </Navbar>
-  )
+      <Navbar.Breadcrumbs icon={<Nodes />}>
+        <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link href={`/apis/${apiId}`} isIdentifier>
+          {apiKey.keyAuth.api.name}
+        </Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Ellipsis />
+        <Navbar.Breadcrumbs.Link
+          href={`/apis/${apiId}/keys/${apiKey.keyAuth.id}/${apiKey.id}`}
+          isIdentifier
+        >
+          {apiKey.id}
+        </Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link
+          href={`/apis/${apiId}/keys/${apiKey.keyAuth.id}/${apiKey.id}/settings`}
+          active
+        >
+          Settings
+        </Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+      <Navbar.Actions>
+        <Badge
+          variant="secondary"
+          className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
+        >
+          {apiKey.id}
+          <CopyButton value={apiKey.id} />
+        </Badge>
+        <CreateKeyButton apiId={apiKey.keyAuth.api.id} keyAuthId={apiKey.keyAuth.id} />
+      </Navbar.Actions>
+    </Navbar>
+  );
 }
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/page.tsx
index 2ed4ad7457..0babe80daf 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/page.tsx
@@ -1,17 +1,14 @@
 import { CopyButton } from "@/components/dashboard/copy-button";
-import { CreateKeyButton } from "@/components/dashboard/create-key-button";
-import { Navbar } from "@/components/navigation/navbar";
 import { PageContent } from "@/components/page-content";
-import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Code } from "@/components/ui/code";
 import { getTenantId } from "@/lib/auth";
 import { and, db, eq, isNull, schema } from "@/lib/db";
-import { Nodes } from "@unkey/icons";
 import { ArrowLeft } from "lucide-react";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { DeleteKey } from "./delete-key";
+import { Navigation } from "./navigation";
 import { UpdateKeyEnabled } from "./update-key-enabled";
 import { UpdateKeyExpiration } from "./update-key-expiration";
 import { UpdateKeyMetadata } from "./update-key-metadata";
@@ -19,7 +16,6 @@ import { UpdateKeyName } from "./update-key-name";
 import { UpdateKeyOwnerId } from "./update-key-owner-id";
 import { UpdateKeyRatelimit } from "./update-key-ratelimit";
 import { UpdateKeyRemaining } from "./update-key-remaining";
-import { Navigation } from "./navigation";
 
 type Props = {
   params: {
@@ -45,8 +41,8 @@ export default async function SettingsPage(props: Props) {
 
   return (
     <div>
-      <Navigation apiId={props.params.apiId} apiKey={key}/>
-    
+      <Navigation apiId={props.params.apiId} apiKey={key} />
+
       <PageContent>
         <div className="mb-20 flex flex-col gap-8 ">
           <Link
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/navigation.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/navigation.tsx
index 8de77520ea..a4d7746295 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/navigation.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/navigation.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { Navbar } from "@/components/navigation/navbar";
-import { Nodes } from "@unkey/icons";
-import { CreateKeyButton } from "@/components/dashboard/create-key-button";
 import { CopyButton } from "@/components/dashboard/copy-button";
+import { CreateKeyButton } from "@/components/dashboard/create-key-button";
+import { Navbar } from "@/components/navigation/navbar";
 import { Badge } from "@/components/ui/badge";
+import { Nodes } from "@unkey/icons";
 
 type KeyAuthProps = {
   id: string;
@@ -26,26 +26,26 @@ interface NavigationProps {
 export function Navigation({ apiId, keyA }: NavigationProps) {
   return (
     <Navbar>
-        <Navbar.Breadcrumbs icon={<Nodes />}>
-          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href={`/apis/${apiId}`} isIdentifier>
-            {keyA.api.name}
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link active href={`/apis/${apiId}/keys/${keyA.id}`}>
-            Keys
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Badge
-            key="apiId"
-            variant="secondary"
-            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
-          >
-            {keyA.api.id}
-            <CopyButton value={keyA.api.id} />
-          </Badge>
-          <CreateKeyButton apiId={keyA.api.id} keyAuthId={keyA.api.keyAuthId!} />
-        </Navbar.Actions>
-      </Navbar>
-  )
+      <Navbar.Breadcrumbs icon={<Nodes />}>
+        <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link href={`/apis/${apiId}`} isIdentifier>
+          {keyA.api.name}
+        </Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link active href={`/apis/${apiId}/keys/${keyA.id}`}>
+          Keys
+        </Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+      <Navbar.Actions>
+        <Badge
+          key="apiId"
+          variant="secondary"
+          className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
+        >
+          {keyA.api.id}
+          <CopyButton value={keyA.api.id} />
+        </Badge>
+        <CreateKeyButton apiId={keyA.api.id} keyAuthId={keyA.api.keyAuthId!} />
+      </Navbar.Actions>
+    </Navbar>
+  );
 }
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/navigation.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/navigation.tsx
index 2db3d36d10..9207f6cf9e 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/navigation.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/navigation.tsx
@@ -1,10 +1,9 @@
 "use client";
 
-import { Navbar } from "@/components/navigation/navbar";
-import { Nodes } from "@unkey/icons";
-import { CreateKeyButton } from "@/components/dashboard/create-key-button";
 import { CopyButton } from "@/components/dashboard/copy-button";
+import { Navbar } from "@/components/navigation/navbar";
 import { Badge } from "@/components/ui/badge";
+import { Nodes } from "@unkey/icons";
 
 type KeyAuthProps = {
   id: string;
@@ -26,31 +25,28 @@ interface NavigationProps {
 export function Navigation({ apiId, keyA }: NavigationProps) {
   return (
     <Navbar>
-        <Navbar.Breadcrumbs icon={<Nodes />}>
-          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href={`/apis/${apiId}`} isIdentifier>
-            {keyA.api.name}
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href={`/apis/${apiId}/keys/${keyA.id}`}>
-            Keys
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link
-            active
-            href={`/apis/${apiId}/keys/${keyA.id}/new`}
-          >
-            Create new key
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Badge
-            key="apiId"
-            variant="secondary"
-            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
-          >
-            {keyA.api.id}
-            <CopyButton value={keyA.api.id} />
-          </Badge>
-        </Navbar.Actions>
-      </Navbar>
-  )
+      <Navbar.Breadcrumbs icon={<Nodes />}>
+        <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link href={`/apis/${apiId}`} isIdentifier>
+          {keyA.api.name}
+        </Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link href={`/apis/${apiId}/keys/${keyA.id}`}>
+          Keys
+        </Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link active href={`/apis/${apiId}/keys/${keyA.id}/new`}>
+          Create new key
+        </Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+      <Navbar.Actions>
+        <Badge
+          key="apiId"
+          variant="secondary"
+          className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
+        >
+          {keyA.api.id}
+          <CopyButton value={keyA.api.id} />
+        </Badge>
+      </Navbar.Actions>
+    </Navbar>
+  );
 }
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/page.tsx
index 8b6d143f50..32c41d912f 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/page.tsx
@@ -1,10 +1,6 @@
-import { CopyButton } from "@/components/dashboard/copy-button";
-import { Navbar } from "@/components/navigation/navbar";
 import { PageContent } from "@/components/page-content";
-import { Badge } from "@/components/ui/badge";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
-import { Nodes } from "@unkey/icons";
 import { notFound } from "next/navigation";
 import { CreateKey } from "./client";
 import { Navigation } from "./navigation";
@@ -31,8 +27,7 @@ export default async function CreateKeypage(props: {
 
   return (
     <div>
-      <Navigation apiId={props.params.apiId} keyA={keyAuth}/>
-      
+      <Navigation apiId={props.params.apiId} keyA={keyAuth} />
 
       <PageContent>
         <CreateKey
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/page.tsx
index c75dabc7be..d3a104279b 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/page.tsx
@@ -2,13 +2,8 @@ import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
 import { notFound } from "next/navigation";
 
-import { CopyButton } from "@/components/dashboard/copy-button";
-import { CreateKeyButton } from "@/components/dashboard/create-key-button";
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
-import { Navbar } from "@/components/navigation/navbar";
 import { PageContent } from "@/components/page-content";
-import { Badge } from "@/components/ui/badge";
-import { Nodes } from "@unkey/icons";
 import { navigation } from "../../constants";
 import { Keys } from "./keys";
 import { Navigation } from "./navigation";
@@ -38,8 +33,7 @@ export default async function APIKeysPage(props: {
 
   return (
     <div>
-      <Navigation apiId={props.params.apiId} keyA={keyAuth}/>
-      
+      <Navigation apiId={props.params.apiId} keyA={keyAuth} />
 
       <PageContent>
         <SubMenu navigation={navigation(keyAuth.api.id, keyAuth.id!)} segment="keys" />
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/navigation.tsx b/apps/dashboard/app/(app)/apis/[apiId]/navigation.tsx
index 4de035b2ce..8a106d1b1a 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/navigation.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/navigation.tsx
@@ -1,33 +1,32 @@
 "use client";
 
-import { Navbar } from "@/components/navigation/navbar";
-import { Nodes } from "@unkey/icons";
-import { CreateKeyButton } from "@/components/dashboard/create-key-button";
 import { CopyButton } from "@/components/dashboard/copy-button";
+import { CreateKeyButton } from "@/components/dashboard/create-key-button";
+import { Navbar } from "@/components/navigation/navbar";
 import { Badge } from "@/components/ui/badge";
 import type { Api } from "@unkey/db";
+import { Nodes } from "@unkey/icons";
 
-
-export function Navigation({ api }: {api: Api}) {
+export function Navigation({ api }: { api: Api }) {
   return (
     <Navbar>
-        <Navbar.Breadcrumbs icon={<Nodes />}>
-          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href={`/apis/${api.id}`} active isIdentifier>
-            {api.name}
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Badge
-            key="apiId"
-            variant="secondary"
-            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
-          >
-            {api.id}
-            <CopyButton value={api.id} />
-          </Badge>
-          <CreateKeyButton apiId={api.id} keyAuthId={api.keyAuthId!} />
-        </Navbar.Actions>
-      </Navbar>
+      <Navbar.Breadcrumbs icon={<Nodes />}>
+        <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link href={`/apis/${api.id}`} active isIdentifier>
+          {api.name}
+        </Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+      <Navbar.Actions>
+        <Badge
+          key="apiId"
+          variant="secondary"
+          className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
+        >
+          {api.id}
+          <CopyButton value={api.id} />
+        </Badge>
+        <CreateKeyButton apiId={api.id} keyAuthId={api.keyAuthId!} />
+      </Navbar.Actions>
+    </Navbar>
   );
 }
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/page.tsx
index 40b08671a0..af5c52f08b 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/page.tsx
@@ -1,10 +1,6 @@
 import { AreaChart, StackedColumnChart } from "@/components/dashboard/charts";
-import { CopyButton } from "@/components/dashboard/copy-button";
-import { CreateKeyButton } from "@/components/dashboard/create-key-button";
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
-import { Navbar } from "@/components/navigation/navbar";
 import { PageContent } from "@/components/page-content";
-import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Metric } from "@/components/ui/metric";
 import { Separator } from "@/components/ui/separator";
@@ -12,12 +8,11 @@ import { getTenantId } from "@/lib/auth";
 import { clickhouse } from "@/lib/clickhouse";
 import { db } from "@/lib/db";
 import { formatNumber } from "@/lib/fmt";
-import { Nodes } from "@unkey/icons";
 import { Empty } from "@unkey/ui";
 import { redirect } from "next/navigation";
 import { navigation } from "./constants";
-import { type Interval, IntervalSelect } from "./select";
 import { Navigation } from "./navigation";
+import { type Interval, IntervalSelect } from "./select";
 
 export const dynamic = "force-dynamic";
 export const runtime = "edge";
@@ -142,7 +137,7 @@ export default async function ApiPage(props: {
 
   return (
     <div>
-      <Navigation api={api}/>
+      <Navigation api={api} />
 
       <PageContent>
         <SubMenu navigation={navigation(api.id, api.keyAuthId!)} segment="overview" />
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/navigation.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/navigation.tsx
index 3e2be94472..aeedeed9ca 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/navigation.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/navigation.tsx
@@ -1,36 +1,35 @@
 "use client";
 
-import { Navbar } from "@/components/navigation/navbar";
-import { Nodes } from "@unkey/icons";
-import { CreateKeyButton } from "@/components/dashboard/create-key-button";
 import { CopyButton } from "@/components/dashboard/copy-button";
+import { CreateKeyButton } from "@/components/dashboard/create-key-button";
+import { Navbar } from "@/components/navigation/navbar";
 import { Badge } from "@/components/ui/badge";
 import type { Api } from "@unkey/db";
+import { Nodes } from "@unkey/icons";
 
-
-export function Navigation({ api }: {api: Api}) {
+export function Navigation({ api }: { api: Api }) {
   return (
     <Navbar>
-        <Navbar.Breadcrumbs icon={<Nodes />}>
-          <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link href={`/apis/${api.id}`} isIdentifier>
-            {api.name}
-          </Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link active href={`/apis/${api.id}/settings`}>
-            Settings
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-        <Navbar.Actions>
-          <Badge
-            key="apiId"
-            variant="secondary"
-            className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
-          >
-            {api.id}
-            <CopyButton value={api.id} />
-          </Badge>
-          <CreateKeyButton apiId={api.id} keyAuthId={api.keyAuthId!} />
-        </Navbar.Actions>
-      </Navbar>
+      <Navbar.Breadcrumbs icon={<Nodes />}>
+        <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link href={`/apis/${api.id}`} isIdentifier>
+          {api.name}
+        </Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link active href={`/apis/${api.id}/settings`}>
+          Settings
+        </Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+      <Navbar.Actions>
+        <Badge
+          key="apiId"
+          variant="secondary"
+          className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
+        >
+          {api.id}
+          <CopyButton value={api.id} />
+        </Badge>
+        <CreateKeyButton apiId={api.id} keyAuthId={api.keyAuthId!} />
+      </Navbar.Actions>
+    </Navbar>
   );
 }
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/page.tsx
index 1cd3403796..4ca3ab4847 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/page.tsx
@@ -1,23 +1,19 @@
 import { CopyButton } from "@/components/dashboard/copy-button";
-import { CreateKeyButton } from "@/components/dashboard/create-key-button";
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
-import { Navbar } from "@/components/navigation/navbar";
 import { PageContent } from "@/components/page-content";
-import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Code } from "@/components/ui/code";
 import { getTenantId } from "@/lib/auth";
 import { db, eq, schema } from "@/lib/db";
-import { Nodes } from "@unkey/icons";
 import { notFound, redirect } from "next/navigation";
 import { navigation } from "../constants";
 import { DefaultBytes } from "./default-bytes";
 import { DefaultPrefix } from "./default-prefix";
 import { DeleteApi } from "./delete-api";
 import { DeleteProtection } from "./delete-protection";
+import { Navigation } from "./navigation";
 import { UpdateApiName } from "./update-api-name";
 import { UpdateIpWhitelist } from "./update-ip-whitelist";
-import { Navigation } from "./navigation";
 
 export const dynamic = "force-dynamic";
 
@@ -58,7 +54,7 @@ export default async function SettingsPage(props: Props) {
 
   return (
     <div>
-      <Navigation api={api}/>
+      <Navigation api={api} />
 
       <PageContent>
         <SubMenu navigation={navigation(api.id, api.keyAuthId!)} segment="settings" />
diff --git a/apps/dashboard/app/(app)/audit/page.tsx b/apps/dashboard/app/(app)/audit/page.tsx
index 6e59f489e7..17057fb4c7 100644
--- a/apps/dashboard/app/(app)/audit/page.tsx
+++ b/apps/dashboard/app/(app)/audit/page.tsx
@@ -1,9 +1,9 @@
+import { Navigation } from "@/components/navigation/navigation";
 import { getTenantId } from "@/lib/auth";
+import { InputSearch } from "@unkey/icons";
 import { Empty } from "@unkey/ui";
 import { getWorkspace } from "./actions";
 import { LogsClient } from "./components/logs-client";
-import { Navigation } from "@/components/navigation/navigation";
-import { InputSearch } from "@unkey/icons";
 export const dynamic = "force-dynamic";
 export const runtime = "edge";
 
@@ -13,7 +13,7 @@ export default async function AuditPage() {
 
   return (
     <div>
-      <Navigation href="/audit" name="Audit" icon={<InputSearch/>}/>
+      <Navigation href="/audit" name="Audit" icon={<InputSearch />} />
       {workspace.auditLogBuckets.length > 0 ? (
         <LogsClient
           rootKeys={workspace.keys}
diff --git a/apps/dashboard/app/(app)/identities/[identityId]/navigation.tsx b/apps/dashboard/app/(app)/identities/[identityId]/navigation.tsx
index 0cd3adb5f3..6dad8909ec 100644
--- a/apps/dashboard/app/(app)/identities/[identityId]/navigation.tsx
+++ b/apps/dashboard/app/(app)/identities/[identityId]/navigation.tsx
@@ -1,26 +1,26 @@
 "use client";
 
 import { Navbar } from "@/components/navigation/navbar";
-import { Fingerprint, Nodes } from "@unkey/icons";
+import { Fingerprint } from "@unkey/icons";
 
 type NavigationProps = {
-    identityId: string;
+  identityId: string;
 };
 
 export function Navigation({ identityId }: NavigationProps) {
   return (
     <Navbar>
-        <Navbar.Breadcrumbs icon={<Fingerprint />}>
-          <Navbar.Breadcrumbs.Link href="/identities">Identities</Navbar.Breadcrumbs.Link>
-          <Navbar.Breadcrumbs.Link
-            href={`/identities/${identityId}`}
-            className="w-[200px] truncate"
-            active
-            isIdentifier
-          >
-            {identityId}
-          </Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-      </Navbar>
+      <Navbar.Breadcrumbs icon={<Fingerprint />}>
+        <Navbar.Breadcrumbs.Link href="/identities">Identities</Navbar.Breadcrumbs.Link>
+        <Navbar.Breadcrumbs.Link
+          href={`/identities/${identityId}`}
+          className="w-[200px] truncate"
+          active
+          isIdentifier
+        >
+          {identityId}
+        </Navbar.Breadcrumbs.Link>
+      </Navbar.Breadcrumbs>
+    </Navbar>
   );
 }
diff --git a/apps/dashboard/app/(app)/identities/[identityId]/page.tsx b/apps/dashboard/app/(app)/identities/[identityId]/page.tsx
index 7b54689ece..b9f92cbdfd 100644
--- a/apps/dashboard/app/(app)/identities/[identityId]/page.tsx
+++ b/apps/dashboard/app/(app)/identities/[identityId]/page.tsx
@@ -1,7 +1,6 @@
 import { notFound } from "next/navigation";
 
 import { CopyButton } from "@/components/dashboard/copy-button";
-import { Navbar } from "@/components/navigation/navbar";
 import { PageContent } from "@/components/page-content";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
@@ -17,7 +16,6 @@ import {
 import { getTenantId } from "@/lib/auth";
 import { clickhouse } from "@/lib/clickhouse";
 import { db } from "@/lib/db";
-import { Fingerprint } from "@unkey/icons";
 import { Button } from "@unkey/ui";
 import { ChevronRight, Minus } from "lucide-react";
 import ms from "ms";
@@ -59,7 +57,7 @@ export default async function Page(props: Props) {
 
   return (
     <div>
-      <Navigation identityId={props.params.identityId}/>
+      <Navigation identityId={props.params.identityId} />
       <PageContent>
         <div className="flex flex-col gap-8">
           <div className="flex items-center justify-between gap-8">
diff --git a/apps/dashboard/app/(app)/logs/page.tsx b/apps/dashboard/app/(app)/logs/page.tsx
index 272e212523..5cdbd1366b 100644
--- a/apps/dashboard/app/(app)/logs/page.tsx
+++ b/apps/dashboard/app/(app)/logs/page.tsx
@@ -1,9 +1,9 @@
 "use server";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
+import { Layers3 } from "@unkey/icons";
 import { notFound } from "next/navigation";
 import { LogsClient } from "./components/logs-client";
-import { Layers3 } from "@unkey/icons";
 
 import { Navigation } from "@/components/navigation/navigation";
 export default async function Page() {
@@ -20,7 +20,7 @@ export default async function Page() {
 
   return (
     <div>
-      <Navigation href="/logs" name="Logs" icon={<Layers3/>} />
+      <Navigation href="/logs" name="Logs" icon={<Layers3 />} />
       <LogsClient />
     </div>
   );
diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/namespace-navbar.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/namespace-navbar.tsx
index ad129fd811..1418ea7e8b 100644
--- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/namespace-navbar.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/namespace-navbar.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { CopyButton } from "@/components/dashboard/copy-button";
-import { Navbar } from "@/components/navigation/navbar";
 import { QuickNavPopover } from "@/components/navbar-popover";
+import { Navbar } from "@/components/navigation/navbar";
 import { Badge } from "@/components/ui/badge";
 import { ChevronExpandY, Gauge } from "@unkey/icons";
 
diff --git a/apps/dashboard/app/(app)/settings/billing/page.tsx b/apps/dashboard/app/(app)/settings/billing/page.tsx
index e5e94f737a..1e4052da92 100644
--- a/apps/dashboard/app/(app)/settings/billing/page.tsx
+++ b/apps/dashboard/app/(app)/settings/billing/page.tsx
@@ -1,4 +1,5 @@
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
+import { Navigation } from "@/components/navigation/navigation";
 import { PageContent } from "@/components/page-content";
 import {
   Card,
@@ -15,15 +16,14 @@ import { type Workspace, db } from "@/lib/db";
 import { stripeEnv } from "@/lib/env";
 import { cn } from "@/lib/utils";
 import { type BillingTier, QUOTA, calculateTieredPrices } from "@unkey/billing";
+import { Gear } from "@unkey/icons";
 import { Button } from "@unkey/ui";
 import { Check, ExternalLink } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import Stripe from "stripe";
-import { Navigation } from "@/components/navigation/navigation";
 import { navigation } from "../constants";
 import { UserPaymentMethod } from "./user-payment-method";
-import { Gear } from "@unkey/icons";
 
 export const revalidate = 0;
 
@@ -41,7 +41,7 @@ export default async function BillingPage() {
 
   return (
     <div>
-      <Navigation href="/settings/billing" name="Settings" icon={<Gear/>} />
+      <Navigation href="/settings/billing" name="Settings" icon={<Gear />} />
       <PageContent>
         <SubMenu navigation={navigation} segment="billing" />
         <div className="flex flex-col gap-8 lg:flex-row mt-8 ">
diff --git a/apps/dashboard/app/(app)/settings/general/page.tsx b/apps/dashboard/app/(app)/settings/general/page.tsx
index 42cee97f33..7fe17c304e 100644
--- a/apps/dashboard/app/(app)/settings/general/page.tsx
+++ b/apps/dashboard/app/(app)/settings/general/page.tsx
@@ -1,16 +1,16 @@
 import { CopyButton } from "@/components/dashboard/copy-button";
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
+import { Navigation } from "@/components/navigation/navigation";
 import { PageContent } from "@/components/page-content";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Code } from "@/components/ui/code";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
+import { Gear } from "@unkey/icons";
 import { redirect } from "next/navigation";
-import { Navigation } from "@/components/navigation/navigation";
 import { navigation } from "../constants";
 import { UpdateWorkspaceImage } from "./update-workspace-image";
 import { UpdateWorkspaceName } from "./update-workspace-name";
-import { Gear } from "@unkey/icons";
 export const dynamic = "force-dynamic";
 
 export default async function SettingsPage() {
@@ -26,7 +26,7 @@ export default async function SettingsPage() {
 
   return (
     <div>
-      <Navigation href="/settings/general" name="Settings" icon={<Gear/>} />
+      <Navigation href="/settings/general" name="Settings" icon={<Gear />} />
       <PageContent>
         <SubMenu navigation={navigation} segment="general" />
         <div className="mb-20 flex flex-col gap-8 mt-8">
diff --git a/apps/dashboard/app/(app)/settings/team/page.tsx b/apps/dashboard/app/(app)/settings/team/page.tsx
index fb18194acb..ef79641e87 100644
--- a/apps/dashboard/app/(app)/settings/team/page.tsx
+++ b/apps/dashboard/app/(app)/settings/team/page.tsx
@@ -21,7 +21,7 @@ import { useAuth, useClerk, useOrganization } from "@clerk/nextjs";
 
 import { Loading } from "@/components/dashboard/loading";
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
-import { Navbar } from "@/components/navigation/navbar";
+import { Navigation } from "@/components/navigation/navigation";
 import { PageContent } from "@/components/page-content";
 import {
   Select,
@@ -35,7 +35,6 @@ import { toast } from "@/components/ui/toaster";
 import type { MembershipRole } from "@clerk/types";
 import { Gear } from "@unkey/icons";
 import Link from "next/link";
-import { Navigation } from "@/components/navigation/navigation";
 import { navigation } from "../constants";
 
 type Member = {
@@ -52,7 +51,7 @@ export default function TeamPage() {
   if (!organization) {
     return (
       <div>
-        <Navigation href="/settings/team" name="Settings" icon={<Gear/>} />
+        <Navigation href="/settings/team" name="Settings" icon={<Gear />} />
         <PageContent>
           <SubMenu navigation={navigation} segment="team" />
           <div className="mb-20 flex flex-col gap-8 mt-8">
@@ -102,7 +101,7 @@ export default function TeamPage() {
 
   return (
     <div>
-      <Navigation href="/settings/team" icon={<Gear />} name="Settings"/>
+      <Navigation href="/settings/team" icon={<Gear />} name="Settings" />
       <PageContent>
         <SubMenu navigation={navigation} segment="team" />
         <div className="mb-20 flex flex-col gap-8 mt-8">
diff --git a/apps/dashboard/app/(app)/settings/user/page.tsx b/apps/dashboard/app/(app)/settings/user/page.tsx
index 0f7b0bbe11..82c179787f 100644
--- a/apps/dashboard/app/(app)/settings/user/page.tsx
+++ b/apps/dashboard/app/(app)/settings/user/page.tsx
@@ -1,15 +1,15 @@
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
+import { Navigation } from "@/components/navigation/navigation";
 import { PageContent } from "@/components/page-content";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
+import { Gear } from "@unkey/icons";
 import { redirect } from "next/navigation";
-import { Navigation } from "@/components/navigation/navigation";
 import { navigation } from "../constants";
 import { UpdateTheme } from "./update-theme";
 import { UpdateUserEmail } from "./update-user-email";
 import { UpdateUserImage } from "./update-user-image";
 import { UpdateUserName } from "./update-user-name";
-import { Gear } from "@unkey/icons";
 
 export const revalidate = 0;
 
@@ -26,7 +26,7 @@ export default async function SettingsPage() {
 
   return (
     <div>
-      <Navigation href="/settings/user" name="Settings" icon={<Gear/>} />
+      <Navigation href="/settings/user" name="Settings" icon={<Gear />} />
       <PageContent>
         <SubMenu navigation={navigation} segment="user" />
 
diff --git a/apps/dashboard/app/(app)/settings/vercel/page.tsx b/apps/dashboard/app/(app)/settings/vercel/page.tsx
index 7e9e5a7a2e..4783fdb2a4 100644
--- a/apps/dashboard/app/(app)/settings/vercel/page.tsx
+++ b/apps/dashboard/app/(app)/settings/vercel/page.tsx
@@ -1,5 +1,5 @@
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
-import { Navbar } from "@/components/navigation/navbar";
+import { Navigation } from "@/components/navigation/navigation";
 import { PageContent } from "@/components/page-content";
 import { Code } from "@/components/ui/code";
 import { getTenantId } from "@/lib/auth";
@@ -11,7 +11,6 @@ import { Button } from "@unkey/ui";
 import { Vercel } from "@unkey/vercel";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { Navigation } from "@/components/navigation/navigation";
 import { navigation } from "../constants";
 import { Client } from "./client";
 type Props = {
@@ -52,7 +51,7 @@ export default async function Page(props: Props) {
   if (!integration) {
     return (
       <div>
-        <Navigation href="/settings/vercel" name="Settings" icon={<Gear/>} />
+        <Navigation href="/settings/vercel" name="Settings" icon={<Gear />} />
         <PageContent>
           <SubMenu navigation={navigation} segment="vercel" />
           <div className="mt-8" />
@@ -165,7 +164,7 @@ export default async function Page(props: Props) {
 
   return (
     <div>
-      <Navigation href="/settings/billing" icon={<Gear />} name="Settings"/>
+      <Navigation href="/settings/billing" icon={<Gear />} name="Settings" />
       <PageContent>
         <SubMenu navigation={navigation} segment="vercel" />
         <div className="mt-8" />
diff --git a/apps/dashboard/components/navigation/navigation.tsx b/apps/dashboard/components/navigation/navigation.tsx
index c471bfdd70..e7dc5430cd 100644
--- a/apps/dashboard/components/navigation/navigation.tsx
+++ b/apps/dashboard/components/navigation/navigation.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { Navbar } from "@/components/navigation/navbar";
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 // Reusable for settings where we only change the link
-export function Navigation({ href, name, icon }: { href: string, name: string, icon: ReactNode }) {
+export function Navigation({ href, name, icon }: { href: string; name: string; icon: ReactNode }) {
   return (
     <Navbar>
       <Navbar.Breadcrumbs icon={icon}>

From 5c52b7fc6edac29a7f6dfb5cc600967d5bad40eb Mon Sep 17 00:00:00 2001
From: James Perkins <james@unkey.dev>
Date: Thu, 27 Feb 2025 18:49:03 -0500
Subject: [PATCH 5/5] vercel insted of billing

---
 apps/dashboard/app/(app)/settings/vercel/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/app/(app)/settings/vercel/page.tsx b/apps/dashboard/app/(app)/settings/vercel/page.tsx
index 4783fdb2a4..f334bb14bf 100644
--- a/apps/dashboard/app/(app)/settings/vercel/page.tsx
+++ b/apps/dashboard/app/(app)/settings/vercel/page.tsx
@@ -164,7 +164,7 @@ export default async function Page(props: Props) {
 
   return (
     <div>
-      <Navigation href="/settings/billing" icon={<Gear />} name="Settings" />
+      <Navigation href="/settings/vercel" icon={<Gear />} name="Settings" />
       <PageContent>
         <SubMenu navigation={navigation} segment="vercel" />
         <div className="mt-8" />