diff --git a/app/apps/page.tsx b/app/apps/page.tsx
new file mode 100644
index 0000000..13b88b4
--- /dev/null
+++ b/app/apps/page.tsx
@@ -0,0 +1,71 @@
+import { redirect } from "next/navigation";
+import { AppShell } from "@/components/AppShell";
+import { Section, Row, RowLabel, RowValue, Empty } from "@/components/Section";
+import { getCurrentSession } from "@/lib/server/session";
+import { listAuthorizationsForUser } from "@/lib/server/repositories/authorizations";
+import { revokeAppAction } from "@/app/dashboard-actions";
+import { revokeAllOAuthGrantsAction } from "@/app/security/actions";
+
+export const dynamic = "force-dynamic";
+
+function shortDate(value: string | null) {
+  return value ? value.slice(0, 10) : "never";
+}
+
+export default async function ConnectedAppsPage() {
+  const current = await getCurrentSession();
+  if (!current) redirect("/login");
+  const u = current.user;
+  const apps = await listAuthorizationsForUser(u.id);
+
+  return (
+    <AppShell
+      user={{ name: u.firstName, username: u.username }}
+      trail="Connected apps"
+      isAdmin={u.role === "admin"}
+    >
+      <header data-mount-row className="mb-6">
+        <h1 className="text-[24px] tracking-tight text-fg leading-none mb-1">Connected apps</h1>
+        <p className="text-[13px] text-muted">External apps with access to your account</p>
+      </header>
+
+      <Section
+        title="Connected apps"
+        hint="OAuth grants"
+        action={
+          apps.length > 0 ? (
+            <form action={revokeAllOAuthGrantsAction}>
+              <button className="text-[13px] text-secondary hover:text-danger transition-colors">
+                Revoke all
+              </button>
+            </form>
+          ) : undefined
+        }
+      >
+        {apps.length === 0 ? (
+          <Empty>No connected apps</Empty>
+        ) : (
+          apps.map(app => (
+            <Row key={app.appSlug}>
+              <RowLabel>{app.appName}</RowLabel>
+              <RowValue>
+                <span className="text-secondary truncate">{app.scopes.join(", ")}</span>
+                <span className="text-muted">·</span>
+                <span className="text-muted">Since {shortDate(app.createdAt)}</span>
+              </RowValue>
+              <form action={revokeAppAction}>
+                <input type="hidden" name="appSlug" value={app.appSlug} />
+                <button
+                  type="submit"
+                  className="text-[13px] text-secondary hover:text-danger transition-colors"
+                >
+                  Revoke
+                </button>
+              </form>
+            </Row>
+          ))
+        )}
+      </Section>
+    </AppShell>
+  );
+}
diff --git a/app/bearers/page.tsx b/app/bearers/page.tsx
new file mode 100644
index 0000000..cdf14a4
--- /dev/null
+++ b/app/bearers/page.tsx
@@ -0,0 +1,40 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { AppShell } from "@/components/AppShell";
+import { BearerSection } from "@/components/BearerSection";
+import { getCurrentSession } from "@/lib/server/session";
+import { listBearerRequestsForUser } from "@/lib/server/repositories/bearerRequests";
+
+export const dynamic = "force-dynamic";
+
+export default async function BearersPage() {
+  const current = await getCurrentSession();
+  if (!current) redirect("/login");
+  const u = current.user;
+  const bearers = await listBearerRequestsForUser(u.id);
+
+  return (
+    <AppShell
+      user={{ name: u.firstName, username: u.username }}
+      trail="API bearers"
+      isAdmin={u.role === "admin"}
+    >
+      <header data-mount-row className="mb-6 flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-[24px] tracking-tight text-fg leading-none mb-1">API bearers</h1>
+          <p className="text-[13px] text-muted">Long-lived tokens for server-to-server access</p>
+        </div>
+        <Link
+          href="/request-bearer"
+          className="shrink-0 inline-flex items-center h-9 px-4 rounded-md bg-accent text-fg text-[13px] font-medium hover:brightness-95 transition"
+        >
+          Request bearer
+        </Link>
+      </header>
+
+      <div data-mount-row>
+        <BearerSection bearers={bearers} />
+      </div>
+    </AppShell>
+  );
+}
diff --git a/app/dashboard-actions.ts b/app/dashboard-actions.ts
index 0e4de38..aacea52 100644
--- a/app/dashboard-actions.ts
+++ b/app/dashboard-actions.ts
@@ -25,7 +25,7 @@ export async function revokeSessionAction(formData: FormData) {
   if (isNaN(sessionId)) return;
 
   await revokeSessionById(sessionId, current.user.id);
-  revalidatePath("/");
+  revalidatePath("/", "layout");
 }
 
 export async function revokeAppAction(formData: FormData) {
@@ -41,7 +41,7 @@ export async function revokeAppAction(formData: FormData) {
   await revokeAuthorization(current.user.id, app.id);
   await revokeAccessTokensForRefreshGrant({ appId: app.id, userId: current.user.id });
   await revokeRefreshTokensByUserAndApp({ appId: app.id, userId: current.user.id });
-  revalidatePath("/");
+  revalidatePath("/", "layout");
 }
 
 export async function revokePasskeyAction(formData: FormData) {
@@ -61,7 +61,7 @@ export async function revokePasskeyAction(formData: FormData) {
       metadata: { credentialId },
     });
   }
