diff --git a/.env.example b/.env.example
index f4cd837..b072f12 100644
--- a/.env.example
+++ b/.env.example
@@ -1,3 +1,4 @@
 NAPLATA_DATABASE_URL=postgres://postgres:mysecretpassword@localhost:5432/postgres?sslmode=disable
 NAPLATA_LISTEN_ADDR=:8080
 NAPLATA_ENV=development
+NAPLATA_TEST_DATABASE_URL=postgres://postgres:mysecretpassword@localhost:5432/naplata_test?sslmode=disable
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 5cf6f55..0936957 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -9,6 +9,22 @@ jobs:
   go:
     name: Go
     runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: postgres:17
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: postgres
+          POSTGRES_DB: naplata_test
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd "pg_isready -U postgres"
+          --health-interval 5s
+          --health-timeout 5s
+          --health-retries 10
+    env:
+      NAPLATA_TEST_DATABASE_URL: postgres://postgres:postgres@localhost:5432/naplata_test?sslmode=disable
     steps:
       - uses: actions/checkout@v7
 
diff --git a/cmd/naplata/main.go b/cmd/naplata/main.go
index 7b67b7a..8a118cc 100644
--- a/cmd/naplata/main.go
+++ b/cmd/naplata/main.go
@@ -62,6 +62,9 @@ func main() {
 	// Current user
 	mux.Handle("GET /api/v1/me", h.RequireAuth(http.HandlerFunc(h.MeEndpoint)))
 
+	// Admin
+	mux.Handle("GET /api/v1/admin/clients", h.RequirePermission(http.HandlerFunc(h.ListClientsEndpoint), permissions.ClientsView))
+
 	slog.Info("server listening", "addr", cfg.ListenAddr)
 	log.Fatal(http.ListenAndServe(cfg.ListenAddr, sessionManager.LoadAndSave(mux)))
 }
