diff --git a/src/features/flights-map/components/FlightsMapStartPage.scss b/src/features/flights-map/components/FlightsMapStartPage.scss
index 4fa1a09d..f48fb2fe 100644
--- a/src/features/flights-map/components/FlightsMapStartPage.scss
+++ b/src/features/flights-map/components/FlightsMapStartPage.scss
@@ -49,8 +49,7 @@
 
     &__spinner,
     &__loader,
-    &__error,
-    &__empty {
+    &__error {
       padding: vars.$space-xl;
       text-align: center;
       color: colors.$light-gray;
@@ -65,6 +64,39 @@
     }
   }
 
+  // Mirrors Angular `no-directions-sheet.component.scss` — a translucent
+  // grey overlay over the map with a white centered info card. Surfaced
+  // when the API returns no routes for the current filter selection.
+  .no-directions-sheet {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    background: rgba(180, 180, 180, 0.302);
+    z-index: 1000;
+    pointer-events: all;
+  }
+
+  .no-directions-card {
+    background: colors.$white;
+    padding: 16px 18px;
+    border-radius: 5px;
+    max-width: 520px;
+    width: min(520px, 100%);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+
+    p {
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.4;
+      color: rgba(0, 0, 0, 0.78);
+      text-align: center;
+    }
+  }
+
   // Inline loader matching Angular loader-sheet component
   .page-loader__loader {
     position: relative;
diff --git a/src/features/flights-map/components/FlightsMapStartPage.tsx b/src/features/flights-map/components/FlightsMapStartPage.tsx
index 43902a2c..b298be90 100644
--- a/src/features/flights-map/components/FlightsMapStartPage.tsx
+++ b/src/features/flights-map/components/FlightsMapStartPage.tsx
@@ -372,13 +372,18 @@ export const FlightsMapStartPage: FC<FlightsMapStartPageProps> = ({
             )}
 
             {!loading && !dictionariesLoading && !error && !dictionariesError && searchParams !== null && routes.length === 0 && (
-                <div
-                  className="flights-map-start__empty"
-                  data-testid="map-no-directions"
-                >
-                  {t("FLIGHTS-MAP.NO_DIRECTIONS_INFO")}
+              // Mirrors Angular `no-directions-sheet`: a translucent grey
+              // overlay above the map with a white centered info card.
+              <div
+                className="no-directions-sheet"
+                data-testid="map-no-directions"
+                role="alert"
+              >
+                <div className="no-directions-card">
+                  <p>{t("FLIGHTS-MAP.NO_DIRECTIONS_INFO")}</p>
                 </div>
-              )}
+              </div>
+            )}
           </div>
         </section>
       </PageLayout>