diff --git a/src/navigation/BottomTabNavigator.tsx b/src/navigation/BottomTabNavigator.tsx
index 508d82f280d0aa2598b2578cb0f98dae9cefef8e..f4d60b1bb64abff0b63f454d881fa9ad4acdc625 100644
--- a/src/navigation/BottomTabNavigator.tsx
+++ b/src/navigation/BottomTabNavigator.tsx
@@ -5,6 +5,7 @@ import TabOneScreen from "../screens/TabOneScreen";
 import { FontAwesome } from "@expo/vector-icons";
 import { Pressable } from "react-native";
 import Colors from "../constants/Colors";
+import ProfileStackNavigator from "./ProfileStackNavigator";
 
 /**
  * A bottom tab navigator displays tab buttons on the bottom of the display to switch screens.
@@ -43,6 +44,30 @@ const BottomTabNavigator = () => {
           ),
         })}
       />
+      <BottomTab.Screen
+        name="Profile"
+        component={ProfileStackNavigator}
+        options={({ navigation }: RootTabScreenProps<"Profile">) => ({
+          title: "Profile",
+          headerShown: false,
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          headerRight: () => (
+            <Pressable
+              onPress={() => null}
+              style={({ pressed }) => ({
+                opacity: pressed ? 0.5 : 1,
+              })}
+            >
+              <FontAwesome
+                name="info-circle"
+                size={25}
+                color={Colors.text.title} //TODO ganti warna
+                style={{ marginRight: 15 }}
+              />
+            </Pressable>
+          ),
+        })}
+      />
     </BottomTab.Navigator>
   );
 };
diff --git a/src/navigation/ProfileStackNavigator.tsx b/src/navigation/ProfileStackNavigator.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e4ea33d9751d0f6ed541a7d6947dba610d7ada65
--- /dev/null
+++ b/src/navigation/ProfileStackNavigator.tsx
@@ -0,0 +1,40 @@
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import React from "react";
+import { StyleSheet } from "react-native";
+import AccountSettingsScreen from "../screens/profile/AccountSettingsScreen";
+import ChangePasswordScreen from "../screens/profile/ChangePasswordScreen";
+import ProfileScreen from "../screens/profile/ProfileScreen";
+import { ProfileStackParamList } from "../types/navigation/ProfileStack";
+
+const ProfileStack = createNativeStackNavigator<ProfileStackParamList>();
+
+const AuthStackNavigator = () => {
+  return (
+    <ProfileStack.Navigator initialRouteName="ProfileScreen">
+      <ProfileStack.Screen
+        name="ProfileScreen"
+        component={ProfileScreen}
+        // options={{ headerShown: false }}
+      />
+      <ProfileStack.Screen
+        name="AccountSettings"
+        component={AccountSettingsScreen}
+        options={{ title: "Pengaturan Akun"}}
+      />
+      <ProfileStack.Screen
+        name="ChangePassword"
+        component={ChangePasswordScreen}
+        options={{ title: "Change Password"}}
+      />
+      
+    </ProfileStack.Navigator>
+  );
+};
+
+// const styles = StyleSheet.create({
+//   header: {
+//     shadow
+//   }
+// })
+
+export default AuthStackNavigator;
diff --git a/src/navigation/RootNavigator.tsx b/src/navigation/RootNavigator.tsx
index 97ed412ca5fad03037ab73f06a305ed297ea4e4f..221ec51326d0f323f608a2d85ed020847f830c76 100644
--- a/src/navigation/RootNavigator.tsx
+++ b/src/navigation/RootNavigator.tsx
@@ -3,6 +3,7 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import BottomTabNavigator from "./BottomTabNavigator";
 import { RootStackParamList } from "../types/navigation";
 import AuthStackNavigator from "./AuthStackNavigator";
+import ProfileStackNavigator from "./ProfileStackNavigator";
 
 /**
  * A root stack navigator is often used for displaying modals on top of all other content.
diff --git a/src/screens/profile/AccountSettingsScreen.tsx b/src/screens/profile/AccountSettingsScreen.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b2bf01d570fe0af40a6f8310839892d52dd527c7
--- /dev/null
+++ b/src/screens/profile/AccountSettingsScreen.tsx
@@ -0,0 +1,43 @@
+import { useNavigation } from "@react-navigation/core";
+import * as React from "react";
+import { Button, StyleSheet } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
+
+import { Text, View } from "../../components/Themed";
+import Colors from "../../constants/Colors";
+import { RootTabScreenProps } from "../../types/navigation";
+
+export default function AccountSettingsScreen({
+  navigation,
+}: RootTabScreenProps<"Profile">) {
+  const nav = useNavigation();
+  return (
+    <View style={styles.container}>
+      {/* <TouchableOpacity onPress={() => nav.navigate("ChangePassword")}>
+        <Text>Ganti Password</Text>
+      </TouchableOpacity> */}
+      <Button 
+        onPress={() => nav.navigate("ChangePassword")}
+        title="Change Password" 
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Colors.background,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+  },
+  separator: {
+    marginVertical: 30,
+    height: 1,
+    width: "80%",
+  },
+});
diff --git a/src/screens/profile/ChangePasswordScreen.tsx b/src/screens/profile/ChangePasswordScreen.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..570f0bb5a24404202cabe5ce66d3c08597c54436
--- /dev/null
+++ b/src/screens/profile/ChangePasswordScreen.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import Colors from '../../constants/Colors';
+
+const ChangePasswordScreen = ({navigation}) => {
+  return (
+    <View style={styles.container}>
+      <Text>gantis</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Colors.background,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+  },
+  separator: {
+    marginVertical: 30,
+    height: 1,
+    width: "80%",
+  },
+});
+
+export default ChangePasswordScreen
diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6226afe2bb7a9680c61f8d4e027c09e269c7fbfd
--- /dev/null
+++ b/src/screens/profile/ProfileScreen.tsx
@@ -0,0 +1,43 @@
+import { useNavigation } from "@react-navigation/core";
+import * as React from "react";
+import { Button, StyleSheet } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
+
+import { Text, View } from "../../components/Themed";
+import Colors from "../../constants/Colors";
+import { RootTabScreenProps } from "../../types/navigation";
+
+export default function ProfileScreen({
+  navigation,
+}: RootTabScreenProps<"Profile">) {
+  const nav = useNavigation();
+  return (
+    <View style={styles.container}>
+      {/* <TouchableOpacity onPress={() => nav.navigate("ChangePassword")}>
+        <Text>Ganti Password</Text>
+      </TouchableOpacity> */}
+      <Button 
+        onPress={() => nav.navigate("AccountSettings")}
+        title="Pengaturan Akun" 
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Colors.background,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+  },
+  separator: {
+    marginVertical: 30,
+    height: 1,
+    width: "80%",
+  },
+});
diff --git a/src/types/navigation/ProfileStack.ts b/src/types/navigation/ProfileStack.ts
new file mode 100644
index 0000000000000000000000000000000000000000..590a74f14153651f10b641267600cd7dfb312654
--- /dev/null
+++ b/src/types/navigation/ProfileStack.ts
@@ -0,0 +1,14 @@
+/**
+ * Learn more about using TypeScript with React Navigation:
+ * https://reactnavigation.org/docs/typescript/
+ */
+ import { NativeStackScreenProps } from "@react-navigation/native-stack";
+
+ export type ProfileStackParamList = {
+   ChangePassword: undefined;
+   TabTwoScreen: undefined;
+ };
+ 
+ export type ProfileStackScreenProps<Screen extends keyof ProfileStackParamList> =
+   NativeStackScreenProps<ProfileStackParamList, Screen>;
+ 
\ No newline at end of file
diff --git a/src/types/navigation/RootStack.ts b/src/types/navigation/RootStack.ts
index 1dd8560ad11d7c256d50d134f4a0e37a35ac9ab1..d4245973efc2a90af0a33bc41d4e6939c50eb048 100644
--- a/src/types/navigation/RootStack.ts
+++ b/src/types/navigation/RootStack.ts
@@ -10,6 +10,7 @@ import { RootTabParamList } from "./RootTab";
 export type RootStackParamList = {
   MainTab: NavigatorScreenParams<RootTabParamList> | undefined;
   Auth: undefined;
+  Profile: undefined;
   Modal: undefined;
   NotFound: undefined;
 };
diff --git a/src/types/navigation/RootTab.ts b/src/types/navigation/RootTab.ts
index eeb485195544c406e308ed9da8f64e67d88e9c96..abcedf40e678524791a41fda05997f5c5a7e5153 100644
--- a/src/types/navigation/RootTab.ts
+++ b/src/types/navigation/RootTab.ts
@@ -8,7 +8,7 @@ import { RootStackParamList } from ".";
 
 export type RootTabParamList = {
   TabOne: undefined;
-  TabTwo: undefined;
+  Profile: undefined;
 };
 
 export type RootTabScreenProps<Screen extends keyof RootTabParamList> =
diff --git a/src/types/navigation/index.tsx b/src/types/navigation/index.tsx
index f171b626a6f8181aeca0f65301707ae994eea184..38ecb8d440ed902c1438309790bf5ddeea736cd4 100644
--- a/src/types/navigation/index.tsx
+++ b/src/types/navigation/index.tsx
@@ -9,3 +9,4 @@ declare global {
 export * from "./RootStack";
 export * from "./RootTab";
 export * from "./AuthStack";
+export * from "./ProfileStack";