diff --git a/examples/client/Locomotion/ios/Podfile.lock b/examples/client/Locomotion/ios/Podfile.lock
index f70b61ea0..abe752b0e 100644
--- a/examples/client/Locomotion/ios/Podfile.lock
+++ b/examples/client/Locomotion/ios/Podfile.lock
@@ -447,7 +447,7 @@ PODS:
     - Firebase/Crashlytics (= 8.15.0)
     - React-Core
     - RNFBApp
-  - RNGestureHandler (2.4.2):
+  - RNGestureHandler (2.12.1):
     - React-Core
   - RNLocalize (2.2.4):
     - React-Core
@@ -816,9 +816,9 @@ SPEC CHECKSUMS:
   RNFastImage: 3207b9eb17c2425d574ca40db35185db6e324f4e
   RNFBApp: e4439717c23252458da2b41b81b4b475c86f90c4
   RNFBCrashlytics: 94e1f78e2a9aa9e02edbfb0d3f1f0921ce00094b
-  RNGestureHandler: 61628a2c859172551aa2100d3e73d1e57878392f
+  RNGestureHandler: c0d04458598fcb26052494ae23dda8f8f5162b13
   RNLocalize: ea02d6ee626a9239c9efe0b2b3f8a4660dff6df6
-  RNReanimated: 51bba3f4b6dc13fbfe83d620fe20e82fcf6e9697
+  RNReanimated: 1f117be601c59177816351a965bc57320b766c15
   RNScreens: 34cc502acf1b916c582c60003dc3089fa01dc66d
   RNSVG: ecd661f380a07ba690c9c5929c475a44f432d674
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
@@ -831,6 +831,6 @@ SPEC CHECKSUMS:
   StripeUICore: 08c1efbd7e3c54ee7fa74334a37a1d4c08ba944d
   Yoga: c4d61225a466f250c35c1ee78d2d0b3d41fe661c
 
-PODFILE CHECKSUM: 702820324fe56b3916c3fc841fd20ce5daddfaf7
+PODFILE CHECKSUM: 42909390370d7a65830c84fab99e66e070f1b4f9
 
 COCOAPODS: 1.12.1
