diff --git a/client/src/components/ItineraryList/ItineraryDetails.tsx b/client/src/components/ItineraryList/ItineraryDetails.tsx
index 58b705abf52..ba2caf4d15d 100644
--- a/client/src/components/ItineraryList/ItineraryDetails.tsx
+++ b/client/src/components/ItineraryList/ItineraryDetails.tsx
@@ -11,9 +11,7 @@ export function ItineraryDetails({ tripPattern }: { tripPattern: TripPattern })
         <ItineraryLegDetails key={leg.id ? leg.id : `noid_${i}`} leg={leg} isLast={i === tripPattern.legs.length - 1} />
       ))}
 
-      <div className="generalized-cost">
-        Generalized cost: ${tripPattern.generalizedCost}
-      </div>
+      <div className="generalized-cost">Generalized cost: ${tripPattern.generalizedCost}</div>
     </div>
   );
 }
diff --git a/client/src/components/ItineraryList/ItineraryLegDetails.tsx b/client/src/components/ItineraryList/ItineraryLegDetails.tsx
index 2239fd8d8bf..86d2d4db7a4 100644
--- a/client/src/components/ItineraryList/ItineraryLegDetails.tsx
+++ b/client/src/components/ItineraryList/ItineraryLegDetails.tsx
@@ -21,7 +21,8 @@ export function ItineraryLegDetails({ leg, isLast }: { leg: Leg; isLast: boolean
   return (
     <div className="itinerary-leg-details">
       <div className="times">
-        {formatDistance(leg.distance)}, {formatDuration(leg.duration)}, ${leg.generalizedCost}
+        {formatDistance(leg.distance)}, {formatDuration(leg.duration)},{' '}
+        <span title={'Generalized cost: $' + leg.generalizedCost}>${leg.generalizedCost}</span>
       </div>
       <InterchangeInfo leg={leg} />
       <LegTime