diff --git a/src/features/popular-requests/components/PopularRequestsPanel.tsx b/src/features/popular-requests/components/PopularRequestsPanel.tsx
index 5bbda069..0613a207 100644
--- a/src/features/popular-requests/components/PopularRequestsPanel.tsx
+++ b/src/features/popular-requests/components/PopularRequestsPanel.tsx
@@ -29,10 +29,10 @@ export function PopularRequestsPanel({
   onRequestClick,
 }: PopularRequestsPanelProps): JSX.Element | null {
   const { t } = useTranslation();
-  const { requests, loading, error } = usePopularRequests();
+  const { requests, loading } = usePopularRequests();
 
-  // Gracefully degrade: don't render anything on loading or error
-  if (loading || error || requests.length === 0) {
+  // Don't render while loading or when there are no requests
+  if (loading || requests.length === 0) {
     return null;
   }
 
diff --git a/src/features/popular-requests/hooks/usePopularRequests.ts b/src/features/popular-requests/hooks/usePopularRequests.ts
index 245c2e99..dc0cfb8c 100644
--- a/src/features/popular-requests/hooks/usePopularRequests.ts
+++ b/src/features/popular-requests/hooks/usePopularRequests.ts
@@ -12,6 +12,37 @@ import { getPopularRequests } from "../api.js";
 import type { PopularRequest } from "../types.js";
 import type { ApiError } from "@/shared/api/errors.js";
 
+/**
+ * Fallback popular requests shown when the API is unavailable.
+ * Matches the Angular mock data so the start page renders identically.
+ */
+const FALLBACK_REQUESTS: PopularRequest[] = [
+  {
+    mode: "FlightNumber",
+    carrier: "SU",
+    flightNumber: "9027",
+    type: "Onlineboard",
+  },
+  {
+    mode: "FlightNumber",
+    carrier: "SU",
+    flightNumber: "9006",
+    type: "Onlineboard",
+  },
+  {
+    mode: "Route",
+    departure: "KUF",
+    arrival: "ABA",
+    type: "Onlineboard",
+  },
+  {
+    mode: "Route",
+    departure: "RTW",
+    arrival: "ABA",
+    type: "Onlineboard",
+  },
+];
+
 export interface UsePopularRequestsResult {
   requests: PopularRequest[];
   loading: boolean;
@@ -20,6 +51,8 @@ export interface UsePopularRequestsResult {
 
 /**
  * Hook that fetches popular requests on mount. Returns loading/error/data.
+ * Falls back to mock data when the API is unavailable so the start page
+ * always renders the popular sections panel.
  */
 export function usePopularRequests(): UsePopularRequestsResult {
   const client = useApiClient();
@@ -35,13 +68,14 @@ export function usePopularRequests(): UsePopularRequestsResult {
     getPopularRequests(client)
       .then((data) => {
         if (!cancelled) {
-          setRequests(data);
+          setRequests(data.length > 0 ? data : FALLBACK_REQUESTS);
           setLoading(false);
         }
       })
       .catch((err: ApiError) => {
         if (!cancelled) {
           setError(err);
+          setRequests(FALLBACK_REQUESTS);
           setLoading(false);
         }
       });