diff --git a/examples/client/Locomotion/src/Components/BottomSheet/index.tsx b/examples/client/Locomotion/src/Components/BottomSheet/index.tsx
index c84492103..529e0649c 100644
--- a/examples/client/Locomotion/src/Components/BottomSheet/index.tsx
+++ b/examples/client/Locomotion/src/Components/BottomSheet/index.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 import React, {
-  useCallback, useContext, forwardRef, useEffect,
+  useCallback, useContext, forwardRef,
 } from 'react';
 import BottomSheet, {
   BottomSheetFooter,
@@ -9,13 +9,13 @@ import BottomSheet, {
 } from '@gorhom/bottom-sheet';
 import styled from 'styled-components';
 import { Text, View } from 'react-native';
-import { UserContext } from '../../context/user';
+import { Trans } from 'react-i18next';
 // eslint-disable-next-line import/no-unresolved
 import SafeView from '../SafeView';
 import { BottomSheetContext } from '../../context/bottomSheetContext';
 
-const BottomSheetTopInfo = styled(View)`
-background-color: #989898;
+const BottomSheetTopInfo = styled(View)<{backgroundColor: string}>`
+background-color: ${props => props.backgroundColor || '#989898'};
 /* position: absolute;
 height: 38px;
 top: -38px; */
@@ -49,7 +49,7 @@ const BottomSheetComponent = forwardRef(({
     setIsExpanded,
     snapPoints,
     footerComponent,
-    topBarText,
+    topBarProps,
   } = useContext(BottomSheetContext);
   const onAnimate = useCallback((from: any, to: any) => {
     if (!closeable && from !== -1) {
@@ -77,10 +77,10 @@ const BottomSheetComponent = forwardRef(({
 
   const getTopBar = () => (
     <>
-      {!!topBarText && (
-      <BottomSheetTopInfo>
+      {!!topBarProps.text && (
+      <BottomSheetTopInfo backgroundColor={topBarProps.backgroundColor}>
         <InfoText>
-          {topBarText}
+          <Trans defaults={topBarProps.text} components={topBarProps.htmlTags} />
         </InfoText>
       </BottomSheetTopInfo>
       )}
diff --git a/examples/client/Locomotion/src/Components/BsPages/index.tsx b/examples/client/Locomotion/src/Components/BsPages/index.tsx
index 5d5926d14..37717341c 100644
--- a/examples/client/Locomotion/src/Components/BsPages/index.tsx
+++ b/examples/client/Locomotion/src/Components/BsPages/index.tsx
@@ -284,6 +284,8 @@ export const ConfirmPickupTime = (props: any) => {
     chosenService,
     defaultService,
     setChosenService,
+    loadFutureBookingDays,
+    futureBookingDays,
   } = useContext(MewRidePageContext);
   const {
     changeBsPage,
@@ -300,9 +302,12 @@ export const ConfirmPickupTime = (props: any) => {
     const minutes = await getSettingByKey(SETTINGS_KEYS.MIN_MINUTES_BEFORE_FUTURE_RIDE);
     setMinMinutesBeforeFutureRide(minutes);
   };
+
   useEffect(() => {
     checkMinutesBeforeFutureRideSetting();
+    loadFutureBookingDays();
   }, []);
+
   useEffect(() => {
     setTempSelectedDate(startDate);
   }, [minMinutesBeforeFutureRide]);
@@ -361,7 +366,7 @@ export const ConfirmPickupTime = (props: any) => {
         textColor="black"
         isVisible={isDatePickerOpen}
         date={tempSelectedDate}
-        maximumDate={getFutureRideMaxDate()}
+        maximumDate={getFutureRideMaxDate(futureBookingDays)}
         minimumDate={getFutureRideMinDate((minMinutesBeforeFutureRide || 0))}
         mode="datetime"
         title={renderDatePickerTitle()}
diff --git a/examples/client/Locomotion/src/Components/CardRow/index.tsx b/examples/client/Locomotion/src/Components/CardRow/index.tsx
index caf4e0b76..65aaab089 100644
--- a/examples/client/Locomotion/src/Components/CardRow/index.tsx
+++ b/examples/client/Locomotion/src/Components/CardRow/index.tsx
@@ -5,17 +5,16 @@ import { View, Text } from 'react-native';
 import moment from 'moment';
 import styled, { ThemeContext } from 'styled-components';
 import { PaymentIcon } from 'react-native-payment-icons';
-import { PaymentMethodInterface } from 'context/payments/interface';
+import { PAYMENT_METHODS, paymentMethodToIconMap } from '../../pages/Payments/consts';
 import Button from '../Button';
 import { capitalizeFirstLetter, getLastFourForamttedShort } from '../../pages/Payments/cardDetailUtils';
 import i18n from '../../I18n';
 import SvgIcon from '../SvgIcon';
 import selected from '../../assets/selected-v.svg';
 import { Start, StartCapital } from '../../lib/text-direction';
-import cashIcon from '../../assets/cash.svg';
 import chevronIcon from '../../assets/chevron.svg';
 import { isCashPaymentMethod } from '../../lib/ride/utils';
-
+import paymentContext from '../../context/payments';
 
 type ContainerProps = {
   children: React.ReactNode,
@@ -91,9 +90,15 @@ const style = {
   [StartCapital()]: 28,
 };
 
+
 const CardRow = (paymentMethod: any) => {
   const { primaryColor } = useContext(ThemeContext);
+  const { offlinePaymentText, loadOfflinePaymentText } = paymentContext.useContainer();
   const [isCardExpired, setIsCardExpired] = useState(false);
+
+  useEffect(() => {
+    loadOfflinePaymentText();
+  }, []);
   useEffect(() => {
     let isExpired = false;
     setTimeout(() => {
@@ -101,7 +106,26 @@ const CardRow = (paymentMethod: any) => {
       setIsCardExpired(isExpired);
     }, 100);
   }, [paymentMethod]);
-  const testID = paymentMethod.addNew ? `${paymentMethod.testIdPrefix || ''}AddPaymentMethod` : (`${paymentMethod.testIdPrefix || ''}ChoosePaymentMethod`);
+  const testID = paymentMethod.addNew
+    ? `${paymentMethod.testIdPrefix || ''}AddPaymentMethod`
+    : (`${paymentMethod.testIdPrefix || ''}ChoosePaymentMethod${paymentMethod.id === PAYMENT_METHODS.OFFLINE || paymentMethod.id === PAYMENT_METHODS.CASH ? `_${paymentMethod.id}` : ''}`);
+
+  const getPaymentMethodIcon = () => {
+    const { brand, id, lastFour } = paymentMethod;
+    const isCard = lastFour;
+    if (isCard) {
+      return <PaymentIcon type={brand} />;
+    }
+    return (
+      <SvgIcon
+        fill={primaryColor}
+        Svg={paymentMethodToIconMap[id]}
+        width={40}
+        height={25}
+      />
+    );
+  };
+
   return (
     <>
       <Button
@@ -129,9 +153,7 @@ const CardRow = (paymentMethod: any) => {
                 )
                 : (
                   <>
-                    {!paymentMethod.lastFour
-                      ? isCashPaymentMethod(paymentMethod) ? <SvgIcon fill={primaryColor} Svg={cashIcon} width={40} height={25} /> : null
-                      : <PaymentIcon type={paymentMethod.brand} />}
+                    {getPaymentMethodIcon()}
                     {paymentMethod.mark ? (
                       <SvgIcon
                         style={{
@@ -160,7 +182,7 @@ const CardRow = (paymentMethod: any) => {
                     {!paymentMethod.lastFour
                       ? (
                         <Type>
-                          {`${i18n.t(`payments.${isCashPaymentMethod(paymentMethod) ? 'cash' : 'offline'}`)}`}
+                          {isCashPaymentMethod(paymentMethod) ? i18n.t('payments.cash') : offlinePaymentText }
                         </Type>
                       )
                       : (
diff --git a/examples/client/Locomotion/src/Components/RideCard/index.tsx b/examples/client/Locomotion/src/Components/RideCard/index.tsx
index 28efbf698..af6090725 100644
--- a/examples/client/Locomotion/src/Components/RideCard/index.tsx
+++ b/examples/client/Locomotion/src/Components/RideCard/index.tsx
@@ -1,10 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import moment from 'moment-timezone';
 import { PaymentIcon } from 'react-native-payment-icons';
-import { View } from 'react-native';
 import SkeletonContent from 'react-native-skeleton-content-nonexpo';
-
-import { RIDE_STATES } from '../../lib/commonTypes';
 import { PriceCalculation, RideInterface, RidePageContext } from '../../context/newRideContext';
 import i18n from '../../I18n';
 import RoundedButton from '../RoundedButton';
@@ -17,6 +14,7 @@ import StopPointsVerticalView from '../StopPointsVerticalView';
 import { getFormattedPrice, isPriceEstimated, convertTimezoneByLocation } from '../../context/newRideContext/utils';
 import cashIcon from '../../assets/cash.svg';
 import { PAYMENT_METHODS } from '../../pages/Payments/consts';
+import paymentContext from '../../context/payments';
 
 interface CardComponentProps {
   paymentMethod: {
@@ -28,12 +26,17 @@ interface CardComponentProps {
 const CardComponent = ({ paymentMethod }: CardComponentProps) => {
   const isCash = PAYMENT_METHODS.CASH === paymentMethod.id;
   const isOffline = PAYMENT_METHODS.OFFLINE === paymentMethod.id;
+  const { offlinePaymentText, loadOfflinePaymentText } = paymentContext.useContainer();
+
+  useEffect(() => {
+    loadOfflinePaymentText();
+  }, []);
 
   const getText = () => {
     if (isCash) {
       return i18n.t('payments.cash');
     } if (isOffline) {
-      return i18n.t('payments.offline');
+      return offlinePaymentText;
     }
     return paymentMethod.name;
   };
diff --git a/examples/client/Locomotion/src/I18n/en.json b/examples/client/Locomotion/src/I18n/en.json
index 3028d579d..bdd7eade1 100644
--- a/examples/client/Locomotion/src/I18n/en.json
+++ b/examples/client/Locomotion/src/I18n/en.json
@@ -54,6 +54,7 @@
         "noCharge": "No charge",
         "estimatedFare": "Estimated fare",
         "estimatedFareMessage": "Some of the fares are estimated and may vary based on ride and other conditions",
+        "couponDiscountMessage": "<0>Promo code applied!<\/0> {{couponDiscount}} will be discounted at the end of the ride",
         "type": {
             "pickup": "Pickup",
             "dropoff": "Drop off",
@@ -427,7 +428,7 @@
         "noActivity": "No rides",
         "noActivityYet": "No rides yet",
         "noActivitySub": "Take your first ride and see it here!",
-        "unpaidRide": "Unpaid ride",
+        "unpaidRide": "Payment was rejected",
         "rideCard": {
             "rideJourney": "Ride journey",
             "driverRating": "Driver rating",
@@ -441,7 +442,8 @@
                 "retrySuccessTitle": "You are all set!",
                 "retrySuccessBody": "Thank you for your payment - you can now resume your rides!",
                 "retrySuccessButton": "Done",
-                "retryPaymentButton": "Pay balance now"
+                "retryPaymentButton": "Pay balance now",
+                "text": "You have an outstanding balance of \n {{ price }} for this ride"
             }
         },
         "filters": {
@@ -525,7 +527,7 @@
         "setPaymentBanner": "Set payment method",
         "payWithCash": "Pay with Cash",
         "cash": "Cash",
-        "offline": "Offline payment",
+        "offline": "Billed to company",
         "popups": {
             "removeCard": {
                 "title": "Remove payment method",
@@ -635,6 +637,7 @@
         },
         "ride": {
             "paymentMethodNotAllowedOnService": "{{type}} not allowed for this service",
+            "defaultPaymentMethodNotAllowedText": "This payment method is",
             "now": "Now",
             "notes": {
                 "edit": "Edit note",
diff --git a/examples/client/Locomotion/src/assets/offline.svg b/examples/client/Locomotion/src/assets/offline.svg
new file mode 100644
index 000000000..6d5ea4f51
--- /dev/null
+++ b/examples/client/Locomotion/src/assets/offline.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 40 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="40" height="24" rx="2" ry="2" fill="#7C86A3" fill-opacity="0.1" />
+  <path x="2.5" fill-rule="evenodd" clip-rule="evenodd" d="M23.3605 3C24.1649 3 24.8833 3.5032 25.1582 4.25913L25.8614 6.19308C26.3376 7.50254 25.9094 8.85894 24.9767 9.69124C24.9923 9.79188 25.0004 9.89499 25.0004 10V19C25.0004 20.1046 24.1049 21 23.0004 21H11.0004C9.89579 21 9.00036 20.1046 9.00036 19V10C9.00036 9.89514 9.00843 9.79217 9.02398 9.69167C8.09072 8.85929 7.66211 7.50237 8.13846 6.19241L8.84147 4.25913C9.11635 3.5032 9.83478 3 10.6391 3H23.3605ZM13.3304 7.68497L13.8314 4.92963L13.9863 4L10.6391 4C10.2553 4 9.91244 4.24014 9.78126 4.60088L9.07825 6.53416C8.55403 7.97577 9.62164 9.5 11.1556 9.5C12.2239 9.5 13.1393 8.73602 13.3304 7.68497ZM24.0004 10.2878C23.6452 10.4244 23.2565 10.5 22.8448 10.5C21.7366 10.5 20.7417 9.9339 20.1626 9.05413C19.5837 10.1972 18.3989 11 17.0001 11C15.6015 11 14.4168 10.1974 13.8378 9.05451C13.2585 9.93407 12.2637 10.5 11.1556 10.5C10.7439 10.5 10.3554 10.4244 10.0004 10.288V19C10.0004 19.5523 10.4481 20 11.0004 20H14.0004V15C14.0004 14.4477 14.4481 14 15.0004 14H19.0004C19.5526 14 20.0004 14.4477 20.0004 15V20H23.0004C23.5526 20 24.0004 19.5523 24.0004 19V10.2878ZM18.984 4.00002L19.1772 5.06243L19.5069 7.04085C19.7651 8.5899 18.5705 10 17.0001 10C15.4297 10 14.2351 8.5899 14.4933 7.04085L14.8165 5.10128L15.0168 4.00002L18.984 4.00002ZM20.1623 4.89079L20.6705 7.68538C20.8615 8.73619 21.7767 9.5 22.8448 9.5C24.3784 9.5 25.4458 7.97611 24.9216 6.53482L24.2184 4.60087C24.0872 4.24013 23.7444 4 23.3605 4L20.0139 4L20.1623 4.89079ZM19.0004 15V20H15.0004V15H19.0004Z" fill="#212229" /> 
+</svg>
diff --git a/examples/client/Locomotion/src/context/bottomSheetContext/index.js b/examples/client/Locomotion/src/context/bottomSheetContext/index.js
index 250c3f554..beb25443e 100644
--- a/examples/client/Locomotion/src/context/bottomSheetContext/index.js
+++ b/examples/client/Locomotion/src/context/bottomSheetContext/index.js
@@ -27,12 +27,19 @@ export const SNAP_POINT_STATES = {
   [BS_PAGES.NO_AVAILABLE_SERVICES]: [STATIC_SNAP_POINTS],
   [BS_PAGES.PICKUP_NOT_IN_TERRITORY]: [STATIC_SNAP_POINTS],
 };
+
+export const INITIAL_TOP_BAR_PROPS = {
+  text: '',
+  backgroundColor: null,
+  htmlTags: [],
+};
+
 const BottomSheetProvider = ({ children }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [genericErrorDetails, setGenericErrorDetails] = useState({});
   const [snapPointsState, setSnapPointsState] = useState(SNAP_POINT_STATES[BS_PAGES.LOADING]);
   const [footerComponent, setFooterComponent] = useState(null);
-  const [topBarText, setTopBarText] = useState('');
+  const [topBarProps, setTopBarProps] = useState(INITIAL_TOP_BAR_PROPS);
   const snapPoints = useMemo(() => snapPointsState, [snapPointsState]);
 
   return (
@@ -44,10 +51,10 @@ const BottomSheetProvider = ({ children }) => {
         setSnapPointsState,
         setFooterComponent,
         footerComponent,
-        topBarText,
-        setTopBarText,
         genericErrorDetails,
         setGenericErrorDetails,
+        topBarProps,
+        setTopBarProps,
       }}
     >
       {children}
diff --git a/examples/client/Locomotion/src/context/newRideContext/index.tsx b/examples/client/Locomotion/src/context/newRideContext/index.tsx
index d119bb205..44dec2f35 100644
--- a/examples/client/Locomotion/src/context/newRideContext/index.tsx
+++ b/examples/client/Locomotion/src/context/newRideContext/index.tsx
@@ -158,6 +158,8 @@ interface RidePageContextInterface {
   numberOfPassengers: number,
   setNumberOfPassengers: (num: number) => void,
   setLastAcknowledgedRideCompletionTimestampToNow: () => void
+  loadFutureBookingDays: () => void;
+  futureBookingDays: number;
 }
 
 export const RidePageContext = createContext<RidePageContextInterface>({
@@ -215,6 +217,8 @@ export const RidePageContext = createContext<RidePageContextInterface>({
   numberOfPassengers: null,
   setNumberOfPassengers: () => undefined,
   setLastAcknowledgedRideCompletionTimestampToNow: () => undefined,
+  loadFutureBookingDays: () => undefined,
+  futureBookingDays: 0,
 });
 
 const HISTORY_RECORDS_NUM = 10;
@@ -253,6 +257,8 @@ const RidePageContextProvider = ({ children }: {
   const getRouteName = () => navigationService?.getNavigator()?.getCurrentRoute().name;
   const [numberOfPassengers, setNumberOfPassengers] = useState<number | null>(null);
   const [addressSearchLabel, setAddressSearchLabel] = useState<string | null>(null);
+  const [futureBookingDays, setfutureBookingDays] = useState(0);
+
 
   const intervalRef = useRef<any>();
 
@@ -463,6 +469,11 @@ const RidePageContextProvider = ({ children }: {
 
   const getRidesByParams = async (params: any) => rideApi.fetchRides(params);
 
+  const loadFutureBookingDays = async () => {
+    const maxDaysFromSettings = await getSettingByKey(SETTINGS_KEYS.MAX_DAYS_FOR_FUTURE_RIDE);
+    setfutureBookingDays(maxDaysFromSettings);
+  };
+
   const getLastCompletedRide = async () => {
     let lastTimestamp = await StorageService.get('lastCompletedRideTimestamp');
     if (!lastTimestamp) {
@@ -1344,6 +1355,8 @@ const RidePageContextProvider = ({ children }: {
         formatStationsList,
         clearRequestSp,
         setLastAcknowledgedRideCompletionTimestampToNow,
+        loadFutureBookingDays,
+        futureBookingDays,
       }}
     >
       {children}
diff --git a/examples/client/Locomotion/src/context/newRideContext/utils.ts b/examples/client/Locomotion/src/context/newRideContext/utils.ts
index 8f486cc23..db677a66a 100644
--- a/examples/client/Locomotion/src/context/newRideContext/utils.ts
+++ b/examples/client/Locomotion/src/context/newRideContext/utils.ts
@@ -26,7 +26,7 @@ export const FEEDBACK_TYPES = {
 export const RIDER_APP_SOURCE = 'RIDER_APP';
 
 export const getFutureRideMinDate = (minutesBefore: number) => moment().add(minutesBefore, 'minutes').toDate();
-export const getFutureRideMaxDate = () => moment().add(7, 'days').toDate();
+export const getFutureRideMaxDate = (daysAfter: number) => moment().add(daysAfter, 'days').toDate();
 
 export const TAG_OPTIONS = {
   FASTEST: i18n.t('services.tags.fastest'),
@@ -165,11 +165,19 @@ export const formatStopPointsForEstimations = (requestStopPoints: any[]) => requ
   lng: sp.lng,
 }));
 
-export const getFormattedPrice = (priceCurrency: string | undefined, priceAmount: number) => {
+export const getFormattedPrice = (priceCurrency: string | undefined,
+  priceAmount: number | undefined) => {
   if (!priceCurrency) {
     return i18n.t('rideDetails.noCharge');
   }
-  return new Intl.NumberFormat('en-US', { style: 'currency', currency: priceCurrency }).format(priceAmount);
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency: priceCurrency }).format(priceAmount || 0);
+};
+
+export const getCouponText = (coupon: any) => {
+  if (!coupon || coupon.status === 'error') {
+    return '';
+  }
+  return coupon.percent_off ? `${coupon.percent_off}%` : getFormattedPrice(coupon.currency, coupon.amount_off);
 };
 
 
diff --git a/examples/client/Locomotion/src/context/onboarding/index.tsx b/examples/client/Locomotion/src/context/onboarding/index.tsx
index 8d8c27469..59023989f 100644
--- a/examples/client/Locomotion/src/context/onboarding/index.tsx
+++ b/examples/client/Locomotion/src/context/onboarding/index.tsx
@@ -120,6 +120,13 @@ const OnboardingContextProvider = ({ children }: { children: any }) => {
       await getSettingByKey(
         SETTINGS_KEYS.CARD_PAGE_SETTINGS,
       );
+      const enforceProfilePicture = await getSettingByKey(
+        SETTINGS_KEYS.ENFORCE_PROFILE_PICTURE,
+      );
+      setRequiredOnboarding({
+        ...requiredOnboarding,
+        [MAIN_ROUTES.AVATAR]: enforceProfilePicture,
+      });
       const screenKey: string | undefined = Object.keys(keyToScreen).find(key => !user[key]);
       let unfinishedScreen = screenKey ? keyToScreen[screenKey] : keyToScreen.welcome;
       if (unfinishedScreen === MAIN_ROUTES.CARD) {
diff --git a/examples/client/Locomotion/src/context/payments/index.js b/examples/client/Locomotion/src/context/payments/index.js
index 1036dacb2..8d158be88 100644
--- a/examples/client/Locomotion/src/context/payments/index.js
+++ b/examples/client/Locomotion/src/context/payments/index.js
@@ -1,10 +1,9 @@
 import { useState, useEffect } from 'react';
 import { createContainer } from 'unstated-next';
-import { PaymentIntent } from '@stripe/stripe-react-native';
+import i18n from '../../I18n';
 import { PAYMENT_STATES } from '../../lib/commonTypes';
 import Mixpanel from '../../services/Mixpanel';
 import cashPaymentMethod from '../../pages/Payments/cashPaymentMethod';
-import { fetchRides } from '../newRideContext/api';
 import network from '../../services/network';
 import SETTINGS_KEYS from '../settings/keys';
 import SettingContext from '../settings';
@@ -17,6 +16,15 @@ const usePayments = () => {
   const [paymentMethods, setPaymentMethods] = useState([]);
   const [paymentAccount, setPaymentAccount] = useState(null);
   const [hasOutstandingPayment, setHasOutstandingPayment] = useState(false);
+  const [offlinePaymentText, setOfflinePaymentText] = useState(null);
+
+  const loadOfflinePaymentText = async () => {
+    const companyName = await useSettings.getSettingByKey(SETTINGS_KEYS.OFFLINE_PAYMENT_TEXT);
+    if (companyName) {
+      setOfflinePaymentText(companyName);
+    }
+    return companyName;
+  };
 
   const getCustomer = async () => {
     try {
@@ -149,17 +157,22 @@ const usePayments = () => {
     }
   }, [paymentMethods]);
 
+  const loadOutstandingBalance = async (paymentMethodId) => {
+    const { data } = await network.get(`${BASE_PATH}/${paymentMethodId}/outstanding-balance`, {
+      params: {
+        includePayments: true,
+      },
+    });
+    return data;
+  };
+
   const loadOutstandingBalanceRide = async () => {
     const returnObject = {
       rideId: null,
     };
     const paymentMethod = getClientOutstandingBalanceCard();
     if (paymentMethod) {
-      const { data: details } = await network.get(`${BASE_PATH}/${paymentMethod.id}/outstanding-balance`, {
-        params: {
-          includePayments: true,
-        },
-      });
+      const details = await loadOutstandingBalance(paymentMethod.id);
       if (details && details.payments.length) {
         const { data: ride } = await network.get('/api/v1/me/rides', {
           params: {
@@ -191,6 +204,9 @@ const usePayments = () => {
     loadOutstandingBalanceRide,
     retryPayment,
     hasOutstandingPayment,
+    loadOutstandingBalance,
+    offlinePaymentText: offlinePaymentText || i18n.t('payments.offline'),
+    loadOfflinePaymentText,
   };
 };
 
diff --git a/examples/client/Locomotion/src/context/settings/keys.ts b/examples/client/Locomotion/src/context/settings/keys.ts
index bf33358d7..cca79e50a 100644
--- a/examples/client/Locomotion/src/context/settings/keys.ts
+++ b/examples/client/Locomotion/src/context/settings/keys.ts
@@ -2,6 +2,7 @@ export default {
   SERVICE_ESTIMATIONS_INTERVAL_IN_SECONDS: 'riderApp.preRide.estimationsInterval',
   POST_RIDE_TIP_SETTINGS: 'riderApp.postRide.showTipPresetsAsPercentageThreshold',
   CARD_PAGE_SETTINGS: 'riderApp.onboarding.cardPageSettings',
+  ENFORCE_PROFILE_PICTURE: 'riderApp.enforceProfilePicture',
   MIN_APP_VERSION: 'riderApp.minAppVersion',
   CONTACT_US_URL: 'riderApp.contactUsUrl',
   TERMS_OF_USE_URL: 'riderApp.termsOfUseUrl',
@@ -15,4 +16,6 @@ export default {
   MEASURE_SYSTEM: 'riderApp.measureSystem',
   MULTI_SP: 'riderApp.showMultiStopPoint',
   DISABLE_CAPTCHA_UI: 'riderApp.disableCaptchaUi',
+  MAX_DAYS_FOR_FUTURE_RIDE: 'riderApp.daysForFutureRideBooking',
+  OFFLINE_PAYMENT_TEXT: 'riderApp.offlinePaymentText',
 };
diff --git a/examples/client/Locomotion/src/context/user/index.tsx b/examples/client/Locomotion/src/context/user/index.tsx
index b05335044..8e4e9505e 100644
--- a/examples/client/Locomotion/src/context/user/index.tsx
+++ b/examples/client/Locomotion/src/context/user/index.tsx
@@ -47,8 +47,10 @@ interface UserContextInterface {
   updatePushToken: () => Promise<boolean | null>,
   deleteUser: () => Promise<boolean>,
   updateUser: (values: any) => Promise<any>,
+  coupon: any | null,
   getCoupon: () => Promise<any>,
   createCoupon: (values: any) => Promise<any>,
+  setCoupon: (coupon: any | null) => void,
   onLogin: (phoneNumber: string, channel: string) => Promise<void>
 }
 
@@ -69,7 +71,9 @@ export const UserContext = createContext<UserContextInterface>({
   updatePushToken: async () => false,
   deleteUser: async () => true,
   updateUser: async (values: any) => undefined,
+  coupon: null,
   getCoupon: async () => undefined,
+  setCoupon: (coupon: any | null) => null,
   createCoupon: async (values: any) => undefined,
   onLogin: async (phoneNumber: string, channel: string) => undefined,
 });
@@ -78,6 +82,7 @@ const UserContextProvider = ({ children }: { children: any }) => {
   const usePayments = PaymentsContext.useContainer();
   const [locationGranted, setLocationGranted] = useState();
   const [user, setUser] = useState<User | null>(null);
+  const [coupon, setCoupon] = useState<any | null>(null);
 
   const getUserFromServer = () => getUserDetails();
 
@@ -252,7 +257,9 @@ const UserContextProvider = ({ children }: { children: any }) => {
         updatePushToken,
         deleteUser,
         updateUser,
+        coupon,
         getCoupon,
+        setCoupon: c => setCoupon(c),
         createCoupon,
         onLogin,
       }}
diff --git a/examples/client/Locomotion/src/lib/ride/utils.ts b/examples/client/Locomotion/src/lib/ride/utils.ts
index cfecfd221..e950f0628 100644
--- a/examples/client/Locomotion/src/lib/ride/utils.ts
+++ b/examples/client/Locomotion/src/lib/ride/utils.ts
@@ -43,6 +43,8 @@ export const getSpTextWithNumberPrefix = (sp: any) => {
   return `${ordinalNumberPrefixText}${i18n.t(`stopPointsTypes.${uiSpType}`)}`;
 };
 
-export const isCashPaymentMethod = (paymentMethod: any) => paymentMethod.id === PAYMENT_METHODS.CASH;
+export const isCashPaymentMethod = (paymentMethod: any) => paymentMethod?.id === PAYMENT_METHODS.CASH;
+
+export const isOfflinePaymentMethod = (paymentMethod: any) => paymentMethod?.id === PAYMENT_METHODS.OFFLINE;
 
 export const isCardPaymentMethod = (paymentMethod: any) => ![PAYMENT_METHODS.CASH, PAYMENT_METHODS.OFFLINE].includes(paymentMethod?.id);
diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/PaymentButton/index.tsx b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/PaymentButton/index.tsx
index c5f4916c3..1d277df1f 100644
--- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/PaymentButton/index.tsx
+++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/PaymentButton/index.tsx
@@ -1,24 +1,23 @@
 import React, {
-  useCallback, useContext, useEffect, useState,
+  useCallback, useContext,
 } from 'react';
 import { Text, View } from 'react-native';
 import { PaymentIcon } from 'react-native-payment-icons';
 import styled, { ThemeContext } from 'styled-components';
 import { useFocusEffect } from '@react-navigation/native';
 import SkeletonContent from 'react-native-skeleton-content-nonexpo';
-import { getFormattedPrice } from '../../../../../../context/newRideContext/utils';
+import { isCardPaymentMethod, isCashPaymentMethod, isOfflinePaymentMethod } from '../../../../../../lib/ride/utils';
+import { getCouponText } from '../../../../../../context/newRideContext/utils';
 import { MAIN_ROUTES } from '../../../../../routes';
 import SvgIcon from '../../../../../../Components/SvgIcon';
 import { FONT_SIZES, FONT_WEIGHTS, GREEN_COLOR } from '../../../../../../context/theme';
 import { Brand } from '../../../../../../context/payments/interface';
-import cashIcon from '../../../../../../assets/cash.svg';
 import plus from '../../../../../../assets/bottomSheet/plus.svg';
 import i18n from '../../../../../../I18n';
 import Button from '../../../../../../Components/Button';
 import * as navigationService from '../../../../../../services/navigation';
 import { UserContext } from '../../../../../../context/user';
 import selected from '../../../../../../assets/selected-v.svg';
-import { PAYMENT_METHODS } from '../../../../../../pages/Payments/consts';
 
 const TimeText = styled(Text)`
     ${FONT_SIZES.LARGE}
@@ -88,27 +87,15 @@ const PaymentButton = ({
   invalid,
 }: PaymentButtonProps) => {
   const { primaryColor } = useContext(ThemeContext);
-  const [coupon, setCoupon] = useState<any>(null);
-  const { getCoupon } = useContext(UserContext);
+  const { getCoupon, coupon, setCoupon } = useContext(UserContext);
   const isDebuggingEnabled = (typeof atob !== 'undefined');
   const noCoupon = coupon && coupon.status === 'error';
 
-  const loadPromoText = () => {
-    if (coupon && !noCoupon) {
-      let amount;
-      if (coupon.amount_off) {
-        amount = getFormattedPrice(coupon.currency, coupon.amount_off);
-      } else if (coupon.percent_off) {
-        amount = `${coupon.percent_off}%`;
-      }
-
-      return i18n.t('home.promoCode.amountOff', { amount });
-    }
-    return i18n.t('bottomSheetContent.ride.promoText');
-  };
+  const loadPromoText = () => (coupon && !noCoupon ? i18n.t('home.promoCode.amountOff', { amount: getCouponText(coupon) })
+    : i18n.t('bottomSheetContent.ride.promoText'));
 
   const loadPromoButton = () => {
-    if (id === PAYMENT_METHODS.CASH) {
+    if (isCashPaymentMethod({ id }) || isOfflinePaymentMethod({ id })) {
       return null;
     }
     if (!isDebuggingEnabled && coupon === null) {
@@ -147,6 +134,7 @@ const PaymentButton = ({
         </PromoButton>
       );
     }
+    return (null);
   };
 
   const checkCoupon = async () => {
@@ -161,23 +149,22 @@ const PaymentButton = ({
   useFocusEffect(
     useCallback(() => {
       checkCoupon();
+      return () => setCoupon(null);
     }, []),
   );
   const IconColor = invalid ? '#F83743' : primaryColor;
   return (
     <Container>
       <CardNameContainer>
-        {id ? (id !== PAYMENT_METHODS.CASH
-          ? <PaymentIcon type={brand || 'generic'} />
+        {isCardPaymentMethod({ id }) ? <PaymentIcon type={brand || 'generic'} />
           : (
             <SvgIcon
               fill={IconColor}
-              Svg={cashIcon}
+              Svg={icon}
               height={25}
               width={40}
             />
-          ))
-          : <SvgIcon fill={IconColor} Svg={icon} height={15} width={15} />}
+          )}
         <TimeText numberOfLines={1}>{title}</TimeText>
       </CardNameContainer>
       <PromoButtonContainer>
diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/index.tsx b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/index.tsx
index 0e411aa3f..208f2af3f 100644
--- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/index.tsx
+++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/index.tsx
@@ -5,6 +5,7 @@ import DatePicker from 'react-native-date-picker';
 import moment from 'moment';
 import { ThemeContext } from 'styled-components';
 import { Animated } from 'react-native';
+import { isCashPaymentMethod, isOfflinePaymentMethod } from '../../../../../lib/ride/utils';
 import DatePickerPoppup from '../../../../../popups/DatePickerPoppup';
 import FutureBookingButton from './FutureBookingButton';
 import {
@@ -16,7 +17,6 @@ import NoteButton from '../../../../../Components/GenericRideButton';
 import i18n from '../../../../../I18n';
 import plus from '../../../../../assets/bottomSheet/plus.svg';
 import editNote from '../../../../../assets/bottomSheet/edit_note.svg';
-import creditCardIcon from '../../../../../assets/bottomSheet/credit_card_icon.svg';
 import PaymentButton from './PaymentButton';
 import PaymentsContext from '../../../../../context/payments';
 import { PaymentMethodInterface } from '../../../../../context/payments/interface';
@@ -24,16 +24,14 @@ import { RideStateContextContext } from '../../../../../context/ridePageStateCon
 import { popupNames } from '../utils';
 import { BS_PAGES } from '../../../../../context/ridePageStateContext/utils';
 import cashPaymentMethod from '../../../../../pages/Payments/cashPaymentMethod';
+import offlinePaymentMethod from '../../../../../pages/Payments/offlinePaymentMethod';
 import { getFutureRideMaxDate, getFutureRideMinDate } from '../../../../../context/newRideContext/utils';
 import settings from '../../../../../context/settings';
 import SETTINGS_KEYS from '../../../../../context/settings/keys';
-import {
-  getTextColorForTheme,
-} from '../../../../../context/theme';
-import { PAYMENT_METHODS } from '../../../../../pages/Payments/consts';
+import { PAYMENT_METHODS, paymentMethodToIconMap } from '../../../../../pages/Payments/consts';
 import PassengersCounter from './PassengersCounter';
 import ErrorPopup from '../../../../../popups/TwoButtonPopup';
-import { getPaymentMethod } from '../../../../../pages/Payments/cardDetailUtils';
+import { capitalizeFirstLetter, getPaymentMethod } from '../../../../../pages/Payments/cardDetailUtils';
 
 const POOLING_TYPES = {
   NO: 'no',
@@ -59,6 +57,8 @@ const RideButtons = ({
     unconfirmedPickupTime,
     setNumberOfPassengers,
     defaultService,
+    loadFutureBookingDays,
+    futureBookingDays,
   } = useContext(RidePageContext);
 
 
@@ -83,6 +83,7 @@ const RideButtons = ({
   const [passengersCounterError, setPassengersCounterError] = useState(false);
   const firstDate = () => moment(ride?.scheduledTo || undefined).add(ride?.scheduledTo ? 0 : (minMinutesBeforeFutureRide || 0) + 1, 'minutes').toDate();
   const [tempSelectedDate, setTempSelectedDate] = useState(firstDate());
+
   const paymentMethodNotAllowedOnService = chosenService && ride?.paymentMethodId
     && !chosenService.allowedPaymentMethods.includes(getPaymentMethod(ride.paymentMethodId));
 
@@ -105,6 +106,7 @@ const RideButtons = ({
   useEffect(() => {
     checkFutureRidesSetting();
     checkMinutesBeforeFutureRideSetting();
+    loadFutureBookingDays();
   }, []);
 
   const [animatedOpacity] = useState(new Animated.Value(0));
@@ -174,7 +176,7 @@ const RideButtons = ({
           textColor="black"
           isVisible={isDatePickerOpen}
           date={tempSelectedDate}
-          maximumDate={getFutureRideMaxDate()}
+          maximumDate={getFutureRideMaxDate(futureBookingDays)}
           minimumDate={getFutureRideMinDate((minMinutesBeforeFutureRide || 0))}
           mode="datetime"
           title={renderDatePickerTitle()}
@@ -215,15 +217,33 @@ const RideButtons = ({
     );
   };
 
+  const paymentMethodIdToDataMap = {
+    [PAYMENT_METHODS.CASH]: cashPaymentMethod,
+    [PAYMENT_METHODS.OFFLINE]: offlinePaymentMethod,
+  };
   const renderPaymentButton = () => {
+    const { offlinePaymentText, loadOfflinePaymentText } = PaymentsContext.useContainer();
+    useEffect(() => {
+      loadOfflinePaymentText();
+    }, []);
     const ridePaymentMethodId = ride?.paymentMethodId || '';
     const selectedPaymentMethod:
-     PaymentMethodInterface | undefined = ridePaymentMethodId === PAYMENT_METHODS.CASH
-       ? cashPaymentMethod
-       : paymentMethods.find(pm => pm.id === ridePaymentMethodId);
-
+     PaymentMethodInterface | undefined = paymentMethodIdToDataMap[ridePaymentMethodId]
+      || paymentMethods.find(pm => pm.id === ridePaymentMethodId);
+
+    const getSelectedPaymentMethodTitle = () : string => {
+      if (isCashPaymentMethod(selectedPaymentMethod)) {
+        return i18n.t('payments.cash');
+      }
+      if (isOfflinePaymentMethod(selectedPaymentMethod)) {
+        return offlinePaymentText;
+      }
+
+      return selectedPaymentMethod?.name || i18n.t('bottomSheetContent.ride.addPayment');
+    };
     const pureButton = () => (
       <ButtonContainer
+        padding="0 10px"
         error={paymentMethodNotAllowedOnService}
         testID="RidePayment"
         onPress={() => {
@@ -233,8 +253,8 @@ const RideButtons = ({
       >
         <PaymentButton
           brand={selectedPaymentMethod?.brand}
-          icon={creditCardIcon}
-          title={selectedPaymentMethod?.name === cashPaymentMethod.name ? i18n.t('payments.cash') : (selectedPaymentMethod?.name || i18n.t('bottomSheetContent.ride.addPayment'))}
+          icon={paymentMethodToIconMap[selectedPaymentMethod?.id]}
+          title={getSelectedPaymentMethodTitle()}
           id={selectedPaymentMethod?.id}
           invalid={paymentMethodNotAllowedOnService}
         />
@@ -242,12 +262,20 @@ const RideButtons = ({
     );
 
     const ridePaymentMethod = ride?.paymentMethodId ? getPaymentMethod(ride.paymentMethodId) : '';
+    const getTypeText = () => {
+      if (isOfflinePaymentMethod(selectedPaymentMethod)) {
+        return i18n.t('bottomSheetContent.ride.defaultPaymentMethodNotAllowedText');
+      }
+      return capitalizeFirstLetter(ridePaymentMethod);
+    };
     return (
       <>
         {paymentMethodNotAllowedOnService
           ? (
             <ButtonWithError
-              errorText={i18n.t('bottomSheetContent.ride.paymentMethodNotAllowedOnService', { type: ridePaymentMethod.charAt(0).toUpperCase() + ridePaymentMethod.slice(1) })}
+              errorText={i18n.t('bottomSheetContent.ride.paymentMethodNotAllowedOnService', {
+                type: getTypeText(),
+              })}
             >
               {pureButton()}
             </ButtonWithError>
diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/styled.tsx b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/styled.tsx
index 740013853..1eaa59a00 100644
--- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/styled.tsx
+++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/styled.tsx
@@ -34,7 +34,7 @@ export const ButtonContainer = styled(Button).attrs({
     height: 100%;
     display: flex;
     width: ${HALF_WIDTH};
-    padding: 0 15px;
+    padding: ${(({ padding }) => (padding || '0 15px'))};
 `;
 
 export const ButtonText = styled(Text)`
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 014c59566..5169c8613 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
@@ -1,27 +1,56 @@
 import React, { useContext, useEffect } from 'react';
 import SkeletonContent from 'react-native-skeleton-content-nonexpo';
+import { Text } from 'react-native';
+import { getCouponText } from '../../../../../context/newRideContext/utils';
 import { RidePageContext } from '../../../../../context/newRideContext';
+import { UserContext } from '../../../../../context/user';
 import ServiceCard from './ServiceCard';
 import { ServiceOptionsContainer } from './styles';
 import { serviceCardSkeleton } from './ServiceCard/skeleton';
-import { BottomSheetContext } from '../../../../../context/bottomSheetContext';
+import { BottomSheetContext, INITIAL_TOP_BAR_PROPS } from '../../../../../context/bottomSheetContext';
 import i18n from '../../../../../I18n';
 
+const SUCCESS_COLOR = '#25B861';
+
 const ServiceOptions = () => {
   const { serviceEstimations, stopRequestInterval } = useContext(RidePageContext);
+  const { coupon } = useContext(UserContext);
   const isDebuggingEnabled = (typeof atob !== 'undefined');
-  const {
-    setTopBarText,
-  } = useContext(BottomSheetContext);
+  const { setTopBarProps } = useContext(BottomSheetContext);
+
   useEffect(() => () => stopRequestInterval(), []);
 
+  const clearTopBar = () => {
+    setTopBarProps(INITIAL_TOP_BAR_PROPS);
+  };
+
+  const setCouponTopBar = () => {
+    setTopBarProps({
+      text: i18n.t('rideDetails.couponDiscountMessage', { couponDiscount: getCouponText(coupon) }),
+      backgroundColor: SUCCESS_COLOR,
+      htmlTags: [<Text style={{ fontWeight: 'bold' }} />],
+    });
+  };
+
+  const setEstimateFareTopBar = () => {
+    setTopBarProps({
+      text: i18n.t('rideDetails.estimatedFareMessage'),
+      backgroundColor: null,
+      htmlTags: [],
+    });
+  };
+
   useEffect(() => {
-    if ((serviceEstimations || []).some(estimation => estimation.isPriceEstimated)) {
-      setTopBarText(i18n.t('rideDetails.estimatedFareMessage'));
+    if (coupon && coupon.status !== 'error') {
+      setCouponTopBar();
+    } else if ((serviceEstimations || []).some(estimation => estimation.isPriceEstimated)) {
+      setEstimateFareTopBar();
     }
 
-    return () => setTopBarText('');
-  }, [serviceEstimations]);
+    return () => {
+      clearTopBar();
+    };
+  }, [serviceEstimations, coupon]);
 
 
   return (
diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx
index 3d41b1ec9..6bbe38ce0 100644
--- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx
+++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx
@@ -34,7 +34,6 @@ const RideOptions = () => {
 
   const {
     setFooterComponent,
-    setTopBarText,
   } = useContext(BottomSheetContext);
 
   const {
@@ -48,8 +47,10 @@ const RideOptions = () => {
   const clearPopup = () => {
     setPopupToShow(null);
   };
-
-  const showCash = !!serviceEstimations?.filter((se: any) => se.allowedPaymentMethods.includes(PAYMENT_METHODS.CASH)).length;
+  const allServicesPaymentMethods = new Set(serviceEstimations
+    ?.map((se: any) => se.allowedPaymentMethods).flat());
+  const showCash = allServicesPaymentMethods.has(PAYMENT_METHODS.CASH);
+  const showOffline = allServicesPaymentMethods.has(PAYMENT_METHODS.OFFLINE);
 
   useEffect(() => {
     const updateDefaultPaymentMethod = async () => {
@@ -116,6 +117,7 @@ const RideOptions = () => {
             }, 500);
           }}
           showCash={showCash}
+          showOffline={showOffline}
           selected={ride?.paymentMethodId
             && usePayments.paymentMethods.find((pm: any) => ride.paymentMethodId === pm.id)
             ? ride.paymentMethodId : defaultPaymentMethod?.id}
diff --git a/examples/client/Locomotion/src/pages/ActiveRide/index.js b/examples/client/Locomotion/src/pages/ActiveRide/index.js
index 03fce2ca6..558577eba 100644
--- a/examples/client/Locomotion/src/pages/ActiveRide/index.js
+++ b/examples/client/Locomotion/src/pages/ActiveRide/index.js
@@ -9,6 +9,7 @@ import {
 import { Portal } from '@gorhom/portal';
 import Config from 'react-native-config';
 import { distance, point } from '@turf/turf';
+import { isCardPaymentMethod } from '../../lib/ride/utils';
 import networkInfo from '../../services/networkInfo';
 import AFToast from '../../Components/Toast';
 import * as navigationService from '../../services/navigation';
@@ -119,7 +120,7 @@ const RidePage = ({ mapSettings, navigation }) => {
     reverseLocationGeocode,
   } = useContext(RidePageContext);
   const {
-    setIsExpanded, snapPoints, isExpanded, topBarText,
+    setIsExpanded, snapPoints, isExpanded, topBarProps,
   } = useContext(BottomSheetContext);
   const {
     clientHasValidPaymentMethods,
@@ -242,7 +243,8 @@ const RidePage = ({ mapSettings, navigation }) => {
         isConfirmPickup
         initialLocation={requestStopPoints[0]}
         onButtonPress={(pickupLocation) => {
-          if (clientHasValidPaymentMethods() || ride.paymentMethodId === PAYMENT_METHODS.CASH) {
+          const { paymentMethodId } = ride;
+          if (clientHasValidPaymentMethods() || !isCardPaymentMethod({ id: paymentMethodId })) {
             requestRide(pickupLocation);
           } else {
             changeBsPage(BS_PAGES.NO_PAYMENT);
@@ -555,7 +557,7 @@ const RidePage = ({ mapSettings, navigation }) => {
         )}
       <MapOverlayButtons
         style={{
-          marginBottom: topBarText ? 40 : 0,
+          marginBottom: topBarProps.text ? 40 : 0,
           bottom: parseFloat(snapPoints[0]) + 25,
         }}
       >
diff --git a/examples/client/Locomotion/src/pages/Payments/cardDetailUtils.ts b/examples/client/Locomotion/src/pages/Payments/cardDetailUtils.ts
index a38b708d0..a195e4146 100644
--- a/examples/client/Locomotion/src/pages/Payments/cardDetailUtils.ts
+++ b/examples/client/Locomotion/src/pages/Payments/cardDetailUtils.ts
@@ -1,3 +1,4 @@
+import { isCardPaymentMethod } from '../../lib/ride/utils';
 import { PAYMENT_METHODS } from '../../lib/commonTypes';
 
 export const capitalizeFirstLetter = (string: string) => string?.charAt(0).toUpperCase() + string?.slice(1);
@@ -5,7 +6,7 @@ export const getLastFourForamttedShort = (lastFour: string) => `**** ${capitaliz
 export const getLastFourForamttedLong = (lastFour: string) => `**** **** **** ${capitalizeFirstLetter(lastFour)}`;
 
 export const getPaymentMethod = (paymentMethodId: string) => {
-  if ([PAYMENT_METHODS.CASH, PAYMENT_METHODS.OFFLINE].includes(paymentMethodId)) {
+  if (!isCardPaymentMethod({ id: paymentMethodId })) {
     return paymentMethodId;
   }
   return PAYMENT_METHODS.CARD;
diff --git a/examples/client/Locomotion/src/pages/Payments/consts.ts b/examples/client/Locomotion/src/pages/Payments/consts.ts
index 3745b5a83..78cfbdef7 100644
--- a/examples/client/Locomotion/src/pages/Payments/consts.ts
+++ b/examples/client/Locomotion/src/pages/Payments/consts.ts
@@ -1,5 +1,13 @@
+import cashIcon from '../../assets/cash.svg';
+import offlineIcon from '../../assets/offline.svg';
+
 export const PAYMENT_METHODS = {
   CASH: 'cash',
   OFFLINE: 'offline',
   CARD: 'card',
 };
+
+export const paymentMethodToIconMap = {
+  [PAYMENT_METHODS.CASH]: cashIcon,
+  [PAYMENT_METHODS.OFFLINE]: offlineIcon,
+};
diff --git a/examples/client/Locomotion/src/pages/Payments/offlinePaymentMethod.ts b/examples/client/Locomotion/src/pages/Payments/offlinePaymentMethod.ts
new file mode 100644
index 000000000..bb850f5f8
--- /dev/null
+++ b/examples/client/Locomotion/src/pages/Payments/offlinePaymentMethod.ts
@@ -0,0 +1,22 @@
+import i18n from '../../I18n';
+import { PaymentMethodInterface } from '../../context/payments/interface';
+import { PAYMENT_METHODS } from './consts';
+
+const offlinePaymentMethod : PaymentMethodInterface = {
+  brand: 'generic',
+  createdAt: new Date(),
+  customerId: '',
+  expiresAt: new Date(2100, 9, 9),
+  hasOutstandingBalance: false,
+  id: PAYMENT_METHODS.OFFLINE,
+  isDefault: false,
+  isExpired: false,
+  lastFour: '',
+  name: i18n.t('payments.offline'),
+  stripeId: '',
+  updatedAt: new Date(),
+  deletedAt: null,
+  outstandingBalance: { amount: 0, currency: 'USD' },
+};
+
+export default offlinePaymentMethod;
diff --git a/examples/client/Locomotion/src/pages/RideHistory/RideCard/index.js b/examples/client/Locomotion/src/pages/RideHistory/RideCard/index.js
index fc2e9f7cc..abeec786b 100644
--- a/examples/client/Locomotion/src/pages/RideHistory/RideCard/index.js
+++ b/examples/client/Locomotion/src/pages/RideHistory/RideCard/index.js
@@ -31,6 +31,7 @@ import {
   StopPointsVerticalViewContainer,
   RideStateText,
   RetryPaymentButtonContainer,
+  OutstandBalanceText,
 } from './styled';
 import StopPointsVerticalView from '../../../Components/StopPointsVerticalView';
 import Map from './Map';
@@ -147,6 +148,7 @@ const RideView = ({ ride }) => {
   const [isPaymentSettled, setPaymentSettled] = useState(false);
   const [isUnableToProcessPopupVisible, setIsUnablToProcessPopupVisible] = useState(false);
   const [isPaymentSuccessPopupVisible, setIsPaymentSuccessPopupVisible] = useState(false);
+  const [outstandingBalance, setOutstandingBalance] = useState(null);
   const isPaymentRejected = !isPaymentSettled && isRidePaymentRejected;
 
   const usePayments = PaymentContext.useContainer();
@@ -158,11 +160,27 @@ const RideView = ({ ride }) => {
     setTip((tipObj || {}).amount);
   };
 
+  const getOutstandingBalance = async () => {
+    const {
+      amount,
+      currency,
+    } = await
+    usePayments.loadOutstandingBalance(ride.payment?.paymentMethod?.id);
+    setOutstandingBalance({
+      amount,
+      currency,
+    });
+  };
+
   useFocusEffect(() => {
     if (ride.priceCalculationId) {
       getTip();
     }
-  });
+
+    if (isRidePaymentRejected) {
+      getOutstandingBalance();
+    }
+  }, []);
 
   const retryPayment = async () => {
     const paymentId = ride.payment?.id;
@@ -204,12 +222,19 @@ const RideView = ({ ride }) => {
         </MapRideViewContainer>
         <DetailsContainer>
           <MainRideViewSectionContainer>
-            <RideTitleCard page ride={ride} showTip tip={tip} isPaymentRejected={isPaymentRejected} />
+            <RideTitleCard page ride={ride} showTip tip={tip} />
             <BlankContainer />
           </MainRideViewSectionContainer>
           {isPaymentRejected
             ? (
               <RetryPaymentButtonContainer>
+                {outstandingBalance
+                  ? (
+                    <OutstandBalanceText>
+                      {i18n.t('rideHistory.rideCard.paymentRetry.text',
+                        { price: getFormattedPrice(outstandingBalance.currency, outstandingBalance.amount) })}
+                    </OutstandBalanceText>
+                  ) : null}
                 <RoundedButton style={{ backgroundColor: '#24aaf2' }} onPress={retryPayment}>
                   {i18n.t('rideHistory.rideCard.paymentRetry.retryPaymentButton')}
                 </RoundedButton>
diff --git a/examples/client/Locomotion/src/pages/RideHistory/RideCard/styled.js b/examples/client/Locomotion/src/pages/RideHistory/RideCard/styled.js
index 591929674..4d025c48f 100644
--- a/examples/client/Locomotion/src/pages/RideHistory/RideCard/styled.js
+++ b/examples/client/Locomotion/src/pages/RideHistory/RideCard/styled.js
@@ -54,7 +54,6 @@ export const RideViewContainer = styled.ScrollView.attrs(({
     paddingBottom: 60,
   },
 }))`
-
 `;
 
 export const MapRideViewContainer = styled(BaseRideViewContainer)`
@@ -99,12 +98,10 @@ export const BlankContainer = styled.View`
 `;
 
 export const RideViewTextContainer = styled.View`
-width: 65%;
 `;
 
 export const RideViewSecTextContainer = styled.View`
 align-items: flex-end;
-width: 35%;
 `;
 
 export const CenterContainer = styled.View`
@@ -140,8 +137,8 @@ export const MarkerTitleContainer = styled.View`
 `;
 
 export const MarkerTitleText = styled.Text`
-  ${FONT_SIZES.MEDIUM}
-  ${FONT_WEIGHTS.LIGHT}
+  ${FONT_SIZES.MEDIUM};
+  ${FONT_WEIGHTS.LIGHT};
 `;
 
 export const MarkerTitle = React.memo(({ children }) => (
@@ -156,24 +153,24 @@ export const MarkerTitle = React.memo(({ children }) => (
 
 export const DayTitleText = styled(BaseText)`
   text-transform: capitalize;
-  ${FONT_SIZES.H3}
-  ${FONT_WEIGHTS.SEMI_BOLD}
+  ${FONT_SIZES.H3};
+  ${FONT_WEIGHTS.SEMI_BOLD};
 `;
 
 export const RideViewSectionTitleText = styled(BaseText)`
   text-transform: capitalize;
-  ${FONT_SIZES.LARGE}
-  ${FONT_WEIGHTS.MEDIUM}
+  ${FONT_SIZES.LARGE};
+  ${FONT_WEIGHTS.MEDIUM};
 `;
 
 export const DayTitleSubText = styled(BaseText)`
-  ${({ noCap }) => (noCap ? '' : 'text-transform: capitalize;')}
+  ${({ noCap }) => (noCap ? '' : 'text-transform: capitalize;')};
 `;
 
 export const DaySecTitleText = styled(BaseText)`
   text-align: right;
-  ${FONT_SIZES.H3}
-  ${FONT_WEIGHTS.MEDIUM}
+  ${FONT_SIZES.H3};
+  ${FONT_WEIGHTS.MEDIUM};
 `;
 
 export const DaySecTitleSubText = styled(BaseText)`
@@ -205,5 +202,13 @@ padding: 20px;
 `;
 
 export const RetryPaymentButtonContainer = styled.View`
-  padding-top: 20px;
+padding-top: 20px;
+`;
+
+export const OutstandBalanceText = styled.Text`
+  color: ${ERROR_COLOR};
+  ${FONT_SIZES.LARGE};
+  ${FONT_WEIGHTS.LIGHT};
+  text-align: center;
+  margin-bottom: 10px;
 `;
diff --git a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx
index 5bfbbf984..9575622a3 100644
--- a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx
+++ b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx
@@ -21,6 +21,7 @@ import { FlexCont } from '../../Components/Flex';
 import PaymentMethod from '../../Components/CardRow';
 import PaymentsContext from '../../context/payments';
 import cashPaymentMethod from '../../pages/Payments/cashPaymentMethod';
+import offlinePaymentMethod from '../../pages/Payments/offlinePaymentMethod';
 import * as navigationService from '../../services/navigation';
 import { MewRidePageContext } from '../../context';
 
@@ -32,10 +33,18 @@ interface PaymentMethodPopupProps {
   rideFlow: boolean;
   selected: any;
   onAddNewMethod: () => void;
+  showOffline: boolean;
 }
 
 const PaymentMethodPopup = ({
-  isVisible, onCancel, onSubmit, showCash, rideFlow, selected, onAddNewMethod,
+  isVisible,
+  onCancel,
+  onSubmit,
+  showCash,
+  rideFlow,
+  selected,
+  onAddNewMethod,
+  showOffline,
 }: PaymentMethodPopupProps) => {
   const usePayments: any = PaymentsContext.useContainer();
   const { chosenService } = useContext(MewRidePageContext);
@@ -94,24 +103,27 @@ const PaymentMethodPopup = ({
         <CardsScrollView>
           <Container>
             <View>
-              {(showCash
-                ? [...usePayments.paymentMethods, cashPaymentMethod]
-                : usePayments.paymentMethods).map((paymentMethod: any) => {
-                const reason = getDisabledReason(paymentMethod);
-                return (
-                  <PaymentMethod
-                    testIdPrefix="Dialog"
-                    {...paymentMethod}
-                    chooseMethodPage
-                    disabledReason={reason}
-                    selected={selectedPaymentId === paymentMethod.id}
-                    mark={selectedPaymentId === paymentMethod.id}
-                    onPress={() => {
-                      setSelectedPaymentId(paymentMethod.id);
-                    }}
-                  />
-                );
-              })}
+              {
+                [
+                  ...usePayments.paymentMethods,
+                  ...(showCash ? [cashPaymentMethod] : []),
+                  ...(showOffline ? [offlinePaymentMethod] : []),
+                ].map((paymentMethod: any) => {
+                  const reason = getDisabledReason(paymentMethod);
+                  return (
+                    <PaymentMethod
+                      testIdPrefix="Dialog"
+                      {...paymentMethod}
+                      chooseMethodPage
+                      disabledReason={reason}
+                      selected={selectedPaymentId === paymentMethod.id}
+                      mark={selectedPaymentId === paymentMethod.id}
+                      onPress={() => {
+                        setSelectedPaymentId(paymentMethod.id);
+                      }}
+                    />
+                  );
+                })}
               <PaymentMethod
                 testIdPrefix="Dialog"
                 addNew
@@ -146,6 +158,7 @@ PaymentMethodPopup.propTypes = {
   showCash: PropTypes.bool,
   rideFlow: PropTypes.bool,
   selected: PropTypes.string,
+  showOffline: PropTypes.bool,
 };
 
 PaymentMethodPopup.defaultProps = {
@@ -153,6 +166,7 @@ PaymentMethodPopup.defaultProps = {
   showCash: true,
   rideFlow: false,
   selected: null,
+  showOffline: false,
 };
 
 export default PaymentMethodPopup;
diff --git a/examples/client/Locomotion/src/services/network.js b/examples/client/Locomotion/src/services/network.js
index b41bdd98d..54d621dfc 100644
--- a/examples/client/Locomotion/src/services/network.js
+++ b/examples/client/Locomotion/src/services/network.js
@@ -80,8 +80,11 @@ class Network {
         this.axios.defaults.headers.common['x-loco-op-id'] = operationId;
         return this.axios[method](...args).catch((e) => {
           crashlytics().log(`HTTP Request Error ${e.message}`);
-          if ((e.response && e.response.status === 401)
-          || (e.response && e.response.status === 403)) {
+          const errorCode = e.response && e.response.status;
+          const isBadAuth = errorCode === 401 || errorCode === 403;
+
+          // the purpose is to logout the user only if he is logged in, but has a bad token
+          if (isBadAuth && accessToken) {
             console.log('Got unauthorized response move to logout flow');
             Auth.logout();
             return null;