diff --git a/App.js b/App.js
index 8959043..4d7e38b 100644
--- a/App.js
+++ b/App.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { NativeRouter, Route } from 'react-router-native';
+import React, { useState } from 'react';
+import { NativeRouter, Route, useHistory } from 'react-router-native';
 import HomeScreen from './screens/Home';
 import Login from './screens/signIn';
 import SignUp from './screens/SignUp';
@@ -7,19 +7,81 @@ import SearchScreen from './screens/Search';
 import FavoritesScreen from './screens/Favorites';
 import OrdersScreen from './screens/Orders';
 import ProfileScreen from './screens/Profile';
-// import BottomTabBar from './components/BottomTabBar';
+import WelcomePage from './screens/Welcome';
+import BottomTabBar from './components/BottomTabBar';
+
+const App = () => {
+  const [clientData, setClientData] = useState();
 
-export default function App() {
   return (
     <NativeRouter>
-      <Route exact path='/' component={Login} />
-      <Route exact path='/signup' component={SignUp} />
-      <Route exact path='/home' component={HomeScreen} />
-      <Route exact path='/search' component={SearchScreen} />
-      <Route exact path='/favorites' component={FavoritesScreen} />
-      <Route exact path='/orders' component={OrdersScreen} />
-      <Route exact path='/profile' component={ProfileScreen} />
-      {/* <BottomTabBar /> */}
+      <Route
+        exact
+        path='/'
+        render={() => <WelcomePage setClientData={setClientData} />}
+      />
+      <Route
+        exact
+        path='/login'
+        render={() => <Login setClientData={setClientData} />}
+      />
+      <Route
+        exact
+        path='/signup'
+        render={() => <SignUp setClientData={setClientData} />}
+      />
+      <Route
+        exact
+        path='/home'
+        render={() => (
+          <>
+            <HomeScreen clientData={clientData} />
+            <BottomTabBar tab={0} />
+          </>
+        )}
+      />
+      <Route
+        exact
+        path='/search'
+        render={() => (
+          <>
+            <SearchScreen clientData={clientData} />
+            <BottomTabBar tab={1} />
+          </>
+        )}
+      />
+      <Route
+        exact
+        path='/favorites'
+        render={() => (
+          <>
+            <FavoritesScreen clientData={clientData} />
+            <BottomTabBar tab={2} />
+          </>
+        )}
+      />
+      <Route
+        exact
+        path='/orders'
+        render={() => (
+          <>
+            <OrdersScreen clientData={clientData} />
+            <BottomTabBar tab={3} />
+          </>
+        )}
+      />
+      <Route
+        exact
+        path='/profile'
+        render={() => (
+          <>
+            <ProfileScreen clientData={clientData} />
+            <BottomTabBar tab={4} />
+          </>
+        )}
+      />
     </NativeRouter>
   );
-}
+};
+
+export default App;
diff --git a/Utils/fetchData.js b/Utils/fetchData.js
index 1940688..d1c6b6d 100644
--- a/Utils/fetchData.js
+++ b/Utils/fetchData.js
@@ -10,7 +10,19 @@ const fetchData = async (route, body, method) => {
       or
       product api: https://food-app-delivery.herokuapp.com/api/v1/
       */
-      return axios.get(api.concat(route)).then(({ data }) => data).catch(() => 'Error get data');
+      return axios
+        .get(
+          api.concat(route),
+          body
+            ? {
+              params: {
+                token: body,
+              },
+            }
+            : {}
+        )
+        .then(({ data }) => data)
+        .catch(() => 'Error get data');
 
     default:
       return axios[method](api.concat(route), body).then(({ data }) => data);
diff --git a/Utils/secureStorage.js b/Utils/secureStorage.js
index f1303d7..9773e0c 100644
--- a/Utils/secureStorage.js
+++ b/Utils/secureStorage.js
@@ -6,6 +6,9 @@ export default {
   },
   getStoreSecure: async () => {
     const data = await SecureStore.getItemAsync('token');
-    return data;
+    return JSON.parse(data);
+  },
+  deleteStoreSecure: async () => {
+    await SecureStore.deleteItemAsync('token');
   },
 };
diff --git a/components/BottomTabBar/index.js b/components/BottomTabBar/index.js
index 8b1be65..98d9fa1 100644
--- a/components/BottomTabBar/index.js
+++ b/components/BottomTabBar/index.js
@@ -2,9 +2,7 @@
 
 import React, { useState, useRef } from 'react';
 import { useHistory } from 'react-router-native';
-import {
-  SafeAreaView, TouchableOpacity, View,
-} from 'react-native';
+import { SafeAreaView, TouchableOpacity, View } from 'react-native';
 import { Transitioning, Transition } from 'react-native-reanimated';
 import Profile from './icons/Profile';
 import Search from './icons/Search';
