diff --git a/frontend/src/resources/server/actions.tsx b/frontend/src/resources/server/actions.tsx
new file mode 100644
index 000000000..4941bddc4
--- /dev/null
+++ b/frontend/src/resources/server/actions.tsx
@@ -0,0 +1,25 @@
+import { ActionWithDialog } from "@components/util";
+import { useRead, useWrite } from "@hooks";
+import { Trash } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+
+export const DeleteServer = ({ id }: { id: string }) => {
+  const nav = useNavigate();
+  const { data: d } = useRead("GetServer", { id });
+  const { mutateAsync, isLoading } = useWrite("DeleteServer");
+
+  if (!d) return null;
+  return (
+    <ActionWithDialog
+      name={d.name}
+      title="Delete Server"
+      intent="danger"
+      icon={<Trash className="h-4 w-4" />}
+      onClick={async () => {
+        await mutateAsync({ id });
+        nav("/");
+      }}
+      disabled={isLoading}
+    />
+  );
+};
diff --git a/frontend/src/resources/server/index.tsx b/frontend/src/resources/server/index.tsx
index 9cec11ec5..a372c955f 100644
--- a/frontend/src/resources/server/index.tsx
+++ b/frontend/src/resources/server/index.tsx
@@ -23,6 +23,7 @@ import { Types } from "@monitor/client";
 import { ConfigLayout } from "@layouts/page";
 import { Button } from "@ui/button";
 import { ConfigAgain } from "@components/config/again";
+import { DeleteServer } from "./actions";
 
 export const ServerCard = ({ id }: { id: string }) => {
   const servers = useRead("ListServers", {}).data;
@@ -145,6 +146,10 @@ export const ServerPage = () => {
       <ResourceUpdates type="Server" id={id} />
       <ServerStats />
       <ServerConfig id={id} />
+      <div className="flex items-center justify-between w-full">
+        danger zone {"B^)"}
+        <DeleteServer id={id} />
+      </div>
     </Resource>
   );
 };