diff --git a/client/src/components/ItineraryList/ItineraryDetails.tsx b/client/src/components/ItineraryList/ItineraryDetails.tsx
index 11fe14c73fb..23e67ce9a95 100644
--- a/client/src/components/ItineraryList/ItineraryDetails.tsx
+++ b/client/src/components/ItineraryList/ItineraryDetails.tsx
@@ -10,6 +10,8 @@ export function ItineraryDetails({ tripPattern }: { tripPattern: TripPattern })
       {tripPattern.legs.map((leg, i) => (
         <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>
   );
 }
diff --git a/client/src/components/ItineraryList/ItineraryLegDetails.tsx b/client/src/components/ItineraryList/ItineraryLegDetails.tsx
index 65d790902a8..04ddc55c574 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)}
+        {formatDistance(leg.distance)}, {formatDuration(leg.duration)},{' '}
+        <span title={'Generalized cost: ¢' + leg.generalizedCost}>¢{leg.generalizedCost}</span>
       </div>
       <InterchangeInfo leg={leg} />
       <LegTime
diff --git a/client/src/static/query/tripQuery.tsx b/client/src/static/query/tripQuery.tsx
index 57cca5d4056..f435c56e4d6 100644
--- a/client/src/static/query/tripQuery.tsx
+++ b/client/src/static/query/tripQuery.tsx
@@ -35,6 +35,7 @@ export const query = graphql(`
         expectedStartTime
         duration
         distance
+        generalizedCost
         legs {
           id
           mode
@@ -45,6 +46,7 @@ export const query = graphql(`
           realtime
           distance
           duration
+          generalizedCost
           fromPlace {
             name
             quay {
diff --git a/client/src/style.css b/client/src/style.css
index f838dce2c7b..eb5cbadf93b 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -113,6 +113,12 @@
   font-size: 11px;
 }
 
+.accordion-body .generalized-cost {
+  font-size: 11px;
+  text-align: end;
+  margin-right: 9px;
+}
+
 .itinerary-leg-details .mode {
   margin-top: 2px;
 }
diff --git a/client/src/util/formatDuration.ts b/client/src/util/formatDuration.ts
index 94e51ad9d47..8f77a29302e 100644
--- a/client/src/util/formatDuration.ts
+++ b/client/src/util/formatDuration.ts
@@ -10,22 +10,16 @@ export function formatDuration(seconds: number) {
 
   let formatted = '';
 
-  if (hrs === 1) {
-    formatted = `${formatted}${hrs} hr `;
-  } else if (hrs > 1) {
-    formatted = `${formatted}${hrs} hrs `;
+  if (hrs > 0) {
+    formatted = `${formatted}${hrs}h `;
   }
 
-  if (mins === 1) {
-    formatted = `${formatted}${mins} min `;
-  } else if (mins > 1) {
-    formatted = `${formatted}${mins} mins `;
+  if (mins > 0) {
+    formatted = `${formatted}${mins}min `;
   }
 
-  if (secs === 1) {
-    formatted = `${formatted}${secs} sec `;
-  } else if (secs > 1) {
-    formatted = `${formatted}${secs} secs `;
+  if (secs > 1) {
+    formatted = `${formatted}${secs}s`;
   }
 
   return formatted;