diff --git a/src/navigation/AppRoutes.js b/src/navigation/AppRoutes.js
index 0b4f242..0329545 100644
--- a/src/navigation/AppRoutes.js
+++ b/src/navigation/AppRoutes.js
@@ -17,6 +17,13 @@ import DailyReportScreen from '../screens/daily-report-page/index'
 import ServiceScreen from '../screens/Service'
 import IncidentScreen from '../screens/incident-page/index'
 import DialogFormIncident from '../screens/incident-page/dialogFrom'
+import SearchPage from '../components/SearchPage';
+import LocationScreen from '../screens/incident-page/stepComponent/location';
+import ContainedActionScreen from '../screens/incident-page/stepComponent/containedAction'
+import PresenceScreen from '../screens/presence';
+import PatroliScreen from '../screens/patroli';
+import DialogFormPatroli from '../screens/patroli/dialogForm';
+import PageDetailPatroli from '../screens/patroli/detail'
 
 const Stack = createNativeStackNavigator();
 
@@ -82,6 +89,41 @@ const AppRoutes = () => {
 							name="DialogFormIncident"
 							component={DialogFormIncident}
 						/>
+						<Stack.Screen
+							options={{ headerShown: false }}
+							name="SearchPage"
+							component={SearchPage}
+						/>
+						<Stack.Screen
+							options={{ headerShown: false }}
+							name="LocationScreen"
+							component={LocationScreen}
+						/>
+						<Stack.Screen
+							options={{ headerShown: false }}
+							name="ContainedActionScreen"
+							component={ContainedActionScreen}
+						/>
+						<Stack.Screen
+							options={{ headerShown: false }}
+							name="PresenceScreen"
+							component={PresenceScreen}
+						/>
+						<Stack.Screen
+							options={{ headerShown: false }}
+							name="PatroliScreen"
+							component={PatroliScreen}
+						/>
+						<Stack.Screen
+							options={{ headerShown: false }}
+							name="DialogFormPatroli"
+							component={DialogFormPatroli}
+						/>
+						<Stack.Screen
+							options={{ headerShown: false }}
+							name="PageDetailPatroli"
+							component={PageDetailPatroli}
+						/>
 					</>
 				</Stack.Navigator>
 
diff --git a/src/navigation/BottomTabNavigator.js b/src/navigation/BottomTabNavigator.js
index 0516568..6b930a8 100644
--- a/src/navigation/BottomTabNavigator.js
+++ b/src/navigation/BottomTabNavigator.js
@@ -1,14 +1,16 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StatusBar } from 'react-native';
 import { CommonActions } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { BottomNavigation } from 'react-native-paper';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import Icon from 'react-native-vector-icons/AntDesign';
 
 import HomeScreen from '../screens/Home';
 import NotifikasiScreen from '../screens/Notification';
 import ProfileScreen from '../screens/Profile';
 import ServiceScreen from '../screens/Service';
+import { colors } from '../utils/color';
+
 const Tab = createBottomTabNavigator();
 
 export default function BottomTabNavigator() {
@@ -16,16 +18,23 @@ export default function BottomTabNavigator() {
     <Tab.Navigator
       screenOptions={{
         headerShown: false,
-        tabBarActiveBackgroundColor: '#1C1B40',
-        tabBarStyle: {
-          backgroundColor: 'white',
-          borderTopWidth: 0,
-          elevation: 8,
-          height: 60,
-        },
       }}
+      screenListeners={({ route, navigation }) => ({
+        focus: () => {
+          if (route.name === 'Home') {
+            StatusBar.setBackgroundColor(colors.blue);
+            StatusBar.setBarStyle('light-content');
+          } else {
+            StatusBar.setBackgroundColor('white');
+            StatusBar.setBarStyle('dark-content');
+          }
+        },
+      })}
       tabBar={({ navigation, state, descriptors, insets }) => (
         <BottomNavigation.Bar
+          activeIndicatorStyle={{
+            backgroundColor: colors.semiBlue,
+          }}
           navigationState={state}
           safeAreaInsets={insets}
           onTabPress={({ route, preventDefault }) => {
@@ -44,14 +53,21 @@ export default function BottomTabNavigator() {
               });
             }
           }}
-          renderIcon={({ route, focused, color }) => {
+          renderIcon={({ route, focused }) => {
             const { options } = descriptors[route.key];
             if (options.tabBarIcon) {
-              return options.tabBarIcon({ focused, color: '#1C1B40', size: 24 });
+              return options.tabBarIcon({ focused, color: colors.blue, size: 24 });
             }
 
             return null;
           }}
+          renderIndicator={({ route, focused }) => {
+            if (focused) {
+              return <View style={{ height: 4, backgroundColor: colors.blue }} />;
+            }
+            return null;
+          }}
+
           getLabelText={({ route }) => {
             const { options } = descriptors[route.key];
             const label =
@@ -63,9 +79,10 @@ export default function BottomTabNavigator() {
 
             return label;
           }}
-          style={{ backgroundColor: 'white', borderTopWidth: 0, elevation: 8, }}
+          style={{ backgroundColor: colors.pureWhite, borderTopWidth: 0, elevation: 8 }}
           labeled={false}
           compact={true}
+          activeColor={colors.beanRed}
         />
       )}
     >
@@ -74,7 +91,7 @@ export default function BottomTabNavigator() {
         component={HomeScreen}
         options={{
           tabBarLabel: 'Beranda',
-          tabBarIcon: ({ color, size }) => {
+          tabBarIcon: ({ color, size, focused }) => {
             return <Icon name="home" size={size} color={color} />;
           },
         }}
@@ -84,18 +101,8 @@ export default function BottomTabNavigator() {
         component={ServiceScreen}
         options={{
           tabBarLabel: 'Service',
-          tabBarIcon: ({ color, size }) => {
-            return <Icon name="view-list" size={size} color={color} />;
-          },
-        }}
-      />
-      <Tab.Screen
-        name="Notifikasi"
-        component={NotifikasiScreen}
-        options={{
-          tabBarLabel: 'Notifikasi',
-          tabBarIcon: ({ color, size }) => {
-            return <Icon name="bell" size={size} color={color} />;
+          tabBarIcon: ({ color, size, focused }) => {
+            return <Icon name={focused ? "appstore1" : "appstore-o"} size={size} color={color} />;
           },
         }}
       />
@@ -105,7 +112,7 @@ export default function BottomTabNavigator() {
         options={{
           tabBarLabel: 'Profil',
           tabBarIcon: ({ color, size }) => {
-            return <Icon name="account-settings" size={size} color={color} />;
+            return <Icon name="user" size={size} color={color} />;
           },
         }}
       />