-  revalidatePath("/");
+  revalidatePath("/", "layout");
 }
 
 export async function cancelSubscriptionAction(formData: FormData) {
@@ -72,5 +72,5 @@ export async function cancelSubscriptionAction(formData: FormData) {
   if (typeof product !== "string") return;
 
   await cancelSubscription(current.user.id, product);
-  revalidatePath("/");
+  revalidatePath("/", "layout");
 }
diff --git a/app/events/page.tsx b/app/events/page.tsx
new file mode 100644
index 0000000..2092eda
--- /dev/null
+++ b/app/events/page.tsx
@@ -0,0 +1,50 @@
+import { redirect } from "next/navigation";
+import { AppShell } from "@/components/AppShell";
+import { Section, Empty } from "@/components/Section";
+import { getCurrentSession } from "@/lib/server/session";
+import { recentEventsForUser } from "@/lib/server/repositories/securityEvents";
+
+export const dynamic = "force-dynamic";
+
+export default async function EventsPage() {
+  const current = await getCurrentSession();
+  if (!current) redirect("/login");
+  const u = current.user;
+  const events = await recentEventsForUser(u.id);
+
+  return (
+    <AppShell
+      user={{ name: u.firstName, username: u.username }}
+      trail="Recent events"
+      isAdmin={u.role === "admin"}
+    >
+      <header data-mount-row className="mb-6">
+        <h1 className="text-[24px] tracking-tight text-fg leading-none mb-1">Recent events</h1>
+        <p className="text-[13px] text-muted">Security activity on your account</p>
+      </header>
+
+      <Section title="Recent events" hint="Last security activity">
+        {events.length === 0 ? (
+          <Empty>No recent events</Empty>
+        ) : (
+          <ul>
+            {events.map((event, index) => (
+              <li
+                key={`${event.created_at}-${index}`}
+                className="grid grid-cols-[180px_1fr_auto] gap-4 px-4 py-2.5 items-baseline border-t border-rule first:border-t-0 text-[13px]"
+              >
+                <span className="text-muted tabular-nums">
+                  {event.created_at.slice(0, 16).replace("T", " ")}
+                </span>
+                <span className="text-fg">{event.event_type}</span>
+                <span className="text-[12px] text-muted truncate max-w-[280px]">
+                  {event.ip || event.result}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </Section>
+    </AppShell>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
index 4075091..6c30dea 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,357 +1,146 @@
+import Link from "next/link";
 import { redirect } from "next/navigation";
-import { BearerSection } from "@/components/BearerSection";
+import { ArrowRight } from "lucide-react";
 import { AppShell } from "@/components/AppShell";
-import { Section, Row, RowLabel, RowValue, Empty } from "@/components/Section";
 import { Tag } from "@/components/Tag";
 import { getCurrentSession } from "@/lib/server/session";
 import { getDashboard } from "@/lib/server/services/dashboard";
-import {
-  revokeSessionAction,
-  revokeAppAction,
-  cancelSubscriptionAction,
-} from "./dashboard-actions";
 import { findWebauthnCredentialsByUser } from "@/lib/server/repositories/webauthn";
-import { PasskeyManager } from "@/components/PasskeyManager";
 
 export const dynamic = "force-dynamic";
 
 function statusTone(status: string) {
-  return status === "active"
-    ? "success"
-    : status === "banned"
-      ? "danger"
-      : "warning";
+  return status === "active" ? "success" : status === "banned" ? "danger" : "warning";
 }
 
 function shortDate(value: string | null) {
-  if (!value) return "never";
-  return value.slice(0, 10);
+  return value ? value.slice(0, 10) : "never";
 }
 
-export default async function DashboardPage() {
-  const current = await getCurrentSession();
-  if (!current) {
-    redirect("/login");
-  }
+function Card({
+  title,
+  href,
+  children,
+}: {
+  title: string;
+  href?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="rounded-lg bg-card ring-1 ring-rule shadow-xs overflow-hidden flex flex-col">
+      <header className="h-12 px-4 flex items-center justify-between bg-elevated border-b border-rule">
+        <h3 className="text-[14px] font-medium text-fg">{title}</h3>
+        {href && (
+          <Link
+            href={href}
+            className="text-[12px] text-secondary hover:text-accent-strong transition-colors inline-flex items-center gap-1"
+          >
+            View <ArrowRight size={12} />
+          </Link>
+        )}
+      </header>
+      <div className="flex-1">{children}</div>
+    </div>
+  );
+}
+
+function CardRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between gap-3 px-4 py-2.5 border-t border-rule first:border-t-0 text-[13px]">
+      <span className="text-muted shrink-0">{label}</span>
+      <span className="text-fg text-right truncate">{value}</span>
+    </div>
+  );
+}
 
-  const dashboard = await getDashboard(current.user);
-  const account = dashboard.account;
-  const webauthnCredentials = await findWebauthnCredentialsByUser(
-    current.user.id,
+function NextStep({ href, label }: { href: string; label: string }) {
+  return (
+    <Link
+      href={href}
+      className="flex items-center justify-between gap-3 px-4 py-3 border-t border-rule first:border-t-0 text-[13px] text-fg hover:bg-hover transition-colors group"
+    >
+      <span>{label}</span>
+      <ArrowRight size={14} className="text-faint group-hover:text-accent-strong transition-colors" />
+    </Link>
   );
+}
+
+export default async function AccountHomePage() {
+  const current = await getCurrentSession();
+  if (!current) redirect("/login");
 
-  const stats = [
-    { label: "subscriptions", value: dashboard.stats.subscriptions, hint: "active" },
-    { label: "apps", value: dashboard.stats.apps, hint: "connected" },
-    { label: "sessions", value: dashboard.stats.sessions, hint: "active" },
-    { label: "activations", value: dashboard.stats.activations, hint: "recent" },
-  ];
+  const u = current.user;
+  const [dashboard, passkeys] = await Promise.all([
+    getDashboard(u),
+    findWebauthnCredentialsByUser(u.id),
+  ]);
+  const { stats, events, apps, sessions } = dashboard;
+  const hasTelegram = !!u.telegramVerifiedAt;
 
   return (
     <AppShell
-      user={{ name: account.firstName, username: account.username }}
-      trail="Account"
-      isAdmin={current.user.role === "admin"}
+      user={{ name: u.firstName, username: u.username }}
+      trail="Account home"
+      isAdmin={u.role === "admin"}
     >
-          <header data-mount-row className="mb-8">
-            <div className="flex items-baseline gap-3 flex-wrap mb-3">
-              <h1 className="text-[32px] tracking-tight text-fg leading-none">
-                {account.firstName}
-              </h1>
-              <span className="text-faint text-[24px] leading-none">/</span>
-              <span className="text-[24px] text-secondary leading-none">
-                @{account.username}
-              </span>
-            </div>
-            <div className="flex items-center gap-3 flex-wrap">
-              <Tag tone={statusTone(account.status)}>{account.status}</Tag>
-              <Tag tone={account.telegramVerifiedAt ? "success" : "warning"}>
-                {account.telegramVerifiedAt ? "Telegram verified" : "Telegram unverified"}
-              </Tag>
-            </div>
-          </header>
-
-          <div
-            data-mount-row
-            className="bg-card ring-1 ring-rule shadow-xs rounded-lg grid grid-cols-2 md:grid-cols-4 mb-6"
-          >
-            {stats.map((stat, i) => (
+      <header data-mount-row className="mb-8">
+        <h1 className="text-[28px] tracking-tight text-fg leading-none mb-3">Account home</h1>
+        <div className="flex items-center gap-3 flex-wrap">
+          <span className="text-[14px] text-secondary">
+            Signed in as {u.firstName} (@{u.username})
+          </span>
+          <Tag tone={statusTone(u.status)}>{u.status}</Tag>
+          <Tag tone={hasTelegram ? "success" : "warning"}>
+            {hasTelegram ? "Telegram verified" : "Telegram unverified"}
+          </Tag>
+        </div>
+      </header>
+
+      <div data-mount-row className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+        <Card title="Account" href="/profile">
+          <CardRow label="Status" value={<Tag tone={statusTone(u.status)}>{u.status}</Tag>} />
+          <CardRow label="Telegram" value={hasTelegram ? "Verified" : "Not linked"} />
+          <CardRow label="Username" value={`@${u.username}`} />
+        </Card>
+        <Card title="Security" href="/security">
+          <CardRow label="Active sessions" value={stats.sessions} />
+          <CardRow label="Passkeys" value={passkeys.length} />
+          <CardRow label="Password" value="Enabled" />
+        </Card>
+        <Card title="Access" href="/apps">
+          <CardRow label="Connected apps" value={stats.apps} />
+          <CardRow label="Subscriptions" value={stats.subscriptions} />
+          <CardRow label="API bearers" value={dashboard.bearers.length} />
+        </Card>
+      </div>
+
+      <div data-mount-row className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Card title="Recent activity" href="/events">
+          {events.length === 0 ? (
+            <div className="px-4 py-8 text-[13px] text-muted text-center">No recent events</div>
+          ) : (
+            events.slice(0, 6).map((event, i) => (
               <div
-                key={stat.label}
-                className={`px-5 py-5 ${i > 0 ? "md:border-l border-rule" : ""}`}
+                key={`${event.created_at}-${i}`}
+                className="flex items-center justify-between gap-3 px-4 py-2.5 border-t border-rule first:border-t-0 text-[13px]"
               >
-                <div className="text-[12px] text-muted mb-1">
-                  {stat.label.charAt(0).toUpperCase() + stat.label.slice(1)}
-                </div>
-                <div className="flex items-baseline gap-2">
-                  <span className="text-[34px] text-accent-strong tabular-nums leading-none">
-                    {String(stat.value).padStart(2, "0")}
-                  </span>
-                  <span className="text-[13px] text-faint">{stat.hint}</span>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <div id="profile" />
-          <div data-mount-row>
-            <Section title="Profile" hint="Account fields" index="1.0">
-              <Row>
-                <RowLabel>First name</RowLabel>
-                <RowValue>{account.firstName}</RowValue>
-                <span />
-              </Row>
-              <Row>
-                <RowLabel>Username</RowLabel>
-                <RowValue>@{account.username}</RowValue>
-                <span />
-              </Row>
-              <Row>
-                <RowLabel>Bio</RowLabel>
-                <RowValue>{account.bio || "Not set"}</RowValue>
-                <span className="text-[12px] text-ok">
-                  Public
+                <span className="text-fg truncate">{event.event_type}</span>
+                <span className="text-[12px] text-muted tabular-nums shrink-0">
+                  {event.created_at.slice(0, 10)}
                 </span>
-              </Row>
-              <Row>
-                <RowLabel>Email</RowLabel>
-                <RowValue privateField>{account.email}</RowValue>
-                <span />
-              </Row>
-              <Row>
-                <RowLabel>Date of birth</RowLabel>
-                <RowValue privateField>{account.dob || "Not set"}</RowValue>
-                <span />
-              </Row>
-              <Row>
-                <RowLabel>Telegram</RowLabel>
-                <RowValue>
-                  {account.telegramUsername
-                    ? `@${account.telegramUsername}`
-                    : account.telegramId || "Not linked"}
-                </RowValue>
-                <a
-                  href="/relink"
-                  className="text-[13px] text-secondary hover:text-accent-strong transition-colors"
-                >
-                  Relink
-                </a>
-              </Row>
-            </Section>
-          </div>
-
-          <div id="subscriptions" />
-          <div data-mount-row>
-            <Section
-              title="Subscriptions"
-              hint="Products you pay for"
-              index="2.0"
-            >
-              {dashboard.subscriptions.length === 0 ? (
-                <Empty>No active subscriptions</Empty>
-              ) : (
-                dashboard.subscriptions.map(subscription => (
-                  <Row
-                    key={`${subscription.product}-${subscription.expiresAt || "open"}`}
-                  >
-                    <RowLabel>{subscription.product}</RowLabel>
-                    <RowValue>
-                      <Tag
-                        tone={
-                          subscription.status === "revoked" ? "danger" : "success"
-                        }
-                      >
-                        {subscription.status}
-                      </Tag>
-                      <span className="text-muted">·</span>
-                      <span className="text-secondary">
-                        Expires {shortDate(subscription.expiresAt)}
-                      </span>
-                    </RowValue>
-                    <form action={cancelSubscriptionAction}>
-                      <input
-                        type="hidden"
-                        name="product"
-                        value={subscription.product}
-                      />
-                      <button
-                        type="submit"
-                        className="text-[13px] text-secondary hover:text-danger transition-colors"
-                      >
-                        Cancel
-                      </button>
-                    </form>
-                  </Row>
-                ))
-              )}
-            </Section>
-          </div>
-
-          <div id="apps" />
-          <div data-mount-row>
-            <Section
-              title="Connected apps"
-              hint="External apps with access"
-              index="3.0"
-            >
-              {dashboard.apps.length === 0 ? (
-                <Empty>No connected apps</Empty>
-              ) : (
-                dashboard.apps.map(app => (
-                  <Row key={app.appSlug}>
-                    <RowLabel>{app.appName}</RowLabel>
-                    <RowValue>
-                      <span className="text-secondary truncate">
-                        {app.scopes.join(", ")}
-                      </span>
-                      <span className="text-muted">·</span>
-                      <span className="text-muted">
-                        Since {shortDate(app.createdAt)}
-                      </span>
-                    </RowValue>
-                    <form action={revokeAppAction}>
-                      <input
-                        type="hidden"
-                        name="appSlug"
-                        value={app.appSlug}
-                      />
-                      <button
-                        type="submit"
-                        className="text-[13px] text-secondary hover:text-danger transition-colors"
-                      >
-                        Revoke
-                      </button>
-                    </form>
-                  </Row>
-                ))
-              )}
-            </Section>
-          </div>
-
-          <div id="bearers" />
-          <div data-mount-row>
-            <BearerSection bearers={dashboard.bearers} />
-          </div>
-
-          <div id="sessions" />
-          <div data-mount-row>
-            <Section
-              title="Sessions"
-              hint="Devices currently signed in"
-              index="4.0"
-            >
-              {dashboard.sessions.map(session => (
-                <Row key={session.id}>
-                  <RowLabel>{session.userAgent || "Unknown browser"}</RowLabel>
-                  <RowValue>
-                    <span className="text-secondary truncate">
-                      {session.ip || "Unknown IP"}
-                    </span>
-                    <span className="text-muted">·</span>
-                    <span className="text-muted">
-                      {shortDate(session.lastSeenAt)}
-                    </span>
-                    {session.id === current.session.id && (
-                      <Tag tone="success">This device</Tag>
-                    )}
-                  </RowValue>
-                  <form action={revokeSessionAction}>
-                    <input
-                      type="hidden"
-                      name="sessionId"
-                      value={session.id}
-                    />
-                    <button
-                      type="submit"
-                      className="text-[13px] text-secondary hover:text-danger transition-colors disabled:text-faint disabled:hover:text-faint disabled:cursor-not-allowed"
-                      disabled={session.id === current.session.id}
-                    >
-                      Revoke
-                    </button>
-                  </form>
-                </Row>
-              ))}
-            </Section>
-          </div>
-
-          <div id="security" />
-          <div data-mount-row>
-            <Section title="Security" hint="Authentication" index="5.0">
-              <Row>
-                <RowLabel>Password</RowLabel>
-                <RowValue>Enabled</RowValue>
-                <button className="text-[13px] text-secondary hover:text-accent-strong transition-colors">
-                  Change
-                </button>
-              </Row>
-              <Row>
-                <RowLabel>Telegram 2FA</RowLabel>
-                <RowValue>
-                  {account.telegramVerifiedAt
-                    ? `Enabled ${shortDate(account.telegramVerifiedAt)}`
-                    : "Not linked"}
-                </RowValue>
-                <a
-                  href="/relink"
-                  className="text-[13px] text-secondary hover:text-accent-strong transition-colors"
-                >
-                  Relink
-                </a>
-              </Row>
-            </Section>
-          </div>
-
-          <div id="passkeys" />
-          <div data-mount-row>
-            <Section
-              title="Passkeys"
-              hint="Passwordless sign in"
-              index="5.1"
-            >
-              <PasskeyManager
-                passkeys={webauthnCredentials.map(c => ({
-                  id: c.credentialId,
-                  name: c.name || "Unknown Device",
-                  lastUsed: c.lastUsedAt,
-                }))}
-              />
-            </Section>
-          </div>
-
-          <div id="events" />
-          <div data-mount-row>
-            <Section
-              title="Recent events"
-              hint="Last security activity"
-              index="6.0"
-            >
-              {dashboard.events.length === 0 ? (
-                <Empty>No recent events</Empty>
-              ) : (
-                <ul className="text-[12.5px]">
-                  {dashboard.events.map((event, index) => (
-                    <li
-                      key={`${event.created_at}-${index}`}
-                      className="grid grid-cols-[180px_1fr_auto] gap-4 px-1 py-2.5 items-baseline border-t border-rule first:border-t-0"
-                    >
-                      <span className="text-muted tabular-nums">
-                        {event.created_at.slice(0, 16).replace("T", " ")}
-                      </span>
-                      <span className="text-fg">{event.event_type}</span>
-                      <span className="text-[12px] text-muted truncate max-w-[280px]">
-                        {event.ip || event.result}
-                      </span>
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </Section>
-          </div>
-
-          <footer className="mt-12 pt-5 border-t border-rule text-[13px] text-faint flex items-center justify-between">
-            <span>bottleneck</span>
-            <span className="tabular-nums">auth.bneck.com</span>
-          </footer>
+              </div>
+            ))
+          )}
+        </Card>
+
+        <Card title="Next steps">
+          {!hasTelegram && <NextStep href="/relink" label="Enable Telegram 2FA" />}
+          {passkeys.length === 0 && <NextStep href="/security" label="Add a passkey for passwordless sign in" />}
+          {apps.length > 0 && <NextStep href="/apps" label="Review connected apps" />}
+          {sessions.length > 1 && <NextStep href="/sessions" label="Check your active sessions" />}
+          <NextStep href="/request-bearer" label="Request an API bearer token" />
+        </Card>
+      </div>
     </AppShell>
   );
 }
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
new file mode 100644
index 0000000..321c057
--- /dev/null
+++ b/app/profile/page.tsx
@@ -0,0 +1,50 @@
+import { redirect } from "next/navigation";
+import { AppShell } from "@/components/AppShell";
+import { Section, Row, RowLabel, RowValue } from "@/components/Section";
+import { getCurrentSession } from "@/lib/server/session";
+
+export const dynamic = "force-dynamic";
+
+export default async function ProfilePage() {
+  const current = await getCurrentSession();
+  if (!current) redirect("/login");
+  const u = current.user;
+
+  return (
+    <AppShell
+      user={{ name: u.firstName, username: u.username }}
+      trail="Profile"
+      isAdmin={u.role === "admin"}
+    >
+      <header data-mount-row className="mb-6">
+        <h1 className="text-[24px] tracking-tight text-fg leading-none mb-1">Profile</h1>
+        <p className="text-[13px] text-muted">Your account details</p>
+      </header>
+
+      <Section title="Profile" hint="Account fields">
+        <Row><RowLabel>First name</RowLabel><RowValue>{u.firstName}</RowValue><span /></Row>
+        <Row><RowLabel>Username</RowLabel><RowValue>@{u.username}</RowValue><span /></Row>
+        <Row>
+          <RowLabel>Bio</RowLabel>
+          <RowValue>{u.bio || "Not set"}</RowValue>
+          <span className="text-[12px] text-ok">Public</span>
+        </Row>
+        <Row><RowLabel>Email</RowLabel><RowValue privateField>{u.email}</RowValue><span /></Row>
+        <Row>
+          <RowLabel>Date of birth</RowLabel>
+          <RowValue privateField>{u.dob || "Not set"}</RowValue>
+          <span />
+        </Row>
+        <Row>
+          <RowLabel>Telegram</RowLabel>
+          <RowValue>
+            {u.telegramUsername ? `@${u.telegramUsername}` : u.telegramId || "Not linked"}
+          </RowValue>
+          <a href="/relink" className="text-[13px] text-secondary hover:text-accent-strong transition-colors">
+            Relink
+          </a>
+        </Row>
+      </Section>
+    </AppShell>
+  );
+}
diff --git a/app/security/actions.ts b/app/security/actions.ts
index 8e15ede..e3f33f1 100644
--- a/app/security/actions.ts
+++ b/app/security/actions.ts
@@ -26,8 +26,7 @@ export async function revokeOtherSessionsAction() {
     result: "revoked_other_sessions",
     context: requestContextFromHeaders(await headers()),
   });
-  revalidatePath("/security");
-  revalidatePath("/");
+  revalidatePath("/", "layout");
 }
 
 // CSRF is covered by Next.js server-action origin verification plus the
@@ -77,6 +76,5 @@ export async function revokeAllOAuthGrantsAction() {
     result: "revoked_all_grants",
     context: requestContextFromHeaders(await headers()),
   });
-  revalidatePath("/security");
-  revalidatePath("/");
+  revalidatePath("/", "layout");
 }
diff --git a/app/security/page.tsx b/app/security/page.tsx
index e4d589e..f333329 100644
--- a/app/security/page.tsx
+++ b/app/security/page.tsx
@@ -1,232 +1,72 @@
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { AppShell } from "@/components/AppShell";
 import { PasskeyManager } from "@/components/PasskeyManager";
 import { ChangePasswordForm } from "@/components/ChangePasswordForm";
-import { Section, Row, RowLabel, RowValue, Empty } from "@/components/Section";
-import { AppShell } from "@/components/AppShell";
-import { Tag } from "@/components/Tag";
-import { findWebauthnCredentialsByUser } from "@/lib/server/repositories/webauthn";
+import { Section, Row, RowLabel, RowValue } from "@/components/Section";
 import { getCurrentSession } from "@/lib/server/session";
-import { getDashboard } from "@/lib/server/services/dashboard";
-import {
-  changePasswordAction,
-  revokeAllOAuthGrantsAction,
-  revokeOtherSessionsAction,
-} from "./actions";
+import { findWebauthnCredentialsByUser } from "@/lib/server/repositories/webauthn";
+import { changePasswordAction } from "./actions";
 
 export const dynamic = "force-dynamic";
 
 function shortDate(value: string | null) {
-  return value ? value.slice(0, 16).replace("T", " ") : "never";
+  return value ? value.slice(0, 10) : "never";
 }
 
-export default async function SecurityCenterPage() {
+export default async function SecurityPage() {
   const current = await getCurrentSession();
-  if (!current) {
-    redirect("/login?next=/security");
-  }
-
-  const [dashboard, passkeys] = await Promise.all([
-    getDashboard(current.user),
-    findWebauthnCredentialsByUser(current.user.id),
-  ]);
-
-  const hasTelegram = Boolean(current.user.telegramVerifiedAt);
+  if (!current) redirect("/login");
+  const u = current.user;
+  const passkeys = await findWebauthnCredentialsByUser(u.id);
+  const hasTelegram = !!u.telegramVerifiedAt;
 
   return (
     <AppShell
-      user={{ name: current.user.firstName, username: current.user.username }}
-      trail="Security center"
-      isAdmin={current.user.role === "admin"}
+      user={{ name: u.firstName, username: u.username }}
+      trail="Password & 2FA"
+      isAdmin={u.role === "admin"}
     >
-          <header className="mb-10" data-mount-row>
-            <div className="flex items-baseline gap-2 mb-2">
-              <Tag tone={hasTelegram ? "success" : "warning"}>
-                {hasTelegram ? "2FA enabled" : "2FA missing"}
-              </Tag>
-            </div>
-            <h1 className="text-[32px] tracking-tight text-fg leading-none mb-3">
-              Security center
-            </h1>
-            <p className="text-[14px] text-muted max-w-prose">
-              Sessions, OAuth grants, passkeys, Telegram 2FA, and recent
-              security activity.
-            </p>
-          </header>
-
-          <div
-            className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12 bg-card border border-rule rounded-lg"
-            data-mount-row
-          >
-            {[
-              { label: "Sessions", value: dashboard.sessions.length },
-              { label: "OAuth grants", value: dashboard.apps.length },
-              { label: "Passkeys", value: passkeys.length },
-              { label: "Events", value: dashboard.events.length },
-            ].map((item, i) => (
-              <div
-                key={item.label}
-                className={`px-4 py-4 ${
-                  i > 0 ? "border-l border-rule" : ""
-                }`}
-              >
-                <div className="text-[12px] text-muted mb-1">
-                  {item.label}
-                </div>
-                <div className="text-[34px] text-accent-strong tabular-nums leading-none">
-                  {String(item.value).padStart(2, "0")}
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <div data-mount-row>
-            <Section
-              index="1.0"
-              title="Sessions"
-              hint="Signed-in browsers"
-              action={
-                <form action={revokeOtherSessionsAction}>
-                  <button className="text-[13px] text-secondary hover:text-danger transition-colors">
-                    Revoke others
-                  </button>
-                </form>
-              }
-            >
-              {dashboard.sessions.map(session => (
-                <Row key={session.id}>
-                  <RowLabel>{session.userAgent || "Unknown browser"}</RowLabel>
-                  <RowValue>
-                    <span className="text-secondary">
-                      {session.ip || "Unknown IP"}
-                    </span>
-                    <span className="text-faint">·</span>
-                    <span className="text-muted">
-                      {shortDate(session.lastSeenAt)}
-                    </span>
-                    {session.id === current.session.id && (
-                      <Tag tone="success">This device</Tag>
-                    )}
-                  </RowValue>
-                  <span />
-                </Row>
-              ))}
-            </Section>
-          </div>
-
-          <div data-mount-row>
-            <Section
-              index="2.0"
-              title="OAuth grants"
-              hint="Apps with account access"
-              action={
-                <form action={revokeAllOAuthGrantsAction}>
-                  <button className="text-[13px] text-secondary hover:text-danger transition-colors">
-                    Revoke all
-                  </button>
-                </form>
-              }
-            >
-              {dashboard.apps.length === 0 ? (
-                <Empty>No connected apps</Empty>
-              ) : (
-                dashboard.apps.map(app => (
-                  <Row key={app.appSlug}>
-                    <RowLabel>{app.appName}</RowLabel>
-                    <RowValue>{app.scopes.join(", ")}</RowValue>
-                    <span className="text-[13px] text-muted">
-                      {shortDate(app.createdAt)}
-                    </span>
-                  </Row>
-                ))
-              )}
-            </Section>
-          </div>
-
-          <div data-mount-row>
-            <Section
-              index="3.0"
-              title="Telegram 2FA"
-              hint="Linked recovery channel"
-            >
-              <Row>
-                <RowLabel>Status</RowLabel>
-                <RowValue>
-                  {hasTelegram ? (
-                    <span className="flex items-baseline gap-2">
-                      <span className="inline-block w-2 h-2 rounded-full bg-success" />
-                      <span>
-                        Enabled {shortDate(current.user.telegramVerifiedAt)}
-                      </span>
-                    </span>
-                  ) : (
-                    <span className="flex items-baseline gap-2">
-                      <span className="inline-block w-2 h-2 rounded-full bg-warning" />
-                      <span className="text-accent-strong">Not linked</span>
-                    </span>
-                  )}
-                </RowValue>
-                <Link
-                  href="/relink"
-                  className="text-[13px] text-secondary hover:text-accent-strong transition-colors"
-                >
-                  Relink
-                </Link>
-              </Row>
-            </Section>
-          </div>
+      <header data-mount-row className="mb-6">
+        <h1 className="text-[24px] tracking-tight text-fg leading-none mb-1">Password & 2FA</h1>
+        <p className="text-[13px] text-muted">Authentication and account recovery</p>
+      </header>
 
-          <div data-mount-row>
-            <Section
-              index="4.0"
-              title="Passkeys"
-              hint="Passwordless credentials"
-            >
-              <PasskeyManager
-                passkeys={passkeys.map(item => ({
-                  id: item.credentialId,
-                  name: item.name || "Unknown Device",
-                  lastUsed: item.lastUsedAt,
-                }))}
-              />
-            </Section>
-          </div>
+      <Section title="Password" hint="Rotate your account password">
+        <ChangePasswordForm action={changePasswordAction} />
+      </Section>
 
-          <div data-mount-row>
-            <Section
-              index="5.0"
-              title="Password"
-              hint="Rotate your account password"
-            >
-              <ChangePasswordForm action={changePasswordAction} />
-            </Section>
-          </div>
+      <Section title="Telegram 2FA" hint="Linked recovery channel">
+        <Row>
+          <RowLabel>Status</RowLabel>
+          <RowValue>
+            {hasTelegram ? (
+              <span className="flex items-center gap-2">
+                <span className="inline-block w-2 h-2 rounded-full bg-ok" />
+                <span>Enabled {shortDate(u.telegramVerifiedAt)}</span>
+              </span>
+            ) : (
+              <span className="flex items-center gap-2">
+                <span className="inline-block w-2 h-2 rounded-full bg-accent" />
+                <span className="text-accent-strong">Not linked</span>
+              </span>
+            )}
+          </RowValue>
+          <Link href="/relink" className="text-[13px] text-secondary hover:text-accent-strong transition-colors">
+            Relink
+          </Link>
+        </Row>
+      </Section>
 
-          <div data-mount-row>
-            <Section
-              index="6.0"
-              title="Recent activity"
-              hint="Security events"
-            >
-              {dashboard.events.length === 0 ? (
-                <Empty>No recent events</Empty>
-              ) : (
-                dashboard.events.map((event, index) => (
-                  <Row key={`${event.created_at}-${index}`}>
-                    <RowLabel>
-                      <span className="tabular-nums text-faint">
-                        {shortDate(event.created_at)}
-                      </span>
-                    </RowLabel>
-                    <RowValue>{event.event_type}</RowValue>
-                    <span className="text-[13px] text-muted">
-                      {event.result}
-                    </span>
-                  </Row>
-                ))
-              )}
-            </Section>
-          </div>
+      <Section title="Passkeys" hint="Passwordless credentials">
+        <PasskeyManager
+          passkeys={passkeys.map(item => ({
+            id: item.credentialId,
+            name: item.name || "Unknown Device",
+            lastUsed: item.lastUsedAt,
+          }))}
+        />
+      </Section>
     </AppShell>
   );
 }
diff --git a/app/sessions/page.tsx b/app/sessions/page.tsx
new file mode 100644
index 0000000..7a92b65
--- /dev/null
+++ b/app/sessions/page.tsx
@@ -0,0 +1,68 @@
+import { redirect } from "next/navigation";
+import { AppShell } from "@/components/AppShell";
+import { Section, Row, RowLabel, RowValue } from "@/components/Section";
+import { Tag } from "@/components/Tag";
+import { getCurrentSession } from "@/lib/server/session";
+import { listSessionsForUser } from "@/lib/server/repositories/sessions";
+import { revokeSessionAction } from "@/app/dashboard-actions";
+import { revokeOtherSessionsAction } from "@/app/security/actions";
+
+export const dynamic = "force-dynamic";
+
+function shortDate(value: string | null) {
+  return value ? value.slice(0, 10) : "never";
+}
+
+export default async function SessionsPage() {
+  const current = await getCurrentSession();
+  if (!current) redirect("/login");
+  const u = current.user;
+  const sessions = await listSessionsForUser(u.id);
+
+  return (
+    <AppShell
+      user={{ name: u.firstName, username: u.username }}
+      trail="Sessions"
+      isAdmin={u.role === "admin"}
+    >
+      <header data-mount-row className="mb-6">
+        <h1 className="text-[24px] tracking-tight text-fg leading-none mb-1">Sessions</h1>
+        <p className="text-[13px] text-muted">Devices currently signed in</p>
+      </header>
+
+      <Section
+        title="Sessions"
+        hint="Signed-in browsers"
+        action={
+          <form action={revokeOtherSessionsAction}>
+            <button className="text-[13px] text-secondary hover:text-danger transition-colors">
+              Revoke others
+            </button>
+          </form>
+        }
+      >
+        {sessions.map(session => (
+          <Row key={session.id}>
+            <RowLabel>{session.userAgent || "Unknown browser"}</RowLabel>
+            <RowValue>
+              <span className="text-secondary truncate">{session.ip || "Unknown IP"}</span>
+              <span className="text-muted">·</span>
+              <span className="text-muted">{shortDate(session.lastSeenAt)}</span>
+              {session.id === current.session.id && <Tag tone="success">This device</Tag>}
+            </RowValue>
+            <form action={revokeSessionAction}>
+              <input type="hidden" name="sessionId" value={session.id} />
+              <button
+                type="submit"
+                className="text-[13px] text-secondary hover:text-danger transition-colors disabled:text-faint disabled:hover:text-faint disabled:cursor-not-allowed"
+                disabled={session.id === current.session.id}
+              >
+                Revoke
+              </button>
+            </form>
+          </Row>
+        ))}
+      </Section>
+    </AppShell>
+  );
+}
diff --git a/app/subscriptions/page.tsx b/app/subscriptions/page.tsx
new file mode 100644
index 0000000..a616084
--- /dev/null
+++ b/app/subscriptions/page.tsx
@@ -0,0 +1,63 @@
+import { redirect } from "next/navigation";
+import { AppShell } from "@/components/AppShell";
+import { Section, Row, RowLabel, RowValue, Empty } from "@/components/Section";
+import { Tag } from "@/components/Tag";
+import { getCurrentSession } from "@/lib/server/session";
+import { listSubscriptionsForUser } from "@/lib/server/repositories/subscriptions";
+import { cancelSubscriptionAction } from "@/app/dashboard-actions";
+
+export const dynamic = "force-dynamic";
+
+function shortDate(value: string | null) {
+  return value ? value.slice(0, 10) : "never";
+}
+
+export default async function SubscriptionsPage() {
+  const current = await getCurrentSession();
+  if (!current) redirect("/login");
+  const u = current.user;
+  const subscriptions = await listSubscriptionsForUser(u.id);
+
+  return (
+    <AppShell
+      user={{ name: u.firstName, username: u.username }}
+      trail="Subscriptions"
+      isAdmin={u.role === "admin"}
+    >
+      <header data-mount-row className="mb-6">
+        <h1 className="text-[24px] tracking-tight text-fg leading-none mb-1">Subscriptions</h1>
+        <p className="text-[13px] text-muted">Products tied to your account</p>
+      </header>
+
+      <Section title="Subscriptions" hint="Products you pay for">
+        {subscriptions.length === 0 ? (
+          <Empty>No active subscriptions</Empty>
+        ) : (
+          subscriptions.map(subscription => (
+            <Row key={`${subscription.product}-${subscription.expiresAt || "open"}`}>
+              <RowLabel>{subscription.product}</RowLabel>
+              <RowValue>
+                <Tag tone={subscription.status === "revoked" ? "danger" : "success"}>
+                  {subscription.status}
+                </Tag>
+                <span className="text-muted">·</span>
+                <span className="text-secondary">
+                  Expires {shortDate(subscription.expiresAt)}
+                </span>
+              </RowValue>
+              <form action={cancelSubscriptionAction}>
+                <input type="hidden" name="product" value={subscription.product} />
+                <button
+                  type="submit"
+                  className="text-[13px] text-secondary hover:text-danger transition-colors"
+                >
+                  Cancel
+                </button>
+              </form>
+            </Row>
+          ))
+        )}
+      </Section>
+    </AppShell>
+  );
+}
diff --git a/components/AppShell.tsx b/components/AppShell.tsx
index 5099c10..d52e5da 100644
--- a/components/AppShell.tsx
+++ b/components/AppShell.tsx
@@ -11,7 +11,7 @@ import {
   MonitorSmartphone,
   ShieldCheck,
   History,
-  Shield,
+  House,
   Boxes,
   BookOpen,
   FlaskConical,
@@ -39,19 +39,19 @@ const USER_NAV: NavGroup[] = [
   {
     label: "Account",
     items: [
-      { href: "/#profile", label: "Profile", icon: User },
-      { href: "/#subscriptions", label: "Subscriptions", icon: CreditCard },
-      { href: "/#apps", label: "Connected apps", icon: LayoutGrid },
-      { href: "/#bearers", label: "API bearers", icon: KeyRound },
+      { href: "/", label: "Account home", icon: House },
+      { href: "/profile", label: "Profile", icon: User },
+      { href: "/subscriptions", label: "Subscriptions", icon: CreditCard },
+      { href: "/apps", label: "Connected apps", icon: LayoutGrid },
+      { href: "/bearers", label: "API bearers", icon: KeyRound },
     ],
   },
   {
     label: "Security",
     items: [
-      { href: "/#sessions", label: "Sessions", icon: MonitorSmartphone },
-      { href: "/#security", label: "Password & 2FA", icon: ShieldCheck },
-      { href: "/#events", label: "Recent events", icon: History },
-      { href: "/security", label: "Security center", icon: Shield },
+      { href: "/sessions", label: "Sessions", icon: MonitorSmartphone },
+      { href: "/security", label: "Password & 2FA", icon: ShieldCheck },
+      { href: "/events", label: "Recent events", icon: History },
     ],
   },
   {