diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index e9755c0..00ecc6e 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -49,6 +49,7 @@ const APP = () => {
   const [lineOfSightData, setLineOfSightData] = useState(null);
   const [loading, setLoading] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
+  const [apiError, setApiError] = useState(null);
   const [flightSpeed, setFlightSpeed] = useState(1.0);
   const [mapStyle, setMapStyle] = useState('basic');
   const [mapProjection, setMapProjection] = useState('globe');
@@ -382,6 +383,7 @@ const APP = () => {
     setIsLocked(false);
     setLineOfSightData(null);
     setSelectedCity(null);
+    setApiError(null);
     syncCitiesToMap([]);
     if (mapRef.current) {
       const map = mapRef.current;
@@ -733,6 +735,7 @@ const APP = () => {
   const handleShowLineOfSight = async () => {
     setLoading(true);
     setSelectedCity(null);
+    setApiError(null);
     try {
       const response = await apiService.getLineOfSight(
         selectedPoint.lat,
@@ -748,6 +751,7 @@ const APP = () => {
       renderLineOnMap(response.data.data);
     } catch (error) {
       console.error('Error fetching line of sight:', error);
+      setApiError('Failed to fetch route. Please try again.');
     } finally {
       setLoading(false);
       // Reset flight progress for a new line calculation
@@ -840,6 +844,12 @@ const APP = () => {
             </div>
           </div>
 
+          {apiError && (
+            <div className="error-banner">
+              ⚠️ {apiError}
+            </div>
+          )}
+
           {!isLocked ? (
             <button className="action-btn" onClick={handleShowLineOfSight} disabled={loading}>
               {loading ? 'Calculating...' : '📡 Show Line of Sight'}
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index ad471bb..9f869b1 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -464,6 +464,19 @@
   margin-bottom: 8px;
 }
 
+.error-banner {
+  background: #fdecea;
+  color: #d32f2f;
+  padding: 10px 15px;
+  border-radius: 6px;
+  border-left: 4px solid #d32f2f;
+  font-size: 13px;
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .fly-controls {
   display: flex;
   gap: 8px;