diff --git a/src/presentation/App.jsx b/src/presentation/App.jsx
index 2ee0d768..e5bf46ed 100644
--- a/src/presentation/App.jsx
+++ b/src/presentation/App.jsx
@@ -17,6 +17,7 @@ import { CompositeResourceKind } from './pages/CompositeResourceKind.jsx';
 import { Search } from './pages/Search.jsx';
 import { useAppContext } from './providers/AppProvider.jsx';
 import { OnWatchResourcesProvider } from './providers/OnWatchResourcesProvider.jsx';
+import { ErrorBoundary } from './components/common/ErrorBoundary.jsx';
 import { Box, Text, VStack, Icon, Button } from '@chakra-ui/react';
 import { FiAlertCircle, FiRefreshCw } from 'react-icons/fi';
 
@@ -106,44 +107,46 @@ const PublicRoute = ({ children }) => {
 
 function App() {
   return (
-    <Routes>
-      <Route
-        path="/login"
-        element={
-          <PublicRoute>
-            <Login />
-          </PublicRoute>
-        }
-      />
-      <Route
-        path="/*"
-        element={
-          <ProtectedRoute>
-            <OnWatchResourcesProvider>
-            <Layout>
-              <Routes>
-                <Route index element={<Dashboard />} />
-                <Route path="providers" element={<Providers />} />
-                <Route path="functions" element={<Functions />} />
-                <Route path="compositions" element={<Compositions />} />
-                <Route path="xrds" element={<CompositeResourceDefinitions />} />
-                <Route path="mrds" element={<ManagedResourceDefinitions />} />
-                <Route path="mraps" element={<ManagedResourceActivationPolicies />} />
-                <Route path="composite-resources" element={<CompositeResources />} />
-                <Route path="composite-resources/:kind" element={<CompositeResourceKind />} />
-                <Route path="claims" element={<Claims />} />
-                <Route path="managed-resources" element={<Resources />} />
-                <Route path="resources" element={<Navigate to="/managed-resources" replace />} />
-                <Route path="resources/:kind" element={<ResourceKind />} />
-                <Route path="search" element={<Search />} />
-                <Route path="settings/*" element={<Settings />} />
-              </Routes>
-            </Layout>
-            </OnWatchResourcesProvider>
-          </ProtectedRoute>
-        }
-      />
-    </Routes>
+    <ErrorBoundary>
+      <Routes>
+        <Route
+          path="/login"
+          element={
+            <PublicRoute>
+              <Login />
+            </PublicRoute>
+          }
+        />
+        <Route
+          path="/*"
+          element={
+            <ProtectedRoute>
+              <OnWatchResourcesProvider>
+              <Layout>
+                <Routes>
+                  <Route index element={<Dashboard />} />
+                  <Route path="providers" element={<Providers />} />
+                  <Route path="functions" element={<Functions />} />
+                  <Route path="compositions" element={<Compositions />} />
+                  <Route path="xrds" element={<CompositeResourceDefinitions />} />
+                  <Route path="mrds" element={<ManagedResourceDefinitions />} />
+                  <Route path="mraps" element={<ManagedResourceActivationPolicies />} />
+                  <Route path="composite-resources" element={<CompositeResources />} />
+                  <Route path="composite-resources/:kind" element={<CompositeResourceKind />} />
+                  <Route path="claims" element={<Claims />} />
+                  <Route path="managed-resources" element={<Resources />} />
+                  <Route path="resources" element={<Navigate to="/managed-resources" replace />} />
+                  <Route path="resources/:kind" element={<ResourceKind />} />
+                  <Route path="search" element={<Search />} />
+                  <Route path="settings/*" element={<Settings />} />
+                </Routes>
+              </Layout>
+              </OnWatchResourcesProvider>
+            </ProtectedRoute>
+          }
+        />
+      </Routes>
+    </ErrorBoundary>
   );
 }
 
diff --git a/src/presentation/components/common/ErrorBoundary.jsx b/src/presentation/components/common/ErrorBoundary.jsx
new file mode 100644
index 00000000..cbeb0255
--- /dev/null
+++ b/src/presentation/components/common/ErrorBoundary.jsx
@@ -0,0 +1,46 @@
+import { Component } from 'react';
+import { Box, Text, VStack, Icon, Button } from '@chakra-ui/react';
+import { FiAlertCircle, FiRefreshCw } from 'react-icons/fi';
+
+export class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('Unhandled render error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <Box display="flex" justifyContent="center" alignItems="center" minH="100vh" bg="gray.50" _dark={{ bg: 'gray.900' }}>
+          <VStack spacing={4} maxW="500px" p={8} bg="white" _dark={{ bg: 'gray.800', borderColor: 'gray.700' }} borderRadius="lg" boxShadow="lg" border="1px solid" borderColor="gray.200">
+            <Icon as={FiAlertCircle} boxSize={12} color="red.500" />
+            <Text fontSize="xl" fontWeight="bold" textAlign="center">
+              Something went wrong
+            </Text>
+            <Text fontSize="md" color="gray.600" _dark={{ color: 'gray.400' }} textAlign="center">
+              An unexpected error occurred while rendering this page. Reloading the page usually resolves it.
+            </Text>
+            <Button
+              leftIcon={<FiRefreshCw />}
+              colorScheme="blue"
+              onClick={() => window.location.reload()}
+              mt={2}
+            >
+              Reload Page
+            </Button>
+          </VStack>
+        </Box>
+      );
+    }
+
+    return this.props.children;
+  }
+}