diff --git a/AGENTS.md b/AGENTS.md
index 0aacf02..17f32bd 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -46,8 +46,9 @@ No linter or formatter configured. Type-check and `bun test` are the verificatio
 
 ## Architecture
 
-- `src/pages/__root.tsx` — picks the layout (`src/layouts/main` or `src/layouts/admin`, or `LoginShell` for auth pages) and provides `AppContext`.
-- **Pages:** `/` + `about`, `privacy`, `terms`; `/auth/{login,logout,signup}`; `/admin` (dashboard), `/admin/setup`, `/admin/settings`, `/admin/clients`, `/admin/hosts/*` (add/edit hosts, `[host_id]/clients/*` add/edit/view clients).
+- `src/pages/__root.tsx` — picks the layout (`src/layouts/admin` for `/admin*`, `src/layouts/centered` for auth, 404 and everything else), mounts `AppProviders` (toast + confirm dialog) and provides `AppContext`. Its `Head` renders `ThemeScript` so the theme applies before first paint.
+- **Pages:** `/` redirects to `/admin` or `/auth/login`; `/auth/{login,logout,signup}`; `/admin` (dashboard), `/admin/setup/{status,maintenance,firewall}` (super admin only, guarded per page by `guard-setup-page`; `/admin/setup` redirects to `status`), `/admin/settings/{profile,password}` (`/admin/settings` redirects to `profile`), `/admin/clients`, `/admin/clients/add` (the only add-client form — `?host_id=` preselects the host), `/admin/hosts/*` (add/edit hosts, `[host_id]/clients` list, `[host_id]/clients/[client_id]` tabbed detail + `edit`). `[host_id]/clients/add-client` is a legacy redirect.
+- **Theme:** light/dark/system, stored in the `wgui_theme` cookie (`src/dict/theme-dict.ts`). twui dark styles key off a `.dark` class on `<html>` — toggle it only via `applyTheme`, never replace `className`.
 - **API:** `src/pages/api/admin/*` (host/client setup, network info, firewall status, service restart/update, media), generic CRUD at `src/pages/api/admin/crud/[[...paths]].ts` with per-table handlers in `crud/(tables)/<table>/{get,post,put,del}.ts`, plus `api/auth/login.ts` and `api/create-first-user.ts`.
 - **Every `/api/admin/*` route must authenticate** — nothing guards the prefix globally. Use `adminApiGuard({ req })` (`src/functions/backend/auth/admin-api-guard.ts`) or `userAuth` + `checkUserAccess`.
 - **Shell safety:** never interpolate request/DB values into `execSync` strings. Use `execFileSync` with an args array or `node:fs` APIs, and validate values before they reach a WireGuard config (newlines there can inject `PostUp` commands). Validators live in `src/utils/` (`validate-ipv4`, `validate-ipv4-cidr`, `validate-allowed-ips`, `validate-endpoint-host`, `validate-interface-name`).
@@ -78,11 +79,17 @@ Server functions use `index.server.ts` alongside `index.tsx` (e.g. `single-docum
 - **`src/functions/backend/`** — Server-only: `auth/`, `db/`, `firewall/` (firewalld/ufw rules, status), `media/`, `setup/` (host/client setup, iptables script builder, network detection).
 - **`src/functions/frontend/`** — Client-safe: CRUD/fetch handlers, media upload/delete, client rule label formatting.
 - **`src/functions/server/`** — Request-level server handlers (media server).
-- **`src/hooks/`** — `use-admin-crud-get`, `use-client-rules-map`, `use-fetch-get`, `use-form-init`, `use-users-get`.
+- **`src/hooks/`** — `use-admin-crud-get` (with `refetch`), `use-client-rules-map`, `use-confirm`, `use-toast`, `use-theme`, `use-fetch-get`, `use-form-init`, `use-users-get`.
 - **`src/utils/`** — Cookies, crypto, dir names, IP/CIDR/port/interface validators, WireGuard interface naming. Most have `.test.ts` files.
 - **`src/dict/`**, **`src/data/`** — Constants (`app-data.ts`, `site-data.ts`), user types, client rules, links.
 - **`src/scripts/`** — Shell scripts: `install-wg-ui.sh`, `setup-wireguard.sh`, `wg-quick-manage.sh`.
-- **`src/components/general/`** — Shared app components (admin cards/buttons, clients table, host IP field, login shell, user form).
+- **`src/components/general/`** — Shared app components, all built from twui. Reach for these before writing page markup:
+    - Page frame: `page-header` (title, meta, primary action + overflow menu), `page-body`, `panel` (the one card style), `form-section`, `form-actions` (submit is always rendered).
+    - Text & status: `muted-text`, `mono-text` (IPs, keys, paths), `section-label`, `status-dot`, `inline-alert`, `empty-state`, `stat-tile`, `key-value-list`, `copy-button`, `copyable-value`.
+    - Data: `data-table` (desktop table + mobile card list; the only place raw `<table>` is allowed), `clients-table`, `host-clients-panel`, `action-menu`, `sub-nav` (link tabs between sibling routes).
+    - Flows: `client-form` + `client-rules` (shared by add/edit client and the client detail Rules tab), `user-form`, `host-wg-ip-field`, `use-delete-host`.
+    - Feedback: `confirm/` + `useConfirm()` and `toast/` + `useToast()` (`src/hooks`). Never use `window.confirm`/`alert`; update lists in place instead of `location.reload()`.
+- **Design tokens** live in `src/styles/main.css`: one accent, WireGuard red `#89161b` (`primary` = `secondary` = `accent`; `error` is a separate brighter red), zinc neutrals, and theme-flipping semantic colours (`bg-surface`, `bg-surface-2`, `border-line`, `text-fg`, `text-muted`, `text-subtle`) that need no `dark:` pair.
 
 ## Conventions
 
diff --git a/public/icons/google.png b/public/icons/google.png
deleted file mode 100644
index 494aced..0000000
Binary files a/public/icons/google.png and /dev/null differ
diff --git a/public/images/logo.webp b/public/images/logo.webp
deleted file mode 100644
index 40c81c0..0000000
Binary files a/public/images/logo.webp and /dev/null differ
diff --git a/src/components/general/action-menu/action-menu-item.tsx b/src/components/general/action-menu/action-menu-item.tsx
new file mode 100644
index 0000000..8640a56
--- /dev/null
+++ b/src/components/general/action-menu/action-menu-item.tsx
@@ -0,0 +1,45 @@
+import Button from "@/src/components/twui/layout/Button";
+import { twMerge } from "tailwind-merge";
+import type { ActionMenuItem as ActionMenuItemType } from "./types";
+
+type Props = ActionMenuItemType & {
+    onDone: () => void;
+};
+
+export default function ActionMenuItem({
+    title,
+    href,
+    onClick,
+    icon,
+    tone,
+    disabled,
+    loading,
+    onDone,
+}: Props) {
+    return (
+        <Button
+            title={title}
+            type="button"
+            variant="ghost"
+            color={tone == "danger" ? "error" : "text"}
+            size="small"
+            href={href}
+            disabled={disabled}
+            loading={loading}
+            role="menuitem"
+            linkProps={{ className: "w-full no-underline!" }}
+            className={twMerge(
+                "w-full justify-start px-2.5! py-1.5! rounded-default-sm font-normal",
+                "hover:bg-gray! dark:hover:bg-gray-dark!",
+            )}
+            buttonContentProps={{ className: "gap-2.5 [&_svg]:opacity-70" }}
+            onClick={() => {
+                onClick?.();
+                onDone();
+            }}
+        >
+            {icon}
+            {title}
+        </Button>
+    );
+}
diff --git a/src/components/general/action-menu/index.tsx b/src/components/general/action-menu/index.tsx
new file mode 100644
index 0000000..e11f939
--- /dev/null
+++ b/src/components/general/action-menu/index.tsx
@@ -0,0 +1,64 @@
+import Dropdown from "@/src/components/twui/elements/Dropdown";
+import Paper from "@/src/components/twui/elements/Paper";
+import Button from "@/src/components/twui/layout/Button";
+import { MoreHorizontal } from "lucide-react";
+import { useState, type ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+import ActionMenuItem from "./action-menu-item";
+import type { ActionMenuItem as ActionMenuItemType } from "./types";
+
+type Props = {
+    /** Accessible label of the trigger */
+    label: string;
+    items: ActionMenuItemType[];
+    trigger_icon?: ReactNode;
+    className?: string;
+};
+
+export default function ActionMenu({
+    label,
+    items,
+    trigger_icon,
+    className,
+}: Props) {
+    const [open, setOpen] = useState(false);
+
+    if (!items.length) return null;
+
+    return (
+        <Dropdown
+            position="bottom-right"
+            externalOpen={open}
+            externalSetOpen={setOpen}
+            className={className}
+            target={
+                <Button
+                    title={label}
+                    type="button"
+                    variant="ghost"
+                    color="gray"
+                    aria-haspopup="menu"
+                    aria-expanded={open}
+                    className="p-1.5! rounded-default-sm hover:bg-gray! dark:hover:bg-gray-dark!"
+                >
+                    {trigger_icon || <MoreHorizontal size={16} />}
+                </Button>
+            }
+        >
+            <Paper
+                role="menu"
+                className={twMerge(
+                    "min-w-[180px] p-1! gap-0.5 shadow-lg rounded-default-lg",
+                )}
+            >
+                {items.map((item) => (
+                    <ActionMenuItem
+                        {...item}
+                        key={item.key}
+                        onDone={() => setOpen(false)}
+                    />
+                ))}
+            </Paper>
+        </Dropdown>
+    );
+}
diff --git a/src/components/general/action-menu/types.ts b/src/components/general/action-menu/types.ts
new file mode 100644
index 0000000..500efb2
--- /dev/null
+++ b/src/components/general/action-menu/types.ts
@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+
+export type ActionMenuItem = {
+    key: string;
+    title: string;
+    href?: string;
+    onClick?: () => void;
+    icon?: ReactNode;
+    tone?: "default" | "danger";
+    disabled?: boolean;
+    loading?: boolean;
+};
diff --git a/src/components/general/admin-button.tsx b/src/components/general/admin-button.tsx
deleted file mode 100644
index 34b4f2a..0000000
--- a/src/components/general/admin-button.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { ButtonHTMLAttributes } from "react";
-import type { LucideIcon } from "lucide-react";
-import { twMerge } from "tailwind-merge";
-
-type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: "primary" | "ghost";
-    Icon?: LucideIcon;
-};
-
-const baseClass =
-    "h-[30px] px-3 rounded-[5px] inline-flex items-center justify-center gap-2 " +
-    "text-[13px] font-medium cursor-pointer transition-colors whitespace-nowrap";
-
-const variantClass = {
-    primary: "bg-primary text-white font-semibold hover:opacity-90",
-    ghost:
-        "text-foreground-light/70 dark:text-foreground-dark/70 " +
-        "hover:text-foreground-light dark:hover:text-foreground-dark " +
-        "border border-slate-200 dark:border-white/10 " +
-        "hover:border-secondary/60 dark:hover:border-secondary/60",
-};
-
-export default function AdminButton({
-    variant = "ghost",
-    Icon,
-    className,
-    children,
-    ...props
-}: Props) {
-    return (
-        <button
-            type="button"
-            {...props}
-            className={twMerge(baseClass, variantClass[variant], className)}
-        >
-            {Icon ? <Icon size={13} strokeWidth={2.25} /> : null}
-            {children}
-        </button>
-    );
-}
diff --git a/src/components/general/admin-card.tsx b/src/components/general/admin-card.tsx
deleted file mode 100644
index 30ede84..0000000
--- a/src/components/general/admin-card.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { HTMLAttributes } from "react";
-import { twMerge } from "tailwind-merge";
-
-type Props = HTMLAttributes<HTMLDivElement> & {
-    tier?: "default" | "secondary";
-};
-
-export default function AdminCard({
-    tier = "default",
-    className,
-    ...props
-}: Props) {
-    return (
-        <div
-            {...props}
-            className={twMerge(
-                "rounded-default border border-slate-200 dark:border-white/10",
-                tier == "secondary"
-                    ? "bg-background-light dark:bg-[#0e0e10]"
-                    : "bg-background-light dark:bg-background-dark",
-                className,
-            )}
-        />
-    );
-}
diff --git a/src/components/general/admin-hero.tsx b/src/components/general/admin-hero.tsx
deleted file mode 100644
index a99cbb3..0000000
--- a/src/components/general/admin-hero.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import H1 from "@/src/components/twui/layout/H1";
-import Section from "@/src/components/twui/layout/Section";
-import { useContext, type ReactNode } from "react";
-import Row from "../twui/layout/Row";
-import Stack from "../twui/layout/Stack";
-import Divider from "../twui/layout/Divider";
-import Breadcrumbs from "../twui/elements/Breadcrumbs";
-import { AppContext } from "@/src/pages/__root";
-import Span from "../twui/layout/Span";
-
-type Props = {
-    title: string;
-    description?: string | ReactNode;
-    buttons?: ReactNode;
-};
-
-export default function AdminHero({ title, description, buttons }: Props) {
-    return (
-        <Section>
-            <Stack className="w-full items-stretch">
-                <Row className="w-full justify-between items-start">
-                    <Stack className="gap-3">
-                        <H1>{title}</H1>
-                        {description ? (
-                            typeof description == "string" ? (
-                                <Span>{description}</Span>
-                            ) : (
-                                description
-                            )
-                        ) : null}
-                    </Stack>
-                    <Row>{buttons}</Row>
-                </Row>
-            </Stack>
-        </Section>
-    );
-}
diff --git a/src/components/general/app-providers.tsx b/src/components/general/app-providers.tsx
new file mode 100644
index 0000000..7c9bba9
--- /dev/null
+++ b/src/components/general/app-providers.tsx
@@ -0,0 +1,11 @@
+import type { PropsWithChildren } from "react";
+import ToastProvider from "./toast/toast-provider";
+import ConfirmProvider from "./confirm/confirm-provider";
+
+export default function AppProviders({ children }: PropsWithChildren) {
+    return (
+        <ToastProvider>
+            <ConfirmProvider>{children}</ConfirmProvider>
+        </ToastProvider>
+    );
+}
diff --git a/src/components/general/auth-heading.tsx b/src/components/general/auth-heading.tsx
new file mode 100644
index 0000000..b8bc2e2
--- /dev/null
+++ b/src/components/general/auth-heading.tsx
@@ -0,0 +1,19 @@
+import H1 from "@/src/components/twui/layout/H1";
+import P from "@/src/components/twui/layout/P";
+import Stack from "@/src/components/twui/layout/Stack";
+import type { ReactNode } from "react";
+
+type Props = {
+    title: string;
+    description?: ReactNode;
+};
+
+/** Title block at the top of a `CenteredShell` card. */
+export default function AuthHeading({ title, description }: Props) {
+    return (
+        <Stack className="gap-1 mb-6">
+            <H1 className="text-xl!">{title}</H1>
+            {description ? <P className="text-[15px]">{description}</P> : null}
+        </Stack>
+    );
+}
diff --git a/src/components/general/blured-image-bg.tsx b/src/components/general/blured-image-bg.tsx
deleted file mode 100755
index 43eb819..0000000
--- a/src/components/general/blured-image-bg.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import Img from "@/src/components/twui/layout/Img";
-import { twMerge } from "tailwind-merge";
-
-type Props = {
-    src: string;
-    opacity?: number;
-};
-
-export default function BlurredImageBG({ src, opacity = 0.1 }: Props) {
-    /**
-     * Render component
-     */
-    return (
-        <Img
-            alt="bg image"
-            src={src}
-            className={twMerge(
-                `absolute top-0 left-0 w-[150vw] h-full blur-xs object-cover`,
-                "z-0",
-            )}
-            style={{ opacity }}
-        />
-    );
-}
diff --git a/src/components/general/client-form/build-host-option-title.ts b/src/components/general/client-form/build-host-option-title.ts
new file mode 100644
index 0000000..dfb591f
--- /dev/null
+++ b/src/components/general/client-form/build-host-option-title.ts
@@ -0,0 +1,18 @@
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+import deriveHostDisplayName from "@/src/utils/derive-host-display-name";
+import deriveWireguardInterfaceName from "@/src/utils/derive-wireguard-interface-name";
+
+type Params = {
+    host: BUN_SQLITE_WGUI_HOSTS;
+};
+
+/** e.g. `Main host · wgui0 · 10.8.0.1` */
+export default function buildHostOptionTitle({ host }: Params) {
+    return [
+        deriveHostDisplayName({ host }),
+        deriveWireguardInterfaceName({ host_id: Number(host.id || 0) }),
+        host.wg_ip_address,
+    ]
+        .filter(Boolean)
+        .join(" · ");
+}
diff --git a/src/components/general/client-form/client-form-allowed-ips.tsx b/src/components/general/client-form/client-form-allowed-ips.tsx
new file mode 100644
index 0000000..55c7562
--- /dev/null
+++ b/src/components/general/client-form/client-form-allowed-ips.tsx
@@ -0,0 +1,41 @@
+import Checkbox from "@/src/components/twui/form/Checkbox";
+import Input from "@/src/components/twui/form/Input";
+import Stack from "@/src/components/twui/layout/Stack";
+import type { ClientFormInit } from "./client-form-types";
+
+type Props = ClientFormInit & {
+    field_key: number;
+};
+
+export default function ClientFormAllowedIps({ form, setForm, field_key }: Props) {
+    return (
+        <Stack className="gap-3 w-full items-stretch">
+            {form.allow_all_ips == 1 ? null : (
+                <Input
+                    key={field_key}
+                    name="allowed_ips"
+                    title="Allowed IPs"
+                    placeholder="e.g. 10.8.0.0/24"
+                    info="Routes the client sends through the tunnel."
+                    onChange={(e) => {
+                        setForm((prev) => ({ ...prev, allowed_ips: e.target.value }));
+                    }}
+                    defaultValue={form.allowed_ips}
+                    showLabel
+                />
+            )}
+            <Checkbox
+                label="Route all traffic through the tunnel"
+                defaultChecked={form.allow_all_ips == 1}
+                changeHandler={(value) => {
+                    setForm((prev) => ({ ...prev, allow_all_ips: value ? 1 : 0 }));
+                }}
+                info={
+                    <span>
+                        Sets <code>AllowedIPs</code> to <code>0.0.0.0/0, ::/0</code>
+                    </span>
+                }
+            />
+        </Stack>
+    );
+}
diff --git a/src/components/general/client-form/client-form-host-select.tsx b/src/components/general/client-form/client-form-host-select.tsx
new file mode 100644
index 0000000..be286bc
--- /dev/null
+++ b/src/components/general/client-form/client-form-host-select.tsx
@@ -0,0 +1,26 @@
+import Select from "@/src/components/twui/form/Select";
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+import buildHostOptionTitle from "./build-host-option-title";
+
+type Props = {
+    hosts: BUN_SQLITE_WGUI_HOSTS[];
+    host_id: number;
+    onChange: ({ host_id }: { host_id: number }) => void;
+    disabled?: boolean;
+};
+
+export default function ClientFormHostSelect({ hosts, host_id, onChange, disabled }: Props) {
+    return (
+        <Select<string>
+            title="Host"
+            showLabel
+            disabled={disabled}
+            options={hosts.map((host) => ({
+                title: buildHostOptionTitle({ host }),
+                value: String(host.id),
+                default: Number(host.id) == host_id,
+            }))}
+            changeHandler={(value) => onChange({ host_id: Number(value) })}
+        />
+    );
+}
diff --git a/src/components/general/client-form/client-form-name.tsx b/src/components/general/client-form/client-form-name.tsx
new file mode 100644
index 0000000..1e5eb74
--- /dev/null
+++ b/src/components/general/client-form/client-form-name.tsx
@@ -0,0 +1,19 @@
+import Input from "@/src/components/twui/form/Input";
+import type { ClientFormInit } from "./client-form-types";
+
+export default function ClientFormName({ form, setForm, existing_full }: ClientFormInit) {
+    return (
+        <Input
+            name="name"
+            title="Name"
+            placeholder="e.g. Pixel phone"
+            autoFocus={!existing_full?.id}
+            onChange={(e) => {
+                setForm((prev) => ({ ...prev, name: e.target.value }));
+            }}
+            defaultValue={form.name}
+            showLabel
+            required
+        />
+    );
+}
diff --git a/src/components/general/client-form/client-form-notes.tsx b/src/components/general/client-form/client-form-notes.tsx
new file mode 100644
index 0000000..ff32c46
--- /dev/null
+++ b/src/components/general/client-form/client-form-notes.tsx
@@ -0,0 +1,19 @@
+import Input from "@/src/components/twui/form/Input";
+import type { ClientFormInit } from "./client-form-types";
+
+export default function ClientFormNotes({ form, setForm }: ClientFormInit) {
+    return (
+        <Input
+            name="notes"
+            title="Notes"
+            placeholder="e.g. Personal phone of Jane"
+            istextarea
+            rows={3}
+            onChange={(e) => {
+                setForm((prev) => ({ ...prev, notes: e.target.value }));
+            }}
+            defaultValue={form.notes}
+            showLabel
+        />
+    );
+}
diff --git a/src/components/general/client-form/client-form-types.ts b/src/components/general/client-form/client-form-types.ts
new file mode 100644
index 0000000..a1bd7c5
--- /dev/null
+++ b/src/components/general/client-form/client-form-types.ts
@@ -0,0 +1,4 @@
+import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+import type useFormInit from "@/src/hooks/use-form-init";
+
+export type ClientFormInit = ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_CLIENTS>>;
diff --git a/src/components/general/client-form/client-form-wg-ip.tsx b/src/components/general/client-form/client-form-wg-ip.tsx
new file mode 100644
index 0000000..a25b154
--- /dev/null
+++ b/src/components/general/client-form/client-form-wg-ip.tsx
@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { Wand2 } from "lucide-react";
+import Input from "@/src/components/twui/form/Input";
+import Button from "@/src/components/twui/layout/Button";
+import Row from "@/src/components/twui/layout/Row";
+import Stack from "@/src/components/twui/layout/Stack";
+import MutedText from "../muted-text";
+import grabNextAvailableClientIp from "./grab-next-available-client-ip";
+import type { ClientFormInit } from "./client-form-types";
+
+type Props = ClientFormInit & {
+    host_id: number;
+    /** Bump to remount the input after the value is set by code */
+    field_key: number;
+    onGrabbed: () => void;
+};
+
+export default function ClientFormWgIp({
+    form,
+    setForm,
+    existing_full,
+    host_id,
+    field_key,
+    onGrabbed,
+}: Props) {
+    const [grabbing, setGrabbing] = useState(false);
+    const [grab_error, setGrabError] = useState<string>();
+    const is_edit = Boolean(existing_full?.id);
+
+    async function handleGrab() {
+        setGrabbing(true);
+        setGrabError(undefined);
+        const res = await grabNextAvailableClientIp({ host_id, setForm });
+        setGrabbing(false);
+
+        if (!res.success) {
+            setGrabError(res.msg);
+            return;
+        }
+
+        onGrabbed();
+    }
+
+    return (
+        <Stack className="w-full items-stretch gap-1.5">
+            <Row className="w-full gap-2 items-end flex-wrap sm:flex-nowrap">
+                <Input
+                    key={field_key}
+                    name="wg_ip_address"
+                    title="Tunnel IP"
+                    placeholder="e.g. 10.8.0.2"
+                    changeHandler={(v) => {
+                        setForm((prev) => ({
+                            ...prev,
+                            wg_ip_address: v,
+                            allowed_ips: `${v.replace(/\.\d+$/, "")}.0/24`,
+                        }));
+                    }}
+                    defaultValue={form.wg_ip_address}
+                    readOnly={is_edit}
+                    showLabel
+                    wrapperWrapperProps={{ className: "grow" }}
+                />
+                {is_edit ? null : (
+                    <Button
+                        title="Use the next free IP in this host's subnet"
+                        type="button"
+                        variant="outlined"
+                        color="gray"
+                        loading={grabbing}
+                        className="py-2.5"
+                        onClick={handleGrab}
+                    >
+                        <Wand2 size={14} />
+                        Next free IP
+                    </Button>
+                )}
+            </Row>
+            {grab_error ? (
+                <MutedText text_size="xs" tone="error">
+                    {grab_error}
+                </MutedText>
+            ) : is_edit ? (
+                <MutedText text_size="xs">The tunnel IP can't change after creation.</MutedText>
+            ) : null}
+        </Stack>
+    );
+}
diff --git a/src/pages/admin/hosts/[host_id]/clients/add-client/(functions)/grab-next-available-client-ip.ts b/src/components/general/client-form/grab-next-available-client-ip.ts
similarity index 100%
rename from src/pages/admin/hosts/[host_id]/clients/add-client/(functions)/grab-next-available-client-ip.ts
rename to src/components/general/client-form/grab-next-available-client-ip.ts
diff --git a/src/components/general/client-form/index.tsx b/src/components/general/client-form/index.tsx
new file mode 100644
index 0000000..6e7f465
--- /dev/null
+++ b/src/components/general/client-form/index.tsx
@@ -0,0 +1,145 @@
+import { useState } from "react";
+import type {
+    BUN_SQLITE_WGUI_CLIENTS,
+    BUN_SQLITE_WGUI_CLIENT_RULES,
+    BUN_SQLITE_WGUI_HOSTS,
+} from "@/db/types/db";
+import Form from "@/src/components/twui/form/Form";
+import LoadingBlock from "@/src/components/twui/elements/LoadingBlock";
+import useFormInit from "@/src/hooks/use-form-init";
+import useConfirm from "@/src/hooks/use-confirm";
+import useToast from "@/src/hooks/use-toast";
+import Panel from "../panel";
+import FormSection from "../form-section";
+import FormActions from "../form-actions";
+import InlineAlert from "../inline-alert";
+import ClientRulesEditor from "../client-rules/client-rules-editor";
+import { clientRuleToDraft, type ClientRuleDraft } from "../client-rules/client-rule-draft";
+import ClientFormHostSelect from "./client-form-host-select";
+import ClientFormName from "./client-form-name";
+import ClientFormNotes from "./client-form-notes";
+import ClientFormWgIp from "./client-form-wg-ip";
+import ClientFormAllowedIps from "./client-form-allowed-ips";
+import grabNextAvailableClientIp from "./grab-next-available-client-ip";
+import submitClientForm from "./submit-client-form";
+
+type Props = {
+    hosts: BUN_SQLITE_WGUI_HOSTS[];
+    host_id: number;
+    existing_client?: BUN_SQLITE_WGUI_CLIENTS;
+    existing_client_rules?: BUN_SQLITE_WGUI_CLIENT_RULES[];
+    next_available_client_ip?: string | null;
+    cancel_href: string;
+};
+
+export default function ClientForm({
+    hosts,
+    host_id: initial_host_id,
+    existing_client,
+    existing_client_rules,
+    next_available_client_ip,
+    cancel_href,
+}: Props) {
+    const { confirm } = useConfirm();
+    const { toast } = useToast();
+
+    const init = useFormInit<BUN_SQLITE_WGUI_CLIENTS>({
+        existing: existing_client,
+        existing_full: existing_client,
+        // Separate drafts so an edit session never pre-fills the add form
+        title: existing_client?.id ? `Edit Client ${existing_client.id}` : "Add Client",
+        async before_ready_function({ setForm }) {
+            setForm((prev) => ({
+                ...prev,
+                wg_ip_address:
+                    existing_client?.wg_ip_address || next_available_client_ip || "",
+            }));
+        },
+    });
+
+    const [host_id, setHostId] = useState(initial_host_id);
+    const [field_key, setFieldKey] = useState(0);
+    const [rules, setRules] = useState<ClientRuleDraft[]>(
+        (existing_client_rules || []).map((rule) => clientRuleToDraft({ rule })),
+    );
+
+    const { loading, status, ready, setForm } = init;
+    const is_edit = Boolean(existing_client?.id);
+
+    async function changeHost({ host_id: next }: { host_id: number }) {
+        setHostId(next);
+
+        const url = new URL(window.location.href);
+        url.searchParams.set("host_id", String(next));
+        window.history.replaceState(null, "", url);
+
+        const res = await grabNextAvailableClientIp({ host_id: next, setForm });
+        if (res.success) {
+            setFieldKey((k) => k + 1);
+        } else {
+            toast({ msg: res.msg || "Couldn't find a free IP on that host", color: "error" });
+        }
+    }
+
+    if (!ready) {
+        return <LoadingBlock className="h-[480px]" />;
+    }
+
+    return (
+        <Panel>
+            <Form
+                className="w-full gap-0"
+                onSubmit={() => {
+                    submitClientForm({ init, host_id, rules, confirm, toast });
+                }}
+            >
+                {status?.error ? (
+                    <InlineAlert tone="error" msg={status.msg} className="mb-6" />
+                ) : null}
+
+                <FormSection
+                    title="Host"
+                    description="The WireGuard host this client connects to."
+                >
+                    <ClientFormHostSelect
+                        hosts={hosts}
+                        host_id={host_id}
+                        onChange={changeHost}
+                        disabled={is_edit}
+                    />
+                </FormSection>
+
+                <FormSection title="Details" description="How this client shows up in the list.">
+                    <ClientFormName {...init} />
+                    <ClientFormNotes {...init} />
+                </FormSection>
+
+                <FormSection
+                    title="Tunnel"
+                    description="The client's address inside the tunnel and what it routes through it."
+                >
+                    <ClientFormWgIp
+                        {...init}
+                        host_id={host_id}
+                        field_key={field_key}
+                        onGrabbed={() => setFieldKey((k) => k + 1)}
+                    />
+                    <ClientFormAllowedIps {...init} field_key={field_key} />
+                </FormSection>
+
+                <FormSection
+                    title="Access rules"
+                    description="What this client may reach. Nothing is allowed until you add a rule."
+                >
+                    <ClientRulesEditor rules={rules} setRules={setRules} />
+                </FormSection>
+
+                <FormActions
+                    submit_title={is_edit ? "Save changes" : "Create client"}
+                    loading={loading}
+                    cancel_href={cancel_href}
+                />
+            </Form>
+        </Panel>
+    );
+}
diff --git a/src/components/general/client-form/submit-client-form.ts b/src/components/general/client-form/submit-client-form.ts
new file mode 100644
index 0000000..e7096ba
--- /dev/null
+++ b/src/components/general/client-form/submit-client-form.ts
@@ -0,0 +1,129 @@
+import type {
+    BUN_SQLITE_WGUI_CLIENT_RULES,
+    BUN_SQLITE_WGUI_CLIENTS,
+} from "@/db/types/db";
+import adminCrudHandler from "@/src/functions/frontend/admin-crud-handler";
+import fetchApi from "@/src/components/twui/utils/fetch/fetchApi";
+import type { ApiReqParams } from "@/src/types";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+import _ from "lodash";
+import { clientRuleDraftToRecord, type ClientRuleDraft } from "../client-rules/client-rule-draft";
+import type { ConfirmContextValue } from "../confirm/confirm-context";
+import type { ToastContextValue } from "../toast/toast-context";
+import type { ClientFormInit } from "./client-form-types";
+
+type Params = {
+    init: ClientFormInit;
+    host_id: number;
+    rules: ClientRuleDraft[];
+    confirm: ConfirmContextValue["confirm"];
+    toast: ToastContextValue["toast"];
+};
+
+export default async function submitClientForm({
+    init,
+    host_id,
+    rules,
+    confirm,
+    toast,
+}: Params) {
+    const { setLoading, setStatus, form, existing_full, app_context, clearLocalForm } = init;
+    const is_edit = Boolean(existing_full?.id);
+
+    if (is_edit) {
+        const confirmed = await confirm({
+            title: "Save changes?",
+            message: "The client's config is regenerated. Devices may need the updated config.",
+            confirm_label: "Save changes",
+        });
+        if (!confirmed) return;
+    }
+
+    setLoading(true);
+
+    try {
+        const client_data: BUN_SQLITE_WGUI_CLIENTS = _.omitBy<BUN_SQLITE_WGUI_CLIENTS>(
+            {
+                name: form.name || "",
+                wg_ip_address: form.wg_ip_address || "",
+                allowed_ips: form.allowed_ips || "",
+                notes: form.notes || "",
+                host_id,
+                user_id: app_context?.user?.id,
+                allow_all_ips: form.allow_all_ips,
+            },
+            (value) => value === undefined,
+        );
+
+        const res = is_edit
+            ? await adminCrudHandler({
+                  action: "update",
+                  table: "clients",
+                  update_data: client_data,
+                  id: existing_full?.id,
+              })
+            : await adminCrudHandler({
+                  action: "insert",
+                  table: "clients",
+                  insert_data: [client_data],
+              });
+
+        if (!res.success) {
+            throw new Error(res.msg || (is_edit ? "Couldn't update the client" : "Couldn't create the client"));
+        }
+
+        const client_id = existing_full?.id || res.postInsertReturn?.insertId;
+
+        if (!client_id) {
+            throw new Error("The client was saved but no ID came back");
+        }
+
+        await adminCrudHandler<BUN_SQLITE_WGUI_CLIENT_RULES>({
+            action: "delete",
+            table: "client_rules",
+            sql_query: {
+                query: {
+                    client_id: { value: String(client_id) },
+                    host_id: { value: String(host_id) },
+                },
+            },
+        });
+
+        if (rules.length) {
+            const rules_res = await adminCrudHandler<BUN_SQLITE_WGUI_CLIENT_RULES>({
+                action: "insert",
+                table: "client_rules",
+                insert_data: rules.map((draft) => ({
+                    ...clientRuleDraftToRecord({ draft }),
+                    host_id,
+                    client_id: Number(client_id),
+                    user_id: app_context.user?.id,
+                })),
+            });
+
+            if (!rules_res.success) {
+                toast({ msg: rules_res.msg || "Client saved, but its rules failed to save", color: "error" });
+            }
+        }
+
+        const setup_res = await fetchApi<ApiReqParams, APIResponseObject>(
+            `/api/admin/run-client-setup`,
+            { method: "POST", body: { client_id } },
+        );
+
+        if (!setup_res?.success) {
+            toast({ msg: setup_res?.msg || "Client saved, but its config failed to generate", color: "error" });
+        }
+
+        clearLocalForm();
+
+        const base = `/admin/hosts/${host_id}/clients/${client_id}`;
+        window.location.href = is_edit ? base : `${base}?tab=config`;
+    } catch (error: any) {
+        setStatus({
+            error: true,
+            msg: error.message || "Couldn't save the client",
+        });
+        setLoading(false);
+    }
+}
diff --git a/src/components/general/client-row.tsx b/src/components/general/client-row.tsx
deleted file mode 100644
index a25c3fd..0000000
--- a/src/components/general/client-row.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { useState } from "react";
-import { Pencil, Trash2 } from "lucide-react";
-import Link from "@/src/components/twui/layout/Link";
-import Row from "@/src/components/twui/layout/Row";
-import Span from "@/src/components/twui/layout/Span";
-import formatUnixTimestamp from "@/src/utils/format-unix-timestamp";
-import adminCrudHandler from "@/src/functions/frontend/admin-crud-handler";
-import type {
-    BUN_SQLITE_WGUI_CLIENTS,
-    BUN_SQLITE_WGUI_CLIENT_RULES,
-} from "@/db/types/db";
-import deriveClientAccessLabel from "@/src/functions/frontend/derive-client-access-label";
-import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
-
-type Props = {
-    client: BUN_SQLITE_WGUI_CLIENTS_JOIN;
-    rules?: BUN_SQLITE_WGUI_CLIENT_RULES[];
-};
-
-export default function ClientRow({ client, rules }: Props) {
-    const [deleting, setDeleting] = useState(false);
-
-    const host_id = Number(client.host_id || 0);
-    const access = deriveClientAccessLabel({ rules });
-    const host_name =
-        host_id == 0 ? "Main" : client.host_name || `Host #${host_id}`;
-
-    async function handleDelete() {
-        if (
-            !window.confirm(
-                `Delete client "${client?.name || `#${client?.id}`}"? The client will be removed from the host and its config file deleted.`,
-            )
-        ) {
-            return;
-        }
-
-        setDeleting(true);
-
-        const res = await adminCrudHandler({
-            action: "delete",
-            table: "clients",
-            id: client?.id,
-        });
-
-        if (!res.success) {
-            setDeleting(false);
-            window.alert(res.msg || "Could not delete client");
-            return;
-        }
-
-        window.location.reload();
-    }
-
-    return (
-        <tr className="border-b border-slate-200/60 dark:border-white/5 last:border-b-0 hover:bg-foreground-light/[0.02] dark:hover:bg-foreground-dark/[0.02] transition-colors">
-            <td className="px-4 py-[9px]">
-                <Link
-                    href={`/admin/hosts/${host_id}/clients/${client.id}`}
-                    className="text-[13.5px] font-medium text-foreground-light dark:text-foreground-dark hover:text-secondary dark:hover:text-secondary"
-                >
-                    {client.name || "—"}
-                </Link>
-            </td>
-            <td className="px-4 py-[9px]">
-                {typeof host_id == "number" ? (
-                    <Link
-                        href={`/admin/hosts/${host_id}`}
-                        className="tabular text-[13px] text-foreground-light/60 dark:text-foreground-dark/60 hover:text-secondary dark:hover:text-secondary whitespace-nowrap"
-                    >
-                        {host_name}
-                    </Link>
-                ) : (
-                    <Span className="tabular text-[13px] text-foreground-light/40 dark:text-foreground-dark/40 whitespace-nowrap">
-                        —
-                    </Span>
-                )}
-            </td>
-            <td className="px-4 py-[9px] tabular text-[13px] text-foreground-light/60 dark:text-foreground-dark/60 whitespace-nowrap">
-                {client.wg_ip_address || "—"}
-            </td>
-            <td className="px-4 py-[9px] tabular text-[13px] text-foreground-light/45 dark:text-foreground-dark/45 whitespace-nowrap">
-                {client.allow_all_ips
-                    ? "0.0.0.0/0, ::/0"
-                    : client.allowed_ips || "—"}
-            </td>
-            <td className="px-4 py-[9px] whitespace-nowrap">
-                <Span
-                    className={
-                        access.kind == "none"
-                            ? "text-[12.5px] text-error/80"
-                            : "text-[12.5px] text-foreground-light/60 dark:text-foreground-dark/60"
-                    }
-                >
-                    {access.text}
-                </Span>
-            </td>
-            <td className="px-4 py-[9px]">
-                <Span className="font-mono text-[12px] text-foreground-light/45 dark:text-foreground-dark/45 whitespace-nowrap">
-                    {client.public_key
-                        ? `${client.public_key.slice(0, 16)}…`
-                        : "—"}
-                </Span>
-            </td>
-            <td className="px-4 py-[9px] tabular text-[12px] text-foreground-light/40 dark:text-foreground-dark/40 text-right whitespace-nowrap">
-                {formatUnixTimestamp({ timestamp: client.created_at })}
-            </td>
-            <td className="px-4 py-[9px] text-right">
-                <Row className="gap-1.5 items-center justify-end">
-                    <Link
-                        href={`/admin/hosts/${host_id}/clients/${client.id}/edit`}
-                        title={`Edit client ${client.name || `#${client.id}`}`}
-                        aria-label={`Edit client ${client.name || `#${client.id}`}`}
-                        className="p-1.5 text-foreground-light/40 dark:text-foreground-dark/40 hover:text-foreground-light dark:hover:text-foreground-dark focus:outline-2"
-                    >
-                        <Pencil size={14} />
-                    </Link>
-                    <button
-                        type="button"
-                        title={`Delete client ${client.name || `#${client.id}`}`}
-                        aria-label={`Delete client ${client.name || `#${client.id}`}`}
-                        disabled={deleting}
-                        onClick={handleDelete}
-                        className="p-1.5 text-error hover:bg-error/10 focus:outline-2 transition-colors duration-150"
-                    >
-                        <Trash2 size={14} />
-                    </button>
-                </Row>
-            </td>
-        </tr>
-    );
-}
diff --git a/src/components/general/client-rules/build-client-rule-drafts.ts b/src/components/general/client-rules/build-client-rule-drafts.ts
new file mode 100644
index 0000000..a540158
--- /dev/null
+++ b/src/components/general/client-rules/build-client-rule-drafts.ts
@@ -0,0 +1,30 @@
+import expandClientRuleDestinations from "@/src/functions/backend/setup/expand-client-rule-destinations";
+import sanitizeClientRule from "@/src/functions/backend/setup/sanitize-client-rule";
+import validateClientRule from "@/src/functions/backend/setup/validate-client-rule";
+import {
+    clientRuleDraftToRecord,
+    clientRuleToDraft,
+    type ClientRuleDraft,
+} from "./client-rule-draft";
+
+type Params = {
+    draft: ClientRuleDraft;
+};
+
+/** Sanitizes and validates a draft, splitting comma-separated destinations. */
+export default function buildClientRuleDrafts({ draft }: Params) {
+    const sanitized = sanitizeClientRule({
+        rule: clientRuleDraftToRecord({ draft }),
+    });
+    const valid = validateClientRule({ rule: sanitized });
+
+    if (!valid.success || !sanitized) {
+        return { success: false as const, msg: valid.msg || "Invalid rule" };
+    }
+
+    const drafts = expandClientRuleDestinations({ rule: sanitized }).map(
+        (rule) => clientRuleToDraft({ rule }),
+    );
+
+    return { success: true as const, drafts };
+}
diff --git a/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rule-destination-field.tsx b/src/components/general/client-rules/client-rule-destination-field.tsx
similarity index 100%
rename from src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rule-destination-field.tsx
rename to src/components/general/client-rules/client-rule-destination-field.tsx
diff --git a/src/components/general/client-rules/client-rule-draft-item.tsx b/src/components/general/client-rules/client-rule-draft-item.tsx
new file mode 100644
index 0000000..3fafc6b
--- /dev/null
+++ b/src/components/general/client-rules/client-rule-draft-item.tsx
@@ -0,0 +1,16 @@
+import ClientRuleItem from "./client-rule-item";
+import { clientRuleDraftToRecord, type ClientRuleDraft } from "./client-rule-draft";
+
+type Props = {
+    draft: ClientRuleDraft;
+    onRemove: ({ local_id }: { local_id: string }) => void;
+};
+
+export default function ClientRuleDraftItem({ draft, onRemove }: Props) {
+    return (
+        <ClientRuleItem
+            rule={clientRuleDraftToRecord({ draft })}
+            onRemove={() => onRemove({ local_id: draft.local_id })}
+        />
+    );
+}
diff --git a/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rule-draft.ts b/src/components/general/client-rules/client-rule-draft.ts
similarity index 100%
rename from src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rule-draft.ts
rename to src/components/general/client-rules/client-rule-draft.ts
diff --git a/src/components/general/client-rules/client-rule-fields.tsx b/src/components/general/client-rules/client-rule-fields.tsx
new file mode 100644
index 0000000..d46d23e
--- /dev/null
+++ b/src/components/general/client-rules/client-rule-fields.tsx
@@ -0,0 +1,37 @@
+import Stack from "@/src/components/twui/layout/Stack";
+import type { ClientRuleDraft } from "./client-rule-draft";
+import ClientRuleDestinationField from "./client-rule-destination-field";
+import ClientRulePortsField from "./client-rule-ports-field";
+import ClientRuleProtocolField from "./client-rule-protocol-field";
+import ClientRuleTypeField from "./client-rule-type-field";
+
+type Props = {
+    draft: ClientRuleDraft;
+    setDraft: (draft: ClientRuleDraft) => void;
+    onEnter: () => void;
+};
+
+/**
+ * Not a `<form>`: this renders inside a portalled modal, and React submit
+ * events bubble through portals into whatever form hosts the modal.
+ */
+export default function ClientRuleFields({ draft, setDraft, onEnter }: Props) {
+    return (
+        <Stack
+            className="w-full items-stretch gap-5"
+            onKeyDown={(e) => {
+                if (e.key == "Enter" && (e.target as HTMLElement).tagName == "INPUT") {
+                    e.preventDefault();
+                    onEnter();
+                }
+            }}
+        >
+            <ClientRuleTypeField draft={draft} setDraft={setDraft} />
+            <ClientRuleDestinationField draft={draft} setDraft={setDraft} />
+            <Stack className="w-full gap-5 sm:grid sm:grid-cols-2 sm:gap-3 items-stretch">
+                <ClientRulePortsField draft={draft} setDraft={setDraft} />
+                <ClientRuleProtocolField draft={draft} setDraft={setDraft} />
+            </Stack>
+        </Stack>
+    );
+}
diff --git a/src/components/general/client-rules/client-rule-item.tsx b/src/components/general/client-rules/client-rule-item.tsx
new file mode 100644
index 0000000..45036e4
--- /dev/null
+++ b/src/components/general/client-rules/client-rule-item.tsx
@@ -0,0 +1,35 @@
+import { ShieldCheck, Trash2 } from "lucide-react";
+import Button from "@/src/components/twui/layout/Button";
+import Row from "@/src/components/twui/layout/Row";
+import MonoText from "../mono-text";
+import formatClientRuleLabel from "@/src/functions/frontend/format-client-rule-label";
+import type { BUN_SQLITE_WGUI_CLIENT_RULES } from "@/db/types/db";
+
+type Props = {
+    rule: BUN_SQLITE_WGUI_CLIENT_RULES;
+    onRemove: () => void;
+    removing?: boolean;
+};
+
+export default function ClientRuleItem({ rule, onRemove, removing }: Props) {
+    return (
+        <Row className="w-full justify-between gap-3 px-4 py-2.5 border-t border-line first:border-t-0 flex-nowrap">
+            <Row className="gap-2.5 flex-nowrap min-w-0">
+                <ShieldCheck size={15} className="shrink-0 text-success dark:text-success-dark" />
+                <MonoText className="break-all">{formatClientRuleLabel({ rule })}</MonoText>
+            </Row>
+            <Button
+                title="Remove rule"
+                type="button"
+                variant="ghost"
+                color="error"
+                size="small"
+                loading={removing}
+                className="p-1.5!"
+                onClick={onRemove}
+            >
+                <Trash2 size={14} />
+            </Button>
+        </Row>
+    );
+}
diff --git a/src/components/general/client-rules/client-rule-modal.tsx b/src/components/general/client-rules/client-rule-modal.tsx
new file mode 100644
index 0000000..fa10ce5
--- /dev/null
+++ b/src/components/general/client-rules/client-rule-modal.tsx
@@ -0,0 +1,123 @@
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import Modal from "@/src/components/twui/elements/Modal";
+import Button from "@/src/components/twui/layout/Button";
+import H3 from "@/src/components/twui/layout/H3";
+import P from "@/src/components/twui/layout/P";
+import Row from "@/src/components/twui/layout/Row";
+import Stack from "@/src/components/twui/layout/Stack";
+import InlineAlert from "../inline-alert";
+import ClientRuleFields from "./client-rule-fields";
+import buildClientRuleDrafts from "./build-client-rule-drafts";
+import { createClientRuleDraft, type ClientRuleDraft } from "./client-rule-draft";
+
+export type ClientRuleModalAddResult = { success: boolean; msg?: string };
+
+type Props = {
+    onAdd: ({ rules }: { rules: ClientRuleDraft[] }) => Promise<ClientRuleModalAddResult>;
+    disabled?: boolean;
+};
+
+/** Validates a rule and hands it to `onAdd`. Closes only on success. */
+export default function ClientRuleModal({ onAdd, disabled }: Props) {
+    const [open, setOpen] = useState(false);
+    const [draft, setDraft] = useState<ClientRuleDraft>(createClientRuleDraft());
+    const [error, setError] = useState<string>();
+    const [saving, setSaving] = useState(false);
+
+    function reset() {
+        setDraft(createClientRuleDraft());
+        setError(undefined);
+    }
+
+    async function handleAdd() {
+        const built = buildClientRuleDrafts({ draft });
+
+        if (!built.success) {
+            setError(built.msg);
+            return;
+        }
+
+        setSaving(true);
+        const res = await onAdd({ rules: built.drafts });
+        setSaving(false);
+
+        if (!res.success) {
+            setError(res.msg || "Couldn't add the rule");
+            return;
+        }
+
+        reset();
+        setOpen(false);
+    }
+
+    return (
+        <Modal
+            open={open}
+            setOpen={(value) => {
+                setOpen(value);
+                if (value === false) reset();
+            }}
+            className="max-w-lg p-5"
+            target={
+                <Button
+                    title="Add rule"
+                    type="button"
+                    variant="outlined"
+                    color="gray"
+                    size="small"
+                    disabled={disabled}
+                >
+                    <Plus size={14} />
+                    Add rule
+                </Button>
+            }
+        >
+            <Stack className="w-full items-stretch gap-5">
+                <Stack className="gap-1 pr-8">
+                    <H3 className="text-lg!">Add access rule</H3>
+                    <P className="text-[15px]">
+                        Allow this client to reach a destination. Leave ports empty for any port.
+                    </P>
+                </Stack>
+
+                {error ? <InlineAlert tone="error" msg={error} /> : null}
+
+                <ClientRuleFields
+                    key={draft.local_id}
+                    draft={draft}
+                    setDraft={(next) => {
+                        setDraft(next);
+                        setError(undefined);
+                    }}
+                    onEnter={handleAdd}
+                />
+
+                <Row className="w-full justify-end gap-2 pt-1">
+                    <Button
+                        title="Cancel"
+                        type="button"
+                        variant="outlined"
+                        color="gray"
+                        size="small"
+                        onClick={() => {
+                            reset();
+                            setOpen(false);
+                        }}
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        title="Add rule"
+                        type="button"
+                        size="small"
+                        loading={saving}
+                        onClick={handleAdd}
+                    >
+                        Add rule
+                    </Button>
+                </Row>
+            </Stack>
+        </Modal>
+    );
+}
diff --git a/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rule-ports-field.tsx b/src/components/general/client-rules/client-rule-ports-field.tsx
similarity index 100%
rename from src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rule-ports-field.tsx
rename to src/components/general/client-rules/client-rule-ports-field.tsx
diff --git a/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rule-protocol-field.tsx b/src/components/general/client-rules/client-rule-protocol-field.tsx
similarity index 100%
rename from src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rule-protocol-field.tsx
rename to src/components/general/client-rules/client-rule-protocol-field.tsx
diff --git a/src/components/general/client-rules/client-rule-type-field.tsx b/src/components/general/client-rules/client-rule-type-field.tsx
new file mode 100644
index 0000000..84e2125
--- /dev/null
+++ b/src/components/general/client-rules/client-rule-type-field.tsx
@@ -0,0 +1,23 @@
+import Checkbox from "@/src/components/twui/form/Checkbox";
+import type { ClientRuleDraft } from "./client-rule-draft";
+
+type Props = {
+    draft: ClientRuleDraft;
+    setDraft: (draft: ClientRuleDraft) => void;
+};
+
+export default function ClientRuleTypeField({ draft, setDraft }: Props) {
+    return (
+        <Checkbox
+            defaultChecked={draft.rule_type == "all"}
+            label="Allow all access"
+            info="Unrestricted access to the host, its LAN, the internet and other clients."
+            changeHandler={(checked) => {
+                setDraft({
+                    ...draft,
+                    rule_type: checked ? "all" : "destination",
+                });
+            }}
+        />
+    );
+}
diff --git a/src/components/general/client-rules/client-rules-editor.tsx b/src/components/general/client-rules/client-rules-editor.tsx
new file mode 100644
index 0000000..136e30e
--- /dev/null
+++ b/src/components/general/client-rules/client-rules-editor.tsx
@@ -0,0 +1,45 @@
+import Card from "@/src/components/twui/elements/Card";
+import Stack from "@/src/components/twui/layout/Stack";
+import ClientRuleDraftItem from "./client-rule-draft-item";
+import ClientRuleModal from "./client-rule-modal";
+import ClientRulesEmpty from "./client-rules-empty";
+import type { ClientRuleDraft } from "./client-rule-draft";
+
+type Props = {
+    rules: ClientRuleDraft[];
+    setRules: (rules: ClientRuleDraft[]) => void;
+};
+
+/** Draft rules held in the client form; saved together with the client. */
+export default function ClientRulesEditor({ rules, setRules }: Props) {
+    const has_all_access = rules.some((rule) => rule.rule_type == "all");
+
+    return (
+        <Stack className="w-full items-stretch gap-3">
+            <Card noHover className="w-full flex-col items-stretch p-0">
+                {rules.length ? (
+                    rules.map((rule) => (
+                        <ClientRuleDraftItem
+                            key={rule.local_id}
+                            draft={rule}
+                            onRemove={({ local_id }) =>
+                                setRules(rules.filter((item) => item.local_id != local_id))
+                            }
+                        />
+                    ))
+                ) : (
+                    <ClientRulesEmpty />
+                )}
+            </Card>
+            <Stack className="items-start">
+                <ClientRuleModal
+                    disabled={has_all_access}
+                    onAdd={async ({ rules: added }) => {
+                        setRules([...rules, ...added]);
+                        return { success: true };
+                    }}
+                />
+            </Stack>
+        </Stack>
+    );
+}
diff --git a/src/components/general/client-rules/client-rules-empty.tsx b/src/components/general/client-rules/client-rules-empty.tsx
new file mode 100644
index 0000000..e68f883
--- /dev/null
+++ b/src/components/general/client-rules/client-rules-empty.tsx
@@ -0,0 +1,13 @@
+import { ShieldOff } from "lucide-react";
+import EmptyState from "../empty-state";
+
+export default function ClientRulesEmpty() {
+    return (
+        <EmptyState
+            className="py-8"
+            icon={<ShieldOff size={18} />}
+            title="No access rules"
+            description="Zero trust: without rules this client can't reach the host, its LAN, the internet or other clients."
+        />
+    );
+}
diff --git a/src/components/general/clients-table.tsx b/src/components/general/clients-table.tsx
deleted file mode 100644
index 3c1688e..0000000
--- a/src/components/general/clients-table.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import ClientRow from "@/src/components/general/client-row";
-import type { BUN_SQLITE_WGUI_CLIENT_RULES } from "@/db/types/db";
-import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
-
-type Props = {
-    clients: BUN_SQLITE_WGUI_CLIENTS_JOIN[];
-    rules_by_client_id: Map<number, BUN_SQLITE_WGUI_CLIENT_RULES[]>;
-    accessLabel?: string;
-    minWidthClass?: string;
-};
-
-const thClass =
-    "px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.08em] " +
-    "text-foreground-light/40 dark:text-foreground-dark/40 whitespace-nowrap";
-
-const thRightClass = `${thClass} text-right`;
-
-export default function ClientsTable({
-    clients,
-    rules_by_client_id,
-    accessLabel = "Access",
-    minWidthClass = "min-w-[860px]",
-}: Props) {
-    return (
-        <div className="overflow-x-auto w-full">
-            <table className={`w-full ${minWidthClass}`}>
-                <thead className="w-full">
-                    <tr className="border-y border-slate-200 dark:border-white/10 bg-foreground-light/[0.02] dark:bg-foreground-dark/[0.03] w-full">
-                        <th className={thClass}>Client</th>
-                        <th className={thClass}>Host</th>
-                        <th className={thClass}>Tunnel IP</th>
-                        <th className={thClass}>Allowed IPs</th>
-                        <th className={thClass}>{accessLabel}</th>
-                        <th className={thClass}>Public key</th>
-                        <th className={thRightClass}>Created</th>
-                        <th className={thRightClass}>Actions</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {clients.map((client) => (
-                        <ClientRow
-                            key={client.id}
-                            client={client}
-                            rules={
-                                client.id
-                                    ? rules_by_client_id.get(Number(client.id))
-                                    : undefined
-                            }
-                        />
-                    ))}
-                </tbody>
-            </table>
-        </div>
-    );
-}
diff --git a/src/components/general/clients-table/client-access-tag.tsx b/src/components/general/clients-table/client-access-tag.tsx
new file mode 100644
index 0000000..d22e643
--- /dev/null
+++ b/src/components/general/clients-table/client-access-tag.tsx
@@ -0,0 +1,24 @@
+import StatusDot from "../status-dot";
+import deriveClientAccessLabel from "@/src/functions/frontend/derive-client-access-label";
+import type { BUN_SQLITE_WGUI_CLIENT_RULES } from "@/db/types/db";
+
+type Props = {
+    rules?: BUN_SQLITE_WGUI_CLIENT_RULES[];
+};
+
+export default function ClientAccessTag({ rules }: Props) {
+    const access = deriveClientAccessLabel({ rules });
+
+    return (
+        <StatusDot
+            tone={
+                access.kind == "none"
+                    ? "error"
+                    : access.kind == "all"
+                      ? "success"
+                      : "warning"
+            }
+            label={access.kind == "none" ? "No access" : access.text}
+        />
+    );
+}
diff --git a/src/components/general/clients-table/client-mobile-card.tsx b/src/components/general/clients-table/client-mobile-card.tsx
new file mode 100644
index 0000000..6a76972
--- /dev/null
+++ b/src/components/general/clients-table/client-mobile-card.tsx
@@ -0,0 +1,33 @@
+import Row from "@/src/components/twui/layout/Row";
+import Stack from "@/src/components/twui/layout/Stack";
+import MutedText from "../muted-text";
+import type { BUN_SQLITE_WGUI_CLIENT_RULES } from "@/db/types/db";
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
+import ClientAccessTag from "./client-access-tag";
+import ClientNameCell from "./client-name-cell";
+import ClientRowActions from "./client-row-actions";
+import deriveClientHostName from "./derive-client-host-name";
+
+type Props = {
+    client: BUN_SQLITE_WGUI_CLIENTS_JOIN;
+    rules?: BUN_SQLITE_WGUI_CLIENT_RULES[];
+    hide_host?: boolean;
+    onDeleted?: ({ id }: { id: number }) => void;
+};
+
+export default function ClientMobileCard({ client, rules, hide_host, onDeleted }: Props) {
+    return (
+        <Row className="w-full justify-between items-start gap-3 px-4 py-3 border-t border-line first:border-t-0 flex-nowrap">
+            <Stack className="gap-1.5 min-w-0">
+                <ClientNameCell client={client} />
+                <Row className="gap-x-3 gap-y-1">
+                    {hide_host ? null : (
+                        <MutedText>{deriveClientHostName({ client })}</MutedText>
+                    )}
+                    <ClientAccessTag rules={rules} />
+                </Row>
+            </Stack>
+            <ClientRowActions client={client} onDeleted={onDeleted} />
+        </Row>
+    );
+}
diff --git a/src/components/general/clients-table/client-name-cell.tsx b/src/components/general/clients-table/client-name-cell.tsx
new file mode 100644
index 0000000..0712104
--- /dev/null
+++ b/src/components/general/clients-table/client-name-cell.tsx
@@ -0,0 +1,24 @@
+import Link from "@/src/components/twui/layout/Link";
+import Stack from "@/src/components/twui/layout/Stack";
+import MonoText from "../mono-text";
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
+
+type Props = {
+    client: BUN_SQLITE_WGUI_CLIENTS_JOIN;
+};
+
+export default function ClientNameCell({ client }: Props) {
+    return (
+        <Stack className="gap-0">
+            <Link
+                href={`/admin/hosts/${Number(client.host_id || 0)}/clients/${client.id}`}
+                className="text-[15px] font-medium text-fg! hover:text-primary! dark:hover:text-primary-dark-text! no-underline!"
+            >
+                {client.name || `Client #${client.id}`}
+            </Link>
+            <MonoText className="text-subtle lg:hidden">
+                {client.wg_ip_address || "—"}
+            </MonoText>
+        </Stack>
+    );
+}
diff --git a/src/components/general/clients-table/client-row-actions.tsx b/src/components/general/clients-table/client-row-actions.tsx
new file mode 100644
index 0000000..dc55b87
--- /dev/null
+++ b/src/components/general/clients-table/client-row-actions.tsx
@@ -0,0 +1,38 @@
+import { Eye, Pencil, Trash2 } from "lucide-react";
+import ActionMenu from "../action-menu";
+import useDeleteClient from "./use-delete-client";
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
+
+type Props = {
+    client: BUN_SQLITE_WGUI_CLIENTS_JOIN;
+    onDeleted?: ({ id }: { id: number }) => void;
+};
+
+export default function ClientRowActions({ client, onDeleted }: Props) {
+    const { deleteClient, deleting } = useDeleteClient({ onDeleted });
+    const base = `/admin/hosts/${Number(client.host_id || 0)}/clients/${client.id}`;
+
+    return (
+        <ActionMenu
+            label={`Actions for ${client.name || `client #${client.id}`}`}
+            className="items-end"
+            items={[
+                { key: "view", title: "View", href: base, icon: <Eye size={14} /> },
+                {
+                    key: "edit",
+                    title: "Edit",
+                    href: `${base}/edit`,
+                    icon: <Pencil size={14} />,
+                },
+                {
+                    key: "delete",
+                    title: "Delete",
+                    tone: "danger",
+                    icon: <Trash2 size={14} />,
+                    loading: deleting,
+                    onClick: () => deleteClient({ client }),
+                },
+            ]}
+        />
+    );
+}
diff --git a/src/components/general/clients-table/clients-table-columns.tsx b/src/components/general/clients-table/clients-table-columns.tsx
new file mode 100644
index 0000000..15a5255
--- /dev/null
+++ b/src/components/general/clients-table/clients-table-columns.tsx
@@ -0,0 +1,108 @@
+import Link from "@/src/components/twui/layout/Link";
+import MonoText from "../mono-text";
+import MutedText from "../muted-text";
+import CopyableValue from "../copyable-value";
+import formatUnixTimestamp from "@/src/utils/format-unix-timestamp";
+import type { BUN_SQLITE_WGUI_CLIENT_RULES } from "@/db/types/db";
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
+import type { DataTableColumn } from "../data-table/types";
+import ClientAccessTag from "./client-access-tag";
+import ClientNameCell from "./client-name-cell";
+import ClientRowActions from "./client-row-actions";
+import deriveClientHostName from "./derive-client-host-name";
+
+type Params = {
+    hide_host?: boolean;
+    rules_by_client_id: Map<number, BUN_SQLITE_WGUI_CLIENT_RULES[]>;
+    onDeleted?: ({ id }: { id: number }) => void;
+};
+
+export default function buildClientsTableColumns({
+    hide_host,
+    rules_by_client_id,
+    onDeleted,
+}: Params): DataTableColumn<BUN_SQLITE_WGUI_CLIENTS_JOIN>[] {
+    const columns: (DataTableColumn<BUN_SQLITE_WGUI_CLIENTS_JOIN> | null)[] = [
+        {
+            key: "name",
+            header: "Client",
+            render: ({ item }) => <ClientNameCell client={item} />,
+        },
+        hide_host
+            ? null
+            : {
+                  key: "host",
+                  header: "Host",
+                  render: ({ item }) => (
+                      <Link
+                          href={`/admin/hosts/${Number(item.host_id || 0)}`}
+                          className="text-[15px] text-muted! hover:text-fg! no-underline! whitespace-nowrap"
+                      >
+                          {deriveClientHostName({ client: item })}
+                      </Link>
+                  ),
+              },
+        {
+            key: "ip",
+            header: "Tunnel IP",
+            hide_below: "lg",
+            render: ({ item }) => <MonoText>{item.wg_ip_address || "—"}</MonoText>,
+        },
+        {
+            key: "allowed",
+            header: "Allowed IPs",
+            hide_below: "xl",
+            className: "max-w-[200px]",
+            render: ({ item }) => (
+                <MonoText truncate_text className="text-muted">
+                    {item.allow_all_ips ? "0.0.0.0/0, ::/0" : item.allowed_ips || "—"}
+                </MonoText>
+            ),
+        },
+        {
+            key: "access",
+            header: "Access",
+            render: ({ item }) => (
+                <ClientAccessTag rules={rules_by_client_id.get(Number(item.id))} />
+            ),
+        },
+        {
+            key: "key",
+            header: "Public key",
+            hide_below: "xl",
+            className: "max-w-[180px]",
+            render: ({ item }) =>
+                item.public_key ? (
+                    <CopyableValue
+                        value={item.public_key}
+                        label="Public key"
+                        display={`${item.public_key.slice(0, 12)}…`}
+                    />
+                ) : (
+                    <MutedText>—</MutedText>
+                ),
+        },
+        {
+            key: "created",
+            header: "Created",
+            align: "right",
+            hide_below: "lg",
+            render: ({ item }) => (
+                <MutedText className="tabular whitespace-nowrap">
+                    {formatUnixTimestamp({ timestamp: item.created_at })}
+                </MutedText>
+            ),
+        },
+        {
+            key: "actions",
+            header: <span className="sr-only">Actions</span>,
+            align: "right",
+            className: "w-10",
+            render: ({ item }) => (
+                <ClientRowActions client={item} onDeleted={onDeleted} />
+            ),
+        },
+    ];
+
+    return columns.filter(Boolean) as DataTableColumn<BUN_SQLITE_WGUI_CLIENTS_JOIN>[];
+}
diff --git a/src/components/general/clients-table/derive-client-host-name.ts b/src/components/general/clients-table/derive-client-host-name.ts
new file mode 100644
index 0000000..d88b390
--- /dev/null
+++ b/src/components/general/clients-table/derive-client-host-name.ts
@@ -0,0 +1,10 @@
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
+
+type Params = {
+    client: BUN_SQLITE_WGUI_CLIENTS_JOIN;
+};
+
+export default function deriveClientHostName({ client }: Params) {
+    const host_id = Number(client.host_id || 0);
+    return client.host_name || (host_id == 0 ? "Main" : `Host #${host_id}`);
+}
diff --git a/src/components/general/clients-table/index.tsx b/src/components/general/clients-table/index.tsx
new file mode 100644
index 0000000..b3940a7
--- /dev/null
+++ b/src/components/general/clients-table/index.tsx
@@ -0,0 +1,57 @@
+import { useCallback, useMemo, type ReactNode } from "react";
+import DataTable from "../data-table";
+import buildClientsTableColumns from "./clients-table-columns";
+import ClientMobileCard from "./client-mobile-card";
+import type { BUN_SQLITE_WGUI_CLIENT_RULES } from "@/db/types/db";
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
+
+type Props = {
+    /** `undefined` while loading */
+    clients?: BUN_SQLITE_WGUI_CLIENTS_JOIN[];
+    rules_by_client_id: Map<number, BUN_SQLITE_WGUI_CLIENT_RULES[]>;
+    loading?: boolean;
+    hide_host?: boolean;
+    empty?: ReactNode;
+    skeleton_rows?: number;
+    onDeleted?: ({ id }: { id: number }) => void;
+};
+
+export default function ClientsTable({
+    clients,
+    rules_by_client_id,
+    loading,
+    hide_host,
+    empty,
+    skeleton_rows,
+    onDeleted,
+}: Props) {
+    const columns = useMemo(
+        () => buildClientsTableColumns({ hide_host, rules_by_client_id, onDeleted }),
+        [hide_host, rules_by_client_id, onDeleted],
+    );
+
+    const MobileItem = useCallback(
+        ({ item }: { item: BUN_SQLITE_WGUI_CLIENTS_JOIN }) => (
+            <ClientMobileCard
+                client={item}
+                rules={rules_by_client_id.get(Number(item.id))}
+                hide_host={hide_host}
+                onDeleted={onDeleted}
+            />
+        ),
+        [rules_by_client_id, hide_host, onDeleted],
+    );
+
+    return (
+        <DataTable
+            caption="Clients"
+            items={clients}
+            columns={columns}
+            getKey={({ item }) => Number(item.id)}
+            loading={loading}
+            empty={empty}
+            skeleton_rows={skeleton_rows}
+            MobileItem={MobileItem}
+        />
+    );
+}
diff --git a/src/components/general/clients-table/use-delete-client.ts b/src/components/general/clients-table/use-delete-client.ts
new file mode 100644
index 0000000..df726cf
--- /dev/null
+++ b/src/components/general/clients-table/use-delete-client.ts
@@ -0,0 +1,50 @@
+import { useState } from "react";
+import adminCrudHandler from "@/src/functions/frontend/admin-crud-handler";
+import useConfirm from "@/src/hooks/use-confirm";
+import useToast from "@/src/hooks/use-toast";
+import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+
+type Params = {
+    onDeleted?: ({ id }: { id: number }) => void;
+};
+
+export default function useDeleteClient({ onDeleted }: Params = {}) {
+    const { confirm } = useConfirm();
+    const { toast } = useToast();
+    const [deleting, setDeleting] = useState(false);
+
+    async function deleteClient({ client }: { client: BUN_SQLITE_WGUI_CLIENTS }) {
+        const name = client.name || `#${client.id}`;
+
+        const confirmed = await confirm({
+            title: `Delete ${name}?`,
+            message:
+                "The peer is removed from its host and its config file is deleted. Devices using this config will lose access.",
+            confirm_label: "Delete client",
+            tone: "danger",
+        });
+
+        if (!confirmed || !client.id) return false;
+
+        setDeleting(true);
+
+        const res = await adminCrudHandler({
+            action: "delete",
+            table: "clients",
+            id: client.id,
+        });
+
+        setDeleting(false);
+
+        if (!res.success) {
+            toast({ msg: res.msg || "Couldn't delete the client", color: "error" });
+            return false;
+        }
+
+        toast({ msg: `${name} deleted`, color: "success" });
+        onDeleted?.({ id: Number(client.id) });
+        return true;
+    }
+
+    return { deleteClient, deleting };
+}
diff --git a/src/components/general/confirm/confirm-context.ts b/src/components/general/confirm/confirm-context.ts
new file mode 100644
index 0000000..a2eab57
--- /dev/null
+++ b/src/components/general/confirm/confirm-context.ts
@@ -0,0 +1,17 @@
+import { createContext, type ReactNode } from "react";
+
+export type ConfirmParams = {
+    title: string;
+    message?: ReactNode;
+    confirm_label?: string;
+    cancel_label?: string;
+    tone?: "default" | "danger";
+};
+
+export type ConfirmContextValue = {
+    confirm: (params: ConfirmParams) => Promise<boolean>;
+};
+
+export const ConfirmContext = createContext<ConfirmContextValue>({
+    confirm: async () => false,
+});
diff --git a/src/components/general/confirm/confirm-dialog.tsx b/src/components/general/confirm/confirm-dialog.tsx
new file mode 100644
index 0000000..511e4c4
--- /dev/null
+++ b/src/components/general/confirm/confirm-dialog.tsx
@@ -0,0 +1,97 @@
+import Modal from "@/src/components/twui/elements/Modal";
+import Button from "@/src/components/twui/layout/Button";
+import H3 from "@/src/components/twui/layout/H3";
+import P from "@/src/components/twui/layout/P";
+import Row from "@/src/components/twui/layout/Row";
+import Stack from "@/src/components/twui/layout/Stack";
+import { TriangleAlert } from "lucide-react";
+import React, { useEffect, useRef } from "react";
+import type { ConfirmParams } from "./confirm-context";
+
+type Props = {
+    open: boolean;
+    params: ConfirmParams | null;
+    onResolve: ({ confirmed }: { confirmed: boolean }) => void;
+};
+
+export default function ConfirmDialog({ open, params, onResolve }: Props) {
+    const confirmRef = useRef<HTMLButtonElement>(null);
+    const danger = params?.tone == "danger";
+
+    useEffect(() => {
+        if (!open) return;
+
+        const onKey = (e: KeyboardEvent) => {
+            if (e.key == "Escape") onResolve({ confirmed: false });
+        };
+
+        document.addEventListener("keydown", onKey);
+        const focusTimer = setTimeout(() => confirmRef.current?.focus(), 30);
+
+        return () => {
+            document.removeEventListener("keydown", onKey);
+            clearTimeout(focusTimer);
+        };
+    }, [open]);
+
+    const setOpen = ((value: React.SetStateAction<boolean>) => {
+        const next = typeof value == "function" ? value(open) : value;
+        if (!next && open) onResolve({ confirmed: false });
+    }) as React.Dispatch<React.SetStateAction<boolean>>;
+
+    return (
+        <Modal
+            open={open}
+            setOpen={setOpen}
+            no_cancel_button
+            className="max-w-md p-5"
+            aria-labelledby="confirm-dialog-title"
+        >
+            <Stack className="gap-4 w-full">
+                <Row className="gap-3 flex-nowrap items-start">
+                    {danger ? (
+                        <Row className="size-8 shrink-0 justify-center rounded-full bg-error/10 text-error dark:text-error-dark">
+                            <TriangleAlert size={16} />
+                        </Row>
+                    ) : null}
+                    <Stack className="gap-1.5">
+                        <H3 id="confirm-dialog-title" className="text-lg!">
+                            {params?.title}
+                        </H3>
+                        {params?.message ? (
+                            typeof params.message == "string" ? (
+                                <P className="text-[15px] m-0">
+                                    {params.message}
+                                </P>
+                            ) : (
+                                params.message
+                            )
+                        ) : null}
+                    </Stack>
+                </Row>
+                <Row className="w-full justify-end gap-2">
+                    <Button
+                        title={params?.cancel_label || "Cancel"}
+                        type="button"
+                        variant="outlined"
+                        color="gray"
+                        size="small"
+                        onClick={() => onResolve({ confirmed: false })}
+                    >
+                        {params?.cancel_label || "Cancel"}
+                    </Button>
+                    <Button
+                        ref={confirmRef}
+                        title={params?.confirm_label || "Confirm"}
+                        type="button"
+                        color={danger ? "error" : "primary"}
+                        size="small"
+                        onClick={() => onResolve({ confirmed: true })}
+                    >
+                        {params?.confirm_label || "Confirm"}
+                    </Button>
+                </Row>
+            </Stack>
+        </Modal>
+    );
+}
diff --git a/src/components/general/confirm/confirm-provider.tsx b/src/components/general/confirm/confirm-provider.tsx
new file mode 100644
index 0000000..5a08eff
--- /dev/null
+++ b/src/components/general/confirm/confirm-provider.tsx
@@ -0,0 +1,32 @@
+import { useCallback, useRef, useState, type PropsWithChildren } from "react";
+import { ConfirmContext, type ConfirmParams } from "./confirm-context";
+import ConfirmDialog from "./confirm-dialog";
+
+export default function ConfirmProvider({ children }: PropsWithChildren) {
+    const [open, setOpen] = useState(false);
+    const [params, setParams] = useState<ConfirmParams | null>(null);
+    const resolver = useRef<((confirmed: boolean) => void) | null>(null);
+
+    const confirm = useCallback((next: ConfirmParams) => {
+        resolver.current?.(false);
+        setParams(next);
+        setOpen(true);
+
+        return new Promise<boolean>((resolve) => {
+            resolver.current = resolve;
+        });
+    }, []);
+
+    function onResolve({ confirmed }: { confirmed: boolean }) {
+        resolver.current?.(confirmed);
+        resolver.current = null;
+        setOpen(false);
+    }
+
+    return (
+        <ConfirmContext.Provider value={{ confirm }}>
+            {children}
+            <ConfirmDialog open={open} params={params} onResolve={onResolve} />
+        </ConfirmContext.Provider>
+    );
+}
diff --git a/src/components/general/copy-button.tsx b/src/components/general/copy-button.tsx
new file mode 100644
index 0000000..a8d397c
--- /dev/null
+++ b/src/components/general/copy-button.tsx
@@ -0,0 +1,50 @@
+import Button from "@/src/components/twui/layout/Button";
+import useToast from "@/src/hooks/use-toast";
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+import { twMerge } from "tailwind-merge";
+
+type Props = {
+    value: string;
+    /** What is being copied, e.g. "Public key" */
+    label: string;
+    /** Show the word "Copy" next to the icon */
+    show_text?: boolean;
+    className?: string;
+};
+
+export default function CopyButton({ value, label, show_text, className }: Props) {
+    const { toast } = useToast();
+    const [copied, setCopied] = useState(false);
+
+    async function copy() {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            toast({ msg: `${label} copied`, color: "success" });
+            setTimeout(() => setCopied(false), 1500);
+        } catch {
+            toast({ msg: `Couldn't copy ${label.toLowerCase()}`, color: "error" });
+        }
+    }
+
+    const Icon = copied ? Check : Copy;
+
+    return (
+        <Button
+            title={`Copy ${label.toLowerCase()}`}
+            type="button"
+            variant={show_text ? "outlined" : "ghost"}
+            color="gray"
+            size="small"
+            className={twMerge(
+                !show_text && "p-1! rounded-default-sm hover:bg-gray! dark:hover:bg-gray-dark!",
+                className,
+            )}
+            onClick={copy}
+        >
+            <Icon size={show_text ? 14 : 13} />
+            {show_text ? (copied ? "Copied" : "Copy") : null}
+        </Button>
+    );
+}
diff --git a/src/components/general/copyable-value.tsx b/src/components/general/copyable-value.tsx
new file mode 100644
index 0000000..9ac9ef1
--- /dev/null
+++ b/src/components/general/copyable-value.tsx
@@ -0,0 +1,24 @@
+import Row from "@/src/components/twui/layout/Row";
+import type { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+import CopyButton from "./copy-button";
+import MonoText from "./mono-text";
+
+type Props = {
+    value: string;
+    label: string;
+    /** Rendered instead of the raw value (e.g. a shortened key) */
+    display?: ReactNode;
+    className?: string;
+};
+
+export default function CopyableValue({ value, label, display, className }: Props) {
+    return (
+        <Row className={twMerge("gap-1 flex-nowrap min-w-0", className)}>
+            <MonoText truncate_text title={value} className="min-w-0">
+                {display ?? value}
+            </MonoText>
+            <CopyButton value={value} label={label} className="shrink-0" />
+        </Row>
+    );
+}
diff --git a/src/components/general/data-table/data-table-cell.tsx b/src/components/general/data-table/data-table-cell.tsx
new file mode 100644
index 0000000..1906f0f
--- /dev/null
+++ b/src/components/general/data-table/data-table-cell.tsx
@@ -0,0 +1,22 @@
+import { twMerge } from "tailwind-merge";
+import { HideBelowClasses, type DataTableColumn } from "./types";
+
+type Props<T> = {
+    column: DataTableColumn<T>;
+    item: T;
+};
+
+export default function DataTableCell<T>({ column, item }: Props<T>) {
+    return (
+        <td
+            className={twMerge(
+                "px-4 py-2.5 align-middle text-[15px]",
+                column.align == "right" && "text-right",
+                column.hide_below && HideBelowClasses[column.hide_below],
+                column.className,
+            )}
+        >
+            {column.render({ item })}
+        </td>
+    );
+}
diff --git a/src/components/general/data-table/data-table-head-cell.tsx b/src/components/general/data-table/data-table-head-cell.tsx
new file mode 100644
index 0000000..42f9e7d
--- /dev/null
+++ b/src/components/general/data-table/data-table-head-cell.tsx
@@ -0,0 +1,21 @@
+import { twMerge } from "tailwind-merge";
+import { HideBelowClasses, type DataTableColumn } from "./types";
+
+type Props = {
+    column: DataTableColumn<any>;
+};
+
+export default function DataTableHeadCell({ column }: Props) {
+    return (
+        <th
+            scope="col"
+            className={twMerge(
+                "px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-[0.06em] text-subtle whitespace-nowrap",
+                column.align == "right" && "text-right",
+                column.hide_below && HideBelowClasses[column.hide_below],
+            )}
+        >
+            {column.header}
+        </th>
+    );
+}
diff --git a/src/components/general/data-table/data-table-mobile-list.tsx b/src/components/general/data-table/data-table-mobile-list.tsx
new file mode 100644
index 0000000..1b9a5fa
--- /dev/null
+++ b/src/components/general/data-table/data-table-mobile-list.tsx
@@ -0,0 +1,26 @@
+import Stack from "@/src/components/twui/layout/Stack";
+import type { DataTableProps } from "./types";
+import DataTableMobileSkeleton from "./data-table-mobile-skeleton";
+
+type Props<T> = Pick<DataTableProps<T>, "items" | "getKey" | "MobileItem"> & {
+    loading: boolean;
+    skeleton_keys: number[];
+};
+
+export default function DataTableMobileList<T>({
+    items,
+    getKey,
+    MobileItem,
+    loading,
+    skeleton_keys,
+}: Props<T>) {
+    return (
+        <Stack className="w-full gap-0 md:hidden items-stretch">
+            {loading
+                ? skeleton_keys.map((key) => <DataTableMobileSkeleton key={key} />)
+                : items?.map((item) => (
+                      <MobileItem key={getKey({ item })} item={item} />
+                  ))}
+        </Stack>
+    );
+}
diff --git a/src/components/general/data-table/data-table-mobile-skeleton.tsx b/src/components/general/data-table/data-table-mobile-skeleton.tsx
new file mode 100644
index 0000000..7cf3aa6
--- /dev/null
+++ b/src/components/general/data-table/data-table-mobile-skeleton.tsx
@@ -0,0 +1,11 @@
+import LoadingBlock from "@/src/components/twui/elements/LoadingBlock";
+import Stack from "@/src/components/twui/layout/Stack";
+
+export default function DataTableMobileSkeleton() {
+    return (
+        <Stack className="w-full gap-2 p-4 border-t border-line first:border-t-0" aria-hidden>
+            <LoadingBlock className="h-4 w-1/2" />
+            <LoadingBlock className="h-3 w-3/4" />
+        </Stack>
+    );
+}
diff --git a/src/components/general/data-table/data-table-row.tsx b/src/components/general/data-table/data-table-row.tsx
new file mode 100644
index 0000000..2502096
--- /dev/null
+++ b/src/components/general/data-table/data-table-row.tsx
@@ -0,0 +1,17 @@
+import DataTableCell from "./data-table-cell";
+import type { DataTableColumn } from "./types";
+
+type Props<T> = {
+    columns: DataTableColumn<T>[];
+    item: T;
+};
+
+export default function DataTableRow<T>({ columns, item }: Props<T>) {
+    return (
+        <tr className="border-t border-line hover:bg-surface-2 transition-colors">
+            {columns.map((column) => (
+                <DataTableCell key={column.key} column={column} item={item} />
+            ))}
+        </tr>
+    );
+}
diff --git a/src/components/general/data-table/data-table-skeleton-cell.tsx b/src/components/general/data-table/data-table-skeleton-cell.tsx
new file mode 100644
index 0000000..21904d0
--- /dev/null
+++ b/src/components/general/data-table/data-table-skeleton-cell.tsx
@@ -0,0 +1,20 @@
+import LoadingBlock from "@/src/components/twui/elements/LoadingBlock";
+import { twMerge } from "tailwind-merge";
+import { HideBelowClasses, type DataTableColumn } from "./types";
+
+type Props = {
+    column: DataTableColumn<any>;
+};
+
+export default function DataTableSkeletonCell({ column }: Props) {
+    return (
+        <td
+            className={twMerge(
+                "px-4 py-3",
+                column.hide_below && HideBelowClasses[column.hide_below],
+            )}
+        >
+            <LoadingBlock className="h-3.5 w-full max-w-[120px]" />
+        </td>
+    );
+}
diff --git a/src/components/general/data-table/data-table-skeleton-row.tsx b/src/components/general/data-table/data-table-skeleton-row.tsx
new file mode 100644
index 0000000..df7b24f
--- /dev/null
+++ b/src/components/general/data-table/data-table-skeleton-row.tsx
@@ -0,0 +1,16 @@
+import DataTableSkeletonCell from "./data-table-skeleton-cell";
+import type { DataTableColumn } from "./types";
+
+type Props = {
+    columns: DataTableColumn<any>[];
+};
+
+export default function DataTableSkeletonRow({ columns }: Props) {
+    return (
+        <tr className="border-t border-line" aria-hidden>
+            {columns.map((column) => (
+                <DataTableSkeletonCell key={column.key} column={column} />
+            ))}
+        </tr>
+    );
+}
diff --git a/src/components/general/data-table/index.tsx b/src/components/general/data-table/index.tsx
new file mode 100644
index 0000000..c82f927
--- /dev/null
+++ b/src/components/general/data-table/index.tsx
@@ -0,0 +1,68 @@
+import Stack from "@/src/components/twui/layout/Stack";
+import DataTableHeadCell from "./data-table-head-cell";
+import DataTableMobileList from "./data-table-mobile-list";
+import DataTableRow from "./data-table-row";
+import DataTableSkeletonRow from "./data-table-skeleton-row";
+import type { DataTableProps } from "./types";
+
+/**
+ * Desktop table + mobile card list.
+ *
+ * Raw `<table>` elements are used here on purpose: twui `Table` only renders
+ * plain object data and has no column/cell API. Keep all table markup inside
+ * this folder.
+ */
+export default function DataTable<T>({
+    items,
+    columns,
+    getKey,
+    loading,
+    skeleton_rows = 4,
+    empty,
+    MobileItem,
+    caption,
+}: DataTableProps<T>) {
+    const is_loading = Boolean(loading || !items);
+    const skeleton_keys = Array.from({ length: skeleton_rows }, (_, i) => i);
+
+    if (!is_loading && !items?.length && empty) {
+        return <>{empty}</>;
+    }
+
+    return (
+        <Stack className="w-full gap-0 items-stretch">
+            <div className="hidden md:block w-full">
+                <table className="w-full border-collapse">
+                    {caption ? <caption className="sr-only">{caption}</caption> : null}
+                    <thead>
+                        <tr>
+                            {columns.map((column) => (
+                                <DataTableHeadCell key={column.key} column={column} />
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {is_loading
+                            ? skeleton_keys.map((key) => (
+                                  <DataTableSkeletonRow key={key} columns={columns} />
+                              ))
+                            : items?.map((item) => (
+                                  <DataTableRow
+                                      key={getKey({ item })}
+                                      columns={columns}
+                                      item={item}
+                                  />
+                              ))}
+                    </tbody>
+                </table>
+            </div>
+            <DataTableMobileList
+                items={items}
+                getKey={getKey}
+                MobileItem={MobileItem}
+                loading={is_loading}
+                skeleton_keys={skeleton_keys}
+            />
+        </Stack>
+    );
+}
diff --git a/src/components/general/data-table/types.ts b/src/components/general/data-table/types.ts
new file mode 100644
index 0000000..d4d7a12
--- /dev/null
+++ b/src/components/general/data-table/types.ts
@@ -0,0 +1,29 @@
+import type { ComponentType, ReactNode } from "react";
+
+export type DataTableColumn<T> = {
+    key: string;
+    header: ReactNode;
+    align?: "left" | "right";
+    className?: string;
+    /** Hide the column below this breakpoint */
+    hide_below?: "lg" | "xl";
+    render: ({ item }: { item: T }) => ReactNode;
+};
+
+export type DataTableProps<T> = {
+    items?: T[];
+    columns: DataTableColumn<T>[];
+    getKey: ({ item }: { item: T }) => string | number;
+    loading?: boolean;
+    skeleton_rows?: number;
+    /** Rendered when not loading and there are no items */
+    empty?: ReactNode;
+    /** Card rendered for each item below `md` */
+    MobileItem: ComponentType<{ item: T }>;
+    caption?: string;
+};
+
+export const HideBelowClasses: Record<NonNullable<DataTableColumn<any>["hide_below"]>, string> = {
+    lg: "hidden lg:table-cell",
+    xl: "hidden xl:table-cell",
+};
diff --git a/src/components/general/delete-host-button.tsx b/src/components/general/delete-host-button.tsx
deleted file mode 100644
index 23a72c1..0000000
--- a/src/components/general/delete-host-button.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useState } from "react";
-import { Trash2 } from "lucide-react";
-import Button from "@/src/components/twui/layout/Button";
-import fetchApi from "@/src/components/twui/utils/fetch/fetchApi";
-import type { ApiReqParams } from "@/src/types";
-import type { APIResponseObject } from "@moduletrace/bunext/types";
-
-export default function DeleteHostButton({ host_id }: { host_id: number }) {
-    const [deleting, setDeleting] = useState(false);
-
-    async function handleDelete() {
-        if (
-            !window.confirm(
-                `Delete host #${host_id}? All clients and their configurations will be removed.`,
-            )
-        ) {
-            return;
-        }
-
-        setDeleting(true);
-
-        const res = await fetchApi<ApiReqParams, APIResponseObject>(
-            `/api/admin/delete-host`,
-            {
-                method: "DELETE",
-                body: { host_id },
-            },
-        );
-
-        if (!res.success) {
-            setDeleting(false);
-            window.alert(res.msg || "Could not delete the host");
-            return;
-        }
-
-        window.location.pathname = "/admin/hosts";
-    }
-
-    return (
-        <Button
-            title="Delete Host"
-            size="small"
-            variant="ghost"
-            color="error"
-            beforeIcon={<Trash2 size={14} />}
-            disabled={deleting}
-            onClick={handleDelete}
-        />
-    );
-}
diff --git a/src/components/general/empty-state.tsx b/src/components/general/empty-state.tsx
new file mode 100644
index 0000000..8615fce
--- /dev/null
+++ b/src/components/general/empty-state.tsx
@@ -0,0 +1,44 @@
+import H3 from "@/src/components/twui/layout/H3";
+import P from "@/src/components/twui/layout/P";
+import Stack from "@/src/components/twui/layout/Stack";
+import type { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+type Props = {
+    icon?: ReactNode;
+    title: string;
+    description?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+};
+
+export default function EmptyState({
+    icon,
+    title,
+    description,
+    action,
+    className,
+}: Props) {
+    return (
+        <Stack
+            center
+            className={twMerge("w-full gap-3 px-6 py-12 text-center", className)}
+        >
+            {icon ? (
+                <Stack
+                    center
+                    className="size-10 justify-center rounded-full bg-gray dark:bg-gray-dark text-muted"
+                >
+                    {icon}
+                </Stack>
+            ) : null}
+            <Stack center className="gap-1">
+                <H3>{title}</H3>
+                {description ? (
+                    <P className="text-[15px] max-w-sm">{description}</P>
+                ) : null}
+            </Stack>
+            {action}
+        </Stack>
+    );
+}
diff --git a/src/components/general/form-actions.tsx b/src/components/general/form-actions.tsx
new file mode 100644
index 0000000..c1753b2
--- /dev/null
+++ b/src/components/general/form-actions.tsx
@@ -0,0 +1,58 @@
+import Button from "@/src/components/twui/layout/Button";
+import Row from "@/src/components/twui/layout/Row";
+import type { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+type Props = {
+    submit_title: string;
+    loading?: boolean;
+    disabled?: boolean;
+    cancel_href?: string;
+    /** Extra content on the left, e.g. a hint */
+    start?: ReactNode;
+    className?: string;
+};
+
+/** Always rendered — errors show next to fields, never by hiding submit. */
+export default function FormActions({
+    submit_title,
+    loading,
+    disabled,
+    cancel_href,
+    start,
+    className,
+}: Props) {
+    return (
+        <Row
+            className={twMerge(
+                "w-full justify-between gap-3 pt-5 border-t border-line",
+                className,
+            )}
+        >
+            <Row className="min-w-0">{start}</Row>
+            <Row className="gap-2 ml-auto">
+                {cancel_href ? (
+                    <Button
+                        title="Cancel"
+                        type="button"
+                        variant="outlined"
+                        color="gray"
+                        size="small"
+                        href={cancel_href}
+                    >
+                        Cancel
+                    </Button>
+                ) : null}
+                <Button
+                    title={submit_title}
+                    type="submit"
+                    size="small"
+                    loading={loading}
+                    disabled={disabled}
+                >
+                    {submit_title}
+                </Button>
+            </Row>
+        </Row>
+    );
+}
diff --git a/src/components/general/form-section.tsx b/src/components/general/form-section.tsx
new file mode 100644
index 0000000..09a6b2d
--- /dev/null
+++ b/src/components/general/form-section.tsx
@@ -0,0 +1,35 @@
+import H2 from "@/src/components/twui/layout/H2";
+import P from "@/src/components/twui/layout/P";
+import Stack from "@/src/components/twui/layout/Stack";
+import type { PropsWithChildren, ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+type Props = PropsWithChildren & {
+    title: string;
+    description?: ReactNode;
+    className?: string;
+};
+
+/**
+ * A labelled group of fields: label column on the left from `lg`, stacked
+ * above the fields below that.
+ */
+export default function FormSection({ title, description, className, children }: Props) {
+    return (
+        <Stack
+            className={twMerge(
+                "w-full gap-4 lg:grid lg:grid-cols-[220px_1fr] lg:gap-8",
+                "py-6 first:pt-0 border-b border-line last:border-b-0",
+                className,
+            )}
+        >
+            <Stack className="gap-1">
+                <H2 className="text-base!">{title}</H2>
+                {description ? (
+                    <P className="text-[15px]">{description}</P>
+                ) : null}
+            </Stack>
+            <Stack className="w-full gap-4 items-stretch min-w-0">{children}</Stack>
+        </Stack>
+    );
+}
diff --git a/src/components/general/grab-next-subnet-button.tsx b/src/components/general/grab-next-subnet-button.tsx
index 94a82e3..ffae3e1 100644
--- a/src/components/general/grab-next-subnet-button.tsx
+++ b/src/components/general/grab-next-subnet-button.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Wand2 } from "lucide-react";
 import Button from "../twui/layout/Button";
 import fetchApi from "../twui/utils/fetch/fetchApi";
+import useToast from "@/src/hooks/use-toast";
 import type { ApiReqParams } from "@/src/types";
 
 type Props = {
@@ -10,6 +11,7 @@ type Props = {
 
 export default function GrabNextSubnetButton({ onGrab }: Props) {
     const [grabbing, setGrabbing] = useState(false);
+    const { toast } = useToast();
 
     function grabNextSubnet() {
         setGrabbing(true);
@@ -21,6 +23,8 @@ export default function GrabNextSubnetButton({ onGrab }: Props) {
             .then((res) => {
                 if (res?.success && res.msg) {
                     onGrab?.(res.msg);
+                } else {
+                    toast({ msg: "Couldn't find a free subnet", color: "error" });
                 }
             })
             .finally(() => {
@@ -30,17 +34,16 @@ export default function GrabNextSubnetButton({ onGrab }: Props) {
 
     return (
         <Button
-            title="Grab Next Available Subnet"
+            title="Use the next free subnet"
+            type="button"
             variant="outlined"
-            color="primary"
-            beforeIcon={<Wand2 size={16} />}
+            color="gray"
             loading={grabbing}
-            onClick={(e) => {
-                e.preventDefault();
-                grabNextSubnet();
-            }}
+            className="py-2.5"
+            onClick={grabNextSubnet}
         >
-            Grab Next Subnet
+            <Wand2 size={14} />
+            Next free subnet
         </Button>
     );
 }
diff --git a/src/components/general/host-clients-panel.tsx b/src/components/general/host-clients-panel.tsx
new file mode 100644
index 0000000..0242c9b
--- /dev/null
+++ b/src/components/general/host-clients-panel.tsx
@@ -0,0 +1,80 @@
+import { useCallback, useContext } from "react";
+import { Plus, Users } from "lucide-react";
+import Button from "@/src/components/twui/layout/Button";
+import Panel from "./panel";
+import ClientsTable from "./clients-table";
+import EmptyState from "./empty-state";
+import useClientRulesMap from "@/src/hooks/use-client-rules-map";
+import { useAdminCrudGet } from "@/src/hooks/use-admin-crud-get";
+import { AppContext } from "@/src/pages/__root";
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
+
+type Props = {
+    host_id: number;
+    title?: string;
+};
+
+/** Clients of one host. Seeds from `pageProps.clients`/`client_rules`. */
+export default function HostClientsPanel({ host_id, title = "Clients" }: Props) {
+    const { pageProps } = useContext(AppContext);
+
+    const { res: clients, setRes } = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS_JOIN>({
+        table: "clients",
+        sql_query: {
+            query: {
+                host_id: { value: host_id },
+            },
+            order: { field: "created_at", strategy: "DESC" },
+        },
+        initial_res: pageProps?.clients || undefined,
+    });
+
+    const rules_by_client_id = useClientRulesMap(pageProps?.client_rules);
+
+    const onDeleted = useCallback(
+        ({ id }: { id: number }) =>
+            setRes((prev) => prev?.filter((client) => client.id != id)),
+        [],
+    );
+
+    const add_href = `/admin/clients/add?host_id=${host_id}`;
+
+    return (
+        <Panel
+            flush
+            title={title}
+            description={clients ? `${clients.length} on this host` : undefined}
+            actions={
+                <Button
+                    title="Add client"
+                    href={add_href}
+                    variant="outlined"
+                    color="gray"
+                    size="small"
+                >
+                    <Plus size={14} />
+                    Add client
+                </Button>
+            }
+        >
+            <ClientsTable
+                clients={clients}
+                rules_by_client_id={rules_by_client_id}
+                hide_host
+                onDeleted={onDeleted}
+                empty={
+                    <EmptyState
+                        icon={<Users size={18} />}
+                        title="No clients on this host"
+                        description="Clients get a tunnel IP from this host's subnet."
+                        action={
+                            <Button title="Add client" href={add_href} size="small">
+                                Add client
+                            </Button>
+                        }
+                    />
+                }
+            />
+        </Panel>
+    );
+}
diff --git a/src/components/general/host-wg-ip-field.tsx b/src/components/general/host-wg-ip-field.tsx
index 69a53dc..1e2b336 100644
--- a/src/components/general/host-wg-ip-field.tsx
+++ b/src/components/general/host-wg-ip-field.tsx
@@ -1,22 +1,16 @@
 import { useEffect, useState, type RefObject } from "react";
-import { CircleCheck, Loader2, Network, TriangleAlert } from "lucide-react";
+import { Network } from "lucide-react";
 import Input from "../twui/form/Input";
 import Row from "../twui/layout/Row";
-import Span from "../twui/layout/Span";
-import Tag from "../twui/elements/Tag";
 import Stack from "../twui/layout/Stack";
 import fetchApi from "../twui/utils/fetch/fetchApi";
 import type { ApiReqParams } from "@/src/types";
 import GrabNextSubnetButton from "./grab-next-subnet-button";
+import HostWgIpStatus, { type HostWgIpFieldStatus } from "./host-wg-ip-status";
 import type useFormInit from "@/src/hooks/use-form-init";
 import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
 
-export type HostWgIpFieldStatus =
-    | "checking"
-    | "available"
-    | "not_available"
-    | "invalid"
-    | "current";
+export type { HostWgIpFieldStatus };
 
 type Props = ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_HOSTS>> & {
     value: string;
@@ -43,6 +37,7 @@ export default function HostWgIpField({
     setForm,
 }: Props) {
     const [availability, setAvailability] = useState<AvailabilityType>();
+    const [field_key, setFieldKey] = useState(0);
 
     useEffect(() => {
         setAvailability(undefined);
@@ -85,91 +80,34 @@ export default function HostWgIpField({
     }, [ip_status, onStatus]);
 
     return (
-        <Stack className="w-full gap-2">
-            <Row className="w-full flex-nowrap">
+        <Stack className="w-full gap-1.5 items-stretch">
+            <Row className="w-full gap-2 items-end flex-wrap sm:flex-nowrap">
                 <Input
+                    key={field_key}
+                    name="wg_ip_address"
                     defaultValue={value}
                     changeHandler={(v) => {
                         onChange?.(v);
                     }}
-                    prefix={<Network size={17} opacity={0.5} />}
-                    suffix={
-                        <Span className="text-sm opacity-50 whitespace-nowrap">
-                            WireGuard IP Address
-                        </Span>
-                    }
-                    title="Wireguard IP Address"
+                    prefix={<Network size={15} className="text-subtle shrink-0" />}
+                    title="Host tunnel address"
+                    placeholder="e.g. 10.8.0.1"
                     showLabel
                     componentRef={inputRef}
                     autoFocus={autoFocus}
+                    wrapperWrapperProps={{ className: "grow" }}
                 />
-
                 <GrabNextSubnetButton
                     onGrab={(ip) => {
                         setForm((prev) => ({
                             ...prev,
                             wg_ip_address: ip,
                         }));
+                        setFieldKey((k) => k + 1);
                     }}
                 />
             </Row>
-
-            {ip_status === "invalid" ? (
-                <Tag
-                    variant="outlined"
-                    color="error"
-                    className="w-full py-1.5 outline-error/50 bg-error/5!"
-                >
-                    <Row>
-                        <TriangleAlert size={15} />
-                        <Span>Invalid IP</Span>
-                    </Row>
-                </Tag>
-            ) : ip_status === "current" ? (
-                <Tag
-                    variant="outlined"
-                    color="gray"
-                    className="w-full py-1.5 outline-gray/50 bg-gray/5!"
-                >
-                    <Row>
-                        <CircleCheck size={15} />
-                        <Span>Current value</Span>
-                    </Row>
-                </Tag>
-            ) : ip_status === "not_available" ? (
-                <Tag
-                    variant="outlined"
-                    color="error"
-                    className="w-full py-1.5 outline-error/50 bg-error/5!"
-                >
-                    <Row>
-                        <TriangleAlert size={15} />
-                        <Span>Not available</Span>
-                    </Row>
-                </Tag>
-            ) : ip_status === "available" ? (
-                <Tag
-                    variant="outlined"
-                    color="success"
-                    className="w-full py-1.5 outline-success/50 bg-success/5!"
-                >
-                    <Row>
-                        <CircleCheck size={15} />
-                        <Span>Available</Span>
-                    </Row>
-                </Tag>
-            ) : (
-                <Tag
-                    variant="outlined"
-                    color="gray"
-                    className="w-full py-1.5 outline-gray/50 bg-gray/5!"
-                >
-                    <Row>
-                        <Loader2 size={15} className="animate-spin" />
-                        <Span>Checking availability…</Span>
-                    </Row>
-                </Tag>
-            )}
+            <HostWgIpStatus status={ip_status} />
         </Stack>
     );
 }
diff --git a/src/components/general/host-wg-ip-status.tsx b/src/components/general/host-wg-ip-status.tsx
new file mode 100644
index 0000000..041cf28
--- /dev/null
+++ b/src/components/general/host-wg-ip-status.tsx
@@ -0,0 +1,30 @@
+import StatusDot, { type StatusTone } from "./status-dot";
+
+export type HostWgIpFieldStatus =
+    | "checking"
+    | "available"
+    | "not_available"
+    | "invalid"
+    | "current";
+
+const StatusDisplay: Record<HostWgIpFieldStatus, { tone: StatusTone; label: string }> = {
+    checking: { tone: "neutral", label: "Checking availability…" },
+    available: { tone: "success", label: "Subnet available" },
+    not_available: { tone: "error", label: "Subnet already used by another host" },
+    invalid: { tone: "error", label: "Use a host address ending in .1, e.g. 10.8.0.1" },
+    current: { tone: "neutral", label: "Current value" },
+};
+
+type Props = {
+    status: HostWgIpFieldStatus;
+};
+
+export default function HostWgIpStatus({ status }: Props) {
+    const { tone, label } = StatusDisplay[status];
+
+    return (
+        <div aria-live="polite">
+            <StatusDot tone={tone} label={label} pulse={status == "checking"} />
+        </div>
+    );
+}
diff --git a/src/components/general/image-bg.tsx b/src/components/general/image-bg.tsx
deleted file mode 100755
index d003dc6..0000000
--- a/src/components/general/image-bg.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import Img from "@/src/components/twui/layout/Img";
-import type { ComponentProps } from "react";
-import { twMerge } from "tailwind-merge";
-
-type Props = {
-    src: string;
-    img_props?: Omit<ComponentProps<typeof Img>, "alt">;
-};
-
-export default function ImageBG({ src, img_props }: Props) {
-    return (
-        <Img
-            {...img_props}
-            alt="bg image"
-            src={src}
-            className={twMerge(
-                `absolute top-0 left-0 w-full h-full object-cover`,
-                "z-0",
-                img_props?.className,
-            )}
-        />
-    );
-}
diff --git a/src/components/general/inline-alert.tsx b/src/components/general/inline-alert.tsx
new file mode 100644
index 0000000..0284a20
--- /dev/null
+++ b/src/components/general/inline-alert.tsx
@@ -0,0 +1,50 @@
+import Row from "@/src/components/twui/layout/Row";
+import Span from "@/src/components/twui/layout/Span";
+import { CircleCheck, Info, TriangleAlert, type LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+type Tone = "error" | "success" | "warning" | "info";
+
+type Props = {
+    tone: Tone;
+    msg: ReactNode;
+    className?: string;
+};
+
+const ToneStyles: Record<Tone, { className: string; Icon: LucideIcon }> = {
+    error: {
+        className: "border-error/30 bg-error/5 text-error dark:text-error-dark",
+        Icon: TriangleAlert,
+    },
+    success: {
+        className: "border-success/30 bg-success/5 text-success dark:text-success-dark",
+        Icon: CircleCheck,
+    },
+    warning: {
+        className: "border-warning/30 bg-warning/5 text-warning dark:text-warning-dark",
+        Icon: TriangleAlert,
+    },
+    info: {
+        className: "border-line bg-surface-2 text-muted",
+        Icon: Info,
+    },
+};
+
+export default function InlineAlert({ tone, msg, className }: Props) {
+    const { className: toneClassName, Icon } = ToneStyles[tone];
+
+    return (
+        <Row
+            role={tone == "error" ? "alert" : "status"}
+            className={twMerge(
+                "w-full gap-2 flex-nowrap items-start px-3 py-2 rounded-default border",
+                toneClassName,
+                className,
+            )}
+        >
+            <Icon size={15} className="shrink-0 mt-0.5" />
+            <Span className="text-[15px] leading-snug">{msg}</Span>
+        </Row>
+    );
+}
diff --git a/src/components/general/inner-page-hero-section.tsx b/src/components/general/inner-page-hero-section.tsx
deleted file mode 100644
index 47b8c65..0000000
--- a/src/components/general/inner-page-hero-section.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import Section from "@/src/components/twui/layout/Section";
-import Container from "@/src/components/twui/layout/Container";
-import Stack from "@/src/components/twui/layout/Stack";
-import H1 from "@/src/components/twui/layout/H1";
-import Span from "@/src/components/twui/layout/Span";
-import BlurredImageBG from "@/src/components/general/blured-image-bg";
-import { twMerge } from "tailwind-merge";
-
-type Props = {
-    title: string;
-    sub_title?: string;
-    description?: string;
-    bg_image?: string;
-};
-
-export default function InnerPageHeroSection({
-    title,
-    bg_image,
-    description,
-    sub_title,
-}: Props) {
-    return (
-        <Section className={twMerge("")}>
-            <Container className="relative z-10">
-                <Stack className="w-full items-center max-w-3xl mx-auto gap-7">
-                    {sub_title ? (
-                        <Span className="htag">{sub_title}</Span>
-                    ) : null}
-                    <H1 className="text-center font-bold">{title}</H1>
-                    {description ? (
-                        <Span className="text-xl sm:text-2xl leading-snug text-center">
-                            {description}
-                        </Span>
-                    ) : null}
-                </Stack>
-            </Container>
-        </Section>
-    );
-}
diff --git a/src/components/general/key-value-list.tsx b/src/components/general/key-value-list.tsx
new file mode 100644
index 0000000..a2fb2f6
--- /dev/null
+++ b/src/components/general/key-value-list.tsx
@@ -0,0 +1,18 @@
+import Stack from "@/src/components/twui/layout/Stack";
+import { twMerge } from "tailwind-merge";
+import KeyValueRow, { type KeyValueItem } from "./key-value-row";
+
+type Props = {
+    items: KeyValueItem[];
+    className?: string;
+};
+
+export default function KeyValueList({ items, className }: Props) {
+    return (
+        <Stack className={twMerge("w-full gap-0", className)}>
+            {items.map((item) => (
+                <KeyValueRow {...item} key={item.key} />
+            ))}
+        </Stack>
+    );
+}
diff --git a/src/components/general/key-value-row.tsx b/src/components/general/key-value-row.tsx
new file mode 100644
index 0000000..2b75ccb
--- /dev/null
+++ b/src/components/general/key-value-row.tsx
@@ -0,0 +1,35 @@
+import Stack from "@/src/components/twui/layout/Stack";
+import Span from "@/src/components/twui/layout/Span";
+import type { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+import CopyableValue from "./copyable-value";
+import MutedText from "./muted-text";
+
+export type KeyValueItem = {
+    key: string;
+    label: string;
+    value: ReactNode;
+    mono?: boolean;
+    /** Show a copy button for this raw string */
+    copy_value?: string;
+};
+
+export default function KeyValueRow({ label, value, mono, copy_value }: KeyValueItem) {
+    return (
+        <Stack className="sm:grid sm:grid-cols-[160px_1fr] gap-1 sm:gap-4 w-full py-2.5 border-b border-line last:border-b-0">
+            <MutedText>{label}</MutedText>
+            {copy_value ? (
+                <CopyableValue value={copy_value} label={label} display={value} />
+            ) : (
+                <Span
+                    className={twMerge(
+                        "text-[15px] text-fg break-words min-w-0",
+                        mono && "font-mono text-sm tabular break-all",
+                    )}
+                >
+                    {value ?? "—"}
+                </Span>
+            )}
+        </Stack>
+    );
+}
diff --git a/src/components/general/login-shell.tsx b/src/components/general/login-shell.tsx
deleted file mode 100644
index 413dec8..0000000
--- a/src/components/general/login-shell.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { twMerge } from "tailwind-merge";
-import Tag from "../twui/elements/Tag";
-import Row from "../twui/layout/Row";
-import { TriangleAlert, CircleCheck } from "lucide-react";
-import type { PropsWithChildren } from "react";
-import type { TWUIStatusType } from "../twui/hooks/useStatus";
-import Paper from "../twui/elements/Paper";
-import Center from "../twui/layout/Center";
-import Stack from "../twui/layout/Stack";
-import Border from "../twui/elements/Border";
-import Logo from "./logo";
-
-type Props = PropsWithChildren & {
-    title?: string;
-    className?: string;
-    status?: TWUIStatusType;
-};
-
-export default function LoginShell({ children, className, status }: Props) {
-    return (
-        <Stack className="w-screen h-screen justify-center! items-center! overflow-x-hidden overflow-y-auto">
-            <Logo />
-
-            <Border
-                className={twMerge(
-                    "w-full lg:w-[600px] flex-col items-center",
-                    "px-4 sm:px-6 py-8 shadow-md relative",
-                    className,
-                )}
-            >
-                {status?.error && status.msg ? (
-                    <Tag
-                        variant="outlined"
-                        color="error"
-                        className="w-full py-1.5 outline-error/50 bg-error/5!"
-                    >
-                        <Row>
-                            <TriangleAlert size={15} />
-                            <span>{status.msg}</span>
-                        </Row>
-                    </Tag>
-                ) : null}
-                {status?.success && status.msg ? (
-                    <Tag
-                        variant="outlined"
-                        color="success"
-                        className="w-full py-1.5 outline-success/50 bg-success/5!"
-                    >
-                        <Row>
-                            <CircleCheck size={15} />
-                            <span>{status.msg}</span>
-                        </Row>
-                    </Tag>
-                ) : null}
-                {children}
-            </Border>
-        </Stack>
-    );
-}
diff --git a/src/components/general/logo-icon.tsx b/src/components/general/logo-icon.tsx
index ea9b1e1..0052776 100644
--- a/src/components/general/logo-icon.tsx
+++ b/src/components/general/logo-icon.tsx
@@ -1,21 +1,33 @@
 import type { ComponentProps } from "react";
+import { twMerge } from "tailwind-merge";
 import Img from "../twui/layout/Img";
+import Span from "../twui/layout/Span";
 
 type Props = {
     icon_size?: number;
     img_props?: Omit<ComponentProps<typeof Img>, "alt">;
-    white?: boolean;
+    className?: string;
 };
 
-export default function LogoIcon({ icon_size = 45, img_props, white }: Props) {
+/** Swaps to the white mark in dark mode. */
+export default function LogoIcon({ icon_size = 32, img_props, className }: Props) {
     return (
-        <Img
-            size={icon_size}
-            {...img_props}
-            alt="Logo Icon"
-            src={
-                white ? "/logos/wgui-logo-white.webp" : "/logos/wgui-logo.webp"
-            }
-        />
+        <Span className={twMerge("inline-flex shrink-0", className)}>
+            <Img
+                size={icon_size}
+                {...img_props}
+                alt="wg-ui"
+                src="/logos/wgui-logo-red.png"
+                className={twMerge("dark:hidden", img_props?.className)}
+            />
+            <Img
+                size={icon_size}
+                {...img_props}
+                alt=""
+                aria-hidden
+                src="/logos/wgui-logo-white.webp"
+                className={twMerge("hidden dark:block", img_props?.className)}
+            />
+        </Span>
     );
 }
diff --git a/src/components/general/logo.tsx b/src/components/general/logo.tsx
index 90eb9c7..c391a45 100644
--- a/src/components/general/logo.tsx
+++ b/src/components/general/logo.tsx
@@ -1,57 +1,24 @@
+import Link from "../twui/layout/Link";
 import Row from "../twui/layout/Row";
 import Span from "../twui/layout/Span";
-import type { ComponentProps, PropsWithChildren } from "react";
 import { twMerge } from "tailwind-merge";
-import Stack from "../twui/layout/Stack";
 import LogoIcon from "./logo-icon";
-import { SiteData } from "@/src/data/site-data";
 
 type Props = {
     icon_size?: number;
-    text_wrapper_props?: ComponentProps<typeof Stack>;
-    text_props?: ComponentProps<typeof Span>;
-    white?: boolean;
+    href?: string;
+    className?: string;
 };
 
-export default function Logo({
-    icon_size = 45,
-    text_props,
-    text_wrapper_props,
-    white,
-}: Props) {
+export default function Logo({ icon_size = 28, href = "/admin", className }: Props) {
     return (
-        <a href="/" className="logo-link">
-            <Row className="gap-2! flex-nowrap">
-                <LogoIcon icon_size={icon_size} white={white} />
-                <Stack
-                    {...text_wrapper_props}
-                    className={twMerge("gap-1!", text_wrapper_props?.className)}
-                >
-                    <Stack className="gap-0!">
-                        <HeroText text_props={text_props}>wg-ui</HeroText>
-                    </Stack>
-                </Stack>
+        <Link href={href} className={twMerge("no-underline! text-fg!", className)}>
+            <Row className="gap-2 flex-nowrap">
+                <LogoIcon icon_size={icon_size} />
+                <Span className="text-lg font-semibold tracking-tight whitespace-nowrap">
+                    wg-ui
+                </Span>
             </Row>
-        </a>
-    );
-}
-
-function HeroText({
-    text_props,
-    children,
-}: PropsWithChildren & {
-    text_props?: ComponentProps<typeof Span>;
-}) {
-    return (
-        <Span
-            {...text_props}
-            className={twMerge(
-                "text-xl text-dark font-serif whitespace-nowrap",
-                "heading leading-[24px]",
-                text_props?.className,
-            )}
-        >
-            {children}
-        </Span>
+        </Link>
     );
 }
diff --git a/src/components/general/main-hero-section.tsx b/src/components/general/main-hero-section.tsx
deleted file mode 100755
index 0f6e9a2..0000000
--- a/src/components/general/main-hero-section.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, { type ComponentProps, type ReactNode } from "react";
-import Section from "@/src/components/twui/layout/Section";
-import Container from "@/src/components/twui/layout/Container";
-import Stack from "@/src/components/twui/layout/Stack";
-import H1 from "@/src/components/twui/layout/H1";
-import Row from "@/src/components/twui/layout/Row";
-import { twMerge } from "tailwind-merge";
-import Span from "@/src/components/twui/layout/Span";
-import BlurredImageBG from "@/src/components/general/blured-image-bg";
-import ImageBG from "@/src/components/general/image-bg";
-import type Img from "../twui/layout/Img";
-
-type Props = {
-    title: string;
-    image_url?: string;
-    sub_title?: string;
-    cta_buttons?: ReactNode;
-    img_props?: Omit<ComponentProps<typeof Img>, "alt">;
-    img_component?: ReactNode;
-};
-
-export default function MainHeroSection({
-    title,
-    cta_buttons,
-    sub_title,
-    image_url,
-    img_props,
-    img_component,
-}: Props) {
-    const img_comp = img_component ? (
-        img_component
-    ) : image_url ? (
-        <ImageBG src={image_url} img_props={img_props} />
-    ) : null;
-
-    return (
-        <React.Fragment>
-            <Section className={twMerge("relative")}>
-                <Container>
-                    <Row className="grid xl:grid-cols-2 relative z-10 max-w-xl xl:max-w-none lg:pb-20 pt-60 lg:pt-20">
-                        <Stack className="w-full gap-8">
-                            <H1
-                                className={twMerge(
-                                    "text-center md:text-left w-full",
-                                )}
-                            >
-                                {title}
-                            </H1>
-                            {sub_title ? (
-                                <Span
-                                    className={twMerge(
-                                        "text-lg sm:text-2xl leading-snug text-center md:text-left",
-                                    )}
-                                >
-                                    {sub_title}
-                                </Span>
-                            ) : null}
-                            {cta_buttons}
-                        </Stack>
-                        {/* <Stack className="relative w-full xl:w-[700px] xl:h-full overflow-visible"></Stack> */}
-                    </Row>
-                </Container>
-            </Section>
-        </React.Fragment>
-    );
-}
diff --git a/src/components/general/mono-text.tsx b/src/components/general/mono-text.tsx
new file mode 100644
index 0000000..e7dc603
--- /dev/null
+++ b/src/components/general/mono-text.tsx
@@ -0,0 +1,21 @@
+import Span from "@/src/components/twui/layout/Span";
+import type { ComponentProps } from "react";
+import { twMerge } from "tailwind-merge";
+
+type Props = ComponentProps<typeof Span> & {
+    truncate_text?: boolean;
+};
+
+/** IPs, keys, paths, ports. */
+export default function MonoText({ truncate_text, className, ...props }: Props) {
+    return (
+        <Span
+            {...props}
+            className={twMerge(
+                "font-mono text-sm tabular",
+                truncate_text && "truncate block max-w-full",
+                className,
+            )}
+        />
+    );
+}
diff --git a/src/components/general/muted-text.tsx b/src/components/general/muted-text.tsx
new file mode 100644
index 0000000..ecc15ef
--- /dev/null
+++ b/src/components/general/muted-text.tsx
@@ -0,0 +1,40 @@
+import Span from "@/src/components/twui/layout/Span";
+import type { ComponentProps } from "react";
+import { twMerge } from "tailwind-merge";
+
+type Props = Omit<ComponentProps<typeof Span>, "size"> & {
+    text_size?: "xs" | "sm";
+    tone?: "muted" | "subtle" | "error" | "success" | "warning";
+    mono?: boolean;
+};
+
+const ToneClasses: Record<NonNullable<Props["tone"]>, string> = {
+    muted: "text-muted",
+    subtle: "text-subtle",
+    error: "text-error dark:text-error-dark",
+    success: "text-success dark:text-success-dark",
+    warning: "text-warning dark:text-warning-dark",
+};
+
+/**
+ * Secondary text. Use instead of hand-written `text-sm opacity…` strings.
+ */
+export default function MutedText({
+    text_size = "sm",
+    tone = "muted",
+    mono,
+    className,
+    ...props
+}: Props) {
+    return (
+        <Span
+            {...props}
+            className={twMerge(
+                text_size == "xs" ? "text-[13px]" : "text-[15px]",
+                ToneClasses[tone],
+                mono && "font-mono tabular",
+                className,
+            )}
+        />
+    );
+}
diff --git a/src/components/general/page-body.tsx b/src/components/general/page-body.tsx
new file mode 100644
index 0000000..de86d87
--- /dev/null
+++ b/src/components/general/page-body.tsx
@@ -0,0 +1,20 @@
+import Stack from "@/src/components/twui/layout/Stack";
+import type { PropsWithChildren } from "react";
+import { twMerge } from "tailwind-merge";
+
+type Props = PropsWithChildren & {
+    className?: string;
+};
+
+export default function PageBody({ children, className }: Props) {
+    return (
+        <Stack
+            className={twMerge(
+                "w-full items-stretch gap-5 px-4 sm:px-6 pb-10",
+                className,
+            )}
+        >
+            {children}
+        </Stack>
+    );
+}
diff --git a/src/components/general/page-header/index.tsx b/src/components/general/page-header/index.tsx
new file mode 100644
index 0000000..aeaf5c0
--- /dev/null
+++ b/src/components/general/page-header/index.tsx
@@ -0,0 +1,67 @@
+import H1 from "@/src/components/twui/layout/H1";
+import Link from "@/src/components/twui/layout/Link";
+import P from "@/src/components/twui/layout/P";
+import Row from "@/src/components/twui/layout/Row";
+import Stack from "@/src/components/twui/layout/Stack";
+import { ArrowLeft } from "lucide-react";
+import type { ReactNode } from "react";
+import type { ActionMenuItem } from "../action-menu/types";
+import PageHeaderActions from "./page-header-actions";
+
+type Props = {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Inline status line under the title (status dots, mono values) */
+    meta?: ReactNode;
+    primary_action?: ActionMenuItem;
+    actions?: ActionMenuItem[];
+    back?: { href: string; title: string };
+    /** Rendered under the title row, e.g. a `SubNav` */
+    nav?: ReactNode;
+};
+
+export default function PageHeader({
+    title,
+    description,
+    meta,
+    primary_action,
+    actions,
+    back,
+    nav,
+}: Props) {
+    return (
+        <Stack className="w-full gap-3 px-4 sm:px-6 pt-6 pb-5">
+            {back ? (
+                <Link
+                    href={back.href}
+                    className="text-[15px] text-muted! hover:text-fg! no-underline!"
+                >
+                    <Row className="gap-1">
+                        <ArrowLeft size={14} />
+                        {back.title}
+                    </Row>
+                </Link>
+            ) : null}
+            <Row className="w-full justify-between items-start gap-4 flex-nowrap">
+                <Stack className="gap-1.5 min-w-0">
+                    <H1 className="break-words">{title}</H1>
+                    {description ? (
+                        typeof description == "string" ? (
+                            <P className="text-[15px] max-w-2xl">
+                                {description}
+                            </P>
+                        ) : (
+                            description
+                        )
+                    ) : null}
+                    {meta ? <Row className="gap-x-4 gap-y-1">{meta}</Row> : null}
+                </Stack>
+                <PageHeaderActions
+                    primary_action={primary_action}
+                    actions={actions}
+                />
+            </Row>
+            {nav ? <div className="w-full pt-2">{nav}</div> : null}
+        </Stack>
+    );
+}
diff --git a/src/components/general/page-header/page-header-action.tsx b/src/components/general/page-header/page-header-action.tsx
new file mode 100644
index 0000000..f299987
--- /dev/null
+++ b/src/components/general/page-header/page-header-action.tsx
@@ -0,0 +1,34 @@
+import Button from "@/src/components/twui/layout/Button";
+import type { ActionMenuItem } from "../action-menu/types";
+
+type Props = ActionMenuItem & {
+    primary?: boolean;
+};
+
+export default function PageHeaderAction({
+    title,
+    href,
+    onClick,
+    icon,
+    tone,
+    disabled,
+    loading,
+    primary,
+}: Props) {
+    return (
+        <Button
+            title={title}
+            type="button"
+            size="small"
+            href={href}
+            onClick={onClick}
+            disabled={disabled}
+            loading={loading}
+            variant={primary ? "normal" : "outlined"}
+            color={tone == "danger" ? "error" : primary ? "primary" : "gray"}
+        >
+            {icon}
+            {title}
+        </Button>
+    );
+}
diff --git a/src/components/general/page-header/page-header-actions.tsx b/src/components/general/page-header/page-header-actions.tsx
new file mode 100644
index 0000000..e19a5d2
--- /dev/null
+++ b/src/components/general/page-header/page-header-actions.tsx
@@ -0,0 +1,37 @@
+import Row from "@/src/components/twui/layout/Row";
+import ActionMenu from "../action-menu";
+import type { ActionMenuItem } from "../action-menu/types";
+import PageHeaderAction from "./page-header-action";
+
+type Props = {
+    primary_action?: ActionMenuItem;
+    actions?: ActionMenuItem[];
+};
+
+/**
+ * From `sm` up every action is a button. Below `sm` only the primary action
+ * stays visible and the rest collapse into an overflow menu.
+ */
+export default function PageHeaderActions({ primary_action, actions }: Props) {
+    const secondary = actions || [];
+
+    return (
+        <Row className="gap-2 flex-nowrap shrink-0">
+            <Row className="hidden sm:flex gap-2">
+                {secondary.map((action) => (
+                    <PageHeaderAction {...action} key={action.key} />
+                ))}
+            </Row>
+            {secondary.length ? (
+                <ActionMenu
+                    label="More actions"
+                    items={secondary}
+                    className="sm:hidden"
+                />
+            ) : null}
+            {primary_action ? (
+                <PageHeaderAction {...primary_action} primary />
+            ) : null}
+        </Row>
+    );
+}
diff --git a/src/components/general/panel/index.tsx b/src/components/general/panel/index.tsx
new file mode 100644
index 0000000..68f00d1
--- /dev/null
+++ b/src/components/general/panel/index.tsx
@@ -0,0 +1,64 @@
+import Card from "@/src/components/twui/elements/Card";
+import Stack from "@/src/components/twui/layout/Stack";
+import type { PropsWithChildren, ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+import PanelHeader from "./panel-header";
+
+type Props = PropsWithChildren & {
+    title?: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    /** Remove body padding (tables, lists) */
+    flush?: boolean;
+    footer?: ReactNode;
+    className?: string;
+    body_class_name?: string;
+};
+
+/**
+ * Bordered surface with an optional header. The app's single card style.
+ */
+export default function Panel({
+    title,
+    description,
+    actions,
+    flush,
+    footer,
+    className,
+    body_class_name,
+    children,
+}: Props) {
+    const has_header = Boolean(title || description || actions);
+
+    return (
+        <Card
+            noHover
+            className={twMerge(
+                "flex-col items-stretch p-0 w-full overflow-visible",
+                className,
+            )}
+        >
+            {has_header ? (
+                <PanelHeader
+                    title={title}
+                    description={description}
+                    actions={actions}
+                />
+            ) : null}
+            <Stack
+                className={twMerge(
+                    "w-full items-stretch gap-4",
+                    flush ? "p-0 gap-0" : "p-4",
+                    body_class_name,
+                )}
+            >
+                {children}
+            </Stack>
+            {footer ? (
+                <Stack className="w-full items-stretch px-4 py-3 border-t border-line">
+                    {footer}
+                </Stack>
+            ) : null}
+        </Card>
+    );
+}
diff --git a/src/components/general/panel/panel-header.tsx b/src/components/general/panel/panel-header.tsx
new file mode 100644
index 0000000..33085bf
--- /dev/null
+++ b/src/components/general/panel/panel-header.tsx
@@ -0,0 +1,23 @@
+import H2 from "@/src/components/twui/layout/H2";
+import Row from "@/src/components/twui/layout/Row";
+import Stack from "@/src/components/twui/layout/Stack";
+import type { ReactNode } from "react";
+import MutedText from "../muted-text";
+
+type Props = {
+    title?: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+};
+
+export default function PanelHeader({ title, description, actions }: Props) {
+    return (
+        <Row className="w-full justify-between gap-3 px-4 py-3 border-b border-line">
+            <Stack className="gap-0.5 min-w-0">
+                {title ? <H2 className="text-base!">{title}</H2> : null}
+                {description ? <MutedText>{description}</MutedText> : null}
+            </Stack>
+            {actions ? <Row className="gap-2">{actions}</Row> : null}
+        </Row>
+    );
+}
diff --git a/src/components/general/rect-image.tsx b/src/components/general/rect-image.tsx
deleted file mode 100755
index 91ffaff..0000000
--- a/src/components/general/rect-image.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import Img from "@/src/components/twui/layout/Img";
-import { twMerge } from "tailwind-merge";
-import Stack from "../twui/layout/Stack";
-
-type Props = {
-    src: string;
-    width?: number;
-    height?: number;
-    alt?: string;
-};
-
-export default function RectImage({
-    src,
-    height = 300,
-    width = 200,
-    alt,
-}: Props) {
-    const img_component = (
-        <Img
-            alt={alt || "image"}
-            src={src}
-            className={twMerge(`w-full h-full object-cover`)}
-        />
-    );
-
-    return (
-        <>
-            <Stack
-                className={twMerge(`overflow-hidden hidden xl:flex`)}
-                style={{
-                    width: `${width}px`,
-                    height: `${height}px`,
-                }}
-            >
-                {img_component}
-            </Stack>
-            <Stack className={twMerge(`overflow-hidden flex xl:hidden w-full`)}>
-                {img_component}
-            </Stack>
-        </>
-    );
-}
diff --git a/src/components/general/section-label.tsx b/src/components/general/section-label.tsx
new file mode 100644
index 0000000..35378b5
--- /dev/null
+++ b/src/components/general/section-label.tsx
@@ -0,0 +1,20 @@
+import Span from "@/src/components/twui/layout/Span";
+import type { PropsWithChildren } from "react";
+import { twMerge } from "tailwind-merge";
+
+type Props = PropsWithChildren & {
+    className?: string;
+};
+
+export default function SectionLabel({ children, className }: Props) {
+    return (
+        <Span
+            className={twMerge(
+                "text-xs font-semibold uppercase tracking-[0.08em] text-subtle",
+                className,
+            )}
+        >
+            {children}
+        </Span>
+    );
+}
diff --git a/src/components/general/setup-main-host-button.tsx b/src/components/general/setup-main-host-button.tsx
deleted file mode 100755
index adcff92..0000000
--- a/src/components/general/setup-main-host-button.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { useState, type ComponentProps } from "react";
-import Button from "../twui/layout/Button";
-import useStatus from "../twui/hooks/useStatus";
-import fetchApi from "../twui/utils/fetch/fetchApi";
-import type { ApiReqParams } from "@/src/types";
-import Row from "../twui/layout/Row";
-import Stack from "../twui/layout/Stack";
-import { CircleCheck, TriangleAlert } from "lucide-react";
-import Span from "../twui/layout/Span";
-import Tag from "../twui/elements/Tag";
-import { AppData } from "@/src/data/app-data";
-import type { APIResponseObject } from "@moduletrace/bunext/types";
-import HostWgIpField, { type HostWgIpFieldStatus } from "./host-wg-ip-field";
-import GrabNextSubnetButton from "./grab-next-subnet-button";
-
-type Props = {
-    button_props?: Omit<ComponentProps<typeof Button>, "title">;
-};
-
-export default function SetupMainHostButton({ button_props }: Props) {
-    const { loading, setLoading, status, setStatus } = useStatus();
-
-    const [wgIP, setWgIP] = useState<string>(AppData["DefaultPrivateIP"]);
-    const [ipStatus, setIpStatus] = useState<HostWgIpFieldStatus>("checking");
-
-    return (
-        <Stack className="w-full items-stretch gap-3">
-            {status?.error && status.msg ? (
-                <Tag
-                    variant="outlined"
-                    color="error"
-                    className="w-full py-1.5 outline-error/50 bg-error/5!"
-                >
-                    <Row>
-                        <TriangleAlert size={15} />
-                        <Span>{status.msg}</Span>
-                    </Row>
-                </Tag>
-            ) : null}
-            {status?.success && status.msg ? (
-                <Tag
-                    variant="outlined"
-                    color="success"
-                    className="w-full py-1.5 outline-success/50 bg-success/5!"
-                >
-                    <Row>
-                        <CircleCheck size={15} />
-                        <Span>{status.msg}</Span>
-                    </Row>
-                </Tag>
-            ) : null}
-
-            <Row className="w-full items-center gap-2">
-                <GrabNextSubnetButton onGrab={setWgIP} />
-
-                <Button
-                    title="Setup Main Host"
-                    {...button_props}
-                    disabled={ipStatus !== "available"}
-                    loading={loading}
-                    onClick={() => {
-                        setLoading(true);
-                        setStatus(undefined);
-
-                        fetchApi<ApiReqParams, APIResponseObject>(
-                            `/api/admin/setup-main-host`,
-                            {
-                                method: "POST",
-                                body: { ip_address: wgIP },
-                            },
-                        )
-                            .then((res) => {
-                                if (res.success) {
-                                    window.location.reload();
-                                }
-
-                                setStatus({
-                                    success: res.success,
-                                    error: !res.success,
-                                    msg: res.msg,
-                                });
-                            })
-                            .finally(() => {
-                                setLoading(false);
-                            });
-                    }}
-                >
-                    Setup Main Host
-                </Button>
-            </Row>
-        </Stack>
-    );
-}
diff --git a/src/components/general/stat-tile.tsx b/src/components/general/stat-tile.tsx
new file mode 100644
index 0000000..1c872e4
--- /dev/null
+++ b/src/components/general/stat-tile.tsx
@@ -0,0 +1,56 @@
+import Card from "@/src/components/twui/elements/Card";
+import LoadingBlock from "@/src/components/twui/elements/LoadingBlock";
+import Span from "@/src/components/twui/layout/Span";
+import Stack from "@/src/components/twui/layout/Stack";
+import type { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+import MutedText from "./muted-text";
+import SectionLabel from "./section-label";
+
+type Props = {
+    label: string;
+    value?: ReactNode;
+    hint?: ReactNode;
+    loading?: boolean;
+    mono?: boolean;
+    href?: string;
+    className?: string;
+};
+
+export default function StatTile({
+    label,
+    value,
+    hint,
+    loading,
+    mono,
+    href,
+    className,
+}: Props) {
+    const is_loading = loading || value === undefined;
+
+    return (
+        <Card
+            href={href}
+            noHover={!href}
+            linkProps={{ className: "no-underline! block" }}
+            className={twMerge("flex-col items-start gap-2 p-4 h-full", className)}
+        >
+            <SectionLabel>{label}</SectionLabel>
+            <Stack className="gap-1 min-w-0 w-full">
+                {is_loading ? (
+                    <LoadingBlock className="h-7 w-20" />
+                ) : (
+                    <Span
+                        className={twMerge(
+                            "text-3xl font-semibold tracking-tight text-fg tabular truncate max-w-full",
+                            mono && "font-mono text-xl",
+                        )}
+                    >
+                        {value}
+                    </Span>
+                )}
+                {hint ? <MutedText text_size="xs">{hint}</MutedText> : null}
+            </Stack>
+        </Card>
+    );
+}
diff --git a/src/components/general/status-dot.tsx b/src/components/general/status-dot.tsx
new file mode 100644
index 0000000..4b74df7
--- /dev/null
+++ b/src/components/general/status-dot.tsx
@@ -0,0 +1,52 @@
+import Row from "@/src/components/twui/layout/Row";
+import Span from "@/src/components/twui/layout/Span";
+import { twMerge } from "tailwind-merge";
+
+export type StatusTone = "success" | "warning" | "error" | "neutral";
+
+type Props = {
+    tone: StatusTone;
+    label?: string;
+    /** Keep the label for screen readers only */
+    hide_label?: boolean;
+    pulse?: boolean;
+    className?: string;
+};
+
+const DotClasses: Record<StatusTone, string> = {
+    success: "bg-success dark:bg-success-dark",
+    warning: "bg-warning dark:bg-warning-dark",
+    error: "bg-error dark:bg-error-dark",
+    neutral: "bg-subtle",
+};
+
+export default function StatusDot({
+    tone,
+    label,
+    hide_label,
+    pulse,
+    className,
+}: Props) {
+    return (
+        <Row className={twMerge("gap-1.5 flex-nowrap", className)}>
+            <Span
+                aria-hidden
+                className={twMerge(
+                    "inline-block size-2 shrink-0 rounded-full",
+                    DotClasses[tone],
+                    pulse && "animate-pulse",
+                )}
+            />
+            {label ? (
+                <Span
+                    className={twMerge(
+                        "text-[15px] text-muted whitespace-nowrap",
+                        hide_label && "sr-only",
+                    )}
+                >
+                    {label}
+                </Span>
+            ) : null}
+        </Row>
+    );
+}
diff --git a/src/components/general/sub-nav/index.tsx b/src/components/general/sub-nav/index.tsx
new file mode 100644
index 0000000..49c569d
--- /dev/null
+++ b/src/components/general/sub-nav/index.tsx
@@ -0,0 +1,32 @@
+import { useContext } from "react";
+import Row from "@/src/components/twui/layout/Row";
+import { AppContext } from "@/src/pages/__root";
+import SubNavItem, { type SubNavItemType } from "./sub-nav-item";
+
+type Props = {
+    label: string;
+    items: SubNavItemType[];
+};
+
+/** Link tabs between sibling routes (unlike twui `Tabs`, each is a URL). */
+export default function SubNav({ label, items }: Props) {
+    const { pageProps } = useContext(AppContext);
+    const pathname = pageProps?.url?.pathname;
+
+    return (
+        <nav aria-label={label} className="w-full border-b border-line">
+            <Row className="gap-0 flex-nowrap overflow-x-auto overflow-y-hidden">
+                {items.map((item) => (
+                    <SubNavItem
+                        {...item}
+                        key={item.href}
+                        active={
+                            pathname == item.href ||
+                            Boolean(pathname?.startsWith(`${item.href}/`))
+                        }
+                    />
+                ))}
+            </Row>
+        </nav>
+    );
+}
diff --git a/src/components/general/sub-nav/sub-nav-item.tsx b/src/components/general/sub-nav/sub-nav-item.tsx
new file mode 100644
index 0000000..8c5cc92
--- /dev/null
+++ b/src/components/general/sub-nav/sub-nav-item.tsx
@@ -0,0 +1,33 @@
+import Link from "@/src/components/twui/layout/Link";
+import Row from "@/src/components/twui/layout/Row";
+import type { LucideIcon } from "lucide-react";
+import { twMerge } from "tailwind-merge";
+
+export type SubNavItemType = {
+    title: string;
+    href: string;
+    Icon?: LucideIcon;
+};
+
+type Props = SubNavItemType & {
+    active: boolean;
+};
+
+export default function SubNavItem({ title, href, Icon, active }: Props) {
+    return (
+        <Link
+            href={href}
+            aria-current={active ? "page" : undefined}
+            className={twMerge(
+                "px-3 py-2.5 -mb-px border-b-2 border-transparent no-underline! whitespace-nowrap",
+                "text-base font-medium text-muted! hover:text-fg! transition-colors",
+                active && "text-fg! border-primary dark:border-primary-dark",
+            )}
+        >
+            <Row className="gap-2 flex-nowrap">
+                {Icon ? <Icon size={16} className={active ? "" : "opacity-70"} /> : null}
+                {title}
+            </Row>
+        </Link>
+    );
+}
diff --git a/src/components/general/tagline-section.tsx b/src/components/general/tagline-section.tsx
deleted file mode 100755
index e875639..0000000
--- a/src/components/general/tagline-section.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import Section from "@/src/components/twui/layout/Section";
-import Container from "@/src/components/twui/layout/Container";
-import H2 from "@/src/components/twui/layout/H2";
-import Stack from "@/src/components/twui/layout/Stack";
-import type { TWUILucideIconName } from "../twui/elements/lucide-icon";
-import LucideIcon from "../twui/elements/lucide-icon";
-import Span from "../twui/layout/Span";
-import type { ReactNode } from "react";
-
-type Props = {
-    tagline: string;
-    icon_name?: TWUILucideIconName;
-    sub_title?: string;
-    post_component?: ReactNode;
-};
-
-export default function TaglineSection({
-    tagline,
-    icon_name,
-    sub_title,
-    post_component,
-}: Props) {
-    /**
-     * Render component
-     */
-    return (
-        <Section className="bg-secondary relative">
-            <Container className="xl:py-10">
-                <Stack className="w-full items-center gap-6">
-                    {icon_name && (
-                        <LucideIcon
-                            name={icon_name}
-                            size={50}
-                            className="text-accent"
-                        />
-                    )}
-                    <H2 className="text-center max-w-4xl xl:text-6xl! text-white">
-                        {tagline}
-                    </H2>
-                    {sub_title ? (
-                        <Span
-                            className="text-white/80 max-w-4xl text-center"
-                            size="larger"
-                        >
-                            {sub_title}
-                        </Span>
-                    ) : null}
-                    {post_component}
-                </Stack>
-            </Container>
-        </Section>
-    );
-}
diff --git a/src/components/general/theme/theme-script.tsx b/src/components/general/theme/theme-script.tsx
new file mode 100644
index 0000000..de053d9
--- /dev/null
+++ b/src/components/general/theme/theme-script.tsx
@@ -0,0 +1,11 @@
+import { ThemeCookieName } from "@/src/dict/theme-dict";
+
+/**
+ * Runs before first paint so the page never flashes the wrong theme. Reads
+ * the cookie in the browser; no server value is interpolated into the script.
+ */
+const script = `(function(){try{var m=(document.cookie.match(/(?:^|; )${ThemeCookieName}=(light|dark|system)/)||[])[1]||"system";var d=m==="dark"||(m==="system"&&window.matchMedia("(prefers-color-scheme: dark)").matches);document.documentElement.classList.toggle("dark",d);}catch(e){}})();`;
+
+export default function ThemeScript() {
+    return <script dangerouslySetInnerHTML={{ __html: script }} />;
+}
diff --git a/src/components/general/theme/theme-toggle-option.tsx b/src/components/general/theme/theme-toggle-option.tsx
new file mode 100644
index 0000000..d0e5148
--- /dev/null
+++ b/src/components/general/theme/theme-toggle-option.tsx
@@ -0,0 +1,38 @@
+import Button from "@/src/components/twui/layout/Button";
+import type { ThemeMode } from "@/src/dict/theme-dict";
+import type { LucideIcon } from "lucide-react";
+import { twMerge } from "tailwind-merge";
+
+type Props = {
+    mode: ThemeMode;
+    label: string;
+    Icon: LucideIcon;
+    active: boolean;
+    onSelect: ({ mode }: { mode: ThemeMode }) => void;
+};
+
+export default function ThemeToggleOption({
+    mode,
+    label,
+    Icon,
+    active,
+    onSelect,
+}: Props) {
+    return (
+        <Button
+            title={`${label} theme`}
+            variant="ghost"
+            color="gray"
+            type="button"
+            role="radio"
+            aria-checked={active}
+            className={twMerge(
+                "p-1.5! rounded-default-sm text-muted!",
+                active && "bg-surface! text-fg! shadow-sm",
+            )}
+            onClick={() => onSelect({ mode })}
+        >
+            <Icon size={14} />
+        </Button>
+    );
+}
diff --git a/src/components/general/theme/theme-toggle.tsx b/src/components/general/theme/theme-toggle.tsx
new file mode 100644
index 0000000..578a9cb
--- /dev/null
+++ b/src/components/general/theme/theme-toggle.tsx
@@ -0,0 +1,40 @@
+import Row from "@/src/components/twui/layout/Row";
+import useTheme from "@/src/hooks/use-theme";
+import type { ThemeMode } from "@/src/dict/theme-dict";
+import { Monitor, Moon, Sun, type LucideIcon } from "lucide-react";
+import { twMerge } from "tailwind-merge";
+import ThemeToggleOption from "./theme-toggle-option";
+
+const Options: { mode: ThemeMode; label: string; Icon: LucideIcon }[] = [
+    { mode: "light", label: "Light", Icon: Sun },
+    { mode: "system", label: "System", Icon: Monitor },
+    { mode: "dark", label: "Dark", Icon: Moon },
+];
+
+type Props = {
+    className?: string;
+};
+
+export default function ThemeToggle({ className }: Props) {
+    const { mode, setMode } = useTheme();
+
+    return (
+        <Row
+            role="radiogroup"
+            aria-label="Color theme"
+            className={twMerge(
+                "gap-0.5 p-0.5 flex-nowrap rounded-default bg-gray dark:bg-gray-dark",
+                className,
+            )}
+        >
+            {Options.map((option) => (
+                <ThemeToggleOption
+                    key={option.mode}
+                    {...option}
+                    active={mode == option.mode}
+                    onSelect={setMode}
+                />
+            ))}
+        </Row>
+    );
+}
diff --git a/src/components/general/toast/toast-context.ts b/src/components/general/toast/toast-context.ts
new file mode 100644
index 0000000..ee036ae
--- /dev/null
+++ b/src/components/general/toast/toast-context.ts
@@ -0,0 +1,16 @@
+import { createContext } from "react";
+
+export type ToastColor = "normal" | "success" | "error";
+
+export type ToastParams = {
+    msg: string;
+    color?: ToastColor;
+};
+
+export type ToastContextValue = {
+    toast: (params: ToastParams) => void;
+};
+
+export const ToastContext = createContext<ToastContextValue>({
+    toast: () => {},
+});
diff --git a/src/components/general/toast/toast-provider.tsx b/src/components/general/toast/toast-provider.tsx
new file mode 100644
index 0000000..35cf868
--- /dev/null
+++ b/src/components/general/toast/toast-provider.tsx
@@ -0,0 +1,50 @@
+import Toast from "@/src/components/twui/elements/Toast";
+import React, { useCallback, useRef, useState, type PropsWithChildren } from "react";
+import { ToastContext, type ToastParams } from "./toast-context";
+
+type ToastState = ToastParams & {
+    id: number;
+    open: boolean;
+};
+
+/**
+ * One twui Toast slot; the newest message replaces the current one. Each toast
+ * gets its own id so a stale close (old timer, old unmount) can't hide a newer
+ * toast.
+ */
+export default function ToastProvider({ children }: PropsWithChildren) {
+    const [state, setState] = useState<ToastState | null>(null);
+    const counter = useRef(0);
+
+    const toast = useCallback(({ msg, color = "normal" }: ToastParams) => {
+        counter.current += 1;
+        setState({ id: counter.current, msg, color, open: true });
+    }, []);
+
+    const closeFor = (id: number) =>
+        ((value: React.SetStateAction<boolean>) => {
+            const next = typeof value == "function" ? value(true) : value;
+            if (next) return;
+            setState((prev) =>
+                prev && prev.id == id ? { ...prev, open: false } : prev,
+            );
+        }) as React.Dispatch<React.SetStateAction<boolean>>;
+
+    return (
+        <ToastContext.Provider value={{ toast }}>
+            {children}
+            {state ? (
+                <Toast
+                    key={state.id}
+                    open={state.open}
+                    setOpen={closeFor(state.id)}
+                    color={state.color}
+                    role="status"
+                    aria-live="polite"
+                >
+                    {state.msg}
+                </Toast>
+            ) : null}
+        </ToastContext.Provider>
+    );
+}
diff --git a/src/components/general/use-delete-host.ts b/src/components/general/use-delete-host.ts
new file mode 100644
index 0000000..4a4dd69
--- /dev/null
+++ b/src/components/general/use-delete-host.ts
@@ -0,0 +1,53 @@
+import { useState } from "react";
+import fetchApi from "@/src/components/twui/utils/fetch/fetchApi";
+import useConfirm from "@/src/hooks/use-confirm";
+import useToast from "@/src/hooks/use-toast";
+import deriveHostDisplayName from "@/src/utils/derive-host-display-name";
+import type { ApiReqParams } from "@/src/types";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+
+type Params = {
+    onDeleted?: ({ id }: { id: number }) => void;
+};
+
+export default function useDeleteHost({ onDeleted }: Params = {}) {
+    const { confirm } = useConfirm();
+    const { toast } = useToast();
+    const [deleting, setDeleting] = useState(false);
+
+    async function deleteHost({ host }: { host: BUN_SQLITE_WGUI_HOSTS }) {
+        const name = deriveHostDisplayName({ host });
+        const host_id = Number(host.id || 0);
+
+        const confirmed = await confirm({
+            title: `Delete ${name}?`,
+            message:
+                "The tunnel is torn down and every client on this host is deleted with its config. This can't be undone.",
+            confirm_label: "Delete host",
+            tone: "danger",
+        });
+
+        if (!confirmed) return false;
+
+        setDeleting(true);
+
+        const res = await fetchApi<ApiReqParams, APIResponseObject>(`/api/admin/delete-host`, {
+            method: "DELETE",
+            body: { host_id },
+        });
+
+        setDeleting(false);
+
+        if (!res.success) {
+            toast({ msg: res.msg || "Couldn't delete the host", color: "error" });
+            return false;
+        }
+
+        toast({ msg: `${name} deleted`, color: "success" });
+        onDeleted?.({ id: host_id });
+        return true;
+    }
+
+    return { deleteHost, deleting };
+}
diff --git a/src/components/general/user-form/index.tsx b/src/components/general/user-form/index.tsx
index a17384f..9380ea7 100644
--- a/src/components/general/user-form/index.tsx
+++ b/src/components/general/user-form/index.tsx
@@ -1,17 +1,18 @@
+import { useState } from "react";
 import Form from "@/src/components/twui/form/Form";
-import LoadingOverlay from "@/src/components/twui/elements/LoadingOverlay";
 import useFormInit from "@/src/hooks/use-form-init";
+import useToast from "@/src/hooks/use-toast";
+import type { UserFormObject } from "@/src/types";
+import type { BUN_SQLITE_WGUI_USERS_JOIN } from "@/src/types/sql-joins";
+import InlineAlert from "../inline-alert";
 import UserFormName from "./user-form-name";
-import Tag from "@/src/components/twui/elements/Tag";
 import UserFormAction from "./user-form-action";
 import UserFormEmail from "./user-form-email";
 import UserFormUsername from "./user-form-username";
-import type { UserFormObject } from "@/src/types";
-import submitUserForm from "./submit-user-form";
 import UserFormPassword from "./user-form-password";
 import UserFormImage from "./user-form-image";
 import UserFormBio from "./user-form-bio";
-import type { BUN_SQLITE_WGUI_USERS_JOIN } from "@/src/types/sql-joins";
+import submitUserForm from "./submit-user-form";
 
 type Props = {
     existing_user?: BUN_SQLITE_WGUI_USERS_JOIN;
@@ -19,44 +20,49 @@ type Props = {
     is_first_user?: boolean;
 };
 
-export default function UserForm({
-    existing_user,
-    existing_user_full,
-    is_first_user,
-}: Props) {
+export default function UserForm({ existing_user, existing_user_full, is_first_user }: Props) {
+    const { toast } = useToast();
+
     const init = useFormInit<UserFormObject>({
         existing: existing_user,
         existing_full: existing_user_full,
         is_first_user,
     });
 
-    const { loading, status } = init;
+    const [confirm_password, setConfirmPassword] = useState("");
+
+    const { status, form } = init;
+    const needs_password = !existing_user_full?.id;
+    const passwords_match = !needs_password || (form.password || "") === confirm_password;
 
     return (
-        <>
-            <Form
-                className="w-full gap-6"
-                onSubmit={() => {
-                    submitUserForm(init);
-                }}
-            >
-                {status?.error && <Tag color="error">{status.msg}</Tag>}
-                {loading && <LoadingOverlay />}
+        <Form
+            className="w-full gap-5"
+            onSubmit={() => {
+                if (!passwords_match) return;
+                submitUserForm({ init, toast });
+            }}
+        >
+            {status?.error ? <InlineAlert tone="error" msg={status.msg} /> : null}
 
-                <UserFormName {...init} />
-                <UserFormEmail {...init} />
-                <UserFormUsername {...init} />
-                <UserFormPassword {...init} />
-                {/* <UserFormUserTypes {...init} /> */}
+            <UserFormName {...init} />
+            <UserFormEmail {...init} />
+            <UserFormUsername {...init} />
+            <UserFormPassword
+                {...init}
+                confirm_password={confirm_password}
+                setConfirmPassword={setConfirmPassword}
+                passwords_match={passwords_match}
+            />
 
-                {is_first_user ? null : (
-                    <>
-                        <UserFormBio {...init} />
-                        <UserFormImage {...init} />
-                    </>
-                )}
-                <UserFormAction {...init} />
-            </Form>
-        </>
+            {is_first_user ? null : (
+                <>
+                    <UserFormBio {...init} />
+                    <UserFormImage {...init} />
+                </>
+            )}
+
+            <UserFormAction {...init} passwords_match={passwords_match} />
+        </Form>
     );
 }
diff --git a/src/components/general/user-form/submit-user-form.ts b/src/components/general/user-form/submit-user-form.ts
index c8b0d39..225a73c 100644
--- a/src/components/general/user-form/submit-user-form.ts
+++ b/src/components/general/user-form/submit-user-form.ts
@@ -11,24 +11,17 @@ import _ from "lodash";
 import fetchApi from "../../twui/utils/fetch/fetchApi";
 import type { APIResponseObject } from "@moduletrace/bunext/types";
 
-export default async function submitUserForm({
-    setLoading,
-    setStatus,
-    form,
-    existing_full,
-    existing,
-    image,
-    is_first_user,
-}: ReturnType<typeof useFormInit<UserFormObject>>) {
+import type { ToastContextValue } from "../toast/toast-context";
+
+type Params = {
+    init: ReturnType<typeof useFormInit<UserFormObject>>;
+    toast: ToastContextValue["toast"];
+};
+
+export default async function submitUserForm({ init, toast }: Params) {
+    const { setLoading, setStatus, form, existing_full, image, is_first_user } = init;
+
     try {
-        const confirm_msg = existing_full?.id
-            ? `Update this user?`
-            : `Create new user?`;
-
-        if (!window.confirm(confirm_msg)) {
-            return;
-        }
-
         const new_user_data: BUN_SQLITE_WGUI_USERS = _.pick<
             UserFormObject,
             keyof UserFormObject
@@ -72,8 +65,6 @@ export default async function submitUserForm({
             });
 
             if (!delete_media_res.success) {
-                console.log("delete_media_res", delete_media_res);
-
                 throw new Error(
                     delete_media_res.msg ||
                         delete_media_res.error ||
@@ -98,16 +89,26 @@ export default async function submitUserForm({
             }
         }
 
-        if (create_or_update_user_res.success && target_user_id) {
-            window.location.reload();
-        } else {
-            console.log("res", create_or_update_user_res);
-            console.log("form", form);
-
+        if (!create_or_update_user_res.success || !target_user_id) {
             throw new Error(
-                create_or_update_user_res.msg || "Person Creation Failed",
+                create_or_update_user_res.msg || "Couldn't save the account",
             );
         }
+
+        if (is_first_user) {
+            window.location.href = "/auth/login";
+            return;
+        }
+
+        // The header avatar comes from the server-rendered user, so a new
+        // image needs a reload to show up.
+        if (image?.imageBase64Full) {
+            window.location.reload();
+            return;
+        }
+
+        toast({ msg: "Profile saved", color: "success" });
+        setLoading(false);
     } catch (error: any) {
         setStatus({
             error: true,
diff --git a/src/components/general/user-form/user-form-action.tsx b/src/components/general/user-form/user-form-action.tsx
index 9fd4d88..e0facb9 100644
--- a/src/components/general/user-form/user-form-action.tsx
+++ b/src/components/general/user-form/user-form-action.tsx
@@ -1,20 +1,23 @@
 import type { BUN_SQLITE_WGUI_USERS } from "@/db/types/db";
-import Button from "@/src/components/twui/layout/Button";
+import FormActions from "../form-actions";
 import useFormInit from "@/src/hooks/use-form-init";
 
-export default function UserFormAction({
-    status,
-    existing_full,
-}: ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_USERS>>) {
-    const title = existing_full?.id ? "Update User" : "Create New User";
+type Props = ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_USERS>> & {
+    passwords_match: boolean;
+};
 
-    if (status?.error) {
-        return null;
-    }
+export default function UserFormAction({ existing_full, loading, passwords_match, is_first_user }: Props) {
+    const title = existing_full?.id
+        ? "Save profile"
+        : is_first_user
+          ? "Create account"
+          : "Create user";
 
     return (
-        <>
-            <Button title={title}>{title}</Button>
-        </>
+        <FormActions
+            submit_title={title}
+            loading={loading}
+            disabled={!passwords_match}
+        />
     );
 }
diff --git a/src/components/general/user-form/user-form-bio.tsx b/src/components/general/user-form/user-form-bio.tsx
index 7eb2482..b4a6755 100644
--- a/src/components/general/user-form/user-form-bio.tsx
+++ b/src/components/general/user-form/user-form-bio.tsx
@@ -1,31 +1,34 @@
 import type { BUN_SQLITE_WGUI_USERS } from "@/db/types/db";
 import TinyMCEEditor from "@/src/components/twui/editors/TinyMCE";
-import Button from "@/src/components/twui/layout/Button";
 import useFormInit from "@/src/hooks/use-form-init";
+import useIsDarkMode from "@/src/hooks/use-is-dark-mode";
+import buildRteContentStyle from "@/src/functions/frontend/build-rte-content-style";
 
 export default function UserFormBio({
     setForm,
-    existing,
-    existing_full,
     form,
 }: ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_USERS>>) {
-    const title = existing_full?.id ? "Update User" : "Create New User";
+    const is_dark = useIsDarkMode();
 
     return (
-        <>
-            <TinyMCEEditor
-                defaultValue={form.bio}
-                changeHandler={(content) => {
-                    setForm((prev) => ({
-                        ...prev,
-                        bio: content,
-                    }));
-                }}
-                placeholder="Write Something about yourself"
-                options={{ height: 300 }}
-                name="Bio"
-                showLabel
-            />
-        </>
+        <TinyMCEEditor
+            // twui's editor reads the theme once at init, so remount it when
+            // the theme changes. It starts from the current form value.
+            key={is_dark ? "dark" : "light"}
+            defaultValue={form.bio}
+            changeHandler={(content) => {
+                setForm((prev) => ({
+                    ...prev,
+                    bio: content,
+                }));
+            }}
+            placeholder="A short note about yourself"
+            options={{
+                height: 220,
+                content_style: buildRteContentStyle({ is_dark }),
+            }}
+            name="Bio"
+            showLabel
+        />
     );
 }
diff --git a/src/components/general/user-form/user-form-email.tsx b/src/components/general/user-form/user-form-email.tsx
index b640573..1e71d1c 100644
--- a/src/components/general/user-form/user-form-email.tsx
+++ b/src/components/general/user-form/user-form-email.tsx
@@ -7,20 +7,18 @@ export default function UserFormEmail({
     form,
 }: ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_USERS>>) {
     return (
-        <>
-            <Input
-                type="email"
-                placeholder="Email Addres"
-                onChange={(e) => {
-                    setForm((prev) => ({
-                        ...prev,
-                        email: e.target.value,
-                    }));
-                }}
-                defaultValue={form.email}
-                showLabel
-                required
-            />
-        </>
+        <Input
+            type="email"
+            name="email"
+            title="Email address"
+            placeholder="you@example.com"
+            autoComplete="email"
+            onChange={(e) => {
+                setForm((prev) => ({ ...prev, email: e.target.value }));
+            }}
+            defaultValue={form.email}
+            showLabel
+            required
+        />
     );
 }
diff --git a/src/components/general/user-form/user-form-image.tsx b/src/components/general/user-form/user-form-image.tsx
index f53a5a5..97a8f2f 100644
--- a/src/components/general/user-form/user-form-image.tsx
+++ b/src/components/general/user-form/user-form-image.tsx
@@ -9,8 +9,6 @@ export default function UserFormImage({
     existing_full,
     setImage,
 }: ReturnType<typeof useFormInit<UserFormObject>>) {
-    const title = existing_full?.id ? "Update User" : "Create New User";
-
     const person = existing_full as BUN_SQLITE_WGUI_USERS_JOIN | undefined;
 
     const user_image_url = person?.profile_media_id
@@ -22,7 +20,7 @@ export default function UserFormImage({
     return (
         <>
             <ImageUpload
-                label="User Image"
+                label="Profile image"
                 existingImageUrl={user_image_url?.media_url}
                 onChangeHandler={(imgData) => {
                     setImage(imgData);
diff --git a/src/components/general/user-form/user-form-name.tsx b/src/components/general/user-form/user-form-name.tsx
index e8540f4..04284ea 100644
--- a/src/components/general/user-form/user-form-name.tsx
+++ b/src/components/general/user-form/user-form-name.tsx
@@ -1,6 +1,6 @@
 import type { BUN_SQLITE_WGUI_USERS } from "@/db/types/db";
 import Input from "@/src/components/twui/form/Input";
-import Row from "@/src/components/twui/layout/Row";
+import Stack from "@/src/components/twui/layout/Stack";
 import useFormInit from "@/src/hooks/use-form-init";
 
 export default function UserFormName({
@@ -8,35 +8,31 @@ export default function UserFormName({
     form,
 }: ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_USERS>>) {
     return (
-        <Row className="w-full grid xl:grid-cols-2">
+        <Stack className="w-full gap-5 sm:grid sm:grid-cols-2 sm:gap-3 items-stretch">
             <Input
-                title="First Name"
-                placeholder="Eg. John"
+                name="first_name"
+                title="First name"
+                placeholder="e.g. Jane"
                 onChange={(e) => {
-                    setForm((prev) => ({
-                        ...prev,
-                        first_name: e.target.value,
-                    }));
+                    setForm((prev) => ({ ...prev, first_name: e.target.value }));
                 }}
                 defaultValue={form.first_name}
                 autoComplete="given-name"
+                autoFocus={!form.first_name}
                 showLabel
                 required
             />
-
             <Input
-                title="Last Name"
-                placeholder="Eg. Doe"
+                name="last_name"
+                title="Last name"
+                placeholder="e.g. Doe"
                 onChange={(e) => {
-                    setForm((prev) => ({
-                        ...prev,
-                        last_name: e.target.value,
-                    }));
+                    setForm((prev) => ({ ...prev, last_name: e.target.value }));
                 }}
                 defaultValue={form.last_name}
                 autoComplete="family-name"
                 showLabel
             />
-        </Row>
+        </Stack>
     );
 }
diff --git a/src/components/general/user-form/user-form-password.tsx b/src/components/general/user-form/user-form-password.tsx
index 35c806d..f8e374d 100644
--- a/src/components/general/user-form/user-form-password.tsx
+++ b/src/components/general/user-form/user-form-password.tsx
@@ -1,51 +1,59 @@
 import type { BUN_SQLITE_WGUI_USERS } from "@/db/types/db";
 import Input from "@/src/components/twui/form/Input";
+import Stack from "@/src/components/twui/layout/Stack";
+import MutedText from "../muted-text";
 import useFormInit from "@/src/hooks/use-form-init";
 
+type Props = ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_USERS>> & {
+    confirm_password: string;
+    setConfirmPassword: (value: string) => void;
+    passwords_match: boolean;
+};
+
+/**
+ * Mismatch is tracked in local state, not `status`: `useFormInit` clears
+ * `status` on every form change.
+ */
 export default function UserFormPassword({
     setForm,
-    form,
     existing_full,
-    setStatus,
-}: ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_USERS>>) {
+    confirm_password,
+    setConfirmPassword,
+    passwords_match,
+}: Props) {
     if (existing_full?.id) {
         return null;
     }
 
     return (
-        <>
+        <Stack className="w-full gap-5 sm:grid sm:grid-cols-2 sm:gap-3 items-stretch">
             <Input
-                placeholder="Password"
+                name="password"
+                title="Password"
                 type="password"
                 autoComplete="new-password"
                 onChange={(e) => {
-                    setForm((prev) => ({
-                        ...prev,
-                        password: e.target.value,
-                    }));
+                    setForm((prev) => ({ ...prev, password: e.target.value }));
                 }}
-                defaultValue={form.username}
                 showLabel
+                required
             />
-            <Input
-                placeholder="Confirm Password"
-                type="password"
-                autoComplete="new-password"
-                onChange={(e) => {
-                    const confirm_psswd = e.target.value;
-
-                    if (confirm_psswd && form.password !== confirm_psswd) {
-                        setStatus({
-                            error: true,
-                            msg: `Passwords don't match`,
-                        });
-                    } else {
-                        setStatus(undefined);
-                    }
-                }}
-                defaultValue={form.username}
-                showLabel
-            />
-        </>
+            <Stack className="gap-1.5 items-stretch">
+                <Input
+                    name="confirm_password"
+                    title="Confirm password"
+                    type="password"
+                    autoComplete="new-password"
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    showLabel
+                    required
+                />
+                {confirm_password && !passwords_match ? (
+                    <MutedText text_size="xs" tone="error" role="alert">
+                        Passwords don't match
+                    </MutedText>
+                ) : null}
+            </Stack>
+        </Stack>
     );
 }
diff --git a/src/components/general/user-form/user-form-username.tsx b/src/components/general/user-form/user-form-username.tsx
index 141131f..86143ba 100644
--- a/src/components/general/user-form/user-form-username.tsx
+++ b/src/components/general/user-form/user-form-username.tsx
@@ -7,18 +7,16 @@ export default function UserFormUsername({
     form,
 }: ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_USERS>>) {
     return (
-        <>
-            <Input
-                placeholder="Username"
-                onChange={(e) => {
-                    setForm((prev) => ({
-                        ...prev,
-                        username: e.target.value,
-                    }));
-                }}
-                defaultValue={form.username}
-                showLabel
-            />
-        </>
+        <Input
+            name="username"
+            title="Username"
+            placeholder="e.g. admin"
+            autoComplete="username"
+            onChange={(e) => {
+                setForm((prev) => ({ ...prev, username: e.target.value }));
+            }}
+            defaultValue={form.username}
+            showLabel
+        />
     );
 }
diff --git a/src/dict/main-links-dict.ts b/src/dict/main-links-dict.ts
deleted file mode 100644
index 4ca1279..0000000
--- a/src/dict/main-links-dict.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { TWUILink } from "../components/twui/elements/LinkList";
-
-export const MainLinks: TWUILink[] = [
-    {
-        title: "About",
-        url: "/about",
-    },
-];
diff --git a/src/dict/subsidiaries-dict.ts b/src/dict/subsidiaries-dict.ts
deleted file mode 100644
index 52e8a5d..0000000
--- a/src/dict/subsidiaries-dict.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import type { TWUI_LINK_LIST_LINK_OBJECT } from "../components/twui/elements/LinkList";
-
-export const SBFSusidiaries = [
-    {
-        title: "Children's Home",
-        description:
-            "We stretch out a helping had to orphaned children located in different parts of Nigeria. We have our primary children's home in Port Harcourt, Rivers, but also visit orphaned children in different communites in rural Rivers State.",
-        url: `/childrens-home`,
-        image: `/images/susan_brown_orphans_1-2.webp`,
-        links: [
-            {
-                title: "Brown's Children's Home",
-                buttonProps: {
-                    after_icon_name: "ArrowUpRight",
-                    after_icon_props: { size: 17 },
-                    color: "secondary",
-                },
-                linkProps: {
-                    target: "_blank",
-                },
-                url: "/childrens-home",
-            },
-            {
-                title: "Learn More",
-                buttonProps: {
-                    variant: "outlined",
-                    color: "gray",
-                },
-            },
-        ] as SubsidiaryLinkType[],
-        primary: true,
-    },
-    {
-        title: "Youth Development",
-        description:
-            "We provide mentorship and skill-building for Nigerian youths. This goal is to ensure a thriving economy and society, and prevent social vices.",
-        url: `/youth-development`,
-        image: `/images/young-man-apprentice-01.webp`,
-        links: [
-            {
-                title: "View Our Youth Programs",
-                buttonProps: {
-                    variant: "outlined",
-                    color: "secondary",
-                },
-            },
-        ] as SubsidiaryLinkType[],
-        primary: false,
-    },
-    {
-        title: "Women Empowerment",
-        description:
-            "We have a stong focus on building women with character and resilience.",
-        url: `/women-empowerment`,
-        image: `/images/young-women-01.webp`,
-        links: [
-            {
-                title: "Learn More",
-                buttonProps: {
-                    variant: "outlined",
-                    color: "secondary",
-                },
-            },
-        ] as SubsidiaryLinkType[],
-        primary: false,
-    },
-] as const;
-
-export type SubsidiaryLinkType = TWUI_LINK_LIST_LINK_OBJECT & {
-    // button_props: Omit<ComponentProps<typeof Button>,"title">
-};
diff --git a/src/dict/theme-dict.ts b/src/dict/theme-dict.ts
new file mode 100644
index 0000000..c8f8dd6
--- /dev/null
+++ b/src/dict/theme-dict.ts
@@ -0,0 +1,12 @@
+export const ThemeModes = ["light", "dark", "system"] as const;
+
+export type ThemeMode = (typeof ThemeModes)[number];
+
+export const ThemeCookieName = "wgui_theme";
+
+/** One year */
+export const ThemeCookieMaxAge = 60 * 60 * 24 * 365;
+
+export function isThemeMode(value?: string | null): value is ThemeMode {
+    return ThemeModes.includes(value as ThemeMode);
+}
diff --git a/src/functions/frontend/build-rte-content-style.ts b/src/functions/frontend/build-rte-content-style.ts
new file mode 100644
index 0000000..fcffd4d
--- /dev/null
+++ b/src/functions/frontend/build-rte-content-style.ts
@@ -0,0 +1,30 @@
+type Params = {
+    is_dark: boolean;
+};
+
+/**
+ * CSS for the TinyMCE content iframe. The iframe is its own document, so it
+ * doesn't see the app's tokens. Its `color-scheme` must match the page's:
+ * when they differ the browser paints the iframe with an opaque white canvas,
+ * which made dark-mode text white on white.
+ */
+export default function buildRteContentStyle({ is_dark }: Params) {
+    const background = is_dark ? "#0f0f11" : "#ffffff";
+    const color = is_dark ? "#fafafa" : "#18181b";
+    const placeholder = is_dark ? "#71717a" : "#a1a1aa";
+    const link = is_dark ? "#ef7a7e" : "#89161b";
+
+    return `
+        :root { color-scheme: ${is_dark ? "dark" : "light"}; }
+        body {
+            font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
+            font-size: 15px;
+            line-height: 1.6;
+            background-color: ${background};
+            color: ${color};
+            margin: 12px 14px;
+        }
+        a { color: ${link}; }
+        .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before { color: ${placeholder}; }
+    `;
+}
diff --git a/src/functions/frontend/theme/apply-theme.ts b/src/functions/frontend/theme/apply-theme.ts
new file mode 100644
index 0000000..d430722
--- /dev/null
+++ b/src/functions/frontend/theme/apply-theme.ts
@@ -0,0 +1,18 @@
+import type { ThemeMode } from "@/src/dict/theme-dict";
+
+type Params = {
+    mode: ThemeMode;
+};
+
+/**
+ * Toggles the `.dark` class on `<html>` for the given mode. Only touches that
+ * one class so other classes on the element survive.
+ */
+export default function applyTheme({ mode }: Params) {
+    const dark =
+        mode == "dark" ||
+        (mode == "system" &&
+            window.matchMedia("(prefers-color-scheme: dark)").matches);
+
+    document.documentElement.classList.toggle("dark", dark);
+}
diff --git a/src/functions/frontend/theme/set-theme-cookie.ts b/src/functions/frontend/theme/set-theme-cookie.ts
new file mode 100644
index 0000000..7c4d915
--- /dev/null
+++ b/src/functions/frontend/theme/set-theme-cookie.ts
@@ -0,0 +1,13 @@
+import {
+    ThemeCookieMaxAge,
+    ThemeCookieName,
+    type ThemeMode,
+} from "@/src/dict/theme-dict";
+
+type Params = {
+    mode: ThemeMode;
+};
+
+export default function setThemeCookie({ mode }: Params) {
+    document.cookie = `${ThemeCookieName}=${mode}; Path=/; SameSite=Lax; Max-Age=${ThemeCookieMaxAge}`;
+}
diff --git a/src/hooks/use-admin-crud-get.ts b/src/hooks/use-admin-crud-get.ts
index d7c6b4a..86707bd 100644
--- a/src/hooks/use-admin-crud-get.ts
+++ b/src/hooks/use-admin-crud-get.ts
@@ -113,9 +113,13 @@ export function useAdminCrudGet<T extends {} = BUN_SQLITE_WGUI_ALL_TYPEDEFS>({
         setRes(undefined);
     }, [query]);
 
+    /** Drop the cached result so the effect above fetches it again. */
+    const refetch = () => setRes(undefined);
+
     return {
         res,
         setRes,
+        refetch,
         count,
         page,
         setPage,
diff --git a/src/hooks/use-confirm.ts b/src/hooks/use-confirm.ts
new file mode 100644
index 0000000..622013b
--- /dev/null
+++ b/src/hooks/use-confirm.ts
@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { ConfirmContext } from "../components/general/confirm/confirm-context";
+
+export default function useConfirm() {
+    return useContext(ConfirmContext);
+}
diff --git a/src/hooks/use-is-dark-mode.ts b/src/hooks/use-is-dark-mode.ts
new file mode 100644
index 0000000..6f23b5f
--- /dev/null
+++ b/src/hooks/use-is-dark-mode.ts
@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+
+/** Tracks the `.dark` class on `<html>` (set by `applyTheme`/`ThemeScript`). */
+export default function useIsDarkMode() {
+    const [is_dark, setIsDark] = useState(false);
+
+    useEffect(() => {
+        const root = document.documentElement;
+        const sync = () => setIsDark(root.classList.contains("dark"));
+
+        sync();
+
+        const observer = new MutationObserver(sync);
+        observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+
+        return () => observer.disconnect();
+    }, []);
+
+    return is_dark;
+}
diff --git a/src/hooks/use-theme.ts b/src/hooks/use-theme.ts
new file mode 100644
index 0000000..46d46ee
--- /dev/null
+++ b/src/hooks/use-theme.ts
@@ -0,0 +1,32 @@
+import { useContext, useEffect, useState } from "react";
+import { AppContext } from "../pages/__root";
+import { isThemeMode, type ThemeMode } from "../dict/theme-dict";
+import applyTheme from "../functions/frontend/theme/apply-theme";
+import setThemeCookie from "../functions/frontend/theme/set-theme-cookie";
+
+export default function useTheme() {
+    const { pageProps } = useContext(AppContext);
+
+    const [mode, setModeState] = useState<ThemeMode>(
+        isThemeMode(pageProps?.theme) ? pageProps.theme : "system",
+    );
+
+    useEffect(() => {
+        applyTheme({ mode });
+
+        if (mode !== "system") return;
+
+        const media = window.matchMedia("(prefers-color-scheme: dark)");
+        const onChange = () => applyTheme({ mode });
+
+        media.addEventListener("change", onChange);
+        return () => media.removeEventListener("change", onChange);
+    }, [mode]);
+
+    function setMode({ mode }: { mode: ThemeMode }) {
+        setThemeCookie({ mode });
+        setModeState(mode);
+    }
+
+    return { mode, setMode };
+}
diff --git a/src/hooks/use-toast.ts b/src/hooks/use-toast.ts
new file mode 100644
index 0000000..34a3b1d
--- /dev/null
+++ b/src/hooks/use-toast.ts
@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { ToastContext } from "../components/general/toast/toast-context";
+
+export default function useToast() {
+    return useContext(ToastContext);
+}
diff --git a/src/layouts/admin/(data)/admin-nav-dict.ts b/src/layouts/admin/(data)/admin-nav-dict.ts
new file mode 100644
index 0000000..4b440c9
--- /dev/null
+++ b/src/layouts/admin/(data)/admin-nav-dict.ts
@@ -0,0 +1,57 @@
+import {
+    LayoutDashboard,
+    LogOut,
+    Server,
+    Settings,
+    Users,
+    Wrench,
+    type LucideIcon,
+} from "lucide-react";
+
+export type AdminNavItem = {
+    title: string;
+    url: string;
+    Icon: LucideIcon;
+    /** Only active on an exact path match */
+    strict?: boolean;
+    super_admin_only?: boolean;
+};
+
+export type AdminNavGroup = {
+    group: string;
+    items: AdminNavItem[];
+};
+
+export const AdminNav: AdminNavGroup[] = [
+    {
+        group: "Overview",
+        items: [
+            { title: "Dashboard", url: "/admin", Icon: LayoutDashboard, strict: true },
+        ],
+    },
+    {
+        group: "WireGuard",
+        items: [
+            { title: "Hosts", url: "/admin/hosts", Icon: Server },
+            { title: "Clients", url: "/admin/clients", Icon: Users },
+        ],
+    },
+    {
+        group: "System",
+        items: [
+            {
+                title: "Setup",
+                url: "/admin/setup",
+                Icon: Wrench,
+                super_admin_only: true,
+            },
+        ],
+    },
+    {
+        group: "Account",
+        items: [
+            { title: "Settings", url: "/admin/settings", Icon: Settings },
+            { title: "Sign out", url: "/auth/logout", Icon: LogOut },
+        ],
+    },
+];
diff --git a/src/layouts/admin/(partials)/MobileNav.tsx b/src/layouts/admin/(partials)/MobileNav.tsx
index af838e1..c45522c 100644
--- a/src/layouts/admin/(partials)/MobileNav.tsx
+++ b/src/layouts/admin/(partials)/MobileNav.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import { Menu, X } from "lucide-react";
-import AdminAsideLinks from "./admin-aside-links-dict";
 import Row from "@/src/components/twui/layout/Row";
-import LogoIcon from "@/src/components/general/logo-icon";
-import Divider from "@/src/components/twui/layout/Divider";
-import { twMerge } from "tailwind-merge";
+import Button from "@/src/components/twui/layout/Button";
 import Stack from "@/src/components/twui/layout/Stack";
+import Logo from "@/src/components/general/logo";
+import { twMerge } from "tailwind-merge";
+import AdminNavigation from "./admin-nav";
 
 export default function MobileNav() {
     const [open, setOpen] = React.useState(false);
@@ -34,21 +34,23 @@ export default function MobileNav() {
 
     return (
         <div className="flex xl:hidden">
-            <button
+            <Button
                 ref={triggerRef}
                 type="button"
-                aria-label="Open menu"
+                title="Open menu"
+                variant="ghost"
+                color="gray"
                 aria-expanded={open}
-                className="cursor-pointer p-1"
+                className="p-1.5! -ml-1.5"
                 onClick={() => setOpen(true)}
             >
-                <Menu size={28} />
-            </button>
+                <Menu size={20} />
+            </Button>
 
             {open ? (
                 <>
                     <div
-                        className="fixed inset-0 z-200 bg-dark/50"
+                        className="fixed inset-0 z-200 bg-dark/60"
                         onClick={() => setOpen(false)}
                         aria-hidden
                     />
@@ -57,36 +59,35 @@ export default function MobileNav() {
                         tabIndex={-1}
                         className={twMerge(
                             "fixed top-0 left-0 bottom-0 z-210",
-                            "w-[min(280px,85vw)] bg-background-light dark:bg-background-dark",
+                            "w-[min(272px,85vw)] bg-surface border-r border-line",
                             "flex flex-col shadow-xl outline-none",
                         )}
                         role="dialog"
                         aria-modal="true"
                         aria-label="Admin navigation"
                     >
-                        <Row className="w-full justify-between items-center py-2 px-4 h-20 flex-nowrap">
-                            <a href="/" onClick={() => setOpen(false)}>
-                                <LogoIcon icon_size={40} />
-                            </a>
-                            <button
+                        <Row className="w-full justify-between px-4 h-14 flex-nowrap border-b border-line">
+                            <Logo />
+                            <Button
                                 type="button"
-                                aria-label="Close menu"
-                                className="cursor-pointer p-1"
+                                title="Close menu"
+                                variant="ghost"
+                                color="gray"
+                                className="p-1.5!"
                                 onClick={() => setOpen(false)}
                             >
-                                <X size={28} />
-                            </button>
+                                <X size={18} />
+                            </Button>
                         </Row>
-                        <Divider />
                         <Stack
-                            className="w-full grow overflow-y-auto"
+                            className="w-full grow overflow-y-auto px-2 py-4 items-stretch"
                             onClick={(e) => {
                                 if ((e.target as HTMLElement).closest("a")) {
                                     setOpen(false);
                                 }
                             }}
                         >
-                            <AdminAsideLinks />
+                            <AdminNavigation />
                         </Stack>
                     </aside>
                 </>
diff --git a/src/layouts/admin/(partials)/admin-aside-links-dict.tsx b/src/layouts/admin/(partials)/admin-aside-links-dict.tsx
deleted file mode 100644
index e5513b5..0000000
--- a/src/layouts/admin/(partials)/admin-aside-links-dict.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import type { TWUILink } from "@/src/components/twui/elements/LinkList";
-import LinkList from "@/src/components/twui/elements/LinkList";
-import Stack from "@/src/components/twui/layout/Stack";
-import { AppContext } from "@/src/pages/__root";
-import { useContext } from "react";
-import { LayoutDashboard, LogOut, Server, Settings, Users, Wrench } from "lucide-react";
-
-const sectionLabel = (label: string) => (
-    <div className="px-3 pt-6 pb-1.5 text-[11.5px] font-semibold uppercase tracking-[0.08em] text-foreground-light/40 dark:text-foreground-dark/40">
-        {label}
-    </div>
-);
-
-const linkClassName =
-    "px-3 py-2 w-full rounded-[5px] no-underline! border-b-0! " +
-    "text-[14px] font-medium text-foreground-light/70 dark:text-foreground-dark/70 " +
-    "hover:text-foreground-light! dark:hover:text-foreground-dark! " +
-    "hover:bg-foreground-light/5 dark:hover:bg-foreground-dark/5 transition-colors";
-
-const iconClassName = "shrink-0 opacity-60";
-
-export default function AdminAsideLinks() {
-    const { pageProps } = useContext(AppContext);
-    const { user, user_types } = pageProps || {};
-
-    if (!user?.logged_in_status) {
-        return null;
-    }
-
-    const is_super_admin =
-        user_types?.find((t) => t.user_type === "super_admin") !== undefined;
-
-    const links: TWUILink[] = [
-        { component: sectionLabel("Overview") },
-        {
-            title: "Dashboard",
-            url: "/admin",
-            strict: true,
-            icon: (
-                <LayoutDashboard
-                    size={16}
-                    strokeWidth={2}
-                    className={iconClassName}
-                />
-            ),
-        },
-        { component: sectionLabel("WireGuard") },
-        {
-            title: "Hosts",
-            url: "/admin/hosts",
-            icon: (
-                <Server size={16} strokeWidth={2} className={iconClassName} />
-            ),
-        },
-        {
-            title: "Clients",
-            url: "/admin/clients",
-            icon: <Users size={16} strokeWidth={2} className={iconClassName} />,
-        },
-        { component: sectionLabel("System") },
-        ...(is_super_admin
-            ? [
-                  {
-                      title: "Setup",
-                      url: "/admin/setup",
-                      icon: (
-                          <Wrench
-                              size={16}
-                              strokeWidth={2}
-                              className={iconClassName}
-                          />
-                      ),
-                  },
-              ]
-            : []),
-        { component: sectionLabel("Account") },
-        {
-            title: "Settings",
-            url: "/admin/settings",
-            icon: (
-                <Settings size={16} strokeWidth={2} className={iconClassName} />
-            ),
-        },
-        {
-            title: "Logout",
-            url: "/auth/logout",
-            icon: (
-                <LogOut size={16} strokeWidth={2} className={iconClassName} />
-            ),
-        },
-    ];
-
-    return (
-        <Stack className="w-full items-stretch">
-            <LinkList
-                links={links}
-                className="gap-0.5 flex-col items-start pb-6"
-                linkProps={{ className: linkClassName }}
-            />
-        </Stack>
-    );
-}
diff --git a/src/layouts/admin/(partials)/admin-aside.tsx b/src/layouts/admin/(partials)/admin-aside.tsx
index 1993439..37866d7 100755
--- a/src/layouts/admin/(partials)/admin-aside.tsx
+++ b/src/layouts/admin/(partials)/admin-aside.tsx
@@ -1,29 +1,41 @@
-import Row from "@/src/components/twui/layout/Row";
-import Stack from "@/src/components/twui/layout/Stack";
-import LogoIcon from "@/src/components/general/logo-icon";
-import Divider from "@/src/components/twui/layout/Divider";
-import AdminAsideLinks from "./admin-aside-links-dict";
-import { twMerge } from "tailwind-merge";
-
-type Props = {
-    className?: string;
-};
-
-export default function AdminAside({ className }: Props) {
-    return (
-        <aside className={twMerge("w-[220px] shrink-0", className)}>
-            <Stack className="w-full items-stretch gap-0! sticky top-0 h-screen overflow-y-auto">
-                <Row className="px-4 h-20 flex items-center">
-                    <a href="/" className="no-underline! border-b-0!">
-                        <LogoIcon icon_size={40} />
-                    </a>
-                </Row>
-                <Divider />
-                <nav className="w-full grow">
-                    <AdminAsideLinks />
-                </nav>
-                <Divider />
-            </Stack>
-        </aside>
-    );
-}
+import Row from "@/src/components/twui/layout/Row";
+import Stack from "@/src/components/twui/layout/Stack";
+import Logo from "@/src/components/general/logo";
+import Link from "@/src/components/twui/layout/Link";
+import { SiteData } from "@/src/data/site-data";
+import { twMerge } from "tailwind-merge";
+import AdminNavigation from "./admin-nav";
+
+type Props = {
+    className?: string;
+};
+
+export default function AdminAside({ className }: Props) {
+    return (
+        <aside
+            className={twMerge(
+                "w-[232px] shrink-0 border-r border-line bg-surface",
+                className,
+            )}
+        >
+            <Stack className="w-full items-stretch gap-0 sticky top-0 h-screen">
+                <Row className="px-4 h-14 shrink-0 border-b border-line">
+                    <Logo />
+                </Row>
+                <nav aria-label="Admin" className="w-full grow overflow-y-auto px-2 py-4">
+                    <AdminNavigation />
+                </nav>
+                <Row className="px-4 h-11 shrink-0 border-t border-line">
+                    <Link
+                        href={SiteData["SiteURL"]}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="text-[13px] text-subtle! hover:text-fg! no-underline!"
+                    >
+                        Source &amp; docs
+                    </Link>
+                </Row>
+            </Stack>
+        </aside>
+    );
+}
diff --git a/src/layouts/admin/(partials)/admin-nav-group.tsx b/src/layouts/admin/(partials)/admin-nav-group.tsx
new file mode 100644
index 0000000..59264e2
--- /dev/null
+++ b/src/layouts/admin/(partials)/admin-nav-group.tsx
@@ -0,0 +1,21 @@
+import Stack from "@/src/components/twui/layout/Stack";
+import SectionLabel from "@/src/components/general/section-label";
+import type { AdminNavItem as AdminNavItemType } from "../(data)/admin-nav-dict";
+import AdminNavItem from "./admin-nav-item";
+
+type Props = {
+    group: string;
+    items: AdminNavItemType[];
+    pathname?: string;
+};
+
+export default function AdminNavGroup({ group, items, pathname }: Props) {
+    return (
+        <Stack className="w-full gap-0.5 items-stretch">
+            <SectionLabel className="px-2.5 pb-1">{group}</SectionLabel>
+            {items.map((item) => (
+                <AdminNavItem {...item} key={item.url} pathname={pathname} />
+            ))}
+        </Stack>
+    );
+}
diff --git a/src/layouts/admin/(partials)/admin-nav-item.tsx b/src/layouts/admin/(partials)/admin-nav-item.tsx
new file mode 100644
index 0000000..211b9b2
--- /dev/null
+++ b/src/layouts/admin/(partials)/admin-nav-item.tsx
@@ -0,0 +1,37 @@
+import Link from "@/src/components/twui/layout/Link";
+import Row from "@/src/components/twui/layout/Row";
+import { twMerge } from "tailwind-merge";
+import type { AdminNavItem as AdminNavItemType } from "../(data)/admin-nav-dict";
+
+type Props = AdminNavItemType & {
+    pathname?: string;
+};
+
+export default function AdminNavItem({ title, url, Icon, strict, pathname }: Props) {
+    const active = pathname
+        ? strict
+            ? pathname == url
+            : pathname == url || pathname.startsWith(`${url}/`)
+        : false;
+
+    return (
+        <Link
+            href={url}
+            aria-current={active ? "page" : undefined}
+            className={twMerge(
+                "w-full px-2.5 py-1.5 rounded-default no-underline! text-[15px] font-medium",
+                "text-muted! hover:text-fg! hover:bg-gray dark:hover:bg-gray-dark transition-colors",
+                active && "text-fg! bg-gray dark:bg-gray-dark",
+            )}
+        >
+            <Row className="gap-2.5 flex-nowrap">
+                <Icon
+                    size={15}
+                    strokeWidth={2}
+                    className={twMerge("shrink-0", active ? "text-primary dark:text-primary-dark-text" : "opacity-70")}
+                />
+                {title}
+            </Row>
+        </Link>
+    );
+}
diff --git a/src/layouts/admin/(partials)/admin-nav.tsx b/src/layouts/admin/(partials)/admin-nav.tsx
new file mode 100644
index 0000000..7a746a2
--- /dev/null
+++ b/src/layouts/admin/(partials)/admin-nav.tsx
@@ -0,0 +1,35 @@
+import Stack from "@/src/components/twui/layout/Stack";
+import { AppContext } from "@/src/pages/__root";
+import { useContext } from "react";
+import { AdminNav } from "../(data)/admin-nav-dict";
+import AdminNavGroup from "./admin-nav-group";
+
+export default function AdminNavigation() {
+    const { pageProps } = useContext(AppContext);
+    const { user, user_types, url } = pageProps || {};
+
+    if (!user?.logged_in_status) return null;
+
+    const is_super_admin = Boolean(
+        user_types?.find((t) => t.user_type === "super_admin"),
+    );
+
+    const groups = AdminNav.map((group) => ({
+        ...group,
+        items: group.items.filter(
+            (item) => !item.super_admin_only || is_super_admin,
+        ),
+    })).filter((group) => group.items.length);
+
+    return (
+        <Stack className="w-full gap-5 items-stretch">
+            {groups.map((group) => (
+                <AdminNavGroup
+                    {...group}
+                    key={group.group}
+                    pathname={url?.pathname}
+                />
+            ))}
+        </Stack>
+    );
+}
diff --git a/src/layouts/admin/(partials)/header-user-menu-item.tsx b/src/layouts/admin/(partials)/header-user-menu-item.tsx
new file mode 100644
index 0000000..3a258bb
--- /dev/null
+++ b/src/layouts/admin/(partials)/header-user-menu-item.tsx
@@ -0,0 +1,24 @@
+import Link from "@/src/components/twui/layout/Link";
+import Row from "@/src/components/twui/layout/Row";
+import type { LucideIcon } from "lucide-react";
+
+type Props = {
+    title: string;
+    url: string;
+    Icon: LucideIcon;
+};
+
+export default function HeaderUserMenuItem({ title, url, Icon }: Props) {
+    return (
+        <Link
+            href={url}
+            role="menuitem"
+            className="w-full px-2.5 py-1.5 rounded-default-sm no-underline! text-[15px] text-fg! hover:bg-gray dark:hover:bg-gray-dark"
+        >
+            <Row className="gap-2.5 flex-nowrap">
+                <Icon size={14} className="opacity-70" />
+                {title}
+            </Row>
+        </Link>
+    );
+}
diff --git a/src/layouts/admin/(partials)/header-user.tsx b/src/layouts/admin/(partials)/header-user.tsx
new file mode 100644
index 0000000..4daec55
--- /dev/null
+++ b/src/layouts/admin/(partials)/header-user.tsx
@@ -0,0 +1,66 @@
+import { useContext } from "react";
+import Dropdown from "@/src/components/twui/elements/Dropdown";
+import Img from "@/src/components/twui/layout/Img";
+import Paper from "@/src/components/twui/elements/Paper";
+import Stack from "@/src/components/twui/layout/Stack";
+import Span from "@/src/components/twui/layout/Span";
+import Button from "@/src/components/twui/layout/Button";
+import MutedText from "@/src/components/general/muted-text";
+import { AppContext } from "@/src/pages/__root";
+import { LayoutDashboard, LogOut, Settings } from "lucide-react";
+import HeaderUserMenuItem from "./header-user-menu-item";
+
+const MenuItems = [
+    { title: "Dashboard", url: "/admin", Icon: LayoutDashboard },
+    { title: "Settings", url: "/admin/settings", Icon: Settings },
+    { title: "Sign out", url: "/auth/logout", Icon: LogOut },
+];
+
+export default function HeaderUser() {
+    const { pageProps } = useContext(AppContext);
+    const { user } = pageProps || {};
+
+    if (!user?.logged_in_status) {
+        return null;
+    }
+
+    const full_name = [user.first_name, user.last_name].filter(Boolean).join(" ");
+
+    return (
+        <Dropdown
+            position="bottom-right"
+            target={
+                <Button
+                    title="Account menu"
+                    type="button"
+                    variant="ghost"
+                    color="gray"
+                    aria-haspopup="menu"
+                    className="p-0! rounded-full"
+                >
+                    <Img
+                        alt=""
+                        src={user.image_thumbnail || "/icons/man.png"}
+                        size={30}
+                        circle
+                        className="bg-gray dark:bg-gray-dark ring-1 ring-line"
+                    />
+                </Button>
+            }
+        >
+            <Paper role="menu" className="min-w-[220px] p-1! gap-0.5 shadow-lg rounded-default-lg">
+                <Stack className="gap-0 px-2.5 py-2 mb-1 border-b border-line w-full">
+                    <Span className="text-[15px] font-medium text-fg truncate max-w-full">
+                        {full_name || user.username}
+                    </Span>
+                    <MutedText text_size="xs" className="truncate max-w-full">
+                        {user.email}
+                    </MutedText>
+                </Stack>
+                {MenuItems.map((item) => (
+                    <HeaderUserMenuItem {...item} key={item.url} />
+                ))}
+            </Paper>
+        </Dropdown>
+    );
+}
diff --git a/src/layouts/admin/(sections)/Footer.tsx b/src/layouts/admin/(sections)/Footer.tsx
deleted file mode 100755
index 125105f..0000000
--- a/src/layouts/admin/(sections)/Footer.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import Row from "@/src/components/twui/layout/Row";
-import Span from "@/src/components/twui/layout/Span";
-import { SiteData } from "@/src/data/site-data";
-import { AppContext } from "@/src/pages/__root";
-import type { AppContextObject } from "@/src/types";
-import React from "react";
-
-export default function Footer() {
-    const appContext: AppContextObject = React.useContext(AppContext);
-    const { user, appState } = appContext;
-
-    /**
-     * Render component
-     */
-    return (
-        <footer className="w-full p-4 h-20">
-            <Row className="h-full">
-                <Span size="smaller" variant="faded">
-                    Copyright © {new Date().getFullYear()}.{" "}
-                    <a
-                        href={SiteData["SiteURL"]}
-                        target="_blank"
-                        className="decoration-dotted underline"
-                    >
-                        {SiteData["SiteName"]}
-                    </a>
-                    . All rights reserved
-                </Span>
-            </Row>
-        </footer>
-    );
-}
diff --git a/src/layouts/admin/(sections)/Header.tsx b/src/layouts/admin/(sections)/Header.tsx
index 67cc6ff..0196e93 100755
--- a/src/layouts/admin/(sections)/Header.tsx
+++ b/src/layouts/admin/(sections)/Header.tsx
@@ -1,47 +1,43 @@
-import Row from "@/src/components/twui/layout/Row";
-import HeaderUser from "../../main/(partials)/header-user";
-import LogoIcon from "@/src/components/general/logo-icon";
-import MobileNav from "../(partials)/MobileNav";
-import { twMerge } from "tailwind-merge";
-import Breadcrumbs from "@/src/components/twui/elements/Breadcrumbs";
-import { useContext } from "react";
-import { AppContext } from "@/src/pages/__root";
-
-type Props = {};
-
-export default function Header({}: Props) {
-    const { pageProps } = useContext(AppContext);
-
-    return (
-        <header className="h-20">
-            <Row
-                className={twMerge(
-                    "w-full justify-between h-full py-4 px-4 xl:px-10",
-                    "flex-nowrap",
-                )}
-            >
-                <Row className="flex-nowrap">
-                    <LogoIcon
-                        icon_size={60}
-                        img_props={{ className: "flex xl:hidden" }}
-                    />
-                    <MobileNav />
-                    <Breadcrumbs
-                        dividerProps={{
-                            className: "-skew-10",
-                        }}
-                        currentLinkProps={{
-                            className: "text-slate-400! pointer-events-none",
-                        }}
-                        pageUrl={pageProps?.url?.pathname}
-                        backButton
-                        skipHome
-                    />
-                </Row>
-                <Row className="flex-nowrap">
-                    <HeaderUser />
-                </Row>
-            </Row>
-        </header>
-    );
-}
+import Row from "@/src/components/twui/layout/Row";
+import Breadcrumbs from "@/src/components/twui/elements/Breadcrumbs";
+import LogoIcon from "@/src/components/general/logo-icon";
+import ThemeToggle from "@/src/components/general/theme/theme-toggle";
+import { AppContext } from "@/src/pages/__root";
+import { useContext } from "react";
+import { ChevronRight } from "lucide-react";
+import HeaderUser from "../(partials)/header-user";
+import MobileNav from "../(partials)/MobileNav";
+
+export default function Header() {
+    const { pageProps } = useContext(AppContext);
+
+    return (
+        <header className="sticky top-0 z-40 h-14 shrink-0 border-b border-line bg-surface/85 backdrop-blur">
+            <Row className="w-full h-full justify-between gap-3 px-4 sm:px-6 flex-nowrap">
+                <Row className="gap-2 flex-nowrap min-w-0">
+                    <MobileNav />
+                    <LogoIcon icon_size={24} className="xl:hidden md:hidden" />
+                    <Row className="hidden md:flex min-w-0">
+                        <Breadcrumbs
+                            divider={
+                                <ChevronRight size={13} className="text-subtle shrink-0 -mx-2" />
+                            }
+                            linkProps={{
+                                className: "text-[15px] text-muted! hover:text-fg! no-underline!",
+                            }}
+                            currentLinkProps={{
+                                className: "text-fg! pointer-events-none",
+                            }}
+                            pageUrl={pageProps?.url?.pathname}
+                            skipHome
+                        />
+                    </Row>
+                </Row>
+                <Row className="gap-2 flex-nowrap">
+                    <ThemeToggle />
+                    <HeaderUser />
+                </Row>
+            </Row>
+        </header>
+    );
+}
diff --git a/src/layouts/admin/index.tsx b/src/layouts/admin/index.tsx
index 73e0f35..0b809c0 100755
--- a/src/layouts/admin/index.tsx
+++ b/src/layouts/admin/index.tsx
@@ -1,40 +1,19 @@
-import React from "react";
-import Header from "./(sections)/Header";
-import Footer from "./(sections)/Footer";
-import { AppContext } from "@/src/pages/__root";
-import type { AppContextObject } from "@/src/types";
-import Row from "@/src/components/twui/layout/Row";
-import Stack from "@/src/components/twui/layout/Stack";
-import LogoIcon from "@/src/components/general/logo-icon";
-import Divider from "@/src/components/twui/layout/Divider";
-import AdminAsideLinks from "./(partials)/admin-aside-links-dict";
-import AdminAside from "./(partials)/admin-aside";
-
-/* -------------------------------------------------------------------------- */
-/*                      Main Layout Functional Component                      */
-/* -------------------------------------------------------------------------- */
-
-// Main Layout Component
-export default function Layout({ children }: { children: React.ReactNode }) {
-    const appContext = React.useContext<AppContextObject>(AppContext);
-    const { user } = appContext;
-
-    return (
-        <>
-            <Row className="w-full items-stretch gap-0! flex-nowrap">
-                <AdminAside className="hidden xl:flex" />
-                <Divider vertical className="h-auto" />
-                <Stack className="grow items-stretch gap-0!">
-                    <Header />
-                    <Divider />
-                    <main className="grow items-start" id="admin-main">
-                        {children}
-                    </main>
-                    <Divider />
-                    <Footer />
-                </Stack>
-            </Row>
-            <Divider />
-        </>
-    );
-}
+import React from "react";
+import Row from "@/src/components/twui/layout/Row";
+import Stack from "@/src/components/twui/layout/Stack";
+import Header from "./(sections)/Header";
+import AdminAside from "./(partials)/admin-aside";
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <Row className="w-full min-h-screen items-stretch gap-0 flex-nowrap">
+            <AdminAside className="hidden xl:block" />
+            <Stack className="grow min-w-0 items-stretch gap-0">
+                <Header />
+                <main className="grow" id="admin-main">
+                    {children}
+                </main>
+            </Stack>
+        </Row>
+    );
+}
diff --git a/src/layouts/centered/index.tsx b/src/layouts/centered/index.tsx
new file mode 100644
index 0000000..0e3955c
--- /dev/null
+++ b/src/layouts/centered/index.tsx
@@ -0,0 +1,29 @@
+import Card from "@/src/components/twui/elements/Card";
+import Stack from "@/src/components/twui/layout/Stack";
+import Logo from "@/src/components/general/logo";
+import ThemeToggle from "@/src/components/general/theme/theme-toggle";
+import type { PropsWithChildren } from "react";
+import { twMerge } from "tailwind-merge";
+
+type Props = PropsWithChildren & {
+    width?: "sm" | "md";
+};
+
+/** Auth pages, 404 and other pages outside the admin shell. */
+export default function CenteredShell({ children, width = "sm" }: Props) {
+    return (
+        <Stack className="relative min-h-screen w-full items-center justify-center gap-6 px-4 py-12">
+            <ThemeToggle className="absolute top-4 right-4" />
+            <Logo icon_size={32} href="/" />
+            <Card
+                noHover
+                className={twMerge(
+                    "w-full flex-col items-stretch gap-0 p-6 sm:p-8 shadow-sm",
+                    width == "md" ? "max-w-[640px]" : "max-w-[400px]",
+                )}
+            >
+                {children}
+            </Card>
+        </Stack>
+    );
+}
diff --git a/src/layouts/main/(partials)/MobileNav.tsx b/src/layouts/main/(partials)/MobileNav.tsx
deleted file mode 100644
index eceaeda..0000000
--- a/src/layouts/main/(partials)/MobileNav.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from "react";
-import { Menu, X } from "lucide-react";
-import Stack from "@/src/components/twui/layout/Stack";
-import { MainLinks } from "@/src/dict/main-links-dict";
-import LinkList from "@/src/components/twui/elements/LinkList";
-import HeaderCTA from "./header-cta";
-import Row from "@/src/components/twui/layout/Row";
-import Logo from "@/src/components/general/logo";
-import { twMerge } from "tailwind-merge";
-
-export default function MobileNav() {
-    const [open, setOpen] = React.useState(false);
-
-    React.useEffect(() => {
-        if (!open) return;
-
-        const prev = document.body.style.overflow;
-        document.body.style.overflow = "hidden";
-
-        const onKey = (e: KeyboardEvent) => {
-            if (e.key === "Escape") setOpen(false);
-        };
-
-        document.addEventListener("keydown", onKey);
-
-        return () => {
-            document.body.style.overflow = prev;
-            document.removeEventListener("keydown", onKey);
-        };
-    }, [open]);
-
-    return (
-        <div className="flex xl:hidden relative">
-            <button
-                type="button"
-                aria-label="Open menu"
-                aria-expanded={open}
-                className="cursor-pointer text-white p-1"
-                onClick={() => setOpen(true)}
-            >
-                <Menu size={30} />
-            </button>
-
-            {open ? (
-                <div
-                    className={twMerge(
-                        "fixed inset-0 z-200 flex flex-col",
-                        "bg-dark text-white",
-                    )}
-                    role="dialog"
-                    aria-modal="true"
-                    aria-label="Mobile navigation"
-                    onClick={(e) => {
-                        if ((e.target as HTMLElement).closest("a")) {
-                            setOpen(false);
-                        }
-                    }}
-                >
-                    <Row className="w-full justify-between items-center px-4 py-6 flex-nowrap">
-                        <Logo
-                            icon_size={60}
-                            text_wrapper_props={{
-                                className: "max-[400px]:hidden",
-                            }}
-                        />
-                        <button
-                            type="button"
-                            aria-label="Close menu"
-                            className="cursor-pointer text-white p-1"
-                            onClick={() => setOpen(false)}
-                        >
-                            <X size={30} />
-                        </button>
-                    </Row>
-
-                    <Stack className="grow w-full items-stretch px-6 py-4 gap-8! overflow-y-auto">
-                        <nav className="w-full">
-                            <LinkList
-                                links={MainLinks}
-                                className="flex-col items-stretch gap-1 w-full"
-                                linkProps={{
-                                    className: twMerge(
-                                        "px-2 py-4 w-full text-xl border-0",
-                                        "text-white/80 hover:text-white",
-                                    ),
-                                }}
-                            />
-                        </nav>
-                        <HeaderCTA className="flex flex-col w-full items-stretch" />
-                    </Stack>
-                </div>
-            ) : null}
-        </div>
-    );
-}
diff --git a/src/layouts/main/(partials)/NavList.tsx b/src/layouts/main/(partials)/NavList.tsx
deleted file mode 100644
index 1aa5782..0000000
--- a/src/layouts/main/(partials)/NavList.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-export default function NavList({ transparent }: { transparent?: boolean }) {
-    const className = transparent ? "light" : "";
-    /**
-     * Render component
-     */
-    return (
-        <div className="gap-10 flex-col xl:flex-row">
-            <a className={className} href="/">
-                Home
-            </a>
-            <a className={className} href="/subsidiaries">
-                Subsidiaries
-            </a>
-            <a className={className} href="/about">
-                About
-            </a>
-            <a className={className} href="/events">
-                Events
-            </a>
-            <a className={className} href="/gallery">
-                Gallery
-            </a>
-            <a className={className} href="/contact">
-                Contact Us
-            </a>
-        </div>
-    );
-}
diff --git a/src/layouts/main/(partials)/header-cta.tsx b/src/layouts/main/(partials)/header-cta.tsx
deleted file mode 100644
index 6b03b80..0000000
--- a/src/layouts/main/(partials)/header-cta.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Row from "@/src/components/twui/layout/Row";
-import Button from "@/src/components/twui/layout/Button";
-import { twMerge } from "tailwind-merge";
-
-type Props = {
-    className?: string;
-};
-
-export default function HeaderCTA({ className }: Props) {
-    return (
-        <Row className={twMerge("hidden xl:flex", className)}>
-            <Button title="Login" className="w-full" href="/auth/login">
-                Login
-            </Button>
-        </Row>
-    );
-}
diff --git a/src/layouts/main/(partials)/header-user.tsx b/src/layouts/main/(partials)/header-user.tsx
deleted file mode 100644
index ee38408..0000000
--- a/src/layouts/main/(partials)/header-user.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useContext } from "react";
-import Row from "@/src/components/twui/layout/Row";
-import { AppContext } from "@/src/pages/__root";
-import Dropdown from "@/src/components/twui/elements/Dropdown";
-import Img from "@/src/components/twui/layout/Img";
-import Paper from "@/src/components/twui/elements/Paper";
-import LinkList from "@/src/components/twui/elements/LinkList";
-import Divider from "@/src/components/twui/layout/Divider";
-
-export default function HeaderUser() {
-    const { pageProps } = useContext(AppContext);
-    const { user, user_types } = pageProps || {};
-
-    if (!user?.logged_in_status) {
-        return null;
-    }
-
-    return (
-        <Row className="">
-            <Dropdown
-                target={
-                    <Img
-                        alt="Logged in user image"
-                        src={user.image_thumbnail ?? "/icons/man.png"}
-                        size={45}
-                        circle
-                        className="bg-slate-400"
-                        title={
-                            user.first_name +
-                            (user.last_name ? ` ${user.last_name}` : "")
-                        }
-                    />
-                }
-                position="bottom-right"
-            >
-                <Paper className="min-w-[200px] px-0! py-2 header-user-dropdown">
-                    <LinkList
-                        links={[
-                            {
-                                title: "Dashboard",
-                                url: "/admin",
-                            },
-                            {
-                                component: <Divider />,
-                            },
-                            {
-                                title: "Settings",
-                                url: "/admin/settings",
-                            },
-                            {
-                                title: "Logout",
-                                url: "/auth/logout",
-                            },
-                        ]}
-                        className="flex-col items-stretch w-full"
-                    />
-                </Paper>
-            </Dropdown>
-        </Row>
-    );
-}
diff --git a/src/layouts/main/(sections)/Footer.tsx b/src/layouts/main/(sections)/Footer.tsx
deleted file mode 100755
index 4a76c49..0000000
--- a/src/layouts/main/(sections)/Footer.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from "react";
-import { AppContext } from "@/src/pages/__root";
-import type { AppContextObject } from "@/src/types";
-import Divider from "@/src/components/twui/layout/Divider";
-import Stack from "@/src/components/twui/layout/Stack";
-import Section from "@/src/components/twui/layout/Section";
-import Container from "@/src/components/twui/layout/Container";
-import Row from "@/src/components/twui/layout/Row";
-import Logo from "@/src/components/general/logo";
-import Span from "@/src/components/twui/layout/Span";
-import H4 from "@/src/components/twui/layout/H4";
-import { SiteData } from "@/src/data/site-data";
-
-export default function Footer() {
-    const appContext: AppContextObject = React.useContext(AppContext);
-
-    /**
-     * Render component
-     */
-    return (
-        <footer className="bg-dark text-white">
-            <Section className="pt-20! pb-0!">
-                <Container>
-                    <Stack className="w-full gap-10! items-center">
-                        <Row className="w-full items-start justify-start xl:justify-between gap-20!">
-                            <div className="flex flex-col items-start max-w-[380px] gap-4">
-                                <Logo
-                                    text_props={{ className: "text-white" }}
-                                    white
-                                />
-                                <Span className="opacity-70">
-                                    Wireguard UI is the ultimate dashboard for
-                                    managing raw Wireguard
-                                </Span>
-                            </div>
-
-                            <Row className="gap-20! justify-start flex-wrap items-start">
-                                <div className="flex items-start gap-10 justify-between flex-wrap xl:ml-auto">
-                                    <Stack>
-                                        <H4>Company</H4>
-                                        <Divider className="opacity-20" />
-                                        <a href="/about">Company</a>
-                                        <a href="/terms">
-                                            Terms and Conditions
-                                        </a>
-                                        <a href="/privacy">Privacy Policy</a>
-                                    </Stack>
-                                </div>
-                            </Row>
-                        </Row>
-
-                        <Divider className="opacity-20" />
-
-                        <div
-                            className="container px-4 sm:px-6 flex w-full items-start justify-between flex-wrap"
-                            style={{
-                                gap: "40px 100px",
-                            }}
-                        >
-                            <span className="text-sm opacity-60">
-                                Copyright {new Date().getFullYear()}{" "}
-                                <a href={SiteData["SiteURL"]}>
-                                    {SiteData["SiteName"]}
-                                </a>
-                                . All rights reserved
-                            </span>
-                        </div>
-                    </Stack>
-                </Container>
-            </Section>
-            <div className="w-full h-20 relative z-100 overflow-hidden mt-20"></div>
-        </footer>
-    );
-}
diff --git a/src/layouts/main/(sections)/Header.tsx b/src/layouts/main/(sections)/Header.tsx
deleted file mode 100755
index 3564bb6..0000000
--- a/src/layouts/main/(sections)/Header.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import MobileNav from "../(partials)/MobileNav";
-import Section from "@/src/components/twui/layout/Section";
-import Container from "@/src/components/twui/layout/Container";
-import Row from "@/src/components/twui/layout/Row";
-import Logo from "@/src/components/general/logo";
-import LinkList from "@/src/components/twui/elements/LinkList";
-import { MainLinks } from "@/src/dict/main-links-dict";
-import Divider from "@/src/components/twui/layout/Divider";
-import HeaderCTA from "../(partials)/header-cta";
-import HeaderUser from "../(partials)/header-user";
-import { twMerge } from "tailwind-merge";
-
-type Props = {
-    no_header_divider?: boolean;
-};
-
-export default function Header({ no_header_divider }: Props) {
-    /**
-     * Render component
-     */
-    return (
-        <header className={"px-4 py-6 w-full z-100 -mb-[160px] relative"}>
-            <Section className="p-0! relative z-10">
-                <Container className="w-full justify-between">
-                    <Row className="w-full items-center gap-10 justify-between flex-nowrap">
-                        <Row className="flex xl:hidden">
-                            <Logo
-                                text_wrapper_props={{
-                                    className: "max-[400px]:hidden",
-                                }}
-                            />
-                        </Row>
-
-                        <Row className="gap-5! hidden xl:flex">
-                            <Logo />
-                            {/* <Row className="hidden xl:flex gap-3!">
-                                <Divider vertical className="-skew-12 h-10" />
-                                <nav>
-                                    <LinkList
-                                        links={MainLinks}
-                                        className="gap-1"
-                                    />
-                                </nav>
-                            </Row> */}
-                        </Row>
-
-                        <Row className="flex-nowrap">
-                            <HeaderCTA />
-                            <MobileNav />
-                            <HeaderUser />
-                        </Row>
-                    </Row>
-                </Container>
-            </Section>
-            {no_header_divider ? null : <Divider className="mt-6 opacity-20" />}
-        </header>
-    );
-}
diff --git a/src/layouts/main/index.tsx b/src/layouts/main/index.tsx
deleted file mode 100644
index 253d160..0000000
--- a/src/layouts/main/index.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-import Header from "./(sections)/Header";
-import Footer from "./(sections)/Footer";
-import { AppContext } from "@/src/pages/__root";
-import Stack from "@/src/components/twui/layout/Stack";
-
-type Props = {
-    children: React.ReactNode;
-    no_header_divider?: boolean;
-    blank?: boolean;
-};
-
-export default function Layout({
-    children,
-    no_header_divider,
-    blank,
-}: Props): React.JSX.Element {
-    const {} = React.useContext(AppContext);
-
-    return (
-        <React.Fragment>
-            <Stack className="w-full items-stretch gap-0">
-                {blank ? null : (
-                    <Header no_header_divider={no_header_divider} />
-                )}
-                <main>{children}</main>
-                {blank ? null : <Footer />}
-            </Stack>
-        </React.Fragment>
-    );
-}
diff --git a/src/pages/(partials)/cta-buttons.tsx b/src/pages/(partials)/cta-buttons.tsx
deleted file mode 100755
index ada44a3..0000000
--- a/src/pages/(partials)/cta-buttons.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import type { AppContextObject } from "@/src/types";
-import { AppContext } from "../__root";
-import Button from "@/src/components/twui/layout/Button";
-import Row from "@/src/components/twui/layout/Row";
-
-export default function CTAButtons() {
-    const appContext = React.useContext<AppContextObject>(AppContext);
-    const { appState, user } = appContext;
-
-    /**
-     * Render component
-     */
-    return (
-        <Row className="w-full flex-col md:flex-row items-stretch">
-            <Button title="Login" className="w-full" href="/auth/login">
-                Login
-            </Button>
-        </Row>
-    );
-}
diff --git a/src/pages/(partials)/hero-banner.tsx b/src/pages/(partials)/hero-banner.tsx
deleted file mode 100755
index 3aa5d7f..0000000
--- a/src/pages/(partials)/hero-banner.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-import type { AppContextObject } from "@/src/types";
-import { PartyPopper } from "lucide-react";
-import { AppContext } from "../__root";
-import Span from "@/src/components/twui/layout/Span";
-import { twMerge } from "tailwind-merge";
-import Row from "@/src/components/twui/layout/Row";
-
-export default function HeroBanner() {
-    const appContext = React.useContext<AppContextObject>(AppContext);
-
-    /**
-     * Render component
-     */
-    return (
-        <a
-            href="/about"
-            className={twMerge(
-                "flex items-center gap-4 bg-accent text-dark/70! px-4 py-2",
-                "font-bold uppercase tracking-widest text-sm sm:text-base",
-                "rounded-default w-full md:w-auto",
-            )}
-        >
-            <Row className="justify-center md:justify-start w-full">
-                <PartyPopper size={30} />
-                <Span>Celebrating 10 Years of Charity</Span>
-            </Row>
-        </a>
-    );
-}
diff --git a/src/pages/(sections)/hero.tsx b/src/pages/(sections)/hero.tsx
deleted file mode 100755
index e13b96f..0000000
--- a/src/pages/(sections)/hero.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from "react";
-import CTAButtons from "../(partials)/cta-buttons";
-import MainHeroSection from "@/src/components/general/main-hero-section";
-import Img from "@/src/components/twui/layout/Img";
-import { twMerge } from "tailwind-merge";
-
-export default function Hero() {
-    return (
-        <React.Fragment>
-            <MainHeroSection
-                title="Wireguard UI"
-                sub_title="The ultimate Wireguard Dashboard"
-                cta_buttons={
-                    <>
-                        <CTAButtons />
-                    </>
-                }
-                img_props={{
-                    id: "hero-image",
-                }}
-                img_component={
-                    <>
-                        <Img
-                            alt="bg image"
-                            src={"/images/susan_brown_and_yanya_1-10.webp"}
-                            className={twMerge(
-                                `hidden lg:flex absolute top-0 left-0 w-full h-full object-cover`,
-                                "z-0 object-top",
-                            )}
-                        />
-                        <Img
-                            alt="bg image"
-                            src={"/images/susan_brown_and_yanya_1-6.webp"}
-                            className={twMerge(
-                                `flex lg:hidden absolute top-0 left-0 w-full h-full object-cover`,
-                                "z-0",
-                            )}
-                        />
-                    </>
-                }
-            />
-        </React.Fragment>
-    );
-}
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index f6e5eb6..3096497 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,45 +1,29 @@
 import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
-import Section from "@/src/components/twui/layout/Section";
-import Container from "@/src/components/twui/layout/Container";
 import Stack from "@/src/components/twui/layout/Stack";
 import H1 from "@/src/components/twui/layout/H1";
-import Span from "@/src/components/twui/layout/Span";
+import P from "@/src/components/twui/layout/P";
 import Button from "@/src/components/twui/layout/Button";
-import { Home } from "lucide-react";
-import Divider from "../components/twui/layout/Divider";
+import MonoText from "@/src/components/general/mono-text";
 import { SiteData } from "../data/site-data";
 
 export default function NotFoundPage() {
     return (
-        <>
-            <Section className="h-[130px] flex items-center bg-dark text-white p-0!"></Section>
-            <Section className="min-h-[60vh] flex items-center">
-                <Container>
-                    <Stack className="w-full items-center text-center gap-6">
-                        <Span className="text-8xl font-bold text-primary">
-                            404
-                        </Span>
-                        <H1 className="text-center">Page Not Found</H1>
-                        <Span className="text-xl max-w-md text-center opacity-70">
-                            The page you are looking for does not exist or has
-                            been moved.
-                        </Span>
-                        <Button
-                            title="Go Home"
-                            href="/"
-                            beforeIcon={<Home size={17} />}
-                        >
-                            Back to Home
-                        </Button>
-                    </Stack>
-                </Container>
-            </Section>
-            <Divider />
-        </>
+        <Stack center className="w-full gap-4 py-6 text-center">
+            <MonoText className="text-4xl! font-semibold text-subtle">404</MonoText>
+            <Stack center className="gap-1">
+                <H1 className="text-xl!">Page not found</H1>
+                <P className="text-[15px]">
+                    This page doesn't exist or has moved.
+                </P>
+            </Stack>
+            <Button title="Go to dashboard" href="/admin" size="small">
+                Go to dashboard
+            </Button>
+        </Stack>
     );
 }
 
 export const meta: BunextPageModuleMeta = {
-    title: `404 | ${SiteData["SiteName"]}`,
+    title: `Not found | ${SiteData["SiteName"]}`,
     description: "Page not found",
 };
diff --git a/src/pages/__root.server.ts b/src/pages/__root.server.ts
index e406a0e..3388f80 100644
--- a/src/pages/__root.server.ts
+++ b/src/pages/__root.server.ts
@@ -5,6 +5,8 @@ import grabHostDirnames from "../functions/backend/setup/grab-host-dir-names";
 import BunSQLite from "@moduletrace/bun-sqlite";
 import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
 import { AppData } from "../data/app-data";
+import { getCookie } from "../utils/cookies";
+import { isThemeMode, ThemeCookieName } from "../dict/theme-dict";
 
 const server: BunextPageServerFn<PagePropsType> = async ({ req, url }) => {
     const { user, user_types } = await userAuth({ req });
@@ -43,6 +45,9 @@ const server: BunextPageServerFn<PagePropsType> = async ({ req, url }) => {
 
     const main_host_record = main_host_record_res.singleRes || null;
 
+    const theme_cookie = getCookie(req, ThemeCookieName);
+    const theme = isThemeMode(theme_cookie) ? theme_cookie : "system";
+
     return {
         props: {
             environment: process.env.NODE_ENV,
@@ -54,6 +59,7 @@ const server: BunextPageServerFn<PagePropsType> = async ({ req, url }) => {
             user_types,
             main_host_dir_names,
             main_host: main_host_record,
+            theme,
         },
     };
 };
diff --git a/src/pages/__root.tsx b/src/pages/__root.tsx
index 01028cb..6a73869 100755
--- a/src/pages/__root.tsx
+++ b/src/pages/__root.tsx
@@ -1,91 +1,66 @@
-// @ts-ignore
-import "../styles/main.css";
-
-import React from "react";
-import type {
-    BunextPageHeadFCProps,
-    BunextRootComponentProps,
-} from "@moduletrace/bunext/types";
-
-import type { AppContextObject, AppStateObject } from "@/src/types";
-import Layout from "../layouts/main";
-import AdminLayout from "../layouts/admin";
-import LoginShell from "../components/general/login-shell";
-
-export const AppContext = React.createContext<AppContextObject>(
-    {} as AppContextObject,
-);
-
-/**
- * # NextApp App Root
- * @description Root component for NextApp App (Next.js)
- */
-export default function SBFApp({
-    children,
-    props,
-    url,
-    query,
-}: BunextRootComponentProps) {
-    const [refresh, setRefresh] = React.useState(0);
-    const [appState, setAppState] = React.useState<AppStateObject>({
-        likes: null,
-    });
-
-    const appContextObject: AppContextObject = {
-        user: null,
-        appState,
-        setAppState,
-        refresh,
-        setRefresh,
-        pageProps: { ...props, url },
-        query,
-    };
-
-    if (url?.pathname.startsWith("/admin")) {
-        return (
-            <AppContext.Provider value={appContextObject}>
-                <AdminLayout>{children}</AdminLayout>
-            </AppContext.Provider>
-        );
-    }
-
-    if (url?.pathname.startsWith("/auth")) {
-        return (
-            <AppContext.Provider value={appContextObject}>
-                <LoginShell>{children}</LoginShell>
-            </AppContext.Provider>
-        );
-    }
-
-    return (
-        <AppContext.Provider value={appContextObject}>
-            <Layout
-                // no_header_divider={
-                //     url?.pathname ? ["/"].includes(url.pathname) : undefined
-                // }
-                blank={
-                    url?.pathname
-                        ? ["/auth/logout"].includes(url.pathname)
-                        : undefined
-                }
-            >
-                {children}
-            </Layout>
-        </AppContext.Provider>
-    );
-}
-
-export function Head({ serverRes, ctx }: BunextPageHeadFCProps) {
-    return (
-        <>
-            <link rel="preconnect" href="https://fonts.googleapis.com" />
-            <link
-                rel="preconnect"
-                href="https://fonts.gstatic.com"
-                crossOrigin=""
-            />
-            <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.22.0/ace.min.js" />
-            <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.22.0/ext-language_tools.min.js" />
-        </>
-    );
-}
+// @ts-ignore
+import "../styles/main.css";
+
+import React from "react";
+import type {
+    BunextPageHeadFCProps,
+    BunextRootComponentProps,
+} from "@moduletrace/bunext/types";
+
+import type { AppContextObject } from "@/src/types";
+import AdminLayout from "../layouts/admin";
+import CenteredShell from "../layouts/centered";
+import AppProviders from "../components/general/app-providers";
+import ThemeScript from "../components/general/theme/theme-script";
+
+export const AppContext = React.createContext<AppContextObject>(
+    {} as AppContextObject,
+);
+
+/**
+ * # App Root
+ * Picks the layout from the path and provides `AppContext`.
+ */
+export default function SBFApp({
+    children,
+    props,
+    url,
+    query,
+}: BunextRootComponentProps) {
+    const appContextObject: AppContextObject = {
+        user: props?.user ?? null,
+        pageProps: { ...props, url },
+        query,
+    };
+
+    const is_admin = url?.pathname.startsWith("/admin");
+    const is_signup = url?.pathname.startsWith("/auth/signup");
+
+    return (
+        <AppContext.Provider value={appContextObject}>
+            <AppProviders>
+                {is_admin ? (
+                    <AdminLayout>{children}</AdminLayout>
+                ) : (
+                    <CenteredShell width={is_signup ? "md" : "sm"}>
+                        {children}
+                    </CenteredShell>
+                )}
+            </AppProviders>
+        </AppContext.Provider>
+    );
+}
+
+export function Head({}: BunextPageHeadFCProps) {
+    return (
+        <>
+            <ThemeScript />
+            <link rel="preconnect" href="https://fonts.googleapis.com" />
+            <link
+                rel="preconnect"
+                href="https://fonts.gstatic.com"
+                crossOrigin=""
+            />
+        </>
+    );
+}
diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
deleted file mode 100644
index 57625e1..0000000
--- a/src/pages/about/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
-import InnerPageHeroSection from "@/src/components/general/inner-page-hero-section";
-import { SiteData } from "@/src/data/site-data";
-
-export default function AboutPage() {
-    return (
-        <>
-            <InnerPageHeroSection
-                title="Our mission is to give orphans a proper home"
-                sub_title="About Us"
-                description="We raise a generation of God-fearing children who would compete very favourably with the elite in all ramifications."
-            />
-        </>
-    );
-}
-
-export const meta: BunextPageModuleMeta = {
-    title: `About Us | ${SiteData["SiteName"]}`,
-    description: `${SiteData["SiteDescription"]}`,
-};
diff --git a/src/pages/admin/(hooks)/use-dashboard-data.ts b/src/pages/admin/(hooks)/use-dashboard-data.ts
index dc9a59a..057e244 100644
--- a/src/pages/admin/(hooks)/use-dashboard-data.ts
+++ b/src/pages/admin/(hooks)/use-dashboard-data.ts
@@ -1,3 +1,4 @@
+import { useCallback } from "react";
 import { useAdminCrudGet } from "@/src/hooks/use-admin-crud-get";
 import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
 import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
@@ -16,8 +17,17 @@ export default function useDashboardData() {
         limit: 100,
     });
 
+    const { setRes: setClients } = clients_res;
+
+    const onClientDeleted = useCallback(
+        ({ id }: { id: number }) =>
+            setClients((prev) => prev?.filter((client) => client.id != id)),
+        [],
+    );
+
     return {
         clients: clients_res.res,
         hosts: hosts_res.res,
+        onClientDeleted,
     };
-}
\ No newline at end of file
+}
diff --git a/src/pages/admin/(partials)/stat-card.tsx b/src/pages/admin/(partials)/stat-card.tsx
deleted file mode 100644
index 5939453..0000000
--- a/src/pages/admin/(partials)/stat-card.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import type { ReactNode } from "react";
-import { twMerge } from "tailwind-merge";
-import AdminCard from "@/src/components/general/admin-card";
-import Span from "@/src/components/twui/layout/Span";
-import Stack from "@/src/components/twui/layout/Stack";
-
-type DeltaTone = "positive" | "negative" | "neutral";
-
-type Props = {
-    label: string;
-    value: string;
-    delta?: string;
-    deltaTone?: DeltaTone;
-    subtext?: string;
-    trailing?: ReactNode;
-    tier?: "default" | "secondary";
-    valueClassName?: string;
-};
-
-const DELTA_TONE_CLASS: Record<DeltaTone, string> = {
-    positive: "text-success dark:text-success",
-    negative: "text-error dark:text-error",
-    neutral: "text-foreground-light/50 dark:text-foreground-dark/50",
-};
-
-export default function StatCard({
-    label,
-    value,
-    delta,
-    deltaTone = "neutral",
-    subtext,
-    trailing,
-    tier = "secondary",
-    valueClassName,
-}: Props) {
-    return (
-        <AdminCard
-            tier={tier}
-            className="p-4 flex items-start justify-between gap-4"
-        >
-            <Stack className="min-w-0 gap-1.5">
-                <Span className="text-[11.5px] font-semibold uppercase tracking-[0.08em] text-foreground-light/50 dark:text-foreground-dark/50">
-                    {label}
-                </Span>
-                <Span
-                    className={twMerge(
-                        "tabular text-[22px] font-semibold tracking-[-0.02em] leading-none",
-                        "text-foreground-light dark:text-foreground-dark",
-                        valueClassName,
-                    )}
-                >
-                    {value}
-                </Span>
-                {delta || subtext ? (
-                    <Span
-                        className={twMerge(
-                            "text-[12.5px] font-medium tabular",
-                            delta ? DELTA_TONE_CLASS[deltaTone] : undefined,
-                        )}
-                    >
-                        {delta}
-                        {delta && subtext ? (
-                            <Span className="text-foreground-light/40 dark:text-foreground-dark/40">
-                                {" "}· {subtext}
-                            </Span>
-                        ) : null}
-                        {!delta && subtext ? (
-                            <Span className="text-foreground-light/40 dark:text-foreground-dark/40">
-                                {subtext}
-                            </Span>
-                        ) : null}
-                    </Span>
-                ) : null}
-            </Stack>
-            {trailing ? (
-                <Span className="shrink-0 self-center">{trailing}</Span>
-            ) : null}
-        </AdminCard>
-    );
-}
\ No newline at end of file
diff --git a/src/pages/admin/(sections)/kpi-hero-section.tsx b/src/pages/admin/(sections)/kpi-hero-section.tsx
deleted file mode 100644
index 6aa0acb..0000000
--- a/src/pages/admin/(sections)/kpi-hero-section.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import StatCard from "../(partials)/stat-card";
-import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
-
-type Props = {
-    clients?: BUN_SQLITE_WGUI_CLIENTS[];
-};
-
-export default function KpiHeroSection({ clients }: Props) {
-    return (
-        <StatCard
-            tier="default"
-            label="Total clients"
-            value={String(clients?.length || 0)}
-            subtext="WireGuard peers on this network"
-            valueClassName="text-4xl"
-        />
-    );
-}
\ No newline at end of file
diff --git a/src/pages/admin/(sections)/kpi-secondary-section.tsx b/src/pages/admin/(sections)/kpi-secondary-section.tsx
deleted file mode 100644
index 0c2a133..0000000
--- a/src/pages/admin/(sections)/kpi-secondary-section.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import StatCard from "../(partials)/stat-card";
-import type {
-    BUN_SQLITE_WGUI_CLIENTS,
-    BUN_SQLITE_WGUI_HOSTS,
-} from "@/db/types/db";
-
-type Props = {
-    clients?: BUN_SQLITE_WGUI_CLIENTS[];
-    hosts?: BUN_SQLITE_WGUI_HOSTS[];
-};
-
-export default function KpiSecondarySection({ clients, hosts }: Props) {
-    const main_host = hosts?.find((h) => h.id === 0);
-    const kpis = [
-        {
-            key: "k-clients",
-            label: "Total clients",
-            value: String(clients?.length || 0),
-        },
-        {
-            key: "k-hosts",
-            label: "Total hosts",
-            value: String(hosts?.length),
-        },
-        {
-            key: "k-host-address",
-            label: "Main host address",
-            value: main_host?.wg_ip_address || "—",
-        },
-    ];
-
-    return (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 w-full">
-            {kpis.map((kpi) => (
-                <StatCard key={kpi.key} label={kpi.label} value={kpi.value} />
-            ))}
-        </div>
-    );
-}
diff --git a/src/pages/admin/(sections)/kpi-section.tsx b/src/pages/admin/(sections)/kpi-section.tsx
new file mode 100644
index 0000000..3d74837
--- /dev/null
+++ b/src/pages/admin/(sections)/kpi-section.tsx
@@ -0,0 +1,43 @@
+import StatTile from "@/src/components/general/stat-tile";
+import deriveClientAccessLabel from "@/src/functions/frontend/derive-client-access-label";
+import type {
+    BUN_SQLITE_WGUI_CLIENT_RULES,
+    BUN_SQLITE_WGUI_CLIENTS,
+    BUN_SQLITE_WGUI_HOSTS,
+} from "@/db/types/db";
+import { AppData } from "@/src/data/app-data";
+
+type Props = {
+    clients?: BUN_SQLITE_WGUI_CLIENTS[];
+    hosts?: BUN_SQLITE_WGUI_HOSTS[];
+    rules_by_client_id: Map<number, BUN_SQLITE_WGUI_CLIENT_RULES[]>;
+};
+
+export default function KpiSection({ clients, hosts, rules_by_client_id }: Props) {
+    const main_host = hosts?.find((h) => h.id === AppData["WireguardMainHostID"]);
+
+    const no_access = clients?.filter(
+        (client) =>
+            deriveClientAccessLabel({
+                rules: rules_by_client_id.get(Number(client.id)),
+            }).kind == "none",
+    ).length;
+
+    return (
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 w-full">
+            <StatTile label="Clients" value={clients?.length} href="/admin/clients" />
+            <StatTile label="Hosts" value={hosts?.length} href="/admin/hosts" />
+            <StatTile
+                label="Main host"
+                value={hosts ? main_host?.wg_ip_address || "—" : undefined}
+                hint={main_host?.name}
+                mono
+            />
+            <StatTile
+                label="Without access"
+                value={no_access}
+                hint={no_access ? "Clients with no access rules" : "Every client has rules"}
+            />
+        </div>
+    );
+}
diff --git a/src/pages/admin/(sections)/peers-table-section.tsx b/src/pages/admin/(sections)/peers-table-section.tsx
index d0f4de6..e9df3cb 100644
--- a/src/pages/admin/(sections)/peers-table-section.tsx
+++ b/src/pages/admin/(sections)/peers-table-section.tsx
@@ -1,58 +1,53 @@
-import { ArrowUpRight } from "lucide-react";
-import Link from "@/src/components/twui/layout/Link";
-import H2 from "@/src/components/twui/layout/H2";
-import Row from "@/src/components/twui/layout/Row";
-import Stack from "@/src/components/twui/layout/Stack";
-import Span from "@/src/components/twui/layout/Span";
-import AdminCard from "@/src/components/general/admin-card";
+import { Users } from "lucide-react";
+import Button from "@/src/components/twui/layout/Button";
+import Panel from "@/src/components/general/panel";
 import ClientsTable from "@/src/components/general/clients-table";
-import useClientRulesMap from "@/src/hooks/use-client-rules-map";
+import EmptyState from "@/src/components/general/empty-state";
+import type { BUN_SQLITE_WGUI_CLIENT_RULES } from "@/db/types/db";
 import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
 
 type Props = {
     clients?: BUN_SQLITE_WGUI_CLIENTS_JOIN[];
+    rules_by_client_id: Map<number, BUN_SQLITE_WGUI_CLIENT_RULES[]>;
+    onDeleted: ({ id }: { id: number }) => void;
 };
 
 const RECENT_LIMIT = 8;
 
-export default function PeersTableSection({ clients }: Props) {
-    const recent = (clients || []).slice(0, RECENT_LIMIT);
-
-    const rules_by_client_id = useClientRulesMap();
-
+export default function PeersTableSection({ clients, rules_by_client_id, onDeleted }: Props) {
     return (
-        <AdminCard className="w-full overflow-hidden">
-            <Row className="justify-between gap-3 px-5 h-12 flex-wrap">
-                <H2 className="text-[13.5px] font-medium text-foreground-light/60 dark:text-foreground-dark/60 mb-0!">
-                    Recent peers
-                </H2>
-                <Link
+        <Panel
+            flush
+            title="Recent clients"
+            actions={
+                <Button
+                    title="View all clients"
                     href="/admin/clients"
-                    className="inline-flex items-center gap-0.5 no-underline! border-b-0! text-[12.5px] text-foreground-light/50 dark:text-foreground-dark/50 hover:text-foreground-light dark:hover:text-foreground-dark transition-colors"
+                    variant="ghost"
+                    color="gray"
+                    size="small"
                 >
                     View all
-                    <ArrowUpRight size={12} className="-mt-0.5" />
-                </Link>
-            </Row>
-            {recent.length ? (
-                <ClientsTable
-                    clients={recent}
-                    rules_by_client_id={rules_by_client_id}
-                    accessLabel="Access List"
-                />
-            ) : (
-                <Stack
-                    center
-                    className="w-full justify-center py-14 px-6 text-center gap-1"
-                >
-                    <Span className="text-[13.5px] font-medium text-foreground-light/50 dark:text-foreground-dark/50">
-                        No clients yet
-                    </Span>
-                    <Span className="text-[12.5px] text-foreground-light/35 dark:text-foreground-dark/35">
-                        Manage peers from the Clients page
-                    </Span>
-                </Stack>
-            )}
-        </AdminCard>
+                </Button>
+            }
+        >
+            <ClientsTable
+                clients={clients?.slice(0, RECENT_LIMIT)}
+                rules_by_client_id={rules_by_client_id}
+                onDeleted={onDeleted}
+                empty={
+                    <EmptyState
+                        icon={<Users size={18} />}
+                        title="No clients yet"
+                        description="Add a client to generate its WireGuard config and QR code."
+                        action={
+                            <Button title="Add client" href="/admin/clients/add" size="small">
+                                Add client
+                            </Button>
+                        }
+                    />
+                }
+            />
+        </Panel>
     );
-}
\ No newline at end of file
+}
diff --git a/src/pages/admin/clients/(functions)/filter-clients.ts b/src/pages/admin/clients/(functions)/filter-clients.ts
new file mode 100644
index 0000000..2d99028
--- /dev/null
+++ b/src/pages/admin/clients/(functions)/filter-clients.ts
@@ -0,0 +1,17 @@
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
+
+type Params = {
+    clients: BUN_SQLITE_WGUI_CLIENTS_JOIN[];
+    query: string;
+};
+
+export default function filterClients({ clients, query }: Params) {
+    const q = query.trim().toLowerCase();
+    if (!q) return clients;
+
+    return clients.filter((client) =>
+        [client.name, client.wg_ip_address, client.allowed_ips, client.host_name].some(
+            (value) => (value || "").toLowerCase().includes(q),
+        ),
+    );
+}
diff --git a/src/pages/admin/clients/(partials)/client-form-action.tsx b/src/pages/admin/clients/(partials)/client-form-action.tsx
deleted file mode 100644
index 3ce9472..0000000
--- a/src/pages/admin/clients/(partials)/client-form-action.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import Button from "@/src/components/twui/layout/Button";
-
-type Props = {
-    host_id: number;
-};
-
-export default function ClientFormAction({ host_id }: Props) {
-    const label =
-        host_id == 0 ? "Add client to Main Host" : `Add client to Host ${host_id}`;
-
-    return (
-        <Button
-            title={label}
-            href={`/admin/hosts/${host_id}/clients/add-client`}
-        >
-            {label}
-        </Button>
-    );
-}
\ No newline at end of file
diff --git a/src/pages/admin/clients/(partials)/client-form-host-select.tsx b/src/pages/admin/clients/(partials)/client-form-host-select.tsx
deleted file mode 100644
index 41655ff..0000000
--- a/src/pages/admin/clients/(partials)/client-form-host-select.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { Dispatch, SetStateAction } from "react";
-import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
-import Select from "@/src/components/twui/form/Select";
-
-type Props = {
-    hosts: BUN_SQLITE_WGUI_HOSTS[];
-    host_id: number;
-    setHostId: Dispatch<SetStateAction<number>>;
-};
-
-export default function ClientFormHostSelect({
-    hosts,
-    host_id,
-    setHostId,
-}: Props) {
-    return (
-        <Select
-            options={hosts.map((h) => ({
-                value: (h.id || 0).toString(),
-                title: h.id == 0 ? `Main Host` : `Host ${h.id}`,
-            }))}
-            changeHandler={(v) => {
-                setHostId(Number(v));
-            }}
-        />
-    );
-}
\ No newline at end of file
diff --git a/src/pages/admin/clients/(partials)/client-form-modal.tsx b/src/pages/admin/clients/(partials)/client-form-modal.tsx
deleted file mode 100644
index f592934..0000000
--- a/src/pages/admin/clients/(partials)/client-form-modal.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
-import Modal from "@/src/components/twui/elements/Modal";
-import Stack from "@/src/components/twui/layout/Stack";
-import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
-import { useAdminCrudGet } from "@/src/hooks/use-admin-crud-get";
-import ClientFormTitle from "./client-form-title";
-import ClientFormHostSelect from "./client-form-host-select";
-import ClientFormAction from "./client-form-action";
-
-type Props = {
-    open: boolean;
-    setOpen: Dispatch<SetStateAction<boolean>>;
-};
-
-export default function ClientFormModal({ open, setOpen }: Props) {
-    const [host_id, setHostId] = useState(0);
-
-    const { res: additional_hosts } = useAdminCrudGet<BUN_SQLITE_WGUI_HOSTS>({
-        table: "hosts",
-    });
-
-    useEffect(() => {
-        if (!open) {
-            setHostId(0);
-        }
-    }, [open]);
-
-    if (!additional_hosts) {
-        return null;
-    }
-
-    const hosts: BUN_SQLITE_WGUI_HOSTS[] = [...additional_hosts];
-
-    return (
-        <Modal open={open} setOpen={setOpen} className="p-6">
-            <Stack className="w-full items-stretch gap-6">
-                <ClientFormTitle />
-                <ClientFormHostSelect
-                    hosts={hosts}
-                    host_id={host_id}
-                    setHostId={setHostId}
-                />
-                <ClientFormAction host_id={host_id} />
-            </Stack>
-        </Modal>
-    );
-}
diff --git a/src/pages/admin/clients/(partials)/client-form-title.tsx b/src/pages/admin/clients/(partials)/client-form-title.tsx
deleted file mode 100644
index a5f66a0..0000000
--- a/src/pages/admin/clients/(partials)/client-form-title.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import H3 from "@/src/components/twui/layout/H3";
-import Span from "@/src/components/twui/layout/Span";
-import Stack from "@/src/components/twui/layout/Stack";
-
-export default function ClientFormTitle() {
-    return (
-        <Stack className="gap-2 mb-6">
-            <H3 className="text-lg font-bold text-foreground-light dark:text-foreground-dark">
-                Select Host
-            </H3>
-            <Span variant="faded">
-                Choose the host the client will be added to, then continue on
-                its add-client form
-            </Span>
-        </Stack>
-    );
-}
diff --git a/src/pages/admin/clients/(sections)/clients-table-section.tsx b/src/pages/admin/clients/(sections)/clients-table-section.tsx
index 7d87108..51dd067 100644
--- a/src/pages/admin/clients/(sections)/clients-table-section.tsx
+++ b/src/pages/admin/clients/(sections)/clients-table-section.tsx
@@ -1,26 +1,20 @@
-import { useMemo, useState, type Dispatch, type SetStateAction } from "react";
+import { useCallback, useMemo, useState } from "react";
+import { SearchX, Users } from "lucide-react";
 import Search from "@/src/components/twui/elements/Search";
-import Loading from "@/src/components/twui/elements/Loading";
-import AdminCard from "@/src/components/general/admin-card";
+import Button from "@/src/components/twui/layout/Button";
+import Panel from "@/src/components/general/panel";
 import ClientsTable from "@/src/components/general/clients-table";
-import H2 from "@/src/components/twui/layout/H2";
-import Span from "@/src/components/twui/layout/Span";
-import Row from "@/src/components/twui/layout/Row";
-import Stack from "@/src/components/twui/layout/Stack";
-import ClientFormModal from "../(partials)/client-form-modal";
+import EmptyState from "@/src/components/general/empty-state";
 import useClientRulesMap from "@/src/hooks/use-client-rules-map";
 import { useAdminCrudGet } from "@/src/hooks/use-admin-crud-get";
 import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
+import filterClients from "../(functions)/filter-clients";
 
-type Props = {
-    addOpen: boolean;
-    setAddOpen: Dispatch<SetStateAction<boolean>>;
-};
-
-export default function ClientsTableSection({ addOpen, setAddOpen }: Props) {
+export default function ClientsTableSection() {
     const [query, setQuery] = useState("");
+    const [search_key, setSearchKey] = useState(0);
 
-    const { res } = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS_JOIN>({
+    const { res, setRes } = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS_JOIN>({
         table: "clients",
         sql_query: {
             order: { field: "created_at", strategy: "DESC" },
@@ -30,64 +24,82 @@ export default function ClientsTableSection({ addOpen, setAddOpen }: Props) {
 
     const rules_by_client_id = useClientRulesMap();
 
-    const filtered = useMemo(() => {
-        const clients = res || [];
-        const q = query.trim().toLowerCase();
-        if (!q) {
-            return clients;
-        }
-        return clients.filter((client) =>
-            [client.name, client.wg_ip_address, client.allowed_ips].some(
-                (value) => (value || "").toLowerCase().includes(q),
-            ),
-        );
-    }, [res, query]);
+    const filtered = useMemo(
+        () => (res ? filterClients({ clients: res, query }) : undefined),
+        [res, query],
+    );
+
+    const onDeleted = useCallback(
+        ({ id }: { id: number }) =>
+            setRes((prev) => prev?.filter((client) => client.id != id)),
+        [],
+    );
+
+    function clearSearch() {
+        setQuery("");
+        setSearchKey((k) => k + 1);
+    }
 
     return (
-        <AdminCard className="w-full overflow-hidden">
-            <Row className="justify-between gap-3 px-5 h-12 flex-wrap">
-                <H2 className="text-[13.5px] font-medium text-foreground-light/60 dark:text-foreground-dark/60 mb-0!">
-                    Clients
-                    <Span className="tabular text-foreground-light/40 dark:text-foreground-dark/40 ml-2">
-                        {String(filtered.length)}
-                    </Span>
-                </H2>
+        <Panel
+            flush
+            title="All clients"
+            description={res ? `${res.length} total` : undefined}
+            actions={
                 <Search
+                    key={search_key}
                     no_search_button
-                    placeholder="Search clients…"
+                    placeholder="Search name, IP…"
                     changeHandler={(value) => setQuery(value || "")}
+                    className="w-full sm:w-64"
                     inputProps={{
-                        className: "!text-[13.5px]",
-                        wrapperProps: {
-                            className:
-                                "!py-[5px] !min-h-[30px] w-[220px] bg-foreground-light/[0.02] dark:bg-foreground-dark/[0.03]",
-                        },
+                        "aria-label": "Search clients",
+                        wrapperProps: { className: "py-1.5!" },
                     }}
                 />
-            </Row>
-            {res === undefined ? (
-                <Stack center className="w-full py-10">
-                    <Loading />
-                </Stack>
-            ) : filtered.length ? (
-                <ClientsTable
-                    clients={filtered}
-                    rules_by_client_id={rules_by_client_id}
-                    minWidthClass="min-w-[940px]"
-                />
-            ) : (
-                <Stack center className="w-full justify-center py-14 px-6 text-center gap-1">
-                    <Span className="text-[13.5px] font-medium text-foreground-light/50 dark:text-foreground-dark/50">
-                        {query ? "No clients found" : "No clients yet"}
-                    </Span>
-                    <Span className="text-[12.5px] text-foreground-light/35 dark:text-foreground-dark/35">
-                        {query
-                            ? "Try adjusting your search terms"
-                            : "Add a client to get started"}
-                    </Span>
-                </Stack>
-            )}
-            <ClientFormModal open={addOpen} setOpen={setAddOpen} />
-        </AdminCard>
+            }
+        >
+            <ClientsTable
+                clients={filtered}
+                rules_by_client_id={rules_by_client_id}
+                onDeleted={onDeleted}
+                skeleton_rows={6}
+                empty={
+                    query ? (
+                        <EmptyState
+                            icon={<SearchX size={18} />}
+                            title="No matches"
+                            description={`No client matches "${query}".`}
+                            action={
+                                <Button
+                                    title="Clear search"
+                                    variant="outlined"
+                                    color="gray"
+                                    size="small"
+                                    onClick={clearSearch}
+                                >
+                                    Clear search
+                                </Button>
+                            }
+                        />
+                    ) : (
+                        <EmptyState
+                            icon={<Users size={18} />}
+                            title="No clients yet"
+                            description="Each client gets its own key pair, tunnel IP and config file."
+                            action={
+                                <Button
+                                    title="Add client"
+                                    href="/admin/clients/add"
+                                    size="small"
+                                >
+                                    Add client
+                                </Button>
+                            }
+                        />
+                    )
+                }
+            />
+        </Panel>
     );
-}
\ No newline at end of file
+}
diff --git a/src/pages/admin/clients/add/(sections)/add-client-form-section.tsx b/src/pages/admin/clients/add/(sections)/add-client-form-section.tsx
new file mode 100644
index 0000000..2e2c780
--- /dev/null
+++ b/src/pages/admin/clients/add/(sections)/add-client-form-section.tsx
@@ -0,0 +1,16 @@
+import { useContext } from "react";
+import ClientForm from "@/src/components/general/client-form";
+import { AppContext } from "@/src/pages/__root";
+
+export default function AddClientFormSection() {
+    const { pageProps } = useContext(AppContext);
+
+    return (
+        <ClientForm
+            hosts={pageProps?.hosts || []}
+            host_id={Number(pageProps?.host?.id || 0)}
+            next_available_client_ip={pageProps?.next_available_client_ip}
+            cancel_href="/admin/clients"
+        />
+    );
+}
diff --git a/src/pages/admin/clients/add/index.server.ts b/src/pages/admin/clients/add/index.server.ts
new file mode 100644
index 0000000..19debf0
--- /dev/null
+++ b/src/pages/admin/clients/add/index.server.ts
@@ -0,0 +1,47 @@
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+import grabNextAvailableClientIPAddress from "@/src/functions/backend/setup/grab-next-available-client-ip";
+import { AppData } from "@/src/data/app-data";
+import type { PagePropsType, TableType } from "@/src/types";
+import BunSQLite from "@moduletrace/bun-sqlite";
+import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+
+const server: BunextPageServerFn<PagePropsType> = async (ctx) => {
+    const props = ctx.props as PagePropsType;
+
+    if (!props.main_host?.name) {
+        return {
+            redirect: {
+                destination: `/admin/hosts/add`,
+                permanent: false,
+            },
+        };
+    }
+
+    const hosts_res = await BunSQLite.select<BUN_SQLITE_WGUI_HOSTS, TableType>({
+        table: "hosts",
+    });
+
+    const hosts = hosts_res.payload || [];
+
+    const requested_id = Number(ctx.url.searchParams.get("host_id"));
+
+    const host =
+        hosts.find((h) => Number(h.id) === requested_id) ||
+        hosts.find((h) => Number(h.id) === AppData["WireguardMainHostID"]) ||
+        hosts[0] ||
+        null;
+
+    const next_ip_res = host
+        ? await grabNextAvailableClientIPAddress({ host })
+        : null;
+
+    return {
+        props: {
+            hosts,
+            host,
+            next_available_client_ip: next_ip_res?.stringRes || null,
+        },
+    };
+};
+
+export default server;
diff --git a/src/pages/admin/clients/add/index.tsx b/src/pages/admin/clients/add/index.tsx
new file mode 100644
index 0000000..83bebd1
--- /dev/null
+++ b/src/pages/admin/clients/add/index.tsx
@@ -0,0 +1,25 @@
+import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
+import PageHeader from "@/src/components/general/page-header";
+import PageBody from "@/src/components/general/page-body";
+import { SiteData } from "@/src/data/site-data";
+import AddClientFormSection from "./(sections)/add-client-form-section";
+
+export default function AddClientPage() {
+    return (
+        <>
+            <PageHeader
+                title="Add client"
+                description="Creates a key pair, assigns a tunnel IP and generates the WireGuard config."
+                back={{ href: "/admin/clients", title: "Clients" }}
+            />
+            <PageBody>
+                <AddClientFormSection />
+            </PageBody>
+        </>
+    );
+}
+
+export const meta: BunextPageModuleMeta = {
+    title: `Add client | ${SiteData["SiteName"]}`,
+    description: `Add a WireGuard client`,
+};
diff --git a/src/pages/admin/clients/index.tsx b/src/pages/admin/clients/index.tsx
index 651d617..93ae5ba 100644
--- a/src/pages/admin/clients/index.tsx
+++ b/src/pages/admin/clients/index.tsx
@@ -1,36 +1,26 @@
-import { useState } from "react";
 import { Plus } from "lucide-react";
 import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
-import AdminHero from "@/src/components/general/admin-hero";
-import AdminButton from "@/src/components/general/admin-button";
-import Stack from "@/src/components/twui/layout/Stack";
+import PageHeader from "@/src/components/general/page-header";
+import PageBody from "@/src/components/general/page-body";
 import { SiteData } from "@/src/data/site-data";
 import ClientsTableSection from "./(sections)/clients-table-section";
 
 export default function AdminClientsPage() {
-    const [addOpen, setAddOpen] = useState(false);
-
     return (
         <>
-            <AdminHero
+            <PageHeader
                 title="Clients"
-                description="Manage WireGuard peers and their configurations"
-                buttons={
-                    <AdminButton
-                        variant="primary"
-                        Icon={Plus}
-                        onClick={() => setAddOpen(true)}
-                    >
-                        Add client
-                    </AdminButton>
-                }
+                description="WireGuard peers across all hosts."
+                primary_action={{
+                    key: "add-client",
+                    title: "Add client",
+                    href: "/admin/clients/add",
+                    icon: <Plus size={14} />,
+                }}
             />
-            <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
-                <ClientsTableSection
-                    addOpen={addOpen}
-                    setAddOpen={setAddOpen}
-                />
-            </Stack>
+            <PageBody>
+                <ClientsTableSection />
+            </PageBody>
         </>
     );
 }
diff --git a/src/pages/admin/hosts/(functions)/build-hosts-table-columns.tsx b/src/pages/admin/hosts/(functions)/build-hosts-table-columns.tsx
new file mode 100644
index 0000000..9fe0691
--- /dev/null
+++ b/src/pages/admin/hosts/(functions)/build-hosts-table-columns.tsx
@@ -0,0 +1,66 @@
+import MonoText from "@/src/components/general/mono-text";
+import MutedText from "@/src/components/general/muted-text";
+import type { DataTableColumn } from "@/src/components/general/data-table/types";
+import deriveWireguardInterfaceName from "@/src/utils/derive-wireguard-interface-name";
+import { AppData } from "@/src/data/app-data";
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+import HostNameCell from "../(partials)/host-name-cell";
+import HostRowActions from "../(partials)/host-row-actions";
+
+type Params = {
+    client_counts: Map<number, number>;
+    onDeleted: ({ id }: { id: number }) => void;
+};
+
+export default function buildHostsTableColumns({
+    client_counts,
+    onDeleted,
+}: Params): DataTableColumn<BUN_SQLITE_WGUI_HOSTS>[] {
+    return [
+        {
+            key: "name",
+            header: "Host",
+            render: ({ item }) => <HostNameCell host={item} />,
+        },
+        {
+            key: "interface",
+            header: "Interface",
+            render: ({ item }) => (
+                <MonoText>{deriveWireguardInterfaceName({ host_id: Number(item.id || 0) })}</MonoText>
+            ),
+        },
+        {
+            key: "address",
+            header: "Address",
+            render: ({ item }) => <MonoText>{item.wg_ip_address || "—"}</MonoText>,
+        },
+        {
+            key: "endpoint",
+            header: "Endpoint",
+            hide_below: "lg",
+            render: ({ item }) =>
+                item.public_ip_address ? (
+                    <MonoText className="text-muted">
+                        {item.public_ip_address}:{item.listen_port || AppData["DefaultWGListenPort"]}
+                    </MonoText>
+                ) : (
+                    <MutedText>—</MutedText>
+                ),
+        },
+        {
+            key: "clients",
+            header: "Clients",
+            align: "right",
+            render: ({ item }) => (
+                <MutedText className="tabular">{client_counts.get(Number(item.id || 0)) || 0}</MutedText>
+            ),
+        },
+        {
+            key: "actions",
+            header: <span className="sr-only">Actions</span>,
+            align: "right",
+            className: "w-10",
+            render: ({ item }) => <HostRowActions host={item} onDeleted={onDeleted} />,
+        },
+    ];
+}
diff --git a/src/pages/admin/hosts/(hooks)/use-host-data.ts b/src/pages/admin/hosts/(hooks)/use-host-data.ts
index 3226382..1fd6d69 100644
--- a/src/pages/admin/hosts/(hooks)/use-host-data.ts
+++ b/src/pages/admin/hosts/(hooks)/use-host-data.ts
@@ -1,7 +1,7 @@
+import { useCallback, useContext } from "react";
 import { useAdminCrudGet } from "@/src/hooks/use-admin-crud-get";
 import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
 import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
-import { useContext } from "react";
 import { AppContext } from "@/src/pages/__root";
 
 export default function useHostData() {
@@ -19,8 +19,16 @@ export default function useHostData() {
         initial_res: pageProps?.clients || undefined,
     });
 
+    const { setRes: setHosts } = hosts_res;
+
+    const onHostDeleted = useCallback(
+        ({ id }: { id: number }) => setHosts((prev) => prev?.filter((host) => Number(host.id) != id)),
+        [],
+    );
+
     return {
         hosts: hosts_res.res,
         clients: clients_res.res,
+        onHostDeleted,
     };
 }
diff --git a/src/pages/admin/hosts/(partials)/host-card.tsx b/src/pages/admin/hosts/(partials)/host-card.tsx
deleted file mode 100644
index 42bb0fb..0000000
--- a/src/pages/admin/hosts/(partials)/host-card.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Edit2, Eye, GlobeCheck, Server } from "lucide-react";
-import AdminCard from "@/src/components/general/admin-card";
-import DeleteHostButton from "@/src/components/general/delete-host-button";
-import Button from "@/src/components/twui/layout/Button";
-import Row from "@/src/components/twui/layout/Row";
-import Span from "@/src/components/twui/layout/Span";
-import Stack from "@/src/components/twui/layout/Stack";
-import Tag from "@/src/components/twui/elements/Tag";
-import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
-import { AppData } from "@/src/data/app-data";
-import Link from "@/src/components/twui/layout/Link";
-
-type Props = {
-    host: BUN_SQLITE_WGUI_HOSTS;
-    client_count?: number;
-};
-
-export default function HostCard({ host, client_count }: Props) {
-    const host_id = host.id || 0;
-
-    const host_url = `/admin/hosts/${host_id}`;
-    const edit_url = `/admin/hosts/${host_id}/edit`;
-    const clients_url = `/admin/hosts/${host_id}/clients`;
-
-    const title = host_id == 0 ? "Main Host" : host.name || `Host #${host_id}`;
-
-    return (
-        <AdminCard className="w-full p-5 flex flex-col gap-4">
-            <Row className="justify-between items-center gap-3 flex-wrap">
-                <Link href={host_url}>
-                    <Stack className="gap-2">
-                        <Row className="gap-2 items-center">
-                            <GlobeCheck size={15} className="opacity-50" />
-                            <Span className="text-[14px] font-semibold leading-none">
-                                {title}
-                            </Span>
-                        </Row>
-                        <Span className="font-mono text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45">
-                            {host.wg_ip_address || "Not configured"}
-                        </Span>
-                    </Stack>
-                </Link>
-                <Row className="gap-2">
-                    <Button
-                        title="Host Clients"
-                        size="small"
-                        variant="outlined"
-                        href={clients_url}
-                    >
-                        Clients
-                    </Button>
-
-                    <Button
-                        title="View Host"
-                        size="small"
-                        variant="ghost"
-                        href={host_url}
-                    >
-                        <Eye size={17} />
-                    </Button>
-                    <Button
-                        title="Edit Host"
-                        size="small"
-                        variant="ghost"
-                        href={edit_url}
-                    >
-                        <Edit2 size={17} />
-                    </Button>
-                    <DeleteHostButton host_id={host_id} />
-                </Row>
-            </Row>
-            <Row className="gap-2 items-center flex-wrap">
-                {host.public_ip_address ? (
-                    <Span size="smaller">
-                        <code className="text-xs">
-                            {host.public_ip_address} :{" "}
-                            {host.listen_port || AppData["DefaultWGListenPort"]}
-                        </code>
-                    </Span>
-                ) : null}
-                <Span size="smaller">
-                    {client_count || 0}{" "}
-                    {client_count == 1 ? "client" : "clients"}
-                </Span>
-            </Row>
-        </AdminCard>
-    );
-}
diff --git a/src/pages/admin/hosts/(partials)/host-mobile-card.tsx b/src/pages/admin/hosts/(partials)/host-mobile-card.tsx
new file mode 100644
index 0000000..f25d29e
--- /dev/null
+++ b/src/pages/admin/hosts/(partials)/host-mobile-card.tsx
@@ -0,0 +1,30 @@
+import Row from "@/src/components/twui/layout/Row";
+import Stack from "@/src/components/twui/layout/Stack";
+import MonoText from "@/src/components/general/mono-text";
+import MutedText from "@/src/components/general/muted-text";
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+import HostNameCell from "./host-name-cell";
+import HostRowActions from "./host-row-actions";
+
+type Props = {
+    host: BUN_SQLITE_WGUI_HOSTS;
+    client_count: number;
+    onDeleted: ({ id }: { id: number }) => void;
+};
+
+export default function HostMobileCard({ host, client_count, onDeleted }: Props) {
+    return (
+        <Row className="w-full justify-between items-start gap-3 px-4 py-3 border-t border-line first:border-t-0 flex-nowrap">
+            <Stack className="gap-1.5 min-w-0">
+                <HostNameCell host={host} />
+                <Row className="gap-x-3 gap-y-1 pl-[18px]">
+                    <MonoText className="text-muted">{host.wg_ip_address || "—"}</MonoText>
+                    <MutedText>
+                        {client_count} {client_count == 1 ? "client" : "clients"}
+                    </MutedText>
+                </Row>
+            </Stack>
+            <HostRowActions host={host} onDeleted={onDeleted} />
+        </Row>
+    );
+}
diff --git a/src/pages/admin/hosts/(partials)/host-name-cell.tsx b/src/pages/admin/hosts/(partials)/host-name-cell.tsx
new file mode 100644
index 0000000..e52d37d
--- /dev/null
+++ b/src/pages/admin/hosts/(partials)/host-name-cell.tsx
@@ -0,0 +1,39 @@
+import Link from "@/src/components/twui/layout/Link";
+import Row from "@/src/components/twui/layout/Row";
+import Stack from "@/src/components/twui/layout/Stack";
+import StatusDot from "@/src/components/general/status-dot";
+import MutedText from "@/src/components/general/muted-text";
+import deriveHostDisplayName from "@/src/utils/derive-host-display-name";
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+
+type Props = {
+    host: BUN_SQLITE_WGUI_HOSTS;
+};
+
+export default function HostNameCell({ host }: Props) {
+    const configured = Boolean(host.wg_ip_address);
+
+    return (
+        <Row className="gap-2.5 flex-nowrap items-start">
+            <StatusDot
+                tone={configured ? "success" : "neutral"}
+                label={configured ? "Configured" : "Not configured"}
+                hide_label
+                className="mt-1.5"
+            />
+            <Stack className="gap-0 min-w-0">
+                <Link
+                    href={`/admin/hosts/${Number(host.id || 0)}`}
+                    className="text-[15px] font-medium text-fg! hover:text-primary! dark:hover:text-primary-dark-text! no-underline!"
+                >
+                    {deriveHostDisplayName({ host })}
+                </Link>
+                {host.short_description ? (
+                    <MutedText text_size="xs" className="truncate max-w-[280px]">
+                        {host.short_description}
+                    </MutedText>
+                ) : null}
+            </Stack>
+        </Row>
+    );
+}
diff --git a/src/pages/admin/hosts/(partials)/host-row-actions.tsx b/src/pages/admin/hosts/(partials)/host-row-actions.tsx
new file mode 100644
index 0000000..9c9f687
--- /dev/null
+++ b/src/pages/admin/hosts/(partials)/host-row-actions.tsx
@@ -0,0 +1,41 @@
+import { Eye, Pencil, Plus, Trash2, Users } from "lucide-react";
+import ActionMenu from "@/src/components/general/action-menu";
+import useDeleteHost from "@/src/components/general/use-delete-host";
+import deriveHostDisplayName from "@/src/utils/derive-host-display-name";
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+
+type Props = {
+    host: BUN_SQLITE_WGUI_HOSTS;
+    onDeleted: ({ id }: { id: number }) => void;
+};
+
+export default function HostRowActions({ host, onDeleted }: Props) {
+    const { deleteHost, deleting } = useDeleteHost({ onDeleted });
+    const base = `/admin/hosts/${Number(host.id || 0)}`;
+
+    return (
+        <ActionMenu
+            label={`Actions for ${deriveHostDisplayName({ host })}`}
+            className="items-end"
+            items={[
+                { key: "view", title: "View", href: base, icon: <Eye size={14} /> },
+                { key: "clients", title: "Clients", href: `${base}/clients`, icon: <Users size={14} /> },
+                {
+                    key: "add-client",
+                    title: "Add client",
+                    href: `/admin/clients/add?host_id=${Number(host.id || 0)}`,
+                    icon: <Plus size={14} />,
+                },
+                { key: "edit", title: "Edit", href: `${base}/edit`, icon: <Pencil size={14} /> },
+                {
+                    key: "delete",
+                    title: "Delete",
+                    tone: "danger",
+                    loading: deleting,
+                    icon: <Trash2 size={14} />,
+                    onClick: () => deleteHost({ host }),
+                },
+            ]}
+        />
+    );
+}
diff --git a/src/pages/admin/hosts/(partials)/host-stat-cell.tsx b/src/pages/admin/hosts/(partials)/host-stat-cell.tsx
deleted file mode 100644
index be05264..0000000
--- a/src/pages/admin/hosts/(partials)/host-stat-cell.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import Span from "@/src/components/twui/layout/Span";
-import Stack from "@/src/components/twui/layout/Stack";
-
-type Props = {
-    label: string;
-    value: string | number;
-};
-
-export default function HostStatCell({ label, value }: Props) {
-    return (
-        <Stack className="gap-1">
-            <Span className="text-[11.5px] font-semibold uppercase tracking-[0.08em] text-foreground-light/40 dark:text-foreground-dark/40">
-                {label}
-            </Span>
-            <Span className="tabular text-[15px] font-semibold text-foreground-light/85 dark:text-foreground-dark/85">
-                {value}
-            </Span>
-        </Stack>
-    );
-}
diff --git a/src/pages/admin/hosts/(partials)/interface-config-row.tsx b/src/pages/admin/hosts/(partials)/interface-config-row.tsx
deleted file mode 100644
index bc26708..0000000
--- a/src/pages/admin/hosts/(partials)/interface-config-row.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import Row from "@/src/components/twui/layout/Row";
-import Span from "@/src/components/twui/layout/Span";
-
-type Props = {
-    keyName: string;
-    value: string;
-};
-
-export default function InterfaceConfigRow({ keyName, value }: Props) {
-    return (
-        <Row className="justify-between gap-4 px-5 py-2.5 border-t border-slate-200/60 dark:border-white/5">
-            <Span className="font-mono text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45 whitespace-nowrap">
-                {keyName} =
-            </Span>
-            <Span className="font-mono text-[12.5px] text-foreground-light/70 dark:text-foreground-dark/70 text-right break-all">
-                {value}
-            </Span>
-        </Row>
-    );
-}
\ No newline at end of file
diff --git a/src/pages/admin/hosts/(sections)/host-public-ip-section.tsx b/src/pages/admin/hosts/(sections)/host-public-ip-section.tsx
deleted file mode 100644
index f136baf..0000000
--- a/src/pages/admin/hosts/(sections)/host-public-ip-section.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { useEffect, useState } from "react";
-import AdminCard from "@/src/components/general/admin-card";
-import AdminButton from "@/src/components/general/admin-button";
-import Input from "@/src/components/twui/form/Input";
-import H3 from "@/src/components/twui/layout/H3";
-import P from "@/src/components/twui/layout/P";
-import Row from "@/src/components/twui/layout/Row";
-import Span from "@/src/components/twui/layout/Span";
-import Stack from "@/src/components/twui/layout/Stack";
-import Tag from "@/src/components/twui/elements/Tag";
-import fetchApi from "@/src/components/twui/utils/fetch/fetchApi";
-import type { APIResponseObject } from "@moduletrace/bunext/types";
-import Button from "@/src/components/twui/layout/Button";
-
-type Props = {
-    host_id: number | string;
-    current_ip?: string;
-};
-
-export default function HostPublicIpSection({ host_id, current_ip }: Props) {
-    const [ip, setIp] = useState(current_ip || "");
-    const [displayedIp, setDisplayedIp] = useState(current_ip || "");
-    const [typed, setTyped] = useState(false);
-    const [busy, setBusy] = useState(false);
-    const [error, setError] = useState<string>();
-    const [success, setSuccess] = useState<string>();
-
-    useEffect(() => {
-        if (!current_ip || typed) return;
-        setIp(current_ip);
-        setDisplayedIp(current_ip);
-    }, [current_ip, typed]);
-
-    async function handleUpdate() {
-        setError(undefined);
-        setSuccess(undefined);
-
-        const value = ip.trim();
-
-        if (!value) {
-            setError("Please enter the new public IP address");
-            return;
-        }
-
-        setBusy(true);
-
-        try {
-            const res = await fetchApi<{ [k: string]: any }, APIResponseObject>(
-                "/api/admin/update-host-public-ip",
-                {
-                    method: "POST",
-                    body: {
-                        host_id,
-                        public_ip_address: value,
-                    },
-                },
-            );
-
-            if (!res.success) {
-                setError(res.msg || "Could not update the host IP");
-                return;
-            }
-
-            setDisplayedIp(value);
-            setSuccess(res.msg || "Host IP updated");
-        } catch (error: any) {
-            setError(error.message || "Could not update the host IP");
-        } finally {
-            setBusy(false);
-        }
-    }
-
-    return (
-        <AdminCard className="w-full p-5 flex flex-col gap-4">
-            <Stack className="gap-1">
-                <H3 className="text-[14px] font-semibold mb-0!">
-                    Host public IP
-                </H3>
-                <P
-                    noMargin
-                    className="text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45"
-                >
-                    The public IP address clients use to reach this host.
-                    Updating it regenerates every client config with the new
-                    Endpoint.
-                </P>
-            </Stack>
-            <Row className="gap-3 items-center flex-wrap">
-                <Span className="text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45 whitespace-nowrap">
-                    Current:
-                </Span>
-                <Span
-                    className={
-                        displayedIp
-                            ? "font-mono text-[12.5px] text-foreground-light/70 dark:text-foreground-dark/70"
-                            : "text-[12.5px] text-foreground-light/40 dark:text-foreground-dark/40"
-                    }
-                >
-                    {displayedIp || "Auto-detected"}
-                </Span>
-                <Input
-                    name="host_public_ip"
-                    id="host_public_ip"
-                    placeholder="e.g. 203.0.113.10"
-                    label="New public IP"
-                    showLabel
-                    defaultValue={ip}
-                    onChange={(e) => {
-                        setTyped(true);
-                        setIp(e.target.value);
-                    }}
-                />
-                <Button
-                    title="Update IP Button"
-                    variant="outlined"
-                    disabled={busy}
-                    onClick={handleUpdate}
-                    size="small"
-                >
-                    {busy ? "Updating…" : "Update IP & refresh configs"}
-                </Button>
-            </Row>
-            {error ? <Tag color="error">{error}</Tag> : null}
-            {success ? <Tag color="success">{success}</Tag> : null}
-        </AdminCard>
-    );
-}
diff --git a/src/pages/admin/hosts/(sections)/hosts-table-section.tsx b/src/pages/admin/hosts/(sections)/hosts-table-section.tsx
new file mode 100644
index 0000000..96ab745
--- /dev/null
+++ b/src/pages/admin/hosts/(sections)/hosts-table-section.tsx
@@ -0,0 +1,68 @@
+import { useCallback, useMemo } from "react";
+import { Server } from "lucide-react";
+import Button from "@/src/components/twui/layout/Button";
+import Panel from "@/src/components/general/panel";
+import DataTable from "@/src/components/general/data-table";
+import EmptyState from "@/src/components/general/empty-state";
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+import useHostData from "../(hooks)/use-host-data";
+import buildHostsTableColumns from "../(functions)/build-hosts-table-columns";
+import HostMobileCard from "../(partials)/host-mobile-card";
+
+export default function HostsTableSection() {
+    const { hosts, clients, onHostDeleted } = useHostData();
+
+    const client_counts = useMemo(() => {
+        const counts = new Map<number, number>();
+        for (const client of clients || []) {
+            const id = Number(client.host_id || 0);
+            counts.set(id, (counts.get(id) || 0) + 1);
+        }
+        return counts;
+    }, [clients]);
+
+    const columns = useMemo(
+        () => buildHostsTableColumns({ client_counts, onDeleted: onHostDeleted }),
+        [client_counts, onHostDeleted],
+    );
+
+    const MobileItem = useCallback(
+        ({ item }: { item: BUN_SQLITE_WGUI_HOSTS }) => (
+            <HostMobileCard
+                host={item}
+                client_count={client_counts.get(Number(item.id || 0)) || 0}
+                onDeleted={onHostDeleted}
+            />
+        ),
+        [client_counts, onHostDeleted],
+    );
+
+    return (
+        <Panel
+            flush
+            title="All hosts"
+            description={hosts ? `${hosts.length} ${hosts.length == 1 ? "host" : "hosts"}` : undefined}
+        >
+            <DataTable
+                caption="Hosts"
+                items={hosts}
+                columns={columns}
+                getKey={({ item }) => Number(item.id || 0)}
+                MobileItem={MobileItem}
+                skeleton_rows={3}
+                empty={
+                    <EmptyState
+                        icon={<Server size={18} />}
+                        title="No hosts yet"
+                        description="A host is a WireGuard interface with its own private subnet."
+                        action={
+                            <Button title="Add host" href="/admin/hosts/add" size="small">
+                                Add host
+                            </Button>
+                        }
+                    />
+                }
+            />
+        </Panel>
+    );
+}
diff --git a/src/pages/admin/hosts/(sections)/interface-config-section.tsx b/src/pages/admin/hosts/(sections)/interface-config-section.tsx
deleted file mode 100644
index f29765d..0000000
--- a/src/pages/admin/hosts/(sections)/interface-config-section.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { Copy } from "lucide-react";
-import AdminCard from "@/src/components/general/admin-card";
-import AdminButton from "@/src/components/general/admin-button";
-import InterfaceConfigRow from "../(partials)/interface-config-row";
-import H2 from "@/src/components/twui/layout/H2";
-import P from "@/src/components/twui/layout/P";
-import Row from "@/src/components/twui/layout/Row";
-import Span from "@/src/components/twui/layout/Span";
-import Stack from "@/src/components/twui/layout/Stack";
-import deriveHostConfig from "../(functions)/derive-host-config";
-import Divider from "@/src/components/twui/layout/Divider";
-import H3 from "@/src/components/twui/layout/H3";
-import type { BUN_SQLITE_WGUI_HOSTS_JOIN } from "@/src/types/sql-joins";
-import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
-import { useContext } from "react";
-import { AppContext } from "@/src/pages/__root";
-
-type Props = {
-    host?: BUN_SQLITE_WGUI_HOSTS_JOIN;
-    clients?: BUN_SQLITE_WGUI_CLIENTS_JOIN[];
-};
-
-export default function InterfaceConfigSection({ host, clients }: Props) {
-    const { pageProps } = useContext(AppContext);
-
-    const final_host: BUN_SQLITE_WGUI_HOSTS_JOIN = host
-        ? host
-        : {
-              dir_names: pageProps?.main_host_dir_names || undefined,
-          };
-
-    const config = deriveHostConfig({ host: final_host, clients });
-
-    const rows = [
-        { keyName: "Address", value: config.address || "—" },
-        { keyName: "ListenPort", value: String(config.listen_port) },
-        {
-            keyName: "PublicKey",
-            value: config.public_key ? config.public_key : "Not set",
-        },
-        { keyName: "PostUp", value: config.post_up },
-        { keyName: "PostDown", value: config.post_down },
-    ];
-
-    function buildConfigText() {
-        const lines = ["[Interface]"];
-        for (const row of rows) {
-            if (row) {
-                lines.push(`${row.keyName} = ${row.value}`);
-            }
-        }
-        lines.push("");
-        lines.push(
-            `# Public key: ${config.public_key?.slice(0, 24) || "Not generated"}`,
-        );
-        return lines.join("\n");
-    }
-
-    return (
-        <AdminCard className="w-full overflow-hidden">
-            <Stack className="w-full items-stretch py-4">
-                <Row className="justify-between gap-3 px-5 flex-wrap">
-                    <Stack className="gap-0.5">
-                        <H3>Interface configuration</H3>
-                        <P
-                            noMargin
-                            className="font-mono text-[11.5px] text-foreground-light/40 dark:text-foreground-dark/40"
-                        >
-                            {config.config_path}
-                        </P>
-                    </Stack>
-                    <AdminButton
-                        Icon={Copy}
-                        onClick={() =>
-                            navigator.clipboard?.writeText(buildConfigText())
-                        }
-                    >
-                        Copy config
-                    </AdminButton>
-                </Row>
-                <Divider />
-                <Span className="px-5 py-3 font-mono text-[12.5px] font-semibold text-secondary dark:text-secondary block">
-                    [Interface]
-                </Span>
-                {rows.map((row) => {
-                    if (!row?.value) return;
-
-                    return (
-                        <InterfaceConfigRow
-                            key={row.keyName}
-                            keyName={row.keyName}
-                            value={row.value}
-                        />
-                    );
-                })}
-                {/* <Row className="justify-between gap-4 px-5 py-2.5 border-t border-slate-200/60 dark:border-white/5">
-                    <Span className="font-mono text-[12px] text-foreground-light/35 dark:text-foreground-dark/35">
-                        # Public key ·{" "}
-                        {config.public_key
-                            ? `${config.public_key.slice(0, 24)}…`
-                            : "Not generated"}
-                    </Span>
-                </Row> */}
-            </Stack>
-        </AdminCard>
-    );
-}
diff --git a/src/pages/admin/hosts/(sections)/main-host-status-section.tsx b/src/pages/admin/hosts/(sections)/main-host-status-section.tsx
deleted file mode 100644
index 144cf45..0000000
--- a/src/pages/admin/hosts/(sections)/main-host-status-section.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import AdminCard from "@/src/components/general/admin-card";
-import HostStatCell from "../(partials)/host-stat-cell";
-import Row from "@/src/components/twui/layout/Row";
-import Span from "@/src/components/twui/layout/Span";
-import Stack from "@/src/components/twui/layout/Stack";
-import deriveHostConfig from "../(functions)/derive-host-config";
-import { twMerge } from "tailwind-merge";
-import type { BUN_SQLITE_WGUI_HOSTS_JOIN } from "@/src/types/sql-joins";
-import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
-
-type Props = {
-    host?: BUN_SQLITE_WGUI_HOSTS_JOIN;
-    clients?: BUN_SQLITE_WGUI_CLIENTS_JOIN[];
-};
-
-export default function MainHostStatusSection({ host, clients }: Props) {
-    const config = deriveHostConfig({ host, clients });
-
-    const stats = [
-        {
-            label: "Address",
-            value: config.address || "—",
-        },
-        {
-            label: "Interface",
-            value: config.interface_name,
-        },
-        {
-            label: "Peers",
-            value: String(config.client_count),
-        },
-        {
-            label: "Public IP",
-            value: host?.public_ip_address || "Not generated",
-        },
-        {
-            label: "Listen Port",
-            value: host?.listen_port || "No Listen Port",
-        },
-    ];
-
-    return (
-        <AdminCard className="w-full p-5 flex flex-col gap-5">
-            <Row className="justify-between flex-nowrap items-start gap-3">
-                <Row className="gap-3 items-start">
-                    <Span
-                        className={twMerge(
-                            "relative flex w-2.5 h-2.5",
-                            config.address
-                                ? "bg-success"
-                                : "bg-slate-400 dark:bg-slate-600",
-                        )}
-                        aria-hidden="true"
-                    />
-                    <Stack className="gap-1">
-                        <Span className="text-[14px] font-semibold text-foreground-light dark:text-foreground-dark leading-none">
-                            {config.address ? "Configured" : "Not configured"}
-                        </Span>
-                        <Span className="text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45">
-                            {config.interface_name}
-                            {config.address ? ` · ${config.address}` : ""}
-                        </Span>
-                    </Stack>
-                </Row>
-                <Span className="tabular text-[12px] text-foreground-light/40 dark:text-foreground-dark/40">
-                    {config.config_path}
-                </Span>
-            </Row>
-            <div className="grid grid-cols-2 lg:grid-cols-5 gap-x-4 gap-y-5 pt-4 border-t border-slate-200 dark:border-white/10">
-                {stats.map((stat) => (
-                    <HostStatCell
-                        key={stat.label}
-                        label={stat.label}
-                        value={stat.value}
-                    />
-                ))}
-            </div>
-        </AdminCard>
-    );
-}
diff --git a/src/pages/admin/hosts/[host_id]/(functions)/build-interface-summary.ts b/src/pages/admin/hosts/[host_id]/(functions)/build-interface-summary.ts
new file mode 100644
index 0000000..f757d94
--- /dev/null
+++ b/src/pages/admin/hosts/[host_id]/(functions)/build-interface-summary.ts
@@ -0,0 +1,21 @@
+import type deriveHostConfig from "../../(functions)/derive-host-config";
+
+type Params = {
+    config: ReturnType<typeof deriveHostConfig>;
+};
+
+/** Human-readable summary of the interface; not the literal wg.conf. */
+export default function buildInterfaceSummary({ config }: Params) {
+    const rows: [string, string | number | undefined][] = [
+        ["Address", config.address],
+        ["ListenPort", config.listen_port],
+        ["PublicKey", config.public_key],
+        ["PostUp", config.post_up],
+        ["PostDown", config.post_down],
+    ];
+
+    return [
+        "[Interface]",
+        ...rows.filter(([, value]) => value).map(([key, value]) => `${key} = ${value}`),
+    ].join("\n");
+}
diff --git a/src/pages/admin/hosts/[host_id]/(hooks)/use-host-header-actions.tsx b/src/pages/admin/hosts/[host_id]/(hooks)/use-host-header-actions.tsx
new file mode 100644
index 0000000..82befd1
--- /dev/null
+++ b/src/pages/admin/hosts/[host_id]/(hooks)/use-host-header-actions.tsx
@@ -0,0 +1,43 @@
+import { Pencil, Plus, Trash2, Users } from "lucide-react";
+import useDeleteHost from "@/src/components/general/use-delete-host";
+import type { ActionMenuItem } from "@/src/components/general/action-menu/types";
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+
+type Params = {
+    host?: BUN_SQLITE_WGUI_HOSTS;
+    host_id: number;
+};
+
+export default function useHostHeaderActions({ host, host_id }: Params) {
+    const { deleteHost, deleting } = useDeleteHost({
+        onDeleted: () => {
+            window.location.href = "/admin/hosts";
+        },
+    });
+
+    const primary_action: ActionMenuItem = {
+        key: "add-client",
+        title: "Add client",
+        href: `/admin/clients/add?host_id=${host_id}`,
+        icon: <Plus size={14} />,
+    };
+
+    const actions: ActionMenuItem[] = [
+        { key: "clients", title: "Clients", href: `/admin/hosts/${host_id}/clients`, icon: <Users size={14} /> },
+        { key: "edit", title: "Edit", href: `/admin/hosts/${host_id}/edit`, icon: <Pencil size={14} /> },
+        ...(host
+            ? [
+                  {
+                      key: "delete",
+                      title: "Delete",
+                      tone: "danger" as const,
+                      loading: deleting,
+                      icon: <Trash2 size={14} />,
+                      onClick: () => deleteHost({ host }),
+                  },
+              ]
+            : []),
+    ];
+
+    return { primary_action, actions };
+}
diff --git a/src/pages/admin/hosts/[host_id]/(partials)/host-header-meta.tsx b/src/pages/admin/hosts/[host_id]/(partials)/host-header-meta.tsx
new file mode 100644
index 0000000..2d618cc
--- /dev/null
+++ b/src/pages/admin/hosts/[host_id]/(partials)/host-header-meta.tsx
@@ -0,0 +1,26 @@
+import StatusDot from "@/src/components/general/status-dot";
+import MonoText from "@/src/components/general/mono-text";
+import deriveWireguardInterfaceName from "@/src/utils/derive-wireguard-interface-name";
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+
+type Props = {
+    host?: BUN_SQLITE_WGUI_HOSTS;
+    host_id: number;
+};
+
+export default function HostHeaderMeta({ host, host_id }: Props) {
+    const configured = Boolean(host?.wg_ip_address);
+
+    return (
+        <>
+            <StatusDot
+                tone={configured ? "success" : "neutral"}
+                label={configured ? "Configured" : "Not configured"}
+            />
+            <MonoText className="text-muted">
+                {deriveWireguardInterfaceName({ host_id })}
+                {host?.wg_ip_address ? ` · ${host.wg_ip_address}` : ""}
+            </MonoText>
+        </>
+    );
+}
diff --git a/src/pages/admin/hosts/[host_id]/(sections)/host-interface-section.tsx b/src/pages/admin/hosts/[host_id]/(sections)/host-interface-section.tsx
new file mode 100644
index 0000000..a565d36
--- /dev/null
+++ b/src/pages/admin/hosts/[host_id]/(sections)/host-interface-section.tsx
@@ -0,0 +1,38 @@
+import { useContext } from "react";
+import CodeBlock from "@/src/components/twui/elements/CodeBlock";
+import Panel from "@/src/components/general/panel";
+import MonoText from "@/src/components/general/mono-text";
+import { AppContext } from "@/src/pages/__root";
+import type { BUN_SQLITE_WGUI_HOSTS_JOIN, BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
+import deriveHostConfig from "../../(functions)/derive-host-config";
+import buildInterfaceSummary from "../(functions)/build-interface-summary";
+
+type Props = {
+    host?: BUN_SQLITE_WGUI_HOSTS_JOIN;
+    clients?: BUN_SQLITE_WGUI_CLIENTS_JOIN[];
+};
+
+export default function HostInterfaceSection({ host, clients }: Props) {
+    const { pageProps } = useContext(AppContext);
+
+    const final_host: BUN_SQLITE_WGUI_HOSTS_JOIN = host || {
+        dir_names: pageProps?.main_host_dir_names || undefined,
+    };
+
+    const config = deriveHostConfig({ host: final_host, clients });
+
+    return (
+        <Panel
+            title="Interface summary"
+            description={
+                config.config_path ? (
+                    <MonoText className="text-subtle break-all">{config.config_path}</MonoText>
+                ) : undefined
+            }
+        >
+            <CodeBlock wrapperProps={{ className: "max-w-full!" }}>
+                {buildInterfaceSummary({ config })}
+            </CodeBlock>
+        </Panel>
+    );
+}
diff --git a/src/pages/admin/hosts/[host_id]/(sections)/host-stats-section.tsx b/src/pages/admin/hosts/[host_id]/(sections)/host-stats-section.tsx
new file mode 100644
index 0000000..f0bd279
--- /dev/null
+++ b/src/pages/admin/hosts/[host_id]/(sections)/host-stats-section.tsx
@@ -0,0 +1,27 @@
+import StatTile from "@/src/components/general/stat-tile";
+import { AppData } from "@/src/data/app-data";
+import type { BUN_SQLITE_WGUI_HOSTS_JOIN, BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
+import deriveHostConfig from "../../(functions)/derive-host-config";
+
+type Props = {
+    host?: BUN_SQLITE_WGUI_HOSTS_JOIN;
+    clients?: BUN_SQLITE_WGUI_CLIENTS_JOIN[];
+};
+
+export default function HostStatsSection({ host, clients }: Props) {
+    const config = deriveHostConfig({ host, clients });
+
+    return (
+        <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-3 w-full">
+            <StatTile label="Address" value={config.address || "—"} mono />
+            <StatTile label="Interface" value={config.interface_name} mono />
+            <StatTile label="Clients" value={config.client_count} />
+            <StatTile label="Public IP" value={host?.public_ip_address || "—"} mono />
+            <StatTile
+                label="Listen port"
+                value={host?.listen_port || AppData["DefaultWGListenPort"]}
+                mono
+            />
+        </div>
+    );
+}
diff --git a/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/add-client-rule-modal.tsx b/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/add-client-rule-modal.tsx
deleted file mode 100644
index 98b5d1d..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/add-client-rule-modal.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { useState, type Dispatch, type SetStateAction } from "react";
-import { Plus } from "lucide-react";
-import Button from "@/src/components/twui/layout/Button";
-import Stack from "@/src/components/twui/layout/Stack";
-import expandClientRuleDestinations from "@/src/functions/backend/setup/expand-client-rule-destinations";
-import sanitizeClientRule from "@/src/functions/backend/setup/sanitize-client-rule";
-import validateClientRule from "@/src/functions/backend/setup/validate-client-rule";
-import ClientRuleFields from "./client-rule-fields";
-import {
-    clientRuleDraftToRecord,
-    clientRuleToDraft,
-    createClientRuleDraft,
-    type ClientRuleDraft,
-} from "./client-rule-draft";
-import Modal from "@/src/components/twui/elements/Modal";
-import useStatus from "@/src/components/twui/hooks/useStatus";
-import H4 from "@/src/components/twui/layout/H4";
-import Span from "@/src/components/twui/layout/Span";
-import Form from "@/src/components/twui/form/Form";
-import Divider from "@/src/components/twui/layout/Divider";
-
-type Props = {
-    rules: ClientRuleDraft[];
-    setRules: (rules: ClientRuleDraft[]) => void;
-    setError: Dispatch<SetStateAction<string | undefined>>;
-};
-
-export default function AddClientRuleModal({
-    rules,
-    setRules,
-    setError,
-}: Props) {
-    const [draft, setDraft] = useState<ClientRuleDraft>(
-        createClientRuleDraft(),
-    );
-    const { open, setOpen } = useStatus();
-
-    function handleAdd() {
-        const sanitized = sanitizeClientRule({
-            rule: clientRuleDraftToRecord({ draft }),
-        });
-        const valid = validateClientRule({ rule: sanitized });
-
-        if (!valid.success || !sanitized) {
-            setError(valid.msg || "Invalid rule");
-            return;
-        }
-
-        const expanded = expandClientRuleDestinations({ rule: sanitized }).map(
-            (rule) => clientRuleToDraft({ rule }),
-        );
-
-        setRules([...rules, ...expanded]);
-        setDraft(createClientRuleDraft());
-        setError(undefined);
-    }
-
-    const is_ll_access = Boolean(rules.find((r) => r.rule_type == "all"));
-
-    if (is_ll_access) {
-        return null;
-    }
-
-    return (
-        <Modal
-            open={open}
-            setOpen={setOpen}
-            target={
-                <Button
-                    title="Add Client Rule"
-                    size="smaller"
-                    variant="outlined"
-                >
-                    Add Client Rule
-                </Button>
-            }
-        >
-            <Stack className="w-full items-stretch gap-8">
-                <Stack className="gap-1!">
-                    <H4>Add Rule</H4>
-                    <Span>Add a new rule for this client</Span>{" "}
-                </Stack>
-
-                <Divider />
-
-                <ClientRuleFields draft={draft} setDraft={setDraft} />
-
-                <Button
-                    title="Add access rule"
-                    type="button"
-                    variant="outlined"
-                    size="small"
-                    beforeIcon={<Plus size={14} />}
-                    onClick={(e) => {
-                        e.preventDefault();
-                        handleAdd();
-                        setOpen(false);
-                    }}
-                >
-                    Add rule
-                </Button>
-            </Stack>
-        </Modal>
-    );
-}
diff --git a/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rule-draft-item.tsx b/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rule-draft-item.tsx
deleted file mode 100644
index 6c519f4..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rule-draft-item.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ShieldCheck, Trash2 } from "lucide-react";
-import Button from "@/src/components/twui/layout/Button";
-import Row from "@/src/components/twui/layout/Row";
-import Span from "@/src/components/twui/layout/Span";
-import formatClientRuleLabel from "@/src/functions/frontend/format-client-rule-label";
-import {
-    clientRuleDraftToRecord,
-    type ClientRuleDraft,
-} from "./client-rule-draft";
-
-type Props = {
-    draft: ClientRuleDraft;
-    onRemove: ({ local_id }: { local_id: string }) => void;
-};
-
-export default function ClientRuleDraftItem({ draft, onRemove }: Props) {
-    return (
-        <Row className="w-full justify-between gap-3 py-2.5 border-t border-slate-200/60 dark:border-white/5">
-            <Row className="items-center gap-2!">
-                <ShieldCheck size={15} className="-mt-[4px] text-success" />
-                <Span className="font-mono text-[12.5px] text-foreground-light/70 dark:text-foreground-dark/70 break-all">
-                    {formatClientRuleLabel({
-                        rule: clientRuleDraftToRecord({ draft }),
-                    })}
-                </Span>
-            </Row>
-            <Button
-                title="Remove rule"
-                variant="ghost"
-                color="error"
-                size="smaller"
-                beforeIcon={<Trash2 size={14} />}
-                type="button"
-                onClick={() => {
-                    onRemove({ local_id: draft.local_id });
-                }}
-            >
-                Remove
-            </Button>
-        </Row>
-    );
-}
diff --git a/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rule-fields.tsx b/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rule-fields.tsx
deleted file mode 100644
index 7891e2b..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rule-fields.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import Stack from "@/src/components/twui/layout/Stack";
-import type { ClientRuleDraft } from "./client-rule-draft";
-import ClientRuleDestinationField from "./client-rule-destination-field";
-import ClientRulePortsField from "./client-rule-ports-field";
-import ClientRuleProtocolField from "./client-rule-protocol-field";
-import ClientRuleTypeField from "./client-rule-type-field";
-import Form from "@/src/components/twui/form/Form";
-
-type Props = {
-    draft: ClientRuleDraft;
-    setDraft: (draft: ClientRuleDraft) => void;
-};
-
-export default function ClientRuleFields({ draft, setDraft }: Props) {
-    return (
-        <Form>
-            <Stack className="w-full items-stretch gap-4">
-                <ClientRuleTypeField draft={draft} setDraft={setDraft} />
-                <ClientRuleDestinationField draft={draft} setDraft={setDraft} />
-                <ClientRulePortsField draft={draft} setDraft={setDraft} />
-                <ClientRuleProtocolField draft={draft} setDraft={setDraft} />
-            </Stack>
-        </Form>
-    );
-}
diff --git a/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rule-type-field.tsx b/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rule-type-field.tsx
deleted file mode 100644
index a3690ec..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rule-type-field.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import Select from "@/src/components/twui/form/Select";
-import { ClientRuleTypes } from "@/src/dict/client-rules-dict";
-import type { ClientRuleType } from "@/src/types";
-import type { ClientRuleDraft } from "./client-rule-draft";
-import Checkbox from "@/src/components/twui/form/Checkbox";
-
-type Props = {
-    draft: ClientRuleDraft;
-    setDraft: (draft: ClientRuleDraft) => void;
-};
-
-export default function ClientRuleTypeField({ draft, setDraft }: Props) {
-    return (
-        <Checkbox
-            defaultChecked={draft.rule_type == "all"}
-            label={`Allow all access?`}
-            info={`This allows unlimited access to all clients in this network`}
-            changeHandler={(checked) => {
-                setDraft({
-                    ...draft,
-                    rule_type: checked ? "all" : "destination",
-                });
-            }}
-            wrapperWrapperProps={{ className: `mb-4` }}
-        />
-    );
-
-    // return (
-    //     <Select<ClientRuleType>
-    //         title="Access"
-    //         showLabel
-    //         options={ClientRuleTypes.map((type) => ({
-    //             title: type.title,
-    //             value: type.value,
-    //             default: type.value == draft.rule_type,
-    //         }))}
-    //         changeHandler={(value) => {
-    //             setDraft({
-    //                 ...draft,
-    //                 rule_type: value,
-    //             });
-    //         }}
-    //     />
-    // );
-}
diff --git a/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rules-editor.tsx b/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rules-editor.tsx
deleted file mode 100644
index 07f2740..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rules-editor.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useState } from "react";
-import { Plus } from "lucide-react";
-import Button from "@/src/components/twui/layout/Button";
-import H4 from "@/src/components/twui/layout/H4";
-import P from "@/src/components/twui/layout/P";
-import Stack from "@/src/components/twui/layout/Stack";
-import Tag from "@/src/components/twui/elements/Tag";
-import expandClientRuleDestinations from "@/src/functions/backend/setup/expand-client-rule-destinations";
-import sanitizeClientRule from "@/src/functions/backend/setup/sanitize-client-rule";
-import validateClientRule from "@/src/functions/backend/setup/validate-client-rule";
-import ClientRuleDraftItem from "./client-rule-draft-item";
-import ClientRulesEmpty from "./client-rules-empty";
-import {
-    clientRuleDraftToRecord,
-    clientRuleToDraft,
-    createClientRuleDraft,
-    type ClientRuleDraft,
-} from "./client-rule-draft";
-import AddClientRuleModal from "./add-client-rule-modal";
-import Row from "@/src/components/twui/layout/Row";
-import Paper from "@/src/components/twui/elements/Paper";
-
-type Props = {
-    rules: ClientRuleDraft[];
-    setRules: (rules: ClientRuleDraft[]) => void;
-};
-
-export default function ClientRulesEditor({ rules, setRules }: Props) {
-    const [error, setError] = useState<string>();
-
-    return (
-        <Paper className="w-full xl:p-6">
-            <Stack className="w-full items-stretch gap-4">
-                <Row className="w-full justify-between">
-                    <Stack className="gap-1">
-                        <H4 className="mb-0!">Access rules</H4>
-                        <P
-                            noMargin
-                            className="text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45"
-                        >
-                            Zero trust: nothing is allowed until you add a rule.
-                        </P>
-                    </Stack>
-
-                    <AddClientRuleModal
-                        rules={rules}
-                        setRules={setRules}
-                        setError={setError}
-                    />
-                </Row>
-
-                {error ? <Tag color="error">{error}</Tag> : null}
-
-                {rules[0] ? (
-                    <Stack className="w-full items-stretch">
-                        {rules.map((rule) => (
-                            <ClientRuleDraftItem
-                                key={rule.local_id}
-                                draft={rule}
-                                onRemove={({ local_id }) => {
-                                    setRules(
-                                        rules.filter(
-                                            (item) => item.local_id != local_id,
-                                        ),
-                                    );
-                                }}
-                            />
-                        ))}
-                    </Stack>
-                ) : (
-                    <ClientRulesEmpty />
-                )}
-            </Stack>
-        </Paper>
-    );
-}
diff --git a/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rules-empty.tsx b/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rules-empty.tsx
deleted file mode 100644
index 8ab0a7f..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/(partials)/client-rules/client-rules-empty.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import EmptyContent from "@/src/components/twui/elements/EmptyContent";
-
-export default function ClientRulesEmpty() {
-    return (
-        <EmptyContent
-            title={`No rules. This client cannot reach the host, LAN, internet, or other clients.`}
-        />
-    );
-}
diff --git a/src/pages/admin/hosts/[host_id]/clients/(partials)/clients-list.tsx b/src/pages/admin/hosts/[host_id]/clients/(partials)/clients-list.tsx
deleted file mode 100644
index d0f0c3e..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/(partials)/clients-list.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import Loading from "@/src/components/twui/elements/Loading";
-import Paper from "@/src/components/twui/elements/Paper";
-import Center from "@/src/components/twui/layout/Center";
-import Span from "@/src/components/twui/layout/Span";
-import ClientsTable from "@/src/components/general/clients-table";
-import useClientRulesMap from "@/src/hooks/use-client-rules-map";
-import { useAdminCrudGet } from "@/src/hooks/use-admin-crud-get";
-import { AppContext } from "@/src/pages/__root";
-import { useContext } from "react";
-import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
-
-type Props = {
-    host_id: string | number;
-};
-
-export default function ClientsList({ host_id }: Props) {
-    const { pageProps } = useContext(AppContext);
-
-    const { res: clients } = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS_JOIN>({
-        table: "clients",
-        sql_query: {
-            query: {
-                host_id: { value: host_id },
-            },
-            order: { field: "created_at", strategy: "DESC" },
-        },
-        initial_res: pageProps?.clients || undefined,
-    });
-
-    const rules_by_client_id = useClientRulesMap(pageProps?.client_rules);
-
-    if (!clients) {
-        return (
-            <Paper>
-                <Center>
-                    <Loading />
-                </Center>
-            </Paper>
-        );
-    }
-
-    if (!clients[0]) {
-        return (
-            <Paper>
-                <Center>
-                    <Span variant="faded">No Clients added yet</Span>
-                </Center>
-            </Paper>
-        );
-    }
-
-    return (
-        <Paper>
-            <ClientsTable
-                clients={clients}
-                rules_by_client_id={rules_by_client_id}
-            />
-        </Paper>
-    );
-}
diff --git a/src/pages/admin/hosts/[host_id]/clients/(sections)/clients-list-section.tsx b/src/pages/admin/hosts/[host_id]/clients/(sections)/clients-list-section.tsx
deleted file mode 100644
index 9824c96..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/(sections)/clients-list-section.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import H2 from "@/src/components/twui/layout/H2";
-import Section from "@/src/components/twui/layout/Section";
-import { AppContext } from "@/src/pages/__root";
-import { useContext } from "react";
-import ClientsList from "../(partials)/clients-list";
-
-export default function ClientsListSection() {
-    const { pageProps } = useContext(AppContext);
-
-    const clients = pageProps?.clients || [];
-
-    return (
-        <Section>
-            <H2>{clients.length} Clients</H2>
-            <ClientsList host_id={pageProps?.host?.id || 0} />
-        </Section>
-    );
-}
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(functions)/rerun-client-setup.ts b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(functions)/rerun-client-setup.ts
new file mode 100644
index 0000000..b70f08d
--- /dev/null
+++ b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(functions)/rerun-client-setup.ts
@@ -0,0 +1,15 @@
+import fetchApi from "@/src/components/twui/utils/fetch/fetchApi";
+import type { ApiReqParams } from "@/src/types";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+
+type Params = {
+    client_id: number;
+};
+
+/** Regenerates the client's config and re-applies its access rules. */
+export default async function rerunClientSetup({ client_id }: Params) {
+    return fetchApi<ApiReqParams, APIResponseObject>(`/api/admin/run-client-setup`, {
+        method: "POST",
+        body: { client_id },
+    });
+}
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(hooks)/use-client-header-actions.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(hooks)/use-client-header-actions.tsx
new file mode 100644
index 0000000..9b8674a
--- /dev/null
+++ b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(hooks)/use-client-header-actions.tsx
@@ -0,0 +1,41 @@
+import { useContext } from "react";
+import { Pencil, Trash2 } from "lucide-react";
+import { AppContext } from "@/src/pages/__root";
+import useDeleteClient from "@/src/components/general/clients-table/use-delete-client";
+import type { ActionMenuItem } from "@/src/components/general/action-menu/types";
+
+export default function useClientHeaderActions() {
+    const { pageProps } = useContext(AppContext);
+    const client = pageProps?.client;
+    const host_id = Number(client?.host_id || 0);
+
+    const { deleteClient, deleting } = useDeleteClient({
+        onDeleted: () => {
+            window.location.href = `/admin/hosts/${host_id}/clients`;
+        },
+    });
+
+    const primary_action: ActionMenuItem | undefined = client
+        ? {
+              key: "edit",
+              title: "Edit",
+              href: `/admin/hosts/${host_id}/clients/${client.id}/edit`,
+              icon: <Pencil size={14} />,
+          }
+        : undefined;
+
+    const actions: ActionMenuItem[] = client
+        ? [
+              {
+                  key: "delete",
+                  title: "Delete",
+                  tone: "danger",
+                  loading: deleting,
+                  icon: <Trash2 size={14} />,
+                  onClick: () => deleteClient({ client }),
+              },
+          ]
+        : [];
+
+    return { primary_action, actions };
+}
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(hooks)/use-client-rules.ts b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(hooks)/use-client-rules.ts
new file mode 100644
index 0000000..493f9ea
--- /dev/null
+++ b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(hooks)/use-client-rules.ts
@@ -0,0 +1,96 @@
+import { useContext } from "react";
+import type { BUN_SQLITE_WGUI_CLIENT_RULES } from "@/db/types/db";
+import { useAdminCrudGet } from "@/src/hooks/use-admin-crud-get";
+import { AppContext } from "@/src/pages/__root";
+import adminCrudHandler from "@/src/functions/frontend/admin-crud-handler";
+import useToast from "@/src/hooks/use-toast";
+import useConfirm from "@/src/hooks/use-confirm";
+import formatClientRuleLabel from "@/src/functions/frontend/format-client-rule-label";
+import {
+    clientRuleDraftToRecord,
+    type ClientRuleDraft,
+} from "@/src/components/general/client-rules/client-rule-draft";
+import rerunClientSetup from "../(functions)/rerun-client-setup";
+
+/**
+ * Saved rules of the current client. Every change re-runs client setup so the
+ * firewall matches the DB.
+ */
+export default function useClientRules() {
+    const { pageProps } = useContext(AppContext);
+    const { toast } = useToast();
+    const { confirm } = useConfirm();
+
+    const client = pageProps?.client;
+    const client_id = Number(client?.id || 0);
+
+    const { res: rules, setRes, refetch } = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENT_RULES>({
+        table: "client_rules",
+        sql_query: {
+            query: { client_id: { value: String(client_id) } },
+        },
+        initial_res: pageProps?.client_rules || [],
+    });
+
+    async function applySetup({ success_msg }: { success_msg: string }) {
+        const setup = await rerunClientSetup({ client_id });
+
+        if (!setup?.success) {
+            toast({
+                msg: setup?.msg || "Rules saved, but applying them failed. Run setup again.",
+                color: "error",
+            });
+            return;
+        }
+
+        toast({ msg: success_msg, color: "success" });
+    }
+
+    async function addRules({ rules: drafts }: { rules: ClientRuleDraft[] }) {
+        const res = await adminCrudHandler<BUN_SQLITE_WGUI_CLIENT_RULES>({
+            action: "insert",
+            table: "client_rules",
+            insert_data: drafts.map((draft) => ({
+                ...clientRuleDraftToRecord({ draft }),
+                client_id,
+                host_id: Number(client?.host_id || 0),
+                user_id: client?.user_id,
+            })),
+        });
+
+        if (!res.success) {
+            return { success: false, msg: res.msg || "Couldn't add the rule" };
+        }
+
+        refetch();
+        await applySetup({ success_msg: drafts.length > 1 ? "Rules added" : "Rule added" });
+        return { success: true };
+    }
+
+    async function removeRule({ rule }: { rule: BUN_SQLITE_WGUI_CLIENT_RULES }) {
+        const confirmed = await confirm({
+            title: "Remove this rule?",
+            message: formatClientRuleLabel({ rule }),
+            confirm_label: "Remove rule",
+            tone: "danger",
+        });
+
+        if (!confirmed) return;
+
+        const res = await adminCrudHandler({
+            action: "delete",
+            table: "client_rules",
+            id: rule.id,
+        });
+
+        if (!res.success) {
+            toast({ msg: res.msg || "Couldn't remove the rule", color: "error" });
+            return;
+        }
+
+        setRes((prev) => prev?.filter((r) => r.id != rule.id));
+        await applySetup({ success_msg: "Rule removed" });
+    }
+
+    return { rules, addRules, removeRule };
+}
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/add-client-rule-form.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/add-client-rule-form.tsx
deleted file mode 100644
index 941cfdf..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/add-client-rule-form.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useState } from "react";
-import { Plus } from "lucide-react";
-import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
-import Button from "@/src/components/twui/layout/Button";
-import Stack from "@/src/components/twui/layout/Stack";
-import Tag from "@/src/components/twui/elements/Tag";
-import adminCrudHandler from "@/src/functions/frontend/admin-crud-handler";
-import ClientRuleFields from "../../(partials)/client-rules/client-rule-fields";
-import {
-    clientRuleDraftToRecord,
-    createClientRuleDraft,
-    type ClientRuleDraft,
-} from "../../(partials)/client-rules/client-rule-draft";
-
-type Props = {
-    client: BUN_SQLITE_WGUI_CLIENTS_JOIN;
-};
-
-export default function AddClientRuleForm({ client }: Props) {
-    const [draft, setDraft] = useState<ClientRuleDraft>(
-        createClientRuleDraft(),
-    );
-    const [busy, setBusy] = useState(false);
-    const [error, setError] = useState<string>();
-
-    async function handleAdd() {
-        if (!client.id) {
-            setError("Client is missing an id");
-            return;
-        }
-
-        setBusy(true);
-        setError(undefined);
-
-        const res = await adminCrudHandler({
-            action: "insert",
-            table: "client_rules",
-            insert_data: [
-                {
-                    ...clientRuleDraftToRecord({ draft }),
-                    client_id: client.id,
-                    user_id: client.user_id,
-                },
-            ],
-        });
-
-        if (!res.success) {
-            setBusy(false);
-            setError(res.msg || "Could not add rule");
-            return;
-        }
-
-        window.location.reload();
-    }
-
-    return (
-        <Stack className="w-full items-stretch gap-4">
-            {error ? <Tag color="error">{error}</Tag> : null}
-            <ClientRuleFields draft={draft} setDraft={setDraft} />
-            <Button
-                title="Add access rule"
-                type="button"
-                variant="outlined"
-                size="small"
-                beforeIcon={<Plus size={14} />}
-                loading={busy}
-                onClick={handleAdd}
-            >
-                Add rule
-            </Button>
-        </Stack>
-    );
-}
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-config-panel.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-config-panel.tsx
new file mode 100644
index 0000000..77fa869
--- /dev/null
+++ b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-config-panel.tsx
@@ -0,0 +1,43 @@
+import { useContext } from "react";
+import { FileX } from "lucide-react";
+import CodeBlock from "@/src/components/twui/elements/CodeBlock";
+import Panel from "@/src/components/general/panel";
+import MonoText from "@/src/components/general/mono-text";
+import EmptyState from "@/src/components/general/empty-state";
+import CopyButton from "@/src/components/general/copy-button";
+import { AppContext } from "@/src/pages/__root";
+import DownloadConfigButton from "./download-config-button";
+
+export default function ClientConfigPanel() {
+    const { pageProps } = useContext(AppContext);
+    const config = pageProps?.client_config;
+    const config_path = pageProps?.client_config_path;
+
+    return (
+        <Panel
+            title="Config file"
+            description={
+                config_path ? <MonoText className="text-subtle break-all">{config_path}</MonoText> : undefined
+            }
+            actions={
+                config ? (
+                    <>
+                        <CopyButton value={config} label="Config" show_text />
+                        <DownloadConfigButton config={config} name={pageProps?.client?.name} />
+                    </>
+                ) : undefined
+            }
+        >
+            {config ? (
+                <CodeBlock wrapperProps={{ className: "max-w-full!" }}>{config}</CodeBlock>
+            ) : (
+                <EmptyState
+                    className="py-8"
+                    icon={<FileX size={18} />}
+                    title="No config file yet"
+                    description="Save the client again to generate its config on the server."
+                />
+            )}
+        </Panel>
+    );
+}
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-detail-actions.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-detail-actions.tsx
deleted file mode 100644
index d83762e..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-detail-actions.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { useState } from "react";
-import { Pencil, Trash2 } from "lucide-react";
-import Button from "@/src/components/twui/layout/Button";
-import adminCrudHandler from "@/src/functions/frontend/admin-crud-handler";
-import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
-
-type Props = {
-    client: BUN_SQLITE_WGUI_CLIENTS_JOIN;
-};
-
-export default function ClientDetailActions({ client }: Props) {
-    const [busy, setBusy] = useState(false);
-
-    const host_id = Number(client?.host_id || 0);
-
-    async function handleDelete() {
-        if (
-            !window.confirm(
-                `Delete client "${client?.name || `#${client?.id}`}"? The client will be removed from the host and its config file deleted.`,
-            )
-        ) {
-            return;
-        }
-
-        setBusy(true);
-
-        const res = await adminCrudHandler({
-            action: "delete",
-            table: "clients",
-            id: client?.id,
-        });
-
-        if (!res.success) {
-            setBusy(false);
-            window.alert(res.msg || "Could not delete client");
-            return;
-        }
-
-        window.location.pathname = `/admin/hosts/${host_id}/clients`;
-    }
-
-    return (
-        <>
-            <Button
-                title={`Edit client ${client?.name}`}
-                variant="outlined"
-                beforeIcon={<Pencil />}
-                href={`/admin/hosts/${host_id}/clients/${client?.id}/edit`}
-            >
-                Edit client
-            </Button>
-            <Button
-                title="Delete client"
-                variant="outlined"
-                color="error"
-                beforeIcon={<Trash2 />}
-                disabled={busy}
-                onClick={handleDelete}
-                className="hover:bg-error/10"
-            >
-                {busy ? "Deleting…" : "Delete client"}
-            </Button>
-        </>
-    );
-}
\ No newline at end of file
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-header-meta.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-header-meta.tsx
new file mode 100644
index 0000000..368c6c0
--- /dev/null
+++ b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-header-meta.tsx
@@ -0,0 +1,29 @@
+import { useContext } from "react";
+import Link from "@/src/components/twui/layout/Link";
+import StatusDot from "@/src/components/general/status-dot";
+import MonoText from "@/src/components/general/mono-text";
+import deriveClientHostName from "@/src/components/general/clients-table/derive-client-host-name";
+import { AppContext } from "@/src/pages/__root";
+
+export default function ClientHeaderMeta() {
+    const { pageProps } = useContext(AppContext);
+    const client = pageProps?.client;
+
+    if (!client) return null;
+
+    return (
+        <>
+            <StatusDot
+                tone={pageProps?.client_config ? "success" : "warning"}
+                label={pageProps?.client_config ? "Config generated" : "No config"}
+            />
+            <MonoText className="text-muted">{client.wg_ip_address}</MonoText>
+            <Link
+                href={`/admin/hosts/${Number(client.host_id || 0)}`}
+                className="text-[15px] text-muted! hover:text-fg! no-underline!"
+            >
+                {deriveClientHostName({ client })}
+            </Link>
+        </>
+    );
+}
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-info-row.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-info-row.tsx
deleted file mode 100644
index 7f0f430..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-info-row.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useState } from "react";
-import { Check, Copy } from "lucide-react";
-import Row from "@/src/components/twui/layout/Row";
-import Span from "@/src/components/twui/layout/Span";
-
-type Props = {
-    label: string;
-    value: string;
-    mono?: boolean;
-    copyable?: boolean;
-};
-
-export default function ClientInfoRow({ label, value, mono, copyable }: Props) {
-    const [copied, setCopied] = useState(false);
-
-    return (
-        <Row className="justify-between gap-4 px-5 py-2.5 border-t border-slate-200/60 dark:border-white/5">
-            <Span className="text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45 whitespace-nowrap">
-                {label}
-            </Span>
-            <Row className="items-center gap-2 min-w-0">
-                <Span
-                    className={
-                        mono
-                            ? "font-mono text-[12.5px] text-foreground-light/70 dark:text-foreground-dark/70 break-all"
-                            : "text-[12.5px] text-foreground-light/70 dark:text-foreground-dark/70 text-right break-all"
-                    }
-                >
-                    {value}
-                </Span>
-                {copyable && value && value != "—" ? (
-                    <button
-                        type="button"
-                        title="Copy value"
-                        aria-label={`Copy ${label}`}
-                        onClick={() => {
-                            navigator.clipboard?.writeText(value).then(() => {
-                                setCopied(true);
-                                setTimeout(() => setCopied(false), 2000);
-                            });
-                        }}
-                        className="text-foreground-light/40 dark:text-foreground-dark/40 hover:text-foreground-light dark:hover:text-foreground-dark transition-colors duration-150 p-1 focus:outline-2"
-                    >
-                        {copied ? (
-                            <Check size={14} />
-                        ) : (
-                            <Copy size={14} />
-                        )}
-                    </button>
-                ) : null}
-            </Row>
-        </Row>
-    );
-}
\ No newline at end of file
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-qr-panel.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-qr-panel.tsx
new file mode 100644
index 0000000..b9d04cb
--- /dev/null
+++ b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-qr-panel.tsx
@@ -0,0 +1,40 @@
+import { useContext } from "react";
+import { QrCode } from "lucide-react";
+import Img from "@/src/components/twui/layout/Img";
+import Stack from "@/src/components/twui/layout/Stack";
+import Panel from "@/src/components/general/panel";
+import MutedText from "@/src/components/general/muted-text";
+import EmptyState from "@/src/components/general/empty-state";
+import { AppContext } from "@/src/pages/__root";
+
+export default function ClientQrPanel() {
+    const { pageProps } = useContext(AppContext);
+    const qr_data_uri = pageProps?.client_qr_data_uri;
+
+    return (
+        <Panel title="QR code" description="For the WireGuard mobile app.">
+            {qr_data_uri ? (
+                <Stack center className="gap-3">
+                    <Img
+                        src={qr_data_uri}
+                        alt="QR code containing this client's WireGuard configuration"
+                        width={232}
+                        height={232}
+                        circle={false}
+                        className="rounded-default bg-white p-2 ring-1 ring-line"
+                    />
+                    <MutedText text_size="xs" className="text-center max-w-[232px]">
+                        In the app, tap + then “Scan from QR code”.
+                    </MutedText>
+                </Stack>
+            ) : (
+                <EmptyState
+                    className="py-8"
+                    icon={<QrCode size={18} />}
+                    title="No QR code"
+                    description="The QR code is generated from the client's config file."
+                />
+            )}
+        </Panel>
+    );
+}
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-rule-row.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-rule-row.tsx
deleted file mode 100644
index 51d93b4..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-rule-row.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useState } from "react";
-import { Trash2 } from "lucide-react";
-import type { BUN_SQLITE_WGUI_CLIENT_RULES } from "@/db/types/db";
-import Button from "@/src/components/twui/layout/Button";
-import Row from "@/src/components/twui/layout/Row";
-import Span from "@/src/components/twui/layout/Span";
-import adminCrudHandler from "@/src/functions/frontend/admin-crud-handler";
-import formatClientRuleLabel from "@/src/functions/frontend/format-client-rule-label";
-
-type Props = {
-    rule: BUN_SQLITE_WGUI_CLIENT_RULES;
-};
-
-export default function ClientRuleRow({ rule }: Props) {
-    const [busy, setBusy] = useState(false);
-
-    async function handleDelete() {
-        if (!window.confirm(`Delete this access rule?`)) {
-            return;
-        }
-
-        setBusy(true);
-
-        const res = await adminCrudHandler({
-            action: "delete",
-            table: "client_rules",
-            id: rule.id,
-        });
-
-        if (!res.success) {
-            setBusy(false);
-            window.alert(res.msg || "Could not delete rule");
-            return;
-        }
-
-        window.location.reload();
-    }
-
-    return (
-        <Row className="justify-between gap-3 px-5 py-2.5 border-t border-slate-200/60 dark:border-white/5">
-            <Span className="font-mono text-[12.5px] text-foreground-light/70 dark:text-foreground-dark/70 break-all">
-                {formatClientRuleLabel({ rule })}
-            </Span>
-            <Button
-                title="Delete rule"
-                variant="ghost"
-                color="error"
-                size="smaller"
-                beforeIcon={<Trash2 size={14} />}
-                disabled={busy}
-                onClick={handleDelete}
-            >
-                {busy ? "Deleting…" : "Delete"}
-            </Button>
-        </Row>
-    );
-}
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-saved-rule-item.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-saved-rule-item.tsx
new file mode 100644
index 0000000..94a6dd7
--- /dev/null
+++ b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-saved-rule-item.tsx
@@ -0,0 +1,24 @@
+import { useState } from "react";
+import type { BUN_SQLITE_WGUI_CLIENT_RULES } from "@/db/types/db";
+import ClientRuleItem from "@/src/components/general/client-rules/client-rule-item";
+
+type Props = {
+    rule: BUN_SQLITE_WGUI_CLIENT_RULES;
+    onRemove: ({ rule }: { rule: BUN_SQLITE_WGUI_CLIENT_RULES }) => Promise<void>;
+};
+
+export default function ClientSavedRuleItem({ rule, onRemove }: Props) {
+    const [removing, setRemoving] = useState(false);
+
+    return (
+        <ClientRuleItem
+            rule={rule}
+            removing={removing}
+            onRemove={async () => {
+                setRemoving(true);
+                await onRemove({ rule });
+                setRemoving(false);
+            }}
+        />
+    );
+}
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/download-config-button.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/download-config-button.tsx
new file mode 100644
index 0000000..4bbfab5
--- /dev/null
+++ b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/download-config-button.tsx
@@ -0,0 +1,41 @@
+import { Download } from "lucide-react";
+import Button from "@/src/components/twui/layout/Button";
+import twuiSlugify from "@/src/components/twui/utils/slugify";
+
+type Props = {
+    config: string;
+    name?: string;
+};
+
+/**
+ * WireGuard derives the interface name from the file name, which is capped
+ * at 15 characters.
+ */
+export default function DownloadConfigButton({ config, name }: Props) {
+    function download() {
+        const file_name = (twuiSlugify(name || "") || "wg-client").slice(0, 15);
+        const blob = new Blob([config], { type: "text/plain" });
+        const href = URL.createObjectURL(blob);
+
+        const link = document.createElement("a");
+        link.href = href;
+        link.download = `${file_name}.conf`;
+        link.click();
+
+        URL.revokeObjectURL(href);
+    }
+
+    return (
+        <Button
+            title="Download config file"
+            type="button"
+            variant="outlined"
+            color="gray"
+            size="small"
+            onClick={download}
+        >
+            <Download size={14} />
+            Download .conf
+        </Button>
+    );
+}
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-config-section.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-config-section.tsx
deleted file mode 100644
index f9a4e54..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-config-section.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useContext } from "react";
-import AdminCard from "@/src/components/general/admin-card";
-import CodeBlock from "@/src/components/twui/elements/CodeBlock";
-import EmptyContent from "@/src/components/twui/elements/EmptyContent";
-import H3 from "@/src/components/twui/layout/H3";
-import P from "@/src/components/twui/layout/P";
-import Row from "@/src/components/twui/layout/Row";
-import Span from "@/src/components/twui/layout/Span";
-import Stack from "@/src/components/twui/layout/Stack";
-import { AppContext } from "@/src/pages/__root";
-import AceEditor from "@/src/components/twui/editors/AceEditor";
-
-export default function ClientConfigSection() {
-    const { pageProps } = useContext(AppContext);
-
-    const config = pageProps?.client_config;
-
-    if (!config) {
-        return (
-            <AdminCard className="w-full overflow-hidden">
-                <Stack className="w-full items-stretch py-4">
-                    <Row className="justify-between gap-3 px-5 flex-wrap">
-                        <H3 className="mb-0!">Client configuration</H3>
-                    </Row>
-                    <EmptyContent title="No configuration file found" />
-                    <Stack className="w-full justify-center py-1 px-6 text-center gap-1">
-                        <Span className="text-[12.5px] text-foreground-light/35 dark:text-foreground-dark/35">
-                            Run the client setup for this client to generate its
-                            wg.conf on the server.
-                            {pageProps?.client_config_path
-                                ? ` Expected at ${pageProps.client_config_path}.`
-                                : ""}
-                        </Span>
-                    </Stack>
-                </Stack>
-            </AdminCard>
-        );
-    }
-
-    return (
-        <AdminCard className="w-full overflow-hidden">
-            <Stack className="w-full items-stretch py-4">
-                <Row className="justify-between gap-3 px-5 flex-wrap">
-                    <Stack className="gap-0.5">
-                        <H3 className="mb-0!">Client configuration</H3>
-                        <P
-                            noMargin
-                            className="font-mono text-[11.5px] text-foreground-light/40 dark:text-foreground-dark/40"
-                        >
-                            {pageProps?.client_config_path}
-                        </P>
-                    </Stack>
-                    <Span variant="faded">
-                        Use this file with the WireGuard app
-                    </Span>
-                </Row>
-                <AceEditor content={config} mode="ini" />
-            </Stack>
-        </AdminCard>
-    );
-}
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-config-tab.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-config-tab.tsx
new file mode 100644
index 0000000..d558b64
--- /dev/null
+++ b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-config-tab.tsx
@@ -0,0 +1,11 @@
+import ClientQrPanel from "../(partials)/client-qr-panel";
+import ClientConfigPanel from "../(partials)/client-config-panel";
+
+export default function ClientConfigTab() {
+    return (
+        <div className="grid w-full gap-5 lg:grid-cols-[300px_minmax(0,1fr)] items-start">
+            <ClientQrPanel />
+            <ClientConfigPanel />
+        </div>
+    );
+}
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-detail-tabs.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-detail-tabs.tsx
new file mode 100644
index 0000000..e232fa8
--- /dev/null
+++ b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-detail-tabs.tsx
@@ -0,0 +1,45 @@
+import { useContext } from "react";
+import Tabs from "@/src/components/twui/elements/Tabs";
+import { AppContext } from "@/src/pages/__root";
+import useClientRules from "../(hooks)/use-client-rules";
+import ClientOverviewTab from "./client-overview-tab";
+import ClientRulesTab from "./client-rules-tab";
+import ClientConfigTab from "./client-config-tab";
+
+const TabValues = ["overview", "rules", "config"];
+
+export default function ClientDetailTabs() {
+    const { pageProps } = useContext(AppContext);
+    const { rules, addRules, removeRule } = useClientRules();
+
+    const requested = pageProps?.url?.searchParams?.tab;
+    const default_tab = requested && TabValues.includes(requested) ? requested : "overview";
+
+    return (
+        <Tabs
+            hrefUpdate
+            debounce={0}
+            defaultValue={default_tab}
+            className="gap-5 items-stretch"
+            tabsContentArray={[
+                {
+                    title: "Overview",
+                    value: "overview",
+                    content: <ClientOverviewTab rules={rules} />,
+                },
+                {
+                    title: `Rules${rules ? ` (${rules.length})` : ""}`,
+                    value: "rules",
+                    content: (
+                        <ClientRulesTab rules={rules} addRules={addRules} removeRule={removeRule} />
+                    ),
+                },
+                {
+                    title: "Config & QR",
+                    value: "config",
+                    content: <ClientConfigTab />,
+                },
+            ]}
+        />
+    );
+}
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-info-section.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-info-section.tsx
deleted file mode 100644
index ffaad4b..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-info-section.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { useContext } from "react";
-import AdminCard from "@/src/components/general/admin-card";
-import H3 from "@/src/components/twui/layout/H3";
-import Row from "@/src/components/twui/layout/Row";
-import Stack from "@/src/components/twui/layout/Stack";
-import { AppContext } from "@/src/pages/__root";
-import deriveClientAccessLabel from "@/src/functions/frontend/derive-client-access-label";
-import ClientInfoRow from "../(partials)/client-info-row";
-
-export default function ClientInfoSection() {
-    const { pageProps } = useContext(AppContext);
-
-    const client = pageProps?.client;
-    const host_id = Number(client?.host_id || 0);
-    const access = deriveClientAccessLabel({
-        rules: pageProps?.client_rules,
-    });
-
-    if (!client) {
-        return null;
-    }
-
-    const rows = [
-        {
-            label: "Host",
-            value: host_id ? `Host #${host_id}` : "Main host",
-        },
-        {
-            label: "Tunnel IP",
-            value: client.wg_ip_address || "—",
-            mono: true,
-        },
-        {
-            label: "Allowed IPs",
-            value: client.allowed_ips || "—",
-            mono: true,
-        },
-        {
-            label: "Access",
-            value: access.text,
-        },
-        {
-            label: "Public key",
-            value: client.public_key || "—",
-            mono: true,
-            copyable: true,
-        },
-        {
-            label: "Notes",
-            value: client.notes || "—",
-        },
-    ];
-
-    return (
-        <AdminCard className="w-full overflow-hidden">
-            <Stack className="w-full items-stretch py-4">
-                <Row className="justify-between gap-3 px-5 flex-wrap">
-                    <H3 className="mb-0!">Client information</H3>
-                </Row>
-                {rows.map((row) => (
-                    <ClientInfoRow key={row.label} {...row} />
-                ))}
-            </Stack>
-        </AdminCard>
-    );
-}
\ No newline at end of file
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-overview-tab.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-overview-tab.tsx
new file mode 100644
index 0000000..aecaea7
--- /dev/null
+++ b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-overview-tab.tsx
@@ -0,0 +1,49 @@
+import { useContext } from "react";
+import type { BUN_SQLITE_WGUI_CLIENT_RULES } from "@/db/types/db";
+import Panel from "@/src/components/general/panel";
+import KeyValueList from "@/src/components/general/key-value-list";
+import ClientAccessTag from "@/src/components/general/clients-table/client-access-tag";
+import deriveClientHostName from "@/src/components/general/clients-table/derive-client-host-name";
+import formatUnixTimestamp from "@/src/utils/format-unix-timestamp";
+import { AppContext } from "@/src/pages/__root";
+
+type Props = {
+    rules?: BUN_SQLITE_WGUI_CLIENT_RULES[];
+};
+
+export default function ClientOverviewTab({ rules }: Props) {
+    const { pageProps } = useContext(AppContext);
+    const client = pageProps?.client;
+
+    if (!client) return null;
+
+    return (
+        <Panel title="Details">
+            <KeyValueList
+                items={[
+                    { key: "host", label: "Host", value: deriveClientHostName({ client }) },
+                    { key: "ip", label: "Tunnel IP", value: client.wg_ip_address || "—", mono: true },
+                    {
+                        key: "allowed",
+                        label: "Allowed IPs",
+                        value: client.allow_all_ips ? "0.0.0.0/0, ::/0" : client.allowed_ips || "—",
+                        mono: true,
+                    },
+                    { key: "access", label: "Access", value: <ClientAccessTag rules={rules} /> },
+                    {
+                        key: "key",
+                        label: "Public key",
+                        value: client.public_key || "—",
+                        copy_value: client.public_key || undefined,
+                    },
+                    { key: "notes", label: "Notes", value: client.notes || "—" },
+                    {
+                        key: "created",
+                        label: "Created",
+                        value: formatUnixTimestamp({ timestamp: client.created_at }),
+                    },
+                ]}
+            />
+        </Panel>
+    );
+}
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-qr-section.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-qr-section.tsx
deleted file mode 100644
index bdc4130..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-qr-section.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useContext } from "react";
-import AdminCard from "@/src/components/general/admin-card";
-import H3 from "@/src/components/twui/layout/H3";
-import Img from "@/src/components/twui/layout/Img";
-import P from "@/src/components/twui/layout/P";
-import Row from "@/src/components/twui/layout/Row";
-import Stack from "@/src/components/twui/layout/Stack";
-import { AppContext } from "@/src/pages/__root";
-
-export default function ClientQRSection() {
-    const { pageProps } = useContext(AppContext);
-
-    const qr_data_uri = pageProps?.client_qr_data_uri;
-
-    return (
-        <AdminCard className="w-full overflow-hidden">
-            <Stack className="w-full items-stretch py-4">
-                <Row className="justify-between gap-3 px-5 flex-wrap">
-                    <H3 className="mb-0!">Add via QR code</H3>
-                </Row>
-                {qr_data_uri ? (
-                    <Row className="justify-center gap-4 px-5 py-5">
-                        <Stack className="gap-2 items-center">
-                            <Img
-                                src={qr_data_uri}
-                                alt="WireGuard configuration QR code for importing this client into the phone app"
-                                width={260}
-                                height={260}
-                                circle={false}
-                                className="rounded-default"
-                            />
-                            <P
-                                noMargin
-                                className="text-[12px] text-foreground-light/50 dark:text-foreground-dark/50 max-w-[260px] text-center"
-                            >
-                                Scan with the official WireGuard app, or import the
-                                config file manually via the config tab
-                            </P>
-                        </Stack>
-                    </Row>
-                ) : (
-                    <Stack className="w-full justify-center py-10 px-6 text-center gap-1">
-                        <P
-                            noMargin
-                            className="text-[13px] font-medium text-foreground-light/50 dark:text-foreground-dark/50"
-                        >
-                            No QR code available
-                        </P>
-                        <P
-                            noMargin
-                            className="text-[12.5px] text-foreground-light/35 dark:text-foreground-dark/35"
-                        >
-                            Generate the client config first — the QR code is
-                            created from the stored wg.conf
-                        </P>
-                    </Stack>
-                )}
-            </Stack>
-        </AdminCard>
-    );
-}
\ No newline at end of file
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-rules-section.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-rules-section.tsx
deleted file mode 100644
index 06ea2d4..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-rules-section.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { ShieldOff } from "lucide-react";
-import { useContext } from "react";
-import AdminCard from "@/src/components/general/admin-card";
-import EmptyContent from "@/src/components/twui/elements/EmptyContent";
-import H3 from "@/src/components/twui/layout/H3";
-import P from "@/src/components/twui/layout/P";
-import Row from "@/src/components/twui/layout/Row";
-import Stack from "@/src/components/twui/layout/Stack";
-import { AppContext } from "@/src/pages/__root";
-import AddClientRuleForm from "../(partials)/add-client-rule-form";
-import ClientRuleRow from "../(partials)/client-rule-row";
-import Modal from "@/src/components/twui/elements/Modal";
-import useStatus from "@/src/components/twui/hooks/useStatus";
-import Button from "@/src/components/twui/layout/Button";
-import H4 from "@/src/components/twui/layout/H4";
-import Span from "@/src/components/twui/layout/Span";
-
-export default function ClientRulesSection() {
-    const { pageProps } = useContext(AppContext);
-
-    const client = pageProps?.client;
-    const rules = pageProps?.client_rules || [];
-
-    const { open, setOpen } = useStatus();
-
-    if (!client) {
-        return null;
-    }
-
-    return (
-        <AdminCard className="w-full overflow-hidden">
-            <Stack className="w-full items-stretch py-4 gap-4">
-                <Row className="w-full justify-between px-5">
-                    <Stack className="gap-0.5">
-                        <Row className="justify-between gap-3 flex-wrap">
-                            <H3 className="mb-0!">Access rules</H3>
-                        </Row>
-                        <P
-                            noMargin
-                            className="text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45"
-                        >
-                            Zero trust: this client can only reach what you list
-                            here.
-                        </P>
-                    </Stack>
-
-                    <Modal
-                        open={open}
-                        setOpen={setOpen}
-                        target={
-                            <Button
-                                title="Add Rule"
-                                size="smaller"
-                                variant="outlined"
-                            >
-                                Add Rule
-                            </Button>
-                        }
-                    >
-                        <Stack className="gap-10 w-full items-stretch">
-                            <Stack className="gap-0.5">
-                                <H4>Add Rule</H4>
-                                <Span>
-                                    Add a new access rule to this client
-                                </Span>
-                            </Stack>
-                            <AddClientRuleForm client={client} />
-                        </Stack>
-                    </Modal>
-                </Row>
-
-                {rules[0] ? (
-                    <Stack className="w-full items-stretch">
-                        {rules.map((rule) => (
-                            <ClientRuleRow key={rule.id} rule={rule} />
-                        ))}
-                    </Stack>
-                ) : (
-                    <EmptyContent
-                        title="This client cannot reach anything until you add a rule"
-                        icon={<ShieldOff size={16} />}
-                    />
-                )}
-            </Stack>
-        </AdminCard>
-    );
-}
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-rules-tab.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-rules-tab.tsx
new file mode 100644
index 0000000..b03169d
--- /dev/null
+++ b/src/pages/admin/hosts/[host_id]/clients/[client_id]/(sections)/client-rules-tab.tsx
@@ -0,0 +1,34 @@
+import type { BUN_SQLITE_WGUI_CLIENT_RULES } from "@/db/types/db";
+import Panel from "@/src/components/general/panel";
+import ClientRuleModal from "@/src/components/general/client-rules/client-rule-modal";
+import ClientRulesEmpty from "@/src/components/general/client-rules/client-rules-empty";
+import type { ClientRuleDraft } from "@/src/components/general/client-rules/client-rule-draft";
+import type { ClientRuleModalAddResult } from "@/src/components/general/client-rules/client-rule-modal";
+import ClientSavedRuleItem from "../(partials)/client-saved-rule-item";
+
+type Props = {
+    rules?: BUN_SQLITE_WGUI_CLIENT_RULES[];
+    addRules: ({ rules }: { rules: ClientRuleDraft[] }) => Promise<ClientRuleModalAddResult>;
+    removeRule: ({ rule }: { rule: BUN_SQLITE_WGUI_CLIENT_RULES }) => Promise<void>;
+};
+
+export default function ClientRulesTab({ rules, addRules, removeRule }: Props) {
+    const has_all_access = Boolean(rules?.some((rule) => rule.rule_type == "all"));
+
+    return (
+        <Panel
+            flush
+            title="Access rules"
+            description="Zero trust: this client can only reach what's listed here."
+            actions={<ClientRuleModal onAdd={addRules} disabled={has_all_access} />}
+        >
+            {rules?.length ? (
+                rules.map((rule) => (
+                    <ClientSavedRuleItem key={rule.id} rule={rule} onRemove={removeRule} />
+                ))
+            ) : (
+                <ClientRulesEmpty />
+            )}
+        </Panel>
+    );
+}
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/edit/(sections)/edit-client-form-section.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/edit/(sections)/edit-client-form-section.tsx
index 43b7780..378442f 100644
--- a/src/pages/admin/hosts/[host_id]/clients/[client_id]/edit/(sections)/edit-client-form-section.tsx
+++ b/src/pages/admin/hosts/[host_id]/clients/[client_id]/edit/(sections)/edit-client-form-section.tsx
@@ -1,21 +1,19 @@
-import Section from "@/src/components/twui/layout/Section";
-import AddClientForm from "../../../add-client/(partials)/client-form/add-client-form";
 import { useContext } from "react";
+import ClientForm from "@/src/components/general/client-form";
 import { AppContext } from "@/src/pages/__root";
 
 export default function EditClientFormSection() {
-    const { pageProps, query } = useContext(AppContext);
-
-    const host_id = Number(query?.host_id || 0);
+    const { pageProps } = useContext(AppContext);
+    const client = pageProps?.client || undefined;
+    const host_id = Number(client?.host_id || 0);
 
     return (
-        <Section>
-            <AddClientForm
-                existing_client={pageProps?.client || undefined}
-                existing_client_full={pageProps?.client || undefined}
-                existing_client_rules={pageProps?.client_rules || undefined}
-                host_id={host_id}
-            />
-        </Section>
+        <ClientForm
+            hosts={pageProps?.hosts || []}
+            host_id={host_id}
+            existing_client={client}
+            existing_client_rules={pageProps?.client_rules || undefined}
+            cancel_href={`/admin/hosts/${host_id}/clients/${client?.id}`}
+        />
     );
 }
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/edit/index.server.ts b/src/pages/admin/hosts/[host_id]/clients/[client_id]/edit/index.server.ts
index b98637c..4b1ebe6 100644
--- a/src/pages/admin/hosts/[host_id]/clients/[client_id]/edit/index.server.ts
+++ b/src/pages/admin/hosts/[host_id]/clients/[client_id]/edit/index.server.ts
@@ -2,6 +2,9 @@ import grabClients from "@/src/functions/backend/db/clients/grab-clients";
 import grabClientRules from "@/src/functions/backend/db/client-rules/grab-client-rules";
 import type { PagePropsType, PageQueryObject } from "@/src/types";
 import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+import type { TableType } from "@/src/types";
+import BunSQLite from "@moduletrace/bun-sqlite";
 
 type ClientEditPageQuery = PageQueryObject & {
     client_id?: string;
@@ -20,10 +23,15 @@ const server: BunextPageServerFn<PagePropsType> = async ({ query }) => {
         client_id: client?.id,
     });
 
+    const hosts_res = await BunSQLite.select<BUN_SQLITE_WGUI_HOSTS, TableType>({
+        table: "hosts",
+    });
+
     return {
         props: {
             client,
             client_rules,
+            hosts: hosts_res.payload || null,
         },
     };
 };
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/edit/index.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/edit/index.tsx
index 4c31e07..787f489 100644
--- a/src/pages/admin/hosts/[host_id]/clients/[client_id]/edit/index.tsx
+++ b/src/pages/admin/hosts/[host_id]/clients/[client_id]/edit/index.tsx
@@ -1,55 +1,40 @@
-import { ArrowLeft } from "lucide-react";
 import { useContext } from "react";
+import { UserX } from "lucide-react";
 import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
-import AdminHero from "@/src/components/general/admin-hero";
+import PageHeader from "@/src/components/general/page-header";
+import PageBody from "@/src/components/general/page-body";
+import EmptyState from "@/src/components/general/empty-state";
 import { SiteData } from "@/src/data/site-data";
 import { AppContext } from "@/src/pages/__root";
-import Button from "@/src/components/twui/layout/Button";
-import Divider from "@/src/components/twui/layout/Divider";
-import Stack from "@/src/components/twui/layout/Stack";
-import EmptyContent from "@/src/components/twui/elements/EmptyContent";
 import EditClientFormSection from "./(sections)/edit-client-form-section";
 
-export default function AdminEditClientPage() {
-    const { pageProps, query } = useContext(AppContext);
-
-    const host_id = Number(query?.host_id || pageProps?.client?.host_id || 0);
+export default function EditClientPage() {
+    const { pageProps } = useContext(AppContext);
+    const client = pageProps?.client;
+    const host_id = Number(client?.host_id || 0);
 
     return (
         <>
-            <AdminHero
-                title="Edit Client"
-                description={
-                    pageProps?.client?.name
-                        ? `Edit client "${pageProps.client.name}"`
-                        : "Edit client"
-                }
-                buttons={
-                    <Button
-                        title="View client"
-                        variant="outlined"
-                        beforeIcon={<ArrowLeft />}
-                        href={`/admin/hosts/${host_id}/clients/${pageProps?.client?.id}`}
-                    >
-                        View client
-                    </Button>
+            <PageHeader
+                title={client?.name ? `Edit ${client.name}` : "Edit client"}
+                back={
+                    client
+                        ? { href: `/admin/hosts/${host_id}/clients/${client.id}`, title: client.name || "Client" }
+                        : { href: "/admin/clients", title: "Clients" }
                 }
             />
-
-            <Divider className="mb-6" />
-
-            <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
-                {pageProps?.client ? (
+            <PageBody>
+                {client ? (
                     <EditClientFormSection />
                 ) : (
-                    <EmptyContent title="Client not found" />
+                    <EmptyState icon={<UserX size={18} />} title="Client not found" />
                 )}
-            </Stack>
+            </PageBody>
         </>
     );
 }
 
 export const meta: BunextPageModuleMeta = {
-    title: `Edit Client | ${SiteData["SiteName"]}`,
-    description: `WireGuard edit client page`,
-};
\ No newline at end of file
+    title: `Edit client | ${SiteData["SiteName"]}`,
+    description: `Edit a WireGuard client`,
+};
diff --git a/src/pages/admin/hosts/[host_id]/clients/[client_id]/index.tsx b/src/pages/admin/hosts/[host_id]/clients/[client_id]/index.tsx
index c4f7776..2c28840 100644
--- a/src/pages/admin/hosts/[host_id]/clients/[client_id]/index.tsx
+++ b/src/pages/admin/hosts/[host_id]/clients/[client_id]/index.tsx
@@ -1,71 +1,43 @@
-import { ArrowLeft } from "lucide-react";
 import { useContext } from "react";
+import { UserX } from "lucide-react";
 import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
-import AdminHero from "@/src/components/general/admin-hero";
+import PageHeader from "@/src/components/general/page-header";
+import PageBody from "@/src/components/general/page-body";
+import EmptyState from "@/src/components/general/empty-state";
 import { SiteData } from "@/src/data/site-data";
 import { AppContext } from "@/src/pages/__root";
-import Button from "@/src/components/twui/layout/Button";
-import Divider from "@/src/components/twui/layout/Divider";
-import Stack from "@/src/components/twui/layout/Stack";
-import EmptyContent from "@/src/components/twui/elements/EmptyContent";
-import ClientInfoSection from "./(sections)/client-info-section";
-import ClientConfigSection from "./(sections)/client-config-section";
-import ClientQRSection from "./(sections)/client-qr-section";
-import ClientRulesSection from "./(sections)/client-rules-section";
-import ClientDetailActions from "./(partials)/client-detail-actions";
+import useClientHeaderActions from "./(hooks)/use-client-header-actions";
+import ClientHeaderMeta from "./(partials)/client-header-meta";
+import ClientDetailTabs from "./(sections)/client-detail-tabs";
 
-export default function AdminClientDetailPage() {
+export default function ClientDetailPage() {
     const { pageProps } = useContext(AppContext);
-
-    const host_id = Number(
-        pageProps?.host?.id || pageProps?.client?.host_id || 0,
-    );
-
-    const desc =
-        pageProps?.client?.notes ||
-        "Client details and WireGuard configuration";
+    const client = pageProps?.client;
+    const host_id = Number(client?.host_id || pageProps?.host?.id || 0);
+    const { primary_action, actions } = useClientHeaderActions();
 
     return (
         <>
-            <AdminHero
-                title={pageProps?.client?.name || "Client"}
-                description={desc}
-                buttons={
-                    <>
-                        <Button
-                            title="Back to clients"
-                            variant="outlined"
-                            beforeIcon={<ArrowLeft />}
-                            href={`/admin/hosts/${host_id}/clients`}
-                        >
-                            Back to clients
-                        </Button>
-                        {pageProps?.client ? (
-                            <ClientDetailActions client={pageProps.client} />
-                        ) : null}
-                    </>
-                }
+            <PageHeader
+                title={client?.name || "Client"}
+                description={client?.notes || undefined}
+                meta={<ClientHeaderMeta />}
+                back={{ href: `/admin/hosts/${host_id}/clients`, title: "Host clients" }}
+                primary_action={primary_action}
+                actions={actions}
             />
-
-            <Divider className="mb-6" />
-
-            <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
-                {pageProps?.client ? (
-                    <>
-                        <ClientInfoSection />
-                        <ClientRulesSection />
-                        <ClientQRSection />
-                        <ClientConfigSection />
-                    </>
+            <PageBody>
+                {client ? (
+                    <ClientDetailTabs />
                 ) : (
-                    <EmptyContent title="Client not found" />
+                    <EmptyState icon={<UserX size={18} />} title="Client not found" />
                 )}
-            </Stack>
+            </PageBody>
         </>
     );
 }
 
 export const meta: BunextPageModuleMeta = {
     title: `Client | ${SiteData["SiteName"]}`,
-    description: `WireGuard client details page`,
+    description: `WireGuard client details`,
 };
diff --git a/src/pages/admin/hosts/[host_id]/clients/add-client/(functions)/submit-add-client-form.ts b/src/pages/admin/hosts/[host_id]/clients/add-client/(functions)/submit-add-client-form.ts
deleted file mode 100644
index e689485..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/add-client/(functions)/submit-add-client-form.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import type {
-    BUN_SQLITE_WGUI_CLIENT_RULES,
-    BUN_SQLITE_WGUI_CLIENTS,
-} from "@/db/types/db";
-import adminCrudHandler from "@/src/functions/frontend/admin-crud-handler";
-import type useFormInit from "@/src/hooks/use-form-init";
-import _ from "lodash";
-import {
-    clientRuleDraftToRecord,
-    type ClientRuleDraft,
-} from "../../(partials)/client-rules/client-rule-draft";
-import fetchApi from "@/src/components/twui/utils/fetch/fetchApi";
-import type { ApiReqParams } from "@/src/types";
-
-type Params = {
-    host_id?: string | number;
-    rules?: ClientRuleDraft[];
-};
-
-export default async function submitAddClientForm(
-    {
-        setLoading,
-        setStatus,
-        form,
-        existing_full,
-        app_context,
-        clearLocalForm,
-    }: ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_CLIENTS>>,
-    { host_id, rules }: Params,
-) {
-    try {
-        const confirm_msg = existing_full?.id
-            ? `Update this Client?`
-            : `Create new client?`;
-
-        if (!window.confirm(confirm_msg)) {
-            return;
-        }
-
-        const final_host_id = Number(app_context.query?.host_id || 0);
-
-        const new_client_data: BUN_SQLITE_WGUI_CLIENTS =
-            _.omitBy<BUN_SQLITE_WGUI_CLIENTS>(
-                {
-                    name: form.name || "",
-                    wg_ip_address: form.wg_ip_address || "",
-                    allowed_ips: form.allowed_ips || "",
-                    notes: form.notes || "",
-                    host_id: final_host_id,
-                    user_id: app_context?.user?.id,
-                    allow_all_ips: form.allow_all_ips,
-                },
-                (value) => value === undefined,
-            );
-
-        setLoading(true);
-
-        const client_rules = (rules || []).map((draft) =>
-            clientRuleDraftToRecord({ draft }),
-        );
-
-        const res = existing_full?.id
-            ? await adminCrudHandler({
-                  action: "update",
-                  table: "clients",
-                  update_data: new_client_data,
-                  id: existing_full.id,
-              })
-            : await adminCrudHandler({
-                  action: "insert",
-                  table: "clients",
-                  insert_data: [new_client_data],
-              });
-
-        const client_id = existing_full?.id || res.postInsertReturn?.insertId;
-
-        const delete_client_rules =
-            await adminCrudHandler<BUN_SQLITE_WGUI_CLIENT_RULES>({
-                action: "delete",
-                table: "client_rules",
-                sql_query: {
-                    query: {
-                        client_id: {
-                            value: String(client_id),
-                        },
-                        host_id: {
-                            value: String(host_id),
-                        },
-                    },
-                },
-            });
-
-        if (client_rules?.[0] && client_id) {
-            const insert_client_rules =
-                await adminCrudHandler<BUN_SQLITE_WGUI_CLIENT_RULES>({
-                    action: "insert",
-                    table: "client_rules",
-                    insert_data: client_rules.map((cr) => ({
-                        ...cr,
-                        host_id: Number(host_id),
-                        client_id: Number(client_id),
-                        user_id: app_context.user?.id,
-                    })),
-                });
-        }
-
-        if (client_id) {
-            await fetchApi<ApiReqParams>(`/api/admin/run-client-setup`, {
-                method: "POST",
-                body: {
-                    client_id,
-                },
-            });
-        }
-
-        if (res.success) {
-            clearLocalForm();
-
-            if (existing_full?.id) {
-                window.location.pathname = `/admin/hosts/${final_host_id}/clients/${existing_full.id}`;
-            } else {
-                window.location.pathname = `/admin/hosts/${final_host_id}/clients`;
-            }
-        } else {
-            throw new Error(res.msg || "Client Creation Failed");
-        }
-    } catch (error: any) {
-        setStatus({
-            error: true,
-            msg: error.message || "Add Client Form Error",
-        });
-
-        setLoading(false);
-    }
-}
diff --git a/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-action.tsx b/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-action.tsx
deleted file mode 100644
index c529b78..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-action.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
-import Button from "@/src/components/twui/layout/Button";
-import useFormInit from "@/src/hooks/use-form-init";
-
-export default function AddClientFormAction({
-    status,
-    existing_full,
-}: ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_CLIENTS>>) {
-    const title = existing_full?.id ? "Update Client" : "Create New Client";
-
-    if (status?.error) {
-        return null;
-    }
-
-    return (
-        <Button title={title} type="submit">
-            {title}
-        </Button>
-    );
-}
\ No newline at end of file
diff --git a/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-allowed-ips.tsx b/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-allowed-ips.tsx
deleted file mode 100644
index addd45c..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-allowed-ips.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
-import Checkbox from "@/src/components/twui/form/Checkbox";
-import Input from "@/src/components/twui/form/Input";
-import Stack from "@/src/components/twui/layout/Stack";
-import useFormInit from "@/src/hooks/use-form-init";
-
-export default function AddClientFormAllowedIps({
-    form,
-    setForm,
-}: ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_CLIENTS>>) {
-    return (
-        <Stack className="gap-2 my-4 w-full">
-            {form.allow_all_ips == 1 ? null : (
-                <Input
-                    title="Allowed IPs"
-                    placeholder="Eg. 10.0.0.2/24"
-                    onChange={(e) => {
-                        setForm((prev) => ({
-                            ...prev,
-                            allowed_ips: e.target.value,
-                        }));
-                    }}
-                    defaultValue={form.allowed_ips}
-                    showLabel
-                />
-            )}
-
-            <Checkbox
-                label={`Allow all IPs?`}
-                defaultChecked={form.allow_all_ips == 1}
-                changeHandler={(value) => {
-                    setForm((prev) => ({
-                        ...prev,
-                        allow_all_ips: value ? 1 : 0,
-                    }));
-                }}
-                info={
-                    <span>
-                        Sets the wireguard <code>AllowedIPs</code> parameter to{" "}
-                        <code>0.0.0.0/0, ::/0</code>
-                    </span>
-                }
-            />
-        </Stack>
-    );
-}
diff --git a/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-notes.tsx b/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-notes.tsx
deleted file mode 100644
index ca61a91..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-notes.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
-import Input from "@/src/components/twui/form/Input";
-import useFormInit from "@/src/hooks/use-form-init";
-
-export default function AddClientFormNotes({
-    form,
-    setForm,
-}: ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_CLIENTS>>) {
-    return (
-        <Input
-            title="Notes"
-            placeholder="Eg. Personal phone of John Doe"
-            istextarea
-            onChange={(e) => {
-                setForm((prev) => ({
-                    ...prev,
-                    notes: e.target.value,
-                }));
-            }}
-            defaultValue={form.notes}
-            showLabel
-        />
-    );
-}
\ No newline at end of file
diff --git a/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-title.tsx b/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-title.tsx
deleted file mode 100644
index 110b41d..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-title.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
-import Input from "@/src/components/twui/form/Input";
-import useFormInit from "@/src/hooks/use-form-init";
-
-export default function AddClientFormTitle({
-    form,
-    setForm,
-}: ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_CLIENTS>>) {
-    return (
-        <Input
-            title="Client Display Name"
-            placeholder="Eg. Pixel 2XL Phone"
-            onChange={(e) => {
-                setForm((prev) => ({
-                    ...prev,
-                    name: e.target.value,
-                }));
-            }}
-            defaultValue={form.name}
-            showLabel
-            required
-        />
-    );
-}
\ No newline at end of file
diff --git a/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-wg-ip-address.tsx b/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-wg-ip-address.tsx
deleted file mode 100644
index 4221c52..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-wg-ip-address.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
-import Button from "@/src/components/twui/layout/Button";
-import Input from "@/src/components/twui/form/Input";
-import Span from "@/src/components/twui/layout/Span";
-import Stack from "@/src/components/twui/layout/Stack";
-import useFormInit from "@/src/hooks/use-form-init";
-import { Wand2 } from "lucide-react";
-import { useState } from "react";
-import grabNextAvailableClientIp from "../../(functions)/grab-next-available-client-ip";
-import Row from "@/src/components/twui/layout/Row";
-
-type Props = ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_CLIENTS>> & {
-    host_id?: string | number;
-};
-
-export default function AddClientFormWgIpAddress({
-    form,
-    setForm,
-    host_id,
-    existing_full,
-}: Props) {
-    const [grabbing, setGrabbing] = useState(false);
-    const [grab_error, setGrabError] = useState<string>();
-
-    function handleGrabNextIp() {
-        setGrabbing(true);
-        setGrabError(undefined);
-
-        grabNextAvailableClientIp({ host_id, setForm })
-            .then((res) => {
-                if (!res.success) {
-                    setGrabError(res.msg);
-                }
-            })
-            .finally(() => {
-                setGrabbing(false);
-            });
-    }
-
-    return (
-        <Stack className="w-full items-stretch gap-2">
-            <Row className="flex-nowrap items-stretch">
-                <Input
-                    name="wg_ip_address"
-                    id="add_client_wg_ip_address"
-                    title="WireGuard IP Address"
-                    placeholder="Eg. 10.0.0.2"
-                    changeHandler={(v) => {
-                        setForm((prev) => ({
-                            ...prev,
-                            wg_ip_address: v,
-                            allowed_ips: `${v.replace(/\.\d+$/, "")}.0/24`,
-                        }));
-                    }}
-                    defaultValue={form.wg_ip_address}
-                    readOnly={Boolean(existing_full?.id)}
-                    showLabel
-                />
-
-                {existing_full?.id ? null : (
-                    <Button
-                        title="Grab the next available client IP from the host's WireGuard subnet"
-                        variant="outlined"
-                        color="primary"
-                        size="small"
-                        beforeIcon={<Wand2 size={16} />}
-                        loading={grabbing}
-                        onClick={(e) => {
-                            e.preventDefault();
-                            handleGrabNextIp();
-                        }}
-                    >
-                        Grab Next Available IP
-                    </Button>
-                )}
-            </Row>
-
-            {grab_error ? (
-                <Span className="text-[12.5px] text-error dark:text-error">
-                    {grab_error}
-                </Span>
-            ) : null}
-        </Stack>
-    );
-}
diff --git a/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form.tsx b/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form.tsx
deleted file mode 100644
index 0f915ae..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useState } from "react";
-import type {
-    BUN_SQLITE_WGUI_CLIENTS,
-    BUN_SQLITE_WGUI_CLIENT_RULES,
-} from "@/db/types/db";
-import Form from "@/src/components/twui/form/Form";
-import LoadingOverlay from "@/src/components/twui/elements/LoadingOverlay";
-import Stack from "@/src/components/twui/layout/Stack";
-import Tag from "@/src/components/twui/elements/Tag";
-import useFormInit from "@/src/hooks/use-form-init";
-import submitAddClientForm from "../../(functions)/submit-add-client-form";
-import ClientRulesEditor from "../../../(partials)/client-rules/client-rules-editor";
-import {
-    clientRuleToDraft,
-    type ClientRuleDraft,
-} from "../../../(partials)/client-rules/client-rule-draft";
-import AddClientFormAction from "./add-client-form-action";
-import AddClientFormAllowedIps from "./add-client-form-allowed-ips";
-import AddClientFormNotes from "./add-client-form-notes";
-import AddClientFormTitle from "./add-client-form-title";
-import AddClientFormWgIpAddress from "./add-client-form-wg-ip-address";
-import LoadingRectangleBlock from "@/src/components/twui/layout/LoadingRectangleBlock";
-
-type Props = {
-    existing_client?: BUN_SQLITE_WGUI_CLIENTS;
-    existing_client_full?: BUN_SQLITE_WGUI_CLIENTS;
-    existing_client_rules?: BUN_SQLITE_WGUI_CLIENT_RULES[];
-    host_id?: string | number;
-};
-
-export default function AddClientForm({
-    existing_client,
-    existing_client_full,
-    existing_client_rules,
-    host_id,
-}: Props) {
-    const init = useFormInit<BUN_SQLITE_WGUI_CLIENTS>({
-        existing: existing_client,
-        existing_full: existing_client_full,
-        title: "Add Client",
-        async before_ready_function(params) {
-            params.setForm((prev) => ({
-                ...prev,
-                wg_ip_address:
-                    existing_client_full?.wg_ip_address ||
-                    params.app_context.pageProps?.next_available_client_ip ||
-                    "",
-            }));
-        },
-    });
-
-    const [rules, setRules] = useState<ClientRuleDraft[]>(
-        (existing_client_rules || []).map((rule) =>
-            clientRuleToDraft({ rule }),
-        ),
-    );
-
-    const { loading, status } = init;
-
-    return (
-        <Form
-            className="w-full gap-6"
-            onSubmit={() => {
-                submitAddClientForm(init, { host_id, rules });
-            }}
-        >
-            {status?.error && <Tag color="error">{status.msg}</Tag>}
-            {loading && <LoadingOverlay />}
-            {init.ready ? (
-                <Stack>
-                    <AddClientFormTitle {...init} />
-                    <AddClientFormWgIpAddress {...init} host_id={host_id} />
-                    <AddClientFormAllowedIps {...init} />
-                    <AddClientFormNotes {...init} />
-                    <ClientRulesEditor rules={rules} setRules={setRules} />
-                    <AddClientFormAction {...init} />
-                </Stack>
-            ) : (
-                <LoadingRectangleBlock className="h-[400px]" />
-            )}
-        </Form>
-    );
-}
diff --git a/src/pages/admin/hosts/[host_id]/clients/add-client/(sections)/add-client-form-section.tsx b/src/pages/admin/hosts/[host_id]/clients/add-client/(sections)/add-client-form-section.tsx
deleted file mode 100644
index 3cbc9ab..0000000
--- a/src/pages/admin/hosts/[host_id]/clients/add-client/(sections)/add-client-form-section.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Section from "@/src/components/twui/layout/Section";
-import AddClientForm from "../(partials)/client-form/add-client-form";
-import { useContext } from "react";
-import { AppContext } from "@/src/pages/__root";
-
-export default function AddClientFormSection() {
-    const { pageProps, query } = useContext(AppContext);
-
-    const host_id = query?.host_id || 0;
-
-    return (
-        <Section>
-            <AddClientForm host_id={host_id} />
-        </Section>
-    );
-}
diff --git a/src/pages/admin/hosts/[host_id]/clients/add-client/index.server.ts b/src/pages/admin/hosts/[host_id]/clients/add-client/index.server.ts
index 887b4a6..65f8916 100644
--- a/src/pages/admin/hosts/[host_id]/clients/add-client/index.server.ts
+++ b/src/pages/admin/hosts/[host_id]/clients/add-client/index.server.ts
@@ -1,38 +1,14 @@
-import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
-import grabNextAvailableClientIPAddress from "@/src/functions/backend/setup/grab-next-available-client-ip";
-import type { PagePropsType, PageQueryObject, TableType } from "@/src/types";
-import BunSQLite from "@moduletrace/bun-sqlite";
+import type { PageQueryObject } from "@/src/types";
 import type { BunextPageServerFn } from "@moduletrace/bunext/types";
 
-const server: BunextPageServerFn<PagePropsType> = async ({ query }) => {
-    const page_query = query as PageQueryObject;
-
-    const host_record_res = await BunSQLite.select<
-        BUN_SQLITE_WGUI_HOSTS,
-        TableType
-    >({ table: "hosts", targetId: page_query.host_id });
-
-    const host_record = host_record_res.singleRes || null;
-
-    if (!host_record) {
-        return {
-            redirect: {
-                destination: `/admin/hosts`,
-            },
-        };
-    }
-
-    const next_available_client_ip_res = await grabNextAvailableClientIPAddress(
-        {
-            host: host_record,
-        },
-    );
+/** Legacy route — adding clients lives at `/admin/clients/add`. */
+const server: BunextPageServerFn = async ({ query }) => {
+    const host_id = Number((query as PageQueryObject)?.host_id || 0);
 
     return {
-        props: {
-            host: host_record,
-            next_available_client_ip:
-                next_available_client_ip_res.stringRes || null,
+        redirect: {
+            destination: `/admin/clients/add?host_id=${host_id}`,
+            permanent: false,
         },
     };
 };
diff --git a/src/pages/admin/hosts/[host_id]/clients/add-client/index.tsx b/src/pages/admin/hosts/[host_id]/clients/add-client/index.tsx
index 3f941b4..f2d5177 100644
--- a/src/pages/admin/hosts/[host_id]/clients/add-client/index.tsx
+++ b/src/pages/admin/hosts/[host_id]/clients/add-client/index.tsx
@@ -1,29 +1,4 @@
-import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
-import AdminHero from "@/src/components/general/admin-hero";
-import { SiteData } from "@/src/data/site-data";
-import Divider from "@/src/components/twui/layout/Divider";
-import { useContext } from "react";
-import { AppContext } from "@/src/pages/__root";
-import AddClientFormSection from "./(sections)/add-client-form-section";
-
-export default function AdminSingleHostPage() {
-    const { pageProps } = useContext(AppContext);
-
-    return (
-        <>
-            <AdminHero
-                title="Add New Client"
-                description={`Add a new Client to host ${pageProps?.host?.id || 0}`}
-            />
-
-            <Divider className="mb-6" />
-
-            <AddClientFormSection />
-        </>
-    );
+/** Always redirected by `index.server.ts`. */
+export default function LegacyAddClientPage() {
+    return null;
 }
-
-export const meta: BunextPageModuleMeta = {
-    title: `Add new Client | ${SiteData["SiteName"]}`,
-    description: `WireGuard add new host client page`,
-};
diff --git a/src/pages/admin/hosts/[host_id]/clients/index.tsx b/src/pages/admin/hosts/[host_id]/clients/index.tsx
index 45c3cfd..67bb1bc 100644
--- a/src/pages/admin/hosts/[host_id]/clients/index.tsx
+++ b/src/pages/admin/hosts/[host_id]/clients/index.tsx
@@ -1,43 +1,40 @@
 import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
-import AdminHero from "@/src/components/general/admin-hero";
-import { SiteData } from "@/src/data/site-data";
-import Button from "@/src/components/twui/layout/Button";
-import Divider from "@/src/components/twui/layout/Divider";
 import { useContext } from "react";
+import { Plus } from "lucide-react";
+import PageHeader from "@/src/components/general/page-header";
+import PageBody from "@/src/components/general/page-body";
+import HostClientsPanel from "@/src/components/general/host-clients-panel";
+import { SiteData } from "@/src/data/site-data";
 import { AppContext } from "@/src/pages/__root";
-import ClientsListSection from "./(sections)/clients-list-section";
+import deriveHostDisplayName from "@/src/utils/derive-host-display-name";
 
-export default function AdminSingleHostPage() {
+export default function HostClientsPage() {
     const { pageProps } = useContext(AppContext);
 
-    const host_id = pageProps?.host?.id || 0;
+    const host = pageProps?.host;
+    const host_id = Number(host?.id || 0);
+    const host_name = deriveHostDisplayName({ host });
 
     return (
         <>
-            <AdminHero
-                title="Clients"
-                description={`Clients for host ${pageProps?.host?.id || 0}`}
-                buttons={
-                    <>
-                        <Button
-                            title="Add New Client"
-                            variant="outlined"
-                            href={`/admin/hosts/${host_id}/clients/add-client`}
-                        >
-                            Add New Client
-                        </Button>
-                    </>
-                }
+            <PageHeader
+                title={`${host_name} clients`}
+                back={{ href: `/admin/hosts/${host_id}`, title: host_name }}
+                primary_action={{
+                    key: "add-client",
+                    title: "Add client",
+                    href: `/admin/clients/add?host_id=${host_id}`,
+                    icon: <Plus size={14} />,
+                }}
             />
-
-            <Divider className="mb-6" />
-
-            <ClientsListSection />
+            <PageBody>
+                <HostClientsPanel host_id={host_id} />
+            </PageBody>
         </>
     );
 }
 
 export const meta: BunextPageModuleMeta = {
-    title: `Host Clients | ${SiteData["SiteName"]}`,
-    description: `WireGuard host clients page`,
+    title: `Host clients | ${SiteData["SiteName"]}`,
+    description: `WireGuard host clients`,
 };
diff --git a/src/pages/admin/hosts/[host_id]/edit/index.tsx b/src/pages/admin/hosts/[host_id]/edit/index.tsx
index feeef8f..bef8839 100644
--- a/src/pages/admin/hosts/[host_id]/edit/index.tsx
+++ b/src/pages/admin/hosts/[host_id]/edit/index.tsx
@@ -1,63 +1,47 @@
 import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
-import AdminHero from "@/src/components/general/admin-hero";
-import { SiteData } from "@/src/data/site-data";
-import Button from "@/src/components/twui/layout/Button";
-import Divider from "@/src/components/twui/layout/Divider";
-import Stack from "@/src/components/twui/layout/Stack";
-import EmptyContent from "@/src/components/twui/elements/EmptyContent";
-import { ArrowLeft } from "lucide-react";
 import { useContext } from "react";
-import { AppContext } from "@/src/pages/__root";
-import AddHostForm from "../../add/(partials)/add-host-form/add-host-form";
+import { ServerOff } from "lucide-react";
 import _ from "lodash";
+import PageHeader from "@/src/components/general/page-header";
+import PageBody from "@/src/components/general/page-body";
+import EmptyState from "@/src/components/general/empty-state";
+import { SiteData } from "@/src/data/site-data";
+import { AppContext } from "@/src/pages/__root";
+import deriveHostDisplayName from "@/src/utils/derive-host-display-name";
 import type { BUN_SQLITE_WGUI_HOSTS_JOIN } from "@/src/types/sql-joins";
+import AddHostForm from "../../add/(partials)/add-host-form/add-host-form";
 
-export default function AdminEditHostPage() {
+export default function EditHostPage() {
     const { pageProps, query } = useContext(AppContext);
 
-    const host_id = Number(query?.host_id || pageProps?.host?.id || 0);
+    const host = pageProps?.host;
+    const host_id = Number(query?.host_id || host?.id || 0);
+    const name = deriveHostDisplayName({ host: host || { id: host_id } });
 
     return (
         <>
-            <AdminHero
-                title="Edit Host"
-                description={
-                    pageProps?.host?.wg_ip_address
-                        ? `Edit host ${host_id} configuration`
-                        : "Edit host configuration"
-                }
-                buttons={
-                    <Button
-                        title="View host"
-                        variant="outlined"
-                        beforeIcon={<ArrowLeft />}
-                        href={`/admin/hosts/${host_id}`}
-                    >
-                        View host
-                    </Button>
-                }
+            <PageHeader
+                title={`Edit ${name}`}
+                back={{ href: `/admin/hosts/${host_id}`, title: name }}
             />
-
-            <Divider className="mb-6" />
-
-            <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
-                {pageProps?.host ? (
+            <PageBody>
+                {host ? (
                     <AddHostForm
-                        existing_host={_.pick<
-                            BUN_SQLITE_WGUI_HOSTS_JOIN,
-                            keyof BUN_SQLITE_WGUI_HOSTS_JOIN
-                        >(pageProps.host, ["name", "short_description"])}
-                        existing_host_full={pageProps.host}
+                        existing_host={_.pick<BUN_SQLITE_WGUI_HOSTS_JOIN, keyof BUN_SQLITE_WGUI_HOSTS_JOIN>(
+                            host,
+                            ["name", "short_description"],
+                        )}
+                        existing_host_full={host}
                     />
                 ) : (
-                    <EmptyContent title="Host not found" />
+                    <EmptyState icon={<ServerOff size={18} />} title="Host not found" />
                 )}
-            </Stack>
+            </PageBody>
         </>
     );
 }
 
 export const meta: BunextPageModuleMeta = {
-    title: `Edit Host | ${SiteData["SiteName"]}`,
-    description: `WireGuard edit host page`,
+    title: `Edit host | ${SiteData["SiteName"]}`,
+    description: `Edit a WireGuard host`,
 };
diff --git a/src/pages/admin/hosts/[host_id]/index.server.ts b/src/pages/admin/hosts/[host_id]/index.server.ts
index b58811b..ae22ca1 100644
--- a/src/pages/admin/hosts/[host_id]/index.server.ts
+++ b/src/pages/admin/hosts/[host_id]/index.server.ts
@@ -1,5 +1,6 @@
 import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
 import grabClients from "@/src/functions/backend/db/clients/grab-clients";
+import grabClientRules from "@/src/functions/backend/db/client-rules/grab-client-rules";
 import grabHostDirnames from "@/src/functions/backend/setup/grab-host-dir-names";
 import type { PagePropsType, PageQueryObject, TableType } from "@/src/types";
 import BunSQLite from "@moduletrace/bun-sqlite";
@@ -26,10 +27,19 @@ const server: BunextPageServerFn<PagePropsType> = async ({ query }) => {
         host_id: page_query.host_id,
     });
 
+    const clients = host_clients.payload || null;
+
+    const client_rules = await grabClientRules({
+        client_ids: (clients || [])
+            .map((client) => client.id)
+            .filter((id): id is number => Boolean(id)),
+    });
+
     return {
         props: {
             host,
-            clients: host_clients.payload || null,
+            clients,
+            client_rules,
         },
     };
 };
diff --git a/src/pages/admin/hosts/[host_id]/index.tsx b/src/pages/admin/hosts/[host_id]/index.tsx
index 132434a..f1a8b7c 100644
--- a/src/pages/admin/hosts/[host_id]/index.tsx
+++ b/src/pages/admin/hosts/[host_id]/index.tsx
@@ -1,96 +1,57 @@
 import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
 import { useContext } from "react";
-import AdminHero from "@/src/components/general/admin-hero";
-import DeleteHostButton from "@/src/components/general/delete-host-button";
+import { ServerOff } from "lucide-react";
+import PageHeader from "@/src/components/general/page-header";
+import PageBody from "@/src/components/general/page-body";
+import EmptyState from "@/src/components/general/empty-state";
+import HostClientsPanel from "@/src/components/general/host-clients-panel";
 import { SiteData } from "@/src/data/site-data";
-import Button from "@/src/components/twui/layout/Button";
-import Divider from "@/src/components/twui/layout/Divider";
-import EmptyContent from "@/src/components/twui/elements/EmptyContent";
-import Stack from "@/src/components/twui/layout/Stack";
 import { AppContext } from "@/src/pages/__root";
-import MainHostStatusSection from "../(sections)/main-host-status-section";
-import HostPublicIpSection from "../(sections)/host-public-ip-section";
-import InterfaceConfigSection from "../(sections)/interface-config-section";
+import deriveHostDisplayName from "@/src/utils/derive-host-display-name";
+import HostStatsSection from "./(sections)/host-stats-section";
+import HostInterfaceSection from "./(sections)/host-interface-section";
+import HostHeaderMeta from "./(partials)/host-header-meta";
+import useHostHeaderActions from "./(hooks)/use-host-header-actions";
 
-export default function AdminSingleHostPage() {
+export default function HostDetailPage() {
     const { pageProps, query } = useContext(AppContext);
 
     const host_id = Number(query?.host_id || pageProps?.host?.id || 0);
-
     const host = pageProps?.host || undefined;
     const clients = pageProps?.clients || [];
+    const { primary_action, actions } = useHostHeaderActions({ host, host_id });
 
-    if (!pageProps?.host && host_id != 0) {
+    if (!host && host_id != 0) {
         return (
             <>
-                <AdminHero
-                    title="Host"
-                    description="WireGuard server configuration and interface details"
-                />
-                <Divider className="mb-6" />
-                <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
-                    <EmptyContent title="Host not found" />
-                </Stack>
+                <PageHeader title="Host" back={{ href: "/admin/hosts", title: "Hosts" }} />
+                <PageBody>
+                    <EmptyState icon={<ServerOff size={18} />} title="Host not found" />
+                </PageBody>
             </>
         );
     }
 
-    const title = host_id == 0 ? "Main Host" : host?.name || `Host #${host_id}`;
-
     return (
         <>
-            <AdminHero
-                title={host ? title : "Host"}
-                description={
-                    host?.short_description ||
-                    "WireGuard server configuration and interface details"
-                }
-                buttons={
-                    <>
-                        <Button
-                            title="Edit Host"
-                            size="small"
-                            variant="outlined"
-                            href={`/admin/hosts/${host_id}/edit`}
-                        >
-                            Edit
-                        </Button>
-                        <Button
-                            title="View Clients"
-                            size="small"
-                            variant="outlined"
-                            color="primary"
-                            href={`/admin/hosts/${host_id}/clients`}
-                        >
-                            Clients
-                        </Button>
-                        <Button
-                            title="Add Client"
-                            size="small"
-                            href={`/admin/hosts/${host_id}/clients/add-client`}
-                        >
-                            Add Client
-                        </Button>
-                        <DeleteHostButton host_id={host_id} />
-                    </>
-                }
+            <PageHeader
+                title={deriveHostDisplayName({ host: host || { id: host_id } })}
+                description={host?.short_description || undefined}
+                meta={<HostHeaderMeta host={host} host_id={host_id} />}
+                back={{ href: "/admin/hosts", title: "Hosts" }}
+                primary_action={primary_action}
+                actions={actions}
             />
-
-            <Divider className="mb-6" />
-
-            <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
-                <MainHostStatusSection host={host} clients={clients} />
-                {/* <HostPublicIpSection
-                    host_id={host_id}
-                    current_ip={host?.public_ip_address || ""}
-                /> */}
-                <InterfaceConfigSection host={host} clients={clients} />
-            </Stack>
+            <PageBody>
+                <HostStatsSection host={host} clients={clients} />
+                <HostClientsPanel host_id={host_id} />
+                <HostInterfaceSection host={host} clients={clients} />
+            </PageBody>
         </>
     );
 }
 
 export const meta: BunextPageModuleMeta = {
     title: `Host | ${SiteData["SiteName"]}`,
-    description: `WireGuard host page`,
+    description: `WireGuard host`,
 };
diff --git a/src/pages/admin/hosts/add/(functions)/submit-add-host-form.ts b/src/pages/admin/hosts/add/(functions)/submit-add-host-form.ts
index 220dcc5..13f7d81 100644
--- a/src/pages/admin/hosts/add/(functions)/submit-add-host-form.ts
+++ b/src/pages/admin/hosts/add/(functions)/submit-add-host-form.ts
@@ -3,23 +3,31 @@ import fetchApi from "@/src/components/twui/utils/fetch/fetchApi";
 import type useFormInit from "@/src/hooks/use-form-init";
 import type { ApiReqParams } from "@/src/types";
 import type { APIResponseObject } from "@moduletrace/bunext/types";
+import type { ConfirmContextValue } from "@/src/components/general/confirm/confirm-context";
+
+type Params = {
+    init: ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_HOSTS>>;
+    confirm: ConfirmContextValue["confirm"];
+};
+
+export default async function submitAddHostForm({ init, confirm }: Params) {
+    const { setLoading, setStatus, form, app_context, clearLocalForm, existing_full } = init;
 
-export default async function submitAddHostForm({
-    setLoading,
-    setStatus,
-    form,
-    app_context,
-    clearLocalForm,
-    existing_full,
-}: ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_HOSTS>>) {
     try {
         const is_updating_host = typeof existing_full?.id == "number";
 
-        const confirm_msg = is_updating_host
-            ? `Update this host?`
-            : `Create this new host?`;
+        const confirmed = await confirm(
+            is_updating_host
+                ? { title: "Save host changes?", confirm_label: "Save changes" }
+                : {
+                      title: "Create this host?",
+                      message:
+                          "The WireGuard interface is created and brought up on this server right away.",
+                      confirm_label: "Create host",
+                  },
+        );
 
-        if (!window.confirm(confirm_msg)) {
+        if (!confirmed) {
             return;
         }
 
@@ -53,7 +61,7 @@ export default async function submitAddHostForm({
 
         if (res.success) {
             clearLocalForm();
-            window.location.pathname = `/admin/hosts/${host_id}`;
+            window.location.href = `/admin/hosts/${host_id}`;
             return;
         }
 
diff --git a/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-action.tsx b/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-action.tsx
index f428241..08a0b83 100644
--- a/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-action.tsx
+++ b/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-action.tsx
@@ -1,5 +1,5 @@
 import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
-import Button from "@/src/components/twui/layout/Button";
+import FormActions from "@/src/components/general/form-actions";
 import type { HostWgIpFieldStatus } from "@/src/components/general/host-wg-ip-field";
 import useFormInit from "@/src/hooks/use-form-init";
 
@@ -7,24 +7,15 @@ type Props = ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_HOSTS>> & {
     ipStatus: HostWgIpFieldStatus;
 };
 
-export default function AddHostFormAction({
-    status,
-    ipStatus,
-    existing_full,
-}: Props) {
-    if (status?.error) {
-        return null;
-    }
-
+export default function AddHostFormAction({ loading, ipStatus, existing_full }: Props) {
     const is_updating_host = typeof existing_full?.id == "number";
 
     return (
-        <Button
-            title="Create Host"
-            type="submit"
+        <FormActions
+            submit_title={is_updating_host ? "Save changes" : "Create host"}
+            loading={loading}
             disabled={is_updating_host ? false : ipStatus !== "available"}
-        >
-            {is_updating_host ? "Update Host" : "Create Host"}
-        </Button>
+            cancel_href={is_updating_host ? `/admin/hosts/${existing_full?.id}` : "/admin/hosts"}
+        />
     );
 }
diff --git a/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-description.tsx b/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-description.tsx
index 821469f..da2daa1 100644
--- a/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-description.tsx
+++ b/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-description.tsx
@@ -1,4 +1,3 @@
-import Stack from "@/src/components/twui/layout/Stack";
 import useFormInit from "@/src/hooks/use-form-init";
 import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
 import Textarea from "@/src/components/twui/form/Textarea";
@@ -7,20 +6,16 @@ type Props = ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_HOSTS>>;
 
 export default function AddHostFormDescription({ form, setForm }: Props) {
     return (
-        <Stack className="w-full gap-2">
-            <Textarea
-                name="short_description"
-                label="Short Description"
-                showLabel
-                placeholder="e.g. Main server at home"
-                defaultValue={form.short_description || ""}
-                changeHandler={(v) => {
-                    setForm((prev) => ({
-                        ...prev,
-                        short_description: v,
-                    }));
-                }}
-            />
-        </Stack>
+        <Textarea
+            name="short_description"
+            title="Description"
+            showLabel
+            rows={2}
+            placeholder="e.g. Home server in the closet"
+            defaultValue={form.short_description || ""}
+            changeHandler={(v) => {
+                setForm((prev) => ({ ...prev, short_description: v }));
+            }}
+        />
     );
 }
diff --git a/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-interface.tsx b/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-interface.tsx
index 76b5543..f04e8bb 100644
--- a/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-interface.tsx
+++ b/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-interface.tsx
@@ -1,24 +1,18 @@
 import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
 import Input from "@/src/components/twui/form/Input";
 import Select from "@/src/components/twui/form/Select";
-import Stack from "@/src/components/twui/layout/Stack";
 import useFormInit from "@/src/hooks/use-form-init";
 
 type Props = ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_HOSTS>>;
 
-export default function AddHostFormInterface({
-    form,
-    setForm,
-    app_context,
-    existing_full,
-}: Props) {
+export default function AddHostFormInterface({ form, setForm, app_context, existing_full }: Props) {
     const interfaces = app_context.pageProps?.network_interfaces || [];
 
     if (existing_full?.interface) {
         return (
             <Input
-                defaultValue={existing_full.interface || "N/A"}
-                title="Network Interface"
+                defaultValue={existing_full.interface}
+                title="Network interface"
                 readOnly
                 showLabel
             />
@@ -26,23 +20,18 @@ export default function AddHostFormInterface({
     }
 
     return (
-        <Stack className="w-full gap-2 items-stretch">
-            <Select
-                name="interface"
-                label="Network Interface"
-                showLabel
-                options={interfaces.map((iface) => ({
-                    value: iface,
-                    title: iface,
-                    default: iface === form.interface,
-                }))}
-                changeHandler={(v) => {
-                    setForm((prev) => ({
-                        ...prev,
-                        interface: v,
-                    }));
-                }}
-            />
-        </Stack>
+        <Select
+            name="interface"
+            title="Network interface"
+            showLabel
+            options={interfaces.map((iface) => ({
+                value: iface,
+                title: iface,
+                default: iface === form.interface,
+            }))}
+            changeHandler={(v) => {
+                setForm((prev) => ({ ...prev, interface: v }));
+            }}
+        />
     );
 }
diff --git a/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-listen-port.tsx b/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-listen-port.tsx
index 1d1cdbe..7aff58e 100644
--- a/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-listen-port.tsx
+++ b/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-listen-port.tsx
@@ -1,7 +1,6 @@
 import { useState } from "react";
 import Input from "@/src/components/twui/form/Input";
 import Button from "@/src/components/twui/layout/Button";
-import Stack from "@/src/components/twui/layout/Stack";
 import Row from "@/src/components/twui/layout/Row";
 import useFormInit from "@/src/hooks/use-form-init";
 import { AppData } from "@/src/data/app-data";
@@ -12,18 +11,15 @@ import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
 
 type Props = ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_HOSTS>>;
 
-export default function AddHostFormListenPort({
-    form,
-    setForm,
-    existing_full,
-}: Props) {
+export default function AddHostFormListenPort({ form, setForm, existing_full }: Props) {
     const [busy, setBusy] = useState(false);
+    const [field_key, setFieldKey] = useState(0);
 
     if (existing_full?.listen_port) {
         return (
             <Input
-                defaultValue={existing_full.listen_port || "N/A"}
-                title="Listen Port"
+                defaultValue={existing_full.listen_port}
+                title="Listen port"
                 readOnly
                 showLabel
             />
@@ -38,10 +34,8 @@ export default function AddHostFormListenPort({
                 { method: "GET" },
             );
             if (res.success && res.numberRes) {
-                setForm((prev) => ({
-                    ...prev,
-                    listen_port: Number(res.numberRes),
-                }));
+                setForm((prev) => ({ ...prev, listen_port: Number(res.numberRes) }));
+                setFieldKey((k) => k + 1);
             }
         } catch {
         } finally {
@@ -50,36 +44,33 @@ export default function AddHostFormListenPort({
     }
 
     return (
-        <Stack className="w-full gap-2">
-            <Row className="w-full items-stretch gap-3 md:flex-nowrap">
-                <Input
-                    name="listen_port"
-                    label="Listen Port"
-                    showLabel
-                    placeholder={String(AppData["DefaultWGListenPort"])}
-                    defaultValue={
-                        form.listen_port != null ? String(form.listen_port) : ""
-                    }
-                    numberText
-                    rawNumber
-                    changeHandler={(v) => {
-                        setForm((prev) => ({
-                            ...prev,
-                            listen_port: Number(v) || undefined,
-                        }));
-                    }}
-                />
-                <Button
-                    title="Grab Next Port"
-                    size="small"
-                    variant="outlined"
-                    disabled={busy}
-                    loading={busy}
-                    onClick={handleGrabNext}
-                >
-                    {busy ? "Fetching…" : "Grab Next"}
-                </Button>
-            </Row>
-        </Stack>
+        <Row className="w-full gap-2 items-end flex-wrap sm:flex-nowrap">
+            <Input
+                key={field_key}
+                name="listen_port"
+                title="Listen port"
+                showLabel
+                placeholder={String(AppData["DefaultWGListenPort"])}
+                info="UDP port clients connect to. Open it in your firewall."
+                defaultValue={form.listen_port != null ? String(form.listen_port) : ""}
+                numberText
+                rawNumber
+                wrapperWrapperProps={{ className: "grow" }}
+                changeHandler={(v) => {
+                    setForm((prev) => ({ ...prev, listen_port: Number(v) || undefined }));
+                }}
+            />
+            <Button
+                title="Use the next free port"
+                type="button"
+                variant="outlined"
+                color="gray"
+                loading={busy}
+                className="py-2.5"
+                onClick={handleGrabNext}
+            >
+                Next free port
+            </Button>
+        </Row>
     );
 }
diff --git a/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-name.tsx b/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-name.tsx
index dff1fe7..f972749 100644
--- a/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-name.tsx
+++ b/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-name.tsx
@@ -1,27 +1,22 @@
 import Input from "@/src/components/twui/form/Input";
-import Stack from "@/src/components/twui/layout/Stack";
 import useFormInit from "@/src/hooks/use-form-init";
 import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
 
 type Props = ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_HOSTS>>;
 
-export default function AddHostFormName({ form, setForm }: Props) {
+export default function AddHostFormName({ form, setForm, existing_full }: Props) {
     return (
-        <Stack className="w-full gap-2">
-            <Input
-                name="name"
-                label="Host Name"
-                showLabel
-                placeholder="e.g. my-server"
-                defaultValue={form.name || ""}
-                changeHandler={(v) => {
-                    setForm((prev) => ({
-                        ...prev,
-                        name: v,
-                    }));
-                }}
-                required
-            />
-        </Stack>
+        <Input
+            name="name"
+            title="Name"
+            showLabel
+            placeholder="e.g. home-server"
+            autoFocus={!existing_full?.id}
+            defaultValue={form.name || ""}
+            changeHandler={(v) => {
+                setForm((prev) => ({ ...prev, name: v }));
+            }}
+            required
+        />
     );
 }
diff --git a/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-public-ip.tsx b/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-public-ip.tsx
index 2284b1a..26b653c 100644
--- a/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-public-ip.tsx
+++ b/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-public-ip.tsx
@@ -6,7 +6,7 @@ import { useEffect, useState } from "react";
 import Checkbox from "@/src/components/twui/form/Checkbox";
 import { twMerge } from "tailwind-merge";
 import useStatus from "@/src/components/twui/hooks/useStatus";
-import LoadingRectangleBlock from "@/src/components/twui/layout/LoadingRectangleBlock";
+import LoadingBlock from "@/src/components/twui/elements/LoadingBlock";
 import clientFetchIP from "../../(functions)/fetch-ip";
 import isLocalIPAddress from "../../../../../../utils/is-local-ip-address";
 
@@ -47,16 +47,17 @@ export default function AddHostFormPublicIP({
     }, [form.interface, useLocalIP]);
 
     return (
-        <Stack className={twMerge("w-full gap-2 relative")}>
+        <Stack className={twMerge("w-full gap-3 relative items-stretch")}>
             {loading ? (
-                <LoadingRectangleBlock className="h-[70px]" />
+                <LoadingBlock className="h-[76px]" />
             ) : (
                 <>
                     <Input
                         name="public_ip_address"
-                        label="IP Address"
+                        title="Endpoint address"
                         showLabel
-                        placeholder="e.g. 203.0.113.10 or 192.168.1.10"
+                        placeholder="e.g. 203.0.113.10"
+                        info="The address clients use to reach this server."
                         defaultValue={form.public_ip_address || ""}
                         changeHandler={(v) => {
                             setForm((prev) => ({
@@ -69,11 +70,7 @@ export default function AddHostFormPublicIP({
                         changeHandler={(checked) => {
                             setUseLocalIP(checked);
                         }}
-                        label={
-                            <span className="text-base opacity-80">
-                                Use Local IP?
-                            </span>
-                        }
+                        label="Use the interface's local IP (LAN-only access)"
                         defaultChecked={
                             useLocalIP ||
                             isLocalIPAddress(form.public_ip_address)
diff --git a/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-subnet.tsx b/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-subnet.tsx
deleted file mode 100644
index 9ae1d38..0000000
--- a/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-subnet.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import H3 from "@/src/components/twui/layout/H3";
-import P from "@/src/components/twui/layout/P";
-import Stack from "@/src/components/twui/layout/Stack";
-
-export default function AddHostFormSubnet() {
-    return (
-        <Stack className="gap-1">
-            <H3 className="text-[14px] font-semibold mb-0!">
-                WireGuard subnet
-            </H3>
-            <P
-                noMargin
-                className="text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45"
-            >
-                Each host runs on its own private subnet (e.g. 10.2.0.1/24).
-                The tunnel is brought up and restarted as part of creation.
-            </P>
-        </Stack>
-    );
-}
\ No newline at end of file
diff --git a/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-wg-ip-address.tsx b/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-wg-ip-address.tsx
index 988430c..b2b52fa 100644
--- a/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-wg-ip-address.tsx
+++ b/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-wg-ip-address.tsx
@@ -1,5 +1,4 @@
 import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
-import GrabNextSubnetButton from "@/src/components/general/grab-next-subnet-button";
 import HostWgIpField, {
     type HostWgIpFieldStatus,
 } from "@/src/components/general/host-wg-ip-field";
@@ -18,7 +17,7 @@ export default function AddHostFormWgIpAddress({
     if (props.existing_full?.wg_ip_address) {
         return (
             <Input
-                placeholder="WG IP address"
+                title="Host tunnel address"
                 defaultValue={props.existing_full.wg_ip_address}
                 readOnly
                 showLabel
@@ -37,7 +36,6 @@ export default function AddHostFormWgIpAddress({
                     }));
                 }}
                 onStatus={setIpStatus}
-                autoFocus
                 {...props}
             />
         </Stack>
diff --git a/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form.tsx b/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form.tsx
index 2bff95b..317f247 100644
--- a/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form.tsx
+++ b/src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form.tsx
@@ -1,10 +1,13 @@
 import { useState } from "react";
 import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
 import Form from "@/src/components/twui/form/Form";
-import LoadingOverlay from "@/src/components/twui/elements/LoadingOverlay";
-import Stack from "@/src/components/twui/layout/Stack";
-import Tag from "@/src/components/twui/elements/Tag";
+import LoadingBlock from "@/src/components/twui/elements/LoadingBlock";
+import Panel from "@/src/components/general/panel";
+import FormSection from "@/src/components/general/form-section";
+import InlineAlert from "@/src/components/general/inline-alert";
+import type { HostWgIpFieldStatus } from "@/src/components/general/host-wg-ip-field";
 import useFormInit from "@/src/hooks/use-form-init";
+import useConfirm from "@/src/hooks/use-confirm";
 import { AppData } from "@/src/data/app-data";
 import submitAddHostForm from "../../(functions)/submit-add-host-form";
 import AddHostFormAction from "./add-host-form-action";
@@ -14,26 +17,23 @@ import AddHostFormInterface from "./add-host-form-interface";
 import AddHostFormName from "./add-host-form-name";
 import AddHostFormDescription from "./add-host-form-description";
 import AddHostFormListenPort from "./add-host-form-listen-port";
-import LoadingRectangleBlock from "@/src/components/twui/layout/LoadingRectangleBlock";
-import type { HostWgIpFieldStatus } from "@/src/components/general/host-wg-ip-field";
 
 type Props = {
     existing_host?: BUN_SQLITE_WGUI_HOSTS;
     existing_host_full?: BUN_SQLITE_WGUI_HOSTS;
 };
 
-export default function AddHostForm({
-    existing_host,
-    existing_host_full,
-}: Props) {
+export default function AddHostForm({ existing_host, existing_host_full }: Props) {
+    const { confirm } = useConfirm();
+
     const init = useFormInit<BUN_SQLITE_WGUI_HOSTS>({
         default: {
             wg_ip_address: AppData["DefaultPrivateIP"],
             name: "Main",
         },
-        title: "new_host",
+        title: existing_host_full?.id != null ? `edit_host_${existing_host_full.id}` : "new_host",
         async before_ready_function(params) {
-            if (existing_host_full?.id) return;
+            if (existing_host_full?.id != null) return;
 
             params.setForm((prev) => ({
                 ...prev,
@@ -53,34 +53,47 @@ export default function AddHostForm({
 
     const [ipStatus, setIpStatus] = useState<HostWgIpFieldStatus>("checking");
 
-    const { loading, status } = init;
+    const { status, ready } = init;
+
+    if (!ready) {
+        return <LoadingBlock className="h-[520px]" />;
+    }
 
     return (
-        <Form
-            className="w-full gap-6"
-            onSubmit={() => {
-                submitAddHostForm(init);
-            }}
-        >
-            {status?.error && <Tag color="error">{status.msg}</Tag>}
-            {loading && <LoadingOverlay />}
-            {init.ready ? (
-                <Stack className="w-full gap-6 items-stretch">
-                    {/* <AddHostFormSubnet /> */}
+        <Panel>
+            <Form
+                className="w-full gap-0"
+                onSubmit={() => {
+                    submitAddHostForm({ init, confirm });
+                }}
+            >
+                {status?.error ? (
+                    <InlineAlert tone="error" msg={status.msg} className="mb-6" />
+                ) : null}
+
+                <FormSection title="Identity" description="How this host shows up in the dashboard.">
                     <AddHostFormName {...init} />
                     <AddHostFormDescription {...init} />
+                </FormSection>
+
+                <FormSection
+                    title="Network"
+                    description="Where the tunnel listens and how clients reach it."
+                >
                     <AddHostFormInterface {...init} />
-                    <AddHostFormListenPort {...init} />
                     <AddHostFormPublicIP {...init} />
-                    <AddHostFormWgIpAddress
-                        {...init}
-                        setIpStatus={setIpStatus}
-                    />
-                    <AddHostFormAction {...init} ipStatus={ipStatus} />
-                </Stack>
-            ) : (
-                <LoadingRectangleBlock className="h-[300px]" />
-            )}
-        </Form>
+                    <AddHostFormListenPort {...init} />
+                </FormSection>
+
+                <FormSection
+                    title="Tunnel"
+                    description="Each host gets its own private /24 subnet. Clients are numbered from it."
+                >
+                    <AddHostFormWgIpAddress {...init} setIpStatus={setIpStatus} />
+                </FormSection>
+
+                <AddHostFormAction {...init} ipStatus={ipStatus} />
+            </Form>
+        </Panel>
     );
 }
diff --git a/src/pages/admin/hosts/add/(sections)/add-host-form-section.tsx b/src/pages/admin/hosts/add/(sections)/add-host-form-section.tsx
index 0c588b1..c61954e 100644
--- a/src/pages/admin/hosts/add/(sections)/add-host-form-section.tsx
+++ b/src/pages/admin/hosts/add/(sections)/add-host-form-section.tsx
@@ -1,9 +1,5 @@
 import AddHostForm from "../(partials)/add-host-form/add-host-form";
 
 export default function AddHostFormSection() {
-    return (
-        <>
-            <AddHostForm />
-        </>
-    );
+    return <AddHostForm />;
 }
diff --git a/src/pages/admin/hosts/add/index.tsx b/src/pages/admin/hosts/add/index.tsx
index ec0c0a2..1064c56 100644
--- a/src/pages/admin/hosts/add/index.tsx
+++ b/src/pages/admin/hosts/add/index.tsx
@@ -1,57 +1,34 @@
 import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
-import AdminHero from "@/src/components/general/admin-hero";
-import { SiteData } from "@/src/data/site-data";
-import Button from "@/src/components/twui/layout/Button";
-import Divider from "@/src/components/twui/layout/Divider";
-import Stack from "@/src/components/twui/layout/Stack";
-import { ArrowLeft } from "lucide-react";
-import AddHostFormSection from "./(sections)/add-host-form-section";
 import { useContext } from "react";
+import PageHeader from "@/src/components/general/page-header";
+import PageBody from "@/src/components/general/page-body";
+import { SiteData } from "@/src/data/site-data";
 import { AppContext } from "@/src/pages/__root";
+import AddHostFormSection from "./(sections)/add-host-form-section";
 
-export default function AdminAddHostPage() {
+export default function AddHostPage() {
     const { pageProps } = useContext(AppContext);
+    const is_main_host = Boolean(pageProps?.is_main_host);
 
     return (
         <>
-            <AdminHero
-                title={
-                    pageProps?.is_main_host
-                        ? "Create Main Host"
-                        : "Add New Host"
-                }
+            <PageHeader
+                title={is_main_host ? "Create the main host" : "Add host"}
                 description={
-                    pageProps?.is_main_host ? (
-                        <span>
-                            Create the main wireguard host <code>(wgui0)</code>{" "}
-                            for this server
-                        </span>
-                    ) : (
-                        "Create a new WireGuard host with a dedicated private subnet"
-                    )
-                }
-                buttons={
-                    <Button
-                        title="Back to Hosts"
-                        variant="outlined"
-                        beforeIcon={<ArrowLeft />}
-                        href="/admin/hosts"
-                    >
-                        Back to Hosts
-                    </Button>
+                    is_main_host
+                        ? "Set up the main WireGuard interface (wgui0) for this server. You'll add clients to it next."
+                        : "A new WireGuard interface with its own private subnet."
                 }
+                back={is_main_host ? undefined : { href: "/admin/hosts", title: "Hosts" }}
             />
-
-            <Divider className="mb-6" />
-
-            <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
+            <PageBody>
                 <AddHostFormSection />
-            </Stack>
+            </PageBody>
         </>
     );
 }
 
 export const meta: BunextPageModuleMeta = {
-    title: `Add New Host | ${SiteData["SiteName"]}`,
-    description: `WireGuard add host page`,
+    title: `Add host | ${SiteData["SiteName"]}`,
+    description: `Add a WireGuard host`,
 };
diff --git a/src/pages/admin/hosts/index.tsx b/src/pages/admin/hosts/index.tsx
index 1185a04..7003fb0 100644
--- a/src/pages/admin/hosts/index.tsx
+++ b/src/pages/admin/hosts/index.tsx
@@ -1,58 +1,31 @@
 import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
-import AdminHero from "@/src/components/general/admin-hero";
-import Stack from "@/src/components/twui/layout/Stack";
+import { Plus } from "lucide-react";
+import PageHeader from "@/src/components/general/page-header";
+import PageBody from "@/src/components/general/page-body";
 import { SiteData } from "@/src/data/site-data";
-import useHostData from "./(hooks)/use-host-data";
-import Button from "@/src/components/twui/layout/Button";
-import Divider from "@/src/components/twui/layout/Divider";
-import EmptyContent from "@/src/components/twui/elements/EmptyContent";
-import HostCard from "./(partials)/host-card";
-
-export default function AdminHostPage() {
-    const { hosts, clients } = useHostData();
+import HostsTableSection from "./(sections)/hosts-table-section";
 
+export default function AdminHostsPage() {
     return (
         <>
-            <AdminHero
-                title="Host"
-                description="WireGuard server configuration and interface details"
-                buttons={
-                    <>
-                        <Button title="Add New Host" href="/admin/hosts/add">
-                            Add New Host
-                        </Button>
-                    </>
-                }
+            <PageHeader
+                title="Hosts"
+                description="WireGuard interfaces on this server, each with its own subnet."
+                primary_action={{
+                    key: "add-host",
+                    title: "Add host",
+                    href: "/admin/hosts/add",
+                    icon: <Plus size={14} />,
+                }}
             />
-
-            <Divider className="mb-6" />
-
-            <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
-                {hosts?.[0] ? (
-                    <Stack className="w-full gap-4 items-stretch">
-                        {hosts.map((host) => (
-                            <HostCard
-                                key={host.id}
-                                host={host}
-                                client_count={
-                                    clients?.filter(
-                                        (client) =>
-                                            (client.host_id || 0) ==
-                                            (host.id || 0),
-                                    ).length || 0
-                                }
-                            />
-                        ))}
-                    </Stack>
-                ) : (
-                    <EmptyContent title="No other hosts found" />
-                )}
-            </Stack>
+            <PageBody>
+                <HostsTableSection />
+            </PageBody>
         </>
     );
 }
 
 export const meta: BunextPageModuleMeta = {
-    title: `Host | ${SiteData["SiteName"]}`,
-    description: `WireGuard host configuration`,
+    title: `Hosts | ${SiteData["SiteName"]}`,
+    description: `WireGuard hosts`,
 };
diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
index cc31d4c..84290fa 100644
--- a/src/pages/admin/index.tsx
+++ b/src/pages/admin/index.tsx
@@ -1,34 +1,46 @@
 import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
-import AdminHero from "@/src/components/general/admin-hero";
-import Stack from "@/src/components/twui/layout/Stack";
+import { Plus } from "lucide-react";
+import PageHeader from "@/src/components/general/page-header";
+import PageBody from "@/src/components/general/page-body";
+import useClientRulesMap from "@/src/hooks/use-client-rules-map";
 import { SiteData } from "@/src/data/site-data";
 import useDashboardData from "./(hooks)/use-dashboard-data";
-import KpiHeroSection from "./(sections)/kpi-hero-section";
-import KpiSecondarySection from "./(sections)/kpi-secondary-section";
+import KpiSection from "./(sections)/kpi-section";
 import PeersTableSection from "./(sections)/peers-table-section";
 
 export default function AdminDashboardPage() {
-    const { clients, hosts } = useDashboardData();
+    const { clients, hosts, onClientDeleted } = useDashboardData();
+    const rules_by_client_id = useClientRulesMap();
 
     return (
         <>
-            <AdminHero
+            <PageHeader
                 title="Dashboard"
-                description="Overview of your WireGuard network"
+                description="Overview of your WireGuard network."
+                primary_action={{
+                    key: "add-client",
+                    title: "Add client",
+                    href: "/admin/clients/add",
+                    icon: <Plus size={14} />,
+                }}
             />
-            <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
-                {/* <KpiHeroSection clients={clients} /> */}
-                <KpiSecondarySection
+            <PageBody>
+                <KpiSection
                     clients={clients}
                     hosts={hosts}
+                    rules_by_client_id={rules_by_client_id}
                 />
-                <PeersTableSection clients={clients} />
-            </Stack>
+                <PeersTableSection
+                    clients={clients}
+                    rules_by_client_id={rules_by_client_id}
+                    onDeleted={onClientDeleted}
+                />
+            </PageBody>
         </>
     );
 }
 
 export const meta: BunextPageModuleMeta = {
-    title: `Admin Dashboard | ${SiteData["SiteName"]}`,
-    description: `Admin dashboard`,
+    title: `Dashboard | ${SiteData["SiteName"]}`,
+    description: `WireGuard network overview`,
 };
diff --git a/src/pages/admin/settings/(data)/settings-nav-dict.ts b/src/pages/admin/settings/(data)/settings-nav-dict.ts
new file mode 100644
index 0000000..004cba4
--- /dev/null
+++ b/src/pages/admin/settings/(data)/settings-nav-dict.ts
@@ -0,0 +1,7 @@
+import { KeyRound, UserRound } from "lucide-react";
+import type { SubNavItemType } from "@/src/components/general/sub-nav/sub-nav-item";
+
+export const SettingsNav: SubNavItemType[] = [
+    { title: "Profile", href: "/admin/settings/profile", Icon: UserRound },
+    { title: "Password", href: "/admin/settings/password", Icon: KeyRound },
+];
diff --git a/src/pages/admin/settings/(functions)/change-password.ts b/src/pages/admin/settings/(functions)/change-password.ts
new file mode 100644
index 0000000..8224082
--- /dev/null
+++ b/src/pages/admin/settings/(functions)/change-password.ts
@@ -0,0 +1,23 @@
+import fetchApi from "@/src/components/twui/utils/fetch/fetchApi";
+import type { ApiReqParams } from "@/src/types";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+
+type Params = {
+    new_password: string;
+    confirm_password: string;
+};
+
+export default async function changePassword({ new_password, confirm_password }: Params) {
+    try {
+        const res = await fetchApi<ApiReqParams, APIResponseObject>(`/api/admin/change-password`, {
+            method: "POST",
+            body: { new_password, confirm_password },
+        });
+
+        return res.success
+            ? { success: true, msg: res.msg || "Password updated" }
+            : { success: false, msg: res.msg || "Couldn't update the password" };
+    } catch (error: any) {
+        return { success: false, msg: error.message || "Couldn't update the password" };
+    }
+}
diff --git a/src/pages/admin/settings/(sections)/change-password-section.tsx b/src/pages/admin/settings/(sections)/change-password-section.tsx
index b3bd4ac..96290ae 100644
--- a/src/pages/admin/settings/(sections)/change-password-section.tsx
+++ b/src/pages/admin/settings/(sections)/change-password-section.tsx
@@ -1,140 +1,91 @@
 import { useState } from "react";
-import { CircleCheck, TriangleAlert } from "lucide-react";
-import AdminCard from "@/src/components/general/admin-card";
-import useStatus from "@/src/components/twui/hooks/useStatus";
-import fetchApi from "@/src/components/twui/utils/fetch/fetchApi";
+import Form from "@/src/components/twui/form/Form";
 import Input from "@/src/components/twui/form/Input";
-import H3 from "@/src/components/twui/layout/H3";
-import P from "@/src/components/twui/layout/P";
-import Row from "@/src/components/twui/layout/Row";
-import Span from "@/src/components/twui/layout/Span";
 import Stack from "@/src/components/twui/layout/Stack";
-import Tag from "@/src/components/twui/elements/Tag";
-import Button from "@/src/components/twui/layout/Button";
-import type { ApiReqParams } from "@/src/types";
-import type { APIResponseObject } from "@moduletrace/bunext/types";
+import Panel from "@/src/components/general/panel";
+import FormActions from "@/src/components/general/form-actions";
+import InlineAlert from "@/src/components/general/inline-alert";
+import MutedText from "@/src/components/general/muted-text";
+import useConfirm from "@/src/hooks/use-confirm";
+import useToast from "@/src/hooks/use-toast";
+import changePassword from "../(functions)/change-password";
 
 export default function ChangePasswordSection() {
-    const { loading, setLoading, status, setStatus } = useStatus();
+    const { confirm } = useConfirm();
+    const { toast } = useToast();
 
     const [new_password, setNewPassword] = useState("");
     const [confirm_password, setConfirmPassword] = useState("");
+    const [error, setError] = useState<string>();
+    const [loading, setLoading] = useState(false);
+    const [form_key, setFormKey] = useState(0);
 
-    function handleChangePassword() {
-        if (!window.confirm("Change your password?")) return;
+    const mismatch = Boolean(confirm_password) && new_password !== confirm_password;
 
-        setStatus(undefined);
+    async function handleSubmit() {
+        if (!new_password || mismatch) return;
+
+        const confirmed = await confirm({
+            title: "Change your password?",
+            message: "You'll use the new password the next time you sign in.",
+            confirm_label: "Change password",
+        });
+
+        if (!confirmed) return;
+
+        setError(undefined);
         setLoading(true);
+        const res = await changePassword({ new_password, confirm_password });
+        setLoading(false);
 
-        fetchApi<ApiReqParams, APIResponseObject>(
-            `/api/admin/change-password`,
-            {
-                method: "POST",
-                body: {
-                    new_password,
-                    confirm_password,
-                },
-            },
-        )
-            .then((res) => {
-                if (res.success) {
-                    setNewPassword("");
-                    setConfirmPassword("");
-                    setStatus({
-                        success: true,
-                        msg: res.msg || "Password updated",
-                    });
-                    return;
-                }
+        if (!res.success) {
+            setError(res.msg);
+            return;
+        }
 
-                setStatus({
-                    error: true,
-                    success: false,
-                    msg: res.msg || "Could not update the password",
-                });
-            })
-            .catch((error: any) => {
-                setStatus({
-                    error: true,
-                    success: false,
-                    msg: error.message || "Could not update the password",
-                });
-            })
-            .finally(() => {
-                setLoading(false);
-            });
+        setNewPassword("");
+        setConfirmPassword("");
+        setFormKey((k) => k + 1);
+        toast({ msg: res.msg, color: "success" });
     }
 
     return (
-        <AdminCard className="w-full p-5 flex flex-col gap-4">
-            <Stack className="gap-1">
-                <H3 className="text-[14px] font-semibold mb-0!">
-                    Change password
-                </H3>
-                <P
-                    noMargin
-                    className="text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45"
-                >
-                    Choose a strong password you don't use anywhere else.
-                </P>
-            </Stack>
-
-            <Input
-                type="password"
-                placeholder="New password"
-                autoComplete="new-password"
-                showLabel
-                onChange={(e) => {
-                    setNewPassword(e.target.value);
-                }}
-                defaultValue={new_password}
-            />
-            <Input
-                type="password"
-                placeholder="Confirm new password"
-                autoComplete="new-password"
-                showLabel
-                onChange={(e) => {
-                    setConfirmPassword(e.target.value);
-                }}
-                defaultValue={confirm_password}
-            />
-
-            {status?.error && status.msg ? (
-                <Tag
-                    variant="outlined"
-                    color="error"
-                    className="w-full py-1.5 outline-error/50 bg-error/5!"
-                >
-                    <Row>
-                        <TriangleAlert size={15} />
-                        <Span>{status.msg}</Span>
-                    </Row>
-                </Tag>
-            ) : null}
-            {status?.success && status.msg ? (
-                <Tag
-                    variant="outlined"
-                    color="success"
-                    className="w-full py-1.5 outline-success/50 bg-success/5!"
-                >
-                    <Row>
-                        <CircleCheck size={15} />
-                        <Span>{status.msg}</Span>
-                    </Row>
-                </Tag>
-            ) : null}
-
-            <Row className="w-full items-center gap-2">
-                <Button
-                    title="Update Password"
-                    disabled={loading || !new_password}
+        <Panel>
+            <Form key={form_key} className="w-full gap-5" onSubmit={handleSubmit}>
+                {error ? <InlineAlert tone="error" msg={error} /> : null}
+                <Stack className="w-full gap-5 sm:grid sm:grid-cols-2 sm:gap-3 items-stretch">
+                    <Input
+                        name="new_password"
+                        type="password"
+                        title="New password"
+                        autoComplete="new-password"
+                        showLabel
+                        required
+                        onChange={(e) => setNewPassword(e.target.value)}
+                    />
+                    <Stack className="gap-1.5 items-stretch">
+                        <Input
+                            name="confirm_password"
+                            type="password"
+                            title="Confirm new password"
+                            autoComplete="new-password"
+                            showLabel
+                            required
+                            onChange={(e) => setConfirmPassword(e.target.value)}
+                        />
+                        {mismatch ? (
+                            <MutedText text_size="xs" tone="error" role="alert">
+                                Passwords don't match
+                            </MutedText>
+                        ) : null}
+                    </Stack>
+                </Stack>
+                <FormActions
+                    submit_title="Change password"
                     loading={loading}
-                    onClick={handleChangePassword}
-                >
-                    Update Password
-                </Button>
-            </Row>
-        </AdminCard>
+                    disabled={!new_password || mismatch}
+                />
+            </Form>
+        </Panel>
     );
 }
diff --git a/src/pages/admin/settings/(sections)/settings-form-section.tsx b/src/pages/admin/settings/(sections)/settings-form-section.tsx
index e546e5a..2a8d8da 100644
--- a/src/pages/admin/settings/(sections)/settings-form-section.tsx
+++ b/src/pages/admin/settings/(sections)/settings-form-section.tsx
@@ -1,12 +1,10 @@
-import UserForm from "@/src/components/general/user-form";
-import AdminCard from "@/src/components/general/admin-card";
-import H3 from "@/src/components/twui/layout/H3";
-import P from "@/src/components/twui/layout/P";
-import Stack from "@/src/components/twui/layout/Stack";
 import { useContext } from "react";
-import { AppContext } from "@/src/pages/__root";
-import EmptyContent from "@/src/components/twui/elements/EmptyContent";
+import { UserX } from "lucide-react";
 import _ from "lodash";
+import UserForm from "@/src/components/general/user-form";
+import Panel from "@/src/components/general/panel";
+import EmptyState from "@/src/components/general/empty-state";
+import { AppContext } from "@/src/pages/__root";
 import type { BUN_SQLITE_WGUI_USERS_JOIN } from "@/src/types/sql-joins";
 
 export default function SettingsFormSection() {
@@ -14,38 +12,19 @@ export default function SettingsFormSection() {
 
     const target_user = pageProps?.single_user;
 
-    if (!target_user) {
-        return <EmptyContent title="No User Found!" />;
-    }
-
     return (
-        <AdminCard className="w-full p-5 flex flex-col gap-4">
-            <Stack className="gap-1">
-                <H3 className="text-[14px] font-semibold mb-0!">
-                    Account details
-                </H3>
-                <P
-                    noMargin
-                    className="text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45"
-                >
-                    Update your name and email. You'll receive the Wireguard
-                    configs at this email.
-                </P>
-            </Stack>
-
-            <UserForm
-                existing_user={_.pick<
-                    BUN_SQLITE_WGUI_USERS_JOIN,
-                    keyof BUN_SQLITE_WGUI_USERS_JOIN
-                >(target_user, [
-                    "first_name",
-                    "last_name",
-                    "email",
-                    "username",
-                    "bio",
-                ])}
-                existing_user_full={target_user}
-            />
-        </AdminCard>
+        <Panel>
+            {target_user ? (
+                <UserForm
+                    existing_user={_.pick<BUN_SQLITE_WGUI_USERS_JOIN, keyof BUN_SQLITE_WGUI_USERS_JOIN>(
+                        target_user,
+                        ["first_name", "last_name", "email", "username", "bio"],
+                    )}
+                    existing_user_full={target_user}
+                />
+            ) : (
+                <EmptyState icon={<UserX size={18} />} title="Account not found" />
+            )}
+        </Panel>
     );
 }
diff --git a/src/pages/admin/settings/(sections)/settings-page-frame.tsx b/src/pages/admin/settings/(sections)/settings-page-frame.tsx
new file mode 100644
index 0000000..c26861a
--- /dev/null
+++ b/src/pages/admin/settings/(sections)/settings-page-frame.tsx
@@ -0,0 +1,24 @@
+import type { PropsWithChildren } from "react";
+import PageHeader from "@/src/components/general/page-header";
+import PageBody from "@/src/components/general/page-body";
+import SubNav from "@/src/components/general/sub-nav";
+import { SettingsNav } from "../(data)/settings-nav-dict";
+
+type Props = PropsWithChildren & {
+    title: string;
+    description: string;
+};
+
+/** Header, sub-navigation and body shared by the settings subpages. */
+export default function SettingsPageFrame({ title, description, children }: Props) {
+    return (
+        <>
+            <PageHeader
+                title={title}
+                description={description}
+                nav={<SubNav label="Settings sections" items={SettingsNav} />}
+            />
+            <PageBody className="max-w-3xl">{children}</PageBody>
+        </>
+    );
+}
diff --git a/src/pages/admin/settings/index.server.ts b/src/pages/admin/settings/index.server.ts
index 190312e..9f70f53 100644
--- a/src/pages/admin/settings/index.server.ts
+++ b/src/pages/admin/settings/index.server.ts
@@ -1,26 +1,10 @@
-import userAuth from "@/src/functions/backend/auth/user-auth";
-import grabUsers from "@/src/functions/backend/db/users/grab-users";
 import type { PagePropsType } from "@/src/types";
 import type { BunextPageServerFn } from "@moduletrace/bunext/types";
 
-const server: BunextPageServerFn<PagePropsType> = async ({ req }) => {
-    const { user } = await userAuth({ req });
-
-    if (!user?.logged_in_status || !user.id) {
-        return {
-            redirect: {
-                destination: "/auth/login",
-                permanent: false,
-            },
-        };
-    }
-
-    const user_res = await grabUsers({ user_id: user.id });
-
+/** `/admin/settings` has no content of its own; land on Profile. */
+const server: BunextPageServerFn<PagePropsType> = async () => {
     return {
-        props: {
-            single_user: user_res.singleRes || null,
-        },
+        redirect: { destination: "/admin/settings/profile", permanent: false },
     };
 };
 
diff --git a/src/pages/admin/settings/index.tsx b/src/pages/admin/settings/index.tsx
index e09da10..de7a2d0 100644
--- a/src/pages/admin/settings/index.tsx
+++ b/src/pages/admin/settings/index.tsx
@@ -1,28 +1,4 @@
-import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
-import AdminHero from "@/src/components/general/admin-hero";
-import { SiteData } from "@/src/data/site-data";
-import Divider from "@/src/components/twui/layout/Divider";
-import Stack from "@/src/components/twui/layout/Stack";
-import SettingsFormSection from "./(sections)/settings-form-section";
-import ChangePasswordSection from "./(sections)/change-password-section";
-
-export default function AdminSettingsPage() {
-    return (
-        <>
-            <AdminHero
-                title="Settings"
-                description="Manage your account details"
-            />
-            <Divider className="mb-6" />
-            <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
-                <SettingsFormSection />
-                <ChangePasswordSection />
-            </Stack>
-        </>
-    );
+/** Always redirected by `index.server.ts`. */
+export default function SettingsIndexPage() {
+    return null;
 }
-
-export const meta: BunextPageModuleMeta = {
-    title: `Admin Settings | ${SiteData["SiteName"]}`,
-    description: `WgUI settings.`,
-};
\ No newline at end of file
diff --git a/src/pages/admin/settings/password/index.tsx b/src/pages/admin/settings/password/index.tsx
new file mode 100644
index 0000000..922bc86
--- /dev/null
+++ b/src/pages/admin/settings/password/index.tsx
@@ -0,0 +1,20 @@
+import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
+import { SiteData } from "@/src/data/site-data";
+import SettingsPageFrame from "../(sections)/settings-page-frame";
+import ChangePasswordSection from "../(sections)/change-password-section";
+
+export default function SettingsPasswordPage() {
+    return (
+        <SettingsPageFrame
+            title="Password"
+            description="Use a strong password you don't use anywhere else."
+        >
+            <ChangePasswordSection />
+        </SettingsPageFrame>
+    );
+}
+
+export const meta: BunextPageModuleMeta = {
+    title: `Password | ${SiteData["SiteName"]}`,
+    description: `Change your password`,
+};
diff --git a/src/pages/admin/settings/profile/index.server.ts b/src/pages/admin/settings/profile/index.server.ts
new file mode 100644
index 0000000..190312e
--- /dev/null
+++ b/src/pages/admin/settings/profile/index.server.ts
@@ -0,0 +1,27 @@
+import userAuth from "@/src/functions/backend/auth/user-auth";
+import grabUsers from "@/src/functions/backend/db/users/grab-users";
+import type { PagePropsType } from "@/src/types";
+import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+
+const server: BunextPageServerFn<PagePropsType> = async ({ req }) => {
+    const { user } = await userAuth({ req });
+
+    if (!user?.logged_in_status || !user.id) {
+        return {
+            redirect: {
+                destination: "/auth/login",
+                permanent: false,
+            },
+        };
+    }
+
+    const user_res = await grabUsers({ user_id: user.id });
+
+    return {
+        props: {
+            single_user: user_res.singleRes || null,
+        },
+    };
+};
+
+export default server;
diff --git a/src/pages/admin/settings/profile/index.tsx b/src/pages/admin/settings/profile/index.tsx
new file mode 100644
index 0000000..3a330d1
--- /dev/null
+++ b/src/pages/admin/settings/profile/index.tsx
@@ -0,0 +1,17 @@
+import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
+import { SiteData } from "@/src/data/site-data";
+import SettingsPageFrame from "../(sections)/settings-page-frame";
+import SettingsFormSection from "../(sections)/settings-form-section";
+
+export default function SettingsProfilePage() {
+    return (
+        <SettingsPageFrame title="Profile" description="Your name, email and sign-in username.">
+            <SettingsFormSection />
+        </SettingsPageFrame>
+    );
+}
+
+export const meta: BunextPageModuleMeta = {
+    title: `Profile | ${SiteData["SiteName"]}`,
+    description: `Account profile settings`,
+};
diff --git a/src/pages/admin/setup/(data)/setup-nav-dict.ts b/src/pages/admin/setup/(data)/setup-nav-dict.ts
new file mode 100644
index 0000000..92fadaa
--- /dev/null
+++ b/src/pages/admin/setup/(data)/setup-nav-dict.ts
@@ -0,0 +1,8 @@
+import { Activity, Shield, Wrench } from "lucide-react";
+import type { SubNavItemType } from "@/src/components/general/sub-nav/sub-nav-item";
+
+export const SetupNav: SubNavItemType[] = [
+    { title: "System status", href: "/admin/setup/status", Icon: Activity },
+    { title: "Maintenance", href: "/admin/setup/maintenance", Icon: Wrench },
+    { title: "Firewall", href: "/admin/setup/firewall", Icon: Shield },
+];
diff --git a/src/pages/admin/setup/(functions)/build-setup-overview.tsx b/src/pages/admin/setup/(functions)/build-setup-overview.tsx
new file mode 100644
index 0000000..d05d910
--- /dev/null
+++ b/src/pages/admin/setup/(functions)/build-setup-overview.tsx
@@ -0,0 +1,49 @@
+import StatusDot from "@/src/components/general/status-dot";
+import type { KeyValueItem } from "@/src/components/general/key-value-row";
+import type { SystemSetupStatus } from "../(hooks)/use-system-setup-status";
+
+type Params = {
+    setup_status: SystemSetupStatus;
+};
+
+export default function buildSetupOverview({ setup_status }: Params): KeyValueItem[] {
+    const service_value =
+        setup_status.service_active === null ? (
+            <StatusDot tone="neutral" label="Not managed" />
+        ) : (
+            <StatusDot
+                tone={setup_status.service_active ? "success" : "error"}
+                label={setup_status.service_active ? "Active" : "Inactive"}
+            />
+        );
+
+    return [
+        {
+            key: "env",
+            label: "Environment",
+            value: (
+                <StatusDot
+                    tone={setup_status.is_dev ? "warning" : "success"}
+                    label={setup_status.environment}
+                />
+            ),
+        },
+        {
+            key: "root",
+            label: "Running as root",
+            value: (
+                <StatusDot
+                    tone={setup_status.is_root ? "success" : "error"}
+                    label={setup_status.is_root ? "Yes" : "No"}
+                />
+            ),
+        },
+        { key: "distro", label: "Distro", value: setup_status.distro_pretty_name || setup_status.distro },
+        { key: "init", label: "Init system", value: setup_status.init_system, mono: true },
+        { key: "service", label: "Service", value: setup_status.service_name, mono: true },
+        { key: "service-status", label: "Service status", value: service_value },
+        { key: "version", label: "App version", value: setup_status.app_version || "—", mono: true },
+        { key: "dir", label: "Install directory", value: setup_status.install_dir, mono: true },
+        { key: "repo", label: "Repository", value: setup_status.repo_url || "—", mono: true },
+    ];
+}
diff --git a/src/pages/admin/setup/(functions)/build-setup-runtime-checks.ts b/src/pages/admin/setup/(functions)/build-setup-runtime-checks.ts
new file mode 100644
index 0000000..385da31
--- /dev/null
+++ b/src/pages/admin/setup/(functions)/build-setup-runtime-checks.ts
@@ -0,0 +1,32 @@
+import type { SetupCheckItem } from "../(partials)/setup-check-status-item";
+import type { SystemSetupStatus } from "../(hooks)/use-system-setup-status";
+
+type Params = {
+    setup_status: SystemSetupStatus;
+};
+
+export default function buildSetupRuntimeChecks({ setup_status }: Params): SetupCheckItem[] {
+    return [
+        {
+            key: "kernel-module",
+            title: "WireGuard kernel module",
+            subtitle: "/sys/module/wireguard",
+            ok: setup_status.wg_module_loaded,
+            ok_label: "Loaded",
+        },
+        {
+            key: "wg-quick-helper",
+            title: "wg-quick manage helper",
+            subtitle: `/var/lib/wgui/scripts/wg-quick-manage.sh`,
+            ok: setup_status.wg_quick_helper_installed,
+            ok_label: "Installed",
+        },
+        ...setup_status.lib_dirs.map((dir) => ({
+            key: dir.path,
+            title: `Runtime directory · ${dir.label}`,
+            subtitle: dir.path,
+            ok: dir.exists,
+            ok_label: "Exists",
+        })),
+    ];
+}
diff --git a/src/pages/admin/setup/(functions)/guard-setup-page.ts b/src/pages/admin/setup/(functions)/guard-setup-page.ts
new file mode 100644
index 0000000..961eb8e
--- /dev/null
+++ b/src/pages/admin/setup/(functions)/guard-setup-page.ts
@@ -0,0 +1,24 @@
+import checkUserAccess from "@/src/functions/backend/auth/check-user-access";
+import userAuth from "@/src/functions/backend/auth/user-auth";
+
+type Params = {
+    req: Request;
+};
+
+/**
+ * Setup pages are super-admin only. Returns a redirect when the request
+ * isn't allowed, `null` otherwise.
+ */
+export default async function guardSetupPage({ req }: Params) {
+    const { user, user_types } = await userAuth({ req });
+
+    if (!user?.logged_in_status || !user.id) {
+        return { destination: "/auth/login", permanent: false };
+    }
+
+    if (!checkUserAccess({ user_types }).success) {
+        return { destination: "/admin", permanent: false };
+    }
+
+    return null;
+}
diff --git a/src/pages/admin/setup/(partials)/firewall-rule-row.tsx b/src/pages/admin/setup/(partials)/firewall-rule-row.tsx
index 40fd861..b3eb54d 100644
--- a/src/pages/admin/setup/(partials)/firewall-rule-row.tsx
+++ b/src/pages/admin/setup/(partials)/firewall-rule-row.tsx
@@ -1,53 +1,18 @@
 import CodeBlock from "@/src/components/twui/elements/CodeBlock";
-import Tag from "@/src/components/twui/elements/Tag";
+import Row from "@/src/components/twui/layout/Row";
+import Span from "@/src/components/twui/layout/Span";
+import Stack from "@/src/components/twui/layout/Stack";
+import StatusDot, { type StatusTone } from "@/src/components/general/status-dot";
 import type {
     FirewallRuleKind,
     FirewallRuleInfo,
 } from "@/src/functions/backend/firewall/grab-firewall-status";
-import Row from "@/src/components/twui/layout/Row";
-import Span from "@/src/components/twui/layout/Span";
-import Stack from "@/src/components/twui/layout/Stack";
-import type { TWUIButtonColorType } from "@/src/components/twui/layout/Button";
-import {
-    ShieldAlert,
-    ShieldCheck,
-    ShieldX,
-    type LucideIcon,
-} from "lucide-react";
 
-const KIND_META: Record<
-    FirewallRuleKind,
-    {
-        label: string;
-        color: TWUIButtonColorType;
-        icon: LucideIcon;
-        text_class: string;
-    }
-> = {
-    required: {
-        label: `Active`,
-        color: `success`,
-        icon: ShieldCheck,
-        text_class: `text-success`,
-    },
-    temporary: {
-        label: `Temporary`,
-        color: `warning`,
-        icon: ShieldAlert,
-        text_class: `text-warning`,
-    },
-    orphaned: {
-        label: `Orphaned`,
-        color: `error`,
-        icon: ShieldX,
-        text_class: `text-error`,
-    },
-    other: {
-        label: `Unmanaged`,
-        color: `gray`,
-        icon: ShieldCheck,
-        text_class: `text-foreground-light/45 dark:text-foreground-dark/45`,
-    },
+const KIND_META: Record<FirewallRuleKind, { label: string; tone: StatusTone }> = {
+    required: { label: "Active", tone: "success" },
+    temporary: { label: "Temporary", tone: "warning" },
+    orphaned: { label: "Orphaned", tone: "error" },
+    other: { label: "Unmanaged", tone: "neutral" },
 };
 
 type Props = {
@@ -56,40 +21,23 @@ type Props = {
 
 export default function FirewallRuleRow({ rule }: Props) {
     const meta = KIND_META[rule.kind];
-    const Icon = meta.icon;
 
     return (
-        <Stack className="w-full items-stretch gap-2.5 rounded-lg bg-background-light dark:bg-[#0e0e10] border border-slate-200 dark:border-white/10 p-3">
-            <Row className="w-full items-start justify-between gap-3 flex-wrap">
-                <Row className="gap-2.5 items-start min-w-0">
-                    <Icon
-                        size={15}
-                        className={`mt-0.5 shrink-0 ${meta.text_class}`}
-                    />
-                    <Span className="text-[12.5px] leading-5 min-w-0">
-                        {rule.description}
-                    </Span>
-                </Row>
-                <Tag
-                    variant="outlined"
-                    color={meta.color}
-                    className="shrink-0"
-                >
-                    {meta.label}
-                </Tag>
+        <Stack className="w-full items-stretch gap-2.5 px-4 py-3 border-t border-line first:border-t-0">
+            <Row className="w-full items-start justify-between gap-3 flex-nowrap">
+                <Span className="text-[15px] leading-5 min-w-0">{rule.description}</Span>
+                <StatusDot tone={meta.tone} label={meta.label} className="shrink-0 mt-0.5" />
             </Row>
 
             {rule.delete_command ? (
                 <CodeBlock
                     singleBlock
                     language="shell"
-                    wrapperProps={{
-                        className: `max-w-none! xl:max-w-none!`,
-                    }}
+                    wrapperProps={{ className: "max-w-full!" }}
                 >
                     {`# remove rule\n${rule.delete_command}`}
                 </CodeBlock>
             ) : null}
         </Stack>
     );
-}
\ No newline at end of file
+}
diff --git a/src/pages/admin/setup/(partials)/setup-action-card.tsx b/src/pages/admin/setup/(partials)/setup-action-card.tsx
deleted file mode 100644
index 6484bdb..0000000
--- a/src/pages/admin/setup/(partials)/setup-action-card.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import AdminCard from "@/src/components/general/admin-card";
-import Button from "@/src/components/twui/layout/Button";
-import H3 from "@/src/components/twui/layout/H3";
-import P from "@/src/components/twui/layout/P";
-import Row from "@/src/components/twui/layout/Row";
-import Span from "@/src/components/twui/layout/Span";
-import Stack from "@/src/components/twui/layout/Stack";
-import useStatus from "@/src/components/twui/hooks/useStatus";
-import { TriangleAlert } from "lucide-react";
-import { useState, type ComponentProps, type ReactNode } from "react";
-import SetupConsole from "./setup-console";
-
-type Props = {
-    title: string;
-    description?: string | ReactNode;
-    icon?: ReactNode;
-    button_title: string;
-    buttonProps?: Omit<ComponentProps<typeof Button>, "title">;
-    on_run: () =>
-        | Promise<{ success: boolean; msg?: string } | void>
-        | { success: boolean; msg?: string }
-        | void;
-    children?: ReactNode;
-};
-
-export default function SetupActionCard({
-    title,
-    description,
-    icon,
-    button_title,
-    buttonProps,
-    on_run,
-    children,
-}: Props) {
-    const { loading, setLoading, status, setStatus } = useStatus();
-    const [output, setOutput] = useState<string | null>(null);
-    const [is_error, setIsError] = useState(false);
-
-    const run = () => {
-        setLoading(true);
-        setStatus(undefined);
-        setOutput(null);
-
-        Promise.resolve()
-            .then(() => on_run())
-            .then((res) => {
-                if (res) {
-                    setOutput(res.msg || null);
-                    setIsError(!res.success);
-                }
-            })
-            .catch((error: any) => {
-                setStatus({
-                    error: true,
-                    msg: `Request failed — the wg-ui server may have restarted. ${
-                        error?.message || ""
-                    }`.trim(),
-                });
-            })
-            .finally(() => {
-                setLoading(false);
-            });
-    };
-
-    return (
-        <AdminCard className="w-full p-5 flex flex-col gap-4">
-            <Row className="gap-3 items-start">
-                {icon ? (
-                    <Span className="p-2.5 rounded-lg bg-primary/10 dark:bg-primary-dark/10 text-primary dark:text-primary-dark shrink-0">
-                        {icon}
-                    </Span>
-                ) : null}
-                <Stack className="gap-1 min-w-0">
-                    <H3 className="text-[14px] font-semibold mb-0!">
-                        {title}
-                    </H3>
-                    {description ? (
-                        typeof description == "string" ? (
-                            <P
-                                noMargin
-                                className="text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45"
-                            >
-                                {description}
-                            </P>
-                        ) : (
-                            description
-                        )
-                    ) : null}
-                </Stack>
-            </Row>
-
-            {children}
-
-            <Button
-                title={button_title}
-                className="w-full"
-                loading={loading}
-                {...buttonProps}
-                onClick={run}
-            >
-                {button_title}
-            </Button>
-
-            {status?.error && status.msg ? (
-                <Row className="gap-2 items-center bg-error/5 rounded-lg px-3 py-2 text-error">
-                    <TriangleAlert size={15} className="shrink-0" />
-                    <Span className="text-[12.5px]">{status.msg}</Span>
-                </Row>
-            ) : null}
-
-            <SetupConsole output={output} error={is_error} />
-        </AdminCard>
-    );
-}
\ No newline at end of file
diff --git a/src/pages/admin/setup/(partials)/setup-action-row.tsx b/src/pages/admin/setup/(partials)/setup-action-row.tsx
new file mode 100644
index 0000000..cd86680
--- /dev/null
+++ b/src/pages/admin/setup/(partials)/setup-action-row.tsx
@@ -0,0 +1,105 @@
+import { useState, type ReactNode } from "react";
+import Button from "@/src/components/twui/layout/Button";
+import H3 from "@/src/components/twui/layout/H3";
+import P from "@/src/components/twui/layout/P";
+import Row from "@/src/components/twui/layout/Row";
+import Stack from "@/src/components/twui/layout/Stack";
+import InlineAlert from "@/src/components/general/inline-alert";
+import useConfirm from "@/src/hooks/use-confirm";
+import useToast from "@/src/hooks/use-toast";
+import type { ConfirmParams } from "@/src/components/general/confirm/confirm-context";
+import SetupConsole from "./setup-console";
+
+type RunResult = { success: boolean; msg?: string } | void;
+
+type Props = {
+    title: string;
+    description?: ReactNode;
+    icon?: ReactNode;
+    button_title: string;
+    /** Ask before running (restart, update…) */
+    confirm_params?: ConfirmParams;
+    on_run: () => Promise<RunResult> | RunResult;
+    children?: ReactNode;
+};
+
+export default function SetupActionRow({
+    title,
+    description,
+    icon,
+    button_title,
+    confirm_params,
+    on_run,
+    children,
+}: Props) {
+    const { confirm } = useConfirm();
+    const { toast } = useToast();
+    const [loading, setLoading] = useState(false);
+    const [output, setOutput] = useState<string | null>(null);
+    const [is_error, setIsError] = useState(false);
+    const [request_error, setRequestError] = useState<string>();
+
+    async function run() {
+        if (confirm_params && !(await confirm(confirm_params))) return;
+
+        setLoading(true);
+        setOutput(null);
+        setRequestError(undefined);
+
+        try {
+            const res = await on_run();
+            if (res) {
+                setOutput(res.msg || null);
+                setIsError(!res.success);
+                toast({
+                    msg: res.success ? `${title}: done` : `${title} failed`,
+                    color: res.success ? "success" : "error",
+                });
+            }
+        } catch (error: any) {
+            setRequestError(
+                `Request failed — the wg-ui server may have restarted. ${error?.message || ""}`.trim(),
+            );
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    return (
+        <Stack className="w-full gap-4 px-4 py-4 border-t border-line first:border-t-0 items-stretch">
+            <Row className="w-full justify-between gap-4 items-start flex-wrap sm:flex-nowrap">
+                <Row className="gap-3 flex-nowrap items-start min-w-0">
+                    {icon ? (
+                        <Row className="size-8 shrink-0 justify-center rounded-default bg-gray dark:bg-gray-dark text-muted">
+                            {icon}
+                        </Row>
+                    ) : null}
+                    <Stack className="gap-1 min-w-0">
+                        <H3>{title}</H3>
+                        {description ? (
+                            <P className="text-[15px] max-w-2xl">{description}</P>
+                        ) : null}
+                    </Stack>
+                </Row>
+                <Button
+                    title={button_title}
+                    type="button"
+                    variant="outlined"
+                    color="gray"
+                    size="small"
+                    loading={loading}
+                    className="shrink-0"
+                    onClick={run}
+                >
+                    {button_title}
+                </Button>
+            </Row>
+
+            {children ? <Stack className="w-full gap-5 sm:pl-11 items-stretch">{children}</Stack> : null}
+
+            {request_error ? <InlineAlert tone="error" msg={request_error} /> : null}
+
+            <SetupConsole output={output} error={is_error} />
+        </Stack>
+    );
+}
diff --git a/src/pages/admin/setup/(partials)/setup-check-group.tsx b/src/pages/admin/setup/(partials)/setup-check-group.tsx
new file mode 100644
index 0000000..c82bc70
--- /dev/null
+++ b/src/pages/admin/setup/(partials)/setup-check-group.tsx
@@ -0,0 +1,19 @@
+import Stack from "@/src/components/twui/layout/Stack";
+import SectionLabel from "@/src/components/general/section-label";
+import SetupCheckStatusItem, { type SetupCheckItem } from "./setup-check-status-item";
+
+type Props = {
+    title: string;
+    items: SetupCheckItem[];
+};
+
+export default function SetupCheckGroup({ title, items }: Props) {
+    return (
+        <Stack className="w-full gap-0 items-stretch">
+            <SectionLabel className="px-4 pt-4 pb-2">{title}</SectionLabel>
+            {items.map((item) => (
+                <SetupCheckStatusItem {...item} key={item.key} />
+            ))}
+        </Stack>
+    );
+}
diff --git a/src/pages/admin/setup/(partials)/setup-check-status-item.tsx b/src/pages/admin/setup/(partials)/setup-check-status-item.tsx
index bba5b2a..c0efff0 100644
--- a/src/pages/admin/setup/(partials)/setup-check-status-item.tsx
+++ b/src/pages/admin/setup/(partials)/setup-check-status-item.tsx
@@ -1,10 +1,12 @@
-import Card from "@/src/components/twui/elements/Card";
-import Tag from "@/src/components/twui/elements/Tag";
+import Row from "@/src/components/twui/layout/Row";
 import Span from "@/src/components/twui/layout/Span";
 import Stack from "@/src/components/twui/layout/Stack";
-import { twMerge } from "tailwind-merge";
+import StatusDot from "@/src/components/general/status-dot";
+import MonoText from "@/src/components/general/mono-text";
+import MutedText from "@/src/components/general/muted-text";
 
-type Props = {
+export type SetupCheckItem = {
+    key: string;
     title: string;
     subtitle?: string;
     ok: boolean;
@@ -18,47 +20,17 @@ export default function SetupCheckStatusItem({
     ok,
     ok_label = "Installed",
     fail_label = "Missing",
-}: Props) {
+}: SetupCheckItem) {
     return (
-        <Card
-            noHover
-            className="w-full p-2.5 flex flex-row items-center gap-2.5"
-            title={subtitle}
-        >
-            <Span
-                aria-hidden="true"
-                className={twMerge(
-                    "relative flex w-2.5 h-2.5 shrink-0 rounded-full",
-                    ok ? "bg-success" : "bg-error",
-                )}
-            />
-            <Stack className="gap-1 min-w-0 flex-1">
-                <Span
-                    className={twMerge(
-                        "text-[13px] font-semibold leading-none text-foreground-light",
-                        "dark:text-foreground-dark truncate w-full line-clamp-1",
-                    )}
-                >
-                    {title}
-                </Span>
-                {subtitle ? (
-                    <Span
-                        className={twMerge(
-                            "font-mono text-[11.5px] text-foreground-light/45 dark:text-foreground-dark/45 truncate",
-                            "line-clamp-1 w-full",
-                        )}
-                    >
-                        {subtitle}
-                    </Span>
-                ) : null}
+        <Row className="w-full gap-3 px-4 py-2.5 border-t border-line flex-nowrap items-start">
+            <StatusDot tone={ok ? "success" : "error"} label={ok ? ok_label : fail_label} hide_label className="mt-1.5" />
+            <Stack className="gap-0 min-w-0 grow">
+                <Span className="text-[15px] font-medium text-fg">{title}</Span>
+                {subtitle ? <MonoText className="text-subtle break-all">{subtitle}</MonoText> : null}
             </Stack>
-            <Tag
-                variant="outlined"
-                color={ok ? "success" : "error"}
-                className="shrink-0"
-            >
+            <MutedText tone={ok ? "success" : "error"} className="shrink-0 whitespace-nowrap">
                 {ok ? ok_label : fail_label}
-            </Tag>
-        </Card>
+            </MutedText>
+        </Row>
     );
 }
diff --git a/src/pages/admin/setup/(partials)/setup-console.tsx b/src/pages/admin/setup/(partials)/setup-console.tsx
index 8950e05..82be8b4 100644
--- a/src/pages/admin/setup/(partials)/setup-console.tsx
+++ b/src/pages/admin/setup/(partials)/setup-console.tsx
@@ -1,5 +1,4 @@
-import Span from "@/src/components/twui/layout/Span";
-import { twMerge } from "tailwind-merge";
+import CodeBlock from "@/src/components/twui/elements/CodeBlock";
 
 type Props = {
     output?: string | null;
@@ -12,17 +11,14 @@ export default function SetupConsole({ output, error }: Props) {
     }
 
     return (
-        <div
-            aria-live="polite"
-            className={twMerge(
-                "w-full max-h-64 overflow-y-auto overflow-x-hidden rounded-lg bg-slate-950 p-3",
-                "border border-solid",
-                error ? "border-error/40" : "border-slate-700/40",
-            )}
-        >
-            <pre className="text-[11.5px] leading-5 font-mono whitespace-pre-wrap break-words text-slate-300">
+        <div aria-live="polite" className="w-full">
+            <CodeBlock
+                data-title={error ? "Error output" : "Output"}
+                wrapperProps={{ className: "max-w-full!" }}
+                className="max-h-64 overflow-y-auto"
+            >
                 {output}
-            </pre>
+            </CodeBlock>
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/src/pages/admin/setup/(partials)/setup-stat-cell.tsx b/src/pages/admin/setup/(partials)/setup-stat-cell.tsx
deleted file mode 100644
index 788014e..0000000
--- a/src/pages/admin/setup/(partials)/setup-stat-cell.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import Span from "@/src/components/twui/layout/Span";
-import Stack from "@/src/components/twui/layout/Stack";
-import { twMerge } from "tailwind-merge";
-
-export type SetupStatCellTone = "success" | "error" | "warning" | "muted";
-
-const toneClassName: Record<SetupStatCellTone, string> = {
-    success: "text-success",
-    error: "text-error",
-    warning: "text-warning",
-    muted: "text-foreground-light/40 dark:text-foreground-dark/40",
-};
-
-type Props = {
-    label: string;
-    value: string;
-    tone?: SetupStatCellTone;
-};
-
-export default function SetupStatCell({ label, value, tone }: Props) {
-    return (
-        <Stack className="gap-1 min-w-0">
-            <Span className="text-[11.5px] font-semibold uppercase tracking-[0.08em] text-foreground-light/40 dark:text-foreground-dark/40">
-                {label}
-            </Span>
-            <Span
-                title={value}
-                className={twMerge(
-                    "tabular text-[15px] font-semibold truncate line-clamp-1 w-full",
-                    tone
-                        ? toneClassName[tone]
-                        : "text-foreground-light/85 dark:text-foreground-dark/85",
-                )}
-            >
-                {value}
-            </Span>
-        </Stack>
-    );
-}
diff --git a/src/pages/admin/setup/(partials)/setup-update-wg-ui-action.tsx b/src/pages/admin/setup/(partials)/setup-update-wg-ui-action.tsx
index b473590..0de8973 100644
--- a/src/pages/admin/setup/(partials)/setup-update-wg-ui-action.tsx
+++ b/src/pages/admin/setup/(partials)/setup-update-wg-ui-action.tsx
@@ -1,14 +1,13 @@
+import { useState } from "react";
+import { CloudDownload } from "lucide-react";
 import fetchApi from "@/src/components/twui/utils/fetch/fetchApi";
 import Input from "@/src/components/twui/form/Input";
 import Stack from "@/src/components/twui/layout/Stack";
-import Span from "@/src/components/twui/layout/Span";
-import type useSystemSetupStatus from "../(hooks)/use-system-setup-status";
-import SetupActionCard from "./setup-action-card";
 import type { ApiReqParams } from "@/src/types";
 import type { APIResponseObject } from "@moduletrace/bunext/types";
-import { CloudDownload } from "lucide-react";
-import { useState } from "react";
 import { SiteData } from "@/src/data/site-data";
+import type useSystemSetupStatus from "../(hooks)/use-system-setup-status";
+import SetupActionRow from "./setup-action-row";
 
 type Props = {
     setup: ReturnType<typeof useSystemSetupStatus>;
@@ -17,87 +16,68 @@ type Props = {
 export default function SetupUpdateWgUiAction({ setup }: Props) {
     const setup_status = setup.setup_status;
 
-    const [repoUrl, setRepoUrl] = useState<string>(
-        setup_status?.repo_url || "",
-    );
-    const [branch, setBranch] = useState<string>(
-        setup_status?.repo_branch || "main",
-    );
+    const [repoUrl, setRepoUrl] = useState<string>(setup_status?.repo_url || "");
+    const [branch, setBranch] = useState<string>(setup_status?.repo_branch || "main");
 
     const needs_repo_url = !setup_status?.is_dev && !setup_status?.repo_url;
+    const service_name = setup_status?.service_name || "wgui";
+
+    const description = needs_repo_url
+        ? "wg-ui isn't installed yet. Provide the git repository so the installer can clone it."
+        : setup_status?.is_dev
+          ? "Development mode: reinstalls dependencies in this checkout and syncs the wg-quick helper. The dev server isn't restarted."
+          : `Pulls the latest code, installs dependencies, syncs helper scripts and restarts the ${service_name} service.`;
 
     return (
-        <SetupActionCard
-            title="Update wg-ui"
-            description={
-                needs_repo_url ? (
-                    <Span className="text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45">
-                        wg-ui isn't installed yet — provide the git repository
-                        URL so the installer can clone it, then run the update
-                        again to pull newer versions.
-                    </Span>
-                ) : setup_status?.is_dev ? (
-                    <Span className="text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45">
-                        Development mode — uses this local checkout. Reinstalls
-                        dependencies and syncs the wg-quick helper script. The
-                        dev server is not restarted.
-                    </Span>
-                ) : (
-                    <Span className="text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45">
-                        Pulls the latest code, installs dependencies, syncs
-                        helper scripts and restarts the{" "}
-                        {setup_status?.service_name || "wgui"} service. The
-                        server will briefly go offline.
-                    </Span>
-                )
-            }
-            icon={<CloudDownload size={19} />}
-            button_title={
-                setup_status?.app_installed ? "Update wg-ui" : "Install wg-ui"
+        <SetupActionRow
+            title={setup_status?.app_installed ? "Update wg-ui" : "Install wg-ui"}
+            description={description}
+            icon={<CloudDownload size={15} />}
+            button_title={setup_status?.app_installed ? "Update" : "Install"}
+            confirm_params={
+                setup_status?.is_dev
+                    ? undefined
+                    : {
+                          title: setup_status?.app_installed ? "Update wg-ui?" : "Install wg-ui?",
+                          message: `The ${service_name} service restarts and this dashboard goes briefly offline.`,
+                          confirm_label: setup_status?.app_installed ? "Update and restart" : "Install",
+                          tone: "danger",
+                      }
             }
             on_run={async () => {
-                const res = await fetchApi<ApiReqParams, APIResponseObject>(
-                    `/api/admin/update-wg-ui`,
-                    {
-                        method: "POST",
-                        body: {
-                            repo_url: repoUrl,
-                            branch,
-                        },
-                    },
-                );
+                const res = await fetchApi<ApiReqParams, APIResponseObject>(`/api/admin/update-wg-ui`, {
+                    method: "POST",
+                    body: { repo_url: repoUrl, branch },
+                });
 
                 setup.refresh();
-
                 return res;
             }}
         >
             {needs_repo_url || !setup_status?.is_dev ? (
-                <Stack className="gap-2.5">
+                <Stack className="w-full gap-5 sm:grid sm:grid-cols-[2fr_1fr] sm:gap-3 items-stretch">
                     {needs_repo_url ? (
                         <Input<"repo_url">
-                            label="Repository URL"
+                            name="repo_url"
+                            title="Repository URL"
                             placeholder={SiteData["RepoURL"]}
                             defaultValue={repoUrl}
-                            onChange={(e) => {
-                                setRepoUrl(e.target.value);
-                            }}
+                            showLabel
+                            onChange={(e) => setRepoUrl(e.target.value)}
                         />
                     ) : null}
                     {!setup_status?.is_dev ? (
                         <Input<"branch">
-                            label="Branch"
+                            name="branch"
+                            title="Branch"
                             placeholder="main"
                             defaultValue={branch}
-                            onChange={(e) => {
-                                setBranch(e.target.value);
-                            }}
-                            title="Repo Branch"
                             showLabel
+                            onChange={(e) => setBranch(e.target.value)}
                         />
                     ) : null}
                 </Stack>
             ) : null}
-        </SetupActionCard>
+        </SetupActionRow>
     );
 }
diff --git a/src/pages/admin/setup/(sections)/firewall-section.tsx b/src/pages/admin/setup/(sections)/firewall-section.tsx
index af75d09..3ce0761 100644
--- a/src/pages/admin/setup/(sections)/firewall-section.tsx
+++ b/src/pages/admin/setup/(sections)/firewall-section.tsx
@@ -1,119 +1,94 @@
-import AdminCard from "@/src/components/general/admin-card";
+import { RefreshCw, ShieldCheck } from "lucide-react";
 import Button from "@/src/components/twui/layout/Button";
-import H3 from "@/src/components/twui/layout/H3";
-import P from "@/src/components/twui/layout/P";
-import Row from "@/src/components/twui/layout/Row";
-import Span from "@/src/components/twui/layout/Span";
+import LoadingBlock from "@/src/components/twui/elements/LoadingBlock";
 import Stack from "@/src/components/twui/layout/Stack";
-import Tag from "@/src/components/twui/elements/Tag";
-import { RefreshCw, Shield, TriangleAlert } from "lucide-react";
+import Panel from "@/src/components/general/panel";
+import StatusDot from "@/src/components/general/status-dot";
+import InlineAlert from "@/src/components/general/inline-alert";
+import EmptyState from "@/src/components/general/empty-state";
 import useFirewallStatus from "../(hooks)/use-firewall-status";
 import FirewallRuleRow from "../(partials)/firewall-rule-row";
 
 const MANAGER_LABEL: Record<string, string> = {
-    firewalld: `firewalld (active)`,
-    ufw: `ufw (active)`,
-    none: `none detected`,
+    firewalld: "firewalld active",
+    ufw: "ufw active",
+    none: "No manager detected",
 };
 
 export default function FirewallSection() {
     const { firewall_status, refresh, loading, error } = useFirewallStatus();
 
-    if (!firewall_status) {
-        return (
-            <AdminCard className="w-full p-5 flex flex-col gap-4">
-                <Row className="gap-3 items-start">
-                    <Span className="p-2.5 rounded-lg bg-primary/10 dark:bg-primary-dark/10 text-primary dark:text-primary-dark shrink-0">
-                        <Shield size={19} />
-                    </Span>
-                    <Stack className="gap-1 min-w-0">
-                        <H3 className="text-[14px] font-semibold mb-0!">
-                            Firewall
-                        </H3>
-                        <P
-                            noMargin
-                            className="text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45"
-                        >
-                            {error ||
-                                `Checking firewall status on this host ...`}
-                        </P>
-                    </Stack>
-                </Row>
-            </AdminCard>
-        );
-    }
-
-    const { manager, rules, hosts_found } = firewall_status;
+    const manager = firewall_status?.manager;
 
     return (
-        <AdminCard className="w-full p-5 flex flex-col gap-4">
-            <Row className="gap-3 items-start">
-                <Span className="p-2.5 rounded-lg bg-primary/10 dark:bg-primary-dark/10 text-primary dark:text-primary-dark shrink-0">
-                    <Shield size={19} />
-                </Span>
-                <Stack className="gap-1 min-w-0 flex-1">
-                    <Row className="gap-2 items-center flex-wrap">
-                        <H3 className="text-[14px] font-semibold mb-0!">
-                            Firewall
-                        </H3>
-                        <Tag
-                            variant="outlined"
-                            color={manager == "none" ? "warning" : "success"}
-                            className="shrink-0"
-                        >
-                            {MANAGER_LABEL[manager] || manager}
-                        </Tag>
-                    </Row>
-                    <P
-                        noMargin
-                        className="text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45"
-                    >
-                        Host setups automatically allow their wireguard subnet
-                        and listen port here. Rules that are no longer needed
-                        (bootstrap or stale) are listed with removal commands.
-                    </P>
-                </Stack>
-                <Button
-                    title="Refresh"
-                    variant="outlined"
-                    loading={loading}
-                    beforeIcon={<RefreshCw size={14} />}
-                    onClick={refresh}
-                >
-                    Refresh
-                </Button>
-            </Row>
-
-            {manager == "none" ? (
-                <Row className="gap-2 items-center bg-warning/5 rounded-lg px-3 py-2.5 text-warning">
-                    <TriangleAlert size={15} className="shrink-0" />
-                    <Span className="text-[12.5px]">
-                        No active high-level firewall manager detected
-                        (firewalld/ufw). If you use iptables/nftables directly,
-                        allow each host subnet and its wireguard listen port
-                        manually.
-                    </Span>
-                </Row>
-            ) : null}
-
-            {rules.length ? (
-                <Stack className="w-full gap-2 items-stretch">
-                    {rules.map((rule, index) => (
-                        <FirewallRuleRow
-                            key={rule.id || `${manager}-${index}`}
-                            rule={rule}
+        <Panel
+            flush
+            title="Rules"
+            description="Host setups allow their subnet and listen port automatically."
+            actions={
+                <>
+                    {manager ? (
+                        <StatusDot
+                            tone={manager == "none" ? "warning" : "success"}
+                            label={MANAGER_LABEL[manager] || manager}
                         />
-                    ))}
-                </Stack>
+                    ) : null}
+                    <Button
+                        title="Refresh firewall status"
+                        type="button"
+                        variant="outlined"
+                        color="gray"
+                        size="small"
+                        loading={loading}
+                        onClick={refresh}
+                    >
+                        <RefreshCw size={14} />
+                        Refresh
+                    </Button>
+                </>
+            }
+        >
+            {!firewall_status ? (
+                error ? (
+                    <Stack className="p-4 items-stretch">
+                        <InlineAlert tone="error" msg={error} />
+                    </Stack>
+                ) : (
+                    <Stack className="p-4 gap-2 items-stretch" aria-busy>
+                        <LoadingBlock className="h-10" />
+                        <LoadingBlock className="h-10" />
+                    </Stack>
+                )
             ) : (
-                <Stack className="w-full items-start gap-1 rounded-lg bg-background-light dark:bg-[#0e0e10] border border-slate-200 dark:border-white/10 p-3">
-                    <Span className="text-[12.5px] text-foreground-light/60 dark:text-foreground-dark/60">
-                        {hosts_found
-                            ? `No wg-ui related firewall rules found.`
-                            : `No hosts created yet — creating a host automatically allows its subnet (e.g. 10.5.0.0/24) and its wireguard listen port (e.g. 51821/udp) here.`}
-                    </Span>
-                </Stack>
+                <>
+                    {manager == "none" ? (
+                        <Stack className="p-4 pb-0 items-stretch">
+                            <InlineAlert
+                                tone="warning"
+                                msg="No firewalld or ufw detected. If you manage iptables/nftables directly, allow each host's subnet and listen port yourself."
+                            />
+                        </Stack>
+                    ) : null}
+                    {firewall_status.rules.length ? (
+                        <Stack className="w-full gap-0 items-stretch">
+                            {firewall_status.rules.map((rule, index) => (
+                                <FirewallRuleRow key={rule.id || `${manager}-${index}`} rule={rule} />
+                            ))}
+                        </Stack>
+                    ) : (
+                        <EmptyState
+                            className="py-8"
+                            icon={<ShieldCheck size={18} />}
+                            title={firewall_status.hosts_found ? "No wg-ui firewall rules" : "No hosts yet"}
+                            description={
+                                firewall_status.hosts_found
+                                    ? undefined
+                                    : "Creating a host allows its subnet (e.g. 10.5.0.0/24) and listen port (e.g. 51821/udp) here."
+                            }
+                        />
+                    )}
+                </>
             )}
-        </AdminCard>
+        </Panel>
     );
-}
\ No newline at end of file
+}
diff --git a/src/pages/admin/setup/(sections)/setup-actions-section.tsx b/src/pages/admin/setup/(sections)/setup-actions-section.tsx
index b0ea773..96f66ac 100644
--- a/src/pages/admin/setup/(sections)/setup-actions-section.tsx
+++ b/src/pages/admin/setup/(sections)/setup-actions-section.tsx
@@ -1,12 +1,11 @@
+import { RotateCcw, Wrench } from "lucide-react";
 import fetchApi from "@/src/components/twui/utils/fetch/fetchApi";
-import Row from "@/src/components/twui/layout/Row";
-import Span from "@/src/components/twui/layout/Span";
-import type useSystemSetupStatus from "../(hooks)/use-system-setup-status";
-import SetupActionCard from "../(partials)/setup-action-card";
-import SetupUpdateWgUiAction from "../(partials)/setup-update-wg-ui-action";
+import Panel from "@/src/components/general/panel";
 import type { ApiReqParams } from "@/src/types";
 import type { APIResponseObject } from "@moduletrace/bunext/types";
-import { RotateCcw, TriangleAlert, Wrench } from "lucide-react";
+import type useSystemSetupStatus from "../(hooks)/use-system-setup-status";
+import SetupActionRow from "../(partials)/setup-action-row";
+import SetupUpdateWgUiAction from "../(partials)/setup-update-wg-ui-action";
 
 type Props = {
     setup: ReturnType<typeof useSystemSetupStatus>;
@@ -25,41 +24,21 @@ export default function SetupActionsSection({ setup }: Props) {
         .filter((tool) => WG_TOOL_COMMANDS.includes(tool.command))
         .every((tool) => tool.installed);
 
-    const show_restart =
-        !setup_status.is_dev && setup_status.init_system !== "unknown";
+    const show_restart = !setup_status.is_dev && setup_status.init_system !== "unknown";
 
     return (
-        <>
-            {!setup_status.is_root ? (
-                <Row className="gap-2 items-center bg-warning/5 rounded-lg px-3 py-2.5 text-warning">
-                    <TriangleAlert size={16} className="shrink-0" />
-                    <Span className="text-[12.5px]">
-                        The server is not running as root — installs and
-                        tunnel management may fail. Run wg-ui as root for full
-                        functionality.
-                    </Span>
-                </Row>
-            ) : null}
-
-            <SetupActionCard
+        <Panel flush>
+            <SetupActionRow
                 title="WireGuard tools"
-                description="Installs or updates the WireGuard tools (wg, wg-quick, iproute2) using your distro's package manager. Safe to re-run — the installer is idempotent."
-                icon={<Wrench size={19} />}
-                button_title={
-                    have_wg_tools
-                        ? "Update WireGuard tools"
-                        : "Install WireGuard tools"
-                }
+                description="Installs or updates wg, wg-quick and iproute2 with your distro's package manager. Safe to re-run."
+                icon={<Wrench size={15} />}
+                button_title={have_wg_tools ? "Update tools" : "Install tools"}
                 on_run={async () => {
                     const res = await fetchApi<ApiReqParams, APIResponseObject>(
                         `/api/admin/setup-wireguard-tools`,
-                        {
-                            method: "POST",
-                        },
+                        { method: "POST" },
                     );
-
                     setup.refresh();
-
                     return res;
                 }}
             />
@@ -67,25 +46,27 @@ export default function SetupActionsSection({ setup }: Props) {
             <SetupUpdateWgUiAction setup={setup} />
 
             {show_restart ? (
-                <SetupActionCard
+                <SetupActionRow
                     title="Restart service"
-                    description={`Restarts the ${setup_status.service_name} system service. Use this after manual changes — the server goes briefly offline.`}
-                    icon={<RotateCcw size={19} />}
-                    button_title="Restart service"
+                    description={`Restarts the ${setup_status.service_name} system service. Use after manual changes.`}
+                    icon={<RotateCcw size={15} />}
+                    button_title="Restart"
+                    confirm_params={{
+                        title: "Restart wg-ui?",
+                        message: `The ${setup_status.service_name} service restarts and this dashboard goes briefly offline.`,
+                        confirm_label: "Restart service",
+                        tone: "danger",
+                    }}
                     on_run={async () => {
-                        const res = await fetchApi<
-                            ApiReqParams,
-                            APIResponseObject
-                        >(`/api/admin/restart-wg-ui-service`, {
-                            method: "POST",
-                        });
-
+                        const res = await fetchApi<ApiReqParams, APIResponseObject>(
+                            `/api/admin/restart-wg-ui-service`,
+                            { method: "POST" },
+                        );
                         setup.refresh();
-
                         return res;
                     }}
                 />
             ) : null}
-        </>
+        </Panel>
     );
-}
\ No newline at end of file
+}
diff --git a/src/pages/admin/setup/(sections)/setup-page-frame.tsx b/src/pages/admin/setup/(sections)/setup-page-frame.tsx
new file mode 100644
index 0000000..b1bcf82
--- /dev/null
+++ b/src/pages/admin/setup/(sections)/setup-page-frame.tsx
@@ -0,0 +1,36 @@
+import type { PropsWithChildren } from "react";
+import PageHeader from "@/src/components/general/page-header";
+import PageBody from "@/src/components/general/page-body";
+import SubNav from "@/src/components/general/sub-nav";
+import InlineAlert from "@/src/components/general/inline-alert";
+import { SetupNav } from "../(data)/setup-nav-dict";
+
+type Props = PropsWithChildren & {
+    title: string;
+    description: string;
+    /** `false` shows the not-root warning */
+    is_root?: boolean;
+};
+
+/** Header, sub-navigation and body shared by the three setup subpages. */
+export default function SetupPageFrame({ title, description, is_root, children }: Props) {
+    return (
+        <>
+            <PageHeader
+                title={title}
+                description={description}
+                back={{ href: "/admin", title: "Dashboard" }}
+                nav={<SubNav label="Setup sections" items={SetupNav} />}
+            />
+            <PageBody>
+                {is_root === false ? (
+                    <InlineAlert
+                        tone="warning"
+                        msg="wg-ui isn't running as root. Installs and tunnel management may fail."
+                    />
+                ) : null}
+                {children}
+            </PageBody>
+        </>
+    );
+}
diff --git a/src/pages/admin/setup/(sections)/system-status-section.tsx b/src/pages/admin/setup/(sections)/system-status-section.tsx
index d8a79f2..47389fd 100644
--- a/src/pages/admin/setup/(sections)/system-status-section.tsx
+++ b/src/pages/admin/setup/(sections)/system-status-section.tsx
@@ -1,18 +1,13 @@
-import AdminCard from "@/src/components/general/admin-card";
+import { RefreshCw, ServerCrash } from "lucide-react";
 import Button from "@/src/components/twui/layout/Button";
-import Divider from "@/src/components/twui/layout/Divider";
-import H3 from "@/src/components/twui/layout/H3";
-import P from "@/src/components/twui/layout/P";
-import Row from "@/src/components/twui/layout/Row";
-import Span from "@/src/components/twui/layout/Span";
 import Stack from "@/src/components/twui/layout/Stack";
-import EmptyContent from "@/src/components/twui/elements/EmptyContent";
+import Panel from "@/src/components/general/panel";
+import KeyValueList from "@/src/components/general/key-value-list";
+import EmptyState from "@/src/components/general/empty-state";
 import type useSystemSetupStatus from "../(hooks)/use-system-setup-status";
-import SetupCheckStatusItem from "../(partials)/setup-check-status-item";
-import SetupStatCell, {
-    type SetupStatCellTone,
-} from "../(partials)/setup-stat-cell";
-import { RefreshCw } from "lucide-react";
+import SetupCheckGroup from "../(partials)/setup-check-group";
+import buildSetupOverview from "../(functions)/build-setup-overview";
+import buildSetupRuntimeChecks from "../(functions)/build-setup-runtime-checks";
 
 type Props = {
     setup: ReturnType<typeof useSystemSetupStatus>;
@@ -22,173 +17,50 @@ export default function SystemStatusSection({ setup }: Props) {
     const setup_status = setup.setup_status;
 
     if (!setup_status) {
-        return <EmptyContent title="No system status available" />;
+        return (
+            <Panel title="Environment">
+                <EmptyState icon={<ServerCrash size={18} />} title="No system status available" />
+            </Panel>
+        );
     }
 
-    const service_label =
-        setup_status.service_active === null
-            ? "Not managed"
-            : setup_status.service_active
-              ? "Active"
-              : "Inactive";
+    const overview = buildSetupOverview({ setup_status });
+    const half = Math.ceil(overview.length / 2);
 
-    const service_tone: SetupStatCellTone =
-        setup_status.service_active === null
-            ? "muted"
-            : setup_status.service_active
-              ? "success"
-              : "error";
-
-    const overview_items: {
-        label: string;
-        value: string;
-        tone?: SetupStatCellTone;
-    }[] = [
-        {
-            label: "Environment",
-            value: setup_status.environment,
-            tone: setup_status.is_dev ? "warning" : "success",
-        },
-        {
-            label: "Running as root",
-            value: setup_status.is_root ? "Yes" : "No",
-            tone: setup_status.is_root ? "success" : "error",
-        },
-        {
-            label: "Distro",
-            value: setup_status.distro_pretty_name || setup_status.distro,
-        },
-        {
-            label: "Init system",
-            value: setup_status.init_system,
-        },
-        {
-            label: "Install directory",
-            value: setup_status.install_dir,
-        },
-        {
-            label: "App version",
-            value: setup_status.app_version || "—",
-        },
-        {
-            label: "Repository",
-            value: setup_status.repo_url || "—",
-        },
-        {
-            label: "Service",
-            value: setup_status.service_name,
-        },
-        {
-            label: "Service status",
-            value: service_label,
-            tone: service_tone,
-        },
-    ];
-
-    const runtime_items: {
-        key: string;
-        title: string;
-        subtitle: string;
-        ok: boolean;
-        ok_label: string;
-    }[] = [
-        {
-            key: "kernel-module",
-            title: "WireGuard kernel module",
-            subtitle: "/sys/module/wireguard",
-            ok: setup_status.wg_module_loaded,
-            ok_label: "Loaded",
-        },
-        {
-            key: "wg-quick-helper",
-            title: "wg-quick manage helper",
-            subtitle: `/var/lib/wgui/scripts/wg-quick-manage.sh`,
-            ok: setup_status.wg_quick_helper_installed,
-            ok_label: "Installed",
-        },
-        ...setup_status.lib_dirs.map((dir) => ({
-            key: dir.path,
-            title: `Runtime directory · ${dir.label}`,
-            subtitle: dir.path,
-            ok: dir.exists,
-            ok_label: "Exists",
-        })),
-    ];
+    const tool_checks = setup_status.tools.map((tool) => ({
+        key: tool.command,
+        title: tool.name,
+        subtitle: tool.version ? `${tool.command} · ${tool.version}` : tool.command,
+        ok: tool.installed,
+    }));
 
     return (
-        <AdminCard className="w-full p-5 flex flex-col gap-4">
-            <Row className="justify-between items-start gap-3">
-                <Stack className="gap-1">
-                    <H3 className="text-[14px] font-semibold mb-0!">
-                        System status
-                    </H3>
-                    <P
-                        noMargin
-                        className="text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45"
-                    >
-                        The web server's environment and required tools
-                    </P>
-                </Stack>
+        <Panel
+            flush
+            title="Environment"
+            actions={
                 <Button
                     title="Refresh system status"
-                    size="small"
-                    variant="ghost"
+                    type="button"
+                    variant="outlined"
                     color="gray"
-                    beforeIcon={<RefreshCw size={15} />}
+                    size="small"
                     loading={setup.loading}
                     onClick={setup.refresh}
                 >
+                    <RefreshCw size={14} />
                     Refresh
                 </Button>
-            </Row>
-
-            <Divider className="w-full" />
-
-            <div className="grid grid-cols-2 lg:grid-cols-4 gap-x-4 gap-y-5 min-w-0">
-                {overview_items.map((item) => (
-                    <SetupStatCell
-                        key={item.label}
-                        label={item.label}
-                        value={item.value}
-                        tone={item.tone}
-                    />
-                ))}
-            </div>
-
-            <Divider className="w-full" />
-
-            <Span className="text-[11.5px] font-semibold uppercase tracking-[0.08em] text-foreground-light/40 dark:text-foreground-dark/40">
-                WireGuard tools
-            </Span>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-                {setup_status.tools.map((tool) => (
-                    <SetupCheckStatusItem
-                        key={tool.command}
-                        title={tool.name}
-                        subtitle={
-                            tool.version
-                                ? `${tool.command} · ${tool.version}`
-                                : tool.command
-                        }
-                        ok={tool.installed}
-                    />
-                ))}
-            </div>
-
-            <Span className="text-[11.5px] font-semibold uppercase tracking-[0.08em] text-foreground-light/40 dark:text-foreground-dark/40">
-                Runtime
-            </Span>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                {runtime_items.map((item) => (
-                    <SetupCheckStatusItem
-                        key={item.key}
-                        title={item.title}
-                        subtitle={item.subtitle}
-                        ok={item.ok}
-                        ok_label={item.ok_label}
-                    />
-                ))}
-            </div>
-        </AdminCard>
+            }
+        >
+            <Stack className="w-full gap-0 md:grid md:grid-cols-2 md:gap-8 px-4 py-2 items-stretch">
+                <KeyValueList items={overview.slice(0, half)} />
+                <KeyValueList items={overview.slice(half)} />
+            </Stack>
+            <Stack className="w-full gap-0 lg:grid lg:grid-cols-2 border-t border-line items-stretch">
+                <SetupCheckGroup title="WireGuard tools" items={tool_checks} />
+                <SetupCheckGroup title="Runtime" items={buildSetupRuntimeChecks({ setup_status })} />
+            </Stack>
+        </Panel>
     );
 }
diff --git a/src/pages/admin/setup/firewall/index.server.ts b/src/pages/admin/setup/firewall/index.server.ts
new file mode 100644
index 0000000..30d721e
--- /dev/null
+++ b/src/pages/admin/setup/firewall/index.server.ts
@@ -0,0 +1,16 @@
+import type { PagePropsType } from "@/src/types";
+import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+import guardSetupPage from "../(functions)/guard-setup-page";
+
+/** Firewall status is fetched client-side by `useFirewallStatus`. */
+const server: BunextPageServerFn<PagePropsType> = async ({ req }) => {
+    const redirect = await guardSetupPage({ req });
+
+    if (redirect) {
+        return { redirect };
+    }
+
+    return { props: {} };
+};
+
+export default server;
diff --git a/src/pages/admin/setup/firewall/index.tsx b/src/pages/admin/setup/firewall/index.tsx
new file mode 100644
index 0000000..8c144c9
--- /dev/null
+++ b/src/pages/admin/setup/firewall/index.tsx
@@ -0,0 +1,20 @@
+import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
+import { SiteData } from "@/src/data/site-data";
+import SetupPageFrame from "../(sections)/setup-page-frame";
+import FirewallSection from "../(sections)/firewall-section";
+
+export default function SetupFirewallPage() {
+    return (
+        <SetupPageFrame
+            title="Firewall"
+            description="Rules wg-ui manages on this host, and stale ones you can remove."
+        >
+            <FirewallSection />
+        </SetupPageFrame>
+    );
+}
+
+export const meta: BunextPageModuleMeta = {
+    title: `Firewall | ${SiteData["SiteName"]}`,
+    description: `Firewall rules managed by wg-ui`,
+};
diff --git a/src/pages/admin/setup/index.server.ts b/src/pages/admin/setup/index.server.ts
index 5a66895..51af143 100644
--- a/src/pages/admin/setup/index.server.ts
+++ b/src/pages/admin/setup/index.server.ts
@@ -1,37 +1,14 @@
-import checkUserAccess from "@/src/functions/backend/auth/check-user-access";
-import userAuth from "@/src/functions/backend/auth/user-auth";
-import grabSystemSetupStatus from "@/src/functions/backend/setup/grab-system-setup-status";
 import type { PagePropsType } from "@/src/types";
 import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+import guardSetupPage from "./(functions)/guard-setup-page";
 
+/** `/admin/setup` has no content of its own; land on System status. */
 const server: BunextPageServerFn<PagePropsType> = async ({ req }) => {
-    const { user, user_types } = await userAuth({ req });
-
-    if (!user?.logged_in_status || !user.id) {
-        return {
-            redirect: {
-                destination: "/auth/login",
-                permanent: false,
-            },
-        };
-    }
-
-    const is_super_admin = checkUserAccess({ user_types });
-
-    if (!is_super_admin.success) {
-        return {
-            redirect: {
-                destination: "/admin",
-                permanent: false,
-            },
-        };
-    }
+    const redirect = await guardSetupPage({ req });
 
     return {
-        props: {
-            setup_status: grabSystemSetupStatus(),
-        },
+        redirect: redirect || { destination: "/admin/setup/status", permanent: false },
     };
 };
 
-export default server;
\ No newline at end of file
+export default server;
diff --git a/src/pages/admin/setup/index.tsx b/src/pages/admin/setup/index.tsx
index a48760c..dc23050 100644
--- a/src/pages/admin/setup/index.tsx
+++ b/src/pages/admin/setup/index.tsx
@@ -1,39 +1,4 @@
-import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
-import AdminHero from "@/src/components/general/admin-hero";
-import { SiteData } from "@/src/data/site-data";
-import Divider from "@/src/components/twui/layout/Divider";
-import Stack from "@/src/components/twui/layout/Stack";
-import useSystemSetupStatus from "./(hooks)/use-system-setup-status";
-import SystemStatusSection from "./(sections)/system-status-section";
-import SetupActionsSection from "./(sections)/setup-actions-section";
-import FirewallSection from "./(sections)/firewall-section";
-import { useContext } from "react";
-import { AppContext } from "@/src/pages/__root";
-
-export default function AdminWireguardSetupPage() {
-    const { pageProps } = useContext(AppContext);
-
-    const setup = useSystemSetupStatus({
-        setup_status: pageProps?.setup_status,
-    });
-
-    return (
-        <>
-            <AdminHero
-                title="Setup"
-                description="Setup wireguard and wg-ui. Check if dependencies are installed. Update wg-ui and related packages. Etc."
-            />
-            <Divider className="mb-6" />
-            <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
-                <SystemStatusSection setup={setup} />
-                <SetupActionsSection setup={setup} />
-                <FirewallSection />
-            </Stack>
-        </>
-    );
+/** Always redirected by `index.server.ts`. */
+export default function SetupIndexPage() {
+    return null;
 }
-
-export const meta: BunextPageModuleMeta = {
-    title: `Admin Wireguard Setup | ${SiteData["SiteName"]}`,
-    description: `Setup wireguard and wg-ui. Check if dependencies are installed. Update wg-ui and related packages. Etc.`,
-};
\ No newline at end of file
diff --git a/src/pages/admin/setup/maintenance/index.server.ts b/src/pages/admin/setup/maintenance/index.server.ts
new file mode 100644
index 0000000..9e24498
--- /dev/null
+++ b/src/pages/admin/setup/maintenance/index.server.ts
@@ -0,0 +1,20 @@
+import grabSystemSetupStatus from "@/src/functions/backend/setup/grab-system-setup-status";
+import type { PagePropsType } from "@/src/types";
+import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+import guardSetupPage from "../(functions)/guard-setup-page";
+
+const server: BunextPageServerFn<PagePropsType> = async ({ req }) => {
+    const redirect = await guardSetupPage({ req });
+
+    if (redirect) {
+        return { redirect };
+    }
+
+    return {
+        props: {
+            setup_status: grabSystemSetupStatus(),
+        },
+    };
+};
+
+export default server;
diff --git a/src/pages/admin/setup/maintenance/index.tsx b/src/pages/admin/setup/maintenance/index.tsx
new file mode 100644
index 0000000..1359fe3
--- /dev/null
+++ b/src/pages/admin/setup/maintenance/index.tsx
@@ -0,0 +1,27 @@
+import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
+import { useContext } from "react";
+import { SiteData } from "@/src/data/site-data";
+import { AppContext } from "@/src/pages/__root";
+import useSystemSetupStatus from "../(hooks)/use-system-setup-status";
+import SetupPageFrame from "../(sections)/setup-page-frame";
+import SetupActionsSection from "../(sections)/setup-actions-section";
+
+export default function SetupMaintenancePage() {
+    const { pageProps } = useContext(AppContext);
+    const setup = useSystemSetupStatus({ setup_status: pageProps?.setup_status });
+
+    return (
+        <SetupPageFrame
+            title="Maintenance"
+            description="Install and update WireGuard tools and wg-ui, or restart the service."
+            is_root={setup.setup_status?.is_root}
+        >
+            <SetupActionsSection setup={setup} />
+        </SetupPageFrame>
+    );
+}
+
+export const meta: BunextPageModuleMeta = {
+    title: `Maintenance | ${SiteData["SiteName"]}`,
+    description: `Install, update and restart wg-ui`,
+};
diff --git a/src/pages/admin/setup/status/index.server.ts b/src/pages/admin/setup/status/index.server.ts
new file mode 100644
index 0000000..9e24498
--- /dev/null
+++ b/src/pages/admin/setup/status/index.server.ts
@@ -0,0 +1,20 @@
+import grabSystemSetupStatus from "@/src/functions/backend/setup/grab-system-setup-status";
+import type { PagePropsType } from "@/src/types";
+import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+import guardSetupPage from "../(functions)/guard-setup-page";
+
+const server: BunextPageServerFn<PagePropsType> = async ({ req }) => {
+    const redirect = await guardSetupPage({ req });
+
+    if (redirect) {
+        return { redirect };
+    }
+
+    return {
+        props: {
+            setup_status: grabSystemSetupStatus(),
+        },
+    };
+};
+
+export default server;
diff --git a/src/pages/admin/setup/status/index.tsx b/src/pages/admin/setup/status/index.tsx
new file mode 100644
index 0000000..a2cd721
--- /dev/null
+++ b/src/pages/admin/setup/status/index.tsx
@@ -0,0 +1,29 @@
+import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
+import { useContext } from "react";
+import { SiteData } from "@/src/data/site-data";
+import { AppContext } from "@/src/pages/__root";
+import useSystemSetupStatus from "../(hooks)/use-system-setup-status";
+import SetupPageFrame from "../(sections)/setup-page-frame";
+import SystemStatusSection from "../(sections)/system-status-section";
+
+export default function SetupStatusPage() {
+    const { pageProps } = useContext(AppContext);
+    const setup = useSystemSetupStatus({
+        setup_status: pageProps?.setup_status,
+    });
+
+    return (
+        <SetupPageFrame
+            title="System status"
+            description="The server's environment and the tools wg-ui depends on."
+            is_root={setup.setup_status?.is_root}
+        >
+            <SystemStatusSection setup={setup} />
+        </SetupPageFrame>
+    );
+}
+
+export const meta: BunextPageModuleMeta = {
+    title: `System status | ${SiteData["SiteName"]}`,
+    description: `Server environment and dependency checks`,
+};
diff --git a/src/pages/auth/index.tsx b/src/pages/auth/index.tsx
index 76f32bd..529cb03 100644
--- a/src/pages/auth/index.tsx
+++ b/src/pages/auth/index.tsx
@@ -1,31 +1,11 @@
 import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
-import Section from "@/src/components/twui/layout/Section";
-import Container from "@/src/components/twui/layout/Container";
-import Stack from "@/src/components/twui/layout/Stack";
-import H1 from "@/src/components/twui/layout/H1";
-import Span from "@/src/components/twui/layout/Span";
-import BlurredImageBG from "@/src/components/general/blured-image-bg";
 import { SiteData } from "@/src/data/site-data";
 
+/** Always redirected by `index.server.ts`. */
 export default function AuthPage() {
-    return (
-        <>
-            <Section className="hero-section">
-                <BlurredImageBG src="/images/children-school-1.webp" />
-                <Container className="relative z-10">
-                    <Stack className="w-full items-center max-w-3xl mx-auto gap-7">
-                        <Span className="htag">Admin Section</Span>
-                        <H1 className="text-center font-bold">
-                            Redirecting you to login ...
-                        </H1>
-                    </Stack>
-                </Container>
-            </Section>
-        </>
-    );
+    return null;
 }
 
 export const meta: BunextPageModuleMeta = {
-    title: `Admin Login | ${SiteData["SiteName"]}`,
-    description: `Admin section access. Redirecting to login.`,
+    title: `Sign in | ${SiteData["SiteName"]}`,
 };
diff --git a/src/pages/auth/login/(functions)/submit-login-form.ts b/src/pages/auth/login/(functions)/submit-login-form.ts
index fd8b760..fdc6028 100644
--- a/src/pages/auth/login/(functions)/submit-login-form.ts
+++ b/src/pages/auth/login/(functions)/submit-login-form.ts
@@ -28,10 +28,8 @@ export default async function submitLoginForm({
     } else {
         setStatus({
             error: true,
-            msg: res.msg || "Login Failed",
+            msg: res.msg || "Sign in failed. Check your credentials.",
         });
-        console.log("res", res);
-        console.log("form", form);
 
         setLoading(false);
     }
diff --git a/src/pages/auth/login/(partials)/login-form/index.tsx b/src/pages/auth/login/(partials)/login-form/index.tsx
index 5d681c3..e1247d3 100644
--- a/src/pages/auth/login/(partials)/login-form/index.tsx
+++ b/src/pages/auth/login/(partials)/login-form/index.tsx
@@ -1,6 +1,5 @@
 import Form from "@/src/components/twui/form/Form";
-import LoadingOverlay from "@/src/components/twui/elements/LoadingOverlay";
-import Tag from "@/src/components/twui/elements/Tag";
+import InlineAlert from "@/src/components/general/inline-alert";
 import useFormInit from "@/src/hooks/use-form-init";
 import { type LoginFormObject } from "@/src/types";
 import LoginFormEmailUsername from "./login-form-email-username";
@@ -10,22 +9,19 @@ import LoginFormAction from "./login-form-action";
 
 export default function LoginForm() {
     const init = useFormInit<LoginFormObject>();
-    const { loading, status } = init;
+    const { status } = init;
 
     return (
-        <>
-            <Form
-                className="w-full flex items-center justify-center relative gap-4"
-                onSubmit={() => {
-                    submitLoginForm(init);
-                }}
-            >
-                {status?.error && <Tag color="error">{status.msg}</Tag>}
-                {loading && <LoadingOverlay />}
-                <LoginFormEmailUsername {...init} />
-                <LoginFormPassword {...init} />
-                <LoginFormAction {...init} />
-            </Form>
-        </>
+        <Form
+            className="w-full items-stretch gap-5"
+            onSubmit={() => {
+                submitLoginForm(init);
+            }}
+        >
+            {status?.error ? <InlineAlert tone="error" msg={status.msg} /> : null}
+            <LoginFormEmailUsername {...init} />
+            <LoginFormPassword {...init} />
+            <LoginFormAction {...init} />
+        </Form>
     );
-}
\ No newline at end of file
+}
diff --git a/src/pages/auth/login/(partials)/login-form/login-form-action.tsx b/src/pages/auth/login/(partials)/login-form/login-form-action.tsx
index 1f9315e..9243dfe 100644
--- a/src/pages/auth/login/(partials)/login-form/login-form-action.tsx
+++ b/src/pages/auth/login/(partials)/login-form/login-form-action.tsx
@@ -1,16 +1,13 @@
-import Input from "@/src/components/twui/form/Input";
 import Button from "@/src/components/twui/layout/Button";
 import useFormInit from "@/src/hooks/use-form-init";
 import { type LoginFormObject } from "@/src/types";
 
-export default function LoginFormAction({}: ReturnType<
-    typeof useFormInit<LoginFormObject>
->) {
+export default function LoginFormAction({
+    loading,
+}: ReturnType<typeof useFormInit<LoginFormObject>>) {
     return (
-        <>
-            <Button title="Submit Login Form" type="submit" className="w-full">
-                Login
-            </Button>
-        </>
+        <Button title="Sign in" type="submit" className="w-full mt-1" loading={loading}>
+            Sign in
+        </Button>
     );
 }
diff --git a/src/pages/auth/login/(partials)/login-form/login-form-email-username.tsx b/src/pages/auth/login/(partials)/login-form/login-form-email-username.tsx
index f145662..40ad184 100644
--- a/src/pages/auth/login/(partials)/login-form/login-form-email-username.tsx
+++ b/src/pages/auth/login/(partials)/login-form/login-form-email-username.tsx
@@ -7,7 +7,10 @@ export default function LoginFormEmailUsername({
 }: ReturnType<typeof useFormInit<LoginFormObject>>) {
     return (
         <Input
-            placeholder="Email or Username"
+            name="username_or_email"
+            title="Email or username"
+            autoComplete="username"
+            autoFocus
             onChange={(e) => {
                 setForm((prev) => ({
                     ...prev,
diff --git a/src/pages/auth/login/(partials)/login-form/login-form-password.tsx b/src/pages/auth/login/(partials)/login-form/login-form-password.tsx
index fa3e6d1..15cf21d 100644
--- a/src/pages/auth/login/(partials)/login-form/login-form-password.tsx
+++ b/src/pages/auth/login/(partials)/login-form/login-form-password.tsx
@@ -7,8 +7,9 @@ export default function LoginFormPassword({
 }: ReturnType<typeof useFormInit<LoginFormObject>>) {
     return (
         <Input
+            name="password"
             type="password"
-            placeholder="Password"
+            title="Password"
             autoComplete="current-password"
             onChange={(e) => {
                 setForm((prev) => ({
@@ -20,4 +21,4 @@ export default function LoginFormPassword({
             required
         />
     );
-}
\ No newline at end of file
+}
diff --git a/src/pages/auth/login/(sections)/hero.tsx b/src/pages/auth/login/(sections)/hero.tsx
deleted file mode 100644
index a1af0c4..0000000
--- a/src/pages/auth/login/(sections)/hero.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import Section from "@/src/components/twui/layout/Section";
-import Container from "@/src/components/twui/layout/Container";
-import Stack from "@/src/components/twui/layout/Stack";
-import H1 from "@/src/components/twui/layout/H1";
-import Span from "@/src/components/twui/layout/Span";
-import LoginShell from "@/src/components/general/login-shell";
-
-export default function Hero() {
-    // return <LoginShell></LoginShell>;
-    return (
-        <Section className="">
-            <Container className="relative z-10">
-                <Stack className="w-full items-center max-w-3xl mx-auto gap-7">
-                    <Span className="htag">Welcome Back Admin</Span>
-                    <H1 className="text-center font-bold">
-                        Login to your account
-                    </H1>
-                </Stack>
-            </Container>
-        </Section>
-    );
-}
diff --git a/src/pages/auth/login/(sections)/login-form-section.tsx b/src/pages/auth/login/(sections)/login-form-section.tsx
index 2d12377..d023bd4 100644
--- a/src/pages/auth/login/(sections)/login-form-section.tsx
+++ b/src/pages/auth/login/(sections)/login-form-section.tsx
@@ -1,10 +1,14 @@
-import Stack from "@/src/components/twui/layout/Stack";
+import AuthHeading from "@/src/components/general/auth-heading";
 import LoginForm from "../(partials)/login-form";
 
 export default function LoginFormSection() {
     return (
-        <Stack className="w-full items-center max-w-3xl mx-auto gap-7">
+        <>
+            <AuthHeading
+                title="Sign in"
+                description="Manage your WireGuard hosts and clients."
+            />
             <LoginForm />
-        </Stack>
+        </>
     );
-}
\ No newline at end of file
+}
diff --git a/src/pages/auth/login/index.tsx b/src/pages/auth/login/index.tsx
index 38d3c70..8c614f0 100644
--- a/src/pages/auth/login/index.tsx
+++ b/src/pages/auth/login/index.tsx
@@ -1,11 +1,12 @@
-import Hero from "./(sections)/hero";
+import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
+import { SiteData } from "@/src/data/site-data";
 import LoginFormSection from "./(sections)/login-form-section";
 
 export default function LoginPage() {
-    return (
-        <>
-            {/* <Hero /> */}
-            <LoginFormSection />
-        </>
-    );
+    return <LoginFormSection />;
 }
+
+export const meta: BunextPageModuleMeta = {
+    title: `Sign in | ${SiteData["SiteName"]}`,
+    description: "Sign in to manage your WireGuard hosts and clients.",
+};
diff --git a/src/pages/auth/logout/index.tsx b/src/pages/auth/logout/index.tsx
index 1d185d4..436e1a7 100644
--- a/src/pages/auth/logout/index.tsx
+++ b/src/pages/auth/logout/index.tsx
@@ -1,29 +1,28 @@
 import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
 import Loading from "@/src/components/twui/elements/Loading";
-import Row from "@/src/components/twui/layout/Row";
-import Span from "@/src/components/twui/layout/Span";
+import Stack from "@/src/components/twui/layout/Stack";
+import MutedText from "@/src/components/general/muted-text";
 import { useEffect } from "react";
 import { SiteData } from "@/src/data/site-data";
-import Stack from "@/src/components/twui/layout/Stack";
 
 export default function LogoutPage() {
     useEffect(() => {
-        setTimeout(() => {
-            window.location.pathname = "/";
-        }, 2000);
+        // Cookies are cleared by `index.server.ts`
+        const timer = setTimeout(() => {
+            window.location.replace("/auth/login");
+        }, 600);
+
+        return () => clearTimeout(timer);
     }, []);
 
     return (
-        <Stack className="items-center">
-            <Row>
-                <Loading />
-                <Span>Logging out ...</Span>
-            </Row>
+        <Stack center className="gap-3 py-4" role="status">
+            <Loading size="small" />
+            <MutedText>Signing out…</MutedText>
         </Stack>
     );
 }
 
 export const meta: BunextPageModuleMeta = {
-    title: `Logging Out | ${SiteData["SiteName"]}`,
-    description: `You are being logged out and redirected to the homepage.`,
+    title: `Signing out | ${SiteData["SiteName"]}`,
 };
diff --git a/src/pages/auth/signup/index.tsx b/src/pages/auth/signup/index.tsx
index 9b5236e..600f486 100644
--- a/src/pages/auth/signup/index.tsx
+++ b/src/pages/auth/signup/index.tsx
@@ -1,19 +1,21 @@
 import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
-import Stack from "@/src/components/twui/layout/Stack";
 import UserForm from "@/src/components/general/user-form";
+import AuthHeading from "@/src/components/general/auth-heading";
 import { SiteData } from "@/src/data/site-data";
-import H1 from "@/src/components/twui/layout/H1";
 
-export default function LogoutPage() {
+export default function SignupPage() {
     return (
-        <Stack className="items-center gap-10">
-            <H1 className="text-center text-xl!">Create Admin User</H1>
+        <>
+            <AuthHeading
+                title="Create the admin account"
+                description="This first account is the super admin. You can add more users later."
+            />
             <UserForm is_first_user />
-        </Stack>
+        </>
     );
 }
 
 export const meta: BunextPageModuleMeta = {
-    title: `Create Super Admin Account | ${SiteData["SiteName"]}`,
-    description: `Create Super Admin Account`,
+    title: `Create admin account | ${SiteData["SiteName"]}`,
+    description: `Create the super admin account`,
 };
diff --git a/src/pages/index.server.tsx b/src/pages/index.server.tsx
index 3c57ae8..4c9e1da 100644
--- a/src/pages/index.server.tsx
+++ b/src/pages/index.server.tsx
@@ -1,9 +1,13 @@
 import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+import userAuth from "../functions/backend/auth/user-auth";
+
+export const server: BunextPageServerFn = async ({ req }) => {
+    const { user } = await userAuth({ req });
 
-export const server: BunextPageServerFn = async (ctx) => {
     return {
         redirect: {
-            destination: `/auth/login`,
+            destination: user?.logged_in_status ? "/admin" : "/auth/login",
+            permanent: false,
         },
     };
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 3416678..f647e83 100755
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,16 +1,12 @@
-import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
-import Hero from "./(sections)/hero";
-import { SiteData } from "../data/site-data";
-
-export default function Home() {
-    return (
-        <>
-            <Hero />
-        </>
-    );
-}
-
-export const meta: BunextPageModuleMeta = {
-    title: `Homepage | ${SiteData["SiteName"]}`,
-    description: "Creating Smiles.",
-};
+import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
+import { SiteData } from "../data/site-data";
+
+/** Always redirected by `index.server.tsx`. */
+export default function Home() {
+    return null;
+}
+
+export const meta: BunextPageModuleMeta = {
+    title: SiteData["SiteName"],
+    description: SiteData["SiteDescription"],
+};
diff --git a/src/pages/privacy/(sections)/privacy-section.tsx b/src/pages/privacy/(sections)/privacy-section.tsx
deleted file mode 100644
index ce67941..0000000
--- a/src/pages/privacy/(sections)/privacy-section.tsx
+++ /dev/null
@@ -1,245 +0,0 @@
-import Section from "@/src/components/twui/layout/Section";
-import Container from "@/src/components/twui/layout/Container";
-import Stack from "@/src/components/twui/layout/Stack";
-import H2 from "@/src/components/twui/layout/H2";
-import { SiteData } from "@/src/data/site-data";
-
-export default function PrivacySection() {
-    const siteName = SiteData["SiteName"];
-    const siteUrl = SiteData["SiteURL"];
-
-    return (
-        <Section>
-            <Container>
-                <Stack className="w-full max-w-4xl mx-auto gap-6 [&_p]:leading-relaxed [&_p]:text-lg">
-                    <p>
-                        At {siteName}, accessible from {siteUrl}, one of our
-                        main priorities is the privacy of our visitors. This
-                        Privacy Policy document contains types of information
-                        that is collected and recorded by {siteName} and how we
-                        use it.
-                    </p>
-
-                    <p>
-                        If you have additional questions or require more
-                        information about our Privacy Policy, do not hesitate to
-                        contact us.
-                    </p>
-
-                    <p>
-                        This Privacy Policy applies only to our online
-                        activities and is valid for visitors to our website with
-                        regards to the information that they shared and/or
-                        collect in {siteName}. This policy is not applicable to
-                        any information collected offline or via channels other
-                        than this website.
-                    </p>
-
-                    <H2>Consent</H2>
-                    <p>
-                        By using our website, you hereby consent to our Privacy
-                        Policy and agree to its terms.
-                    </p>
-
-                    <H2>Information we collect</H2>
-                    <p>
-                        The personal information that you are asked to provide,
-                        and the reasons why you are asked to provide it, will be
-                        made clear to you at the point we ask you to provide
-                        your personal information.
-                    </p>
-                    <p>
-                        If you contact us directly, we may receive additional
-                        information about you such as your name, email address,
-                        phone number, the contents of the message and/or
-                        attachments you may send us, and any other information
-                        you may choose to provide.
-                    </p>
-                    <p>
-                        When you register for an Account, we may ask for your
-                        contact information, including items such as name,
-                        company name, address, email address, and telephone
-                        number.
-                    </p>
-
-                    <H2>How we use your information</H2>
-                    <p>
-                        We use the information we collect in various ways,
-                        including to:
-                    </p>
-                    <ul className="list-disc pl-6 flex flex-col gap-2">
-                        <li>Provide, operate, and maintain our website</li>
-                        <li>Improve, personalize, and expand our website</li>
-                        <li>Understand and analyze how you use our website</li>
-                        <li>
-                            Develop new products, services, features, and
-                            functionality
-                        </li>
-                        <li>
-                            Communicate with you, either directly or through one
-                            of our partners, including for customer service, to
-                            provide you with updates and other information
-                            relating to the website, and for marketing and
-                            promotional purposes
-                        </li>
-                        <li>Send you emails</li>
-                        <li>Find and prevent fraud</li>
-                    </ul>
-
-                    <H2>Log Files</H2>
-                    <p>
-                        {siteName} follows a standard procedure of using log
-                        files. These files log visitors when they visit
-                        websites. All hosting companies do this and a part of
-                        hosting services' analytics. The information collected
-                        by log files include internet protocol (IP) addresses,
-                        browser type, Internet Service Provider (ISP), date and
-                        time stamp, referring/exit pages, and possibly the
-                        number of clicks. These are not linked to any
-                        information that is personally identifiable. The purpose
-                        of the information is for analyzing trends,
-                        administering the site, tracking users' movement on the
-                        website, and gathering demographic information.
-                    </p>
-
-                    <H2>Cookies and Web Beacons</H2>
-                    <p>
-                        Like any other website, {siteName} uses "cookies". These
-                        cookies are used to store information including
-                        visitors' preferences, and the pages on the website that
-                        the visitor accessed or visited. The information is used
-                        to optimize the users' experience by customizing our web
-                        page content based on visitors' browser type and/or
-                        other information.
-                    </p>
-
-                    <H2>Advertising Partners Privacy Policies</H2>
-                    <p>
-                        You may consult this list to find the Privacy Policy for
-                        each of the advertising partners of {siteName}.
-                    </p>
-                    <p>
-                        Third-party ad servers or ad networks uses technologies
-                        like cookies, JavaScript, or Web Beacons that are used
-                        in their respective advertisements and links that appear
-                        on {siteName}, which are sent directly to users'
-                        browser. They automatically receive your IP address when
-                        this occurs. These technologies are used to measure the
-                        effectiveness of their advertising campaigns and/or to
-                        personalize the advertising content that you see on
-                        websites that you visit.
-                    </p>
-                    <p>
-                        Note that {siteName} has no access to or control over
-                        these cookies that are used by third-party advertisers.
-                    </p>
-
-                    <H2>Third Party Privacy Policies</H2>
-                    <p>
-                        {siteName}'s Privacy Policy does not apply to other
-                        advertisers or websites. Thus, we are advising you to
-                        consult the respective Privacy Policies of these
-                        third-party ad servers for more detailed information. It
-                        may include their practices and instructions about how
-                        to opt-out of certain options.
-                    </p>
-                    <p>
-                        You can choose to disable cookies through your
-                        individual browser options. To know more detailed
-                        information about cookie management with specific web
-                        browsers, it can be found at the browsers' respective
-                        websites.
-                    </p>
-
-                    <H2>
-                        CCPA Privacy Rights (Do Not Sell My Personal
-                        Information)
-                    </H2>
-                    <p>
-                        Under the CCPA, among other rights, California consumers
-                        have the right to:
-                    </p>
-                    <p>
-                        Request that a business that collects a consumer's
-                        personal data disclose the categories and specific
-                        pieces of personal data that a business has collected
-                        about consumers.
-                    </p>
-                    <p>
-                        Request that a business delete any personal data about
-                        the consumer that a business has collected.
-                    </p>
-                    <p>
-                        Request that a business that sells a consumer's personal
-                        data, not sell the consumer's personal data.
-                    </p>
-                    <p>
-                        If you make a request, we have one month to respond to
-                        you. If you would like to exercise any of these rights,
-                        please contact us.
-                    </p>
-
-                    <H2>GDPR Data Protection Rights</H2>
-                    <p>
-                        We would like to make sure you are fully aware of all of
-                        your data protection rights. Every user is entitled to
-                        the following:
-                    </p>
-                    <p>
-                        The right to access – You have the right to request
-                        copies of your personal data. We may charge you a small
-                        fee for this service.
-                    </p>
-                    <p>
-                        The right to rectification – You have the right to
-                        request that we correct any information you believe is
-                        inaccurate. You also have the right to request that we
-                        complete the information you believe is incomplete.
-                    </p>
-                    <p>
-                        The right to erasure – You have the right to request
-                        that we erase your personal data, under certain
-                        conditions.
-                    </p>
-                    <p>
-                        The right to restrict processing – You have the right to
-                        request that we restrict the processing of your personal
-                        data, under certain conditions.
-                    </p>
-                    <p>
-                        The right to object to processing – You have the right
-                        to object to our processing of your personal data, under
-                        certain conditions.
-                    </p>
-                    <p>
-                        The right to data portability – You have the right to
-                        request that we transfer the data that we have collected
-                        to another organization, or directly to you, under
-                        certain conditions.
-                    </p>
-                    <p>
-                        If you make a request, we have one month to respond to
-                        you. If you would like to exercise any of these rights,
-                        please contact us.
-                    </p>
-
-                    <H2>Children's Information</H2>
-                    <p>
-                        Another part of our priority is adding protection for
-                        children while using the internet. We encourage parents
-                        and guardians to observe, participate in, and/or monitor
-                        and guide their online activity.
-                    </p>
-                    <p>
-                        {siteName} does not knowingly collect any Personal
-                        Identifiable Information from children under the age of
-                        13. If you think that your child provided this kind of
-                        information on our website, we strongly encourage you to
-                        contact us immediately and we will do our best efforts
-                        to promptly remove such information from our records.
-                    </p>
-                </Stack>
-            </Container>
-        </Section>
-    );
-}
diff --git a/src/pages/privacy/index.tsx b/src/pages/privacy/index.tsx
deleted file mode 100644
index 633c8db..0000000
--- a/src/pages/privacy/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
-import PrivacySection from "./(sections)/privacy-section";
-import InnerPageHeroSection from "@/src/components/general/inner-page-hero-section";
-import { SiteData } from "@/src/data/site-data";
-
-export default function PrivacyPage() {
-    return (
-        <>
-            <InnerPageHeroSection title="Privacy Policy" sub_title="Legal" />
-
-            <PrivacySection />
-        </>
-    );
-}
-
-export const meta: BunextPageModuleMeta = {
-    title: `Privacy Policy | ${SiteData["SiteName"]}`,
-    description: `Read our privacy policy to understand how we collect, use, and protect your personal information.`,
-};
diff --git a/src/pages/terms/(sections)/terms-section.tsx b/src/pages/terms/(sections)/terms-section.tsx
deleted file mode 100644
index f84e63d..0000000
--- a/src/pages/terms/(sections)/terms-section.tsx
+++ /dev/null
@@ -1,338 +0,0 @@
-import Section from "@/src/components/twui/layout/Section";
-import Container from "@/src/components/twui/layout/Container";
-import Stack from "@/src/components/twui/layout/Stack";
-import H3 from "@/src/components/twui/layout/H3";
-import { SiteData } from "@/src/data/site-data";
-
-export default function TermsSection() {
-    const siteName = SiteData["SiteName"];
-    const siteUrl = SiteData["SiteURL"];
-
-    return (
-        <Section className="bg-white!">
-            <Container>
-                <Stack className="w-full max-w-4xl mx-auto gap-6 [&_p]:leading-relaxed [&_p]:text-lg">
-                    <p>
-                        These terms and conditions outline the rules and
-                        regulations for the use of {siteName}'s Website, located
-                        at {siteUrl}.
-                    </p>
-
-                    <p>
-                        By accessing this website we assume you accept these
-                        terms and conditions. Do not continue to use {siteName}{" "}
-                        if you do not agree to take all of the terms and
-                        conditions stated on this page.
-                    </p>
-
-                    <p>
-                        The following terminology applies to these Terms and
-                        Conditions, Privacy Statement and Disclaimer Notice and
-                        all Agreements: "Client", "You" and "Your" refers to
-                        you, the person log on this website and compliant to the
-                        Company's terms and conditions. "The Company",
-                        "Ourselves", "We", "Our" and "Us", refers to our
-                        Company. "Party", "Parties", or "Us", refers to both the
-                        Client and ourselves. All terms refer to the offer,
-                        acceptance and consideration of payment necessary to
-                        undertake the process of our assistance to the Client in
-                        the most appropriate manner for the express purpose of
-                        meeting the Client's needs in respect of provision of
-                        the Company's stated services, in accordance with and
-                        subject to, prevailing law of Nigeria. Any use of the
-                        above terminology or other words in the singular,
-                        plural, capitalization and/or he/she or they, are taken
-                        as interchangeable and therefore as referring to same.
-                    </p>
-
-                    <H3>Cookies</H3>
-                    <p>
-                        We employ the use of cookies. By accessing {siteName},
-                        you agreed to use cookies in agreement with the
-                        {siteName}'s Privacy Policy.
-                    </p>
-                    <p>
-                        Most interactive websites use cookies to let us retrieve
-                        the user's details for each visit. Cookies are used by
-                        our website to enable the functionality of certain areas
-                        to make it easier for people visiting our website. Some
-                        of our affiliate/advertising partners may also use
-                        cookies.
-                    </p>
-
-                    <H3>License</H3>
-                    <p>
-                        Unless otherwise stated, {siteName} and/or its licensors
-                        own the intellectual property rights for all material on{" "}
-                        {siteName}. All intellectual property rights are
-                        reserved. You may access this from {siteName} for your
-                        own personal use subjected to restrictions set in these
-                        terms and conditions.
-                    </p>
-                    <p>You must not:</p>
-                    <ul className="list-disc pl-6 flex flex-col gap-2">
-                        <li>Republish material from {siteName}</li>
-                        <li>
-                            Sell, rent or sub-license material from {siteName}
-                        </li>
-                        <li>
-                            Reproduce, duplicate or copy material from{" "}
-                            {siteName}
-                        </li>
-                        <li>Redistribute content from {siteName}</li>
-                    </ul>
-
-                    <p>This Agreement shall begin on the date hereof.</p>
-
-                    <p>
-                        Parts of this website offer an opportunity for users to
-                        post and exchange opinions and information in certain
-                        areas of the website. {siteName} does not filter, edit,
-                        publish or review Comments prior to their presence on
-                        the website. Comments do not reflect the views and
-                        opinions of {siteName},its agents and/or affiliates.
-                        Comments reflect the views and opinions of the person
-                        who post their views and opinions. To the extent
-                        permitted by applicable laws, {siteName} shall not be
-                        liable for the Comments or for any liability, damages or
-                        expenses caused and/or suffered as a result of any use
-                        of and/or posting of and/or appearance of the Comments
-                        on this website.
-                    </p>
-
-                    <p>
-                        {siteName} reserves the right to monitor all Comments
-                        and to remove any Comments which can be considered
-                        inappropriate, offensive or causes breach of these Terms
-                        and Conditions.
-                    </p>
-
-                    <p>You warrant and represent that:</p>
-                    <ul className="list-disc pl-6 flex flex-col gap-2">
-                        <li>
-                            You are entitled to post the Comments on our website
-                            and have all necessary licenses and consents to do
-                            so;
-                        </li>
-                        <li>
-                            The Comments do not invade any intellectual property
-                            right, including without limitation copyright,
-                            patent or trademark of any third party;
-                        </li>
-                        <li>
-                            The Comments do not contain any defamatory,
-                            libelous, offensive, indecent or otherwise unlawful
-                            material which is an invasion of privacy
-                        </li>
-                        <li>
-                            The Comments will not be used to solicit or promote
-                            business or custom or present commercial activities
-                            or unlawful activity.
-                        </li>
-                    </ul>
-
-                    <p>
-                        You hereby grant {siteName} a non-exclusive license to
-                        use, reproduce, edit and authorize others to use,
-                        reproduce and edit any of your Comments in any and all
-                        forms, formats or media.
-                    </p>
-
-                    <H3>Hyperlinking to our Content</H3>
-                    <p>
-                        The following organizations may link to our Website
-                        without prior written approval:
-                    </p>
-                    <ul className="list-disc pl-6 flex flex-col gap-2">
-                        <li>Government agencies;</li>
-                        <li>Search engines;</li>
-                        <li>News organizations;</li>
-                        <li>
-                            Online directory distributors may link to our
-                            Website in the same manner as they hyperlink to the
-                            Websites of other listed businesses; and
-                        </li>
-                        <li>
-                            System wide Accredited Businesses except soliciting
-                            non-profit organizations, charity shopping malls,
-                            and charity fundraising groups which may not
-                            hyperlink to our Web site.
-                        </li>
-                    </ul>
-
-                    <p>
-                        These organizations may link to our home page, to
-                        publications or to other Website information so long as
-                        the link: (a) is not in any way deceptive; (b) does not
-                        falsely imply sponsorship, endorsement or approval of
-                        the linking party and its products and/or services; and
-                        (c) fits within the context of the linking party's site.
-                    </p>
-
-                    <p>
-                        We may consider and approve other link requests from the
-                        following types of organizations:
-                    </p>
-                    <ul className="list-disc pl-6 flex flex-col gap-2">
-                        <li>
-                            commonly-known consumer and/or business information
-                            sources;
-                        </li>
-                        <li>dot.com community sites;</li>
-                        <li>
-                            associations or other groups representing charities;
-                        </li>
-                        <li>online directory distributors;</li>
-                        <li>internet portals;</li>
-                        <li>accounting, law and consulting firms; and</li>
-                        <li>
-                            educational institutions and trade associations.
-                        </li>
-                    </ul>
-
-                    <p>
-                        We will approve link requests from these organizations
-                        if we decide that: (a) the link would not make us look
-                        unfavorably to ourselves or to our accredited
-                        businesses; (b) the organization does not have any
-                        negative records with us; (c) the benefit to us from the
-                        visibility of the hyperlink compensates the absence of{" "}
-                        {siteName}; and (d) the link is in the context of
-                        general resource information.
-                    </p>
-
-                    <p>
-                        These organizations may link to our home page so long as
-                        the link: (a) is not in any way deceptive; (b) does not
-                        falsely imply sponsorship, endorsement or approval of
-                        the linking party and its products or services; and (c)
-                        fits within the context of the linking party's site.
-                    </p>
-
-                    <p>
-                        If you are one of the organizations listed in paragraph
-                        2 above and are interested in linking to our website,
-                        you must inform us by sending an e-mail to {siteName}.
-                        Please include your name, your organization name,
-                        contact information as well as the URL of your site, a
-                        list of any URLs from which you intend to link to our
-                        Website, and a list of the URLs on our site to which you
-                        would like to link. Wait 2-3 weeks for a response.
-                    </p>
-
-                    <p>
-                        Approved organizations may hyperlink to our Website as
-                        follows:
-                    </p>
-                    <ul className="list-disc pl-6 flex flex-col gap-2">
-                        <li>By use of our corporate name; or</li>
-                        <li>
-                            By use of the uniform resource locator being linked
-                            to; or
-                        </li>
-                        <li>
-                            By use of any other description of our Website being
-                            linked to that makes sense within the context and
-                            format of content on the linking party's site.
-                        </li>
-                    </ul>
-
-                    <p>
-                        No use of {siteName}'s logo or other artwork will be
-                        allowed for linking absent a trademark license
-                        agreement.
-                    </p>
-
-                    <H3>iFrames</H3>
-                    <p>
-                        Without prior approval and written permission, you may
-                        not create frames around our Webpages that alter in any
-                        way the visual presentation or appearance of our
-                        Website.
-                    </p>
-
-                    <H3>Content Liability</H3>
-                    <p>
-                        We shall not be hold responsible for any content that
-                        appears on your Website. You agree to protect and defend
-                        us against all claims that is rising on your Website. No
-                        link(s) should appear on any Website that may be
-                        interpreted as libelous, obscene or criminal, or which
-                        infringes, otherwise violates, or advocates the
-                        infringement or other violation of, any third party
-                        rights.
-                    </p>
-
-                    <H3>Your Privacy</H3>
-                    <p>Please read our Privacy Policy.</p>
-
-                    <H3>Reservation of Rights</H3>
-                    <p>
-                        We reserve the right to request that you remove all
-                        links or any particular link to our Website. You approve
-                        to immediately remove all links to our Website upon
-                        request. We also reserve the right to amen these terms
-                        and conditions and it's linking policy at any time. By
-                        continuously linking to our Website, you agree to be
-                        bound to and follow these linking terms and conditions.
-                    </p>
-
-                    <H3>Removal of links from our website</H3>
-                    <p>
-                        If you find any link on our Website that is offensive
-                        for any reason, you are free to contact and inform us
-                        any moment. We will consider requests to remove links
-                        but we are not obligated to or so or to respond to you
-                        directly.
-                    </p>
-                    <p>
-                        We do not ensure that the information on this website is
-                        correct, we do not warrant its completeness or accuracy;
-                        nor do we promise to ensure that the website remains
-                        available or that the material on the website is kept up
-                        to date.
-                    </p>
-
-                    <H3>Disclaimer</H3>
-                    <p>
-                        To the maximum extent permitted by applicable law, we
-                        exclude all representations, warranties and conditions
-                        relating to our website and the use of this website.
-                        Nothing in this disclaimer will:
-                    </p>
-                    <ul className="list-disc pl-6 flex flex-col gap-2">
-                        <li>
-                            limit or exclude our or your liability for death or
-                            personal injury;
-                        </li>
-                        <li>
-                            limit or exclude our or your liability for fraud or
-                            fraudulent misrepresentation;
-                        </li>
-                        <li>
-                            limit any of our or your liabilities in any way that
-                            is not permitted under applicable law; or
-                        </li>
-                        <li>
-                            exclude any of our or your liabilities that may not
-                            be excluded under applicable law.
-                        </li>
-                    </ul>
-                    <p>
-                        The limitations and prohibitions of liability set in
-                        this Section and elsewhere in this disclaimer: (a) are
-                        subject to the preceding paragraph; and (b) govern all
-                        liabilities arising under the disclaimer, including
-                        liabilities arising in contract, in tort and for breach
-                        of statutory duty.
-                    </p>
-                    <p>
-                        As long as the website and the information and services
-                        on the website are provided free of charge, we will not
-                        be liable for any loss or damage of any nature.
-                    </p>
-                </Stack>
-            </Container>
-        </Section>
-    );
-}
diff --git a/src/pages/terms/index.tsx b/src/pages/terms/index.tsx
deleted file mode 100644
index a7a4908..0000000
--- a/src/pages/terms/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
-import TermsSection from "./(sections)/terms-section";
-import InnerPageHeroSection from "@/src/components/general/inner-page-hero-section";
-import { SiteData } from "@/src/data/site-data";
-
-export default function TermsPage() {
-    return (
-        <>
-            <InnerPageHeroSection
-                title="Terms and Conditions"
-                sub_title="Legal"
-            />
-
-            <TermsSection />
-        </>
-    );
-}
-
-export const meta: BunextPageModuleMeta = {
-    title: `Terms and Conditions | ${SiteData["SiteName"]}`,
-    description: `Read our terms and conditions for using the ${SiteData["SiteName"]} website.`,
-};
diff --git a/src/styles/main.css b/src/styles/main.css
index 0ac5788..51d5238 100755
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -2,74 +2,129 @@
 
 @import "../components/twui/base.css";
 
+/* -------------------------------------------------------------------------- */
+/*                                Design tokens                               */
+/* -------------------------------------------------------------------------- */
+/*
+ * One accent (WireGuard red). twui reads `primary`, `secondary` and `accent` in 8 forms
+ * each, so all three alias the same accent.
+ *
+ * Undefined twui Button combos — avoid them:
+ *   variant="normal"   + color="text" | "warning"
+ *   variant="outlined" + color="text" | "success"
+ */
 @theme inline {
+    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+    --font-mono:
+        ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas,
+        monospace;
+
+    /* Neutrals (zinc) */
+    --color-background-light: #ffffff;
+    --color-background-dark: #09090b;
+    --color-foreground-light: #18181b;
+    --color-foreground-dark: #fafafa;
+    --color-gray: #f4f4f5;
+    --color-gray-hover: #e4e4e7;
+    --color-gray-dark: #27272a;
+    --color-gray-dark-hover: #3f3f46;
+    --color-dark: #09090b;
+    --color-light: #fafafa;
+
+    /* Accent: WireGuard red (#89161b, the logo colour). Lighter in dark
+       mode so text and buttons keep contrast on near-black. */
     --color-primary: #89161b;
-    --color-primary-hover: #89161b;
+    --color-primary-hover: #6f1216;
     --color-primary-outline: #89161b;
     --color-primary-text: #89161b;
-    --color-primary-dark: #89161b;
-    --color-primary-dark-hover: #89161b;
-    --color-primary-dark-outline: #89161b;
-    --color-primary-dark-text: #89161b;
+    --color-primary-dark: #b3242a;
+    --color-primary-dark-hover: #c9343a;
+    --color-primary-dark-outline: #d9575c;
+    --color-primary-dark-text: #ef7a7e;
 
-    --color-secondary: #32736c;
-    --color-secondary-hover: #32736c;
-    --color-secondary-outline: #32736c;
-    --color-secondary-text: #32736c;
-    --color-secondary-dark: #1d524c;
-    --color-secondary-dark-hover: #1d524c;
-    --color-secondary-dark-outline: #32736c;
-    --color-secondary-dark-text: #32736c;
+    --color-secondary: #89161b;
+    --color-secondary-hover: #6f1216;
+    --color-secondary-outline: #89161b;
+    --color-secondary-text: #89161b;
+    --color-secondary-dark: #b3242a;
+    --color-secondary-dark-hover: #c9343a;
+    --color-secondary-dark-outline: #d9575c;
+    --color-secondary-dark-text: #ef7a7e;
 
     --color-accent: #89161b;
-    --color-accent-hover: #89161b;
+    --color-accent-hover: #6f1216;
     --color-accent-outline: #89161b;
     --color-accent-text: #89161b;
-    --color-accent-dark: #89161b;
-    --color-accent-dark-hover: #89161b;
-    --color-accent-dark-outline: #89161b;
-    --color-accent-dark-text: #89161b;
+    --color-accent-dark: #b3242a;
+    --color-accent-dark-hover: #c9343a;
+    --color-accent-dark-outline: #d9575c;
+    --color-accent-dark-text: #ef7a7e;
 
-    --color-dark: #000000;
-    --color-dark-hover: #000000;
-    --color-dark-outline: #000000;
-    --color-dark-text: #000000;
-    --color-dark-dark: #000000;
-    --color-dark-dark-hover: #000000;
-    --color-dark-dark-outline: #000000;
-    --color-dark-dark-text: #000000;
+    /* Status (incl. hover tokens twui references) */
+    --color-success: #16a34a;
+    --color-success-hover: #15803d;
+    --color-success-dark: #22c55e;
+    --color-error: #e5484d;
+    --color-error-hover: #cd2b31;
+    --color-error-dark: #ff6369;
+    --color-warning: #d97706;
+    --color-warning-hover: #b45309;
+    --color-warning-dark: #fbbf24;
 
-    --color-light: #f2f1f0;
-    --color-light-hover: #f2f1f0;
-    --color-light-outline: #f2f1f0;
-    --color-light-text: #f2f1f0;
-    --color-light-dark: #f2f1f0;
-    --color-light-dark-hover: #f2f1f0;
-    --color-light-dark-outline: #f2f1f0;
-    --color-light-dark-text: #f2f1f0;
+    --color-link: #89161b;
+    --color-link-dark: #ef7a7e;
 
-    /* --color-gray: #817d78;
-    --color-gray-hover: #817d78; */
+    /* Semantic, theme-flipping — app code uses these without `dark:` pairs */
+    --color-surface: var(--wg-surface);
+    --color-surface-2: var(--wg-surface-2);
+    --color-line: var(--wg-line);
+    --color-muted: var(--wg-muted);
+    --color-subtle: var(--wg-subtle);
+    --color-fg: var(--wg-fg);
 
-    --radius-default: 3px;
+    --radius-default: 6px;
+    --radius-default-sm: 4px;
+    --radius-default-xs: 2px;
+    --radius-default-lg: 8px;
+    --radius-default-xl: 12px;
 }
 
+:root {
+    --wg-surface: #ffffff;
+    --wg-surface-2: #fafafa;
+    --wg-line: #e4e4e7;
+    --wg-muted: #52525b;
+    --wg-subtle: #a1a1aa;
+    --wg-fg: #18181b;
+    color-scheme: light;
+}
+
+.dark {
+    --wg-surface: #0f0f11;
+    --wg-surface-2: #18181b;
+    --wg-line: #27272a;
+    --wg-muted: #a1a1aa;
+    --wg-subtle: #71717a;
+    --wg-fg: #fafafa;
+    color-scheme: dark;
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    Base                                    */
+/* -------------------------------------------------------------------------- */
+
 body {
-    font-family: "Inter", Arial, Helvetica, sans-serif;
+    font-family: var(--font-sans);
     font-optical-sizing: auto;
     font-feature-settings:
         "cv02" 1,
         "cv03" 1,
         "cv11" 1;
+    @apply text-base bg-surface-2 text-fg antialiased;
 }
 
 .tabular {
     font-variant-numeric: tabular-nums;
-    font-feature-settings:
-        "tnum" 1,
-        "cv02" 1,
-        "cv03" 1,
-        "cv11" 1;
 }
 
 h1,
@@ -79,122 +134,174 @@ h4,
 h5,
 h6,
 .heading {
-    font-family: "Inter", Arial, Helvetica, sans-serif;
-    font-optical-sizing: auto;
-    @apply m-0! font-bold;
+    font-family: var(--font-sans);
+    @apply m-0! font-semibold tracking-tight text-fg;
 }
 
 h1 {
-    @apply text-5xl xl:text-7xl!;
+    @apply text-2xl;
 }
 
 h2 {
-    @apply text-4xl xl:text-5xl!;
+    @apply text-lg;
 }
 
-h3 {
-    @apply text-2xl! xl:text-3xl!;
-}
-
-h4 {
-    @apply text-lg! xl:text-xl!;
-}
-
-.twui-button-general {
-    @apply font-semibold;
-}
-
-a {
-    @apply outline-none border-none text-primary;
-}
-
-.twui-section {
-    @apply py-44;
-}
-
-.htag {
-    @apply uppercase font-bold text-secondary/70 tracking-widest;
-}
-
-header nav a > * {
-    @apply transition-transform;
-}
-
-header nav a:hover > * {
-    @apply -translate-y-0.5;
-}
-
-#hero-image {
-    @apply object-center lg:object-left -z-1 max-lg:scale-[120%];
-}
-
-.hero-section {
-    @apply pt-[200px] text-white bg-dark relative;
-    /* @apply max-w-sm:pb-0; */
-}
-
-.hero-section .htag {
-    @apply text-accent;
-}
-
-#admin-main {
-    @apply max-w-[1200px];
-}
-
-#admin-main section {
-    @apply p-6 flex flex-col items-start;
-}
-
-#admin-main h1 {
-    @apply text-4xl!;
-}
-
-#admin-main h2 {
-    @apply text-2xl!;
-}
-
-#admin-main h3 {
-    @apply text-xl!;
-}
-
-#admin-main h4 {
-    @apply text-lg!;
-}
-
-.header-user-dropdown * {
-    @apply text-dark;
-}
-
-.header-user-dropdown a {
+h3,
+h4,
+h5,
+h6 {
     @apply text-base;
 }
 
-.twui-anchor {
-    @apply text-secondary;
-}
-
-.twui-anchor.active {
-    @apply font-bold opacity-100! text-secondary-dark;
-}
-
-.bio-subtitle {
-    @apply max-w-2xl text-ellipsis line-clamp-3;
-}
-
-.bio-subtitle p,
-.bio-subtitle span {
-    @apply text-sm;
-}
-
-.bio-content p {
-    @apply my-4;
-}
-
-#admin-main section {
-    @apply gap-10;
+a {
+    @apply outline-none border-none text-primary dark:text-primary-dark-text;
 }
 
 p code,
 span code {
-    @apply p-1 mx-1 bg-slate-100;
+    @apply font-mono text-sm px-1 py-0.5 rounded-default-sm bg-gray dark:bg-gray-dark;
+}
+
+:focus-visible {
+    @apply outline-2 outline-offset-2 outline-primary dark:outline-primary-dark;
+}
+
+/* -------------------------------------------------------------------------- */
+/*                               twui overrides                               */
+/* -------------------------------------------------------------------------- */
+
+.twui-anchor {
+    @apply border-b-0 leading-normal;
+}
+
+.twui-button-general {
+    @apply font-medium;
+}
+
+/* twui buttons default to 14px; match the app's 15–16px type scale */
+.twui-button-base,
+.twui-button-small {
+    @apply text-[15px];
+}
+
+.twui-button-smaller {
+    @apply text-[13px];
+}
+
+.twui-p {
+    @apply py-0 text-muted;
+}
+
+.twui-card,
+.twui-paper,
+.twui-border {
+    @apply border-line! bg-surface;
+}
+
+.twui-card {
+    @apply transition-colors;
+}
+
+.twui-card:hover {
+    @apply border-subtle!;
+}
+
+.twui-tag {
+    @apply font-medium;
+}
+
+.twui-modal-content {
+    @apply rounded-default-lg border-line! bg-surface! shadow-2xl;
+}
+
+.twui-modal-root > div:first-child {
+    @apply bg-dark/60 backdrop-blur-[2px];
+}
+
+.twui-toast {
+    @apply shadow-lg rounded-default-lg pl-4 pr-9 py-3 text-base max-w-[calc(100vw-2rem)];
+}
+
+.twui-empty-content-border {
+    @apply border-line! border-dashed;
+}
+
+.twui-code-block-wrapper {
+    @apply outline-line! max-w-full!;
+}
+
+.twui-code-block-pre {
+    @apply font-mono text-sm leading-relaxed text-zinc-100;
+}
+
+/* Inputs: label sits above the field instead of floating on the border */
+.twui-input-label {
+    @apply -top-6! left-0! px-0! bg-transparent! text-muted! text-[13px] font-medium;
+}
+
+.twui-input-wrapper:has(> .twui-input-label),
+div:has(> .twui-select):has(> .twui-input-label) {
+    @apply mt-6;
+}
+
+.twui-input-wrapper,
+div:has(> .twui-select) {
+    @apply bg-surface! text-[15px];
+}
+
+.twui-input-wrapper:not(.twui-input-invalid) {
+    outline-color: var(--wg-line) !important;
+}
+
+.twui-input-wrapper:not(.twui-input-invalid):focus-within,
+div:has(> .twui-select):focus-within {
+    outline-color: var(--color-primary) !important;
+    border-color: var(--color-primary) !important;
+}
+
+div:has(> .twui-select) {
+    border-color: var(--wg-line) !important;
+}
+
+.twui-select {
+    @apply bg-transparent text-fg;
+}
+
+.twui-clear-input-field-button {
+    @apply bg-transparent!;
+}
+
+/* Tabs: underline style */
+.twui-tabs-border {
+    @apply border-0! border-b! border-line! rounded-none! bg-transparent;
+}
+
+.twui-tab-buttons {
+    @apply px-3 py-2.5 rounded-none -mb-px border-b-2 border-transparent text-base font-medium text-muted ml-0;
+}
+
+.twui-tab-buttons:hover {
+    @apply text-fg;
+}
+
+.twui-tab-button-active {
+    @apply bg-transparent! text-fg! border-primary! dark:border-primary-dark!;
+}
+
+/* TinyMCE: the content iframe styles itself via buildRteContentStyle; this
+   only keeps the frame from flashing white before that CSS loads. */
+.tox .tox-edit-area__iframe {
+    background-color: var(--wg-surface) !important;
+}
+
+.twui-dropdown-content {
+    @apply z-50;
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                 App layout                                 */
+/* -------------------------------------------------------------------------- */
+
+#admin-main {
+    @apply w-full max-w-[1280px] mx-auto;
 }
diff --git a/src/types/index.ts b/src/types/index.ts
index 30aab5e..644796b 100755
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -9,8 +9,8 @@ import type {
     BUN_SQLITE_WGUI_VARIABLES,
     BunSQLiteTables,
 } from "@/db/types/db";
-import type { SBFSusidiaries } from "../dict/subsidiaries-dict";
 import type { UserTypes } from "../dict/user-types-dict";
+import type { ThemeMode } from "../dict/theme-dict";
 import type { MediaParadigms, MediaTypes } from "../dict/media-dict";
 import type {
     ClientRuleProtocols,
@@ -74,39 +74,17 @@ export type PagePropsType = {
     next_available_client_ip?: string | null;
     is_local_ip?: boolean | null;
     setup_status?: ReturnType<typeof grabSystemSetupStatus> | null;
+    theme?: ThemeMode | null;
 };
 
 export type AppContextObject = {
     user: User | null;
-    appState: AppStateObject;
-    setAppState: React.Dispatch<React.SetStateAction<AppStateObject>>;
-    refresh?: number;
-    setRefresh?: React.Dispatch<React.SetStateAction<number>>;
-    pageData?: any;
     pageProps?: PagePropsType;
     query?: PageQueryObject | null;
 };
 
 export type AppDataObject = {};
 
-export type AppStateObject = {
-    data?: AppDataObject;
-    likes?: string[] | null;
-    currency?: CurrencyObjectType;
-    fonts?: any;
-    setOpenLoginModal?: React.Dispatch<React.SetStateAction<boolean>>;
-    setOpenSignUpModal?: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-export type CurrencyObjectType = {
-    symbol: string;
-    code: string;
-    multiplier?: number;
-    icon?: string;
-    country?: string;
-    countryCode?: string;
-} | null;
-
 export type DSQL_RESPONSE = {
     success: boolean;
     payload?: Object[] | string | any[] | { error: string } | null;
@@ -185,7 +163,6 @@ export type FileBase64Object = {
     fileType: string;
 };
 
-export type SubsidiaryType = (typeof SBFSusidiaries)[number];
 
 export type UserType = (typeof UserTypes)[number]["value"];
 
diff --git a/src/utils/derive-host-display-name.ts b/src/utils/derive-host-display-name.ts
new file mode 100644
index 0000000..fc42f6b
--- /dev/null
+++ b/src/utils/derive-host-display-name.ts
@@ -0,0 +1,9 @@
+type Params = {
+    host?: { id?: number | string; name?: string } | null;
+};
+
+export default function deriveHostDisplayName({ host }: Params) {
+    if (host?.name) return host.name;
+    const id = Number(host?.id || 0);
+    return id == 0 ? "Main host" : `Host #${id}`;
+}