diff --git a/App.js b/App.js
index a3ce205..3bbcf04 100644
--- a/App.js
+++ b/App.js
@@ -1,58 +1,7 @@
-import { StyleSheet, Text, View } from "react-native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { NavigationContainer } from "@react-navigation/native";
-import Icon from "react-native-vector-icons/Ionicons";
-import MainScreen from "./screens/MainScreen";
-
+import Navigator from "./navigation/Navigator";
 const Tab = createBottomTabNavigator();
 
 export default function App() {
-  return (
-    <NavigationContainer>
-      <Tab.Navigator
-        screenOptions={{
-          headerStyle: {
-            backgroundColor: "#A587DD",
-          },
-        }}
-      >
-        <Tab.Screen
-          name="Home"
-          component={MainScreen}
-          options={{
-            tabBarIcon: ({ color, size }) => (
-              <Icon name="md-person-circle-outline" color={color} size={size} />
-            ),
-          }}
-        />
-        <Tab.Screen
-          name="Gift"
-          component={MainScreen}
-          options={{
-            tabBarIcon: ({ color, size }) => (
-              <Icon name="gift-outline" color={color} size={size} />
-            ),
-          }}
-        />
-        <Tab.Screen
-          name="Budget"
-          component={MainScreen}
-          options={{
-            tabBarIcon: ({ color, size }) => (
-              <Icon name="logo-usd" color={color} size={size} />
-            ),
-          }}
-        />
-        <Tab.Screen
-          name="Calendar"
-          component={MainScreen}
-          options={{
-            tabBarIcon: ({ color, size }) => (
-              <Icon name="calendar-outline" color={color} size={size} />
-            ),
-          }}
-        />
-      </Tab.Navigator>
-    </NavigationContainer>
-  );
+  return <Navigator />;
 }
diff --git a/navigation/Navigator.js b/navigation/Navigator.js
new file mode 100644
index 0000000..80f2783
--- /dev/null
+++ b/navigation/Navigator.js
@@ -0,0 +1,60 @@
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { NavigationContainer } from "@react-navigation/native";
+import Icon from "react-native-vector-icons/Ionicons";
+
+import MainScreen from "../screens/MainScreen";
+
+const Tab = createBottomTabNavigator();
+
+function Navigator() {
+  return (
+    <NavigationContainer>
+      <Tab.Navigator
+        screenOptions={{
+          headerStyle: {
+            backgroundColor: "#A587DD",
+          },
+        }}
+      >
+        <Tab.Screen
+          name="Home"
+          component={MainScreen}
+          options={{
+            tabBarIcon: ({ color, size }) => (
+              <Icon name="md-person-circle-outline" color={color} size={size} />
+            ),
+          }}
+        />
+        <Tab.Screen
+          name="Gift"
+          component={MainScreen}
+          options={{
+            tabBarIcon: ({ color, size }) => (
+              <Icon name="gift-outline" color={color} size={size} />
+            ),
+          }}
+        />
+        <Tab.Screen
+          name="Budget"
+          component={MainScreen}
+          options={{
+            tabBarIcon: ({ color, size }) => (
+              <Icon name="logo-usd" color={color} size={size} />
+            ),
+          }}
+        />
+        <Tab.Screen
+          name="Calendar"
+          component={MainScreen}
+          options={{
+            tabBarIcon: ({ color, size }) => (
+              <Icon name="calendar-outline" color={color} size={size} />
+            ),
+          }}
+        />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+}
+
+export default Navigator;