@@ -13,14 +11,14 @@ import Favorites from './icons/Favorites';
 import Orders from './icons/Orders';
 import styles from './style';
 
-const TabBar = () => {
-  const [active, setActive] = useState(0);
+const TabBar = ({ tab }) => {
+  const [active, setActive] = useState(tab);
   const history = useHistory();
   const transition = <Transition.Change interpolation='easeOut' />;
   const ref = useRef();
 
   const tabs = [
-    { icon: <Home active={active === 0} />, route: '/' },
+    { icon: <Home active={active === 0} />, route: '/home' },
     { icon: <Search active={active === 1} />, route: '/search' },
     { icon: <Favorites active={active === 2} />, route: '/favorites' },
     { icon: <Orders active={active === 3} />, route: '/orders' },
@@ -34,10 +32,13 @@ const TabBar = () => {
         // https://docs.expo.io/versions/latest/sdk/reanimated/
         ref={ref}
         style={styles.centerAll}
-        transition={transition}>
+        transition={transition}
+      >
         <View style={styles.tabs}>
           {tabs.map(({ icon, route }, index) => (
-            <TouchableOpacity key={index} style={styles.tab}
+            <TouchableOpacity
+              key={index}
+              style={styles.tab}
               onPress={() => {
                 setActive(index);
                 history.push(route);
diff --git a/package-lock.json b/package-lock.json
index d53f13e..b357e33 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4529,19 +4529,6 @@
         }
       }
     },
-    "history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-      "requires": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
-      }
-    },
     "hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
diff --git a/screens/Home/index.js b/screens/Home/index.js
index a0d700b..89d5e00 100644
--- a/screens/Home/index.js
+++ b/screens/Home/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Text, View } from 'react-native';
 import styles from './style';
 
-const Home = () => (
+const Home = ({ clientData }) => (
     <View style={styles.container}>
         <Text>Home</Text>
     </View>
diff --git a/screens/Profile/index.js b/screens/Profile/index.js
index 955c340..8781974 100644
--- a/screens/Profile/index.js
+++ b/screens/Profile/index.js
@@ -2,10 +2,10 @@ import React from 'react';
 import { Text, View } from 'react-native';
 import styles from './style';
 
-const Profile = () => (
-    <View style={styles.container}>
-        <Text>Profile</Text>
-    </View>
+const Profile = ({ clientData }) => (
+  <View style={styles.container}>
+    <Text>{clientData.name}</Text>
+  </View>
 );
 
 export default Profile;
diff --git a/screens/SignUp/index.js b/screens/SignUp/index.js
index 62f03eb..3fda394 100644
--- a/screens/SignUp/index.js
+++ b/screens/SignUp/index.js
@@ -1,6 +1,13 @@
 /* eslint-disable camelcase */
 import React, { useState } from 'react';
-import { Text, Image, ImageBackground, View, ToastAndroid } from 'react-native';
+import {
+  Text,
+  Image,
+  ImageBackground,
+  ActivityIndicator,
+  View,
+  ToastAndroid,
+} from 'react-native';
 import { useHistory } from 'react-router-native';
 
 import TextInput from '../../components/TextInput';
@@ -13,25 +20,30 @@ import logo from '../../assets/logo.png';
 import Picker from '../../components/Picker';
 import styles from './style';
 
-const SignUpPage = () => {
+const SignUpPage = ({ setClientData }) => {
   const [name, setName] = useState();
   const [mobile_number, setMobileNumber] = useState();
   const [password, setPassword] = useState();
   const [location, setLocation] = useState();
   const [address, setAddress] = useState();
+  const [loading, setLoading] = useState(0);
+
   const history = useHistory();
 
   const signUp = async () => {
     // api post request
     try {
-      const { role } = await API(
+      setLoading(true);
+      const { CLIENT_TOKEN, client_Data } = await API(
         'auth/client/signup',
         { name, password, mobile_number, location, address },
         'post'
       );
-      storage.storeSecure(role);
+      setClientData(client_Data);
+      storage.storeSecure(CLIENT_TOKEN);
       history.push('home');
     } catch (err) {
+      setLoading(false);
       ToastAndroid.show(
         '  حصل خطأ أثناء إنشاء الحساب يرجى التأكد من جميع بياناتك و المحاولة مرة أخرى',
         ToastAndroid.LONG,
@@ -46,54 +58,67 @@ const SignUpPage = () => {
         <Image source={logo} style={styles.logo} />
         <Text style={styles.headerText}> إنشاء حساب جديد</Text>
       </ImageBackground>
-      <TextInput
-        // user name
-        value={name}
-        onChangeText={(value) => setName(value)}
-        placeholder='الإسم'
-        icon
-      />
-      <TextInput
-        // mobile number
-        value={mobile_number}
-        onChangeText={(value) => setMobileNumber(value)}
-        placeholder='رقم الهاتف'
-        maxLength={10}
-        keyboardType={'phone-pad'}
-        icon={{ icon: 'mobile' }}
-      />
-      <TextInput
-        // password
-        value={password}
-        onChangeText={(value) => setPassword(value)}
-        placeholder='كلمة المرور'
-        icon={{ icon: 'key' }}
-      />
-      <Picker
-        // location
-        icon placeholder='المنطقة' onSelect={(value) => setLocation(value)} />
+      {loading ? (
+        <ActivityIndicator
+          size='large'
+          color='#F04732'
+          style={styles.headerImg}
+        />
+      ) : (
+        <>
+          <TextInput
+            // user name
+            value={name}
+            onChangeText={(value) => setName(value)}
+            placeholder='الإسم'
+            icon
+          />
+          <TextInput
+            // mobile number
+            value={mobile_number}
+            onChangeText={(value) => setMobileNumber(value)}
+            placeholder='رقم الهاتف'
+            maxLength={10}
+            keyboardType={'phone-pad'}
+            icon={{ icon: 'mobile' }}
+          />
+          <TextInput
+            // password
+            value={password}
+            onChangeText={(value) => setPassword(value)}
+            placeholder='كلمة المرور'
+            icon={{ icon: 'key' }}
+          />
+          <Picker
+            // location
+            icon
+            placeholder='المنطقة'
+            onSelect={(value) => setLocation(value)}
+          />
 
-      <TextInput
-        // address
-        value={address}
-        onChangeText={(value) => setAddress(value)}
-        placeholder='العنوان'
-        icon={{ icon: 'home' }}
-      />
+          <TextInput
+            // address
+            value={address}
+            onChangeText={(value) => setAddress(value)}
+            placeholder='العنوان'
+            icon={{ icon: 'home' }}
+          />
 
-      <View style={styles.containerBtn}>
-        <Button text='إنشاء ' onPress={() => signUp()} solid />
-      </View>
-      <View style={styles.lineParagraph}>
-        <View style={styles.line} />
-        <Text> أو </Text>
-        <View style={styles.line} />
-      </View>
-      <Button
-        text='تسجيل الدخول'
-        style={styles.bottomButton}
-        onPress={() => history.push('/')}
-      />
+          <View style={styles.containerBtn}>
+            <Button text='إنشاء ' onPress={() => signUp()} solid />
+          </View>
+          <View style={styles.lineParagraph}>
+            <View style={styles.line} />
+            <Text> أو </Text>
+            <View style={styles.line} />
+          </View>
+          <Button
+            text='تسجيل الدخول'
+            style={styles.bottomButton}
+            onPress={() => history.push('/login')}
+          />
+        </>
+      )}
     </ImageBackground>
   );
 };
diff --git a/screens/Welcome/index.js b/screens/Welcome/index.js
new file mode 100644
index 0000000..db5d5d0
--- /dev/null
+++ b/screens/Welcome/index.js
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import { useHistory } from 'react-router-native';
+import { View, Text, Button } from 'react-native';
+import secureStorage from '../../Utils/secureStorage';
+import API from '../../Utils/fetchData';
+
+import styles from './style';
+
+secureStorage.deleteStoreSecure();
+const WelcomeScreen = ({ setClientData }) => {
+  const [clientToken, setClientToken] = useState();
+  const history = useHistory();
+
+  const getClientData = async (token) => {
+    setClientToken(token);
+    const client = await API('client/profile', token);
+    setClientData(client);
+    history.push('home');
+  };
+
+  useEffect(() => {
+    if (!clientToken) {
+      secureStorage.getStoreSecure().then((token) => {
+        if (token) getClientData(token);
+      });
+    }
+  });
+
+  return (
+    <View>
+      <Text>Welcome</Text>
+      <Button title='login' onPress={() => history.push('login')} />
+    </View>
+  );
+};
+
+export default WelcomeScreen;
diff --git a/screens/Welcome/style.js b/screens/Welcome/style.js
new file mode 100644
index 0000000..ebaf5c7
--- /dev/null
+++ b/screens/Welcome/style.js
@@ -0,0 +1,5 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({});
+
+export default styles;
diff --git a/screens/signIn/FacebookLogin.js b/screens/signIn/FacebookLogin.js
index 078b28d..d68b67b 100644
--- a/screens/signIn/FacebookLogin.js
+++ b/screens/signIn/FacebookLogin.js
@@ -10,7 +10,7 @@ import { APP_ID } from '../../Utils/Constants';
 
 import styles from './style';
 
-const FacebookLogin = () => {
+const FacebookLogin = ({ setClientData }) => {
   const history = useHistory();
 
   // facebook login
@@ -29,8 +29,14 @@ const FacebookLogin = () => {
           `https://graph.facebook.com/me?access_token=${token}&fields=id,name,email,picture.height(500)`
         );
         // api post request
-        const { role } = await API('auth/client/signin/facebook', data, 'post');
-        storage.storeSecure(role);
+        // eslint-disable-next-line camelcase
+        const { CLIENT_TOKEN, client_Data } = await API(
+          'auth/client/signin/facebook',
+          data,
+          'post'
+        );
+        setClientData(client_Data);
+        storage.storeSecure(CLIENT_TOKEN);
         history.push('home');
       } else throw new Error();
     } catch ({ message }) {
diff --git a/screens/signIn/index.js b/screens/signIn/index.js
index a753ee8..1c4a4a9 100644
--- a/screens/signIn/index.js
+++ b/screens/signIn/index.js
@@ -1,5 +1,12 @@
 import React, { useState } from 'react';
-import { Text, Image, ImageBackground, View, ToastAndroid } from 'react-native';
+import {
+  Text,
+  Image,
+  ImageBackground,
+  View,
+  ToastAndroid,
+  ActivityIndicator,
+} from 'react-native';
 import { useHistory } from 'react-router-native';
 
 import TextInput from '../../components/TextInput';
@@ -13,22 +20,27 @@ import logo from '../../assets/logo.png';
 
 import styles from './style';
 
-const LoginPage = () => {
+const LoginPage = ({ setClientData }) => {
   const [mobileNumber, setMobileNumber] = useState();
   const [password, setPassword] = useState();
+  const [loading, setLoading] = useState(0);
   const history = useHistory();
 
   const signIn = async () => {
     // api post request
     try {
-      const { role } = await API(
+      setLoading(true);
+      // eslint-disable-next-line camelcase
+      const { CLIENT_TOKEN, client_Data } = await API(
         'auth/client/signin',
         { mobileNumber, password },
         'post'
       );
-      storage.storeSecure(role);
+      setClientData(client_Data);
+      storage.storeSecure(CLIENT_TOKEN);
       history.push('home');
     } catch (err) {
+      setLoading(false);
       ToastAndroid.show(
         'خطا في اسم المستخدم وكلمة المرور !',
         ToastAndroid.LONG,
@@ -43,34 +55,44 @@ const LoginPage = () => {
         <Image source={logo} style={styles.logo} />
         <Text style={styles.headerText}> أهلاً بك من جديد</Text>
       </ImageBackground>
-      <TextInput
-        value={mobileNumber}
-        onChangeText={(value) => setMobileNumber(value)}
-        placeholder='رقم الهاتف'
-        maxLength={10}
-        keyboardType={'phone-pad'}
-        icon
-      />
-      <TextInput
-        value={password}
-        onChangeText={(value) => setPassword(value)}
-        placeholder='كلمة المرور'
-        icon={{ icon: 'key' }}
-      />
-      <View style={styles.containerBtn}>
-        <Button text='تسجيل الدخول ' onPress={() => signIn()} solid />
-      </View>
-      <View style={styles.lineParagraph}>
-        <View style={styles.line} />
-        <Text> أو </Text>
-        <View style={styles.line} />
-      </View>
-      <FacebookLogin />
-      <Button
-        text='حساب جديد'
-        style={styles.bottomButton}
-        onPress={() => history.push('/signup')}
-      />
+      {loading ? (
+        <ActivityIndicator
+          size='large'
+          color='#F04732'
+          style={styles.headerImg}
+        />
+      ) : (
+        <>
+          <TextInput
+            value={mobileNumber}
+            onChangeText={(value) => setMobileNumber(value)}
+            placeholder='رقم الهاتف'
+            maxLength={10}
+            keyboardType={'phone-pad'}
+            icon
+          />
+          <TextInput
+            value={password}
+            onChangeText={(value) => setPassword(value)}
+            placeholder='كلمة المرور'
+            icon={{ icon: 'key' }}
+          />
+          <View style={styles.containerBtn}>
+            <Button text='تسجيل الدخول ' onPress={() => signIn()} solid />
+          </View>
+          <View style={styles.lineParagraph}>
+            <View style={styles.line} />
+            <Text> أو </Text>
+            <View style={styles.line} />
+          </View>
+          <FacebookLogin setClientData={setClientData} />
+          <Button
+            text='حساب جديد'
+            style={styles.bottomButton}
+            onPress={() => history.push('/signup')}
+          />
+        </>
+      )}
     </ImageBackground>
   );
 };