added customer application

2022-12-21 14:56:47 +05:00 · 2022-12-21 14:56:47 +05:00 · 054db872ef
parent 3ddac11916
commit 054db872ef
209 changed files with 72700 additions and 0 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/App/.DS_Store
+++ b/App/.DS_Store
--- a/App/App.js
+++ b/App/App.js
@ -0,0 +1,150 @@
+import { ApolloProvider } from '@apollo/react-hooks'
+import * as Font from 'expo-font'
+import * as Location from 'expo-location'
+import * as Notifications from 'expo-notifications'
+import * as SplashScreen from 'expo-splash-screen'
+import React, { useEffect, useState } from 'react'
+import {
+  ActivityIndicator,
+  BackHandler,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  useColorScheme,
+  View
+} from 'react-native'
+import FlashMessage from 'react-native-flash-message'
+import i18n from './i18n'
+import setupApolloClient from './src/apollo/index'
+import { ConfigurationProvider } from './src/context/Configuration'
+import { UserProvider } from './src/context/User'
+import AppContainer from './src/routes'
+import { AnimatedSplash } from './src/screens'
+import { COLORS, THEME } from './src/Theme'
+import { exitAlert } from './src/utils/androidBackButton'
+import { requestTrackingPermissions } from './src/utils/useAppTrackingTransparency'
+
+SplashScreen.preventAutoHideAsync().catch(() => {})
+
+export default function App() {
+  const colorScheme = useColorScheme()
+  const isDark = colorScheme === 'dark'
+  const [fontLoaded, setFontLoaded] = useState(false)
+  const [client, setupClient] = useState(null)
+
+  useEffect(() => {
+    requestTrackingPermissions()
+  }, [])
+  useEffect(() => {
+    loadAppData()
+    return () => {
+      BackHandler.removeEventListener('hardwareBackPress', exitAlert)
+    }
+  }, [])
+
+  async function loadAppData() {
+    const client = await setupApolloClient()
+
+    setupClient(client)
+    await i18n.initAsync()
+    await Font.loadAsync({
+      Poppin300: require('./src/assets/font/Poppin/Poppins-Light.ttf'),
+      Poppin400: require('./src/assets/font/Poppin/Poppins-Regular.ttf'),
+      Poppin500: require('./src/assets/font/Poppin/Poppins-Medium.ttf'),
+      Poppin600: require('./src/assets/font/Poppin/Poppins-SemiBold.ttf'),
+      Poppin700: require('./src/assets/font/Poppin/Poppins-Bold.ttf'),
+      icomoon: require('./src/assets/font/icomoon.ttf')
+    })
+
+    await permissionForLocationAsync()
+    await permissionForPushNotificationsAsync()
+
+    BackHandler.addEventListener('hardwareBackPress', exitAlert)
+    setFontLoaded(true)
+  }
+
+  async function permissionForPushNotificationsAsync() {
+    const { status: existingStatus } = await Notifications.getPermissionsAsync()
+    let finalStatus = existingStatus
+    // only ask if permissions have not already been determined, because
+    // iOS won't necessarily prompt the user a second time.
+    if (existingStatus !== 'granted') {
+      // Android remote notification permissions are granted during the app
+      // install, so this will only ask on iOS
+      const { status } = await Notifications.requestPermissionsAsync()
+      finalStatus = status
+    }
+
+    // Stop here if the user did not grant permissions
+    if (finalStatus !== 'granted') {
+      return
+    }
+
+    if (Platform.OS === 'android') {
+      Notifications.setNotificationChannelAsync('default', {
+        name: 'default',
+        sound: true,
+        priority: 'max',
+        importance: Notifications.AndroidImportance.HIGH,
+        vibrate: [0, 250, 250, 250],
+        lightColor: COLORS.primary
+      })
+    }
+  }
+  async function permissionForLocationAsync() {
+    const { status: existingStatus } =
+      await Location.getForegroundPermissionsAsync()
+    // only ask if permissions have not already been determined, because
+    // iOS won't necessarily prompt the user a second time.
+    if (existingStatus !== 'granted') {
+      // Android location permissions are granted during the app
+      // install, so this will only ask on iOS
+      const { status } = await Location.requestForegroundPermissionsAsync()
+      // eslint-disable-next-line no-undef
+      finalStatus = status
+    }
+  }
+
+  if (fontLoaded && client) {
+    return (
+      <ApolloProvider client={client}>
+        <StatusBar
+          translucent
+          backgroundColor={'transparent'}
+          barStyle={isDark ? 'light-content' : 'dark-content'}
+        />
+        <ConfigurationProvider>
+          <UserProvider>
+            <AnimatedSplash image={require('./assets/splash.png')}>
+              <AppContainer />
+            </AnimatedSplash>
+          </UserProvider>
+        </ConfigurationProvider>
+        <FlashMessage duration={2000} position="center" />
+      </ApolloProvider>
+    )
+  } else {
+    return (
+      <View style={[styles.flex, styles.mainContainer]}>
+        <ActivityIndicator
+          size="large"
+          color={
+            isDark
+              ? THEME.Dark.colors.spinnerColor
+              : THEME.Light.colors.spinnerColor
+          }
+        />
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1
+  },
+  mainContainer: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+})
--- a/App/app.json
+++ b/App/app.json
@ -0,0 +1,77 @@
+{
+  "expo": {
+    "name": "Enatega",
+    "version": "1.0.16",
+    "description": "Enatega is a starter kit food ordering app built in React Native using Expo for IOS and Android. It's made keeping good aesthetics in mind as well keeping the best coding practices in mind. Its fully customisable to easily help you in your next food delivery project. https://market.nativebase.io/view/react-native-food-delivery-backend-app",
+    "slug": "enategasinglevendor",
+    "privacy": "public",
+    "androidStatusBar": {
+      "backgroundColor": "#000"
+    },
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "cover",
+      "backgroundColor": "#febb2c"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.enatega.vendor",
+      "config": {
+        "googleMapsApiKey": "AIzaSyD0vSz1qjsn_RSPBB9HRD1Eqztm7DyuKw8"
+      },
+      "usesAppleSignIn": true,
+      "infoPlist": {
+        "NSLocationWhenInUseUsageDescription": "This app uses the location to determine the delivery address for your orders."
+      }
+    },
+    "notification": {
+      "iosDisplayInForeground": true,
+      "color": "#d83765",
+      "icon": "./assets/not-icon.png",
+      "androidMode": "default",
+      "androidCollapsedTitle": "Enatega"
+    },
+    "android": {
+      "versionCode": 22,
+      "package": "com.enatega.vendor",
+      "googleServicesFile": "./google-services-prod.json",
+      "useNextNotificationsApi": true,
+      "config": {
+        "googleMaps": {
+          "apiKey": "AIzaSyBt9S6e7ig5EkNiSXw3sCyX7kgo1gzPxl4"
+        }
+      },
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#febb2c"
+      },
+      "permissions": [
+        "ACCESS_FINE_LOCATION",
+        "ACCESS_COARSE_LOCATION"
+      ]
+    },
+    "plugins": [
+      [
+        "expo-tracking-transparency",
+        {
+          "userTrackingPermission": "Allow this app to collect app-related data that can be used for tracking you or your device."
+        }
+      ]
+    ],
+    "facebookScheme": "fb3017447961609878",
+    "facebookAppId": "3017447961609878",
+    "facebookDisplayName": "Food delivery"
+  }
+}
--- a/App/assets/.DS_Store
+++ b/App/assets/.DS_Store
--- a/App/assets/adaptive-icon.png
+++ b/App/assets/adaptive-icon.png
--- a/App/assets/burger.png
+++ b/App/assets/burger.png
--- a/App/assets/icon.png
+++ b/App/assets/icon.png
--- a/App/assets/logo.png
+++ b/App/assets/logo.png
--- a/App/assets/not-icon.png
+++ b/App/assets/not-icon.png
--- a/App/assets/profile.png
+++ b/App/assets/profile.png
--- a/App/assets/splash.png
+++ b/App/assets/splash.png
--- a/App/assets/transparent-icon.png
+++ b/App/assets/transparent-icon.png
--- a/App/babel.config.js
+++ b/App/babel.config.js
@ -0,0 +1,7 @@
+module.exports = function(api) {
+  api.cache(true)
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin']
+  }
+}
--- a/App/enategaprod_upload_cert.pem
+++ b/App/enategaprod_upload_cert.pem
@ -0,0 +1,20 @@
+-----BEGIN CERTIFICATE-----
+MIIDRTCCAi2gAwIBAgIERu0DYTANBgkqhkiG9w0BAQsFADBTMQswCQYDVQQGEwJV
+UzEJMAcGA1UECBMAMQkwBwYDVQQHEwAxCTAHBgNVBAoTADEJMAcGA1UECxMAMRgw
+FgYDVQQDEw9jb20uZW5hdGVnYS5hcHAwHhcNMTkwNzI2MDg0NzEyWhcNNDYxMjEx
+MDg0NzEyWjBTMQswCQYDVQQGEwJVUzEJMAcGA1UECBMAMQkwBwYDVQQHEwAxCTAH
+BgNVBAoTADEJMAcGA1UECxMAMRgwFgYDVQQDEw9jb20uZW5hdGVnYS5hcHAwggEi
+MA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQChW6yOHftMY4PZYS/1VK72o0mj
+TMxVrolnwN46QrCkwX3MTC5Rf014MCOfWjRpbeCnL/ZFW5hMu1gfZhI3cU6n8kKi
+3xkhIgtxoaGecC594WzOJfFNhNuHbdJTp4KlPli8k1CiWSxzddnxDaJX1zLh4vbp
+Z1czC0k7HY6Muhpd7WCC1uwcp0UzCm1ej7LZqYPuUzwieW0V/ASMdS9yWri4LyIO
+DA6nFbDdvCJrupL0C8RQjACCRMLwGx2l3zMlWe3nDa4ZyMRW6cdSsQA6QvlwxVeK
+6I40S8fYsUf68/QZrnBwTV9yyJ78bIpF+9zF3b7kcv7tXAKkcuoQcd/70e79AgMB
+AAGjITAfMB0GA1UdDgQWBBQ71L/oHvSkF0v65nI4B1iVLSFcfDANBgkqhkiG9w0B
+AQsFAAOCAQEAlzMU9jy1oCtrxeucJcx5LU2+4Np/pdhfofivK3W6cLJ6yqAvKxNC
+cmO+4mwG8O9s5bYtscB7+n9u1JYNOGMtyzAbjW2tzysaPU9EPatD+oAQznU1ur28
+v5YCTmS1tv4wRsYkjYGI+S+XQ+qi/wuNith2te1qoUfdl4/JCIA8kw7XPU9eLkDE
+r3RrsZXV7NTIo2f2nnTeJWz9QFtERevQlgpwOnCqmqvPKV3n52sH5R/8g3xjiL1W
+wP1JHGErSFGVbctYH6HTsHQkAfmzPeK7UOfB+kR70dXkPKdw3u+pdv8jzaRO9gpq
+H97r6aLCoyB53CJ+6w51DSl1eAKMGK7Tcg==
+-----END CERTIFICATE-----
--- a/App/environment.js
+++ b/App/environment.js
@ -0,0 +1,71 @@
+/*****************************
+ * environment.js
+ * path: '/environment.js' (root of your project)
+ ******************************/
+
+import Constants from 'expo-constants'
+
+const ENV = {
+  development: {
+    GRAPHQL_URL: 'http://192.168.100.90:8000/graphql',
+    WS_GRAPHQL_URL: 'ws://192.168.100.90:8000/graphql',
+    SERVER_URL: 'http://192.168.100.90:8000/', // put / at the end of server url
+    IOS_CLIENT_ID_GOOGLE:
+      '967541328677-uq7f7odvmeea2pb2sq0l7q320ds86536.apps.googleusercontent.com',
+    ANDROID_CLIENT_ID_GOOGLE:
+      '967541328677-u9lbhmiesp67j3md9b8nk6mkhooeljur.apps.googleusercontent.com',
+    FACEBOOK_APP_ID: '404956210315749',
+    AMPLITUDE_API_KEY: '358ef0deb443586e2cc4ddd4380151f0',
+    STRIPE_PUBLIC_KEY: 'pk_test_lEaBbVGnTkzja2FyFiNlbqtw',
+    STRIPE_IMAGE_URL: 'http://192.168.100.90:8000/assets/images/logo.png',
+    STRIPE_STORE_NAME: 'Enatega'
+  },
+  staging: {
+    GRAPHQL_URL: 'https://staging-enatega-single-api.herokuapp.com/graphql',
+    WS_GRAPHQL_URL: 'wss://staging-enatega-single-api.herokuapp.com/graphql',
+    SERVER_URL: 'https://staging-enatega-single-api.herokuapp.com/', // put / at the end of server url
+    IOS_CLIENT_ID_GOOGLE:
+      '967541328677-nf8h4ou7rhmq9fahs87p057rggo95eah.apps.googleusercontent.com',
+    ANDROID_CLIENT_ID_GOOGLE:
+      '967541328677-7264tf7tkdtoufk844rck9mimrve135c.apps.googleusercontent.com',
+    FACEBOOK_APP_ID: '404956210315749',
+    AMPLITUDE_API_KEY: '358ef0deb443586e2cc4ddd4380151f0',
+    STRIPE_PUBLIC_KEY: 'pk_test_lEaBbVGnTkzja2FyFiNlbqtw',
+    STRIPE_IMAGE_URL:
+      'https://staging-enatega-single-api.herokuapp.com/assets/images/logo.png',
+    STRIPE_STORE_NAME: 'Enatega'
+  },
+  production: {
+    GRAPHQL_URL: 'https://prod-enatega-single-api.herokuapp.com/graphql',
+    WS_GRAPHQL_URL: 'wss://prod-enatega-single-api.herokuapp.com/graphql',
+    SERVER_URL: 'https://prod-enatega-single-api.herokuapp.com/', // put / at the end of server url
+    IOS_CLIENT_ID_GOOGLE:
+      '94983896797-irt6u2cmq2sjcp7j1rj9m9pqptjd12ue.apps.googleusercontent.com',
+    ANDROID_CLIENT_ID_GOOGLE:
+      '94983896797-omp6mi32rl3126siafgnskrqql0rdk5c.apps.googleusercontent.com',
+    FACEBOOK_APP_ID: '3017447961609878',
+    AMPLITUDE_API_KEY: '358ef0deb443586e2cc4ddd4380151f0',
+    STRIPE_PUBLIC_KEY: 'pk_test_lEaBbVGnTkzja2FyFiNlbqtw',
+    STRIPE_IMAGE_URL:
+      'https://prod-enatega-single-api.herokuapp.com/assets/images/logo.png',
+    STRIPE_STORE_NAME: 'Enatega'
+  }
+}
+
+const getEnvVars = (env = Constants.manifest.releaseChannel) => {
+  // What is __DEV__ ?
+  // This variable is set to true when react-native is running in Dev mode.
+  // __DEV__ is true when run locally, but false when published.
+  // eslint-disable-next-line no-undef
+  if (__DEV__) {
+    return ENV.development
+  } else if (env === 'production') {
+    return ENV.production
+  } else if (env === 'staging') {
+    return ENV.staging
+  } else {
+    return ENV.production
+  }
+}
+
+export default getEnvVars
--- a/App/environment.js.example
+++ b/App/environment.js.example
@ -0,0 +1,46 @@
+/*****************************
+* environment.js
+* path: '/environment.js' (root of your project)
+******************************/
+
+import Constants from 'expo-constants';
+
+const ENV = {
+    development: {
+        GRAPHQL_URL:'' ,
+        SERVER_URL: '', // put / at the end of server url
+        IOS_CLIENT_ID_GOOGLE: "",
+        ANDROID_CLIENT_ID_GOOGLE: "",
+        FACEBOOK_APP_ID: "",
+        AMPLITUDE_API_KEY: "",
+        STRIPE_PUBLIC_KEY: "",
+        STRIPE_IMAGE_URL: "",
+        STRIPE_STORE_NAME: ""
+    },
+    production: {
+       GRAPHQL_URL:'' ,
+        SERVER_URL: '', // put / at the end of server url
+        IOS_CLIENT_ID_GOOGLE: "",
+        ANDROID_CLIENT_ID_GOOGLE: "",
+        FACEBOOK_APP_ID: "",
+        AMPLITUDE_API_KEY: "",
+        STRIPE_PUBLIC_KEY: "",
+        STRIPE_IMAGE_URL: "",
+        STRIPE_STORE_NAME: ""
+    }
+};
+
+const getEnvVars = (env = Constants.manifest.releaseChannel) => {
+    // What is __DEV__ ?
+    // This variable is set to true when react-native is running in Dev mode.
+    // __DEV__ is true when run locally, but false when published.
+    if (__DEV__) {
+        return ENV.development;
+    } else if (env === 'production') {
+        return ENV.production;
+    } else {
+        return ENV.development;
+    }
+};
+
+export default getEnvVars;
--- a/App/google-services-prod-old.json
+++ b/App/google-services-prod-old.json
@ -0,0 +1,47 @@
+{
+  "project_info": {
+    "project_number": "94983896797",
+    "firebase_url": "https://enatega-production.firebaseio.com",
+    "project_id": "enatega-production",
+    "storage_bucket": "enatega-production.appspot.com"
+  },
+  "client": [
+    {
+      "client_info": {
+        "mobilesdk_app_id": "1:94983896797:android:537c4eadfd11cf33",
+        "android_client_info": {
+          "package_name": "com.enatega.app"
+        }
+      },
+      "oauth_client": [
+        {
+          "client_id": "94983896797-9e36v3edasjt9t9r5q9uvkth700nn0nn.apps.googleusercontent.com",
+          "client_type": 3
+        }
+      ],
+      "api_key": [
+        {
+          "current_key": "AIzaSyBt9S6e7ig5EkNiSXw3sCyX7kgo1gzPxl4"
+        }
+      ],
+      "services": {
+        "appinvite_service": {
+          "other_platform_oauth_client": [
+            {
+              "client_id": "94983896797-9e36v3edasjt9t9r5q9uvkth700nn0nn.apps.googleusercontent.com",
+              "client_type": 3
+            },
+            {
+              "client_id": "94983896797-irt6u2cmq2sjcp7j1rj9m9pqptjd12ue.apps.googleusercontent.com",
+              "client_type": 2,
+              "ios_info": {
+                "bundle_id": "com.enatega.app"
+              }
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "configuration_version": "1"
+}
--- a/App/google-services-prod.json
+++ b/App/google-services-prod.json
@ -0,0 +1,47 @@
+{
+  "project_info": {
+    "project_number": "94983896797",
+    "firebase_url": "https://enatega-production.firebaseio.com",
+    "project_id": "enatega-production",
+    "storage_bucket": "enatega-production.appspot.com"
+  },
+  "client": [
+    {
+      "client_info": {
+        "mobilesdk_app_id": "1:94983896797:android:5b28fe2925a51512112534",
+        "android_client_info": {
+          "package_name": "com.enatega.vendor"
+        }
+      },
+      "oauth_client": [
+        {
+          "client_id": "94983896797-9e36v3edasjt9t9r5q9uvkth700nn0nn.apps.googleusercontent.com",
+          "client_type": 3
+        }
+      ],
+      "api_key": [
+        {
+          "current_key": "AIzaSyBt9S6e7ig5EkNiSXw3sCyX7kgo1gzPxl4"
+        }
+      ],
+      "services": {
+        "appinvite_service": {
+          "other_platform_oauth_client": [
+            {
+              "client_id": "94983896797-9e36v3edasjt9t9r5q9uvkth700nn0nn.apps.googleusercontent.com",
+              "client_type": 3
+            },
+            {
+              "client_id": "94983896797-osn1lglcn3f03a4dqpf1vl2rcogca8vp.apps.googleusercontent.com",
+              "client_type": 2,
+              "ios_info": {
+                "bundle_id": "com.enatega.app"
+              }
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "configuration_version": "1"
+}
--- a/App/google-services.json
+++ b/App/google-services.json
@ -0,0 +1,40 @@
+{
+  "project_info": {
+    "project_number": "346954645996",
+    "firebase_url": "https://enatega-4d403.firebaseio.com",
+    "project_id": "enatega-4d403",
+    "storage_bucket": "enatega-4d403.appspot.com"
+  },
+  "client": [
+    {
+      "client_info": {
+        "mobilesdk_app_id": "1:346954645996:android:f968efbb41d1fa7a",
+        "android_client_info": {
+          "package_name": "host.exp.exponent"
+        }
+      },
+      "oauth_client": [
+        {
+          "client_id": "346954645996-a2t28in6j98u33hnd4evb45m5d34lvjp.apps.googleusercontent.com",
+          "client_type": 3
+        }
+      ],
+      "api_key": [
+        {
+          "current_key": "AIzaSyCFfJ4RHfakMqvp_QsIHkfWcpeYrxtk8j0"
+        }
+      ],
+      "services": {
+        "appinvite_service": {
+          "other_platform_oauth_client": [
+            {
+              "client_id": "346954645996-a2t28in6j98u33hnd4evb45m5d34lvjp.apps.googleusercontent.com",
+              "client_type": 3
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "configuration_version": "1"
+}
--- a/App/i18n.js
+++ b/App/i18n.js
@ -0,0 +1,23 @@
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import * as Localization from 'expo-localization'
+import i18n from 'i18n-js'
+import { Platform } from 'react-native'
+import { de } from './translations/de'
+import { en } from './translations/en'
+import { fr } from './translations/fr'
+import { km } from './translations/km'
+import { zh } from './translations/zh'
+
+i18n.initAsync = async() => {
+  i18n.fallbacks = true
+  i18n.translations = { fr, en, km, zh, de }
+  // i18n.locale = 'km'
+  if (Platform.OS === 'android') {
+    const lang = await AsyncStorage.getItem('enatega-language')
+    i18n.locale = lang || 'en'
+  } else {
+    i18n.locale = Localization.locale
+  }
+}
+
+export default i18n
--- a/App/package-lock.json
+++ b/App/package-lock.json
--- a/App/package.json
+++ b/App/package.json
@ -0,0 +1,118 @@
+{
+  "name": "enatega-full-app",
+  "version": "5.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "eject": "expo eject",
+    "test": "jest",
+    "format": "prettier --write '**/*.js'",
+    "lint:fix": "eslint . --ext .js --fix",
+    "postinstall": "patch-package"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.js": [
+      "npm run format",
+      "npm run lint:fix"
+    ]
+  },
+  "dependencies": {
+    "@apollo/react-hooks": "^3.1.3",
+    "@expo/vector-icons": "^12.0.0",
+    "@ptomasroos/react-native-multi-slider": "^2.2.2",
+    "@react-native-async-storage/async-storage": "~1.15.0",
+    "@react-native-community/masked-view": "0.1.10",
+    "@react-navigation/drawer": "^5.12.5",
+    "@react-navigation/native": "^5.9.4",
+    "@react-navigation/stack": "^5.14.5",
+    "apollo-boost": "^0.3.1",
+    "apollo-cache-inmemory": "^1.5.1",
+    "apollo-cache-persist": "^0.1.1",
+    "apollo-client": "^2.5.1",
+    "apollo-link-context": "^1.0.17",
+    "apollo-link-http": "^1.5.14",
+    "apollo-link-state": "^0.4.2",
+    "apollo-link-ws": "^1.0.20",
+    "apollo-upload-client": "^10.0.0",
+    "expo": "^44.0.0",
+    "expo-analytics-amplitude": "~11.1.0",
+    "expo-app-auth": "~11.1.0",
+    "expo-app-loading": "~1.3.0",
+    "expo-apple-authentication": "~4.1.0",
+    "expo-application": "~4.0.1",
+    "expo-asset": "~8.4.6",
+    "expo-constants": "~13.0.1",
+    "expo-device": "~4.1.0",
+    "expo-facebook": "~12.1.0",
+    "expo-font": "~10.0.4",
+    "expo-google-app-auth": "~8.3.0",
+    "expo-image-picker": "~12.0.1",
+    "expo-linking": "~3.0.0",
+    "expo-localization": "~12.0.0",
+    "expo-location": "~14.0.1",
+    "expo-notifications": "~0.14.0",
+    "expo-splash-screen": "~0.14.1",
+    "expo-tracking-transparency": "~2.1.0",
+    "expo-updates": "~0.11.6",
+    "graphql": "^14.5.8",
+    "graphql-tag": "^2.10.1",
+    "i18n-js": "^3.2.2",
+    "lodash": "^4.17.21",
+    "patch-package": "^6.2.2",
+    "react": "17.0.1",
+    "react-apollo": "^2.5.8",
+    "react-native": "0.64.3",
+    "react-native-flash-message": "^0.1.23",
+    "react-native-flatlist-slider": "^1.0.5",
+    "react-native-gesture-handler": "~2.1.0",
+    "react-native-gifted-chat": "^0.16.3",
+    "react-native-maps": "0.29.4",
+    "react-native-material-textfield": "^0.16.1",
+    "react-native-modal": "^11.10.0",
+    "react-native-modalize": "^2.0.8",
+    "react-native-reanimated": "~2.3.1",
+    "react-native-safe-area-context": "3.3.2",
+    "react-native-screens": "~3.10.1",
+    "react-native-star-rating": "^1.1.0",
+    "react-native-svg": "12.1.1",
+    "react-native-timeline-flatlist": "^0.7.2",
+    "react-native-webview": "11.15.0",
+    "subscriptions-transport-ws": "^0.9.16",
+    "uuid": "^3.3.2",
+    "validate.js": "^0.12.0"
+  },
+  "devDependencies": {
+    "babel-jest": "^24.8.0",
+    "babel-preset-expo": "9.0.2",
+    "babel-preset-react-native": "^4.0.1",
+    "eslint": "^7.28.0",
+    "eslint-config-standard": "^14.1.1",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-standard": "^4.0.1",
+    "husky": "^4.3.8",
+    "jest": "^26.6.3",
+    "jest-react-native": "^18.0.0",
+    "lint-staged": "^10.5.4",
+    "metro-react-native-babel-preset": "^0.54.1",
+    "prettier": "^2.3.1",
+    "prettier-config-standard": "^1.0.1",
+    "react-test-renderer": "^16.8.6"
+  },
+  "jest": {
+    "preset": "react-native",
+    "transformIgnorePatterns": [
+      "node_modules/(?!(react-native|expo|@expo|apollo-boost|apollo-cache-inmemory|apollo-client|apollo-link-context|apollo-link-http|apollo-link-state|apollo-upload-client|graphql|graphql-tag|react-apollo|react-native-animatable|react-native-material-buttons|react-native-material-ripple|react-native-material-textfield|react-native-ratings|react-native-swiper-flatlist|react-native-timeline-listview|react-navigation|validate.js)/)"
+    ]
+  },
+  "private": true
+}
--- a/App/patches/react-native-material-textfield+0.16.1.patch
+++ b/App/patches/react-native-material-textfield+0.16.1.patch
@ -0,0 +1,51 @@
+diff --git a/node_modules/react-native-material-textfield/src/components/affix/index.js b/node_modules/react-native-material-textfield/src/components/affix/index.js
+index 0f85022..c12b3a6 100644
+--- a/node_modules/react-native-material-textfield/src/components/affix/index.js
+++ b/node_modules/react-native-material-textfield/src/components/affix/index.js
+@@ -11,7 +11,7 @@ export default class Affix extends PureComponent {
+ 
+   static propTypes = {
+     numberOfLines: PropTypes.number,
+-    style: Animated.Text.propTypes.style,
+    style: PropTypes.object,
+ 
+     color: PropTypes.string.isRequired,
+     fontSize: PropTypes.number.isRequired,
+diff --git a/node_modules/react-native-material-textfield/src/components/field/index.js b/node_modules/react-native-material-textfield/src/components/field/index.js
+index 494bbaa..9bbf2e2 100644
+--- a/node_modules/react-native-material-textfield/src/components/field/index.js
+++ b/node_modules/react-native-material-textfield/src/components/field/index.js
+@@ -221,6 +221,7 @@ export default class TextField extends PureComponent {
+ 
+     let options = {
+       toValue: this.focusState(),
+      useNativeDriver: false,
+       duration,
+     };
+ 
+diff --git a/node_modules/react-native-material-textfield/src/components/helper/index.js b/node_modules/react-native-material-textfield/src/components/helper/index.js
+index 6060f9f..fe9d9c4 100644
+--- a/node_modules/react-native-material-textfield/src/components/helper/index.js
+++ b/node_modules/react-native-material-textfield/src/components/helper/index.js
+@@ -11,7 +11,7 @@ export default class Helper extends PureComponent {
+ 
+     disabled: PropTypes.bool,
+ 
+-    style: Animated.Text.propTypes.style,
+    style: PropTypes.object,
+ 
+     baseColor: PropTypes.string,
+     errorColor: PropTypes.string,
+diff --git a/node_modules/react-native-material-textfield/src/components/label/index.js b/node_modules/react-native-material-textfield/src/components/label/index.js
+index 82eaf03..809fcdd 100644
+--- a/node_modules/react-native-material-textfield/src/components/label/index.js
+++ b/node_modules/react-native-material-textfield/src/components/label/index.js
+@@ -43,7 +43,7 @@ export default class Label extends PureComponent {
+       y1: PropTypes.number,
+     }),
+ 
+-    style: Animated.Text.propTypes.style,
+    style: PropTypes.object,
+     label: PropTypes.string,
+   };
+ 
--- a/App/src/.DS_Store
+++ b/App/src/.DS_Store
--- a/App/src/Theme/Colors.js
+++ b/App/src/Theme/Colors.js
@ -0,0 +1,26 @@
+const COLORS = {
+  white: '#FFFFFF',
+  black: '#000000',
+  black02: 'rgba(0, 0, 0, 0.2)',
+  primary: '#febb2c',
+  darkGrey: '#333333',
+  offWhite: '#FAFAFA',
+  lineGrey: '#e7e5e4',
+  lightGrey: '#a5a5a5',
+  lightWhite: '#FCFCFC',
+  whitishGrey: '#7F7F7F',
+  lightBlack: '#292929',
+  redishPink: '#ff4866',
+  primaryBlue: '#00b9c6',
+  primaryBlack: '#0b0b0b',
+  blueShadeGrey: '#f7f7fb',
+  primaryLightBlue: '#0cc8d5',
+  lightBlueShadeGrey: '#f8f9fa',
+  mediumBlueShadeGrey: '#f2f4f5',
+  black06: 'rgba(0,0,0,0.6)',
+  white06: 'rgba(255,255,255,0.6)',
+  redishOrange: '#FA7751',
+  blueColor: '#00b9c6',
+  yellowishOrange: '#fff1d4'
+}
+export { COLORS }
--- a/App/src/Theme/Theme.js
+++ b/App/src/Theme/Theme.js
@ -0,0 +1,82 @@
+import { DarkTheme, DefaultTheme } from '@react-navigation/native'
+import { COLORS } from './Colors'
+const Theme = {
+  Light: {
+    ...DefaultTheme,
+    colors: {
+      ...DefaultTheme.colors,
+      black: COLORS.black,
+      white: COLORS.white,
+      curve: COLORS.primary,
+      selected: COLORS.primary,
+      fontWhite: COLORS.white,
+      tagColor: COLORS.primary,
+      iconColor: COLORS.darkGrey,
+      iconColorPrimary: COLORS.primary,
+      cardContainer: COLORS.white,
+      rippleColor: COLORS.black02,
+      background: COLORS.white,
+      lightBackground: COLORS.lightBlueShadeGrey,
+      headerbackground: COLORS.primary,
+      headerbackground2: COLORS.offWhite,
+      headerTextColor: COLORS.primaryBlack,
+      fontMainColor: COLORS.primaryBlack,
+      fontSecondColor: COLORS.lightGrey,
+      placeHolderColor: COLORS.lightGrey,
+      buttonBackground: COLORS.primary,
+      buttonBackgroundLight: COLORS.mediumBlueShadeGrey,
+      buttonBackgroundBlue: COLORS.primaryLightBlue,
+      active: COLORS.primaryLightBlue,
+      buttonText: COLORS.white,
+      horizontalLine: COLORS.lineGrey,
+      shadowColor: COLORS.black06,
+      drawerBackground: COLORS.primary,
+      spinnerColor: COLORS.primary,
+      errorColor: COLORS.redishOrange,
+      radioColor: COLORS.white,
+      radioOuterColor: COLORS.primary,
+      blueColor: COLORS.blueColor,
+      chatBubblePrimary: COLORS.yellowishOrange
+    }
+  },
+  Dark: {
+    ...DarkTheme,
+    colors: {
+      ...DarkTheme.colors,
+      white: COLORS.white,
+      black: COLORS.black,
+      curve: COLORS.primary,
+      selected: COLORS.primary,
+      fontWhite: COLORS.white,
+      tagColor: COLORS.primary,
+      rippleColor: COLORS.black02,
+      background: COLORS.lightBlack,
+      lightBackground: COLORS.lightBlueShadeGrey,
+      cardContainer: COLORS.darkGrey,
+      iconColor: COLORS.lightWhite,
+      iconColorPrimary: COLORS.primary,
+      headerbackground: COLORS.black,
+      headerbackground2: COLORS.black,
+      headerTextColor: COLORS.primaryBlack,
+      fontMainColor: COLORS.lightWhite,
+      fontSecondColor: COLORS.whitishGrey,
+      placeHolderColor: COLORS.lightGrey,
+      buttonBackground: COLORS.primary,
+      buttonBackgroundLight: COLORS.mediumBlueShadeGrey,
+      buttonBackgroundBlue: COLORS.primaryLightBlue,
+      active: COLORS.primaryLightBlue,
+      buttonText: COLORS.white,
+      horizontalLine: COLORS.lineGrey,
+      shadowColor: COLORS.white06,
+      drawerBackground: COLORS.primary,
+      spinnerColor: COLORS.primary,
+      errorColor: COLORS.redishOrange,
+      radioColor: COLORS.white,
+      radioOuterColor: COLORS.primary,
+      blueColor: COLORS.blueColor,
+      chatBubblePrimary: COLORS.yellowishOrange
+    }
+  }
+}
+
+export default Theme
--- a/App/src/Theme/index.js
+++ b/App/src/Theme/index.js
@ -0,0 +1,4 @@
+import { COLORS } from './Colors'
+import THEME from './Theme'
+
+export { COLORS, THEME }
--- a/App/src/apollo/index.js
+++ b/App/src/apollo/index.js
@ -0,0 +1,92 @@
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import { defaultDataIdFromObject, InMemoryCache } from 'apollo-cache-inmemory'
+import { persistCache } from 'apollo-cache-persist'
+import { ApolloClient } from 'apollo-client'
+import { ApolloLink, concat, Observable, split } from 'apollo-link'
+import { createHttpLink } from 'apollo-link-http'
+import { WebSocketLink } from 'apollo-link-ws'
+import { getMainDefinition } from 'apollo-utilities'
+import getEnvVars from '../../environment'
+
+const { GRAPHQL_URL, WS_GRAPHQL_URL } = getEnvVars()
+
+const cache = new InMemoryCache({
+  dataIdFromObject: object => {
+    switch (object.__typename) {
+      case 'CartItem':
+        return object.key // use `key` as the primary key
+      default:
+        return defaultDataIdFromObject(object) // fall back to default handling
+    }
+  }
+})
+
+const httpLink = createHttpLink({
+  uri: GRAPHQL_URL
+})
+
+const wsLink = new WebSocketLink({
+  uri: WS_GRAPHQL_URL,
+  options: {
+    reconnect: true
+  }
+})
+
+const request = async operation => {
+  const token = await AsyncStorage.getItem('token')
+
+  operation.setContext({
+    // get the authentication token from local storage if it exists
+    // return the headers to the context so httpLink can read them
+    headers: {
+      authorization: token ? `Bearer ${token}` : ''
+    }
+  })
+}
+
+const requestLink = new ApolloLink(
+  (operation, forward) =>
+    new Observable(observer => {
+      // console.log(observer)
+      let handle
+      Promise.resolve(operation)
+        .then(oper => request(oper))
+        .then(() => {
+          handle = forward(operation).subscribe({
+            next: observer.next.bind(observer),
+            error: observer.error.bind(observer),
+            complete: observer.complete.bind(observer)
+          })
+        })
+        .catch(observer.error.bind(observer))
+
+      return () => {
+        if (handle) handle.unsubscribe()
+      }
+    })
+)
+
+const terminatingLink = split(({ query }) => {
+  const { kind, operation } = getMainDefinition(query)
+  return kind === 'OperationDefinition' && operation === 'subscription'
+}, wsLink)
+
+const setupApollo = async() => {
+  await persistCache({
+    cache,
+    storage: AsyncStorage
+  })
+  const client = new ApolloClient({
+    link: concat(ApolloLink.from([terminatingLink, requestLink]), httpLink),
+    cache,
+    resolvers: {}
+  })
+
+  // set ref for global use
+  // eslint-disable-next-line no-undef
+  clientRef = client
+
+  return client
+}
+
+export default setupApollo
--- a/App/src/apollo/server.js
+++ b/App/src/apollo/server.js
@ -0,0 +1,590 @@
+export const login = `
+mutation Login($facebookId:String,$email:String,$password:String,$type:String!,$appleId:String,$name:String,$notificationToken:String){
+    login(facebookId:$facebookId,email:$email,password:$password,type:$type,appleId:$appleId,name:$name,notificationToken:$notificationToken){
+     userId
+     token
+     tokenExpiration
+     name
+     email
+     phone
+   }
+}
+`
+
+export const categories = `
+{
+  categories{
+  _id
+  title
+  description
+  img_menu
+  }
+}`
+
+export const foods = `
+query FoodByCategory($category:String!,$onSale:Boolean,$inStock:Boolean,$min:Float,$max:Float,$search:String){
+    foodByCategory(category:$category,onSale:$onSale,inStock:$inStock,min:$min,max:$max,search:$search){
+      _id
+      title
+      description
+      variations{
+        _id
+        title
+        price
+        discounted
+        addons{
+          _id
+          title
+          description
+          quantity_minimum
+          quantity_maximum
+          options{
+            _id
+            title
+            description
+            price
+          }
+        }
+      }
+      category{_id}
+      img_url
+      stock
+    }
+  }`
+
+export const createUser = `
+  mutation CreateUser($facebookId:String,$phone:String,$email:String,$password:String,$name:String,$notificationToken:String,$appleId:String){
+      createUser(userInput:{
+          facebookId:$facebookId,
+          phone:$phone,
+          email:$email,
+          password:$password,
+          name:$name,
+          notificationToken:$notificationToken,
+          appleId:$appleId
+      }){
+          userId
+          token
+          tokenExpiration
+          name
+          email
+          phone
+          notificationToken
+      }
+    }`
+
+export const updateUser = `
+    mutation UpdateUser($name:String!,$phone:String!){
+        updateUser(updateUserInput:{name:$name,phone:$phone}){
+          _id
+          name
+          phone
+        }
+      }`
+
+export const updateNotificationStatus = `
+    mutation UpdateNotificationStatus($offerNotification:Boolean!,$orderNotification:Boolean!){
+      updateNotificationStatus(offerNotification:$offerNotification,orderNotification:$orderNotification){
+        _id
+        notificationToken
+        is_order_notification
+        is_offer_notification
+      }
+    }`
+export const profile = `
+        query{
+          profile{
+            _id
+            name
+            phone
+            email
+            notificationToken
+            is_order_notification
+            is_offer_notification
+            addresses{
+              _id
+              label
+              delivery_address
+              details
+              longitude
+              latitude
+              selected
+            }
+          }
+        }`
+
+export const order = `query Order($id:String!){
+  order(id:$id){
+    _id
+    delivery_address{
+      latitude
+      longitude
+      delivery_address
+      details
+      label
+    }
+    delivery_charges
+    order_id
+    user{
+      _id
+      phone
+    }
+    items{
+      _id
+      food{
+        _id
+        title
+        category{
+          _id
+        }
+        description
+        img_url
+        
+      }
+      variation{
+        _id
+        title
+        price
+      }
+      addons{
+        _id
+        title
+        description
+        quantity_minimum
+        quantity_maximum
+        options{
+          _id
+          title
+          description
+          price
+        }
+      }
+      quantity
+    }
+    payment_status
+    payment_method
+    order_amount
+    paid_amount
+    order_status
+    status_queue{
+      pending
+      preparing
+      picked
+      delivered
+      cancelled
+    }
+    createdAt
+    review{
+      _id
+      rating
+      description
+    }
+    rider{
+      _id
+    }
+  }
+}
+`
+
+export const myOrders = `query Orders($offset:Int){
+  orders(offset:$offset){
+    _id
+    delivery_address{
+      latitude
+      longitude
+      delivery_address
+      details
+      label
+    }
+    delivery_charges
+    order_id
+    user{
+      _id
+      phone
+    }
+    
+    items{
+      _id
+      food{
+        _id
+        title
+        category{
+          _id
+        }
+        description
+        img_url
+      }
+      variation{
+        _id
+        title
+        price
+      }
+      addons{
+        _id
+        title
+        description
+        quantity_minimum
+        quantity_maximum
+        options{
+          _id
+          title
+          description
+          price
+        }
+      }
+      quantity
+    }
+    payment_status
+    payment_method
+    order_amount
+    paid_amount
+    order_status
+    status_queue{
+      pending
+      preparing
+      picked
+      delivered
+      cancelled
+    }
+    createdAt
+    review{
+      _id
+      rating
+      description
+    }
+    rider{
+      _id
+    }
+  }
+}
+`
+
+//
+// can we get userId from request instead??
+// needs research
+//
+
+export const orderStatusChanged = `subscription OrderStatusChanged($userId:String!){
+  orderStatusChanged(userId:$userId)
+  {
+    userId
+    origin
+    order{
+    _id
+    delivery_address{
+      latitude
+      longitude
+      delivery_address
+      details
+      label
+    }
+    delivery_charges
+    order_id
+    user{
+      _id
+      phone
+    }
+    
+    items{
+      _id
+      food{
+        _id
+        title
+        category{
+          _id
+        }
+        description
+        img_url
+      }
+      variation{
+        _id
+        title
+        price
+      }
+      addons{
+        _id
+        title
+        description
+        quantity_minimum
+        quantity_maximum
+        options{
+          _id
+          title
+          description
+          price
+        }
+      }
+      quantity
+    }
+    payment_status
+    payment_method
+    order_amount
+    paid_amount
+    order_status
+    status_queue{
+      pending
+      preparing
+      picked
+      delivered
+      cancelled
+    }
+    createdAt
+    review{
+      _id
+      rating
+      description
+    }
+    rider{
+      _id
+    }
+  }
+  }
+}
+`
+
+//
+// status queue??
+// can we use address id instead of address object, then get the address on backend??
+//
+export const placeOrder = `
+mutation PlaceOrder($orderInput:[OrderInput!]!,$paymentMethod:String!,$couponCode:String,$address:AddressInput!){
+  placeOrder(orderInput: $orderInput,paymentMethod:$paymentMethod,couponCode:$couponCode,address:$address) {
+    _id
+    order_id
+    delivery_address{
+      latitude
+      longitude
+      delivery_address
+      details
+      label
+    }
+    delivery_charges
+    items{
+      _id
+      food{
+        _id
+        title
+        category{
+          _id
+        }
+        description
+        img_url
+      }
+      variation{
+        _id
+        title
+        price
+      }
+      addons{
+        _id
+        title
+        description
+        quantity_minimum
+        quantity_maximum
+        options{
+          _id
+          title
+          description
+          price
+        }
+      }
+      quantity
+    }
+    user {
+      _id
+      phone
+      email
+    }
+    rider{
+      _id
+    }
+    payment_status
+    payment_method
+    paid_amount
+    order_amount
+    order_status
+    status_queue{
+      pending
+      preparing
+      picked
+      delivered
+      cancelled
+    }
+    createdAt
+    review{
+      _id
+      rating
+      description
+    }
+  }
+}`
+
+export const reviewOrder = `mutation ReviewOrder(
+  $orderId:String!,
+  $rating:Int!,
+  $description:String
+){
+  reviewOrder(reviewInput:{
+    orderId:$orderId,
+    rating:$rating,
+    description:$description
+  }){
+    _id
+    order_id
+    review{
+      _id
+      rating
+      description
+    }
+    createdAt
+    updatedAt
+    is_active
+  }
+}`
+
+//
+// use this to push token instead of login, signup mutation?
+// needs research
+//
+export const pushToken = `mutation PushToken($token:String!){
+  pushToken(token:$token){
+    _id
+    notificationToken
+  }
+}`
+
+export const getConfiguration = `query Configuration{
+  configuration{
+    _id
+    currency
+    currency_symbol
+    delivery_charges
+  }
+}`
+
+export const foodByIds = `query FoodByIds($ids:[String!]!){
+  foodByIds(ids: $ids) {
+    _id
+    title
+    description
+    img_url
+    stock
+    category {
+      _id
+    }
+    variations {
+      _id
+      title
+      price
+      discounted
+      addons {
+        _id
+        title
+        description
+        quantity_minimum
+        quantity_maximum
+        options {
+          _id
+          title
+          description
+          price
+        }
+      }
+    }
+  }
+}`
+
+export const getCoupon = `mutation Coupon($coupon:String!){
+  coupon(coupon:$coupon){
+    _id
+    code
+    discount
+    enabled
+  }
+}`
+
+export const deleteAddress = `mutation DeleteAddress($id:ID!){
+  deleteAddress(id:$id){
+    _id
+    addresses{
+      _id
+      label
+      delivery_address
+      details
+      longitude
+      latitude
+      selected
+    }
+  }
+}`
+
+export const createAddress = `mutation CreateAddress($addressInput:AddressInput!){
+  createAddress(addressInput:$addressInput){
+    _id
+    addresses{
+      _id
+      label
+      delivery_address
+      details
+      longitude
+      latitude
+      selected
+    }
+  }
+}`
+
+export const editAddress = `mutation EditAddress($addressInput:AddressInput!){
+  editAddress(addressInput:$addressInput){
+    _id
+    label
+    delivery_address
+    details
+    longitude
+    latitude
+  }
+}`
+
+export const changePassword = `mutation ChangePassword($oldPassword:String!,$newPassword:String!){
+  changePassword(oldPassword:$oldPassword,newPassword:$newPassword)
+}`
+
+export const forgotPassword = `mutation ForgotPassword($email:String!){
+  forgotPassword(email:$email){
+    result
+  }
+}`
+
+export const selectAddress = `mutation SelectAddress($id:String!){
+  selectAddress(id:$id){
+    _id
+    addresses{
+      _id
+      label
+      delivery_address
+      details
+      longitude
+      latitude
+      selected
+    }
+  }
+}`
+
+export const subscriptionRiderLocation = `subscription SubscriptionRiderLocation($riderId:String!){
+  subscriptionRiderLocation(riderId:$riderId) {
+    _id
+    location {
+      latitude
+      longitude
+    }
+  }
+}`
+
+export const rider = `query Rider($id:String){
+  rider(id:$id){
+    _id
+    location {
+      latitude
+      longitude
+    }
+  }
+}`
--- a/App/src/assets/.DS_Store
+++ b/App/src/assets/.DS_Store
--- a/App/src/assets/font/Poppin/Poppins-Bold.ttf
+++ b/App/src/assets/font/Poppin/Poppins-Bold.ttf
--- a/App/src/assets/font/Poppin/Poppins-Light.ttf
+++ b/App/src/assets/font/Poppin/Poppins-Light.ttf
--- a/App/src/assets/font/Poppin/Poppins-Medium.ttf
+++ b/App/src/assets/font/Poppin/Poppins-Medium.ttf
--- a/App/src/assets/font/Poppin/Poppins-Regular.ttf
+++ b/App/src/assets/font/Poppin/Poppins-Regular.ttf
--- a/App/src/assets/font/Poppin/Poppins-SemiBold.ttf
+++ b/App/src/assets/font/Poppin/Poppins-SemiBold.ttf
--- a/App/src/assets/font/icomoon.ttf
+++ b/App/src/assets/font/icomoon.ttf
--- a/App/src/assets/images/.DS_Store
+++ b/App/src/assets/images/.DS_Store
--- a/App/src/assets/images/SVG/Logo.js
+++ b/App/src/assets/images/SVG/Logo.js
@ -0,0 +1,20 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+
+function LogoAlphabet(props) {
+  return (
+    <Svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={71.456}
+      height={69.504}
+      viewBox="0 0 71.456 69.504"
+      {...props}>
+      <Path
+        fill="#0b0b0b"
+        d="M36.914 69.503a83.004 83.004 0 01-3.529-.106C15.33 68.497.674 54.169.027 36.773a35.8 35.8 0 018.081-24.387A35.35 35.35 0 0130.626.199a28.342 28.342 0 013.9-.192h.237Q42.995-.001 51.227 0h15.658a4.54 4.54 0 013.9 2.193 4.525 4.525 0 01.161 4.459l-1.9 3.675-3.007 5.793c-3.808 7.333-7.746 14.914-11.558 22.4a6.11 6.11 0 01-5.984 3.75h-.124c-4.9-.053-10.119-.077-16.925-.077q-4.46 0-8.922.009l-6.04.007a26.533 26.533 0 002.291 4.166 18.962 18.962 0 0015.822 8.18c1.459.03 3 .043 4.862.043q1.175 0 2.363-.005h.012a2.7 2.7 0 012.307 1.291 2.707 2.707 0 01.1 2.652l-4.9 9.505a2.705 2.705 0 01-2.4 1.466zM24.305 27.258c6.041 0 12.52-.009 19.069-.078a2.429 2.429 0 00.263-.382c1.73-3.181 3.417-6.466 5.05-9.641l1.141-2.219-2.237-.013c-2.088-.013-4.143-.026-6.18-.026-3.162 0-5.75.031-8.142.1a18.038 18.038 0 00-11.515 4.771 18.807 18.807 0 00-5.338 7.484z"
+      />
+    </Svg>
+  )
+}
+
+export default React.memo(LogoAlphabet)
--- a/App/src/assets/images/SVG/LogoName.js
+++ b/App/src/assets/images/SVG/LogoName.js
@ -0,0 +1,27 @@
+import * as React from 'react'
+import Svg, { Text, TSpan } from 'react-native-svg'
+
+function LogoName(props) {
+  return (
+    <Svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={125}
+      height={32}
+      viewBox="0 0 125 32"
+      {...props}>
+      <Text
+        fill="#0b0b0b"
+        fontFamily="AmsiPro-BoldItalic"
+        fontSize={32}
+        fontStyle="italic"
+        fontWeight={700}
+        transform="translate(0 27)">
+        <TSpan x={0} y={0}>
+          {'enatega'}
+        </TSpan>
+      </Text>
+    </Svg>
+  )
+}
+
+export default React.memo(LogoName)
--- a/App/src/assets/images/SVG/imageComponents/CartIcon.js
+++ b/App/src/assets/images/SVG/imageComponents/CartIcon.js
@ -0,0 +1,18 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+
+function CartIcon(props) {
+  return (
+    <Svg viewBox="0 0 489 489" width={512} height={512} {...props}>
+      <Path
+        d="M440.1 422.7l-28-315.3c-.6-7-6.5-12.3-13.4-12.3h-57.6C340.3 42.5 297.3 0 244.5 0s-95.8 42.5-96.6 95.1H90.3c-7 0-12.8 5.3-13.4 12.3l-28 315.3c0 .4-.1.8-.1 1.2 0 35.9 32.9 65.1 73.4 65.1h244.6c40.5 0 73.4-29.2 73.4-65.1 0-.4 0-.8-.1-1.2zM244.5 27c37.9 0 68.8 30.4 69.6 68.1H174.9c.8-37.7 31.7-68.1 69.6-68.1zm122.3 435H122.2c-25.4 0-46-16.8-46.4-37.5l26.8-302.3h45.2v41c0 7.5 6 13.5 13.5 13.5s13.5-6 13.5-13.5v-41h139.3v41c0 7.5 6 13.5 13.5 13.5s13.5-6 13.5-13.5v-41h45.2l26.9 302.3c-.4 20.7-21.1 37.5-46.4 37.5z"
+        data-original="#000000"
+        className="prefix__active-path"
+        data-old_color="#000000"
+        fill="#FFF"
+      />
+    </Svg>
+  )
+}
+
+export default CartIcon
--- a/App/src/assets/images/SVG/imageComponents/EmptyAddress.js
+++ b/App/src/assets/images/SVG/imageComponents/EmptyAddress.js
@ -0,0 +1,72 @@
+import * as React from 'react'
+import Svg, { Defs, G, Path, Circle } from 'react-native-svg'
+/* SVGR has dropped some elements not supported by react-native-svg: style */
+
+function EmptyAddress(props) {
+  return (
+    <Svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={103.104}
+      height={206.775}
+      viewBox="0 0 103.104 206.775"
+      {...props}>
+      <Defs></Defs>
+      <G id="prefix__Group_451" transform="translate(-103.265 -315.494)">
+        <Path
+          id="prefix__Path_27770"
+          fill="#3f3d56"
+          d="M188.794 49.138h-1.136V18.014A18.014 18.014 0 00169.645 0H103.7a18.014 18.014 0 00-18.009 18.014v170.748a18.014 18.014 0 0018.009 18.013h65.94a18.014 18.014 0 0018.014-18.014V71.292h1.136z"
+          transform="translate(17.574 315.494)"
+        />
+        <Path
+          id="prefix__Path_27771"
+          d="M195.973 29.6v170.5a13.441 13.441 0 01-13.429 13.453h-66.28a13.443 13.443 0 01-13.453-13.434V29.6a13.443 13.443 0 0113.434-13.453h8.055a6.39 6.39 0 005.918 8.8H168a6.39 6.39 0 005.918-8.8h8.607a13.441 13.441 0 0113.453 13.429z"
+          fill="#fff"
+          transform="translate(5.425 304.038)"
+        />
+        <Path
+          id="prefix__Path_27772"
+          fill="#e5e5e5"
+          d="M195.973 54.82v-5.807h-8.79v-32.04a13.411 13.411 0 00-4.663-.83h-1.144v32.87h-30.488V24.947h-5.808v24.066h-25.552v-32.87h-3.264a13.325 13.325 0 00-2.544.241v32.629h-10.909v5.807h10.909v13.433l-10.909 6.3v6.708l10.909-6.3v39.966h-10.909v5.807h10.909v57.784h-10.909v5.807h10.909V213.3a13.328 13.328 0 002.544.241h3.264v-29.22h25.552v29.22h5.807v-29.22h30.489v29.22h1.144a13.412 13.412 0 004.663-.83v-28.386h8.79v-5.807h-8.79v-25.262h8.711v-5.807h-8.711v-26.715h8.79v-5.807h-8.79V79.5h8.79v-5.806h-8.79V54.82zm-58.986 0L119.528 64.9V54.82zm-17.46 16.786l25.553-14.753v58.074h-25.552zm0 106.911v-57.783h25.553v57.784zm61.849 0h-30.488v-25.262h30.489zm0-31.07h-30.488v-26.713h30.489zm0-32.522h-30.488V79.5h30.489zm0-41.233h-30.488V54.82h30.489z"
+          transform="translate(5.425 304.038)"
+        />
+        <Path
+          id="prefix__Path_27773"
+          d="M277.166 133.105c0 18.442-33.393 59.526-33.393 59.526s-33.393-41.084-33.393-59.526a33.393 33.393 0 1166.785 0z"
+          fill="#febb2c"
+          transform="translate(-70.909 244.735)"
+        />
+        <Path
+          id="prefix__Path_27774"
+          d="M296.873 161.458a19.745 19.745 0 11-19.745-19.745 19.736 19.736 0 0119.745 19.727z"
+          fill="#fff"
+          transform="translate(-104.262 214.931)"
+        />
+        <Circle
+          id="prefix__Ellipse_321"
+          cx={7.356}
+          cy={7.356}
+          r={7.356}
+          fill="#febb2c"
+          transform="translate(165.44 369.471)"
+        />
+        <Path
+          id="prefix__Path_27775"
+          d="M310.059 249.527a19.766 19.766 0 01-21.217 0 11.034 11.034 0 0121.217 0z"
+          fill="#febb2c"
+          transform="translate(-126.588 144.1)"
+        />
+        <Circle
+          id="prefix__Ellipse_322"
+          cx={9.001}
+          cy={9.001}
+          r={9.001}
+          fill="#febb2c"
+          transform="translate(163.863 443.464)"
+        />
+      </G>
+    </Svg>
+  )
+}
+
+export default React.memo(EmptyAddress)
--- a/App/src/assets/images/SVG/imageComponents/EmptyCart.js
+++ b/App/src/assets/images/SVG/imageComponents/EmptyCart.js
@ -0,0 +1,116 @@
+import * as React from 'react'
+import Svg, { Defs, G, Path, Circle } from 'react-native-svg'
+/* SVGR has dropped some elements not supported by react-native-svg: style */
+
+function EmptyCart(props) {
+  return (
+    <Svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={188.228}
+      height={140.238}
+      viewBox="0 0 188.228 140.238"
+      {...props}>
+      <Defs></Defs>
+      <G id="prefix__Group_450" transform="translate(-75.631 -357.239)">
+        <Path
+          id="prefix__Path_27783"
+          d="M188.519 755.456c4.238 7.86 13.233 11.233 13.233 11.233s2.123-9.369-2.115-17.228-13.237-11.233-13.237-11.233-2.119 9.372 2.119 17.228z"
+          fill="#2f2e41"
+          transform="translate(-98.692 -269.439)"
+        />
+        <Path
+          id="prefix__Path_27784"
+          fill="#febb2c"
+          d="M169.11 774.942c7.651 4.6 10.6 13.747 10.6 13.747s-9.458 1.68-17.11-2.923-10.6-13.748-10.6-13.748 9.458-1.68 17.11 2.924z"
+          transform="translate(-76.369 -291.51)"
+        />
+        <Path
+          id="prefix__Rectangle_2492"
+          d="M0 0h.682v6.308H0z"
+          fill="#f2f2f2"
+          transform="translate(245.871 428.106)"
+        />
+        <Path
+          id="prefix__Path_27785"
+          d="M206.016 631.778h-80.742v-.578h80.161v-28.176h-73.373L128.5 595.6l.524-.251 3.406 7.1h73.589z"
+          fill="#2f2e41"
+          transform="translate(-6.926 -149.359)"
+        />
+        <Circle
+          id="prefix__Ellipse_327"
+          cx={6.099}
+          cy={6.099}
+          r={6.099}
+          fill="#3f3d56"
+          transform="translate(122.995 484.451)"
+        />
+        <Circle
+          id="prefix__Ellipse_328"
+          cx={6.099}
+          cy={6.099}
+          r={6.099}
+          fill="#3f3d56"
+          transform="translate(183.116 484.451)"
+        />
+        <Circle
+          id="prefix__Ellipse_329"
+          cx={3.776}
+          cy={3.776}
+          r={3.776}
+          fill="#3f3d56"
+          transform="translate(256.307 357.239)"
+        />
+        <Path
+          id="prefix__Path_27786"
+          d="M326.04 541.718h-90.754l-19.637-64.187h130.614l-.119.378zm-90.325-.581h89.9l19.857-63.025H216.434z"
+          fill="#2f2e41"
+          transform="translate(-118.314 -97.638)"
+        />
+        <Path
+          id="prefix__Path_27787"
+          d="M179.221 469.941H99.508L82.26 413.015h114.724l-.1.335z"
+          fill="#f2f2f2"
+          transform="translate(21.421 -29.201)"
+        />
+        <Path
+          id="prefix__Path_27788"
+          d="M450.38 356.491l-.562-.149 3.833-14.448h22.3v.581H454.1z"
+          fill="#2f2e41"
+          transform="translate(-220.803 17.668)"
+        />
+        <Path
+          id="prefix__Rectangle_2497"
+          d="M0 0h117.742v.581H0z"
+          fill="#2f2e41"
+          transform="translate(103.68 399.353)"
+        />
+        <Path
+          id="prefix__Rectangle_2498"
+          d="M0 0h104.452v.581H0z"
+          fill="#2f2e41"
+          transform="translate(110.228 420.753)"
+        />
+        <Path
+          id="prefix__Rectangle_2499"
+          d="M0 0h.581v63.606H0z"
+          fill="#2f2e41"
+          transform="translate(162.35 380.184)"
+        />
+        <Path
+          id="prefix__Rectangle_2500"
+          d="M0 0h63.741v.581H0z"
+          fill="#2f2e41"
+          transform="rotate(-86.27 329.18 123.26)"
+        />
+        <Path
+          id="prefix__Rectangle_2501"
+          d="M0 0h.581v63.741H0z"
+          fill="#2f2e41"
+          transform="rotate(-3.729 5907.583 -1895.335)"
+        />
+      </G>
+    </Svg>
+  )
+}
+
+export default React.memo(EmptyCart)
--- a/App/src/assets/images/SVG/imageComponents/EmptyFood.js
+++ b/App/src/assets/images/SVG/imageComponents/EmptyFood.js
@ -0,0 +1,535 @@
+import * as React from 'react'
+import Svg, {
+  Defs,
+  LinearGradient,
+  Stop,
+  G,
+  Path,
+  Circle,
+  Ellipse
+} from 'react-native-svg'
+/* SVGR has dropped some elements not supported by react-native-svg: style */
+
+function EmptyFood(props) {
+  return (
+    <Svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={75.38}
+      height={240.015}
+      viewBox="0 0 75.38 240.015"
+      {...props}>
+      <Defs>
+        <LinearGradient
+          id="prefix__linear-gradient"
+          x1={0.5}
+          x2={0.5}
+          y1={1}
+          gradientUnits="objectBoundingBox">
+          <Stop offset={0} stopColor="gray" stopOpacity={0.251} />
+          <Stop offset={0.535} stopColor="gray" stopOpacity={0.122} />
+          <Stop offset={1} stopColor="gray" stopOpacity={0.102} />
+        </LinearGradient>
+      </Defs>
+      <G id="prefix__Group_452" transform="translate(-14823.746 -14042.397)">
+        <Path
+          id="prefix__Path_27691"
+          fill="url(#prefix__linear-gradient)"
+          d="M483.2 234.077c-.533-1.031-3.349-7.44-3.349-7.44l-4.719-12.229s-3.349-5.157-3.349-6.114-6.09-4.788-6.09-4.788-4.948-1.473-5.328-1.621-6.242-2.086-6.242-2.086-2.308-3.035-2.637-2.242l-.036-.058a7.836 7.836 0 01-.88-2.838c-.013-.088-.023-.181-.035-.273a11.3 11.3 0 004.958-9.3 11.14 11.14 0 00-.1-1.446 1.012 1.012 0 01.131-.069c.095-.041.071-.075 0-.109.024-.012.048-.026.072-.036.126-.055.042-.1-.08-.145h.007c.172-.075-.045-.124-.22-.2l-.028-.153a1.029 1.029 0 00.07-.3l.046.023a1.289 1.289 0 000-.576 1.013 1.013 0 01-.04.113.962.962 0 00-.443-.872l-.027-.024.323-3.3c4.76-.225 5.6-8.323 4.509-8.773s0-1.425 0-3.374-3.591-4.124-3.591-4.124-1.5.75-3.841-3-10.94-4.349-11.524-3.374-4.426 2.25-9.436 3.674-4.092 7.348-3.257 8.623a7.276 7.276 0 011.169 3.524 20.635 20.635 0 001.587 3.9c-.5 1.091.773 7.07 1.15 8.769-.006.052-.012.1-.017.157l-.01.015a.8.8 0 00-.049.085.977.977 0 00-.077.564 1.177 1.177 0 00.085.616 11.238 11.238 0 003.985 8.384l.017.31c.07 1.388.11 3.029.037 4.6 0 .08-.01.159-.014.239a1.8 1.8 0 00-1.274 1c-.472.908-3.212 2.307-3.212 2.307s-4.8.221-5.252 1.105-7.384 3.831-7.384 3.831-3.654 2.136-3.121 4.567c.278 1.27-.5 3.244-1.313 4.839a22.985 22.985 0 00-5.255-1.31l3.884 3.703-.129.2-2.207 7.809s-.761 2.726-1.522 3.389.685 6.7.685 6.7-.837 4.273-1.522 5.378 1.066 3.831 1.066 3.831l3.5 7.956 9.287 2.357 1.619.345q-.047.285-.1.568c-.448 2.534-1.035 4.865-1.751 5.5-1.751 1.547-1.675 8.472-1.675 8.472l.076 9.8s.609 12.081.3 12.523c-.192.279.193.734 1.211 1.143q-.044.273-.085.554c-.286 2-.414 4.29.244 5.3a4.028 4.028 0 01.457 1.768c0 .958 1.446 2.947 1.446 2.947s-1.142 8.177.761 10.976 3.5 7.882 2.588 9.061c0 0-1.6 3.462-.837 5.009a1.806 1.806 0 01-.99 2.8c-.99.368-.9 3.389-.9 3.389l1.818 14.365s.99 2.947.152 3.978-.837 6.188.457 7.956-1.827 5.009-1.827 5.009-1.9 2.726 1.142 3.61c0 0 .609.147-.533 1.326s-1.37 2.652-.609 3.168a3.482 3.482 0 00.494.245c-.028.175-.059.355-.095.547-.292 1.538-.843 3.542-1.845 4.511a32.16 32.16 0 00-4.984 6.642c-1.044 1.98-1.5 3.834-.344 4.7 2.74 2.063 6.242 2.726 8.3 1.915a23.362 23.362 0 004.948-3.315l.685-2.873s-.457-1.768 1.827-2.431a11.732 11.732 0 004.415-3.02v-3.819a16.184 16.184 0 001.6-1.043s1.066-3.757 0-5.009-1.446-1.694-.076-2.5 1.556-2.578.551-4.125-2.606-3.831-1.236-7.072 1.873-13.186 1.873-13.186-.639-6.777 0-8.324-.731-4.641-.731-4.641a24.8 24.8 0 011.294-5.6c.837-1.768 1.522-11.124 1.522-11.124a24 24 0 001.522-6.556c0-2.578-2.36-8.766 1.142-10.387 0 0 1.522 1.326.913 6.63 0 0 1.751 6.188 1.751 8.1s1.294 8.84 1.294 8.84a9.01 9.01 0 00.685 3.02c.533.81 0 3.02 0 3.02s1.979 1.842 1.446 3.02.091 3.837.091 3.837l-.472 16.5s-1.37 7.072 1.827 11.345c0 0-1.142 6.262-1.827 6.7s2.512 4.273 2.512 4.273-.886 2.482.913 2.6v4.1a8.762 8.762 0 002.512 2.8c1.675 1.179.99 5.23.99 5.23a6.958 6.958 0 007.764 4.052c5.633-1.1 6.394-1.621 6.09-3.462a41.468 41.468 0 00-.7-3.233c-.606-2.366-1.535-5.222-2.646-6.63-1.751-2.219-3.2-6.86-3.2-6.86s-.685-1.547 0-2.063a1.41 1.41 0 00.381-1.473 4.836 4.836 0 00.067-3.094c-.6-1.179 1.151-3.61 1.151-3.61l-.533-11.345.533-16.5s-2.36-2.726-1.37-4.346-1.142-3.9-1.142-3.9-.228-.074.381-1.915a4.59 4.59 0 00-.152-3.315s-1.294-4.567.99-8.03c0 0 .99-4.567 1.294-6.925.21-1.638 1.525-7.759 2.308-11.339l.127-.581c1.127.062 1.98.133 1.98.133s-1.751-12.155 0-14.66-1.37-21.658-1.37-21.658-.746-3.347-1.206-6.763c-.026-.195-.05-.389-.074-.583a36.9 36.9 0 014.249-.094c3.654.221 7.231-1.179 7.307-2.578s2.055-6.925 2.36-8.177.528-5.53-.008-6.562z"
+          transform="translate(14415.603 13887.477)"
+        />
+        <Path
+          id="prefix__Path_27692"
+          d="M456.179 738.67v6.821a11.324 11.324 0 01-4.254 3.007c-2.2.66-1.76 2.42-1.76 2.42l-.66 2.861a22.5 22.5 0 01-4.768 3.3c-1.98.807-5.354.147-7.995-1.907-1.115-.865-.675-2.711.332-4.682a31.934 31.934 0 014.8-6.613c.965-.965 1.5-2.96 1.778-4.492.208-1.147.276-2.036.276-2.036z"
+          className="#4c495a"
+          transform="translate(14398.211 13524.996)"
+        />
+        <Path
+          id="prefix__Path_27693"
+          d="M456.179 754.325v1.731a11.325 11.325 0 01-4.254 3.007c-2.2.66-1.76 2.42-1.76 2.42l-.66 2.86a22.5 22.5 0 01-4.768 3.3c-1.98.807-5.354.147-7.995-1.907-1.115-.866-.675-2.711.332-4.682-.047 2.071.566 4.4 3.556 4.316a15.146 15.146 0 008.875-3.227s-.073-4.841 3.3-5.941a10.277 10.277 0 003.374-1.877z"
+          opacity={0.1}
+          transform="translate(14398.211 13514.433)"
+        />
+        <Path
+          id="prefix__Path_27694"
+          d="M542.486 748.39c-5.428 1.1-7.481-4.034-7.481-4.034s.66-4.034-.954-5.208a8.655 8.655 0 01-2.42-2.787v-6.748l6.6-4.694 3.573 3.163.241.211s1.394 4.621 3.08 6.83c1.071 1.4 1.966 4.245 2.549 6.6.338 1.355.572 2.549.678 3.218.295 1.836-.438 2.349-5.866 3.449z"
+          className="#4c495a"
+          transform="translate(14338.748 13532.731)"
+        />
+        <Path
+          id="prefix__Path_27695"
+          d="M542.486 762.939c-5.428 1.1-7.481-4.034-7.481-4.034s.66-4.034-.954-5.208a8.656 8.656 0 01-2.42-2.787v-2.61a27.553 27.553 0 013.447 4.154c.587 1.247.66 5.794 3.374 6.6s7.995 1.54 8.435-.513a11.445 11.445 0 01.789-2.265c.338 1.355.572 2.549.678 3.218.293 1.831-.44 2.345-5.868 3.445z"
+          opacity={0.1}
+          transform="translate(14338.748 13518.184)"
+        />
+        <Path
+          id="prefix__Path_27696"
+          d="M456.4 737.35l12.249 1.32v3.606c-1.382.819-3.362 1.687-4.474.8-1.643-1.314-6.528-2.984-8.05-3.685.209-1.152.275-2.041.275-2.041z"
+          opacity={0.1}
+          transform="translate(14385.739 13524.996)"
+        />
+        <Path
+          id="prefix__Path_27697"
+          d="M542.046 728.88c-1.687-.587-4.694 1.98-8.655 3.594a4.122 4.122 0 01-1.76.393v-3.254l6.6-4.694 3.573 3.163a4.474 4.474 0 00.242.798z"
+          opacity={0.1}
+          transform="translate(14338.748 13532.731)"
+        />
+        <Path
+          id="prefix__Path_27698"
+          fill="#5f5d7e"
+          d="M493.035 519.636s-.232 1.08-.563 2.646c-.754 3.565-2.021 9.658-2.224 11.289-.293 2.347-1.247 6.895-1.247 6.895-2.2 3.447-.953 7.995-.953 7.995a4.708 4.708 0 01.147 3.3c-.587 1.834-.367 1.907-.367 1.907s2.054 2.274 1.1 3.887 1.32 4.327 1.32 4.327l-.513 16.43.513 11.3s-1.687 2.42-1.109 3.594a4.966 4.966 0 01-.065 3.081 1.438 1.438 0 01-.367 1.467c-.66.513 0 2.054 0 2.054-1.687-.587-4.694 1.98-8.655 3.594s-2.641-2.2-2.641-2.2-3.081-3.814-2.42-4.254 1.76-6.674 1.76-6.674c-3.081-4.254-1.76-11.3-1.76-11.3l.455-16.424s-.6-2.646-.088-3.82-1.394-3.007-1.394-3.007.513-2.2 0-3.007a9.226 9.226 0 01-.66-3.007s-1.247-6.895-1.247-8.8-1.687-8.068-1.687-8.068c.587-5.281-.88-6.6-.88-6.6-3.374 1.614-1.1 7.775-1.1 10.342a24.544 24.544 0 01-1.467 6.528s-.66 9.315-1.467 11.075a25.4 25.4 0 00-1.247 5.574s1.32 3.081.7 4.621 0 8.288 0 8.288-.484 9.9-1.8 13.129.22 5.5 1.191 7.041.789 3.3-.531 4.107-.953 1.247.073 2.494 0 4.988 0 4.988-4.181 3.3-6.014 1.834-7.7-3.374-8.435-3.887-.513-1.98.587-3.154.513-1.32.513-1.32c-2.934-.88-1.1-3.594-1.1-3.594s3.007-3.227 1.76-4.988-1.247-6.894-.44-7.921-.147-3.961-.147-3.961l-1.751-14.3s-.082-3.007.871-3.374a1.816 1.816 0 00.954-2.787c-.733-1.54.807-4.987.807-4.987.88-1.174-.66-6.234-2.494-9.022s-.733-10.928-.733-10.928-1.394-1.98-1.394-2.934a4.11 4.11 0 00-.44-1.76c-.634-1.006-.511-3.283-.235-5.278.267-1.93.675-3.6.675-3.6z"
+          transform="translate(14392.087 13661.223)"
+        />
+        <Path
+          id="prefix__Path_27699"
+          d="M499.5 264.207l-14.449 3.374s-7.115-6.014-5.354-9.242a12.818 12.818 0 00.962-5c.07-1.564.032-3.2-.035-4.58-.1-2-.267-3.474-.267-3.474s14.816-8.361 14.3 0a21.36 21.36 0 00.1 4.178 7.988 7.988 0 00.848 2.825c.792 1.411 1.769 1.432 1.769 1.432z"
+          fill="#fdc2cc"
+          transform="translate(14371.242 13833.552)"
+        />
+        <Path
+          id="prefix__Path_27700"
+          d="M496.31 249.461a11.364 11.364 0 01-14.132-.7c-.1-2-.267-3.474-.267-3.474s14.816-8.361 14.3 0a21.353 21.353 0 00.099 4.174z"
+          opacity={0.1}
+          transform="translate(14369.692 13833.552)"
+        />
+        <Circle
+          id="prefix__Ellipse_301"
+          cx={11.369}
+          cy={11.369}
+          r={11.369}
+          fill="#fdc2cc"
+          transform="translate(14848.009 14062.112)"
+        />
+        <Path
+          id="prefix__Path_27701"
+          d="M499.5 281.872l-14.449 3.374s-7.115-6.014-5.354-9.242a12.818 12.818 0 00.962-5 7.372 7.372 0 002.632 4.415c3.3 2.2 2.787 4.914 2.787 4.914l5.941-.22c-.367-2.42 1.834-3.741 2.567-4.034s.367-1.614.367-1.614l.651-4.512c.792 1.411 1.769 1.432 1.769 1.432z"
+          opacity={0.1}
+          transform="translate(14371.242 13815.886)"
+        />
+        <Path
+          id="prefix__Path_27702"
+          d="M493.406 519.636s-.232 1.08-.563 2.646a23.092 23.092 0 00-4.644.067 80.838 80.838 0 01-8.068.513l-15.989.566v-.493a47.174 47.174 0 00-5.5.367 39.084 39.084 0 01-9.682-.587 10.419 10.419 0 01-2.435-.657c.267-1.93.675-3.6.675-3.6z"
+          opacity={0.1}
+          transform="translate(14391.716 13661.223)"
+        />
+        <Path
+          id="prefix__Path_27703"
+          d="M478.041 318.274a23.345 23.345 0 00.232 5.882c.443 3.4 1.162 6.733 1.162 6.733s3.007 19.07 1.32 21.564 0 14.6 0 14.6-5.061-.44-6.674-.073a80.814 80.814 0 01-8.068.513l-15.989.566v-.493a47.134 47.134 0 00-5.5.367 39.09 39.09 0 01-9.682-.587c-2.714-.44-3.814-1.32-3.521-1.76s-.293-12.469-.293-12.469l-.073-9.755s-.073-6.894 1.614-8.435c.689-.628 1.256-2.949 1.687-5.472.619-3.653.954-7.731.954-7.731l-11.149-29.852-.22-.587s3.227-4.988 2.714-7.408 3.007-4.547 3.007-4.547 6.674-2.934 7.115-3.814 5.061-1.1 5.061-1.1 2.64-1.394 3.1-2.3a1.735 1.735 0 011.229-1 7.387 7.387 0 002.643 4.471c3.3 2.2 2.787 4.914 2.787 4.914l5.941-.22c-.367-2.42 1.834-3.741 2.567-4.034s.367-1.614.367-1.614l.687-4.75c.317-.789 2.541 2.233 2.541 2.233s5.648 1.931 6.014 2.077 5.134 1.614 5.134 1.614 5.868 3.814 5.868 4.767 3.227 6.088 3.227 6.088l-.109.581c-.752 4.042-5.156 27.877-5.693 31.031z"
+          fill="#febb2c"
+          transform="translate(14405.834 13816.011)"
+        />
+        <Path
+          id="prefix__Path_27704"
+          d="M475.639 359.737s-12.689-3.374-13.936-4.181-8.581 3.887.367 10.268c0 0 10.942 2.274 13.869 0s-.3-6.087-.3-6.087z"
+          fill="#fdc2cc"
+          transform="translate(14384.765 13762.666)"
+        />
+        <Path
+          id="prefix__Path_27705"
+          d="M530.065 313.559l1.54.073 4.547 12.175s2.714 6.381 3.227 7.408.293 5.281 0 6.528-2.2 6.748-2.274 8.141-3.521 2.787-7.041 2.567-11.735.88-11.735.88-8.773-.917-14.156 1.834c0 0-3.447-7.115-3.081-20.39 0 0 6.088-.367 7.628.22s9.022 2.274 9.975 1.393 5.282 1.612 5.282 1.612a3.718 3.718 0 000-3.081c-.733-1.76-1.98-7.261-.367-9.022s6.455-10.338 6.455-10.338z"
+          opacity={0.1}
+          transform="translate(14357.771 13788.747)"
+        />
+        <Path
+          id="prefix__Path_27706"
+          d="M526.82 352.87c-3.641.246-7.713.792-7.713.792s-8.772-.918-14.156 1.834c0 0-3.447-7.115-3.081-20.39 0 0 6.088-.367 7.628.22s9.021 2.274 9.975 1.394 5.281 1.614 5.281 1.614a3.717 3.717 0 000-3.08c-.734-1.76-1.98-7.261-.367-9.022s6.455-10.342 6.455-10.342l1.432.067c-.745 4.043-5.149 27.877-5.686 31.031a23.342 23.342 0 00.232 5.882z"
+          opacity={0.1}
+          transform="translate(14357.287 13787.296)"
+        />
+        <Path
+          id="prefix__Path_27707"
+          d="M530.842 314.336l1.54.073 4.547 12.175s2.714 6.381 3.227 7.408.293 5.281 0 6.528-2.2 6.748-2.274 8.141-3.521 2.787-7.041 2.567-11.735.88-11.735.88-8.773-.917-14.156 1.834c0 0-3.447-7.115-3.081-20.39 0 0 6.088-.367 7.628.22s9.022 2.274 9.975 1.394 5.281 1.614 5.281 1.614a3.717 3.717 0 000-3.08c-.733-1.76-1.98-7.261-.367-9.022s6.456-10.342 6.456-10.342z"
+          fill="#febb2c"
+          transform="translate(14357.287 13788.264)"
+        />
+        <Path
+          id="prefix__Rectangle_2473"
+          d="M0 0h2.153v19.373H0z"
+          fill="#dfe6f5"
+          transform="rotate(-148.235 9447.513 4949.24)"
+        />
+        <Ellipse
+          id="prefix__Ellipse_302"
+          cx={6.199}
+          cy={4.348}
+          fill="#dfe6f5"
+          rx={6.199}
+          ry={4.348}
+          transform="rotate(-58.235 20108.237 -6300.42)"
+        />
+        <Ellipse
+          id="prefix__Ellipse_303"
+          cx={4.45}
+          cy={3.121}
+          opacity={0.1}
+          rx={4.45}
+          ry={3.121}
+          transform="rotate(-58.235 20108.463 -6302.603)"
+        />
+        <Path
+          id="prefix__Rectangle_2474"
+          d="M0 0h2.153v12.054H0z"
+          fill="#53526b"
+          transform="rotate(-148.235 9446.105 4954.192)"
+        />
+        <Path
+          id="prefix__Path_27708"
+          d="M489.872 390.68l4.474-1.247s22.077.587 14.669-8.508c0 0-3.887-3.741-12.029-.733s-10.415 3.374-10.415 3.374z"
+          fill="#fdc2cc"
+          transform="translate(14366.792 13748.006)"
+        />
+        <Circle
+          id="prefix__Ellipse_304"
+          cx={0.88}
+          cy={0.88}
+          r={0.88}
+          opacity={0.1}
+          transform="translate(14852.482 14098.564)"
+        />
+        <Circle
+          id="prefix__Ellipse_305"
+          cx={0.88}
+          cy={0.88}
+          r={0.88}
+          opacity={0.1}
+          transform="translate(14867.592 14098.051)"
+        />
+        <Circle
+          id="prefix__Ellipse_306"
+          cx={0.88}
+          cy={0.88}
+          r={0.88}
+          fill="#FFF"
+          transform="translate(14852.482 14098.271)"
+        />
+        <Circle
+          id="prefix__Ellipse_307"
+          cx={0.88}
+          cy={0.88}
+          r={0.88}
+          opacity={0.1}
+          transform="translate(14853.729 14110.74)"
+        />
+        <Circle
+          id="prefix__Ellipse_308"
+          cx={0.88}
+          cy={0.88}
+          r={0.88}
+          opacity={0.1}
+          transform="translate(14868.033 14109.859)"
+        />
+        <Circle
+          id="prefix__Ellipse_309"
+          cx={0.88}
+          cy={0.88}
+          r={0.88}
+          fill="#FFF"
+          transform="translate(14853.729 14110.446)"
+        />
+        <Circle
+          id="prefix__Ellipse_310"
+          cx={0.88}
+          cy={0.88}
+          r={0.88}
+          opacity={0.1}
+          transform="translate(14867.666 14152.333)"
+        />
+        <Circle
+          id="prefix__Ellipse_311"
+          cx={0.88}
+          cy={0.88}
+          r={0.88}
+          opacity={0.1}
+          transform="translate(14856.082 14152.333)"
+        />
+        <Circle
+          id="prefix__Ellipse_312"
+          cx={0.88}
+          cy={0.88}
+          r={0.88}
+          fill="#FFF"
+          transform="translate(14867.666 14152.039)"
+        />
+        <Circle
+          id="prefix__Ellipse_313"
+          cx={0.88}
+          cy={0.88}
+          r={0.88}
+          opacity={0.1}
+          transform="translate(14856.962 14167.07)"
+        />
+        <Circle
+          id="prefix__Ellipse_314"
+          cx={0.88}
+          cy={0.88}
+          r={0.88}
+          opacity={0.1}
+          transform="translate(14868.033 14166.19)"
+        />
+        <Circle
+          id="prefix__Ellipse_315"
+          cx={0.88}
+          cy={0.88}
+          r={0.88}
+          fill="#FFF"
+          transform="translate(14856.962 14166.776)"
+        />
+        <Circle
+          id="prefix__Ellipse_316"
+          cx={0.88}
+          cy={0.88}
+          r={0.88}
+          fill="#FFF"
+          transform="translate(14856.082 14152.039)"
+        />
+        <Circle
+          id="prefix__Ellipse_317"
+          cx={0.88}
+          cy={0.88}
+          r={0.88}
+          fill="#FFF"
+          transform="translate(14868.033 14165.896)"
+        />
+        <Circle
+          id="prefix__Ellipse_318"
+          cx={0.88}
+          cy={0.88}
+          r={0.88}
+          fill="#FFF"
+          transform="translate(14867.592 14097.758)"
+        />
+        <Circle
+          id="prefix__Ellipse_319"
+          cx={0.88}
+          cy={0.88}
+          r={0.88}
+          fill="#FFF"
+          transform="translate(14868.033 14109.566)"
+        />
+        <Path
+          id="prefix__Path_27709"
+          d="M531.243 416.884s.147 20.1.587 23.691c0 0 .159-22.743-.587-23.691z"
+          opacity={0.1}
+          transform="translate(14338.99 13724.441)"
+        />
+        <Path
+          id="prefix__Path_27710"
+          d="M541.131 441.551c-.3 0 6.014 23.544 6.308 25.231s-4.548-25.231-6.308-25.231z"
+          opacity={0.1}
+          transform="translate(14332.843 13709.09)"
+        />
+        <Path
+          id="prefix__Path_27711"
+          d="M554.355 431.451c0 .22 3.521 12.762 5.281 13.422s-5.281-13.422-5.281-13.422z"
+          opacity={0.1}
+          transform="translate(14324.606 13715.376)"
+        />
+        <Path
+          id="prefix__Path_27712"
+          d="M578.364 366.775s-7.481.333-7.7 1.414 7.7-1.414 7.7-1.414z"
+          opacity={0.1}
+          transform="translate(14314.46 13755.626)"
+        />
+        <Path
+          id="prefix__Path_27713"
+          d="M548.472 620.04s-5.354 2.274-4.547 2.42 4.547-2.42 4.547-2.42z"
+          opacity={0.1}
+          transform="translate(14331.149 13598.005)"
+        />
+        <Path
+          id="prefix__Path_27714"
+          d="M526.762 611.005c-.209-.469 3.594 1.907 3.594 2.2s-3.301-1.54-3.594-2.2z"
+          opacity={0.1}
+          transform="translate(14341.784 13603.666)"
+        />
+        <Path
+          id="prefix__Path_27715"
+          d="M539.983 631.484s4.181-.211 4.474 1.4-4.474-1.4-4.474-1.4z"
+          opacity={0.1}
+          transform="translate(14333.551 13590.888)"
+        />
+        <Path
+          id="prefix__Path_27716"
+          d="M460.352 630.824s4.547-.889 4.914 0-4.914 0-4.914 0z"
+          opacity={0.1}
+          transform="translate(14383.11 13591.54)"
+        />
+        <Path
+          id="prefix__Path_27717"
+          d="M462.928 704.721s.3 3.741-.8 4.621.8-4.621.8-4.621z"
+          opacity={0.1}
+          transform="translate(14382.221 13545.303)"
+        />
+        <Path
+          id="prefix__Path_27718"
+          d="M463.348 724.888c1.436.147 8.99-1.174 8.917 0s-8.917 0-8.917 0z"
+          opacity={0.1}
+          transform="translate(14381.244 13533.058)"
+        />
+        <Path
+          id="prefix__Path_27719"
+          d="M551.758 713.591s-2.577-.4-1.948 1.342z"
+          opacity={0.1}
+          transform="translate(14327.497 13539.807)"
+        />
+        <Path
+          id="prefix__Path_27720"
+          d="M418.5 323.57h-1.39l-2.127 7.775s-.733 2.714-1.467 3.374.66 6.674.66 6.674-.807 4.254-1.467 5.354 1.027 3.814 1.027 3.814l3.374 7.921 8.948 2.347s15.769 3.447 16.5 3.961 1.394-.22 1.907-4.987 1.907-14.009 3.007-14.449c0 0-8.8.953-9.535.807a37.29 37.29 0 00-4.254.073s-4.621-.293-5.354.147.953-2.13.953-2.13a7.073 7.073 0 000-3.591c-.51-1.98-.803-24.424-10.782-17.09z"
+          opacity={0.1}
+          transform="translate(14412.856 13783.429)"
+        />
+        <Path
+          id="prefix__Path_27721"
+          d="M454.566 347.685c-1.1.44-2.494 9.682-3.007 14.449s-1.174 5.5-1.907 4.988c-.6-.417-11.107-2.77-15.036-3.638.619-3.653.953-7.731.953-7.731L424.421 325.9h1.174c9.975-7.335 10.268 15.109 10.782 17.09a7.075 7.075 0 010 3.591s-1.687 2.57-.953 2.13 5.354-.147 5.354-.147a37.275 37.275 0 014.254-.073c.733.147 9.534-.806 9.534-.806z"
+          opacity={0.1}
+          transform="translate(14405.472 13781.979)"
+        />
+        <Path
+          id="prefix__Path_27722"
+          d="M417.727 324.347h-1.394l-2.127 7.775s-.733 2.714-1.467 3.374.66 6.674.66 6.674-.807 4.254-1.467 5.354 1.027 3.814 1.027 3.814l3.374 7.921 8.948 2.347s15.769 3.447 16.5 3.961 1.394-.22 1.907-4.987 1.907-14.009 3.007-14.449c0 0-8.8.954-9.535.807a37.277 37.277 0 00-4.254.073s-4.621-.293-5.354.147.953-2.13.953-2.13a7.073 7.073 0 000-3.591c-.505-1.98-.805-24.424-10.778-17.09z"
+          fill="#febb2c"
+          transform="translate(14413.34 13782.945)"
+        />
+        <Path
+          id="prefix__Path_27723"
+          d="M432.185 397.074s-4.034 7.628-4.767 6.748 4.767-6.748 4.767-6.748z"
+          opacity={0.1}
+          transform="translate(14403.649 13736.771)"
+        />
+        <Path
+          id="prefix__Path_27724"
+          d="M425.042 385.572s-3.741 3.1-1.98 3.9 1.98-3.9 1.98-3.9z"
+          opacity={0.1}
+          transform="translate(14406.61 13743.93)"
+        />
+        <Path
+          id="prefix__Path_27725"
+          d="M438.4 375.515c.293.073 5.428 1.093 5.5 1.537s-5.5-1.537-5.5-1.537z"
+          opacity={0.1}
+          transform="translate(14396.769 13750.188)"
+        />
+        <Path
+          id="prefix__Path_27726"
+          d="M495.034 214.749a.756.756 0 00-.5.786c-.3.264-.719-.047-.962-.384s-.525-.748-.9-.7a3.216 3.216 0 00-.513.214c-.587.188-1.083-.5-1.411-1.106l-1.716-3.174c-1.147.666-2.5-.032-3.641-.722s-2.494-1.391-3.644-.725c-1.687.974-1.749 4.222-3.5 5.023-.563.258-1.218.2-1.74.557a3.316 3.316 0 00-1.027 1.678 1.778 1.778 0 01-.575.948 1.263 1.263 0 01-.593.144 2.543 2.543 0 01-1.526-.214 1.289 1.289 0 01-.528-1.526.793.793 0 01.047-.085 5.347 5.347 0 00.5-.725c.176-.466-.076-1.009-.021-1.514.091-.863 1-1.317 1.159-2.165.065-.332 0-.687.059-1.021a.923.923 0 01.035-.129l-.537.37a12.864 12.864 0 001.344-2.526 7.779 7.779 0 014.747-3.864 11.331 11.331 0 015.865.067 19.313 19.313 0 015.219 2.15 5.179 5.179 0 011.52 1.235 9.514 9.514 0 01.9 1.663c.569 1.179 2.124 2.271.886 2.435-1.03.138-.091.86.449 1.347a1.4 1.4 0 01.311.34 1.218 1.218 0 01-.065 1.176c-.199.265.646.318.358.447z"
+          opacity={0.1}
+          transform="translate(14375.744 13857.224)"
+        />
+        <Path
+          id="prefix__Path_27727"
+          fill="#865a61"
+          d="M495.034 213.972a.756.756 0 00-.5.786c-.3.264-.719-.047-.962-.384s-.525-.748-.9-.7a3.216 3.216 0 00-.513.214c-.587.188-1.083-.5-1.411-1.106l-1.716-3.174c-1.147.666-2.5-.032-3.641-.722s-2.494-1.391-3.644-.725c-1.687.974-1.749 4.222-3.5 5.023-.563.258-1.218.2-1.74.557a3.316 3.316 0 00-1.027 1.678 1.778 1.778 0 01-.575.948 1.263 1.263 0 01-.593.144 2.542 2.542 0 01-1.526-.214 1.289 1.289 0 01-.528-1.526.8.8 0 01.047-.085 5.343 5.343 0 00.5-.725c.176-.466-.076-1.009-.02-1.514.091-.863 1-1.317 1.159-2.165.065-.332 0-.687.059-1.021a.922.922 0 01.035-.129l-.537.37a12.864 12.864 0 001.344-2.526 7.779 7.779 0 014.747-3.864 11.331 11.331 0 015.865.067 19.313 19.313 0 015.219 2.15 5.179 5.179 0 011.52 1.235 9.51 9.51 0 01.9 1.663c.569 1.179 2.124 2.271.886 2.435-1.03.138-.091.86.449 1.347a1.4 1.4 0 01.311.34 1.218 1.218 0 01-.065 1.177c-.2.264.645.317.357.446z"
+          transform="translate(14375.744 13857.707)"
+        />
+        <Path
+          id="prefix__Path_27728"
+          d="M494.64 212.01l-.117 1.235s-12.31-15.6-21.886 2.016l-.126-.575a5.339 5.339 0 00.5-.725c.176-.466-.076-1.009-.021-1.514.091-.863 1-1.317 1.159-2.165.065-.332 0-.687.059-1.021a.926.926 0 01.035-.129l-.537.37a12.864 12.864 0 001.344-2.526 7.779 7.779 0 014.747-3.864 11.331 11.331 0 015.865.067 19.313 19.313 0 015.219 2.15 5.179 5.179 0 011.52 1.235 9.517 9.517 0 01.9 1.663c.569 1.179 2.124 2.271.886 2.435-1.025.138-.087.861.453 1.348z"
+          opacity={0.1}
+          transform="translate(14375.543 13857.707)"
+        />
+        <G
+          id="prefix__Group_447"
+          opacity={0.1}
+          transform="translate(14848.001 14065.161)">
+          <Path
+            id="prefix__Path_27729"
+            d="M494.858 221.557a.6.6 0 00-.14.508c-.3.264-.719-.047-.962-.384s-.525-.748-.9-.7a3.22 3.22 0 00-.513.214c-.587.188-1.083-.5-1.411-1.106l-1.716-3.174c-1.147.666-2.5-.032-3.641-.722s-2.494-1.391-3.644-.725c-1.687.974-1.749 4.222-3.5 5.023-.563.258-1.218.2-1.74.557a3.316 3.316 0 00-1.027 1.678 1.777 1.777 0 01-.575.948 1.263 1.263 0 01-.593.144 2.542 2.542 0 01-1.526-.214 1.372 1.372 0 01-.572-.807 1.319 1.319 0 00.572 1.393 2.543 2.543 0 001.526.214 1.263 1.263 0 00.593-.144 1.778 1.778 0 00.575-.948 3.315 3.315 0 011.027-1.678c.522-.355 1.176-.3 1.74-.557 1.749-.8 1.81-4.049 3.5-5.023 1.15-.666 2.505.035 3.644.725s2.494 1.388 3.641.722q.858 1.584 1.716 3.174c.329.6.824 1.294 1.411 1.106a3.22 3.22 0 01.513-.214c.373-.047.651.367.9.7s.663.648.962.384a.756.756 0 01.5-.786c.231-.102-.255-.157-.36-.308z"
+            transform="translate(-472.373 -215.199)"
+          />
+          <Path
+            id="prefix__Path_27730"
+            d="M529.071 223.028a1.061 1.061 0 01.277-.07c.546-.072.548-.325.332-.686a.859.859 0 01-.332.1c-.589.079-.533.349-.277.656z"
+            transform="translate(-507.545 -219.601)"
+          />
+          <Path
+            id="prefix__Path_27731"
+            d="M532.046 229.837a1.325 1.325 0 000-.574.847.847 0 01-.149.323c-.097.114.018.192.149.251z"
+            transform="translate(-509.396 -223.952)"
+          />
+          <Path
+            id="prefix__Path_27732"
+            d="M473.989 228.544c-.006.034-.013.067-.017.1a3.367 3.367 0 00.057.789 2.775 2.775 0 00-.04-.89z"
+            transform="translate(-473.366 -223.504)"
+          />
+          <Path
+            id="prefix__Path_27733"
+            d="M476.366 219.066a4.254 4.254 0 01-.492.735l.474-.326a3.269 3.269 0 01.018-.409z"
+            transform="translate(-474.552 -217.605)"
+          />
+        </G>
+        <Path
+          id="prefix__Path_27734"
+          d="M465.432 186.921s-1.77-7.914-1.207-9.183a20.935 20.935 0 01-1.529-3.882 7.413 7.413 0 00-1.127-3.509c-.8-1.269-1.69-7.167 3.138-8.586s8.529-2.688 9.093-3.658 8.851-.373 11.1 3.36 3.7 2.986 3.7 2.986 3.46 2.165 3.46 4.106-1.046 2.912 0 3.36.241 8.511-4.345 8.735l-.4 4.255s-12.308-15.605-21.883 2.016z"
+          fill="#febb2c"
+          transform="translate(14382.747 13885.753)"
+        />
+        <Path
+          id="prefix__Path_27735"
+          d="M473.76 172.554s-1.064 6.234.88 8.325z"
+          opacity={0.1}
+          transform="translate(14374.945 13876.503)"
+        />
+        <Path
+          id="prefix__Path_27736"
+          d="M483.891 168.767s-2.714 6.674-2.054 7.958z"
+          opacity={0.1}
+          transform="translate(14369.803 13878.858)"
+        />
+        <Path
+          id="prefix__Path_27737"
+          d="M491.7 163.134s-1.834 8.692-.953 9.388z"
+          opacity={0.1}
+          transform="translate(14364.345 13882.365)"
+        />
+        <Path
+          id="prefix__Path_27738"
+          d="M499.417 169.349s-2.274 5.574-1.357 6.344z"
+          opacity={0.1}
+          transform="translate(14359.776 13878.497)"
+        />
+        <Path
+          id="prefix__Path_27739"
+          d="M509.746 171.1s-2.677 4.547-2.127 5.354z"
+          opacity={0.1}
+          transform="translate(14353.738 13877.409)"
+        />
+        <Path
+          id="prefix__Path_27740"
+          d="M524.063 182.848s-2.86.77-2.274 1.687z"
+          opacity={0.1}
+          transform="translate(14344.923 13870.097)"
+        />
+        <Path
+          id="prefix__Path_27741"
+          d="M531.585 195.375s-2.567 1.247-2.09 1.907z"
+          opacity={0.1}
+          transform="translate(14340.114 13862.3)"
+        />
+        <Path
+          id="prefix__Path_27742"
+          d="M469.646 207.061s16.4-6.66 23.5 2.912c-.003-.001-8.621-7.328-23.5-2.912z"
+          opacity={0.1}
+          transform="translate(14377.325 13856.431)"
+        />
+        <Path
+          id="prefix__Path_27743"
+          d="M298.991 248.243l2.285-2.311 6.46 6.385-2.285 2.312-5.941-5.872z"
+          fill="#53526b"
+          transform="translate(14542.056 13869.972)"
+        />
+        <Path
+          id="prefix__Path_27744"
+          d="M414.267 316.454s10 .851 19.307 11.326l-3.879 3.924z"
+          fill="#dfe6f5"
+          transform="translate(14411.791 13786.944)"
+        />
+        <Path
+          id="prefix__Path_27745"
+          d="M471.286 358.743s-9.611-3.5-10.556-4.341-6.5 4.037.278 10.663c0 0 8.288 2.361 10.505 0s-.227-6.322-.227-6.322z"
+          fill="#fdc2cc"
+          transform="translate(14384.765 13763.385)"
+        />
+      </G>
+    </Svg>
+  )
+}
+
+export default React.memo(EmptyFood)
--- a/App/src/assets/images/SVG/imageComponents/EmptyOrder.js
+++ b/App/src/assets/images/SVG/imageComponents/EmptyOrder.js
@ -0,0 +1,88 @@
+import * as React from 'react'
+import Svg, { Defs, G, Path, Circle } from 'react-native-svg'
+/* SVGR has dropped some elements not supported by react-native-svg: style */
+
+function EmptyOrder(props) {
+  return (
+    <Svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={165.999}
+      height={162.035}
+      viewBox="0 0 165.999 162.035"
+      {...props}>
+      <Defs></Defs>
+      <G id="prefix__undraw_No_data_re_kwbl" transform="translate(-.001 -.004)">
+        <Path
+          id="prefix__Path_27777"
+          fill="#f2f2f2"
+          d="M410.677 191.327h-44.73a3.849 3.849 0 00-3.845 3.845v99.412l-.513.156-10.973 3.36a2.052 2.052 0 01-2.561-1.361l-32.638-106.614a2.051 2.051 0 011.361-2.561l16.909-5.178 49.02-15 16.909-5.178a2.048 2.048 0 012.561 1.358l8.343 27.252z"
+          transform="translate(-305.292 -154.883)"
+        />
+        <Path
+          id="prefix__Path_27778"
+          d="M391.327 169.845L381.271 137a4.356 4.356 0 00-5.442-2.891l-23.773 7.277-49.018 15.007-23.773 7.279a4.361 4.361 0 00-2.891 5.442l34.367 112.248a4.364 4.364 0 004.168 3.084 4.305 4.305 0 001.274-.192l16.3-4.988.513-.159v-.536l-.513.156-16.448 5.037a3.849 3.849 0 01-4.8-2.55l-34.369-112.251a3.839 3.839 0 012.55-4.8l23.773-7.279 49.018-15 23.773-7.279a3.841 3.841 0 014.8 2.55l10.009 32.7.159.513h.533z"
+          fill="#3f3d56"
+          transform="translate(-276.182 -133.913)"
+        />
+        <Path
+          id="prefix__Path_27779"
+          d="M382.585 177a2.311 2.311 0 01-2.207-1.632l-3.3-10.784a2.306 2.306 0 011.531-2.881L423.7 147.9a2.309 2.309 0 012.881 1.53l3.3 10.784a2.309 2.309 0 01-1.53 2.881l-45.1 13.806a2.3 2.3 0 01-.666.099z"
+          fill="#febb2c"
+          transform="translate(-351.139 -144.235)"
+        />
+        <Circle
+          id="prefix__Ellipse_323"
+          cx={5.126}
+          cy={5.126}
+          r={5.126}
+          fill="#febb2c"
+          transform="translate(43.614 1.273)"
+        />
+        <Circle
+          id="prefix__Ellipse_324"
+          cx={3.246}
+          cy={3.246}
+          r={3.246}
+          fill="#FFF"
+          transform="translate(45.494 3.153)"
+        />
+        <Path
+          id="prefix__Path_27780"
+          fill="#e6e6e6"
+          d="M621.132 402.252H534.5a2.181 2.181 0 01-2.179-2.179V296.266a2.181 2.181 0 012.179-2.179h86.635a2.181 2.181 0 012.179 2.179v103.808a2.181 2.181 0 01-2.182 2.178z"
+          transform="translate(-466.665 -253.029)"
+        />
+        <Path
+          id="prefix__Path_27781"
+          d="M554.13 274.087h-53.954a4.364 4.364 0 00-4.357 4.357V382.97l.513-.156v-104.37a3.849 3.849 0 013.845-3.845h54.113zm47.034 0H500.176a4.364 4.364 0 00-4.357 4.357v117.393a4.364 4.364 0 004.357 4.357h100.988a4.363 4.363 0 004.357-4.357V278.444a4.363 4.363 0 00-4.357-4.357zm3.845 121.75a3.849 3.849 0 01-3.845 3.845H500.176a3.849 3.849 0 01-3.845-3.845V278.444a3.849 3.849 0 013.845-3.845h100.988a3.849 3.849 0 013.845 3.845z"
+          fill="#3f3d56"
+          transform="translate(-439.521 -238.155)"
+        />
+        <Path
+          id="prefix__Path_27782"
+          d="M658.287 271.979h-47.162a2.309 2.309 0 01-2.307-2.307v-11.278a2.31 2.31 0 012.307-2.307h47.162a2.31 2.31 0 012.307 2.307v11.278a2.309 2.309 0 01-2.307 2.307z"
+          fill="#febb2c"
+          transform="translate(-523.557 -224.769)"
+        />
+        <Circle
+          id="prefix__Ellipse_325"
+          cx={5.126}
+          cy={5.126}
+          r={5.126}
+          fill="#febb2c"
+          transform="translate(106.023 21.834)"
+        />
+        <Circle
+          id="prefix__Ellipse_326"
+          cx={3.122}
+          cy={3.122}
+          r={3.122}
+          fill="#FFF"
+          transform="translate(108.026 23.838)"
+        />
+      </G>
+    </Svg>
+  )
+}
+
+export default React.memo(EmptyOrder)
--- a/App/src/assets/images/cashIcon.png
+++ b/App/src/assets/images/cashIcon.png
--- a/App/src/assets/images/defaultNotification.png
+++ b/App/src/assets/images/defaultNotification.png
--- a/App/src/assets/images/facebook.png
+++ b/App/src/assets/images/facebook.png
--- a/App/src/assets/images/foodPlaceholder.jpeg
+++ b/App/src/assets/images/foodPlaceholder.jpeg
--- a/App/src/assets/images/food_placeholder.png
+++ b/App/src/assets/images/food_placeholder.png
--- a/App/src/assets/images/food_placeholder1.png
+++ b/App/src/assets/images/food_placeholder1.png
--- a/App/src/assets/images/google.png
+++ b/App/src/assets/images/google.png
--- a/App/src/assets/images/home.png
+++ b/App/src/assets/images/home.png
--- a/App/src/assets/images/imagePlaceholder.png
+++ b/App/src/assets/images/imagePlaceholder.png
--- a/App/src/assets/images/location.png
+++ b/App/src/assets/images/location.png
--- a/App/src/assets/images/login_reg_food.jpg
+++ b/App/src/assets/images/login_reg_food.jpg
--- a/App/src/assets/images/markerEnatega.png
+++ b/App/src/assets/images/markerEnatega.png
--- a/App/src/assets/images/masterIcon.png
+++ b/App/src/assets/images/masterIcon.png
--- a/App/src/assets/images/notificationDefault.png
+++ b/App/src/assets/images/notificationDefault.png
--- a/App/src/assets/images/paypal.png
+++ b/App/src/assets/images/paypal.png
--- a/App/src/assets/images/placeholder.png
+++ b/App/src/assets/images/placeholder.png
--- a/App/src/assets/images/rider.png
+++ b/App/src/assets/images/rider.png
--- a/App/src/assets/images/searchLocation.png
+++ b/App/src/assets/images/searchLocation.png
--- a/App/src/assets/images/stripe.png
+++ b/App/src/assets/images/stripe.png
--- a/App/src/assets/images/visaIcon.png
+++ b/App/src/assets/images/visaIcon.png
--- a/App/src/components/CartItem/CartItem.js
+++ b/App/src/components/CartItem/CartItem.js
@ -0,0 +1,88 @@
+import { useTheme } from '@react-navigation/native'
+import PropTypes from 'prop-types'
+import React, { useContext } from 'react'
+import { TouchableOpacity, View } from 'react-native'
+import ConfigurationContext from '../../context/Configuration'
+import { alignment } from '../../utils/alignment'
+import { ICONS_NAME } from '../../utils/constant'
+import { scale } from '../../utils/scaling'
+import { CustomIcon } from '../CustomIcon'
+import EnategaImage from '../EnategaImage/EnategaImage'
+import TextDefault from '../Text/TextDefault/TextDefault'
+import useStyle from './styles'
+
+const cartItem = props => {
+  const styles = useStyle()
+  const { colors } = useTheme()
+  const configuration = useContext(ConfigurationContext)
+
+  return (
+    <View style={styles.itemContainer}>
+      <View style={{ width: '25%' }}>
+        <EnategaImage
+          imgStyle={styles.imgResponsive}
+          imgSource={{ uri: props.image }}
+          spinnerProps={{ style: styles.loadingView }}
+        />
+      </View>
+      <View style={styles.textContainer}>
+        <TextDefault numberOfLines={2} style={alignment.MBxSmall} medium H5>
+          {props.dealName}
+        </TextDefault>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between'
+          }}>
+          <View style={{ flexGrow: 1 }}>
+            <TextDefault
+              textColor={colors.tagColor}
+              H4
+              bolder
+              style={alignment.MRxSmall}>
+              {configuration.currency_symbol}
+              {parseFloat(props.dealPrice).toFixed(2)}
+            </TextDefault>
+          </View>
+          <View style={styles.actionContainer}>
+            <TouchableOpacity
+              activeOpacity={0.7}
+              style={styles.actionContainerBtns}
+              onPress={props.removeQuantity}>
+              <CustomIcon
+                name={ICONS_NAME.Minus}
+                size={scale(14)}
+                color={colors.placeHolderColor}
+              />
+            </TouchableOpacity>
+            <View style={styles.actionContainerView}>
+              <TextDefault style={[alignment.PLsmall, alignment.PRsmall]}>
+                {props.quantity}
+              </TextDefault>
+            </View>
+            <TouchableOpacity
+              activeOpacity={0.7}
+              style={[styles.actionContainerBtns, styles.tagbtn]}
+              onPress={props.addQuantity}>
+              <CustomIcon
+                name={ICONS_NAME.Plus}
+                size={scale(14)}
+                color={colors.white}
+              />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+}
+cartItem.propTypes = {
+  removeQuantity: PropTypes.func,
+  quantity: PropTypes.number,
+  addQuantity: PropTypes.func,
+  dealName: PropTypes.string,
+  dealPrice: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  image: PropTypes.string
+}
+export default cartItem
--- a/App/src/components/CartItem/styles.js
+++ b/App/src/components/CartItem/styles.js
@ -0,0 +1,78 @@
+import { useTheme } from '@react-navigation/native'
+import { Dimensions, StyleSheet } from 'react-native'
+import { alignment } from '../../utils/alignment'
+import { moderateScale, scale, verticalScale } from '../../utils/scaling'
+const { width } = Dimensions.get('window')
+
+const useStyle = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    itemContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      width: '100%',
+      ...alignment.MBmedium,
+      backgroundColor: colors.cardContainer,
+      elevation: 5,
+      padding: 10,
+      shadowColor: colors.placeHolderColor,
+      shadowOffset: {
+        width: verticalScale(2),
+        height: verticalScale(1)
+      },
+      borderRadius: 20,
+      height: width * 0.28,
+      shadowOpacity: 0.3,
+      shadowRadius: verticalScale(10),
+      ...alignment.PLsmall,
+      ...alignment.PRsmall
+    },
+    imgResponsive: {
+      width: moderateScale(75),
+      height: moderateScale(75),
+      borderRadius: moderateScale(20)
+    },
+    loadingView: {
+      backgroundColor: colors.background,
+      width: '100%',
+      height: '100%'
+    },
+    textContainer: {
+      flex: 1,
+      height: '100%',
+      justifyContent: 'space-evenly',
+      ...alignment.MLsmall
+    },
+    actionContainer: {
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      alignItems: 'center'
+    },
+    actionContainerBtns: {
+      width: scale(24),
+      aspectRatio: 1,
+      backgroundColor: colors.lightBackground,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: scale(8),
+      elevation: 3,
+      shadowColor: colors.shadowColor,
+      shadowOffset: {
+        width: 0,
+        height: verticalScale(1)
+      },
+      shadowOpacity: 0.5,
+      shadowRadius: verticalScale(1)
+    },
+    tagbtn: {
+      backgroundColor: colors.iconColorPrimary
+    },
+    actionContainerView: {
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  })
+}
+export default useStyle
--- a/App/src/components/CustomIcon/index.js
+++ b/App/src/components/CustomIcon/index.js
@ -0,0 +1,8 @@
+import { createIconSetFromIcoMoon } from '@expo/vector-icons'
+import icoMoonConfig from './selection.json'
+
+export const CustomIcon = createIconSetFromIcoMoon(
+  icoMoonConfig,
+  'icomoon',
+  'icomoon.ttf'
+)
--- a/App/src/components/CustomIcon/selection.json
+++ b/App/src/components/CustomIcon/selection.json
--- a/App/src/components/CustomizeComponents/CartComponent/CartComponent.js
+++ b/App/src/components/CustomizeComponents/CartComponent/CartComponent.js
@ -0,0 +1,81 @@
+import { useTheme } from '@react-navigation/native'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { TouchableOpacity, View } from 'react-native'
+import { ICONS_NAME } from '../../../utils/constant'
+import { scale } from '../../../utils/scaling'
+import { CustomIcon } from '../../CustomIcon'
+import { FlashMessage } from '../../FlashMessage/FlashMessage'
+import TextDefault from '../../Text/TextDefault/TextDefault'
+import useStyle from './styles'
+
+function CartComponent(props) {
+  const { colors } = useTheme()
+  const styles = useStyle()
+  const [quantity, setQuantity] = useState(1)
+
+  function onAdd() {
+    if (props.stock > quantity) setQuantity(quantity + 1)
+    else {
+      FlashMessage({
+        message: 'No more items in stock'
+      })
+    }
+  }
+  function onRemove() {
+    if (quantity === 1) return
+    setQuantity(quantity - 1)
+  }
+
+  return (
+    <View style={styles.mainContainer}>
+      <View style={styles.subContainer}>
+        <TouchableOpacity
+          activeOpacity={0.7}
+          onPress={onRemove}
+          style={styles.icon}>
+          <CustomIcon
+            name={ICONS_NAME.Minus}
+            size={scale(18)}
+            color={colors.placeHolderColor}
+          />
+        </TouchableOpacity>
+        <TextDefault H5 bold center>
+          {quantity}
+        </TextDefault>
+        <TouchableOpacity
+          activeOpacity={0.7}
+          onPress={onAdd}
+          style={styles.icon}>
+          <CustomIcon
+            name={ICONS_NAME.Plus}
+            size={scale(18)}
+            color={colors.placeHolderColor}
+          />
+        </TouchableOpacity>
+        <TouchableOpacity
+          activeOpacity={0.7}
+          onPress={props.onPress.bind(this, quantity)}
+          style={
+            !props.disabled
+              ? styles.btnContainer
+              : {
+                ...styles.btnContainer,
+                backgroundColor: colors.buttonBackgroundBlue
+              }
+          }>
+          <TextDefault textColor={colors.buttonText} H5 bold center>
+            Add To Cart
+          </TextDefault>
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+}
+CartComponent.propTypes = {
+  stock: PropTypes.number.isRequired,
+  onPress: PropTypes.func,
+  disabled: PropTypes.bool
+}
+
+export default CartComponent
--- a/App/src/components/CustomizeComponents/CartComponent/styles.js
+++ b/App/src/components/CustomizeComponents/CartComponent/styles.js
@ -0,0 +1,55 @@
+import { useTheme } from '@react-navigation/native'
+import { Dimensions, StyleSheet } from 'react-native'
+import { alignment } from '../../../utils/alignment'
+import { moderateScale, scale, verticalScale } from '../../../utils/scaling'
+const { height } = Dimensions.get('window')
+
+const useStyle = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    flex: {
+      flex: 1
+    },
+    mainContainer: {
+      width: '100%',
+      height: height * 0.08,
+      backgroundColor: 'transparent',
+      justifyContent: 'center',
+      alignItems: 'center',
+      ...alignment.MBlarge
+    },
+    subContainer: {
+      width: '90%',
+      height: '70%',
+      alignItems: 'center',
+      justifyContent: 'space-around',
+      flexDirection: 'row'
+    },
+    icon: {
+      width: '10%',
+      height: '90%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: colors.white,
+      borderRadius: scale(12),
+      elevation: 3,
+      shadowColor: colors.shadowColor,
+      shadowOffset: {
+        width: 0,
+        height: verticalScale(1)
+      },
+      shadowOpacity: 0.5,
+      shadowRadius: verticalScale(1)
+    },
+    btnContainer: {
+      width: '50%',
+      height: '100%',
+      borderRadius: moderateScale(12),
+      backgroundColor: colors.horizontalLine,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  })
+}
+export default useStyle
--- a/App/src/components/CustomizeComponents/CheckComponent/CheckComponent.js
+++ b/App/src/components/CustomizeComponents/CheckComponent/CheckComponent.js
@ -0,0 +1,67 @@
+import { useTheme } from '@react-navigation/native'
+import PropTypes from 'prop-types'
+import React, { useContext, useState } from 'react'
+import { TouchableOpacity, View } from 'react-native'
+import ConfigurationContext from '../../../context/Configuration'
+import { alignment } from '../../../utils/alignment'
+import CheckboxBtn from '../../FdCheckbox/CheckboxBtn'
+import TextDefault from '../../Text/TextDefault/TextDefault'
+import useStyle from './styles'
+
+function CheckComponent(props) {
+  const styles = useStyle()
+  const { colors } = useTheme()
+  const [options, setOptions] = useState(
+    props.options.map(option => ({ ...option, checked: false }))
+  )
+  const configuration = useContext(ConfigurationContext)
+
+  function onPress(option) {
+    const tempOptions = options
+    const index = tempOptions.findIndex(opt => opt._id === option._id)
+    tempOptions[index].checked = !tempOptions[index].checked
+    setOptions(tempOptions)
+    props.onPress(option)
+  }
+  return (
+    <View>
+      {options.map(option => (
+        <TouchableOpacity
+          activeOpacity={0.7}
+          onPress={onPress.bind(this, option)}
+          key={option._id}
+          style={styles.mainContainer}>
+          <View style={styles.leftContainer}>
+            <CheckboxBtn
+              onPress={onPress.bind(this, option)}
+              checked={option.checked}
+            />
+            <TextDefault
+              numberOfLines={1}
+              textColor={
+                option.checked ? colors.fontMainColor : colors.fontSecondColor
+              }
+              style={[alignment.MLsmall, alignment.PRsmall, alignment.MRlarge]}
+              H5>
+              {option.title}
+            </TextDefault>
+          </View>
+          <View style={styles.rightContainer}>
+            <TextDefault
+              textColor={
+                option.checked ? colors.fontMainColor : colors.fontSecondColor
+              }
+              H5
+              medium>{`${configuration.currency_symbol} ${option.price}`}</TextDefault>
+          </View>
+        </TouchableOpacity>
+      ))}
+    </View>
+  )
+}
+CheckComponent.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.object),
+  onPress: PropTypes.func
+}
+
+export default CheckComponent
--- a/App/src/components/CustomizeComponents/CheckComponent/styles.js
+++ b/App/src/components/CustomizeComponents/CheckComponent/styles.js
@ -0,0 +1,29 @@
+import { useTheme } from '@react-navigation/native'
+import { StyleSheet } from 'react-native'
+import { alignment } from '../../../utils/alignment'
+
+const useStyle = () => {
+  const { colors } = useTheme()
+  return StyleSheet.create({
+    flex: {
+      flex: 1
+    },
+    mainContainer: {
+      width: '100%',
+      flexDirection: 'row',
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: colors.horizontalLine,
+      ...alignment.PBsmall,
+      ...alignment.MBsmall
+    },
+    leftContainer: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    rightContainer: {
+      justifyContent: 'center'
+    }
+  })
+}
+export default useStyle
--- a/App/src/components/CustomizeComponents/HeadingComponent/HeadingComponent.js
+++ b/App/src/components/CustomizeComponents/HeadingComponent/HeadingComponent.js
@ -0,0 +1,46 @@
+import { useTheme } from '@react-navigation/native'
+import PropTypes from 'prop-types'
+import React, { useContext } from 'react'
+import { View } from 'react-native'
+import ConfigurationContext from '../../../context/Configuration'
+import TextDefault from '../../Text/TextDefault/TextDefault'
+import styles from './styles'
+
+function HeadingComponent(props) {
+  const configuration = useContext(ConfigurationContext)
+  const { colors } = useTheme()
+
+  return (
+    <>
+      <View style={styles.topContainer}>
+        <View style={styles.titleContainer}>
+          <TextDefault numberOfLines={1} H4 bold>
+            {props.title}
+          </TextDefault>
+        </View>
+        <View style={styles.priceContainer}>
+          <TextDefault
+            textColor={colors.tagColor}
+            H4
+            bolder>{`${configuration.currency_symbol} ${props.price}`}</TextDefault>
+        </View>
+      </View>
+      <View style={styles.descContainer}>
+        <TextDefault
+          numberOfLines={3}
+          textColor={colors.fontSecondColor}
+          H5
+          medium>
+          {props.desc}
+        </TextDefault>
+      </View>
+    </>
+  )
+}
+
+HeadingComponent.propTypes = {
+  title: PropTypes.string,
+  price: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  desc: PropTypes.string
+}
+export default HeadingComponent
--- a/App/src/components/CustomizeComponents/HeadingComponent/styles.js
+++ b/App/src/components/CustomizeComponents/HeadingComponent/styles.js
@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native'
+import { alignment } from '../../../utils/alignment'
+const styles = StyleSheet.create({
+  topContainer: {
+    width: '100%',
+    flexDirection: 'row',
+    ...alignment.PTsmall,
+    ...alignment.PBxSmall
+  },
+  titleContainer: {
+    width: '70%',
+    ...alignment.PRxSmall,
+    justifyContent: 'center'
+  },
+  priceContainer: {
+    width: '30%',
+    justifyContent: 'center',
+    alignItems: 'flex-end'
+  },
+  descContainer: {
+    width: '100%',
+    ...alignment.MBsmall
+  }
+})
+export default styles
--- a/App/src/components/CustomizeComponents/ImageHeader/ImageHeader.js
+++ b/App/src/components/CustomizeComponents/ImageHeader/ImageHeader.js
@ -0,0 +1,18 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Image } from 'react-native'
+import { styles } from './styles'
+
+function ImageHeader(props) {
+  return (
+    <Image
+      style={styles.backgroundImage}
+      resizeMode="cover"
+      source={{ uri: props.image }}
+      defaultSource={require('../../../assets/images/food_placeholder.png')}></Image>
+  )
+}
+ImageHeader.propTypes = {
+  image: PropTypes.string
+}
+export default ImageHeader
--- a/App/src/components/CustomizeComponents/ImageHeader/styles.js
+++ b/App/src/components/CustomizeComponents/ImageHeader/styles.js
@ -0,0 +1,14 @@
+import { Dimensions, StyleSheet } from 'react-native'
+import { moderateScale } from '../../../utils/scaling'
+const { height } = Dimensions.get('window')
+
+export const styles = StyleSheet.create({
+  backgroundImage: {
+    width: '100%',
+    borderTopLeftRadius: moderateScale(30),
+    borderTopRightRadius: moderateScale(30),
+    // borderTopEndRadius:moderateScale(20),
+    // borderTopStartRadius:moderateScale(20),
+    height: height * 0.22
+  }
+})
--- a/App/src/components/CustomizeComponents/RadioComponent/RadioComponent.js
+++ b/App/src/components/CustomizeComponents/RadioComponent/RadioComponent.js
@ -0,0 +1,70 @@
+import { useTheme } from '@react-navigation/native'
+import PropTypes from 'prop-types'
+import React, { useContext, useState } from 'react'
+import { TouchableOpacity, View } from 'react-native'
+import ConfigurationContext from '../../../context/Configuration'
+import { alignment } from '../../../utils/alignment'
+import RadioButton from '../../FdRadioBtn/RadioBtn'
+import TextDefault from '../../Text/TextDefault/TextDefault'
+import useStyle from './styles'
+
+function RadioComponent(props) {
+  const styles = useStyle()
+  const { colors } = useTheme()
+  const [options] = useState(props.options)
+  const [selected, setSelected] = useState(props.selected || null)
+  const configuration = useContext(ConfigurationContext)
+
+  function onPress(option) {
+    setSelected(option)
+    props.onPress(option)
+  }
+  return (
+    <>
+      {options.map(option => {
+        const isChecked = selected._id === option._id
+        return (
+          <TouchableOpacity
+            activeOpacity={0.7}
+            onPress={onPress.bind(this, option)}
+            key={option._id}
+            style={styles.mainContainer}>
+            <View style={styles.leftContainer}>
+              <RadioButton
+                size={13}
+                outerColor={colors.radioOuterColor}
+                innerColor={colors.radioColor}
+                animation={'bounceIn'}
+                isSelected={isChecked}
+                onPress={onPress.bind(this, option)}
+              />
+              <TextDefault
+                textColor={
+                  isChecked ? colors.fontMainColor : colors.fontSecondColor
+                }
+                style={alignment.MLsmall}
+                H5>
+                {option.title}
+              </TextDefault>
+            </View>
+            <View style={styles.rightContainer}>
+              <TextDefault
+                textColor={
+                  isChecked ? colors.fontMainColor : colors.fontSecondColor
+                }
+                H5
+                medium>{`${configuration.currency_symbol} ${option.price}`}</TextDefault>
+            </View>
+          </TouchableOpacity>
+        )
+      })}
+    </>
+  )
+}
+
+RadioComponent.propTypes = {
+  selected: PropTypes.any,
+  options: PropTypes.arrayOf(PropTypes.object),
+  onPress: PropTypes.func
+}
+export default RadioComponent
--- a/App/src/components/CustomizeComponents/RadioComponent/styles.js
+++ b/App/src/components/CustomizeComponents/RadioComponent/styles.js
@ -0,0 +1,27 @@
+import { useTheme } from '@react-navigation/native'
+import { StyleSheet } from 'react-native'
+import { alignment } from '../../../utils/alignment'
+
+const useStyle = () => {
+  const { colors } = useTheme()
+  return StyleSheet.create({
+    mainContainer: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: colors.horizontalLine,
+      ...alignment.PBsmall,
+      ...alignment.MBsmall
+    },
+    leftContainer: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    rightContainer: {
+      justifyContent: 'center'
+    }
+  })
+}
+export default useStyle
--- a/App/src/components/CustomizeComponents/TitleComponent/TitleComponent.js
+++ b/App/src/components/CustomizeComponents/TitleComponent/TitleComponent.js
@ -0,0 +1,46 @@
+import { useTheme } from '@react-navigation/native'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { View } from 'react-native'
+import { alignment } from '../../../utils/alignment'
+import TextDefault from '../../Text/TextDefault/TextDefault'
+import styles from './styles'
+
+function TitleComponent(props) {
+  const { colors } = useTheme()
+
+  return (
+    <View style={styles.mainContainer}>
+      <View style={styles.leftContainer}>
+        <TextDefault numberOfLines={1} H5 bold>
+          {props.title}
+        </TextDefault>
+        <TextDefault
+          numberOfLines={1}
+          textColor={colors.fontSecondColor}
+          H5
+          bold>
+          {props.subTitle}
+        </TextDefault>
+      </View>
+      <TextDefault
+        style={[alignment.PLxSmall, alignment.PRxSmall]}
+        textColor={
+          props.error === true ? colors.errorColor : colors.placeHolderColor
+        }
+        H5
+        medium
+        center>
+        ({props.status})
+      </TextDefault>
+    </View>
+  )
+}
+TitleComponent.propTypes = {
+  title: PropTypes.string.isRequired,
+  subTitle: PropTypes.string,
+  error: PropTypes.bool,
+  status: PropTypes.string
+}
+
+export default TitleComponent
--- a/App/src/components/CustomizeComponents/TitleComponent/styles.js
+++ b/App/src/components/CustomizeComponents/TitleComponent/styles.js
@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native'
+import { alignment } from '../../../utils/alignment'
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    ...alignment.MBmedium,
+    ...alignment.MTsmall
+  },
+  leftContainer: {
+    // width: '70%'
+  },
+  rightContainer: {
+    width: '30%'
+  }
+})
+export default styles
--- a/App/src/components/CustomizeComponents/index.js
+++ b/App/src/components/CustomizeComponents/index.js
@ -0,0 +1,15 @@
+import CartComponent from './CartComponent/CartComponent'
+import CheckComponent from './CheckComponent/CheckComponent'
+import HeadingComponent from './HeadingComponent/HeadingComponent'
+import ImageHeader from './ImageHeader/ImageHeader'
+import RadioComponent from './RadioComponent/RadioComponent'
+import TitleComponent from './TitleComponent/TitleComponent'
+
+export {
+  CartComponent,
+  CheckComponent,
+  HeadingComponent,
+  ImageHeader,
+  RadioComponent,
+  TitleComponent
+}
--- a/App/src/components/Drawer/Profile/DrawerProfile.js
+++ b/App/src/components/Drawer/Profile/DrawerProfile.js
@ -0,0 +1,58 @@
+import { useNavigation } from '@react-navigation/native'
+import React, { useContext } from 'react'
+import { TouchableOpacity, View } from 'react-native'
+import UserContext from '../../../context/User'
+import { alignment } from '../../../utils/alignment'
+import { NAVIGATION_SCREEN } from '../../../utils/constant'
+import { TextDefault } from '../../Text'
+import useStyle from './styles'
+
+function DrawerProfile() {
+  const styles = useStyle()
+  const navigation = useNavigation()
+  const { isLoggedIn, loadingProfile, profile } = useContext(UserContext)
+
+  if (loadingProfile) return <TextDefault>Loading...</TextDefault>
+  return (
+    <View style={styles.mainContainer}>
+      {!isLoggedIn && (
+        <View style={styles.logInContainer}>
+          <TouchableOpacity
+            onPress={() => {
+              navigation.navigate(NAVIGATION_SCREEN.CreateAccount)
+            }}>
+            <TextDefault textColor={styles.whiteFont.color} bold H4>
+              Login/Create Account
+            </TextDefault>
+          </TouchableOpacity>
+        </View>
+      )}
+      <View style={styles.loggedInContainer}>
+        {isLoggedIn && profile && (
+          <>
+            <View style={styles.imgContainer}>
+              <TextDefault bolder H1>
+                {profile.name.substr(0, 1).toUpperCase()}
+              </TextDefault>
+            </View>
+            <TextDefault
+              textColor={styles.whiteFont.color}
+              medium
+              H5
+              style={alignment.PLxSmall}>
+              Welcome
+            </TextDefault>
+            <TextDefault
+              textColor={styles.whiteFont.color}
+              bold
+              H4
+              style={alignment.PLxSmall}>
+              {profile.name}
+            </TextDefault>
+          </>
+        )}
+      </View>
+    </View>
+  )
+}
+export default DrawerProfile
--- a/App/src/components/Drawer/Profile/styles.js
+++ b/App/src/components/Drawer/Profile/styles.js
@ -0,0 +1,55 @@
+import { useTheme } from '@react-navigation/native'
+import { StyleSheet } from 'react-native'
+import { alignment } from '../../../utils/alignment'
+import { scale } from '../../../utils/scaling'
+
+const useStyle = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    mainContainer: {
+      flex: 1,
+      backgroundColor: colors.headerBackground
+    },
+    logInContainer: {
+      width: '100%',
+      height: '100%',
+      justifyContent: 'flex-end',
+      ...alignment.PBlarge,
+      ...alignment.PLmedium
+    },
+    whiteFont: {
+      color: colors.fontWhite
+    },
+    loggedInContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      ...alignment.Plarge
+    },
+    imgContainer: {
+      width: scale(70),
+      height: scale(70),
+      borderRadius: scale(15),
+      borderStyle: 'dashed',
+      borderColor: colors.cardContainer,
+      borderWidth: 2,
+      justifyContent: 'center',
+      alignItems: 'center',
+      overflow: 'hidden',
+      backgroundColor: 'transparent',
+      padding: 2,
+      ...alignment.MBsmall
+    },
+    imgResponsive: {
+      width: '100%',
+      height: '100%',
+      borderRadius: scale(15)
+    },
+    loadingView: {
+      backgroundColor: 'transparent',
+      width: '100%',
+      height: '100%'
+    }
+  })
+}
+export default useStyle
--- a/App/src/components/Drawer/index.js
+++ b/App/src/components/Drawer/index.js
@ -0,0 +1,3 @@
+import DrawerProfile from './Profile/DrawerProfile'
+
+export { DrawerProfile }
--- a/App/src/components/EnategaImage/EnategaImage.js
+++ b/App/src/components/EnategaImage/EnategaImage.js
@ -0,0 +1,59 @@
+/* eslint-disable react/prop-types */
+import React, { useState } from 'react'
+import { Image, Platform, View } from 'react-native'
+import { isObject } from 'validate.js'
+import Spinner from '../Spinner/Spinner'
+import useStyle from './styles'
+
+const iosPlacholder = require('../../assets/images/food_placeholder.png')
+const PLACEHOLDER = require('../../assets/images/imagePlaceholder.png')
+
+function EnategaImage({
+  imgSource,
+  imgStyle = null,
+  resizeMode = 'cover',
+  spinnerProps
+}) {
+  const styles = useStyle()
+  const [startImgLoading, setStartImgLoading] = useState(false)
+
+  const imageUrl = isObject(imgSource)
+    ? { ...imgSource, cache: 'force-cache' }
+    : imgSource || PLACEHOLDER
+  const style = imgStyle || styles.imgContainer
+
+  const androidImage = (
+    <Image
+      source={imageUrl}
+      style={[styles.imgResponsive, style]}
+      onLoadStart={() => setStartImgLoading(true)}
+      onLoadEnd={() => setStartImgLoading(false)}
+      resizeMode={imgSource ? resizeMode : 'contain'}
+    />
+  )
+
+  const iosImage = (
+    <Image
+      source={imageUrl}
+      defaultSource={iosPlacholder}
+      style={[styles.imgResponsive, style]}
+      resizeMode={imgSource ? resizeMode : 'contain'}
+    />
+  )
+
+  return (
+    <View style={style}>
+      {startImgLoading && (
+        <Spinner
+          animating={startImgLoading}
+          size="small"
+          style={style}
+          {...spinnerProps}
+        />
+      )}
+      {Platform.OS === 'ios' ? iosImage : androidImage}
+    </View>
+  )
+}
+
+export default React.memo(EnategaImage)
--- a/App/src/components/EnategaImage/styles.js
+++ b/App/src/components/EnategaImage/styles.js
@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native'
+
+const useStyle = () => {
+  return StyleSheet.create({
+    imgContainer: {
+      width: 50,
+      height: 50,
+      borderRadius: 8,
+      overflow: 'hidden'
+    },
+    imgResponsive: {
+      flex: 1,
+      backgroundColor: 'white',
+      height: undefined,
+      width: undefined
+    }
+  })
+}
+
+export default useStyle
--- a/App/src/components/FdCheckbox/CheckboxBtn.js
+++ b/App/src/components/FdCheckbox/CheckboxBtn.js
@ -0,0 +1,31 @@
+import { AntDesign } from '@expo/vector-icons'
+import { useTheme } from '@react-navigation/native'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { TouchableOpacity } from 'react-native'
+import { scale } from '../../utils/scaling'
+import useStyle from './styles'
+
+function CheckboxBtn(props) {
+  const styles = useStyle()
+  const { colors } = useTheme()
+  return (
+    <TouchableOpacity
+      onPress={props.onPress}
+      style={[
+        styles.mainContainer,
+        props.checked
+          ? { backgroundColor: colors.selected }
+          : { backgroundColor: colors.white }
+      ]}>
+      {props.checked ? (
+        <AntDesign name="check" size={scale(15)} color={colors.fontWhite} />
+      ) : null}
+    </TouchableOpacity>
+  )
+}
+CheckboxBtn.propTypes = {
+  onPress: PropTypes.func,
+  checked: PropTypes.bool
+}
+export default CheckboxBtn
--- a/App/src/components/FdCheckbox/styles.js
+++ b/App/src/components/FdCheckbox/styles.js
@ -0,0 +1,19 @@
+import { scale } from '../../utils/scaling'
+import { StyleSheet } from 'react-native'
+import { useTheme } from '@react-navigation/native'
+
+const useStyle = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    mainContainer: {
+      borderColor: colors.horizontalLine,
+      borderWidth: StyleSheet.hairlineWidth,
+      width: scale(20),
+      height: scale(20),
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  })
+}
+export default useStyle
--- a/App/src/components/FdRadioBtn/RadioBtn.js
+++ b/App/src/components/FdRadioBtn/RadioBtn.js
@ -0,0 +1,50 @@
+import { useTheme } from '@react-navigation/native'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { TouchableOpacity, View } from 'react-native'
+import styles from './styles'
+
+const DEFAULT_SIZE_MULTIPLIER = 0.7
+
+function RadioButton(props) {
+  const { colors } = useTheme()
+
+  const {
+    size = 16,
+    innerColor = colors.radioColor,
+    outerColor = colors.radioOuterColor,
+    isSelected = false,
+    onPress = () => null
+  } = props
+
+  const outerStyle = {
+    borderColor: isSelected ? outerColor : colors.fontSecondColor,
+    width: size + size * DEFAULT_SIZE_MULTIPLIER,
+    height: size + size * DEFAULT_SIZE_MULTIPLIER,
+    borderRadius: (size + size * DEFAULT_SIZE_MULTIPLIER) / 2,
+    borderWidth: isSelected ? size / 2 : 1
+  }
+
+  const innerStyle = {
+    width: size / 2,
+    height: size / 2,
+    borderRadius: size / 2,
+    backgroundColor: innerColor
+  }
+
+  return (
+    <TouchableOpacity style={[styles.radio, outerStyle]} onPress={onPress}>
+      {isSelected ? <View style={innerStyle} {...props} /> : null}
+    </TouchableOpacity>
+  )
+}
+
+RadioButton.propTypes = {
+  size: PropTypes.number,
+  innerColor: PropTypes.string,
+  outerColor: PropTypes.string,
+  isSelected: PropTypes.bool,
+  onPress: PropTypes.func
+}
+
+export default RadioButton
--- a/App/src/components/FdRadioBtn/styles.js
+++ b/App/src/components/FdRadioBtn/styles.js
@ -0,0 +1,7 @@
+export default {
+  radio: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center'
+  }
+}
--- a/App/src/components/FdSocialBtn/FdEmailBtn/FdEmailBtn.js
+++ b/App/src/components/FdSocialBtn/FdEmailBtn/FdEmailBtn.js
@ -0,0 +1,44 @@
+import { useTheme } from '@react-navigation/native'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { TouchableOpacity } from 'react-native'
+import Spinner from '../../../components/Spinner/Spinner'
+import TextDefault from '../../../components/Text/TextDefault/TextDefault'
+import { COLORS } from '../../../Theme'
+import { alignment } from '../../../utils/alignment'
+import { ICONS_NAME } from '../../../utils/constant'
+import { scale } from '../../../utils/scaling'
+import { CustomIcon } from '../../CustomIcon'
+import useStyle from './styles'
+
+const FdEmailBtn = props => {
+  const styles = useStyle()
+  const { colors } = useTheme()
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      style={styles.mainContainer}
+      onPress={props.onPress}>
+      {props.loadingIcon ? (
+        <Spinner backColor="rgba(0,0,0,0.1)" spinnerColor={colors.tagColor} />
+      ) : (
+        <>
+          <CustomIcon
+            style={styles.marginLeft5}
+            name={ICONS_NAME.Logo}
+            color={COLORS.primary}
+            size={scale(19)}
+          />
+          <TextDefault style={alignment.MLxSmall} bold>
+            Signup using Email
+          </TextDefault>
+        </>
+      )}
+    </TouchableOpacity>
+  )
+}
+FdEmailBtn.propTypes = {
+  onPress: PropTypes.func,
+  loadingIcon: PropTypes.bool
+}
+export default FdEmailBtn
--- a/App/src/components/FdSocialBtn/FdEmailBtn/styles.js
+++ b/App/src/components/FdSocialBtn/FdEmailBtn/styles.js
@ -0,0 +1,26 @@
+import { useTheme } from '@react-navigation/native'
+import { Dimensions, StyleSheet } from 'react-native'
+import { alignment } from '../../../utils/alignment'
+import { moderateScale } from '../../../utils/scaling'
+const { height } = Dimensions.get('window')
+
+const useStyle = () => {
+  const { colors } = useTheme()
+  return StyleSheet.create({
+    mainContainer: {
+      width: '100%',
+      height: height * 0.07,
+      backgroundColor: colors.buttonBackgroundLight,
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderRadius: moderateScale(20)
+    },
+    marginLeft5: {
+      ...alignment.Pmedium
+    },
+    marginLeft10: {
+      ...alignment.MLmedium
+    }
+  })
+}
+export default useStyle
--- a/App/src/components/FdSocialBtn/FdFacebookBtn/FdFacebookBtn.js
+++ b/App/src/components/FdSocialBtn/FdFacebookBtn/FdFacebookBtn.js
@ -0,0 +1,44 @@
+import { FontAwesome } from '@expo/vector-icons'
+import { useTheme } from '@react-navigation/native'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { TouchableOpacity } from 'react-native'
+import Spinner from '../../../components/Spinner/Spinner'
+import TextDefault from '../../../components/Text/TextDefault/TextDefault'
+import { alignment } from '../../../utils/alignment'
+import { scale } from '../../../utils/scaling'
+import useStyle from './styles'
+
+const FdFacebookBtn = props => {
+  const styles = useStyle()
+  const { colors } = useTheme()
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      style={styles.mainContainer}
+      onPressIn={props.onPressIn}
+      onPress={props.onPress}>
+      {props.loadingIcon ? (
+        <Spinner backColor="rgba(0,0,0,0.1)" spinnerColor={colors.tagColor} />
+      ) : (
+        <>
+          <FontAwesome
+            style={styles.marginLeft5}
+            name="facebook"
+            size={scale(19)}
+            color="#3b5998"
+          />
+          <TextDefault style={alignment.MLsmall} bold>
+            Signup with Facebook
+          </TextDefault>
+        </>
+      )}
+    </TouchableOpacity>
+  )
+}
+FdFacebookBtn.propTypes = {
+  onPress: PropTypes.func,
+  loadingIcon: PropTypes.bool,
+  onPressIn: PropTypes.func
+}
+export default FdFacebookBtn
--- a/App/src/components/FdSocialBtn/FdFacebookBtn/styles.js
+++ b/App/src/components/FdSocialBtn/FdFacebookBtn/styles.js
@ -0,0 +1,27 @@
+import { useTheme } from '@react-navigation/native'
+import { Dimensions, StyleSheet } from 'react-native'
+import { alignment } from '../../../utils/alignment'
+import { moderateScale } from '../../../utils/scaling'
+const { height } = Dimensions.get('window')
+
+const useStyle = () => {
+  const { colors } = useTheme()
+  return StyleSheet.create({
+    mainContainer: {
+      width: '100%',
+      height: height * 0.07,
+      backgroundColor: colors.buttonBackgroundLight,
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderRadius: moderateScale(20)
+    },
+    marginLeft5: {
+      ...alignment.Pmedium
+    },
+    marginLeft10: {
+      ...alignment.MLmedium
+    }
+  })
+}
+
+export default useStyle
--- a/App/src/components/FdSocialBtn/FdGoogleBtn/FdGoogleBtn.js
+++ b/App/src/components/FdSocialBtn/FdGoogleBtn/FdGoogleBtn.js
@ -0,0 +1,50 @@
+import { useTheme } from '@react-navigation/native'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Image, TouchableOpacity } from 'react-native'
+import Spinner from '../../../components/Spinner/Spinner'
+import TextDefault from '../../../components/Text/TextDefault/TextDefault'
+import { alignment } from '../../../utils/alignment'
+import { moderateScale } from '../../../utils/scaling'
+import useStyle from './styles'
+
+const FdGoogleBtn = props => {
+  const styles = useStyle()
+  const { colors } = useTheme()
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      style={styles.mainContainer}
+      onPressIn={props.onPressIn}
+      onPress={props.onPress}>
+      {props.loadingIcon ? (
+        <Spinner backColor="rgba(0,0,0,0.1)" spinnerColor={colors.tagColor} />
+      ) : (
+        <>
+          <Image
+            source={{
+              uri: 'https://pngimg.com/uploads/google/google_PNG19635.png'
+            }}
+            style={[
+              {
+                width: 25,
+                height: 25,
+                marginLeft: moderateScale(10)
+              }
+            ]}
+          />
+          <TextDefault style={alignment.MLlarge} bold>
+            Signup with Google
+          </TextDefault>
+        </>
+      )}
+    </TouchableOpacity>
+  )
+}
+
+FdGoogleBtn.propTypes = {
+  onPress: PropTypes.func,
+  loadingIcon: PropTypes.bool,
+  onPressIn: PropTypes.func
+}
+export default FdGoogleBtn
--- a/App/src/components/FdSocialBtn/FdGoogleBtn/styles.js
+++ b/App/src/components/FdSocialBtn/FdGoogleBtn/styles.js
@ -0,0 +1,27 @@
+import { useTheme } from '@react-navigation/native'
+import { Dimensions, StyleSheet } from 'react-native'
+import { alignment } from '../../../utils/alignment'
+import { moderateScale } from '../../../utils/scaling'
+const { height } = Dimensions.get('window')
+
+const useStyle = () => {
+  const { colors } = useTheme()
+  return StyleSheet.create({
+    mainContainer: {
+      width: '100%',
+      height: height * 0.07,
+      backgroundColor: colors.buttonBackgroundLight,
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderRadius: moderateScale(20)
+    },
+    marginLeft5: {
+      ...alignment.Pmedium
+    },
+    marginLeft10: {
+      ...alignment.MLmedium
+    }
+  })
+}
+
+export default useStyle
--- a/App/src/components/FdSocialBtn/index.js
+++ b/App/src/components/FdSocialBtn/index.js
@ -0,0 +1,5 @@
+import FdEmailBtn from './FdEmailBtn/FdEmailBtn'
+import FdFacebookBtn from './FdFacebookBtn/FdFacebookBtn'
+import FdGoogleBtn from './FdGoogleBtn/FdGoogleBtn'
+
+export { FdEmailBtn, FdFacebookBtn, FdGoogleBtn }
--- a/App/src/components/FdSwitch/SwitchBtn.js
+++ b/App/src/components/FdSwitch/SwitchBtn.js
@ -0,0 +1,38 @@
+import { useTheme } from '@react-navigation/native'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Switch, TouchableOpacity } from 'react-native'
+import useStyle from './styles'
+
+function SwitchBtn(props) {
+  const styles = useStyle()
+  const { colors } = useTheme()
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={props.onPress}
+      style={[
+        styles.mainContainer,
+        props.checked
+          ? { backgroundColor: colors.selected }
+          : { backgroundColor: colors.fontWhite }
+      ]}>
+      <Switch
+        trackColor={{
+          false: colors.iconColor,
+          true: colors.selected
+        }}
+        thumbColor={colors.fontWhite}
+        ios_backgroundColor="#3e3e3e"
+        onValueChange={props.onPress}
+        value={props.isEnabled}
+      />
+    </TouchableOpacity>
+  )
+}
+SwitchBtn.propTypes = {
+  onPress: PropTypes.func,
+  checked: PropTypes.bool,
+  isEnabled: PropTypes.bool
+}
+export default SwitchBtn
--- a/App/src/components/FdSwitch/styles.js
+++ b/App/src/components/FdSwitch/styles.js
@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native'
+import { scale } from '../../utils/scaling'
+
+const useStyle = () => {
+  return StyleSheet.create({
+    mainContainer: {
+      width: scale(20),
+      height: scale(20),
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  })
+}
+export default useStyle
--- a/Show More
+++ b/Show More