diff --git a/app.json b/app.json
index e1f8914..6fd84ef 100644
--- a/app.json
+++ b/app.json
@@ -55,7 +55,7 @@
       "icon": "./assets/app-config/Icon-white-ios1024.png",
       "supportsTablet": false,
       "bundleIdentifier": "com.nanaapp.nanavendorsapp",
-      "buildNumber": "1.1.1"
+      "buildNumber": "1.1.0"
     },
     "web": {
       "favicon": "./assets/app-config/favicon.png"
diff --git a/mobile-app/api/_request.ts b/mobile-app/api/_request.ts
index 25769ca..9eba84f 100644
--- a/mobile-app/api/_request.ts
+++ b/mobile-app/api/_request.ts
@@ -16,7 +16,7 @@ export  function getUrl (gateway: APIService = "VENDOR_GATEWAY"): string {
         url =`${NetworkMapper.PRODUCTION}/${ApiRoute[gateway]}/v1`
     }
 
-    return 'http://k8s-default-nanahydr-874b0d28d1-561484973.af-south-1.elb.amazonaws.com/vendor-gateway/v1'
+    return url
 }
 
 const config = {
diff --git a/mobile-app/api/network.mapper.ts b/mobile-app/api/network.mapper.ts
index ad6f11a..c3da33d 100644
--- a/mobile-app/api/network.mapper.ts
+++ b/mobile-app/api/network.mapper.ts
@@ -4,7 +4,7 @@ export type APIService = 'API_GATEWAY' | 'VENDOR_GATEWAY' | 'ADMIN_GATEWAY'
 
 export const NetworkMapper: Record<NetworkType, string> = {
     PLAYGROUND: 'http://k8s-default-nanahydr-874b0d28d1-561484973.af-south-1.elb.amazonaws.com',
-    PRODUCTION: process.env.API_URL ?? 'http://k8s-default-nanahydr-874b0d28d1-561484973.af-south-1.elb.amazonaws.com'
+    PRODUCTION: process.env.API_URL ?? 'https://api.trynanaapp.com'
 }
 
 
diff --git a/mobile-app/screens/AppNavigator/ListingsNavigator/screens/ScheduledListings.tsx b/mobile-app/screens/AppNavigator/ListingsNavigator/screens/ScheduledListings.tsx
index 6c4dff5..357b679 100644
--- a/mobile-app/screens/AppNavigator/ListingsNavigator/screens/ScheduledListings.tsx
+++ b/mobile-app/screens/AppNavigator/ListingsNavigator/screens/ScheduledListings.tsx
@@ -6,7 +6,6 @@ import {FlashList, ListRenderItemInfo} from "@shopify/flash-list";
 import {LoaderComponent} from "@components/commons/LoaderComponent";
 import {useCallback} from "react";
 import {IconButton} from "@components/commons/buttons/IconButton";
-import {useNavigation} from "@react-navigation/native";
 import moment from "moment";
 
 export function ScheduledListings (props: {listings: ScheduledListingI[], state: boolean}): JSX.Element {
@@ -58,19 +57,25 @@ export function ScheduledListings (props: {listings: ScheduledListingI[], state:
 export function ListingCard ({listing, onPress}: {listing:ScheduledListingI, onPress: (listing: ScheduledListingI) => void}) {
     const date = moment(listing.availableDate).format('ddd Do MMMM')
     return (
-        <Pressable onPress={() => onPress(listing)} style={[tailwind('flex w-full h-full px-2 mb-4 rounded-lg overflow-hidden'), {
+        <Pressable onPress={() => onPress(listing)} style={[tailwind(' flex w-full h-full px-2 mb-4 rounded-lg overflow-hidden'), {
 
         }]}>
-            <View style={tailwind('overflow-hidden  bg-white border-0.5 border-brand-black-500  rounded-lg')}>
+            <View style={tailwind('overflow-hidden relative bg-white border-0.5 border-brand-black-500  rounded-lg')}>
                 <View style={tailwind('p-4')}>
                     <View style={tailwind('flex flex-row justify-between w-full items-center')}>
                         <Text style={tailwind('font-semibold text-lg text-brand-black-500')}>{listing.listing.name}</Text>
                         <IconButton iconName="more-horizontal" iconType="Feather" iconSize={24} iconStyle={tailwind('text-brand-gray-700')} />
                     </View>
                     <View style={tailwind('flex flex-col  w-full')}>
-                        <View style={tailwind('flex flex-row items-center')}>
-                            <Text style={tailwind('text-lg font-medium text-brand-black-500 mr-4')}>Quantity</Text>
-                            <Text style={tailwind('text-lg font-medium text-brand-black-500 font-bold')}>{listing.quantity}</Text>
+                        <View style={tailwind('flex flex-row items-center w-full justify-between')}>
+                            <View style={tailwind('flex flex-row items-center')}>
+                                <Text style={tailwind('text-lg font-medium text-brand-black-500 mr-4')}>Quantity remaining</Text>
+                                <Text style={tailwind('text-lg font-medium text-brand-black-500 font-bold')}>{listing.remainingQuantity}</Text>
+                            </View>
+                            <View style={tailwind('flex flex-row items-center')}>
+                                <Text style={tailwind('text-lg font-medium text-brand-black-500 mr-4')}>Quantity Sold</Text>
+                                <Text style={tailwind('text-lg font-medium text-brand-black-500 font-bold')}>{listing.quantity - listing.remainingQuantity }</Text>
+                            </View>
                         </View>
                         <View style={tailwind('flex flex-row items-center')}>
                             <Text style={tailwind('text-lg font-medium text-brand-black-500 mr-5')}>Available Date</Text>
@@ -78,7 +83,13 @@ export function ListingCard ({listing, onPress}: {listing:ScheduledListingI, onP
                         </View>
                     </View>
                 </View>
+                {listing.soldOut && (
+                    <View style={tailwind('absolute top-0 right-0  py-1 w-28 bg-green-500')}>
+                        <Text style={tailwind('text-white text-center')}>Sold out</Text>
+                    </View>
+                )}
             </View>
+
         </Pressable>
     )
 }
diff --git a/mobile-app/screens/AppNavigator/ReviewNavigator/screen/ReviewScreen.tsx b/mobile-app/screens/AppNavigator/ReviewNavigator/screen/ReviewScreen.tsx
index 24cf88e..0cef91b 100644
--- a/mobile-app/screens/AppNavigator/ReviewNavigator/screen/ReviewScreen.tsx
+++ b/mobile-app/screens/AppNavigator/ReviewNavigator/screen/ReviewScreen.tsx
@@ -62,8 +62,8 @@ export function ReviewScreen (): JSX.Element {
     return  (
             <View style={tailwind('flex-1 bg-primary-200')}>
                 <View style={tailwind('px-4 py-3')}>
-                    <View style={tailwind('bg-white mb-3 px-3 py-2 rounded flex flex-col w-full')}>
-                        <Text style={tailwind('text-lg mb-2')}>Total Sales</Text>
+                    <View style={tailwind('bg-white mb-3 px-3  border-0.5 border-brand-black-500 rounded-lg py-2 flex flex-col w-full')}>
+                        <Text style={tailwind('text-lg mb-2 text-gray-400')}>Total Sales</Text>
                         <View style={tailwind('flex flex-row items-baseline self-end')}>
                             <Text style={tailwind('text-lg mr-1')}>₦</Text>
                             <NumberFormat
@@ -79,21 +79,21 @@ export function ReviewScreen (): JSX.Element {
                         </View>
                     </View>
                     <View style={tailwind('flex flex-row items-center')}>
-                        <View style={tailwind('bg-white px-3 py-2 rounded flex flex-col flex-grow mr-2')}>
-                            <Text style={tailwind('text-lg mb-2 text-center')}>Approved Listing</Text>
+                        <View style={tailwind('bg-white px-3 py-2 border-0.5 border-brand-black-500 rounded-lg flex flex-col flex-grow mr-2')}>
+                            <Text style={tailwind('text-lg mb-2 text-center text-gray-400')}>Approved Listing</Text>
                             <NumberFormat
                                 value={numberOfListings}
                                 thousandSeparator
                                 displayType='text'
                                 renderText={(value) => (
-                                    <Text style={tailwind('text-2xl mr-3 flex self-center font-bold')}>
+                                    <Text style={tailwind('text-2xl mr-3  flex self-center font-bold')}>
                                         {value}
                                     </Text>
                                 )}
                             />
                         </View>
-                        <View style={tailwind('bg-white px-3 py-2 rounded flex flex-grow flex-col ml-2')}>
-                            <Text style={tailwind('text-lg mb-2 text-center')}>Delivered orders</Text>
+                        <View style={tailwind('bg-white px-3 py-2 border-0.5 rounded-lg  border-brand-black-500 flex flex-grow flex-col ml-2')}>
+                            <Text style={tailwind('text-lg mb-2 text-gray-400 text-center')}>Delivered orders</Text>
                             <NumberFormat
                                 value={numberOfOrders}
                                 thousandSeparator
diff --git a/mobile-app/screens/AppNavigator/SettingsNavigator/SettingsNav.tsx b/mobile-app/screens/AppNavigator/SettingsNavigator/SettingsNav.tsx
index 749b754..b02b2f1 100644
--- a/mobile-app/screens/AppNavigator/SettingsNavigator/SettingsNav.tsx
+++ b/mobile-app/screens/AppNavigator/SettingsNavigator/SettingsNav.tsx
@@ -7,6 +7,7 @@ import {tailwind} from "@tailwind";
 import {useSafeAreaInsets} from "react-native-safe-area-context";
 import {PaymentSettings} from "@screens/AppNavigator/SettingsNavigator/screens/PaymentSetting";
 import {RestaurantSettings} from "@screens/AppNavigator/SettingsNavigator/screens/RestaurantSettings";
+import {NotificationSettings} from "@screens/AppNavigator/SettingsNavigator/screens/NotificationSettings";
 
 export interface SettingsParamsList {
     AccountProfile: undefined,
@@ -79,6 +80,14 @@ export function SettingsNavigator(): JSX.Element {
                     headerTitle: 'Business Operations'
                 }}
             />
+            <SettingsStack.Screen
+                component={NotificationSettings}
+                name={SettingsScreenName.NOTIFICATION_SETTING}
+                options={{
+                    headerShown: true,
+                    headerTitle: 'Notification Settings'
+                }}
+            />
         </SettingsStack.Navigator>
     );
 }
diff --git a/mobile-app/screens/AppNavigator/SettingsNavigator/SettingsScreenName.enum.ts b/mobile-app/screens/AppNavigator/SettingsNavigator/SettingsScreenName.enum.ts
index fccd7d5..e3c81be 100644
--- a/mobile-app/screens/AppNavigator/SettingsNavigator/SettingsScreenName.enum.ts
+++ b/mobile-app/screens/AppNavigator/SettingsNavigator/SettingsScreenName.enum.ts
@@ -3,5 +3,7 @@ export enum SettingsScreenName {
     ACCOUNT_PROFILE= 'AccountProfile',
     RESTAURANT_PROFILE= 'RestaurantProfile',
     PAYMENT_PROFILE= 'PaymentProfile',
-    RESTAURANT_SETTINGS= 'RestaurantSettings'
+    RESTAURANT_SETTINGS= 'RestaurantSettings',
+
+    NOTIFICATION_SETTING = 'NotificationSettings'
 }
diff --git a/mobile-app/screens/AppNavigator/SettingsNavigator/screens/NotificationSettings.tsx b/mobile-app/screens/AppNavigator/SettingsNavigator/screens/NotificationSettings.tsx
new file mode 100644
index 0000000..bfee888
--- /dev/null
+++ b/mobile-app/screens/AppNavigator/SettingsNavigator/screens/NotificationSettings.tsx
@@ -0,0 +1,65 @@
+import {View, Text} from "react-native";
+import {getColor, tailwind} from "@tailwind";
+import {useEffect, useState} from "react";
+import {LoaderComponentScreen} from "@components/commons/LoaderComponent";
+import {_api} from "@api/_request";
+import {showTost} from "@components/commons/Toast";
+import {useToast} from "react-native-toast-notifications";
+import {GoBackButton} from "@screens/AppNavigator/SettingsNavigator/components/Goback";
+import {useNavigation} from "@react-navigation/native";
+import Checkbox from "expo-checkbox";
+
+export const NotificationSettings = () => {
+    const [loading, setLoading] = useState(true)
+    const [listingNotification, setListingNotification] = useState<boolean | undefined>(undefined)
+    const toast = useToast()
+    const navigation = useNavigation()
+    useEffect(() => {
+
+        void fetchSettings()
+    }, [])
+    const saveSettings = () => {
+        setListingNotification((prev) => !prev)
+    }
+    async function fetchSettings (): Promise<void> {
+        try {
+            const scheduledListingsNotifications = (await _api.requestData({
+                method: 'GET',
+                url: 'vendor/subscription'
+            })).data as any
+            setListingNotification(scheduledListingsNotifications.enabledByVendor)
+        } catch (error) {
+            showTost(toast, 'something went wrong fetching settings', 'error')
+        } finally {
+            setLoading(false)
+        }
+
+    }
+
+    if(loading) {
+        return <LoaderComponentScreen />
+    }
+
+    return (
+        <View style={tailwind('flex-1 bg-white')}>
+            <View style={tailwind('px-5 pt-4')}>
+                <GoBackButton onPress={() => navigation.goBack()} />
+                <View style={tailwind('mt-4')}>
+                    <View style={tailwind('flex flex-row items-center justify-between w-full')}>
+                        <View style={tailwind('w-2/3')}>
+                            <Text style={tailwind('font-medium text-base text-brand-black-500')}>Allow users to subscribe to a new listing</Text>
+                            <Text style={tailwind('font-normal my-1 text-xs text-brand-gray-700')}>This will allow customers to subscribe to your restaurant and get notified when ever you make a new listing</Text>
+                            <Text style={tailwind('font-normal text-xs text-warning-500')}>Is only available for Vendors with pre-order delivery</Text>
+                        </View>
+                        <Checkbox
+                            style={tailwind('m-2 p-3')}
+                            onValueChange={saveSettings}
+                            value={listingNotification}
+                            color={listingNotification ? getColor('black') : undefined}
+                        />
+                    </View>
+                </View>
+            </View>
+        </View>
+    )
+}
diff --git a/mobile-app/screens/AppNavigator/SettingsNavigator/screens/Settings.screen.tsx b/mobile-app/screens/AppNavigator/SettingsNavigator/screens/Settings.screen.tsx
index b66d768..46bd8c0 100644
--- a/mobile-app/screens/AppNavigator/SettingsNavigator/screens/Settings.screen.tsx
+++ b/mobile-app/screens/AppNavigator/SettingsNavigator/screens/Settings.screen.tsx
@@ -10,6 +10,7 @@ import { CompleteProfileMsg } from '@components/commons/CompleteProfileMsg';
 import {  LoaderComponentScreen } from '@components/commons/LoaderComponent';
 import { showTost } from '@components/commons/Toast';
 import { useToast } from 'react-native-toast-notifications';
+import {SettingsScreenName} from "@screens/AppNavigator/SettingsNavigator/SettingsScreenName.enum";
 
 type SettingsScreenProps = StackScreenProps<SettingsParamsList, any>
 
@@ -84,9 +85,13 @@ if (!hasFetchedProfile) {
                         title="Payment Settings" onPress={() => navigation.navigate('PaymentProfile')}  />
                     <SettingsSection.Item
                         isComplete={profile.settings?.operations !== undefined}
-                        subtitle="Restaurant operation "
+                        subtitle="Restaurant operation, business hours, minimum order"
                         title="Restaurant Settings" onPress={() => navigation.navigate('RestaurantSettings')}  />
 
+                    <SettingsSection.Item
+                        subtitle="Notifications, Alert users of new listing"
+                        title="Notifications" onPress={() => navigation.navigate(SettingsScreenName.NOTIFICATION_SETTING)}  />
+
                     <SettingsSection.Item
                         subtitle="Update app, version"
                         title="App Settings" hasBorder={false} onPress={() => navigation.navigate('AccountProfile')} disabled  />
diff --git a/mobile-app/screens/OnboardingNavigator/screens/Onboarding.screen.tsx b/mobile-app/screens/OnboardingNavigator/screens/Onboarding.screen.tsx
index 5fb93ef..7dd64e8 100644
--- a/mobile-app/screens/OnboardingNavigator/screens/Onboarding.screen.tsx
+++ b/mobile-app/screens/OnboardingNavigator/screens/Onboarding.screen.tsx
@@ -22,7 +22,7 @@ export function OnboardingScreen (): JSX.Element {
     }, []);
     return (
        <ScrollView
-           style={tailwind('flex flex-1')}
+           style={tailwind('flex flex-1 bg-white')}
         testID="OnboardingScreen.View"
        >
           <OnboardingCover />