diff --git a/internal/database/clients.go b/internal/database/clients.go
new file mode 100644
index 0000000..61b99bf
--- /dev/null
+++ b/internal/database/clients.go
@@ -0,0 +1,68 @@
+package database
+
+import (
+	"context"
+	"fmt"
+	"strings"
+	"time"
+
+	"github.com/jackc/pgx/v5"
+)
+
+type Client struct {
+	ID         string    `db:"id" json:"id"`
+	Email      string    `db:"email" json:"email"`
+	GivenName  string    `db:"given_name" json:"given_name"`
+	FamilyName string    `db:"family_name" json:"family_name"`
+	CreatedAt  time.Time `db:"created_at" json:"created_at"`
+}
+
+type ListClientsParams struct {
+	Search string
+	Sort   string
+	Desc   bool
+	Limit  int
+	Offset int
+}
+
+var clientSortColumns = map[string]string{
+	"name":       "lower(u.given_name || ' ' || u.family_name)",
+	"created_at": "u.created_at",
+}
+
+func (s *Store) ListClients(ctx context.Context, p ListClientsParams) ([]Client, int, error) {
+	order, ok := clientSortColumns[p.Sort]
+	if !ok {
+		return nil, 0, fmt.Errorf("list clients: unknown sort %q", p.Sort)
+	}
+	if p.Desc {
+		order += " DESC"
+	}
+
+	rows, _ := s.pool.Query(ctx, `
+		SELECT u.id, u.email, u.given_name, u.family_name, u.created_at, count(*) OVER () AS total
+		FROM users u
+		WHERE strpos(lower(u.given_name || ' ' || u.family_name || ' ' || u.email), lower($1)) > 0
+		ORDER BY `+order+`, u.id
+		LIMIT $2 OFFSET $3`,
+		strings.TrimSpace(p.Search), p.Limit, p.Offset,
+	)
+
+	type clientRow struct {
+		Client
+		Total int `db:"total"`
+	}
+	result, err := pgx.CollectRows(rows, pgx.RowToStructByName[clientRow])
+	if err != nil {
+		return nil, 0, fmt.Errorf("list clients: %w", err)
+	}
+
+	clients := make([]Client, len(result))
+	total := 0
+	for i, row := range result {
+		clients[i] = row.Client
+		total = row.Total
+	}
+
+	return clients, total, nil
+}
diff --git a/internal/database/clients_test.go b/internal/database/clients_test.go
new file mode 100644
index 0000000..0a9e80b
--- /dev/null
+++ b/internal/database/clients_test.go
@@ -0,0 +1,55 @@
+package database
+
+import (
+	"context"
+	"slices"
+	"testing"
+	"time"
+
+	"github.com/mtiluk/naplata/internal/testdb"
+)
+
+func TestListClients(t *testing.T) {
+	pool := testdb.New(t)
+	store := NewStore(pool)
+
+	day := time.Date(2026, 1, 1, 0, 0, 0, 0, time.UTC)
+	testdb.InsertUser(t, pool, "Ada Lovelace", day)
+	testdb.InsertUser(t, pool, "Grace Hopper", day.AddDate(0, 0, 1))
+	testdb.InsertUser(t, pool, "Alan Turing", day.AddDate(0, 0, 2))
+
+	tests := []struct {
+		name  string
+		p     ListClientsParams
+		want  []string
+		total int
+	}{
+		{"newest first", ListClientsParams{Sort: "created_at", Desc: true}, []string{"Alan", "Grace", "Ada"}, 3},
+		{"name ascending", ListClientsParams{Sort: "name"}, []string{"Ada", "Alan", "Grace"}, 3},
+		{"name descending", ListClientsParams{Sort: "name", Desc: true}, []string{"Grace", "Alan", "Ada"}, 3},
+		{"search ignores case", ListClientsParams{Sort: "name", Search: "LOVELACE"}, []string{"Ada"}, 1},
+		{"search email", ListClientsParams{Sort: "name", Search: "alan@"}, []string{"Alan"}, 1},
+		{"search is literal", ListClientsParams{Sort: "name", Search: "%"}, []string{}, 0},
+		{"pagination", ListClientsParams{Sort: "name", Limit: 2, Offset: 1}, []string{"Alan", "Grace"}, 3},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			if tt.p.Limit == 0 {
+				tt.p.Limit = 10
+			}
+			clients, total, err := store.ListClients(context.Background(), tt.p)
+			if err != nil {
+				t.Fatal(err)
+			}
+
+			got := []string{}
+			for _, c := range clients {
+				got = append(got, c.GivenName)
+			}
+			if !slices.Equal(got, tt.want) || total != tt.total {
+				t.Errorf("got %v (total %d), want %v (total %d)", got, total, tt.want, tt.total)
+			}
+		})
+	}
+}
diff --git a/internal/server/clients.go b/internal/server/clients.go
new file mode 100644
index 0000000..e9019cd
--- /dev/null
+++ b/internal/server/clients.go
@@ -0,0 +1,45 @@
+package server
+
+import (
+	"log/slog"
+	"net/http"
+	"strconv"
+
+	"github.com/mtiluk/naplata/internal/database"
+)
+
+func (h *Handler) ListClientsEndpoint(w http.ResponseWriter, r *http.Request) {
+	query := r.URL.Query()
+
+	sort := query.Get("sort")
+	if sort != "name" {
+		sort = "created_at"
+	}
+	order := query.Get("order")
+	desc := order == "desc" || (order == "" && sort == "created_at")
+	page := intParam(query.Get("page"), 1, 1, 1_000_000)
+	perPage := intParam(query.Get("per_page"), 25, 1, 100)
+
+	clients, total, err := h.store.ListClients(r.Context(), database.ListClientsParams{
+		Search: query.Get("q"),
+		Sort:   sort,
+		Desc:   desc,
+		Limit:  perPage,
+		Offset: (page - 1) * perPage,
+	})
+	if err != nil {
+		slog.Error("list clients", "err", err)
+		writeJSON(w, http.StatusInternalServerError, map[string]string{"error": "internal error"})
+		return
+	}
+
+	writeJSON(w, http.StatusOK, map[string]any{"clients": clients, "total": total})
+}
+
+func intParam(value string, fallback, lo, hi int) int {
+	n, err := strconv.Atoi(value)
+	if err != nil {
+		return fallback
+	}
+	return max(lo, min(n, hi))
+}
diff --git a/internal/server/clients_test.go b/internal/server/clients_test.go
new file mode 100644
index 0000000..4dd6d51
--- /dev/null
+++ b/internal/server/clients_test.go
@@ -0,0 +1,68 @@
+package server
+
+import (
+	"context"
+	"encoding/json"
+	"net/http"
+	"net/http/httptest"
+	"testing"
+	"time"
+
+	"github.com/alexedwards/scs/v2"
+	"github.com/mtiluk/naplata/internal/database"
+	"github.com/mtiluk/naplata/internal/permissions"
+	"github.com/mtiluk/naplata/internal/testdb"
+)
+
+func TestListClientsEndpoint(t *testing.T) {
+	pool := testdb.New(t)
+	store := database.NewStore(pool)
+	if err := store.SeedPermissions(context.Background(), permissions.All); err != nil {
+		t.Fatal(err)
+	}
+
+	day := time.Date(2026, 1, 1, 0, 0, 0, 0, time.UTC)
+	client := testdb.InsertUser(t, pool, "Ada Lovelace", day)
+	testdb.InsertUser(t, pool, "Grace Hopper", day.AddDate(0, 0, 1))
+	staff := testdb.InsertUser(t, pool, "Staff Admin", day.AddDate(0, 0, 2))
+	testdb.MakeStaff(t, pool, staff)
+
+	sm := scs.New()
+	h := NewHandler(store, sm)
+	route := h.RequirePermission(http.HandlerFunc(h.ListClientsEndpoint), permissions.ClientsView)
+
+	get := func(userID, query string) *httptest.ResponseRecorder {
+		r := httptest.NewRequest(http.MethodGet, "/api/v1/admin/clients"+query, nil)
+		ctx, _ := sm.Load(r.Context(), "")
+		if userID != "" {
+			sm.Put(ctx, sessionUserIDKey, userID)
+		}
+		w := httptest.NewRecorder()
+		route.ServeHTTP(w, r.WithContext(ctx))
+		return w
+	}
+
+	for _, tt := range []struct {
+		user string
+		code int
+	}{
+		{"", http.StatusUnauthorized},
+		{client, http.StatusForbidden},
+		{staff, http.StatusOK},
+	} {
+		if w := get(tt.user, ""); w.Code != tt.code {
+			t.Errorf("user %q: status %d, want %d", tt.user, w.Code, tt.code)
+		}
+	}
+
+	var body struct {
+		Clients []database.Client
+		Total   int
+	}
+	if err := json.NewDecoder(get(staff, "?sort=name&page=2&per_page=1").Body).Decode(&body); err != nil {
+		t.Fatal(err)
+	}
+	if body.Total != 3 || len(body.Clients) != 1 || body.Clients[0].GivenName != "Grace" {
+		t.Errorf("unexpected response: %+v", body)
+	}
+}
diff --git a/internal/testdb/testdb.go b/internal/testdb/testdb.go
new file mode 100644
index 0000000..0810969
--- /dev/null
+++ b/internal/testdb/testdb.go
@@ -0,0 +1,83 @@
+package testdb
+
+import (
+	"context"
+	"os"
+	"strings"
+	"testing"
+	"time"
+
+	"github.com/jackc/pgx/v5/pgxpool"
+	"github.com/mtiluk/naplata/migrations"
+)
+
+const lockID = 4_284_102
+
+func New(t *testing.T) *pgxpool.Pool {
+	t.Helper()
+
+	url := os.Getenv("NAPLATA_TEST_DATABASE_URL")
+	if url == "" {
+		t.Skip("NAPLATA_TEST_DATABASE_URL is not set")
+	}
+
+	ctx := context.Background()
+
+	pool, err := pgxpool.New(ctx, url)
+	if err != nil {
+		t.Fatalf("connect test database: %v", err)
+	}
+	t.Cleanup(pool.Close)
+
+	lock, err := pool.Acquire(ctx)
+	if err != nil {
+		t.Fatalf("acquire lock connection: %v", err)
+	}
+	if _, err := lock.Exec(ctx, "SELECT pg_advisory_lock($1)", lockID); err != nil {
+		t.Fatalf("lock test database: %v", err)
+	}
+	t.Cleanup(func() {
+		lock.Exec(context.Background(), "SELECT pg_advisory_unlock($1)", lockID)
+		lock.Release()
+	})
+
+	if err := migrations.Up(ctx, pool); err != nil {
+		t.Fatalf("migrate test database: %v", err)
+	}
+
+	if _, err := pool.Exec(ctx, "TRUNCATE users, roles, permissions, sessions RESTART IDENTITY CASCADE"); err != nil {
+		t.Fatalf("reset test database: %v", err)
+	}
+
+	return pool
+}
+
+func InsertUser(t *testing.T, pool *pgxpool.Pool, name string, createdAt time.Time) string {
+	t.Helper()
+
+	given, family, _ := strings.Cut(name, " ")
+	var id string
+	err := pool.QueryRow(context.Background(), `
+		INSERT INTO users (email, given_name, family_name, password_hash, created_at)
+		VALUES ($1, $2, $3, 'hash', $4)
+		RETURNING id`,
+		strings.ToLower(given)+"@example.com", given, family, createdAt,
+	).Scan(&id)
+	if err != nil {
+		t.Fatalf("insert user: %v", err)
+	}
+	return id
+}
+
+func MakeStaff(t *testing.T, pool *pgxpool.Pool, userID string) {
+	t.Helper()
+
+	_, err := pool.Exec(context.Background(), `
+		INSERT INTO user_roles (user_id, role_id)
+		SELECT $1, id FROM roles WHERE name = 'admin'`,
+		userID,
+	)
+	if err != nil {
+		t.Fatalf("make staff: %v", err)
+	}
+}
diff --git a/web/package-lock.json b/web/package-lock.json
index 2e04766..7ad5a77 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -9,10 +9,12 @@
       "version": "0.0.0",
       "dependencies": {
         "@fontsource-variable/inter": "^5.3.0",
+        "@fontsource-variable/jetbrains-mono": "^5.3.0",
         "@hugeicons/core-free-icons": "^4.3.5",
         "@hugeicons/react": "^1.1.10",
         "@tanstack/react-query": "^5.104.0",
         "@tanstack/react-router": "^1.170.40",
+        "@tanstack/react-table": "^9.3.1",
         "clsx": "^2.1.1",
         "openapi-fetch": "^0.17.0",
         "react": "^19.2.8",
@@ -439,6 +441,15 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
+    "node_modules/@fontsource-variable/jetbrains-mono": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.3.0.tgz",
+      "integrity": "sha512-F32xpS2NsGYoQi2ADSkKTgpJj7ozajsGgDJ8woTnqjmIB+dxDIqImjl4pXZVEExu8UFZ2ndhmX18EBS/hdz3Lw==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@hugeicons/core-free-icons": {
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/@hugeicons/core-free-icons/-/core-free-icons-4.3.5.tgz",
@@ -1521,6 +1532,26 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@tanstack/react-table": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-9.3.1.tgz",
+      "integrity": "sha512-E6Ya5TnY6EaGyZYIUqig/29Lr/gJSAubQkLJFqiWkUl5nRCr0Xr9hvJot+NiRTtG+TzGxHTiqUW3bnLtQxlHug==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/react-store": "^0.11.2",
+        "@tanstack/table-core": "9.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
     "node_modules/@tanstack/router-core": {
       "version": "1.171.33",
       "resolved": "https://registry.npmjs.org/@tanstack/router-core/-/router-core-1.171.33.tgz",
@@ -1647,6 +1678,22 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/table-core": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-9.3.1.tgz",
+      "integrity": "sha512-zQvlxSNi2qGM3L4jh85Z6hqMfdIR5qOfD9KHOU32nuKFJGN0RlJ7UvV1lsPb1fPVhpFYI0VP3jJGxLdLDpTKjQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/store": "^0.11.2"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/virtual-file-routes": {
       "version": "1.162.0",
       "resolved": "https://registry.npmjs.org/@tanstack/virtual-file-routes/-/virtual-file-routes-1.162.0.tgz",
diff --git a/web/package.json b/web/package.json
index a1a5994..8f57dc9 100644
--- a/web/package.json
+++ b/web/package.json
@@ -13,10 +13,12 @@
   },
   "dependencies": {
     "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@hugeicons/core-free-icons": "^4.3.5",
     "@hugeicons/react": "^1.1.10",
     "@tanstack/react-query": "^5.104.0",
     "@tanstack/react-router": "^1.170.40",
+    "@tanstack/react-table": "^9.3.1",
     "clsx": "^2.1.1",
     "openapi-fetch": "^0.17.0",
     "react": "^19.2.8",
diff --git a/web/src/api/clients/clients.ts b/web/src/api/clients/clients.ts
new file mode 100644
index 0000000..55694ca
--- /dev/null
+++ b/web/src/api/clients/clients.ts
@@ -0,0 +1,45 @@
+import { keepPreviousData, queryOptions } from "@tanstack/react-query";
+
+export type Client = {
+  id: string;
+  email: string;
+  given_name: string;
+  family_name: string;
+  created_at: string;
+};
+
+export type ClientSort = "name" | "created_at";
+export type SortOrder = "asc" | "desc";
+
+export type ClientsParams = {
+  q?: string;
+  sort?: ClientSort;
+  order?: SortOrder;
+  page?: number;
+};
+
+export type ClientsResponse = {
+  clients: Client[];
+  total: number;
+};
+
+export const CLIENTS_PER_PAGE = 10;
+
+export function clientsQuery({ q, sort, order, page }: ClientsParams) {
+  return queryOptions({
+    queryKey: ["admin", "clients", { q, sort, order, page }],
+    queryFn: async (): Promise<ClientsResponse> => {
+      const params = new URLSearchParams({ per_page: String(CLIENTS_PER_PAGE) });
+      if (q) params.set("q", q);
+      if (sort) params.set("sort", sort);
+      if (order) params.set("order", order);
+      if (page) params.set("page", String(page));
+
+      const res = await fetch(`/api/v1/admin/clients?${params}`);
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) throw { status: res.status, ...data };
+      return data;
+    },
+    placeholderData: keepPreviousData,
+  });
+}
diff --git a/web/src/components/auth/auth-layout.tsx b/web/src/components/auth/auth-layout.tsx
index 3350d94..4cee35a 100644
--- a/web/src/components/auth/auth-layout.tsx
+++ b/web/src/components/auth/auth-layout.tsx
@@ -10,7 +10,9 @@ export function AuthLayout({ title, footer, children }: AuthLayoutProps) {
   return (
     <div className="absolute inset-x-0 top-0 flex min-h-screen items-center justify-center px-4">
       <div className="w-full max-w-xs">
-        <p className="mb-10 text-center text-base font-semibold tracking-tight">Naplata</p>
+        <p className="mb-10 flex items-center justify-center gap-2 text-base font-semibold tracking-tight">
+          Naplata
+        </p>
 
         <div className="space-y-5">
           <h1 className="text-center text-lg font-medium">{title}</h1>
diff --git a/web/src/components/dashboard/dashboard-layout.tsx b/web/src/components/dashboard/dashboard-layout.tsx
new file mode 100644
index 0000000..361482f
--- /dev/null
+++ b/web/src/components/dashboard/dashboard-layout.tsx
@@ -0,0 +1,103 @@
+import { Link, type LinkProps } from "@tanstack/react-router";
+import type { IconSvgElement } from "@hugeicons/react";
+import type { ReactNode } from "react";
+
+import type { User } from "@/api/auth/me";
+import type { Permission } from "@/api/auth/permissions";
+import { HugeiconsIcon, Logout03Icon } from "@/components/icons";
+
+export type NavItem = {
+  label: string;
+  to: LinkProps["to"];
+  icon: IconSvgElement;
+  permission?: Permission;
+};
+
+type DashboardLayoutProps = {
+  user: User;
+  title: ReactNode;
+  home: LinkProps["to"];
+  navLabel: string;
+  navGroups: readonly (readonly NavItem[])[];
+  account?: LinkProps["to"];
+  panel?: ReactNode;
+  children: ReactNode;
+};
+
+export function DashboardLayout({ user, title, home, navLabel, navGroups, account, panel, children }: DashboardLayoutProps) {
+  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 userInfo = (
+    <>
+      <div className="hidden text-right leading-tight sm:block">
+        <p className="text-[13px] font-medium">{name}</p>
+        <p className="text-[11px] text-muted-foreground transition-colors group-hover:text-foreground">{user.email}</p>
+      </div>
+      <span className="grid size-8 place-items-center border border-border bg-muted font-mono text-[11px] font-medium transition-colors group-hover:border-ring">
+        {initials}
+      </span>
+    </>
+  );
+
+  return (
+    <div className="flex h-screen flex-col">
+      <header className="flex h-12 shrink-0 items-center justify-between border-b border-border px-4">
+        {title}
+
+        <div className="flex items-center gap-3">
+          {account ? (
+            <Link to={account} aria-label="Account settings" className="group flex items-center gap-3">
+              {userInfo}
+            </Link>
+          ) : (
+            <div className="flex items-center gap-3">{userInfo}</div>
+          )}
+          <Link
+            to="/logout"
+            aria-label="Sign out"
+            title="Sign out"
+            className="grid size-8 place-items-center text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <HugeiconsIcon icon={Logout03Icon} className="size-4" />
+          </Link>
+        </div>
+      </header>
+
+      <div className="flex min-h-0 flex-1">
+        <nav aria-label={navLabel} className="flex w-12 shrink-0 flex-col gap-2 border-r border-border py-2">
+          {navGroups.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"
+            >
+              {group
+                .filter((item) => !item.permission || user.permissions.includes(item.permission))
+                .map((item) => (
+                  <Link
+                    key={item.to}
+                    to={item.to}
+                    activeOptions={{ exact: item.to === home }}
+                    aria-label={item.label}
+                    className="group relative grid size-8 place-items-center text-muted-foreground transition-colors before:absolute before:top-1/2 before:-left-2 before:h-4 before:w-0.5 before:-translate-y-1/2 before:bg-primary before:opacity-0 hover:bg-muted hover:text-foreground data-[status=active]:bg-muted data-[status=active]:text-foreground data-[status=active]:before:opacity-100"
+                  >
+                    <HugeiconsIcon icon={item.icon} className="size-4" />
+                    <span
+                      aria-hidden="true"
+                      className="label pointer-events-none absolute top-1/2 left-full z-50 ml-2.5 -translate-y-1/2 bg-foreground px-1.5 py-1 whitespace-nowrap text-background opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-focus-visible:opacity-100"
+                    >
+                      {item.label}
+                    </span>
+                  </Link>
+                ))}
+            </div>
+          ))}
+        </nav>
+
+        {panel}
+
+        <main className="min-w-0 flex-1 overflow-auto p-6">{children}</main>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/components/icons.ts b/web/src/components/icons.ts
index 3aa728d..6a2a7ee 100644
--- a/web/src/components/icons.ts
+++ b/web/src/components/icons.ts
@@ -2,7 +2,12 @@ export { HugeiconsIcon } from "@hugeicons/react";
 export { default as Activity01Icon } from "@hugeicons/core-free-icons/Activity01Icon";
 export { default as Add01Icon } from "@hugeicons/core-free-icons/Add01Icon";
 export { default as ArrowDataTransferHorizontalIcon } from "@hugeicons/core-free-icons/ArrowDataTransferHorizontalIcon";
+export { default as ArrowDown01Icon } from "@hugeicons/core-free-icons/ArrowDown01Icon";
+export { default as ArrowLeft01Icon } from "@hugeicons/core-free-icons/ArrowLeft01Icon";
+export { default as ArrowRight01Icon } from "@hugeicons/core-free-icons/ArrowRight01Icon";
 export { default as ArrowRight02Icon } from "@hugeicons/core-free-icons/ArrowRight02Icon";
+export { default as ArrowUp01Icon } from "@hugeicons/core-free-icons/ArrowUp01Icon";
+export { default as ArrowUpDownIcon } from "@hugeicons/core-free-icons/ArrowUpDownIcon";
 export { default as BookOpen01Icon } from "@hugeicons/core-free-icons/BookOpen01Icon";
 export { default as Cancel01Icon } from "@hugeicons/core-free-icons/Cancel01Icon";
 export { default as CreditCardIcon } from "@hugeicons/core-free-icons/CreditCardIcon";
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index f3b3215..41e4acc 100644
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -2,16 +2,12 @@ import type { ButtonHTMLAttributes } from "react";
 
 import { cn } from "@/lib/utils";
 
-export function Button({
-  className,
-  type = "button",
-  ...props
-}: ButtonHTMLAttributes<HTMLButtonElement>) {
+export function Button({ className, type = "button", ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
   return (
     <button
       type={type}
       className={cn(
-        "inline-flex h-8 items-center justify-center gap-1.5 border border-transparent bg-primary px-2.5 text-sm font-medium whitespace-nowrap text-primary-foreground transition-colors outline-none select-none hover:bg-primary/80 focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50",
+        "inline-flex h-8 items-center justify-center gap-1.5 border border-transparent bg-primary px-2.5 text-xs font-medium whitespace-nowrap text-primary-foreground transition-colors outline-none select-none hover:bg-primary/80 focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring active:translate-y-px disabled:pointer-events-none disabled:opacity-50",
         className,
       )}
       {...props}
diff --git a/web/src/components/ui/checkbox.tsx b/web/src/components/ui/checkbox.tsx
index e622b23..1ab6374 100644
--- a/web/src/components/ui/checkbox.tsx
+++ b/web/src/components/ui/checkbox.tsx
@@ -18,7 +18,7 @@ export function Checkbox({ label, checked, error, onCheckedChange }: CheckboxPro
           checked={checked}
           aria-invalid={error || undefined}
           onChange={(e) => onCheckedChange(e.target.checked)}
-          className="peer size-4 cursor-pointer appearance-none border border-input bg-input/30 transition-colors outline-none checked:border-primary checked:bg-primary focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-0"
+          className="peer size-4 cursor-pointer appearance-none border border-input bg-input/30 transition-colors outline-none checked:border-primary checked:bg-primary focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring aria-invalid:border-destructive aria-invalid:ring-0"
         />
         <HugeiconsIcon icon={Tick02Icon} className="pointer-events-none absolute hidden size-3 text-primary-foreground peer-checked:block" strokeWidth={3} />
       </span>
diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx
index 9c6e7ed..cb9f995 100644
--- a/web/src/components/ui/input.tsx
+++ b/web/src/components/ui/input.tsx
@@ -23,7 +23,7 @@ export function Input({ error, className, id: idProp, type, ...props }: InputPro
           aria-invalid={error ? true : undefined}
           aria-describedby={error ? `${id}-error` : undefined}
           className={cn(
-            "h-8 w-full min-w-0 border border-input bg-input/30 px-2.5 py-1 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-0 md:text-sm",
+            "h-8 w-full min-w-0 border border-input bg-input/30 px-2.5 py-1 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-0 md:text-sm",
             isPassword && "pr-10",
           )}
           {...props}
diff --git a/web/src/components/ui/table.tsx b/web/src/components/ui/table.tsx
new file mode 100644
index 0000000..e22bc15
--- /dev/null
+++ b/web/src/components/ui/table.tsx
@@ -0,0 +1,59 @@
+import type { HTMLAttributes, MouseEvent, TdHTMLAttributes, ThHTMLAttributes } from "react";
+
+import { ArrowDown01Icon, ArrowUp01Icon, ArrowUpDownIcon, HugeiconsIcon } from "@/components/icons";
+import { cn } from "@/lib/utils";
+
+export function Table({ className, ...props }: HTMLAttributes<HTMLTableElement>) {
+  return (
+    <div className="w-full overflow-x-auto border border-border">
+      <table className={cn("w-full text-[13px]", className)} {...props} />
+    </div>
+  );
+}
+
+export function TableHeader({ className, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
+  return <thead className={cn("bg-muted/30", className)} {...props} />;
+}
+
+export function TableBody({ className, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
+  return <tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
+}
+
+export function TableRow({ className, ...props }: HTMLAttributes<HTMLTableRowElement>) {
+  return <tr className={cn("border-b border-border transition-colors hover:bg-muted/40", className)} {...props} />;
+}
+
+type TableHeadProps = ThHTMLAttributes<HTMLTableCellElement> & {
+  sort?: "asc" | "desc" | false;
+  onSort?: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+
+export function TableHead({ className, sort, onSort, children, ...props }: TableHeadProps) {
+  return (
+    <th
+      aria-sort={sort === "asc" ? "ascending" : sort === "desc" ? "descending" : undefined}
+      className={cn("label h-8 px-3 text-left align-middle whitespace-nowrap text-muted-foreground", className)}
+      {...props}
+    >
+      {onSort ? (
+        <button
+          type="button"
+          onClick={onSort}
+          className={cn("inline-flex items-center gap-1 uppercase transition-colors hover:text-foreground", sort && "text-foreground")}
+        >
+          {children}
+          <HugeiconsIcon
+            icon={sort === "asc" ? ArrowUp01Icon : sort === "desc" ? ArrowDown01Icon : ArrowUpDownIcon}
+            className={cn("size-3", !sort && "opacity-40")}
+          />
+        </button>
+      ) : (
+        children
+      )}
+    </th>
+  );
+}
+
+export function TableCell({ className, ...props }: TdHTMLAttributes<HTMLTableCellElement>) {
+  return <td className={cn("h-11 px-3 py-1.5 align-middle whitespace-nowrap", className)} {...props} />;
+}
diff --git a/web/src/index.css b/web/src/index.css
index c58bd6a..0e20edc 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "@fontsource-variable/inter";
+@import "@fontsource-variable/jetbrains-mono";
 
 @font-face {
   font-family: "Satoshi Variable";
@@ -12,6 +13,7 @@
 @theme {
   --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
   --font-display: "Satoshi Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono Variable", ui-monospace, monospace;
 
   --color-background: #18181a;
   --color-foreground: #fafafa;
@@ -29,6 +31,21 @@
   --color-selection: #a54a4b66;
 }
 
+@utility dither-fade-b {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='64' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM0 4h1v1h-1zM2 6h1v1h-1zM0 8h1v1h-1zM2 8h1v1h-1zM2 10h1v1h-1zM0 12h1v1h-1zM2 12h1v1h-1zM0 14h1v1h-1zM2 14h1v1h-1zM0 16h1v1h-1zM2 16h1v1h-1zM1 17h1v1h-1zM0 18h1v1h-1zM2 18h1v1h-1zM0 20h1v1h-1zM2 20h1v1h-1zM1 21h1v1h-1zM0 22h1v1h-1zM2 22h1v1h-1zM3 23h1v1h-1zM0 24h1v1h-1zM2 24h1v1h-1zM1 25h1v1h-1zM3 25h1v1h-1zM0 26h1v1h-1zM2 26h1v1h-1zM3 27h1v1h-1zM0 28h1v1h-1zM2 28h1v1h-1zM1 29h1v1h-1zM3 29h1v1h-1zM0 30h1v1h-1zM2 30h1v1h-1zM1 31h1v1h-1zM3 31h1v1h-1zM0 32h1v1h-1zM1 32h1v1h-1zM2 32h1v1h-1zM1 33h1v1h-1zM3 33h1v1h-1zM0 34h1v1h-1zM2 34h1v1h-1zM1 35h1v1h-1zM3 35h1v1h-1zM0 36h1v1h-1zM1 36h1v1h-1zM2 36h1v1h-1zM1 37h1v1h-1zM3 37h1v1h-1zM0 38h1v1h-1zM2 38h1v1h-1zM3 38h1v1h-1zM1 39h1v1h-1zM3 39h1v1h-1zM0 40h1v1h-1zM1 40h1v1h-1zM2 40h1v1h-1zM3 40h1v1h-1zM1 41h1v1h-1zM3 41h1v1h-1zM0 42h1v1h-1zM2 42h1v1h-1zM3 42h1v1h-1zM1 43h1v1h-1zM3 43h1v1h-1zM0 44h1v1h-1zM1 44h1v1h-1zM2 44h1v1h-1zM3 44h1v1h-1zM1 45h1v1h-1zM3 45h1v1h-1zM0 46h1v1h-1zM1 46h1v1h-1zM2 46h1v1h-1zM3 46h1v1h-1zM1 47h1v1h-1zM3 47h1v1h-1zM0 48h1v1h-1zM1 48h1v1h-1zM2 48h1v1h-1zM3 48h1v1h-1zM0 49h1v1h-1zM1 49h1v1h-1zM3 49h1v1h-1zM0 50h1v1h-1zM1 50h1v1h-1zM2 50h1v1h-1zM3 50h1v1h-1zM1 51h1v1h-1zM3 51h1v1h-1zM0 52h1v1h-1zM1 52h1v1h-1zM2 52h1v1h-1zM3 52h1v1h-1zM0 53h1v1h-1zM1 53h1v1h-1zM3 53h1v1h-1zM0 54h1v1h-1zM1 54h1v1h-1zM2 54h1v1h-1zM3 54h1v1h-1zM1 55h1v1h-1zM2 55h1v1h-1zM3 55h1v1h-1zM0 56h1v1h-1zM1 56h1v1h-1zM2 56h1v1h-1zM3 56h1v1h-1zM0 57h1v1h-1zM1 57h1v1h-1zM2 57h1v1h-1zM3 57h1v1h-1zM0 58h1v1h-1zM1 58h1v1h-1zM2 58h1v1h-1zM3 58h1v1h-1zM1 59h1v1h-1zM2 59h1v1h-1zM3 59h1v1h-1zM0 60h1v1h-1zM1 60h1v1h-1zM2 60h1v1h-1zM3 60h1v1h-1zM0 61h1v1h-1zM1 61h1v1h-1zM2 61h1v1h-1zM3 61h1v1h-1zM0 62h1v1h-1zM1 62h1v1h-1zM2 62h1v1h-1zM3 62h1v1h-1zM0 63h1v1h-1zM1 63h1v1h-1zM2 63h1v1h-1zM3 63h1v1h-1z'/%3E%3C/svg%3E");
+  mask-size: calc(4px * var(--dither-scale, 1)) calc(64px * var(--dither-scale, 1));
+  mask-repeat: repeat-x;
+  mask-position: bottom;
+}
+
+@utility dither-scale-* {
+  --dither-scale: --value(integer);
+}
+
+@utility label {
+  @apply font-mono text-[10px] font-medium tracking-[0.08em] uppercase;
+}
+
 @layer base {
   :root {
     color-scheme: dark;
@@ -38,6 +55,11 @@
     @apply bg-background font-sans text-foreground antialiased;
   }
 
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-muted) transparent;
+  }
+
   ::selection {
     @apply bg-selection;
   }
diff --git a/web/src/lib/require-permission.ts b/web/src/lib/require-permission.ts
new file mode 100644
index 0000000..9b30224
--- /dev/null
+++ b/web/src/lib/require-permission.ts
@@ -0,0 +1,12 @@
+import { redirect } from "@tanstack/react-router";
+
+import type { User } from "@/api/auth/me";
+import type { Permission } from "@/api/auth/permissions";
+
+export function requirePermission(permission: Permission) {
+  return ({ context }: { context: { user: User } }) => {
+    if (!context.user.permissions.includes(permission)) {
+      throw redirect({ to: "/admin" });
+    }
+  };
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 229be48..513fa12 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -29,6 +29,10 @@ declare module "@tanstack/react-router" {
   interface Register {
     router: typeof router;
   }
+
+  interface StaticDataRouteOption {
+    crumb?: string;
+  }
 }
 
 createRoot(document.getElementById("root")!).render(
diff --git a/web/src/routes/admin/clients.tsx b/web/src/routes/admin/clients.tsx
index 57c883e..edc6b2b 100644
--- a/web/src/routes/admin/clients.tsx
+++ b/web/src/routes/admin/clients.tsx
@@ -1,16 +1,218 @@
-import { createFileRoute, redirect } from '@tanstack/react-router'
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  createColumnHelper,
+  functionalUpdate,
+  rowPaginationFeature,
+  rowSortingFeature,
+  tableFeatures,
+  useTable,
+  type SortingState,
+} from "@tanstack/react-table";
 
-import { Permission } from '@/api/auth/permissions'
+import { Permission } from "@/api/auth/permissions";
+import { CLIENTS_PER_PAGE, clientsQuery, type Client, type ClientSort, type SortOrder } from "@/api/clients/clients";
+import { Add01Icon, ArrowLeft01Icon, ArrowRight01Icon, HugeiconsIcon } from "@/components/icons";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { requirePermission } from "@/lib/require-permission";
+import { cn } from "@/lib/utils";
 
-export const Route = createFileRoute('/admin/clients')({
-  beforeLoad: ({ context }) => {
-    if (!context.user.permissions.includes(Permission.ClientsView)) {
-      throw redirect({ to: '/admin' })
-    }
+type ClientsSearch = {
+  q?: string;
+  sort?: ClientSort;
+  order?: SortOrder;
+  page?: number;
+};
+
+export const Route = createFileRoute("/admin/clients")({
+  staticData: { crumb: "Clients" },
+  validateSearch: (search: Record<string, unknown>): ClientsSearch => {
+    const page = Number(search.page);
+    return {
+      q: typeof search.q === "string" && search.q !== "" ? search.q : undefined,
+      sort: search.sort === "name" || search.sort === "created_at" ? search.sort : undefined,
+      order: search.order === "asc" || search.order === "desc" ? search.order : undefined,
+      page: Number.isInteger(page) && page > 1 ? page : undefined,
+    };
   },
-  component: RouteComponent,
-})
+  beforeLoad: requirePermission(Permission.ClientsView),
+  component: ClientsPage,
+});
+
+const date = new Intl.DateTimeFormat("en-GB", { day: "numeric", month: "short", year: "numeric" });
+
+const NO_CLIENTS: Client[] = [];
+
+const features = tableFeatures({ rowPaginationFeature, rowSortingFeature });
+const helper = createColumnHelper<typeof features, Client>();
+const columns = helper.columns([
+  helper.accessor((client) => `${client.given_name} ${client.family_name}`.trim(), {
+    id: "name",
+    header: "Client",
+    cell: ({ row, getValue }) => (
+      <>
+        <p className="font-medium">{getValue()}</p>
+        <p className="mt-0.5 text-[11px] text-muted-foreground">{row.original.email}</p>
+      </>
+    ),
+  }),
+  helper.accessor("created_at", {
+    header: "Created",
+    sortDescFirst: true,
+    cell: ({ getValue }) => <span className="text-muted-foreground">{date.format(new Date(getValue()))}</span>,
+  }),
+]);
+
+function ClientsPage() {
+  const { user } = Route.useRouteContext();
+  const canManage = user.permissions.includes(Permission.ClientsManage);
+  const navigate = Route.useNavigate();
+  const { q, sort = "created_at", order = sort === "created_at" ? "desc" : "asc", page = 1 } = Route.useSearch();
+
+  const clients = useQuery(clientsQuery({ q, sort, order, page }));
+  const total = clients.data?.total ?? 0;
+  const sorting: SortingState = [{ id: sort, desc: order === "desc" }];
+
+  const table = useTable({
+    features,
+    columns,
+    data: clients.data?.clients ?? NO_CLIENTS,
+    manualPagination: true,
+    manualSorting: true,
+    enableSortingRemoval: false,
+    rowCount: total,
+    state: {
+      pagination: { pageIndex: page - 1, pageSize: CLIENTS_PER_PAGE },
+      sorting,
+    },
+    onSortingChange: (updater) => {
+      const [next] = functionalUpdate(updater, sorting);
+      if (!next) return;
+      navigate({
+        search: (prev) => ({ ...prev, sort: next.id as ClientSort, order: next.desc ? "desc" : "asc", page: undefined }),
+      });
+    },
+    onPaginationChange: (updater) => {
+      const next = functionalUpdate(updater, { pageIndex: page - 1, pageSize: CLIENTS_PER_PAGE });
+      navigate({ search: (prev) => ({ ...prev, page: next.pageIndex > 0 ? next.pageIndex + 1 : undefined }) });
+    },
+  });
+  const rows = table.getRowModel().rows;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center gap-2">
+        <h1 className="text-lg font-medium">Clients</h1>
+        {clients.data && <span className="bg-muted px-1.5 font-mono text-[11px] text-muted-foreground">{total}</span>}
+        {canManage && (
+          <Button className="ml-auto">
+            <HugeiconsIcon icon={Add01Icon} className="size-4" />
+            New client
+          </Button>
+        )}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        <Input
+          type="search"
+          placeholder="Search clients"
+          value={q ?? ""}
+          onChange={(event) =>
+            navigate({ search: (prev) => ({ ...prev, q: event.target.value || undefined, page: undefined }), replace: true })
+          }
+          className="w-full sm:w-64"
+        />
+
+        {q && (
+          <button
+            type="button"
+            onClick={() => navigate({ search: (prev) => ({ ...prev, q: undefined, page: undefined }) })}
+            className="h-8 px-2 text-[13px] text-destructive transition-colors hover:text-destructive/70"
+          >
+            Reset
+          </button>
+        )}
+      </div>
+
+      <Table className={cn("transition-opacity", clients.isPlaceholderData && "opacity-60")}>
+        <TableHeader>
+          {table.getHeaderGroups().map((group) => (
+            <TableRow key={group.id} className="hover:bg-transparent">
+              {group.headers.map((header) => (
+                <TableHead
+                  key={header.id}
+                  sort={header.column.getIsSorted()}
+                  onSort={
+                    header.column.getCanSort()
+                      ? (event) => {
+                          header.column.getToggleSortingHandler()?.(event);
+                          table.setPageIndex(0);
+                        }
+                      : undefined
+                  }
+                >
+                  {header.isPlaceholder ? null : <table.FlexRender header={header} />}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {rows.length === 0 && (
+            <TableRow className="hover:bg-transparent">
+              <TableCell colSpan={columns.length} className="h-24 text-center text-muted-foreground">
+                {clients.isPending
+                  ? "Loading clients…"
+                  : clients.isError
+                    ? "Couldn't load clients"
+                    : q
+                      ? `No clients match "${q}"`
+                      : "No clients yet"}
+              </TableCell>
+            </TableRow>
+          )}
+          {rows.map((row) => (
+            <TableRow key={row.id} className="cursor-pointer">
+              {row.getAllCells().map((cell) => (
+                <TableCell key={cell.id}>
+                  <table.FlexRender cell={cell} />
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
 
-function RouteComponent() {
-  return <h1 className="text-lg font-medium">Clients</h1>
+      <div className="flex items-center justify-between text-xs text-muted-foreground tabular-nums">
+        <p>
+          {total === 0 ? 0 : (page - 1) * CLIENTS_PER_PAGE + 1}–{Math.min(total, page * CLIENTS_PER_PAGE)} of {total}
+        </p>
+        <div className="flex items-center gap-1.5">
+          <span className="mr-3">
+            Page {total === 0 ? 0 : page} of {table.getPageCount()}
+          </span>
+          <button
+            type="button"
+            aria-label="Previous page"
+            disabled={!table.getCanPreviousPage()}
+            onClick={() => table.previousPage()}
+            className="grid size-6 place-items-center border border-border transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+          >
+            <HugeiconsIcon icon={ArrowLeft01Icon} className="size-3" />
+          </button>
+          <button
+            type="button"
+            aria-label="Next page"
+            disabled={!table.getCanNextPage()}
+            onClick={() => table.nextPage()}
+            className="grid size-6 place-items-center border border-border transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+          >
+            <HugeiconsIcon icon={ArrowRight01Icon} className="size-3" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/web/src/routes/admin/index.tsx b/web/src/routes/admin/index.tsx
index 8fb0355..d134ecb 100644
--- a/web/src/routes/admin/index.tsx
+++ b/web/src/routes/admin/index.tsx
@@ -1,6 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/admin/')({
+  staticData: { crumb: 'Overview' },
   component: RouteComponent,
 })
 
diff --git a/web/src/routes/admin/invoices.tsx b/web/src/routes/admin/invoices.tsx
index 5ce60fe..6753fdb 100644
--- a/web/src/routes/admin/invoices.tsx
+++ b/web/src/routes/admin/invoices.tsx
@@ -1,13 +1,11 @@
-import { createFileRoute, redirect } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
 
 import { Permission } from '@/api/auth/permissions'
+import { requirePermission } from '@/lib/require-permission'
 
 export const Route = createFileRoute('/admin/invoices')({
-  beforeLoad: ({ context }) => {
-    if (!context.user.permissions.includes(Permission.InvoicesManage)) {
-      throw redirect({ to: '/admin' })
-    }
-  },
+  staticData: { crumb: 'Invoices' },
+  beforeLoad: requirePermission(Permission.InvoicesManage),
   component: RouteComponent,
 })
 
diff --git a/web/src/routes/admin/products.tsx b/web/src/routes/admin/products.tsx
index 23a7582..907fefa 100644
--- a/web/src/routes/admin/products.tsx
+++ b/web/src/routes/admin/products.tsx
@@ -1,13 +1,11 @@
-import { createFileRoute, redirect } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
 
 import { Permission } from '@/api/auth/permissions'
+import { requirePermission } from '@/lib/require-permission'
 
 export const Route = createFileRoute('/admin/products')({
-  beforeLoad: ({ context }) => {
-    if (!context.user.permissions.includes(Permission.ProductsManage)) {
-      throw redirect({ to: '/admin' })
-    }
-  },
+  staticData: { crumb: 'Products' },
+  beforeLoad: requirePermission(Permission.ProductsManage),
   component: RouteComponent,
 })
 
diff --git a/web/src/routes/admin/refunds.tsx b/web/src/routes/admin/refunds.tsx
index 45d1fb1..9ed1a2d 100644
--- a/web/src/routes/admin/refunds.tsx
+++ b/web/src/routes/admin/refunds.tsx
@@ -1,13 +1,11 @@
-import { createFileRoute, redirect } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
 
 import { Permission } from '@/api/auth/permissions'
+import { requirePermission } from '@/lib/require-permission'
 
 export const Route = createFileRoute('/admin/refunds')({
-  beforeLoad: ({ context }) => {
-    if (!context.user.permissions.includes(Permission.PaymentsRefund)) {
-      throw redirect({ to: '/admin' })
-    }
-  },
+  staticData: { crumb: 'Refunds' },
+  beforeLoad: requirePermission(Permission.PaymentsRefund),
   component: RouteComponent,
 })
 
diff --git a/web/src/routes/admin/route.tsx b/web/src/routes/admin/route.tsx
index 091bfc7..23b3477 100644
--- a/web/src/routes/admin/route.tsx
+++ b/web/src/routes/admin/route.tsx
@@ -1,8 +1,19 @@
-import { Link, Outlet, createFileRoute, redirect } from "@tanstack/react-router";
+import { Link, Outlet, createFileRoute, redirect, useMatches } from "@tanstack/react-router";
 
 import { meQuery } from "@/api/auth/me";
 import { Permission } from "@/api/auth/permissions";
-import { HugeiconsIcon, DashboardSquare01Icon, Invoice01Icon, Logout03Icon, PackageIcon, ReturnRequestIcon, ServerStack01Icon, Settings01Icon, UserGroupIcon, UserIcon } from "@/components/icons";
+import { DashboardLayout, type NavItem } from "@/components/dashboard/dashboard-layout";
+import {
+  DashboardSquare01Icon,
+  Invoice01Icon,
+  PackageIcon,
+  ReturnRequestIcon,
+  ServerStack01Icon,
+  Settings01Icon,
+  UserGroupIcon,
+  UserIcon,
+} from "@/components/icons";
+import { cn } from "@/lib/utils";
 
 export const Route = createFileRoute("/admin")({
   beforeLoad: async ({ context, location }) => {
@@ -29,74 +40,38 @@ const NAV_GROUPS = [
     { label: "Settings", to: "/admin/settings", icon: Settings01Icon, permission: Permission.SettingsManage },
   ],
   [{ label: "Client area", to: "/client", icon: UserIcon }],
-] as const;
+] satisfies NavItem[][];
 
 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 crumbs = useMatches().flatMap((match) => (match.staticData.crumb ? [match.staticData.crumb] : []));
 
   return (
-    <div className="flex h-screen flex-col">
-      <header className="flex h-12 shrink-0 items-center justify-between border-b border-border px-4">
-        <div className="flex items-center gap-2">
-          <Link to="/admin" className="text-sm font-semibold tracking-tight">
+    <DashboardLayout
+      user={user}
+      home="/admin"
+      navLabel="Admin"
+      navGroups={NAV_GROUPS}
+      title={
+        <nav aria-label="Breadcrumb" className="flex min-w-0 items-center gap-2 text-[13px]">
+          <Link to="/admin" className="font-semibold tracking-tight">
             Naplata
           </Link>
-          <span className="bg-muted px-1.5 text-[10px] font-medium text-muted-foreground">Admin</span>
-        </div>
-
-        <div className="flex items-center gap-3">
-          <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>
-          </div>
-          <span className="grid size-8 place-items-center border border-border bg-muted text-xs font-medium">
-            {initials}
-          </span>
-          <Link
-            to="/logout"
-            aria-label="Sign out"
-            title="Sign out"
-            className="grid size-8 place-items-center text-muted-foreground transition-colors hover:text-foreground"
-          >
-            <HugeiconsIcon icon={Logout03Icon} className="size-4" />
-          </Link>
-        </div>
-      </header>
-
-      <div className="flex min-h-0 flex-1">
-        <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"
-            >
-              {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"
-                >
-                  <HugeiconsIcon icon={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>
+          {crumbs.map((crumb, index) => (
+            <span key={crumb} className="contents">
+              <span aria-hidden="true" className="text-muted-foreground/50">/</span>
+              <span
+                aria-current={index === crumbs.length - 1 ? "page" : undefined}
+                className={cn("truncate", index === crumbs.length - 1 ? "text-foreground" : "text-muted-foreground")}
+              >
+                {crumb}
+              </span>
+            </span>
           ))}
         </nav>
-
-        <main className="min-w-0 flex-1 overflow-auto p-6">
-          <Outlet />
-        </main>
-      </div>
-    </div>
+      }
+    >
+      <Outlet />
+    </DashboardLayout>
   );
 }
diff --git a/web/src/routes/admin/services.tsx b/web/src/routes/admin/services.tsx
index 9a00828..adaa23c 100644
--- a/web/src/routes/admin/services.tsx
+++ b/web/src/routes/admin/services.tsx
@@ -1,13 +1,11 @@
-import { createFileRoute, redirect } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
 
 import { Permission } from '@/api/auth/permissions'
+import { requirePermission } from '@/lib/require-permission'
 
 export const Route = createFileRoute('/admin/services')({
-  beforeLoad: ({ context }) => {
-    if (!context.user.permissions.includes(Permission.ServicesManage)) {
-      throw redirect({ to: '/admin' })
-    }
-  },
+  staticData: { crumb: 'Services' },
+  beforeLoad: requirePermission(Permission.ServicesManage),
   component: RouteComponent,
 })
 
diff --git a/web/src/routes/admin/settings.tsx b/web/src/routes/admin/settings.tsx
index 5ae8b78..d79d294 100644
--- a/web/src/routes/admin/settings.tsx
+++ b/web/src/routes/admin/settings.tsx
@@ -1,13 +1,11 @@
-import { createFileRoute, redirect } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
 
 import { Permission } from '@/api/auth/permissions'
+import { requirePermission } from '@/lib/require-permission'
 
 export const Route = createFileRoute('/admin/settings')({
-  beforeLoad: ({ context }) => {
-    if (!context.user.permissions.includes(Permission.SettingsManage)) {
-      throw redirect({ to: '/admin' })
-    }
-  },
+  staticData: { crumb: 'Settings' },
+  beforeLoad: requirePermission(Permission.SettingsManage),
   component: RouteComponent,
 })
 
diff --git a/web/src/routes/client/route.tsx b/web/src/routes/client/route.tsx
index 9ec7323..b04ff41 100644
--- a/web/src/routes/client/route.tsx
+++ b/web/src/routes/client/route.tsx
@@ -3,7 +3,27 @@ import { Link, Outlet, createFileRoute, redirect, useRouterState } from "@tansta
 import { meQuery } from "@/api/auth/me";
 import { Permission } from "@/api/auth/permissions";
 import { TEMP_SERVICES, type ServiceStatus } from "@/api/services/services";
-import { HugeiconsIcon, Activity01Icon, Add01Icon, ArrowDataTransferHorizontalIcon, BookOpen01Icon, CreditCardIcon, CustomerSupportIcon, DashboardSquare01Icon, FileEditIcon, HandshakeIcon, Invoice01Icon, Logout03Icon, Megaphone01Icon, SecurityCheckIcon, ServerStack01Icon, ShieldUserIcon, ShoppingCart01Icon, UserCircleIcon, Wallet01Icon } from "@/components/icons";
+import { DashboardLayout, type NavItem } from "@/components/dashboard/dashboard-layout";
+import {
+  Activity01Icon,
+  Add01Icon,
+  ArrowDataTransferHorizontalIcon,
+  BookOpen01Icon,
+  CreditCardIcon,
+  CustomerSupportIcon,
+  DashboardSquare01Icon,
+  FileEditIcon,
+  HandshakeIcon,
+  HugeiconsIcon,
+  Invoice01Icon,
+  Megaphone01Icon,
+  SecurityCheckIcon,
+  ServerStack01Icon,
+  ShieldUserIcon,
+  ShoppingCart01Icon,
+  UserCircleIcon,
+  Wallet01Icon,
+} from "@/components/icons";
 import { cn } from "@/lib/utils";
 
 export const Route = createFileRoute("/client")({
@@ -42,7 +62,7 @@ const NAV_GROUPS = [
     { label: "Security", to: "/client/security", icon: SecurityCheckIcon },
     { label: "Account", to: "/client/account", icon: UserCircleIcon },
   ],
-] as const;
+] satisfies NavItem[][];
 
 const STATUS_CLASS: Record<ServiceStatus, string> = {
   active: "bg-success",
@@ -52,72 +72,27 @@ const STATUS_CLASS: Record<ServiceStatus, string> = {
 
 function ClientLayout() {
   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 pathname = useRouterState({ select: (state) => state.location.pathname });
   const inServices = pathname === "/client/services" || pathname.startsWith("/client/services/");
 
   return (
-    <div className="flex h-screen flex-col">
-      <header className="flex h-12 shrink-0 items-center justify-between border-b border-border px-4">
+    <DashboardLayout
+      user={user}
+      home="/client"
+      navLabel="Dashboard"
+      navGroups={NAV_GROUPS}
+      account="/client/account"
+      title={
         <Link to="/client" className="text-sm font-semibold tracking-tight">
           Naplata
         </Link>
-
-        <div className="flex items-center gap-3">
-          <Link to="/client/account" aria-label="Account settings" className="group flex items-center gap-3">
-            <div className="hidden text-right leading-tight sm:block">
-              <p className="text-[13px] font-medium">{name}</p>
-              <p className="text-[11px] text-muted-foreground transition-colors group-hover:text-foreground">{user.email}</p>
-            </div>
-            <span className="grid size-8 place-items-center border border-border bg-muted text-xs font-medium transition-colors group-hover:border-ring">
-              {initials}
-            </span>
-          </Link>
-          <Link
-            to="/logout"
-            aria-label="Sign out"
-            title="Sign out"
-            className="grid size-8 place-items-center text-muted-foreground transition-colors hover:text-foreground"
-          >
-            <HugeiconsIcon icon={Logout03Icon} className="size-4" />
-          </Link>
-        </div>
-      </header>
-
-      <div className="flex min-h-0 flex-1">
-        <nav aria-label="Dashboard" 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"
-            >
-              {group.filter((item) => !("permission" in item) || user.permissions.includes(item.permission)).map((item) => (
-                <Link
-                  key={item.to}
-                  to={item.to}
-                  activeOptions={{ exact: item.to === "/client" }}
-                  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"
-                >
-                  <HugeiconsIcon icon={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>
-
-        {inServices && (
+      }
+      panel={
+        inServices && (
           <nav aria-label="Services" className="hidden w-60 shrink-0 flex-col border-r border-border md:flex">
             <div className="flex h-10 shrink-0 items-center gap-2 border-b border-border pr-1.5 pl-3">
-              <p className="text-[13px] font-medium">Services</p>
-              <span className="bg-muted px-1.5 text-[11px] text-muted-foreground tabular-nums">{TEMP_SERVICES.length}</span>
+              <p className="label text-foreground">Services</p>
+              <span className="bg-muted px-1.5 font-mono text-[10px] text-muted-foreground">{TEMP_SERVICES.length}</span>
               <Link
                 to="/client/store"
                 aria-label="Order a service"
@@ -142,18 +117,16 @@ function ClientLayout() {
                   <span
                     role="img"
                     aria-label={service.status}
-                    className={cn("mt-1.5 size-1.5 shrink-0 rounded-full", STATUS_CLASS[service.status])}
+                    className={cn("mt-1.5 size-1.5 shrink-0", STATUS_CLASS[service.status])}
                   />
                 </Link>
               ))}
             </div>
           </nav>
-        )}
-
-        <main className="min-w-0 flex-1 overflow-auto p-6">
-          <Outlet />
-        </main>
-      </div>
-    </div>
+        )
+      }
+    >
+      <Outlet />
+    </DashboardLayout>
   );
 }
diff --git a/web/src/routes/index.tsx b/web/src/routes/index.tsx
index c5dc5b8..3525688 100644
--- a/web/src/routes/index.tsx
+++ b/web/src/routes/index.tsx
@@ -24,7 +24,7 @@ function Index() {
       <header className="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur-md supports-backdrop-filter:bg-background/70">
         <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
           <div className="flex items-center gap-8">
-            <Link to="/" className="text-sm font-semibold tracking-tight">
+            <Link to="/" className="flex items-center gap-2 text-sm font-semibold tracking-tight">
               Naplata
             </Link>
 
@@ -78,11 +78,17 @@ function Index() {
         </nav>
       </header>
 
-      <main className="mx-auto max-w-6xl px-6 py-8">
+      <main className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
+        <p className="label mb-4 text-accent">Billing platform</p>
         <h1 className="text-[40px]/[1.08] font-semibold tracking-[-0.028em] text-balance sm:text-5xl/[1.06] lg:text-[64px]/[67px]">
           Naplata
         </h1>
+        <p className="mt-4 max-w-md text-base text-muted-foreground">
+          Billing and client management for hosting providers.
+        </p>
       </main>
+
+      <div aria-hidden="true" className="pointer-events-none fixed inset-x-0 bottom-0 -z-10 h-48 bg-primary/60 dither-fade-b dither-scale-3" />
     </div>
   );
 }