diff --git a/src/app/error.tsx b/src/app/error.tsx
new file mode 100644
index 0000000..f6793f1
--- /dev/null
+++ b/src/app/error.tsx
@@ -0,0 +1,44 @@
+"use client"; // Error boundaries must be Client Components
+
+import { Button } from "@/components/ui/button";
+import {Collapsible, CollapsibleTrigger,  CollapsibleContent } from "@/components/ui/collapsible";
+import { useEffect } from "react";
+
+export default function ErrorPage({
+	error,
+	reset,
+}: {
+	error: Error & { digest?: string };
+	reset: () => void;
+}) {
+	useEffect(() => {
+		// Log the error to an error reporting service
+		console.error(error);
+	}, [error]);
+
+	return (
+		<div className="flex flex-col gap-2 p-4">
+			<h2>Something went wrong!</h2>
+			<Button
+                className='w-min'
+				type="submit"
+				onClick={
+					// Attempt to recover by trying to re-render the segment
+					() => reset()
+				}
+			>
+				Try again
+			</Button>
+            <Collapsible>
+            <CollapsibleTrigger>
+                <span className="text-xs text-gray-500">Show error details</span>
+            </CollapsibleTrigger>
+            <CollapsibleContent className="bg-gray-100 p-2 rounded-md mt-2">
+                <pre className='text-xs'>
+                    {error.message}
+                </pre>
+            </CollapsibleContent>
+            </Collapsible>
+		</div>
+	);
+}