diff --git a/app/layout.tsx b/app/layout.tsx
index 51f8d0e..4a4421d 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import ErrorBoundary from "@/components/ErrorBoundary";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -17,7 +18,9 @@ export default function RootLayout({
   return (
     <html lang="en" className="dark" suppressHydrationWarning>
       <body className={inter.className} suppressHydrationWarning>
-        {children}
+        <ErrorBoundary>
+          {children}
+        </ErrorBoundary>
       </body>
     </html>
   );
diff --git a/components/ErrorBoundary.tsx b/components/ErrorBoundary.tsx
new file mode 100644
index 0000000..6cca40a
--- /dev/null
+++ b/components/ErrorBoundary.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+    children: ReactNode;
+}
+
+interface State {
+    hasError: boolean;
+    error: Error | null;
+    errorInfo: ErrorInfo | null;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+    constructor(props: Props) {
+        super(props);
+        this.state = { hasError: false, error: null, errorInfo: null };
+    }
+
+    static getDerivedStateFromError(error: Error): State {
+        return { hasError: true, error, errorInfo: null };
+    }
+
+    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+        console.error("ErrorBoundary caught an error:", error, errorInfo);
+        this.setState({ errorInfo });
+    }
+
+    handleReload = () => {
+        window.location.reload();
+    };
+
+    handleClearStorage = () => {
+        try {
+            localStorage.clear();
+            sessionStorage.clear();
+            window.location.reload();
+        } catch (e) {
+            console.error("Failed to clear storage:", e);
+            window.location.reload();
+        }
+    };
+
+    render() {
+        if (this.state.hasError) {
+            return (
+                <div className="min-h-screen bg-[#0a0a0b] text-white flex items-center justify-center p-4">
+                    <div className="max-w-md w-full bg-[#18181B] border border-white/10 rounded-2xl p-6 text-center">
+                        <div className="h-16 w-16 mx-auto mb-4 rounded-full bg-red-500/10 flex items-center justify-center">
+                            <svg className="h-8 w-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                            </svg>
+                        </div>
+
+                        <h2 className="text-xl font-bold mb-2">Something went wrong</h2>
+
+                        <p className="text-muted-foreground text-sm mb-4">
+                            An error occurred while rendering the application. This might be due to corrupted data or a temporary issue.
+                        </p>
+
+                        <div className="space-y-3">
+                            <button
+                                onClick={this.handleReload}
+                                className="w-full py-3 px-4 bg-primary text-primary-foreground font-semibold rounded-xl hover:bg-primary/90 transition-all"
+                            >
+                                Reload Page
+                            </button>
+
+                            <button
+                                onClick={this.handleClearStorage}
+                                className="w-full py-3 px-4 bg-white/5 hover:bg-white/10 text-white font-medium rounded-xl transition-all border border-white/5"
+                            >
+                                Clear Cache & Reload
+                            </button>
+                        </div>
+
+                        {process.env.NODE_ENV === 'development' && this.state.error && (
+                            <details className="mt-4 text-left">
+                                <summary className="text-xs text-muted-foreground cursor-pointer">Error Details</summary>
+                                <pre className="mt-2 p-2 bg-black/50 rounded text-xs overflow-auto max-h-40 text-red-400">
+                                    {this.state.error.toString()}
+                                    {this.state.errorInfo?.componentStack}
+                                </pre>
+                            </details>
+                        )}
+                    </div>
+                </div>
+            );
+        }
+
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;
