diff --git a/web/src/routes/admin/route.tsx b/web/src/routes/admin/route.tsx
index 2c7a889..c56f0ff 100644
--- a/web/src/routes/admin/route.tsx
+++ b/web/src/routes/admin/route.tsx
@@ -6,6 +6,7 @@ import { Package } from "@phosphor-icons/react/Package";
 import { Receipt } from "@phosphor-icons/react/Receipt";
 import { SignOut } from "@phosphor-icons/react/SignOut";
 import { SquaresFour } from "@phosphor-icons/react/SquaresFour";
+import { User } from "@phosphor-icons/react/User";
 import { UsersThree } from "@phosphor-icons/react/UsersThree";
 
 import { meQuery } from "@/api/auth/me";
@@ -25,21 +26,23 @@ export const Route = createFileRoute("/admin")({
   component: AdminLayout,
 });
 
-const NAV_ITEMS = [
-  { label: "Overview", to: "/admin", icon: SquaresFour },
-  { label: "Clients", to: "/admin/clients", icon: UsersThree, permission: Permission.ClientsView },
-  { label: "Products", to: "/admin/products", icon: Package, permission: Permission.ProductsManage },
-  { label: "Services", to: "/admin/services", icon: HardDrives, permission: Permission.ServicesManage },
-  { label: "Invoices", to: "/admin/invoices", icon: Receipt, permission: Permission.InvoicesManage },
-  { label: "Refunds", to: "/admin/refunds", icon: ArrowUUpLeft, permission: Permission.PaymentsRefund },
-  { label: "Settings", to: "/admin/settings", icon: GearSix, permission: Permission.SettingsManage },
+const NAV_GROUPS = [
+  [
+    { label: "Overview", to: "/admin", icon: SquaresFour },
+    { label: "Clients", to: "/admin/clients", icon: UsersThree, permission: Permission.ClientsView },
+    { label: "Products", to: "/admin/products", icon: Package, permission: Permission.ProductsManage },
+    { label: "Services", to: "/admin/services", icon: HardDrives, permission: Permission.ServicesManage },
+    { label: "Invoices", to: "/admin/invoices", icon: Receipt, permission: Permission.InvoicesManage },
+    { label: "Refunds", to: "/admin/refunds", icon: ArrowUUpLeft, permission: Permission.PaymentsRefund },
+    { label: "Settings", to: "/admin/settings", icon: GearSix, permission: Permission.SettingsManage },
+  ],
+  [{ label: "Client area", to: "/client", icon: User }],
 ] as const;
 
 function AdminLayout() {
   const { user } = Route.useRouteContext();
   const name = [user.given_name, user.family_name].filter(Boolean).join(" ");
   const initials = (user.given_name.charAt(0) + user.family_name.charAt(0)).toUpperCase();
-  const items = NAV_ITEMS.filter((item) => !("permission" in item) || user.permissions.includes(item.permission));
 
   return (
     <div className="flex h-screen flex-col">
@@ -52,12 +55,6 @@ function AdminLayout() {
         </div>
 
         <div className="flex items-center gap-3">
-          <Link
-            to="/client"
-            className="text-[13px] text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Client area
-          </Link>
           <div className="hidden text-right leading-tight sm:block">
             <p className="text-[13px] font-medium">{name}</p>
             <p className="text-[11px] text-muted-foreground">{user.email}</p>
@@ -77,23 +74,30 @@ function AdminLayout() {
       </header>
 
       <div className="flex min-h-0 flex-1">
-        <nav aria-label="Admin" className="flex w-12 shrink-0 flex-col items-center gap-1 border-r border-border py-2">
-          {items.map((item) => (
-            <Link
-              key={item.to}
-              to={item.to}
-              activeOptions={{ exact: item.to === "/admin" }}
-              aria-label={item.label}
-              className="group relative grid size-8 place-items-center border border-transparent text-muted-foreground transition-colors hover:bg-muted hover:text-foreground data-[status=active]:border-border data-[status=active]:bg-muted data-[status=active]:text-foreground"
+        <nav aria-label="Admin" className="flex w-12 shrink-0 flex-col gap-2 border-r border-border py-2">
+          {NAV_GROUPS.map((group, index) => (
+            <div
+              key={index}
+              className="flex flex-col items-center gap-1 border-border not-first:border-t not-first:pt-2 last:mt-auto"
             >
-              <item.icon className="size-4" />
-              <span
-                aria-hidden="true"
-                className="pointer-events-none absolute top-1/2 left-full z-50 ml-2 -translate-y-1/2 bg-foreground px-2 py-1 text-xs font-medium whitespace-nowrap text-background opacity-0 shadow-md transition-opacity duration-300 group-hover:opacity-100 group-focus-visible:opacity-100"
-              >
-                {item.label}
-              </span>
-            </Link>
+              {group.filter((item) => !("permission" in item) || user.permissions.includes(item.permission)).map((item) => (
+                <Link
+                  key={item.to}
+                  to={item.to}
+                  activeOptions={{ exact: item.to === "/admin" }}
+                  aria-label={item.label}
+                  className="group relative grid size-8 place-items-center border border-transparent text-muted-foreground transition-colors hover:bg-muted hover:text-foreground data-[status=active]:border-border data-[status=active]:bg-muted data-[status=active]:text-foreground"
+                >
+                  <item.icon className="size-4" />
+                  <span
+                    aria-hidden="true"
+                    className="pointer-events-none absolute top-1/2 left-full z-50 ml-2 -translate-y-1/2 bg-foreground px-2 py-1 text-xs font-medium whitespace-nowrap text-background opacity-0 shadow-md transition-opacity duration-300 group-hover:opacity-100 group-focus-visible:opacity-100"
+                  >
+                    {item.label}
+                  </span>
+                </Link>
+              ))}
+            </div>
           ))}
         </nav>
 
diff --git a/web/src/routes/client/route.tsx b/web/src/routes/client/route.tsx
index 1a12db3..efc7595 100644
--- a/web/src/routes/client/route.tsx
+++ b/web/src/routes/client/route.tsx
@@ -11,6 +11,7 @@ import { Plus } from "@phosphor-icons/react/Plus";
 import { Pulse } from "@phosphor-icons/react/Pulse";
 import { Receipt } from "@phosphor-icons/react/Receipt";
 import { ShieldCheck } from "@phosphor-icons/react/ShieldCheck";
+import { ShieldStar } from "@phosphor-icons/react/ShieldStar";
 import { ShoppingCart } from "@phosphor-icons/react/ShoppingCart";
 import { SignOut } from "@phosphor-icons/react/SignOut";
 import { SquaresFour } from "@phosphor-icons/react/SquaresFour";
@@ -18,6 +19,7 @@ import { UserCircle } from "@phosphor-icons/react/UserCircle";
 import { Wallet } from "@phosphor-icons/react/Wallet";
 
 import { meQuery } from "@/api/auth/me";
+import { Permission } from "@/api/auth/permissions";
 import { TEMP_SERVICES, type ServiceStatus } from "@/api/services/services";
 import { cn } from "@/lib/utils";
 
@@ -53,6 +55,7 @@ const NAV_GROUPS = [
     { label: "Affiliates", to: "/client/affiliates", icon: Handshake },
   ],
   [
+    { label: "Admin area", to: "/admin", icon: ShieldStar, permission: Permission.AccessPanel },
     { label: "Security", to: "/client/security", icon: ShieldCheck },
     { label: "Account", to: "/client/account", icon: UserCircle },
   ],
@@ -106,7 +109,7 @@ function ClientLayout() {
               key={index}
               className="flex flex-col items-center gap-1 border-border not-first:border-t not-first:pt-2 last:mt-auto"
             >
-              {group.map((item) => (
+              {group.filter((item) => !("permission" in item) || user.permissions.includes(item.permission)).map((item) => (
                 <Link
                   key={item.to}
                   to={item.to}