diff --git a/assets/static/css/style.css b/assets/static/css/style.css
index 17086e7..059155d 100644
--- a/assets/static/css/style.css
+++ b/assets/static/css/style.css
@@ -449,6 +449,20 @@ body {
     color: #ffffff !important;
 }
 
+/* Ensure all values are visible with strong contrast */
+.aircraft-popup .value,
+.aircraft-popup .detail-row,
+.aircraft-popup .detail-item .value {
+    color: #ffffff !important;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+}
+
+/* Style for N/A or empty values - still visible but slightly dimmed */
+.detail-item .value.no-data {
+    color: #aaaaaa !important;
+    font-style: italic;
+}
+
 @media (max-width: 768px) {
     .header {
         padding: 0.75rem 1rem;
diff --git a/assets/static/js/modules/aircraft-manager.js b/assets/static/js/modules/aircraft-manager.js
index 82d3b76..bf46082 100644
--- a/assets/static/js/modules/aircraft-manager.js
+++ b/assets/static/js/modules/aircraft-manager.js
@@ -312,27 +312,27 @@ export class AircraftManager {
                     <div class="detail-grid">
                         <div class="detail-item">
                             <div class="label">Altitude:</div>
-                            <div class="value">${altitude ? `${altitude} ft | ${altitudeM} m` : 'N/A'}</div>
+                            <div class="value${!altitude ? ' no-data' : ''}">${altitude ? `${altitude} ft | ${altitudeM} m` : 'N/A'}</div>
                         </div>
                         <div class="detail-item">
                             <div class="label">Squawk:</div>
-                            <div class="value">${aircraft.Squawk || 'N/A'}</div>
+                            <div class="value${!aircraft.Squawk ? ' no-data' : ''}">${aircraft.Squawk || 'N/A'}</div>
                         </div>
                         <div class="detail-item">
                             <div class="label">Speed:</div>
-                            <div class="value">${aircraft.GroundSpeed ? `${aircraft.GroundSpeed} kt | ${speedKmh} km/h` : 'N/A'}</div>
+                            <div class="value${!aircraft.GroundSpeed ? ' no-data' : ''}">${aircraft.GroundSpeed !== undefined && aircraft.GroundSpeed !== null ? `${aircraft.GroundSpeed} kt | ${speedKmh} km/h` : 'N/A'}</div>
                         </div>
                         <div class="detail-item">
                             <div class="label">Track:</div>
-                            <div class="value">${aircraft.Track ? `${aircraft.Track}°` : 'N/A'}</div>
+                            <div class="value${aircraft.Track === undefined || aircraft.Track === null ? ' no-data' : ''}">${aircraft.Track !== undefined && aircraft.Track !== null ? `${aircraft.Track}°` : 'N/A'}</div>
                         </div>
                         <div class="detail-item">
                             <div class="label">V/Rate:</div>
-                            <div class="value">${aircraft.VerticalRate ? `${aircraft.VerticalRate} ft/min` : 'N/A'}</div>
+                            <div class="value${!aircraft.VerticalRate ? ' no-data' : ''}">${aircraft.VerticalRate ? `${aircraft.VerticalRate} ft/min` : 'N/A'}</div>
                         </div>
                         <div class="detail-item">
                             <div class="label">Distance:</div>
-                            <div class="value">${distanceKm} km</div>
+                            <div class="value${distance ? '' : ' no-data'}">${distanceKm !== 'N/A' ? `${distanceKm} km` : 'N/A'}</div>
                         </div>
                     </div>
                     
diff --git a/ux.png b/ux.png
new file mode 100644
index 0000000..ec40c79
Binary files /dev/null and b/ux.png differ