diff --git a/src/components/common/ErrorBoundary.jsx b/src/components/common/ErrorBoundary.jsx
new file mode 100644
index 00000000..677a67fa
--- /dev/null
+++ b/src/components/common/ErrorBoundary.jsx
@@ -0,0 +1,59 @@
+'use client'
+
+import React from 'react'
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { hasError: false, error: null, errorInfo: null }
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI
+    return { hasError: true }
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // Log detailed error information
+    console.error('🚨 React Error Boundary caught an error:', {
+      error,
+      errorInfo,
+      timestamp: new Date().toISOString(),
+      componentStack: errorInfo.componentStack,
+      errorStack: error.stack
+    })
+
+    this.setState({
+      error: error,
+      errorInfo: errorInfo
+    })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <div style={{ padding: '20px', border: '1px solid red', margin: '20px' }}>
+          <h2>🚨 Something went wrong!</h2>
+          <details style={{ whiteSpace: 'pre-wrap' }}>
+            <summary>Error details</summary>
+            <p><strong>Timestamp:</strong> {new Date().toISOString()}</p>
+            <p><strong>Error:</strong> {this.state.error && this.state.error.toString()}</p>
+            <p><strong>Stack Trace:</strong></p>
+            <pre>{this.state.errorInfo.componentStack}</pre>
+          </details>
+          <button 
+            onClick={() => this.setState({ hasError: false, error: null, errorInfo: null })}
+            style={{ marginTop: '10px', padding: '10px 20px' }}
+          >
+            Try again
+          </button>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary