diff --git a/App.js b/App.js
index 2ebec8b..1012493 100644
--- a/App.js
+++ b/App.js
@@ -1,23 +1,15 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
 import { QueryClientProvider, QueryClient } from 'react-query';
+import { NavigationContainer } from '@react-navigation/native';
+import Root from './src/Navigations/Root';
 
 const queryClient = new QueryClient();
 
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      {/* <Router>
-      </Router> */}
+      <NavigationContainer>
+        <Root />
+      </NavigationContainer>
     </QueryClientProvider>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
diff --git a/src/Navigations/Root.js b/src/Navigations/Root.js
index e69de29..e85ffd7 100644
--- a/src/Navigations/Root.js
+++ b/src/Navigations/Root.js
@@ -0,0 +1,20 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import Stacks from './Stacks';
+import Tabs from './Tabs';
+
+const Stack = createNativeStackNavigator();
+
+const Root = () => {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}
+    >
+      <Stack.Screen name="Stacks" component={Stacks} />
+      <Stack.Screen name="Tabs" component={Tabs} />
+    </Stack.Navigator>
+  );
+};
+
+export default Root;
diff --git a/src/Navigations/Stack.js b/src/Navigations/Stack.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/Navigations/Stacks.js b/src/Navigations/Stacks.js
new file mode 100644
index 0000000..af2660d
--- /dev/null
+++ b/src/Navigations/Stacks.js
@@ -0,0 +1,17 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import { SignupPage, LoginPage, EditPage } from '../screen/Index';
+
+const Stack = createNativeStackNavigator();
+
+const Stacks = () => {
+  return (
+    <Stack.Navigator initialRouteName="로그인">
+      <Stack.Screen name="회원가입" component={SignupPage} />
+      <Stack.Screen name="로그인" component={LoginPage} />
+      <Stack.Screen name="수정 페이지" component={EditPage} />
+    </Stack.Navigator>
+  );
+};
+
+export default Stacks;
diff --git a/src/Navigations/Tab.js b/src/Navigations/Tab.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/Navigations/Tabs.js b/src/Navigations/Tabs.js
new file mode 100644
index 0000000..12b197b
--- /dev/null
+++ b/src/Navigations/Tabs.js
@@ -0,0 +1,44 @@
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { MyPage, MainPage } from '../screen/Index';
+import { Entypo } from '@expo/vector-icons';
+import { FontAwesome } from '@expo/vector-icons';
+
+const Tab = createBottomTabNavigator();
+
+const Tabs = () => {
+  return (
+    <Tab.Navigator>
+      <Tab.Screen
+        options={{
+          headerTitleAlign: 'center',
+          tabBarShowLabel: false,
+          tabBarIcon: ({ focused }) =>
+            focused ? (
+              <Entypo name="home" size={25} color="black" />
+            ) : (
+              <Entypo name="home" size={25} color="lightgrey" />
+            ),
+        }}
+        name="메인 페이지"
+        component={MainPage}
+      />
+
+      <Tab.Screen
+        options={{
+          headerTitleAlign: 'center',
+          tabBarShowLabel: false,
+          tabBarIcon: ({ focused }) =>
+            focused ? (
+              <FontAwesome name="list-ul" size={23} color="black" />
+            ) : (
+              <FontAwesome name="list-ul" size={23} color="lightgrey" />
+            ),
+        }}
+        name="마이 페이지"
+        component={MyPage}
+      />
+    </Tab.Navigator>
+  );
+};
+
+export default Tabs;
diff --git a/src/screen/EditPage.jsx b/src/screen/EditPage.jsx
index e69de29..c60a473 100644
--- a/src/screen/EditPage.jsx
+++ b/src/screen/EditPage.jsx
@@ -0,0 +1,15 @@
+import { View, Text, TouchableOpacity } from 'react-native';
+
+const EditPage = ({ navigation: { navigate } }) => {
+  return (
+    <View>
+      <TouchableOpacity
+        onPress={() => navigate('Tabs', { screen: '마이 페이지' })}
+      >
+        <Text>마이 페이지로</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default EditPage;
diff --git a/src/screen/Index.js b/src/screen/Index.js
index e69de29..f36952d 100644
--- a/src/screen/Index.js
+++ b/src/screen/Index.js
@@ -0,0 +1,7 @@
+import SignupPage from './SignupPage';
+import MyPage from './MyPage';
+import MainPage from './MainPage';
+import LoginPage from './LoginPage';
+import EditPage from './EditPage';
+
+export { SignupPage, MyPage, MainPage, LoginPage, EditPage };
diff --git a/src/screen/LoginPage.jsx b/src/screen/LoginPage.jsx
index e69de29..32a96db 100644
--- a/src/screen/LoginPage.jsx
+++ b/src/screen/LoginPage.jsx
@@ -0,0 +1,18 @@
+import { TouchableOpacity, View, Text } from 'react-native';
+
+const LoginPage = ({ navigation: { navigate } }) => {
+  return (
+    <View>
+      <TouchableOpacity
+        onPress={() => navigate('Tabs', { screen: '메인 페이지' })}
+      >
+        <Text>로그인</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => navigate('회원가입')}>
+        <Text>회원가입</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default LoginPage;
diff --git a/src/screen/MainPage.jsx b/src/screen/MainPage.jsx
index e69de29..a919076 100644
--- a/src/screen/MainPage.jsx
+++ b/src/screen/MainPage.jsx
@@ -0,0 +1,15 @@
+import { View, Text, TouchableOpacity } from 'react-native';
+
+const MainPage = ({ navigation: { navigate } }) => {
+  return (
+    <View>
+      <TouchableOpacity
+        onPress={() => navigate('Stacks', { screen: '로그인' })}
+      >
+        <Text>로그아웃</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default MainPage;
diff --git a/src/screen/MyPage.jsx b/src/screen/MyPage.jsx
index e69de29..a754974 100644
--- a/src/screen/MyPage.jsx
+++ b/src/screen/MyPage.jsx
@@ -0,0 +1,21 @@
+import { View, Text, TouchableOpacity } from 'react-native';
+
+const MyPage = ({ navigation: { navigate } }) => {
+  return (
+    <View>
+      <TouchableOpacity
+        onPress={() => navigate('Stacks', { screen: '수정 페이지' })}
+      >
+        <Text>수정 페이지로</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        onPress={() => navigate('Stacks', { screen: '로그인' })}
+      >
+        <Text>로그아웃</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default MyPage;
diff --git a/src/screen/SignupPage.jsx b/src/screen/SignupPage.jsx
index e69de29..c65055c 100644
--- a/src/screen/SignupPage.jsx
+++ b/src/screen/SignupPage.jsx
@@ -0,0 +1,18 @@
+import { View, Text, TouchableOpacity } from 'react-native';
+
+const SignupPage = ({ navigation: { navigate } }) => {
+  return (
+    <View>
+      <TouchableOpacity
+        onPress={() => navigate('Tabs', { screen: '메인 페이지' })}
+      >
+        <Text>회원가입</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => navigate('로그인')}>
+        <Text>로그인 페이지로</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default SignupPage;