4 files changed, 22 insertions, 10 deletions
diff --git a/src/frontend/app/components/PlannerOverlay.tsx b/src/frontend/app/components/PlannerOverlay.tsx
index 55e52d7..0320d45 100644
--- a/src/frontend/app/components/PlannerOverlay.tsx
+++ b/src/frontend/app/components/PlannerOverlay.tsx
@@ -110,10 +110,11 @@ export const PlannerOverlay: React.FC<PlannerOverlayProps> = ({
 
   useEffect(() => {
     // Load favourites once; used as local suggestions in the picker.
-    StopDataProvider.getStops()
-      .then((stops) =>
-        stops
-          .filter((s) => s.favourite && s.latitude && s.longitude)
+    const favouriteIds = StopDataProvider.getFavouriteIds();
+    StopDataProvider.fetchStopsByIds(favouriteIds)
+      .then((stopsMap) =>
+        Object.values(stopsMap)
+          .filter((s) => s.latitude && s.longitude)
           .map(
             (s) =>
               ({
diff --git a/src/frontend/app/components/StopGalleryItem.tsx b/src/frontend/app/components/StopGalleryItem.tsx
index bf60697..de369d8 100644
--- a/src/frontend/app/components/StopGalleryItem.tsx
+++ b/src/frontend/app/components/StopGalleryItem.tsx
@@ -26,7 +26,7 @@ const StopGalleryItem: React.FC<StopGalleryItemProps> = ({ stop }) => {
             <span className="text-yellow-500 text-base">★</span>
           )}
           <span className="text-xs text-gray-600 dark:text-gray-400 font-medium">
-            ({stop.stopId})
+            ({stop.stopCode || stop.stopId})
           </span>
         </div>
         <div
@@ -41,8 +41,13 @@ const StopGalleryItem: React.FC<StopGalleryItemProps> = ({ stop }) => {
           {StopDataProvider.getDisplayName(stop)}
         </div>
         <div className="flex flex-wrap gap-1 items-center">
-          {stop.lines?.slice(0, 5).map((line) => (
-            <LineIcon key={line} line={line} />
+          {stop.lines?.slice(0, 5).map((lineObj) => (
+            <LineIcon
+              key={lineObj.line}
+              line={lineObj.line}
+              colour={lineObj.colour}
+              textColour={lineObj.textColour}
+            />
           ))}
           {stop.lines && stop.lines.length > 5 && (
             <span className="text-xs text-gray-600 dark:text-gray-400 font-medium px-1.5 py-0.5 bg-gray-200 dark:bg-gray-700 rounded">
diff --git a/src/frontend/app/components/StopItem.tsx b/src/frontend/app/components/StopItem.tsx
index 9679b05..391e605 100644
--- a/src/frontend/app/components/StopItem.tsx
+++ b/src/frontend/app/components/StopItem.tsx
@@ -20,12 +20,17 @@ const StopItem: React.FC<StopItemProps> = ({ stop }) => {
             {StopDataProvider.getDisplayName(stop)}
           </span>
           <span className="text-sm text-gray-600 dark:text-gray-400 ml-2">
-            ({stop.stopId})
+            ({stop.stopCode || stop.stopId})
           </span>
         </div>
         <div className="flex flex-wrap gap-1 mt-1">
-          {stop.lines?.map((line) => (
-            <LineIcon key={line} line={line} />
+          {stop.lines?.map((lineObj) => (
+            <LineIcon
+              key={lineObj.line}
+              line={lineObj.line}
+              colour={lineObj.colour}
+              textColour={lineObj.textColour}
+            />
           ))}
         </div>
       </Link>
diff --git a/src/frontend/app/components/stop/StopMapModal.tsx b/src/frontend/app/components/stop/StopMapModal.tsx
index 757411e..688ec2e 100644
--- a/src/frontend/app/components/stop/StopMapModal.tsx
+++ b/src/frontend/app/components/stop/StopMapModal.tsx
@@ -1,3 +1,4 @@
+import maplibregl from "maplibre-gl";
 import React, {
   useCallback,
   useEffect,