diff --git a/src/components/features/feature-page.tsx b/src/components/features/feature-page.tsx
new file mode 100644
index 0000000..2c2ccaa
--- /dev/null
+++ b/src/components/features/feature-page.tsx
@@ -0,0 +1,1516 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import Link from "next/link";
+import type { ColumnDef } from "@tanstack/react-table";
+import { useQuery } from "@tanstack/react-query";
+import { formatDistanceToNow } from "date-fns";
+import {
+  AtSign,
+  CheckCircle2,
+  Clock3,
+  Cpu,
+  Database,
+  ExternalLink,
+  FileText,
+  FolderOpen,
+  Gauge,
+  Globe2,
+  HardDrive,
+  KeyRound,
+  Mail,
+  Network,
+  Palette,
+  Plus,
+  Server,
+  Settings,
+  Shield,
+  Terminal,
+} from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { ControlShell } from "@/components/shell/control-shell";
+import { PageHeader } from "@/components/common/page-header";
+import { ResourceMeter } from "@/components/common/resource-meter";
+import { StatusBadge } from "@/components/common/status-badge";
+import { DataTable } from "@/components/common/data-table";
+import {
+  SkeletonPanel,
+  ErrorState,
+  PermissionDeniedState,
+} from "@/components/common/loading-states";
+import { DangerousActionDialog } from "@/components/common/confirm-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+import { Input } from "@/components/ui/input";
+import { panelService } from "@/api/services/panel-service";
+import type {
+  AuditEntry,
+  Automation,
+  Backup,
+  Database as DatabaseModel,
+  DatabaseAdminTool,
+  Domain,
+  DockerContainer,
+  Mailbox,
+  NginxSite,
+  RuntimeDefinition,
+  SecurityFinding,
+  Server as ServerModel,
+  ServiceStatus,
+  Website,
+} from "@/api/contracts/models";
+import { can } from "@/lib/permissions";
+import { findRoute, groupRoutes, routeItems } from "@/lib/routes";
+import { cn, formatBytes, titleize } from "@/lib/utils";
+
+const TerminalPanel = dynamic(
+  () => import("@/components/common/terminal-panel").then((mod) => mod.TerminalPanel),
+  { ssr: false, loading: () => <SkeletonPanel /> },
+);
+const AppearanceSettings = dynamic(
+  () =>
+    import("@/components/features/appearance-settings").then((mod) => mod.AppearanceSettings),
+  { ssr: false, loading: () => <SkeletonPanel /> },
+);
+const DnsEditor = dynamic(
+  () => import("@/components/features/dns-editor").then((mod) => mod.DnsEditor),
+  { ssr: false, loading: () => <SkeletonPanel /> },
+);
+const FileManager = dynamic(
+  () => import("@/components/features/file-manager").then((mod) => mod.FileManager),
+  { ssr: false, loading: () => <SkeletonPanel /> },
+);
+const ToolLauncher = dynamic(
+  () => import("@/components/features/tool-launcher").then((mod) => mod.ToolLauncher),
+  { ssr: false, loading: () => <SkeletonPanel /> },
+);
+const UsageChart = dynamic(
+  () => import("@/components/features/charts").then((mod) => mod.UsageChart),
+  { ssr: false, loading: () => <SkeletonPanel /> },
+);
+const TrafficChart = dynamic(
+  () => import("@/components/features/charts").then((mod) => mod.TrafficChart),
+  { ssr: false, loading: () => <SkeletonPanel /> },
+);
+const WizardForm = dynamic(
+  () => import("@/components/features/wizard-form").then((mod) => mod.WizardForm),
+  { ssr: false, loading: () => <SkeletonPanel /> },
+);
+
+const websiteColumns: ColumnDef<Website>[] = [
+  { accessorKey: "name", header: "Website" },
+  { accessorKey: "domain", header: "Domain" },
+  { accessorKey: "runtime", header: "Runtime" },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => <StatusBadge status={row.original.status} />,
+  },
+  {
+    accessorKey: "ssl",
+    header: "SSL",
+    cell: ({ row }) => <StatusBadge status={row.original.ssl} />,
+  },
+  {
+    accessorKey: "lastDeployment",
+    header: "Last deployment",
+    cell: ({ row }) => timeAgo(row.original.lastDeployment),
+  },
+];
+
+const domainColumns: ColumnDef<Domain>[] = [
+  { accessorKey: "name", header: "Domain" },
+  { accessorKey: "type", header: "Type" },
+  { accessorKey: "documentRoot", header: "Document root" },
+  {
+    accessorKey: "sslStatus",
+    header: "SSL",
+    cell: ({ row }) => <StatusBadge status={row.original.sslStatus} />,
+  },
+  {
+    accessorKey: "propagation",
+    header: "Propagation",
+    cell: ({ row }) => `${row.original.propagation}%`,
+  },
+];
+
+const databaseColumns: ColumnDef<DatabaseModel>[] = [
+  { accessorKey: "name", header: "Database" },
+  { accessorKey: "engine", header: "Engine" },
+  { accessorKey: "size", header: "Size", cell: ({ row }) => formatBytes(row.original.size) },
+  { accessorKey: "tables", header: "Tables" },
+  { accessorKey: "connections", header: "Connections" },
+  {
+    accessorKey: "lastBackup",
+    header: "Last backup",
+    cell: ({ row }) => timeAgo(row.original.lastBackup),
+  },
+];
+
+const mailboxColumns: ColumnDef<Mailbox>[] = [
+  { accessorKey: "address", header: "Address" },
+  { accessorKey: "domain", header: "Domain" },
+  {
+    accessorKey: "used",
+    header: "Storage",
+    cell: ({ row }) => `${formatBytes(row.original.used)} / ${formatBytes(row.original.quota)}`,
+  },
+  {
+    accessorKey: "forwarding",
+    header: "Forwarding",
+    cell: ({ row }) => (row.original.forwarding ? "Enabled" : "Disabled"),
+  },
+  {
+    accessorKey: "authStatus",
+    header: "Auth",
+    cell: ({ row }) => <StatusBadge status={row.original.authStatus} />,
+  },
+];
+
+const securityColumns: ColumnDef<SecurityFinding>[] = [
+  {
+    accessorKey: "severity",
+    header: "Severity",
+    cell: ({ row }) => (
+      <Badge
+        variant={
+          row.original.severity === "critical" || row.original.severity === "high"
+            ? "danger"
+            : "warning"
+        }
+      >
+        {row.original.severity}
+      </Badge>
+    ),
+  },
+  { accessorKey: "title", header: "Finding" },
+  { accessorKey: "target", header: "Target" },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => <StatusBadge status={row.original.status} />,
+  },
+  { accessorKey: "recommendation", header: "Recommendation" },
+];
+
+const backupColumns: ColumnDef<Backup>[] = [
+  { accessorKey: "name", header: "Backup" },
+  { accessorKey: "scope", header: "Scope" },
+  { accessorKey: "destination", header: "Destination" },
+  { accessorKey: "size", header: "Size", cell: ({ row }) => formatBytes(row.original.size) },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => <StatusBadge status={row.original.status} />,
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Created",
+    cell: ({ row }) => timeAgo(row.original.createdAt),
+  },
+];
+
+const automationColumns: ColumnDef<Automation>[] = [
+  { accessorKey: "name", header: "Workflow" },
+  { accessorKey: "trigger", header: "Trigger" },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => <StatusBadge status={row.original.status} />,
+  },
+  {
+    accessorKey: "successRate",
+    header: "Success",
+    cell: ({ row }) => `${row.original.successRate}%`,
+  },
+  {
+    accessorKey: "lastRun",
+    header: "Last run",
+    cell: ({ row }) => timeAgo(row.original.lastRun),
+  },
+];
+
+const auditColumns: ColumnDef<AuditEntry>[] = [
+  { accessorKey: "actor", header: "Actor" },
+  { accessorKey: "action", header: "Action" },
+  { accessorKey: "target", header: "Target" },
+  { accessorKey: "ipAddress", header: "IP address" },
+  { accessorKey: "requestId", header: "Request ID" },
+  {
+    accessorKey: "createdAt",
+    header: "Created",
+    cell: ({ row }) => timeAgo(row.original.createdAt),
+  },
+];
+
+const serverColumns: ColumnDef<ServerModel>[] = [
+  { accessorKey: "name", header: "Server" },
+  { accessorKey: "hostname", header: "Hostname" },
+  { accessorKey: "os", header: "OS" },
+  { accessorKey: "panelVersion", header: "Panel version" },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => <StatusBadge status={row.original.status} />,
+  },
+  { accessorKey: "location", header: "Location" },
+];
+
+const runtimeColumns: ColumnDef<RuntimeDefinition>[] = [
+  { accessorKey: "name", header: "Runtime" },
+  {
+    accessorKey: "versions",
+    header: "Versions",
+    cell: ({ row }) => row.original.versions.join(", "),
+  },
+  {
+    accessorKey: "extensions",
+    header: "Extensions",
+    cell: ({ row }) => row.original.extensions.join(", "),
+  },
+  {
+    accessorKey: "processManagers",
+    header: "Process managers",
+    cell: ({ row }) => row.original.processManagers.join(", "),
+  },
+];
+
+const serviceColumns: ColumnDef<ServiceStatus>[] = [
+  { accessorKey: "name", header: "Service" },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => <StatusBadge status={row.original.status} />,
+  },
+  { accessorKey: "uptime", header: "Uptime" },
+  { accessorKey: "detail", header: "Detail" },
+];
+
+const nginxColumns: ColumnDef<NginxSite>[] = [
+  {
+    accessorKey: "serverNames",
+    header: "Server names",
+    cell: ({ row }) => row.original.serverNames.join(", ") || "(default)",
+  },
+  {
+    accessorKey: "listens",
+    header: "Listen",
+    cell: ({ row }) => row.original.listens.join(", "),
+  },
+  {
+    accessorKey: "proxyPasses",
+    header: "Proxy targets",
+    cell: ({ row }) => row.original.proxyPasses.join(", ") || row.original.root || "static",
+  },
+  {
+    accessorKey: "tls",
+    header: "TLS",
+    cell: ({ row }) => (
+      <Badge variant={row.original.tls ? "success" : "outline"}>
+        {row.original.tls ? "enabled" : "not detected"}
+      </Badge>
+    ),
+  },
+];
+
+const dockerColumns: ColumnDef<DockerContainer>[] = [
+  { accessorKey: "name", header: "Container" },
+  { accessorKey: "image", header: "Image" },
+  { accessorKey: "status", header: "Status" },
+  { accessorKey: "ports", header: "Ports" },
+];
+
+function timeAgo(value: string) {
+  return `${formatDistanceToNow(new Date(value))} ago`;
+}
+
+export function FeaturePage({ path }: { path: string }) {
+  const route = findRoute(path) ?? routeItems.find((item) => item.path === "/dashboard")!;
+  const { data } = useQuery({ queryKey: ["me"], queryFn: () => panelService.auth.me() });
+  const permissions = data?.data?.permissions ?? [];
+  const allowed = !data?.data || can(permissions, route.permission);
+  const breadcrumbs = [
+    { label: "Home", href: "/dashboard" },
+    { label: route.category },
+    { label: route.label },
+  ];
+
+  return (
+    <ControlShell>
+      <PageHeader
+        title={route.label}
+        description={route.description}
+        breadcrumbs={breadcrumbs}
+        actions={route.primaryActions}
+      />
+      {!allowed ? <PermissionDeniedState /> : <RouteContent path={path} />}
+    </ControlShell>
+  );
+}
+
+function RouteContent({ path }: { path: string }) {
+  if (path === "/dashboard") return <DashboardPage />;
+  if (path === "/tools") return <ToolLauncher />;
+  if (path === "/files") return <FileManager />;
+  if (path.endsWith("/dns")) return <DnsEditor />;
+  if (path === "/advanced/terminal") return <TerminalPanel />;
+  if (path === "/websites/new") return <WizardForm kind="website" steps={websiteSteps} />;
+  if (path === "/databases/new") return <WizardForm kind="database" steps={databaseSteps} />;
+  if (["/databases/phpmyadmin", "/databases/adminer", "/databases/pgadmin"].includes(path)) {
+    return <DatabaseAdminToolsPage selectedPath={path} />;
+  }
+  if (path === "/backups/new") return <WizardForm kind="backup" steps={backupSteps} />;
+  if (path === "/automation/new") return <AutomationBuilder />;
+  if (path === "/restore") return <RestorePage />;
+  if (path === "/roles") return <PermissionMatrix />;
+  if (path === "/settings") return <SettingsPage />;
+  if (path === "/security") return <SecurityDashboard />;
+  if (path.includes("/logs") || path === "/advanced/logs") return <LogsPage />;
+  return <ModulePage path={path} />;
+}
+
+function DashboardPage() {
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ["dashboard-summary"],
+    queryFn: () => panelService.dashboard.summary(),
+  });
+  if (isLoading) return <SkeletonPanel />;
+  if (error || data?.error || !data?.data) {
+    return (
+      <ErrorState
+        message={data?.error?.message ?? "Dashboard data failed to load."}
+        onRetry={() => void refetch()}
+      />
+    );
+  }
+  const summary = data.data;
+  const stats: Array<[string, string, LucideIcon]> = [
+    ["Username", summary.account.username, AtSign],
+    ["Primary domain", summary.account.primaryDomain, Globe2],
+    ["Home directory", summary.account.homeDirectory, FolderOpen],
+    ["Shared IP", summary.account.sharedIp, Network],
+    ["Dedicated IP", summary.account.dedicatedIp ?? "Not assigned", Server],
+    ["Last login", timeAgo(summary.user.lastLogin), Clock3],
+    ["Theme", summary.account.theme, Palette],
+    ["Server", summary.server.name, Cpu],
+  ];
+  return (
+    <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_340px]">
+      <div className="space-y-4">
+        <div className="stagger grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+          {stats.map(([label, value, Icon]) => (
+            <Card key={label} className="group hover:shadow-glow-sm">
+              <CardContent className="flex items-start justify-between gap-3 p-3.5">
+                <div className="min-w-0">
+                  <div className="text-xs text-muted-foreground">{label}</div>
+                  <div className="mt-1 truncate text-sm font-semibold">{value}</div>
+                </div>
+                <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary transition-transform duration-200 group-hover:scale-110">
+                  <Icon className="h-4 w-4" />
+                </span>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+        <DashboardToolGroups />
+        <UsageChart data={summary.metrics} />
+      </div>
+      <aside className="space-y-4">
+        <Card>
+          <CardHeader className="flex-row items-center justify-between space-y-0">
+            <div>
+              <CardTitle>Resource usage</CardTitle>
+              <CardDescription>Live account statistics</CardDescription>
+            </div>
+            <Button variant="ghost" size="sm">
+              Restore defaults
+            </Button>
+          </CardHeader>
+          <CardContent className="grid gap-3">
+            {summary.resources.map((resource) => (
+              <ResourceMeter key={resource.key} resource={resource} />
+            ))}
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Server status</CardTitle>
+            <CardDescription>{summary.server.hostname}</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            {summary.services.map((service) => (
+              <div
+                key={service.name}
+                className="flex items-center justify-between gap-3 rounded-md border border-border/60 bg-card/50 p-2 text-sm transition-colors hover:border-border"
+              >
+                <span>{service.name}</span>
+                <StatusBadge status={service.status} />
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Quick actions</CardTitle>
+          </CardHeader>
+          <CardContent className="grid gap-2">
+            {[
+              ["/websites/new", "Create website", Globe2],
+              ["/domains/new", "Add domain", Network],
+              ["/email/accounts", "Create email account", Mail],
+              ["/databases/new", "Create database", Database],
+              ["/files", "Open file manager", FileText],
+              ["/backups/new", "Create backup", HardDrive],
+              ["/advanced/terminal", "Open terminal", Terminal],
+              ["/metrics/resources", "View resource usage", Gauge],
+            ].map(([href, label, Icon]) => (
+              <Button key={String(label)} asChild variant="outline" className="justify-start">
+                <Link href={String(href)}>
+                  <Icon className="h-4 w-4 text-primary" />
+                  {String(label)}
+                </Link>
+              </Button>
+            ))}
+          </CardContent>
+        </Card>
+      </aside>
+    </div>
+  );
+}
+
+const dashboardGroups = ["Email", "Files", "Domains", "Databases", "Security", "Advanced"];
+
+/**
+ * cPanel Jupiter-style grouped tool grid: each category renders as a glass
+ * card with a dense grid of icon links into the matching module pages.
+ */
+function DashboardToolGroups() {
+  const grouped = groupRoutes(routeItems);
+  return (
+    <div className="stagger space-y-4">
+      {dashboardGroups
+        .map((group) => [group, grouped[group] ?? []] as const)
+        .filter(([, tools]) => tools.length)
+        .map(([group, tools]) => {
+          const HeaderIcon = tools[0]?.icon ?? Settings;
+          return (
+            <Card key={group} className="overflow-hidden">
+              <CardHeader className="flex-row items-center gap-2 space-y-0 px-4 py-2.5">
+                <span className="flex h-7 w-7 items-center justify-center rounded-md bg-primary/10 text-primary">
+                  <HeaderIcon className="h-4 w-4" />
+                </span>
+                <CardTitle className="text-sm">{group}</CardTitle>
+              </CardHeader>
+              <CardContent className="grid gap-x-6 gap-y-0.5 px-3 py-2.5 sm:grid-cols-2 xl:grid-cols-3">
+                {tools.slice(0, 9).map((tool) => {
+                  const Icon = tool.icon;
+                  return (
+                    <Link
+                      key={tool.path}
+                      href={tool.path}
+                      className="focus-ring group flex items-center gap-2.5 rounded-md px-2 py-1.5 text-[13px] text-foreground/85 transition-colors hover:bg-primary/[0.07] hover:text-primary"
+                    >
+                      <Icon className="h-4 w-4 shrink-0 text-muted-foreground transition-colors group-hover:text-primary" />
+                      <span className="truncate">{tool.label}</span>
+                    </Link>
+                  );
+                })}
+              </CardContent>
+            </Card>
+          );
+        })}
+    </div>
+  );
+}
+
+function ModulePage({ path }: { path: string }) {
+  const route = findRoute(path);
+  const category = route?.category ?? "Module";
+  const table = useModuleTable(category, path);
+  return (
+    <div className="grid gap-4 xl:grid-cols-[1fr_320px]">
+      <div className="space-y-4">
+        <ModuleOverview category={category} path={path} />
+        {category === "Server Administration" || path.startsWith("/servers") ? (
+          <SystemDiscoveryPanel />
+        ) : null}
+        <FeaturedRecords category={category} />
+        {category === "Metrics" ? <MetricsCharts /> : null}
+        {table}
+      </div>
+      <RightPanel category={category} path={path} />
+    </div>
+  );
+}
+
+function SystemDiscoveryPanel() {
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ["system-discovery"],
+    queryFn: () => panelService.system.discovery(),
+  });
+
+  if (isLoading) return <SkeletonPanel />;
+  if (error || data?.error || !data?.data) {
+    return (
+      <ErrorState
+        message="System discovery is unavailable for this session."
+        onRetry={() => void refetch()}
+      />
+    );
+  }
+
+  const discovery = data.data;
+  return (
+    <div className="grid gap-4">
+      <Card>
+        <CardHeader className="flex-row items-start justify-between space-y-0">
+          <div>
+            <CardTitle>Live host discovery</CardTitle>
+            <CardDescription>
+              Read-only Nginx and Docker detection for this CoaxysPanel host.
+            </CardDescription>
+          </div>
+          <Badge variant="success">detected</Badge>
+        </CardHeader>
+        <CardContent className="grid gap-3 md:grid-cols-3">
+          {[
+            ["Panel host", discovery.currentPanel.hostname],
+            ["Frontend proxy", discovery.currentPanel.frontend],
+            ["Backend proxy", discovery.currentPanel.backend],
+            ["Nginx sites", String(discovery.nginx.sites.length)],
+            ["Docker containers", String(discovery.docker.containers.length)],
+            ["Detected", timeAgo(discovery.detectedAt)],
+          ].map(([label, value]) => (
+            <div key={label} className="rounded-md border border-border/60 bg-card/50 p-3">
+              <div className="text-xs font-medium text-muted-foreground">{label}</div>
+              <div className="mt-1 truncate text-sm font-semibold">{value}</div>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+      <div className="grid gap-4 2xl:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Nginx sites</CardTitle>
+            <CardDescription>Parsed from the active Nginx configuration.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <DataTable
+              data={discovery.nginx.sites}
+              columns={nginxColumns}
+              searchPlaceholder="Search Nginx sites"
+            />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Docker containers</CardTitle>
+            <CardDescription>
+              Currently running containers detected on the host.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <DataTable
+              data={discovery.docker.containers}
+              columns={dockerColumns}
+              searchPlaceholder="Search containers"
+            />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+function DatabaseAdminToolsPage({ selectedPath }: { selectedPath: string }) {
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ["database-admin-tools"],
+    queryFn: () => panelService.databases.adminTools(),
+  });
+  const selected = selectedPath.split("/").pop();
+  const tools = data?.data ?? [];
+
+  if (isLoading) return <SkeletonPanel />;
+  if (error || data?.error) {
+    return (
+      <ErrorState
+        message="Database administration tools could not be loaded."
+        onRetry={() => void refetch()}
+      />
+    );
+  }
+
+  return (
+    <div className="grid gap-4 xl:grid-cols-[1fr_340px]">
+      <div className="space-y-4">
+        <Card>
+          <CardHeader>
+            <CardTitle>Database administration launchers</CardTitle>
+            <CardDescription>
+              Open database administration tools without exposing database credentials in
+              CoaxysPanel.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-3 md:grid-cols-3">
+            {tools.map((tool) => (
+              <AdminToolCard key={tool.id} tool={tool} highlighted={tool.id === selected} />
+            ))}
+          </CardContent>
+        </Card>
+        <ModulePage path="/databases" />
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>Connection notes</CardTitle>
+          <CardDescription>
+            phpMyAdmin is reverse-proxied at this panel hostname.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3 text-sm">
+          <div className="rounded-md border border-border/60 bg-muted/35 p-3">
+            <div className="font-medium">Launch URL</div>
+            <div className="mt-1 break-all text-muted-foreground">
+              https://cp.asabbagh.com/phpmyadmin/
+            </div>
+          </div>
+          <p className="text-muted-foreground">
+            Use a real database user such as an application database account. CoaxysPanel does
+            not show stored database passwords.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function AdminToolCard({
+  tool,
+  highlighted,
+}: {
+  tool: DatabaseAdminTool;
+  highlighted: boolean;
+}) {
+  return (
+    <Card className={cn("rounded-md", highlighted && "border-primary/60 bg-primary/[0.04]")}>
+      <CardContent className="flex min-h-48 flex-col p-3">
+        <div className="flex items-start justify-between gap-2">
+          <span className="flex h-10 w-10 items-center justify-center rounded-md bg-primary/10 text-primary">
+            <Database className="h-5 w-5" />
+          </span>
+          <Badge variant={tool.status === "available" ? "success" : "outline"}>
+            {tool.status}
+          </Badge>
+        </div>
+        <div className="mt-3">
+          <h3 className="font-semibold">{tool.name}</h3>
+          <p className="mt-1 text-xs text-muted-foreground">{tool.engine}</p>
+        </div>
+        <p className="mt-3 line-clamp-3 text-sm text-muted-foreground">{tool.note}</p>
+        <div className="mt-auto pt-4">
+          {tool.launchUrl ? (
+            <Button asChild className="h-8 w-full rounded-md text-xs">
+              <a href={tool.launchUrl} target="_blank" rel="noreferrer">
+                <ExternalLink className="h-3.5 w-3.5" />
+                Open in new tab
+              </a>
+            </Button>
+          ) : (
+            <Button disabled variant="outline" className="h-8 w-full rounded-md text-xs">
+              Not enabled
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function FeaturedRecords({ category }: { category: string }) {
+  const records: Record<string, string[]> = {
+    Email: ["admin@example.com", "support@example.com", "DKIM aligned", "Queue: 14 deferred"],
+    Databases: ["coaxys_wp", "coaxys_app", "Remote access restricted", "Last backup verified"],
+    Websites: ["example.com", "docs.example.com", "Staging available", "Rollback ready"],
+    Security: ["Security score", "Firewall active", "Malware scan clean", "API tokens scoped"],
+  };
+  const items = records[category];
+  if (!items) return null;
+  return (
+    <Card>
+      <CardContent className="grid gap-2 p-3 sm:grid-cols-2 xl:grid-cols-4">
+        {items.map((item) => (
+          <div
+            key={item}
+            className="rounded-md border border-border/60 bg-card/50 px-3 py-2 text-sm font-medium transition-colors hover:border-primary/40"
+          >
+            {item}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}
+
+function MetricsCharts() {
+  const { data } = useQuery({
+    queryKey: ["metrics-history"],
+    queryFn: () => panelService.metrics.history(),
+  });
+  const points = data?.data ?? [];
+  if (!points.length) return null;
+  return (
+    <div className="grid gap-4 xl:grid-cols-2">
+      <UsageChart data={points} />
+      <TrafficChart data={points} />
+    </div>
+  );
+}
+
+function ModuleOverview({ category, path }: { category: string; path: string }) {
+  const route = findRoute(path);
+  const Icon = route?.icon ?? Settings;
+  const featureNames = featureMap[category] ?? featureMap.default;
+  return (
+    <Card>
+      <CardHeader className="flex-row items-start justify-between space-y-0">
+        <div>
+          <CardTitle className="flex items-center gap-2">
+            <Icon className="h-5 w-5 text-primary" />
+            {route?.label ?? titleize(path)}
+          </CardTitle>
+          <CardDescription>{route?.description}</CardDescription>
+        </div>
+        {route?.danger ? (
+          <DangerousActionDialog label="Start restore" requiredText="RESTORE" />
+        ) : (
+          <Button size="sm">
+            <Plus className="h-4 w-4" /> New
+          </Button>
+        )}
+      </CardHeader>
+      <CardContent className="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
+        {featureNames.map((feature) => (
+          <div
+            key={feature}
+            className="flex items-center gap-2 rounded-md border border-border/60 bg-card/50 p-2 text-sm transition-colors hover:border-primary/40"
+          >
+            <CheckCircle2 className="h-4 w-4 shrink-0 text-success" />
+            <span className="truncate">{feature}</span>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}
+
+function useModuleTable(category: string, path: string) {
+  if (category === "Websites")
+    return (
+      <QueryTable
+        queryKey={["websites"]}
+        queryFn={() => panelService.websites.list()}
+        columns={websiteColumns}
+        search="Search websites"
+      />
+    );
+  if (category === "Domains")
+    return (
+      <QueryTable
+        queryKey={["domains"]}
+        queryFn={() => panelService.domains.list()}
+        columns={domainColumns}
+        search="Search domains"
+      />
+    );
+  if (category === "Databases")
+    return (
+      <QueryTable
+        queryKey={["databases"]}
+        queryFn={() => panelService.databases.list()}
+        columns={databaseColumns}
+        search="Search databases"
+      />
+    );
+  if (category === "Email")
+    return (
+      <QueryTable
+        queryKey={["mailboxes"]}
+        queryFn={() => panelService.email.list()}
+        columns={mailboxColumns}
+        search="Search mailboxes"
+      />
+    );
+  if (category === "Security")
+    return (
+      <QueryTable
+        queryKey={["security"]}
+        queryFn={() => panelService.security.findings()}
+        columns={securityColumns}
+        search="Search findings"
+      />
+    );
+  if (category === "Backups")
+    return (
+      <QueryTable
+        queryKey={["backups"]}
+        queryFn={() => panelService.backups.list()}
+        columns={backupColumns}
+        search="Search backups"
+      />
+    );
+  if (category === "Automation")
+    return (
+      <QueryTable
+        queryKey={["automation"]}
+        queryFn={() => panelService.automation.list()}
+        columns={automationColumns}
+        search="Search workflows"
+      />
+    );
+  if (category === "Audit")
+    return (
+      <QueryTable
+        queryKey={["audit"]}
+        queryFn={() => panelService.audit.list()}
+        columns={auditColumns}
+        search="Search audit logs"
+      />
+    );
+  if (category === "Server Administration" || path.startsWith("/servers"))
+    return (
+      <QueryTable
+        queryKey={["servers"]}
+        queryFn={() => panelService.servers.list()}
+        columns={serverColumns}
+        search="Search servers"
+      />
+    );
+  if (category === "Software")
+    return (
+      <QueryTable
+        queryKey={["runtimes"]}
+        queryFn={() => panelService.software.runtimes()}
+        columns={runtimeColumns}
+        search="Search runtimes"
+      />
+    );
+  if (category === "Advanced" || path.includes("services"))
+    return (
+      <QueryTable
+        queryKey={["services"]}
+        queryFn={() => panelService.servers.services()}
+        columns={serviceColumns}
+        search="Search services"
+      />
+    );
+  return <GenericOperationsTable />;
+}
+
+function QueryTable<T>({
+  queryKey,
+  queryFn,
+  columns,
+  search,
+}: {
+  queryKey: string[];
+  queryFn: () => Promise<{ data: T[] | null; error: unknown }>;
+  columns: ColumnDef<T>[];
+  search: string;
+}) {
+  const { data, isLoading, error, refetch } = useQuery({ queryKey, queryFn });
+  if (isLoading) return <SkeletonPanel />;
+  if (error || data?.error)
+    return (
+      <ErrorState
+        message="The mock query returned an error state."
+        onRetry={() => void refetch()}
+      />
+    );
+  return <DataTable data={data?.data ?? []} columns={columns} searchPlaceholder={search} />;
+}
+
+function GenericOperationsTable() {
+  const rows = [
+    {
+      name: "General settings",
+      status: "healthy",
+      owner: "coaxys",
+      updated: "2026-06-12 10:14 UTC",
+    },
+    {
+      name: "Feature policy",
+      status: "healthy",
+      owner: "server-admin",
+      updated: "2026-06-11 18:22 UTC",
+    },
+    {
+      name: "Notification route",
+      status: "warning",
+      owner: "support",
+      updated: "2026-06-10 09:01 UTC",
+    },
+  ];
+  const columns: ColumnDef<(typeof rows)[number]>[] = [
+    { accessorKey: "name", header: "Name" },
+    {
+      accessorKey: "status",
+      header: "Status",
+      cell: ({ row }) => <StatusBadge status={row.original.status as "healthy" | "warning"} />,
+    },
+    { accessorKey: "owner", header: "Owner" },
+    { accessorKey: "updated", header: "Updated" },
+  ];
+  return <DataTable data={rows} columns={columns} searchPlaceholder="Search records" />;
+}
+
+function RightPanel({ category, path }: { category: string; path: string }) {
+  return (
+    <aside className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>Operational state</CardTitle>
+          <CardDescription>Mock backend readiness</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {[
+            ["Permission checks", 100],
+            ["Validation coverage", 92],
+            ["Mock service health", 98],
+            ["Contract readiness", 86],
+          ].map(([label, value]) => (
+            <div key={String(label)} className="space-y-1">
+              <div className="flex justify-between text-xs">
+                <span>{String(label)}</span>
+                <span>{Number(value)}%</span>
+              </div>
+              <Progress value={Number(value)} />
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Context</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm">
+          <div className="flex justify-between gap-2">
+            <span className="text-muted-foreground">Category</span>
+            <span>{category}</span>
+          </div>
+          <div className="flex justify-between gap-2">
+            <span className="text-muted-foreground">Route</span>
+            <span className="truncate">{path}</span>
+          </div>
+          <div className="flex justify-between gap-2">
+            <span className="text-muted-foreground">Mode</span>
+            <span>Mock data</span>
+          </div>
+        </CardContent>
+      </Card>
+    </aside>
+  );
+}
+
+function LogsPage() {
+  const lines = Array.from({ length: 120 }, (_, index) => {
+    const level = index % 17 === 0 ? "error" : index % 7 === 0 ? "warn" : "info";
+    return `[2026-06-12T${String(index % 24).padStart(2, "0")}:14:22Z] ${level} request_id=req_${index.toString(16)} path=/index.php status=${level === "error" ? 500 : 200}`;
+  });
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardContent className="grid gap-3 p-3 md:grid-cols-4">
+          <Input placeholder="Filter logs" />
+          <Input placeholder="Severity" />
+          <Input placeholder="Request ID" />
+          <Button>Export logs</Button>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent className="max-h-[560px] overflow-auto p-0 font-mono text-xs">
+          {lines.map((line) => {
+            const level = line.includes(" error ")
+              ? "error"
+              : line.includes(" warn ")
+                ? "warn"
+                : "info";
+            return (
+              <div
+                key={line}
+                className={cn(
+                  "whitespace-pre-wrap break-all border-b border-border/40 px-3 py-1.5 transition-colors odd:bg-muted/30 hover:bg-primary/[0.05]",
+                  level === "error" && "border-l-2 border-l-destructive text-destructive",
+                  level === "warn" && "border-l-2 border-l-warning text-warning",
+                )}
+              >
+                {line}
+              </div>
+            );
+          })}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function AutomationBuilder() {
+  const nodes = [
+    ["Trigger", "Git push, schedule, webhook, backup completion"],
+    ["Condition", "Branch, environment, status, resource threshold"],
+    ["Action", "Deploy, backup, notify, issue certificate, run mock task"],
+    ["Branch", "Production approval and staging path"],
+  ];
+  return (
+    <div className="grid gap-4 lg:grid-cols-[1fr_320px]">
+      <Card>
+        <CardHeader>
+          <CardTitle>Visual workflow builder</CardTitle>
+          <CardDescription>
+            Build triggers, conditions, actions, branches, validation, test mode, and execution
+            preview.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="stagger grid gap-4 md:grid-cols-2">
+          {nodes.map(([title, description], index) => (
+            <div
+              key={title}
+              className="relative rounded-lg border border-border/60 bg-card/50 p-4 transition-all duration-200 hover:border-primary/40 hover:shadow-glow-sm"
+            >
+              <span className="flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-primary to-primary/70 text-xs font-bold text-primary-foreground shadow-glow-sm">
+                {index + 1}
+              </span>
+              <h3 className="mt-3 font-display font-semibold">{title}</h3>
+              <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Execution preview</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <Button className="w-full">Validate workflow</Button>
+          <Button className="w-full" variant="outline">
+            Run test mode
+          </Button>
+          <Button className="w-full" variant="outline">
+            Save workflow
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function RestorePage() {
+  return (
+    <div className="grid gap-4 lg:grid-cols-[1fr_340px]">
+      <WizardForm
+        kind="restore"
+        steps={[
+          "Backup selection",
+          "Restore scope",
+          "Conflict policy",
+          "Reason",
+          "Two-factor confirmation",
+          "Review",
+        ]}
+      />
+      <Card>
+        <CardHeader>
+          <CardTitle>Danger zone</CardTitle>
+          <CardDescription>
+            Restores require typed confirmation and mock two-factor approval.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <DangerousActionDialog label="Restore backup" requiredText="RESTORE" />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function SecurityDashboard() {
+  return (
+    <div className="space-y-4">
+      <div className="stagger grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+        {[
+          ["Security score", "86/100", Shield],
+          ["Critical findings", "0", CheckCircle2],
+          ["Blocked IPs", "38", Network],
+          ["Failed logins", "12", KeyRound],
+        ].map(([label, value, Icon]) => (
+          <Card key={String(label)} className="group hover:shadow-glow-sm">
+            <CardContent className="flex items-center justify-between p-4">
+              <div>
+                <div className="text-xs text-muted-foreground">{String(label)}</div>
+                <div className="mt-1 font-display text-2xl font-semibold tracking-tight">
+                  {String(value)}
+                </div>
+              </div>
+              <span className="flex h-11 w-11 items-center justify-center rounded-lg bg-primary/10 transition-transform duration-200 group-hover:scale-110">
+                <Icon className="h-5 w-5 text-primary" />
+              </span>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+      <ModulePage path="/security" />
+    </div>
+  );
+}
+
+function PermissionMatrix() {
+  const modules = routeItems.filter(
+    (item, index, array) =>
+      array.findIndex((entry) => entry.permission === item.permission) === index,
+  );
+  const roles = [
+    "Super administrator",
+    "Server administrator",
+    "Reseller",
+    "Hosting account owner",
+    "Developer",
+    "Billing viewer",
+    "Support operator",
+    "Read-only auditor",
+    "Custom role",
+  ];
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Permission editor</CardTitle>
+        <CardDescription>
+          Detailed module access matrix for built-in and custom roles.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="overflow-x-auto">
+        <table className="w-full min-w-[900px] border-collapse text-sm">
+          <thead>
+            <tr className="bg-muted/50">
+              <th className="border border-border/60 px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+                Module
+              </th>
+              {roles.map((role) => (
+                <th
+                  key={role}
+                  className="border border-border/60 px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
+                >
+                  {role}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {modules.map((module) => (
+              <tr key={module.permission} className="transition-colors hover:bg-primary/[0.04]">
+                <td className="border border-border/50 px-3 py-2 font-medium">
+                  {module.category}
+                </td>
+                {roles.map((role, index) => (
+                  <td
+                    key={`${module.permission}-${role}`}
+                    className="border border-border/50 px-3 py-2"
+                  >
+                    <input
+                      type="checkbox"
+                      className="h-4 w-4 accent-[hsl(var(--primary))]"
+                      defaultChecked={index < 4 || role === "Super administrator"}
+                      aria-label={`${role} ${module.category}`}
+                    />
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </CardContent>
+    </Card>
+  );
+}
+
+function SettingsPage() {
+  return (
+    <div className="space-y-4">
+      <AppearanceSettings />
+      <SettingsFormPanels />
+    </div>
+  );
+}
+
+function SettingsFormPanels() {
+  return (
+    <div className="grid gap-4 xl:grid-cols-[1fr_360px]">
+      <Card>
+        <CardHeader>
+          <CardTitle>Panel settings</CardTitle>
+          <CardDescription>
+            Branding, theme, locale, security, notifications, defaults, APIs, privacy, and
+            maintenance.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-4 md:grid-cols-2">
+          {[
+            "Branding",
+            "Logo upload",
+            "Accent color",
+            "Locale",
+            "Date and time format",
+            "Session timeout",
+            "Password policy",
+            "Two-factor policy",
+            "Email settings",
+            "Backup defaults",
+            "DNS defaults",
+            "SSL defaults",
+            "Runtime defaults",
+            "File-manager settings",
+            "API settings",
+            "Feature flags",
+            "Privacy",
+            "Data retention",
+            "Maintenance mode",
+          ].map((item) => (
+            <label key={item} className="space-y-1 text-sm">
+              <span className="font-medium">{item}</span>
+              <Input defaultValue={item.includes("color") ? "#155EEF" : "Configured"} />
+            </label>
+          ))}
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Live branding preview</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="rounded-lg border bg-background p-4">
+            <div className="mb-4 flex items-center gap-3">
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary font-bold text-primary-foreground">
+                CP
+              </div>
+              <div>
+                <div className="font-semibold">CoaxysPanel</div>
+                <div className="text-xs text-muted-foreground">
+                  Server Hosting Control Center
+                </div>
+              </div>
+            </div>
+            <Button className="w-full">Preview primary action</Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+const websiteSteps = [
+  "General information",
+  "Domain selection",
+  "Runtime",
+  "Repository or upload",
+  "Database",
+  "Environment variables",
+  "Resource limits",
+  "SSL",
+  "Backup policy",
+  "Review and create",
+];
+
+const databaseSteps = [
+  "Database name",
+  "User",
+  "Password",
+  "Permissions",
+  "Remote access",
+  "Backup policy",
+  "Confirmation",
+];
+
+const backupSteps = [
+  "Scope",
+  "Destination",
+  "Schedule",
+  "Retention",
+  "Encryption",
+  "Verification",
+  "Review",
+];
+
+const featureMap: Record<string, string[]> = {
+  Websites: [
+    "Website list",
+    "Runtime configuration",
+    "Deployment history",
+    "Logs",
+    "Cloning",
+    "Staging",
+    "Maintenance mode",
+    "SSL assignment",
+    "Rollback",
+  ],
+  Domains: [
+    "Domains",
+    "Subdomains",
+    "Aliases",
+    "Redirects",
+    "DNSSEC",
+    "Nameservers",
+    "Propagation status",
+    "Certificate status",
+  ],
+  Databases: [
+    "Database wizard",
+    "Users",
+    "Privilege matrix",
+    "Remote access",
+    "Backups",
+    "Restore",
+    "Active connections",
+    "Slow queries",
+  ],
+  Email: [
+    "Mailboxes",
+    "Forwarders",
+    "Routing",
+    "Filters",
+    "DKIM",
+    "SPF",
+    "DMARC",
+    "Queue",
+    "Client configuration",
+  ],
+  Metrics: [
+    "Visitors",
+    "Access logs",
+    "Error logs",
+    "Bandwidth",
+    "Resource usage",
+    "Top URLs",
+    "Top countries",
+    "SSL timeline",
+  ],
+  Security: [
+    "SSL/TLS",
+    "SSH",
+    "Firewall",
+    "Malware scanning",
+    "Security score",
+    "Passkeys",
+    "API tokens",
+    "Sessions",
+  ],
+  Software: [
+    "PHP manager",
+    "Node.js manager",
+    "Python manager",
+    "Docker apps",
+    "Composer",
+    "npm scripts",
+    "Redis",
+    "OPcache",
+  ],
+  Advanced: [
+    "Cron jobs",
+    "DNS lookup",
+    "Terminal",
+    "Log viewer",
+    "Queue manager",
+    "API explorer",
+    "Timezone",
+    "Maintenance",
+  ],
+  "Server Administration": [
+    "Server overview",
+    "Services",
+    "Processes",
+    "Network",
+    "Updates",
+    "Filesystem mounts",
+    "Cluster",
+    "Migration",
+  ],
+  Users: [
+    "Hosting users",
+    "Team members",
+    "Roles",
+    "Invitations",
+    "Impersonation",
+    "Suspensions",
+    "Migration",
+    "Sessions",
+  ],
+  Resellers: [
+    "Reseller accounts",
+    "Packages",
+    "Quotas",
+    "Feature lists",
+    "Ownership transfer",
+    "Account migration",
+  ],
+  Backups: [
+    "Full backup",
+    "Website backup",
+    "Database backup",
+    "Email backup",
+    "Snapshots",
+    "Retention",
+    "Destinations",
+    "Verification",
+  ],
+  Automation: [
+    "Scheduled tasks",
+    "Pipelines",
+    "Webhooks",
+    "Triggers",
+    "Conditions",
+    "Actions",
+    "Retry policies",
+    "Execution history",
+  ],
+  Notifications: [
+    "Notification center",
+    "Read state",
+    "Categories",
+    "Preferences",
+    "Email settings",
+    "Webhooks",
+    "Critical alerts",
+  ],
+  Support: [
+    "Documentation",
+    "Knowledge base",
+    "Diagnostics",
+    "Tickets",
+    "Replies",
+    "Attachments",
+    "Diagnostic report",
+  ],
+  Preferences: [
+    "Branding",
+    "Theme",
+    "Locale",
+    "Session timeout",
+    "Security defaults",
+    "Feature flags",
+    "Privacy",
+  ],
+  default: [
+    "Search",
+    "Filtering",
+    "Sorting",
+    "Bulk operations",
+    "Validation",
+    "Loading states",
+    "Error states",
+    "Permission states",
+  ],
+};