diff --git a/app/component/itinerary/PlanConnection.js b/app/component/itinerary/PlanConnection.js
index b6f69f3aa4..d5ad43fe59 100644
--- a/app/component/itinerary/PlanConnection.js
+++ b/app/component/itinerary/PlanConnection.js
@@ -118,6 +118,7 @@ const planConnection = graphql`
               color
               gtfsId
               type
+              mode
               agency {
                 name
               }
diff --git a/app/component/itinerary/navigator/NaviCard.js b/app/component/itinerary/navigator/NaviCard.js
index e48d845aac..00658ff9ba 100644
--- a/app/component/itinerary/navigator/NaviCard.js
+++ b/app/component/itinerary/navigator/NaviCard.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-import { legShape } from '../../../util/shapes';
+import { legShape, configShape } from '../../../util/shapes';
 import Icon from '../../Icon';
 import { isRental } from '../../../util/legUtils';
 import NaviInstructions from './NaviInstructions';
 import NaviCardExtension from './NaviCardExtension';
 import { LEGTYPE } from './NaviUtils';
+import { getRouteMode } from '../../../util/modeUtils';
 
 const iconMap = {
   BICYCLE: 'icon-icon_cyclist',
@@ -19,18 +20,15 @@ const iconMap = {
   SUBWAY: 'icon-icon_subway',
   TRAM: 'icon-icon_tram',
   FERRY: 'icon-icon_ferry',
+  'BUS-EXPRESS': 'icon-icon_bus-express',
+  'BUS-LOCAL': 'icon-icon_bus-local',
+  SPEEDTRAM: 'icon-icon_speedtram',
 };
 
-export default function NaviCard({
-  leg,
-  nextLeg,
-  legType,
-  cardExpanded,
-  startTime,
-  time,
-  position,
-  origin,
-}) {
+export default function NaviCard(
+  { leg, nextLeg, legType, cardExpanded, startTime, time, position, origin },
+  { config },
+) {
   if (legType === LEGTYPE.PENDING) {
     return (
       <FormattedMessage
@@ -45,10 +43,14 @@ export default function NaviCard({
   if (!leg && !nextLeg) {
     return null;
   }
-  const iconName = legType === LEGTYPE.WAIT ? iconMap.WAIT : iconMap[leg.mode];
-
+  let iconColor = 'currentColor';
+  let iconName;
   let instructions = '';
   if (legType === LEGTYPE.TRANSIT) {
+    const m = getRouteMode(leg.route, config);
+    iconColor = config.colors.iconColors[`mode-${m}`] || leg.route.color;
+    iconName = iconMap[m.toUpperCase()];
+
     instructions = `navileg-in-transit`;
   } else if (legType !== LEGTYPE.WAIT && isRental(leg, nextLeg)) {
     if (leg.mode === 'WALK' && nextLeg?.mode === 'SCOOTER') {
@@ -56,14 +58,16 @@ export default function NaviCard({
     } else {
       instructions = 'rent-cycle-at';
     }
+    iconName = iconMap[leg.mode];
   } else if (legType === LEGTYPE.MOVE) {
     instructions = `navileg-${leg?.mode.toLowerCase()}`;
+    iconName = iconMap.WALK;
   }
 
   return (
     <div className="navi-top-card">
       <div className="main-card">
-        <Icon img={iconName} className="mode" />
+        <Icon img={iconName} className="mode" color={iconColor} />
         <div className={`instructions ${cardExpanded ? 'expanded' : ''}`}>
           <NaviInstructions
             leg={leg}
@@ -117,3 +121,7 @@ NaviCard.defaultProps = {
   startTime: '',
   position: undefined,
 };
+
+NaviCard.contextTypes = {
+  config: configShape.isRequired,
+};
diff --git a/app/component/itinerary/navigator/NaviCardExtension.js b/app/component/itinerary/navigator/NaviCardExtension.js
index 004edabb55..75c493550e 100644
--- a/app/component/itinerary/navigator/NaviCardExtension.js
+++ b/app/component/itinerary/navigator/NaviCardExtension.js
@@ -9,6 +9,7 @@ import { getZoneLabel, legTime } from '../../../util/legUtils';
 import ZoneIcon from '../../ZoneIcon';
 import { legShape, configShape } from '../../../util/shapes';
 import { getDestinationProperties, LEGTYPE } from './NaviUtils';
+import { getRouteMode } from '../../../util/modeUtils';
 
 import RouteNumberContainer from '../../RouteNumberContainer';
 
@@ -34,7 +35,7 @@ const NaviCardExtension = ({ legType, leg, nextLeg, time }, { config }) => {
   }
 
   if (legType === LEGTYPE.TRANSIT) {
-    const { intermediatePlaces, headsign, trip, realtimeState } = leg;
+    const { intermediatePlaces, headsign, trip, realtimeState, route } = leg;
     const hs = headsign || trip.tripHeadsign;
     const idx = intermediatePlaces.findIndex(p => legTime(p.arrival) > time);
     const count = idx > -1 ? intermediatePlaces.length - idx : 0;
@@ -45,7 +46,8 @@ const NaviCardExtension = ({ legType, leg, nextLeg, time }, { config }) => {
     );
     const translationId =
       count === 1 ? 'navileg-one-stop-remaining' : 'navileg-stops-remaining';
-    const mode = leg.mode.toLowerCase();
+    const mode = getRouteMode(route, config);
+
     return (
       <div className="extension">
         <div className="extension-divider" />
diff --git a/app/component/itinerary/navigator/NaviInstructions.js b/app/component/itinerary/navigator/NaviInstructions.js
index b4b1095595..ccadacc953 100644
--- a/app/component/itinerary/navigator/NaviInstructions.js
+++ b/app/component/itinerary/navigator/NaviInstructions.js
@@ -8,6 +8,7 @@ import { legDestination, legTimeStr, legTime } from '../../../util/legUtils';
 import RouteNumber from '../../RouteNumber';
 import { LEGTYPE, getLocalizedMode, pathProgress } from './NaviUtils';
 import { durationToString } from '../../../util/timeUtils';
+import { getRouteMode } from '../../../util/modeUtils';
 
 export default function NaviInstructions(
   { leg, nextLeg, instructions, legType, time, position, origin },
@@ -50,7 +51,6 @@ export default function NaviInstructions(
   if (legType === LEGTYPE.WAIT && nextLeg.mode !== 'WALK') {
     const { mode, headsign, route, start } = nextLeg;
     const hs = headsign || nextLeg.trip?.tripHeadsign;
-    const color = route.color || 'currentColor';
     const localizedMode = getLocalizedMode(mode, intl);
 
     const remainingDuration = Math.ceil((legTime(start) - time) / 60000); // ms to minutes
@@ -59,6 +59,12 @@ export default function NaviInstructions(
       duration: withRealTime(rt, remainingDuration),
       legTime: withRealTime(rt, legTimeStr(start)),
     };
+    const routeMode = getRouteMode(route, config);
+    const iconColor =
+      config.colors.iconColors[`mode-${routeMode}`] ||
+      route.color ||
+      'currentColor';
+
     return (
       <>
         <div className="destination-header">
@@ -71,11 +77,11 @@ export default function NaviInstructions(
         <div className="wait-leg">
           <div className="route-info">
             <RouteNumber
-              mode={mode.toLowerCase()}
+              mode={routeMode}
               text={route?.shortName}
               withBar
               isTransitLeg
-              color={color}
+              color={iconColor}
             />
             <div className="headsign">{hs}</div>
           </div>
diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
index 16483126ff..a8f21f8fbb 100644
--- a/app/component/itinerary/navigator/NaviUtils.js
+++ b/app/component/itinerary/navigator/NaviUtils.js
@@ -67,6 +67,7 @@ export const getAdditionalMessages = (leg, time, intl, config, messages) => {
   return msgs;
 };
 
+// TODO: DATA SHOULD BE UPDATED
 export const getTransitLegState = (leg, intl, messages, time) => {
   const { start, realtimeState, from, mode, legId, route, end } = leg;
   const { scheduledTime, estimated } = start;
diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss
index 254d15f523..107158b5a6 100644
--- a/app/component/itinerary/navigator/navigator.scss
+++ b/app/component/itinerary/navigator/navigator.scss
@@ -257,6 +257,14 @@
           color: $bus-color;
         }
 
+        &.bus-express {
+          color: $bus-express-color;
+        }
+
+        &.speedtram {
+          color: $speedtram-color;
+        }
+
         &.tram-stop {
           color: $tram-color;
         }