diff --git a/app/error.tsx b/app/error.tsx
new file mode 100644
index 0000000..65f7cbb
--- /dev/null
+++ b/app/error.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { NavigateBack } from "@/components/common/NavigateBack";
+import Image from "next/image";
+import { useEffect } from "react";
+
+export default function Error({ error }: { error: Error }) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="flex flex-col justify-center items-center gap-4 h-[640px]">
+      <Image width={240} height={120} src="/500.png" alt="derpy hooves" />
+      <h2 className="text-3xl">shit broke</h2>
+      <h3>{String(error)}</h3>
+      <NavigateBack />
+    </div>
+  );
+}
diff --git a/public/500.png b/public/500.png
new file mode 100644
index 0000000..e014ecb
Binary files /dev/null and b/public/500.png differ