500

frontend/src/App.tsx

@@ -21,6 +21,7 @@ import { ProfilePage } from '@/pages/ProfilePage'
 import { UserProfilePage } from '@/pages/UserProfilePage'
 import { NotFoundPage } from '@/pages/NotFoundPage'
 import { TeapotPage } from '@/pages/TeapotPage'
+import { ServerErrorPage } from '@/pages/ServerErrorPage'
 
 // Protected route wrapper
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
@@ -154,6 +155,10 @@ function App() {
         <Route path="teapot" element={<TeapotPage />} />
         <Route path="tea" element={<TeapotPage />} />
 
+        {/* Server error page */}
+        <Route path="500" element={<ServerErrorPage />} />
+        <Route path="error" element={<ServerErrorPage />} />
+
         {/* 404 - must be last */}
         <Route path="*" element={<NotFoundPage />} />
       </Route>