diff --git a/examples/client/Locomotion/src/I18n/en.json b/examples/client/Locomotion/src/I18n/en.json
index bdd7eade1..a7f8eb125 100644
--- a/examples/client/Locomotion/src/I18n/en.json
+++ b/examples/client/Locomotion/src/I18n/en.json
@@ -61,7 +61,7 @@
             "multi": "Stop"
         },
         "highEta": "ETA is higher than usual",
-        "outOfTerritory": "Not in territory"
+        "outOfTerritory": "Service is \n unavailable"
     },
     "general": {
         "back": "Back",
diff --git a/examples/client/Locomotion/src/assets/seat.svg b/examples/client/Locomotion/src/assets/seat.svg
index 0fa995601..fb01a1213 100644
--- a/examples/client/Locomotion/src/assets/seat.svg
+++ b/examples/client/Locomotion/src/assets/seat.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="10.077" height="11.637" viewBox="0 0 10.077 11.637">
     <g data-name="Group 5294" style="opacity:.75">
-        <path data-name="Union 55" d="M2.242-1.851a.5.5 0 0 1-.49-.4.777.777 0 0 1-.1-.248l-1.428-7.77c-.085-.411.174-.9.567-.9h1.516a.679.679 0 0 1 .778.587L4.209-4.8h5.576a.5.5 0 0 1 .5.5v1.948a.5.5 0 0 1-.5.5z" transform="translate(-.209 11.173)" style="fill:#333"/>
-        <path data-name="Path 1544" d="M.968-.5H6.7c.155 0 .281.174.281.388v1.165c0 .214-.126.388-.281.388H.968c-.155 0-.281-.174-.281-.388V-.115C.687-.329.813-.5.968-.5z" transform="translate(2.001 10.197)" style="fill:#333"/>
+        <path data-name="Union 55" d="M2.242-1.851a.5.5 0 0 1-.49-.4.777.777 0 0 1-.1-.248l-1.428-7.77c-.085-.411.174-.9.567-.9h1.516a.679.679 0 0 1 .778.587L4.209-4.8h5.576a.5.5 0 0 1 .5.5v1.948a.5.5 0 0 1-.5.5z" transform="translate(-.209 11.173)" style="fill:#101010"/>
+        <path data-name="Path 1544" d="M.968-.5H6.7c.155 0 .281.174.281.388v1.165c0 .214-.126.388-.281.388H.968c-.155 0-.281-.174-.281-.388V-.115C.687-.329.813-.5.968-.5z" transform="translate(2.001 10.197)" style="fill:#101010"/>
     </g>
 </svg>
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 d72075232..1f035d0d6 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
@@ -115,13 +115,14 @@ const ServiceCard = ({ service, withBorder }) => {
         selected={isSelected}
         activeOpacity={!withBorder ? 1 : 0.5}
         noBackground
-        disabled={unavailable}
         onPress={() => {
-          if (withBorder) {
-            if (isSelected) {
-              return setPopup(FARE_POPUP);
+          if (!unavailable) {
+            if (withBorder) {
+              if (isSelected) {
+                return setPopup(FARE_POPUP);
+              }
+              setChosenService(service);
             }
-            setChosenService(service);
           }
         }}
       >
@@ -150,7 +151,7 @@ const ServiceCard = ({ service, withBorder }) => {
                 )
                 : <View />
             }
-              <Price>
+              <Price unavailable={unavailable}>
                 {getUnavailableText()}
               </Price>
             </TitleContainer>
diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/ServiceCard/styled.js b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/ServiceCard/styled.js
index 6e2444d26..69833326b 100644
--- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/ServiceCard/styled.js
+++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/ServiceCard/styled.js
@@ -2,6 +2,8 @@ import styled from 'styled-components';
 import Button from '../../../../../../Components/Button';
 import { FONT_SIZES, FONT_WEIGHTS } from '../../../../../../context/theme';
 
+const UNAVAILABLE_OPACITY = 0.56;
+
 export const TitleContainer = styled.View`
 display: flex;
 flex-direction: row;
@@ -23,7 +25,7 @@ ${({ selected, withBorder }) => (withBorder && selected && 'box-shadow: 0 0 4px
 
 export const CarContainer = styled.View`
 width: 20%;
-opacity: ${({ unavailable }) => (unavailable ? 0.4 : 1)};
+opacity: ${({ unavailable }) => (unavailable ? UNAVAILABLE_OPACITY : 1)};
 `;
 
 export const CarIcon = styled.Image`
@@ -35,7 +37,7 @@ width: 80%;
 display: flex;
 flex-direction: column;
 justify-content: center;
-opacity: ${({ unavailable }) => (unavailable ? 0.4 : 1)};
+opacity: ${({ unavailable }) => (unavailable ? UNAVAILABLE_OPACITY : 1)};
 `;
 
 export const Row = styled.View`
@@ -54,13 +56,16 @@ align-items: center;
 export const Title = styled.Text`
 ${FONT_SIZES.H3};
 ${FONT_WEIGHTS.MEDIUM};
+opacity: ${({ unavailable }) => (unavailable ? UNAVAILABLE_OPACITY : 1)};
+color: #101010;
 margin-right: 5px;
 `;
 
 export const Price = styled.Text`
-${FONT_SIZES.LARGE};
-${FONT_WEIGHTS.MEDIUM};
-text-align: right;
+    ${FONT_SIZES.LARGE};
+    ${FONT_WEIGHTS.MEDIUM};
+    color: ${({ unavailable }) => (unavailable ? '#7F7F7F' : '#101010')};
+    text-align: right;
 `;
 
 export const TimeDetails = styled.View`
@@ -77,8 +82,8 @@ ${FONT_SIZES.LARGE}
 `;
 
 export const Eta = styled.Text`
-opacity: .5;
 ${FONT_SIZES.LARGE}
+color: #101010;
 `;
 
 export const Capacity = styled.View`
@@ -88,8 +93,7 @@ align-items: center;
 `;
 
 export const Circle = styled.View`
-background-color: #333333;
-opacity: .5;
+background-color: #101010;
 border-radius: 2px;
 width: 2px;
 height: 2px;
@@ -97,17 +101,18 @@ margin: 5px;
 `;
 
 export const AvailableSeats = styled.Text`
+color: #101010;
 
 `;
 export const Description = styled.Text`
-opacity: .5;
 ${FONT_SIZES.MEDIUM};
 ${FONT_WEIGHTS.REGULAR};
 width: 85%;
+color: #101010;
 `;
 
 export const EstimatedText = styled.Text`
-color: #707070;
+color: #101010;
 ${FONT_SIZES.MEDIUM};
 ${FONT_WEIGHTS.REGULAR};
 `;