diff --git a/App.js b/App.js
index 1f10af0ed414f606bbdd3def89266c6896573453..8d7fcbee3fe9e7e533537cc17f88b0e76f9af1c5 100644
--- a/App.js
+++ b/App.js
@@ -1,14 +1,14 @@
 import React, { useState, createContext, useContext, useEffect } from "react";
 import { NavigationContainer } from "@react-navigation/native";
-import { createStackNavigator } from "@react-navigation/stack";
 import { View, ActivityIndicator } from "react-native";
 import { onAuthStateChanged } from "firebase/auth";
 import { auth } from "./config/firebase";
 import Login from "./screens/auth/Login";
 import Signup from "./screens/auth/Signup";
 import ScreenNavigator from "./screens/ScreenNavigator";
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 const AuthenticatedUserContext = createContext({});
 
 const AuthenticatedUserProvider = ({ children }) => {
@@ -45,7 +45,11 @@ function RootNavigator() {
     );
   }
 
-  return <NavigationContainer>{user ? <ScreenNavigator /> : <AuthStack />}</NavigationContainer>;
+  return (
+    <NavigationContainer>
+      {user ? <ScreenNavigator /> : <AuthStack />}
+    </NavigationContainer>
+  );
 }
 
 export default function App() {
diff --git a/package-lock.json b/package-lock.json
index 1d28474665ab99604cdfe95c5ae23f77210dcce6..941fad147d1058a12b502bee1ca85a89cb21da9a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,10 +10,11 @@
       "dependencies": {
         "@expo/webpack-config": "^18.0.1",
         "@firebase/auth": "^1.5.1",
-        "@react-native-async-storage/async-storage": "1.17.11",
+        "@react-native-async-storage/async-storage": "^1.18.1",
         "@react-native-community/masked-view": "^0.1.11",
         "@react-navigation/bottom-tabs": "^6.5.11",
-        "@react-navigation/native": "^6.0.6",
+        "@react-navigation/native": "^6.1.9",
+        "@react-navigation/native-stack": "^6.9.17",
         "@react-navigation/stack": "^6.0.11",
         "dotenv": "^11.0.0",
         "expo": "^48.0.19",
@@ -4574,14 +4575,14 @@
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
     "node_modules/@react-native-async-storage/async-storage": {
-      "version": "1.17.11",
-      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.17.11.tgz",
-      "integrity": "sha512-bzs45n5HNcDq6mxXnSsOHysZWn1SbbebNxldBXCQs8dSvF8Aor9KCdpm+TpnnGweK3R6diqsT8lFhX77VX0NFw==",
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.18.1.tgz",
+      "integrity": "sha512-70aFW8fVCKl+oA1AKPFDpE6s4t9pulj2QeLX+MabEmzfT3urd/3cckv45WJvtocdoIH/oXA3Y+YcCRJCcNa8mA==",
       "dependencies": {
         "merge-options": "^3.0.4"
       },
       "peerDependencies": {
-        "react-native": "^0.0.0-0 || 0.60 - 0.71 || 1000.0.0"
+        "react-native": "^0.0.0-0 || 0.60 - 0.72 || 1000.0.0"
       }
     },
     "node_modules/@react-native-community/cli": {
@@ -5783,16 +5784,16 @@
       }
     },
     "node_modules/@react-navigation/core": {
-      "version": "6.4.9",
-      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.9.tgz",
-      "integrity": "sha512-G9GH7bP9x0qqupxZnkSftnkn4JoXancElTvFc8FVGfEvxnxP+gBo3wqcknyBi7M5Vad4qecsYjCOa9wqsftv9g==",
+      "version": "6.4.10",
+      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.10.tgz",
+      "integrity": "sha512-oYhqxETRHNHKsipm/BtGL0LI43Hs2VSFoWMbBdHK9OqgQPjTVUitslgLcPpo4zApCcmBWoOLX2qPxhsBda644A==",
       "dependencies": {
         "@react-navigation/routers": "^6.1.9",
         "escape-string-regexp": "^4.0.0",
         "nanoid": "^3.1.23",
         "query-string": "^7.1.3",
         "react-is": "^16.13.0",
-        "use-latest-callback": "^0.1.5"
+        "use-latest-callback": "^0.1.7"
       },
       "peerDependencies": {
         "react": "*"
@@ -5810,11 +5811,11 @@
       }
     },
     "node_modules/@react-navigation/native": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.7.tgz",
-      "integrity": "sha512-W6E3+AtTombMucCRo6q7vPmluq8hSjS+IxfazJ/SokOe7ChJX7eLvvralIsJkjFj3iWV1KgOSnHxa6hdiFasBw==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.9.tgz",
+      "integrity": "sha512-AMuJDpwXE7UlfyhIXaUCCynXmv69Kb8NzKgKJO7v0k0L+u6xUTbt6xvshmJ79vsvaFyaEH9Jg5FMzek5/S5qNw==",
       "dependencies": {
-        "@react-navigation/core": "^6.4.9",
+        "@react-navigation/core": "^6.4.10",
         "escape-string-regexp": "^4.0.0",
         "fast-deep-equal": "^3.1.3",
         "nanoid": "^3.1.23"
@@ -5824,6 +5825,22 @@
         "react-native": "*"
       }
     },
