diff --git a/examples/client/Locomotion/src/Components/SelectModal/index.tsx b/examples/client/Locomotion/src/Components/SelectModal/index.tsx
index eab0c6bd7..83fa182df 100644
--- a/examples/client/Locomotion/src/Components/SelectModal/index.tsx
+++ b/examples/client/Locomotion/src/Components/SelectModal/index.tsx
@@ -84,43 +84,51 @@ interface Item {
 
 interface SelectModalProps {
   data: Item[];
+  selectedValue?: any;
   onSelect: (item: Item) => void;
   onError: (error: boolean) => void;
 }
 
-const SelectModal = ({ data, onSelect, onError }: SelectModalProps) => {
-  const [selectedItem, setSelectedItem] = useState(null);
+const SelectModal = ({
+  data, onSelect, onError, selectedValue,
+}: SelectModalProps) => {
+  const [selectedItem, setSelectedItem] = useState<Item| null>(null);
   const [error, setError] = useState(false);
 
   useEffect(() => {
     if (data?.length) {
-      if (!selectedItem) {
-        setSelectedItem(data[0]);
+      const defaultItem = data.find(i => i.value === selectedValue);
+      if (defaultItem) {
+        setSelectedItem(defaultItem);
       } else {
-        setError(!(data.find(item => item.value === selectedItem.value)));
+        setSelectedItem(data[0]);
       }
     }
-  }, [data, selectedItem]);
+  }, [data.length, selectedValue]);
 
   useEffect(() => {
     onError(error);
   }, [error]);
 
   useEffect(() => {
-    onSelect(selectedItem);
+    if (selectedItem) {
+      onSelect(selectedItem);
+      setError(!(data.find(item => item.value === selectedItem.value)));
+    }
   }, [selectedItem]);
 
   return (
     <StyledPop
       error={error}
       data={data}
+      defaultValue={selectedItem}
       defaultButtonText={selectedItem?.label || '1'}
       onSelect={(item, index) => {
         setSelectedItem(item);
       }}
       dropdownIconPosition="left"
       dropdownOverlayColor="transparent"
-      buttonTextAfterSelection={(item, index) => item.value}
+      buttonTextAfterSelection={(item, index) => item.label}
       renderCustomizedRowChild={(item, index) => (
         <StyledSelectRow
           item={item}
@@ -131,5 +139,8 @@ const SelectModal = ({ data, onSelect, onError }: SelectModalProps) => {
     />
   );
 };
+SelectModal.defaultProps = {
+  selectedValue: null,
+};
 
 export default SelectModal;
diff --git a/examples/client/Locomotion/src/context/newRideContext/index.tsx b/examples/client/Locomotion/src/context/newRideContext/index.tsx
index a1c832631..fa342e414 100644
--- a/examples/client/Locomotion/src/context/newRideContext/index.tsx
+++ b/examples/client/Locomotion/src/context/newRideContext/index.tsx
@@ -123,7 +123,7 @@ interface RidePageContextInterface {
   setSpCurrentLocation: () => void;
   historyResults: any[];
   serviceEstimations: any[];
-  ride: RideInterface;
+  ride: RideInterface | null;
   updateRidePayload: (ride: any) => void;
   chosenService: any;
   defaultService: any;
@@ -159,7 +159,7 @@ interface RidePageContextInterface {
   getRidePriceCalculation: (id: string | undefined, priceCalculationId?: string) => Promise<PriceCalculation | undefined>;
   getRideTotalPriceWithCurrency: (rideId : string | undefined) => Promise<{ amount: number; currency: string; } | undefined>;
   getRidesByParams: (params: any) => Promise<RideInterface[]>;
-  numberOfPassengers: number,
+  numberOfPassengers: number | null,
   setNumberOfPassengers: (num: number) => void,
   setLastAcknowledgedRideCompletionTimestampToNow: () => void
   loadFutureBookingDays: () => void;
@@ -227,6 +227,8 @@ export const RidePageContext = createContext<RidePageContextInterface>({
   futureBookingDays: 0,
   businessAccountId: null,
   updateBusinessAccountId: (newBusinessAccountId: string | null) => undefined,
+  addNewEmptyRequestSp: () => undefined,
+  removeRequestSp: (index: number) => undefined,
 });
 
 const HISTORY_RECORDS_NUM = 10;
@@ -609,6 +611,10 @@ const RidePageContextProvider = ({ children }: {
     }
   }, [businessAccountId]);
 
+  useEffect(() => {
+    setNumberOfPassengers(-1);
+  }, [chosenService]);
+
   useEffect(() => {
     if (user?.id && isAppActive && !ride.id) {
       loadLastCompletedRide();
diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/PassengersCounter/index.tsx b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/PassengersCounter/index.tsx
index b66b20840..f043a37f6 100644
--- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/PassengersCounter/index.tsx
+++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/PassengersCounter/index.tsx
@@ -3,21 +3,28 @@ import React, { useState, useEffect } from 'react';
 
 import SelectModal from '../../../../../../Components/SelectModal';
 
+interface Item {
+  value: number;
+  label: string;
+}
+
+const PassengersCounter = ({
+  service, onSelect, onError = () => null, selectedValue,
+}) => {
+  const [passengersOptions, setPassengersOptions] = useState<Item[]>([]);
 
-const PassengersCounter = ({ service, onSelect, onError = () => null }) => {
   useEffect(() => {
     if (service?.availableSeats) {
       const array = [];
       for (let i = 1; i <= service.availableSeats; i += 1) {
-        array.push({ label: i, value: i });
+        array.push({ label: i.toString(), value: i });
       }
       setPassengersOptions(array);
     }
   }, [service]);
 
-  const [passengersOptions, setPassengersOptions] = useState([]);
 
-  const onItemSelect = (item) => {
+  const onItemSelect = (item: Item) => {
     onSelect(item?.value);
   };
   return (
@@ -25,8 +32,11 @@ const PassengersCounter = ({ service, onSelect, onError = () => null }) => {
       data={passengersOptions}
       onSelect={onItemSelect}
       onError={onError}
+      selectedValue={selectedValue}
     />
   );
 };
-
+PassengersCounter.defaultProps = {
+  selectedValue: null,
+};
 export default PassengersCounter;
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 17e22eea7..b9ac2ea0b 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
@@ -1,5 +1,5 @@
 import React, {
-  useContext, useState, useEffect, useCallback,
+  useContext, useState, useEffect,
 } from 'react';
 import DatePicker from 'react-native-date-picker';
 import moment from 'moment';
@@ -61,6 +61,7 @@ const RideButtons = ({
     futureBookingDays,
     businessAccountId,
     serviceEstimations,
+    numberOfPassengers,
   } = useContext(RidePageContext);
 
 
@@ -70,6 +71,7 @@ const RideButtons = ({
   const [pickupTimeWindow, setPickupTimeWindow] = useState(0);
   const [pickupTimeWindowChangedHighlight, setPickupTimeWindowChangedHighlight] = useState(false);
   const [highEtaPopupVisible, setHighEtaPopupVisible] = useState(false);
+  const [tempPassengersNumber, setTempPassengersNumber] = useState<number>(0);
   const { getSettingByKey } = settings.useContainer();
   const {
     paymentMethods,
@@ -340,8 +342,9 @@ const RideButtons = ({
             ? (
               <PassengersCounter
                 service={chosenService}
-                onSelect={setNumberOfPassengers}
+                onSelect={setTempPassengersNumber}
                 onError={setPassengersCounterError}
+                selectedValue={numberOfPassengers}
               />
             ) : null}
 
@@ -349,6 +352,7 @@ const RideButtons = ({
             testID="selectService"
             disabled={isSelectButtonDisabled()}
             onPress={() => {
+              setNumberOfPassengers(tempPassengersNumber);
               if (chosenService?.isHighEtaAsapRide) {
                 setHighEtaPopupVisible(true);
               } else {