diff --git a/web/client/src/components/ErrorBoundary.jsx b/web/client/src/components/ErrorBoundary.jsx
new file mode 100644
index 0000000..bad453f
--- /dev/null
+++ b/web/client/src/components/ErrorBoundary.jsx
@@ -0,0 +1,34 @@
+import { Component } from "react";
+
+export default class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, message: "" };
+  }
+
+  static getDerivedStateFromError(err) {
+    return { hasError: true, message: err?.message || "Unknown error" };
+  }
+
+  componentDidCatch(err, info) {
+    console.error("[ErrorBoundary]", err, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ padding: "2rem", textAlign: "center" }}>
+          <h2>Something went wrong.</h2>
+          <p style={{ color: "#666", marginTop: "0.5rem" }}>{this.state.message}</p>
+          <button
+            style={{ marginTop: "1rem", padding: "0.5rem 1.5rem", cursor: "pointer" }}
+            onClick={() => this.setState({ hasError: false, message: "" })}
+          >
+            Try again
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
diff --git a/web/client/src/main.jsx b/web/client/src/main.jsx
index 400c2d2..361f947 100644
--- a/web/client/src/main.jsx
+++ b/web/client/src/main.jsx
@@ -4,11 +4,14 @@ import { BrowserRouter } from "react-router-dom";
 import "./i18n.js";
 import "./index.css";
 import App from "./App.jsx";
+import ErrorBoundary from "./components/ErrorBoundary.jsx";
 
 createRoot(document.getElementById("root")).render(
   <StrictMode>
     <BrowserRouter>
-      <App />
+      <ErrorBoundary>
+        <App />
+      </ErrorBoundary>
     </BrowserRouter>
   </StrictMode>
 );