diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 390d855..f356050 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -91,11 +91,17 @@ function Navigation() {
 
 export default function App() {
   const [trips, setTrips] = useState<any[]>([]);
+  const [dbError, setDbError] = useState<string | null>(null);
   const navigate = useNavigate();
 
   async function loadTrips() {
-    const data = await getTrips();
-    setTrips(data);
+    try {
+      const data = await getTrips();
+      setTrips(data);
+      setDbError(null);
+    } catch (err) {
+      setDbError("Warnung: Verbindung zur Datenbank fehlgeschlagen!");
+    }
   }
 
   useEffect(() => {
@@ -114,6 +120,11 @@ export default function App() {
   return (
     <div className="p-4 max-w-5xl mx-auto">
       <Navigation />
+      {dbError && (
+        <div className="mb-4 p-3 bg-red-100 text-red-700 rounded border border-red-300 font-semibold text-center">
+          {dbError}
+        </div>
+      )}
       <Routes>
         <Route path="/trips" element={<TripsPage />} />
         <Route path="/trips/:id" element={<TripChecklist trips={trips} />} />