diff --git a/packages/react/src/ErrorHandler.tsx b/packages/react/src/ErrorHandler.tsx
new file mode 100644
index 0000000..378965e
--- /dev/null
+++ b/packages/react/src/ErrorHandler.tsx
@@ -0,0 +1,19 @@
+import { isRouteErrorResponse, useRouteError } from "react-router-dom";
+import UnexpectedError from "./errors/Unexpected";
+import PageNotFound from "./errors/PageNotFound";
+
+function ErrorBoundary() {
+  const error = useRouteError();
+
+  if (isRouteErrorResponse(error)) {
+    if (error.status === 404) {
+      return <PageNotFound />;
+    } else {
+      return <UnexpectedError />;
+    }
+  } else {
+    return <UnexpectedError />;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/packages/react/src/errors/PageNotFound.tsx b/packages/react/src/errors/PageNotFound.tsx
new file mode 100644
index 0000000..bc37876
--- /dev/null
+++ b/packages/react/src/errors/PageNotFound.tsx
@@ -0,0 +1,22 @@
+import { Link } from "react-router-dom";
+import { Button } from "../../components/Button";
+
+function PageNotFound() {
+  return (
+    <main className="flex-grow h-full flex flex-col justify-center items-center gap-8">
+      <section className="flex flex-col justify-center items-center text-center gap-2">
+        <h1 className="text-4xl font-bold">Page not found</h1>
+        <p className="text-base">
+          The page you are looking for does not exist.
+        </p>
+      </section>
+      <section className="flex flex-row justify-center items-center text-center gap-2">
+        <Button asChild preset="default">
+          <Link to="/">Go home</Link>
+        </Button>
+      </section>
+    </main>
+  );
+}
+
+export default PageNotFound;
diff --git a/packages/react/src/errors/Unexpected.tsx b/packages/react/src/errors/Unexpected.tsx
new file mode 100644
index 0000000..930785f
--- /dev/null
+++ b/packages/react/src/errors/Unexpected.tsx
@@ -0,0 +1,22 @@
+import { Link } from "react-router-dom";
+import { Button } from "../../components/Button";
+
+function UnexpectedError() {
+  return (
+    <main className="flex-grow h-full flex flex-col justify-center items-center gap-8">
+      <section className="flex flex-col justify-center items-center text-center gap-2">
+        <h1 className="text-4xl font-bold">Something went wrong</h1>
+        <p className="text-base">
+          There was an unexpected error while loading the page.
+        </p>
+      </section>
+      <section className="flex flex-row justify-center items-center text-center gap-2">
+        <Button asChild preset="default">
+          <Link to="/">Go home</Link>
+        </Button>
+      </section>
+    </main>
+  );
+}
+
+export default UnexpectedError;