+    "node_modules/@react-navigation/native-stack": {
+      "version": "6.9.17",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.9.17.tgz",
+      "integrity": "sha512-X8p8aS7JptQq7uZZNFEvfEcPf6tlK4PyVwYDdryRbG98B4bh2wFQYMThxvqa+FGEN7USEuHdv2mF0GhFKfX0ew==",
+      "dependencies": {
+        "@react-navigation/elements": "^1.3.21",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 3.0.0",
+        "react-native-screens": ">= 3.0.0"
+      }
+    },
     "node_modules/@react-navigation/routers": {
       "version": "6.1.9",
       "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.9.tgz",
@@ -16709,9 +16726,9 @@
       }
     },
     "node_modules/use-latest-callback": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.6.tgz",
-      "integrity": "sha512-VO/P91A/PmKH9bcN9a7O3duSuxe6M14ZoYXgA6a8dab8doWNdhiIHzEkX/jFeTTRBsX0Ubk6nG4q2NIjNsj+bg==",
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.9.tgz",
+      "integrity": "sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw==",
       "peerDependencies": {
         "react": ">=16.8"
       }
diff --git a/package.json b/package.json
index e07ecde6c80c53a6ba677b434dab300b3eb9c70f..9c466d2e70bfe8b23ec51a210433a048446cb08a 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,11 @@
   "dependencies": {
     "@expo/webpack-config": "^18.0.1",
     "@firebase/auth": "^1.5.1",
-    "@react-native-async-storage/async-storage": "1.17.11",
+    "@react-native-async-storage/async-storage": "^1.18.1",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-navigation/bottom-tabs": "^6.5.11",
-    "@react-navigation/native": "^6.0.6",
+    "@react-navigation/native": "^6.1.9",
+    "@react-navigation/native-stack": "^6.9.17",
     "@react-navigation/stack": "^6.0.11",
     "dotenv": "^11.0.0",
     "expo": "^48.0.19",
diff --git a/screens/ScreenNavigator.js b/screens/ScreenNavigator.js
index 1fa4f9470881893ad57e8f599184f9945ca17930..19bba0ff59aa85a64d35b4cf42c95da1c22ae64e 100644
--- a/screens/ScreenNavigator.js
+++ b/screens/ScreenNavigator.js
@@ -1,9 +1,8 @@
-import React, { useState, useLayoutEffect } from "react";
+import React, { useState, useLayoutEffect, useEffect } from "react";
 import { auth, database } from "../config/firebase";
-import { collection, query, onSnapshot, where, and, addDoc } from "firebase/firestore";
+import { collection, query, onSnapshot, where, and, addDoc, getDocs } from "firebase/firestore";
 import { createStackNavigator } from "@react-navigation/stack";
 import Chat from "./tabs/Chat";
-import Home from "./ScreenNavigator";
 import ChatUid from "./tabs/ChatUid";
 import CatownerHome from "./tabs/CatownerHome";
 import ChatList from "./tabs/ChatList";
@@ -11,11 +10,12 @@ import Catsitter from "./tabs/Catsitter";
 import CatsitterHome from "./cat-sitter/CatsitterHome";
 import CatsitterSetting from "./cat-sitter/CatsitterSetting";
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { View, Text } from "react-native";
 
 const Stack = createStackNavigator();
 const Tab = createBottomTabNavigator();
 
-const Home = () => {
+const ScreenNavigator = () => {
     //Get current profile
     const [userProfile, setUserProfile] = useState({});
     useLayoutEffect(() => {
@@ -27,15 +27,13 @@ const Home = () => {
         };
         const collectionRef = collection(database, "profiles");
         const q = query(collectionRef, and(where("userId", "==", id)),);
-
-        const unsubscribe = onSnapshot(q, (querySnapshot) => {
-            if (querySnapshot.docs.length > 0) {
-                setUserProfile(querySnapshot.docs[0].data())
+        getDocs(q).then((data) => {
+            if (data.docs.length > 0) {
+                setUserProfile(data.docs[0].data())
             } else {
                 createUserProfile(auth?.currentUser?.uid)
             }
         });
-        return unsubscribe;
     }, []);
 
     const createUserProfile = (userId) => {
@@ -45,29 +43,31 @@ const Home = () => {
             role: "cat-owner"
         });
     }
-
-    if (userProfile.role == "cat-owner") {
-        return (
-            <Stack.Navigator defaultScreenOptions={Home}>
-                <Stack.Screen name="Home" component={Home} />
-                <Stack.Screen name="CatownerHome" component={CatownerHome} />
-                <Stack.Screen name="Catsitter" component={Catsitter} />
-                <Stack.Screen name="Chat" component={ChatList} />
-                <Stack.Screen name="ChatDetail" component={Chat} />
-                <Stack.Screen name="ChatWithUser" component={ChatUid} />
-            </Stack.Navigator>
-        )
-    }
+    if (userProfile.role == "cat-owner") return (
+        <Stack.Navigator defaultScreenOptions={CatownerHome}>
+            <Stack.Screen name="CatownerHome" component={CatownerHome} />
+            <Stack.Screen name="Catsitter" component={Catsitter} />
+            <Stack.Screen name="Chat" component={ChatList} />
+            <Stack.Screen name="ChatDetail" component={Chat} />
+            <Stack.Screen name="ChatWithUser" component={ChatUid} />
+        </Stack.Navigator>
+    )
+    if (userProfile.role == "cat-sitter") return (<Tab.Navigator>
+        {/* Cat sitter stack */}
+        <Tab.Screen name="CatsitterHome" component={CatsitterHome} options={{
+            tabBarLabel: "Home",
+        }} />
+        <Tab.Screen name="CatsitterSetting" component={CatsitterSetting} options={{
+            tabBarLabel: "Setting",
+        }} />
+    </Tab.Navigator>
+    )
     return (
-        <Tab.Navigator defaultScreenOptions={CatsitterHome}>
-            {/* Cat sitter stack */}
-            <Tab.Screen name="CatsitterHome" component={CatsitterHome} />
-            <Tab.Screen name="CatsitterSetting" component={CatsitterSetting} />
-        </Tab.Navigator>
+        <View>
+            <Text>Loading screen</Text>
+        </View>
     )
 
-
-
 }
 
-export default Home
\ No newline at end of file
+export default ScreenNavigator
\ No newline at end of file