Everything broke, trying to fix

app/api/system/shutdown/route.ts

@@ -0,0 +1,17 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(req: NextRequest) {
+	const token = req.cookies.get("token")?.value;
+	if (!token) {
+		return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+	}
+
+	const res = await fetch("http://localhost:3001/system/shutdown", {
+		method: "POST",
+		headers: {
+			Authorization: `Bearer ${token}`,
+		},
+	});
+
+	return NextResponse.json(await res.json(), { status: res.status });
+}

app/components/serverMenu.tsx

@@ -81,6 +81,13 @@ export default function ControlPanel({ onClose }: { onClose: () => void }) {
 		showToast(res.ok ? "Rebooting..." : "Reboot failed", res.ok);
 	}
 
+	async function handleShutdown() {
+		if (!confirm("Shut down the server? You will need physical access to turn it back on."))
+			return;
+		const res = await fetch("/api/system/shutdown", { method: "POST" });
+		showToast(res.ok ? "Shutting down..." : "Shutdown failed", res.ok);
+	}
+
 	const isLoading = (service: string, action: string) =>
 		loading[`${service}-${action}`] !== undefined;
 
@@ -203,6 +210,22 @@ export default function ControlPanel({ onClose }: { onClose: () => void }) {
 						</button>
 					</div>
 				</div>
+				<div className="bg-gray-50 border border-gray-100 rounded-xl px-4 py-3.5 flex items-center justify-between mt-2">
+					<div>
+						<p className="text-[14px] text-gray-900 m-0 mb-0.5">
+							Shut down server
+						</p>
+						<p className="text-[12px] text-gray-400 m-0">
+							Powers off the machine
+						</p>
+					</div>
+					<button
+						onClick={handleShutdown}
+						className="border border-red-200 rounded-lg px-3.5 py-1.5 text-[13px] text-red-400 cursor-pointer hover:bg-red-50 transition-colors whitespace-nowrap"
+					>
+						Shut down
+					</button>
+				</div>
 
 				{/* Toast */}
 				{toast && (

app/globals.css

@@ -1,13 +1,20 @@
 @import "tailwindcss";
 
+
 :root {
 	--background: #f9fafb;
 	--foreground: #111827;
+	--font-dm-sans: "DM Sans", sans-serif;
+	--font-playfair: "Playfair Display", serif;
 }
 
 @theme inline {
 	--color-background: var(--background);
 	--color-foreground: var(--foreground);
+
+	/* Link Tailwind to the Next.js Font Variables */
+	--font-sans: var(--font-dm-sans), ui-sans-serif, system-ui;
+	--font-serif: var(--font-playfair), ui-serif, Georgia;
 }
 
 body {