diff --git a/app/(dashboard)/error.tsx b/app/(dashboard)/error.tsx
new file mode 100644
index 0000000..d37423c
--- /dev/null
+++ b/app/(dashboard)/error.tsx
@@ -0,0 +1,38 @@
+"use client"; // Error boundaries must be Client Components
+
+import { Button } from "@/components/ui/button";
+import { TriangleAlert } from "lucide-react";
+import { useEffect } from "react";
+export default function DashboardError({
+	error,
+	reset,
+}: {
+	error: Error & { digest?: string };
+	reset: () => void;
+}) {
+	useEffect(() => {
+		// Log the error to an error reporting service
+		console.error(error);
+	}, [error]);
+
+	return (
+		<div className="error-bg dark:error-bg-dark rounded-lg p-4 h-full flex flex-col gap-4 items-center justify-center">
+			<div className="bg-white dark:bg-transparent p-6 rounded flex flex-col items-center justify-center gap-4">
+				<TriangleAlert color="red" />
+				<h2 className="text-red-500 text-xl font-semibold">
+					Something went wrong!
+				</h2>
+				<Button
+					variant={"destructive"}
+					size={"lg"}
+					onClick={
+						// Attempt to recover by trying to re-render the segment
+						() => reset()
+					}
+				>
+					Try again
+				</Button>
+			</div>
+		</div>
+	);
+}