diff --git a/src/app/admin/permissions/[id]/error.tsx b/src/app/admin/permissions/[id]/error.tsx
new file mode 100644
index 0000000000..614ffae24b
--- /dev/null
+++ b/src/app/admin/permissions/[id]/error.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function PermissionRankError({
+	error,
+	reset,
+}: {
+	error: Error & { digest?: string };
+	reset: () => void;
+}) {
+	useEffect(() => {
+		console.error(error);
+	}, [error]);
+
+	return (
+		<Card className="border-[var(--admin-error-border)]">
+			<CardHeader>
+				<CardTitle>Permission page error</CardTitle>
+			</CardHeader>
+			<CardContent className="space-y-4">
+				<p className="text-sm text-muted-foreground">
+					The rank editor could not be rendered. The technical detail below is
+					visible only inside this protected admin route.
+				</p>
+				<pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-md bg-muted p-3 text-xs">
+					{error.stack ?? error.message}
+				</pre>
+				{error.digest ? (
+					<p className="text-xs text-muted-foreground">
+						Reference: {error.digest}
+					</p>
+				) : null}
+				<Button type="button" onClick={reset}>
+					Try again
+				</Button>
+			</CardContent>
+		</Card>
+	);
+}