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 8b8b77a91..36ffe5847 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.56 : 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.56 : 1)};
+opacity: ${({ unavailable }) => (unavailable ? UNAVAILABLE_OPACITY : 1)};
 `;
 
 export const Row = styled.View`
@@ -54,7 +56,7 @@ align-items: center;
 export const Title = styled.Text`
 ${FONT_SIZES.H3};
 ${FONT_WEIGHTS.MEDIUM};
-opacity: ${({ unavailable }) => (unavailable ? 0.56 : 1)};
+opacity: ${({ unavailable }) => (unavailable ? UNAVAILABLE_OPACITY : 1)};
 color: ${({ unavailable, primaryColor }) => (unavailable ? '#7F7F7F' : primaryColor)};
 margin-right: 5px;
 `;