diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/ServiceCard/index.js b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/ServiceCard/index.js
index c5be3a150..c775b885f 100644
--- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/ServiceCard/index.js
+++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/ServiceCard/index.js
@@ -26,7 +26,9 @@ import showPriceBasedOnAccount from '../../../../../../services/showPriceBasedOn
 
 const FARE_POPUP = 'farePopup';
 
-const ServiceCard = ({ service, withBorder, testID }) => {
+const ServiceCard = ({
+  service, withBorder, testID, descriptionNumberOfLines,
+}) => {
   const { businessAccountId } = useContext(RidePageContext);
   const theme = useContext(ThemeContext);
   const {
@@ -90,7 +92,7 @@ const ServiceCard = ({ service, withBorder, testID }) => {
   };
 
   const getDescription = forFutureRidesView => (
-    <Description style={{ ...(forFutureRidesView && { width: '60%' }) }} numberOfLines={2}>
+    <Description style={{ ...(forFutureRidesView && { width: '60%' }) }} numberOfLines={descriptionNumberOfLines || null}>
       {(service.description || '')}
     </Description>
   );
diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/index.js b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/index.js
index fd1863e27..1a5341fad 100644
--- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/index.js
+++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/index.js
@@ -79,7 +79,8 @@ const ServiceOptions = () => {
           <ServiceCard
             withBorder
             service={option}
-            key={option.name}
+            key={option.id}
+            descriptionNumberOfLines={2}
           />
         ))
       }