diff --git a/pages/500.tsx b/pages/500.tsx
new file mode 100644
index 0000000..ad00f82
--- /dev/null
+++ b/pages/500.tsx
@@ -0,0 +1,37 @@
+import { ContentContainer, Page } from "@/components/layouts";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Footer } from "@/components/utils/Footer";
+import { NavBar } from "@/components/utils/NavBar";
+import { fontFangZhengXiaoBiaoSongCN, fontSourceSerifScreenCN } from "@/styles/font";
+import { MdOutlineDangerous } from "react-icons/md";
+
+export default function ServerErrorPage() {
+  const handleGoBack = () => {
+    if (window == null) return;
+    window.history.back();
+  };
+  return (
+    <Page>
+      <NavBar />
+      <ContentContainer>
+        <h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
+          {"INVALID OPERATION"}
+        </h2>
+        <Separator />
+        <div className="my-5 flex flex-col justify-center">
+          <MdOutlineDangerous className="mx-auto my-4" size={"6em"} />
+          <p className={`${fontSourceSerifScreenCN.className} mx-auto my-3 text-center text-xl`}>
+            {"Something went wrong. Please try again later."}
+          </p>
+          <div className="my-5 flex justify-center">
+            <Button onClick={handleGoBack} className="font-bold">
+              {"GO BACK"}
+            </Button>
+          </div>
+        </div>
+      </ContentContainer>
+      <Footer />
+    </Page>
+  );
+}