diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 1be5bbd..c0ef959 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -16,7 +16,7 @@ import Footer from '@ui/Footer';
 import {ToastContainer} from 'react-toastify';
 import {checkSetupStatus} from '@api/auth';
 import 'react-toastify/dist/ReactToastify.css';
-
+import ErrorBoundary from '@ui/ErrorBoundary';
 function App() {
     const [darkMode, setDarkMode] = useState(true);
     const [authState, setAuthState] = useState({
@@ -140,25 +140,33 @@ function App() {
     return (
         <>
             <Router>
-                <div className='min-h-screen flex flex-col bg-gray-900 text-gray-100'>
-                    <Navbar darkMode={darkMode} setDarkMode={setDarkMode} />
-                    <div className='max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 mt-2 flex-grow flex-1 w-full'>
-                        <Routes>
-                            <Route path='/regex' element={<RegexPage />} />
-                            <Route path='/format' element={<FormatPage />} />
-                            <Route path='/profile' element={<ProfilePage />} />
-                            <Route
-                                path='/settings'
-                                element={<SettingsPage />}
-                            />
-                            <Route
-                                path='/'
-                                element={<Navigate to='/settings' />}
-                            />
-                        </Routes>
+                <ErrorBoundary>
+                    <div className='min-h-screen flex flex-col bg-gray-900 text-gray-100'>
+                        <Navbar darkMode={darkMode} setDarkMode={setDarkMode} />
+                        <div className='max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 mt-2 flex-grow flex-1 w-full'>
+                            <Routes>
+                                <Route path='/regex' element={<RegexPage />} />
+                                <Route
+                                    path='/format'
+                                    element={<FormatPage />}
+                                />
+                                <Route
+                                    path='/profile'
+                                    element={<ProfilePage />}
+                                />
+                                <Route
+                                    path='/settings'
+                                    element={<SettingsPage />}
+                                />
+                                <Route
+                                    path='/'
+                                    element={<Navigate to='/settings' />}
+                                />
+                            </Routes>
+                        </div>
+                        <Footer />
                     </div>
-                    <Footer />
-                </div>
+                </ErrorBoundary>
             </Router>
             <ToastContainer
                 position='top-right'
@@ -175,5 +183,4 @@ function App() {
         </>
     );
 }
-
 export default App;
diff --git a/frontend/src/components/ui/ErrorBoundary.jsx b/frontend/src/components/ui/ErrorBoundary.jsx
new file mode 100644
index 0000000..1284ea7
--- /dev/null
+++ b/frontend/src/components/ui/ErrorBoundary.jsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import {AlertTriangle, Github, BookOpen} from 'lucide-react';
+import DiscordIcon from '@logo/Discord.svg';
+import GithubIcon from '@logo/GitHub.svg';
+
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {hasError: false, error: null};
+    }
+
+    static getDerivedStateFromError(error) {
+        return {hasError: true, error};
+    }
+
+    componentDidCatch(error, errorInfo) {
+        console.error('Error caught by boundary:', error, errorInfo);
+    }
+
+    render() {
+        if (this.state.hasError) {
+            return (
+                <div className='min-h-screen bg-gray-900 flex items-center justify-center p-4'>
+                    <div className='max-w-md w-full bg-gray-800 rounded-lg shadow-xl p-8 text-center border border-gray-700'>
+                        <div className='flex justify-center mb-6'>
+                            <AlertTriangle className='h-16 w-16 text-red-500' />
+                        </div>
+                        <h1 className='text-3xl font-bold text-gray-100 mb-4'>
+                            Unexpected Error
+                        </h1>
+                        <p className='text-gray-300 mb-8'>
+                            We apologize, but something went wrong while
+                            rendering this page.
+                        </p>
+
+                        {/* Support links */}
+                        <div className='border-t border-gray-700 pt-6'>
+                            <p className='text-gray-400 mb-4'>
+                                Need help? Reach out to us:
+                            </p>
+                            <div className='flex justify-center space-x-6'>
+                                <a
+                                    href='https://discord.com/invite/Y9TYP6jeYZ'
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                    className='group relative p-3 transition-all duration-500 hover:scale-125'>
+                                    <img
+                                        src={DiscordIcon}
+                                        alt='Discord'
+                                        className='w-6 h-6 filter invert relative z-10 transition-all duration-500 group-hover:rotate-[360deg] group-hover:animate-[pulse_1s_ease-in-out_infinite] group-hover:brightness-75'
+                                    />
+                                </a>
+                                <a
+                                    href='https://github.com/Dictionarry-Hub'
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                    className='group relative p-3 transition-all duration-500 hover:scale-125'>
+                                    <img
+                                        src={GithubIcon}
+                                        alt='GitHub'
+                                        className='w-6 h-6 filter invert relative z-10 transition-all duration-500 group-hover:rotate-[360deg] group-hover:animate-[pulse_1s_ease-in-out_infinite] group-hover:brightness-75'
+                                    />
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;