3 files changed, 43 insertions, 10 deletions
diff --git a/src/frontend/app/api/schema.ts b/src/frontend/app/api/schema.ts
index f68d413..20daede 100644
--- a/src/frontend/app/api/schema.ts
+++ b/src/frontend/app/api/schema.ts
@@ -65,6 +65,7 @@ export const ArrivalSchema = z.object({
   shape: z.any().optional().nullable(),
   currentPosition: PositionSchema.optional().nullable(),
   vehicleInformation: VehicleInformationSchema.optional().nullable(),
+  operator: z.string().nullable(),
 });
 
 export const ArrivalEstimateSchema = z.object({
diff --git a/src/frontend/app/components/arrivals/ArrivalCard.tsx b/src/frontend/app/components/arrivals/ArrivalCard.tsx
index b99d3aa..bdd20a5 100644
--- a/src/frontend/app/components/arrivals/ArrivalCard.tsx
+++ b/src/frontend/app/components/arrivals/ArrivalCard.tsx
@@ -59,8 +59,15 @@ export const ArrivalCard: React.FC<ArrivalCardProps> = ({
   onClick,
 }) => {
   const { t } = useTranslation();
-  const { route, headsign, estimate, delay, shift, vehicleInformation } =
-    arrival;
+  const {
+    route,
+    headsign,
+    estimate,
+    delay,
+    shift,
+    vehicleInformation,
+    operator,
+  } = arrival;
 
   const etaValue = estimate.minutes.toString();
   const etaUnit = t("estimates.minutes", "min");
@@ -211,11 +218,15 @@ export const ArrivalCard: React.FC<ArrivalCardProps> = ({
             >
               {headsign.destination}
             </span>
-            {headsign.marquee && (
-              <div className="mt-0.5 w-auto">
-                <AutoMarquee text={headsign.marquee} />
-              </div>
-            )}
+            <div className="mt-0.5 w-auto flex">
+              {operator && (
+                <span className="text-xs font-mono text-slate-700 dark:text-slate-200 font-medium shrink-0">
+                  {operator}
+                  {headsign.marquee && <>&nbsp;·&nbsp;</>}
+                </span>
+              )}
+              {headsign.marquee && <AutoMarquee text={headsign.marquee} />}
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/frontend/app/components/arrivals/ReducedArrivalCard.tsx b/src/frontend/app/components/arrivals/ReducedArrivalCard.tsx
index 27d97b3..19cc8d9 100644
--- a/src/frontend/app/components/arrivals/ReducedArrivalCard.tsx
+++ b/src/frontend/app/components/arrivals/ReducedArrivalCard.tsx
@@ -15,8 +15,15 @@ export const ReducedArrivalCard: React.FC<ArrivalCardProps> = ({
   onClick,
 }) => {
   const { t } = useTranslation();
-  const { route, headsign, estimate, delay, shift, vehicleInformation } =
-    arrival;
+  const {
+    route,
+    headsign,
+    estimate,
+    delay,
+    shift,
+    vehicleInformation,
+    operator,
+  } = arrival;
 
   const etaValue = estimate.minutes.toString();
   const etaUnit = t("estimates.minutes", "min");
@@ -41,6 +48,13 @@ export const ReducedArrivalCard: React.FC<ArrivalCardProps> = ({
       kind?: "regular" | "gps" | "delay" | "warning" | "vehicle";
     }> = [];
 
+    if (operator) {
+      chips.push({
+        label: operator,
+        kind: "regular",
+      });
+    }
+
     // Badge/Shift info as a chip
     if (headsign.badge) {
       chips.push({
@@ -130,7 +144,14 @@ export const ReducedArrivalCard: React.FC<ArrivalCardProps> = ({
     }
 
     return chips;
-  }, [delay, shift, estimate.precision, headsign.badge, vehicleInformation]);
+  }, [
+    delay,
+    shift,
+    estimate.precision,
+    headsign.badge,
+    vehicleInformation,
+    operator,
+  ]);
 
   const isClickable = !!onClick && estimate.precision !== "past";
   const Tag = isClickable ? "button" : "div";