diff --git a/package-lock.json b/package-lock.json
index 551432d..855c4f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "mpaspor",
       "version": "0.0.1",
       "dependencies": {
-        "@react-native-async-storage/async-storage": "^2.1.2",
+        "@react-native-async-storage/async-storage": "^2.2.0",
         "@react-native-community/datetimepicker": "^8.3.0",
         "@react-navigation/elements": "^2.3.8",
         "@react-navigation/native": "^7.1.6",
@@ -2795,10 +2795,9 @@
       }
     },
     "node_modules/@react-native-async-storage/async-storage": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.1.2.tgz",
-      "integrity": "sha512-dvlNq4AlGWC+ehtH12p65+17V0Dx7IecOWl6WanF2ja38O1Dcjjvn7jVzkUHJ5oWkQBlyASurTPlTHgKXyYiow==",
-      "license": "MIT",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.2.0.tgz",
+      "integrity": "sha512-gvRvjR5JAaUZF8tv2Kcq/Gbt3JHwbKFYfmb445rhOj6NUMx3qPLixmDx5pZAyb9at1bYvJ4/eTUipU5aki45xw==",
       "dependencies": {
         "merge-options": "^3.0.4"
       },
diff --git a/package.json b/package.json
index a0a0ef7..3625145 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^2.1.2",
+    "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-community/datetimepicker": "^8.3.0",
     "@react-navigation/elements": "^2.3.8",
     "@react-navigation/native": "^7.1.6",
diff --git a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep1.tsx b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep1.tsx
index 9b4bbfc..a8eb2e7 100644
--- a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep1.tsx
+++ b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep1.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import {View, Pressable, Text} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 import styles from '../styles';
 import RadioButtonOptionComponent from '../../../../components/RadioButtonOption';
 import hasHadPassportBeforeOptions from '../../../../data/Options/HasHadPassportBeforeOptions';
+import {Button} from 'react-native-paper';
+import Colors from '../../../../../assets/styles/Colors';
 
 type Step2PassportApplicationQuestionnaireSubStep1Props = {
   setStep: (step: number) => void;
@@ -23,18 +24,20 @@ const Step2PassportApplicationQuestionnaireSubStep1 = ({
   return (
     <View style={styles.subStepContainer}>
       <Pressable
+        style={({pressed}) => ({
+          transform: [{scale: pressed ? 0.99 : 1}],
+        })}
         onPress={() => {
           setStep(1);
           setSubStep(3);
-        }}
-        style={({pressed}) => [
-          styles.subStepButtonBackWrapper,
-          {
-            transform: [{scale: pressed ? 0.99 : 1}],
-          },
-        ]}>
-        <Icon name="chevron-left" size={24} />
-        <Text style={styles.subStepButtonBackText}>Kembali</Text>
+        }}>
+        <Button
+          mode="contained"
+          icon="chevron-left"
+          textColor={Colors.neutral100.color}
+          style={styles.subStepButtonBackContainer}>
+          Kembali
+        </Button>
       </Pressable>
 
       <View style={styles.subStepQuestionnaireOptionContainer}>
diff --git a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep10.tsx b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep10.tsx
index 2964843..421ea60 100644
--- a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep10.tsx
+++ b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep10.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {ScrollView, View, Text, Pressable} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
 import TextInputComponent from '../../../../components/TextInput';
@@ -21,20 +20,21 @@ const Step2PassportApplicationQuestionnaireSubStep10 = (
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+          })}
           onPress={() => {
             selectedDestinationCountryOption === 'destination_country_not_set'
               ? setSubStep(7)
               : setSubStep(9);
-          }}
-          style={({pressed}) => [
-            styles.subStepButtonBackWrapper,
-            {
-              transform: [{scale: pressed ? 0.99 : 1}],
-              marginBottom: 8,
-            },
-          ]}>
-          <Icon name="chevron-left" size={24} />
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+          }}>
+          <Button
+            mode="contained"
+            icon="chevron-left"
+            textColor={Colors.neutral100.color}
+            style={styles.subStepButtonBackContainer}>
+            Kembali
+          </Button>
         </Pressable>
 
         <View style={styles.subStepQuestionnaireOptionContainer}>
diff --git a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep11.tsx b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep11.tsx
index e857494..2fced15 100644
--- a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep11.tsx
+++ b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep11.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {ScrollView, View, Text, Pressable} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
 import FontFamily from '../../../../../assets/styles/FontFamily';
@@ -27,16 +26,17 @@ const Step2PassportApplicationQuestionnaireSubStep11 = ({
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
-          onPress={() => setSubStep(10)}
-          style={({pressed}) => [
-            styles.subStepButtonBackWrapper,
-            {
-              transform: [{scale: pressed ? 0.99 : 1}],
-              marginBottom: 8,
-            },
-          ]}>
-          <Icon name="chevron-left" size={24} />
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+          })}
+          onPress={() => setSubStep(10)}>
+          <Button
+            mode="contained"
+            icon="chevron-left"
+            textColor={Colors.neutral100.color}
+            style={styles.subStepButtonBackContainer}>
+            Kembali
+          </Button>
         </Pressable>
 
         <View style={styles.subStepQuestionnaireOptionContainer}>
diff --git a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep2.tsx b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep2.tsx
index 0cc8029..9083a60 100644
--- a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep2.tsx
+++ b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep2.tsx
@@ -26,15 +26,19 @@ const Step2PassportApplicationQuestionnaireSubStep2 = ({
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+          })}
           onPress={() => {
             setSubStep(1);
-          }}
-          style={({pressed}) => [
-            styles.subStepButtonBackWrapper,
-            {transform: [{scale: pressed ? 0.99 : 1}]},
-          ]}>
-          <Icon name="chevron-left" size={24} />
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+          }}>
+          <Button
+            mode="contained"
+            icon="chevron-left"
+            textColor={Colors.neutral100.color}
+            style={styles.subStepButtonBackContainer}>
+            Kembali
+          </Button>
         </Pressable>
 
         <View style={styles.subStepQuestionnaireOptionContainer}>
diff --git a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep3.tsx b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep3.tsx
index c89cf07..f6a3b9c 100644
--- a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep3.tsx
+++ b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep3.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {ScrollView, View, Pressable, Text} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
 import Colors from '../../../../../assets/styles/Colors';
@@ -16,18 +15,19 @@ const Step2PassportApplicationQuestionnaireSubStep3 = ({
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+          })}
           onPress={() => {
             setSubStep(2);
-          }}
-          style={({pressed}) => [
-            styles.subStepButtonBackWrapper,
-            {
-              transform: [{scale: pressed ? 0.99 : 1}],
-              marginBottom: 8,
-            },
-          ]}>
-          <Icon name="chevron-left" size={24} />
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+          }}>
+          <Button
+            mode="contained"
+            icon="chevron-left"
+            textColor={Colors.neutral100.color}
+            style={styles.subStepButtonBackContainer}>
+            Kembali
+          </Button>
         </Pressable>
 
         <View style={styles.subStepTextWrapper}>
diff --git a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep4.tsx b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep4.tsx
index 17b4aa9..cabfc6a 100644
--- a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep4.tsx
+++ b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep4.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {ScrollView, View, Pressable, Text} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
 import Colors from '../../../../../assets/styles/Colors';
@@ -16,16 +15,19 @@ const Step2PassportApplicationQuestionnaireSubStep4 = ({
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
-          onPress={() => setSubStep(3)}
-          style={({pressed}) => [
-            styles.subStepButtonBackWrapper,
-            {
-              transform: [{scale: pressed ? 0.99 : 1}],
-              marginBottom: 8,
-            },
-          ]}>
-          <Icon name="chevron-left" size={24} />
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+          })}
+          onPress={() => {
+            setSubStep(3);
+          }}>
+          <Button
+            mode="contained"
+            icon="chevron-left"
+            textColor={Colors.neutral100.color}
+            style={styles.subStepButtonBackContainer}>
+            Kembali
+          </Button>
         </Pressable>
 
         <View style={styles.subStepTextWrapper}>
diff --git a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep5.tsx b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep5.tsx
index da71c4f..d5b4f9f 100644
--- a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep5.tsx
+++ b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep5.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {ScrollView, View, Text, Pressable} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
 import TextInputComponent from '../../../../components/TextInput';
@@ -17,15 +16,19 @@ const Step2PassportApplicationQuestionnaireSubStep5 = ({
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
-          onPress={() => setSubStep(4)}
-          style={({pressed}) => [
-            styles.subStepButtonBackWrapper,
-            {
-              transform: [{scale: pressed ? 0.99 : 1}],
-            },
-          ]}>
-          <Icon name="chevron-left" size={24} />
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+          })}
+          onPress={() => {
+            setSubStep(4);
+          }}>
+          <Button
+            mode="contained"
+            icon="chevron-left"
+            textColor={Colors.neutral100.color}
+            style={styles.subStepButtonBackContainer}>
+            Kembali
+          </Button>
         </Pressable>
 
         <View style={styles.subStepQuestionnaireOptionContainer}>
diff --git a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep6.tsx b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep6.tsx
index 06fecfd..cc7ba11 100644
--- a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep6.tsx
+++ b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep6.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {ScrollView, View, Text, Pressable} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 import {Button} from 'react-native-paper';
 import passportApplicationPurposeOptions from '../../../../data/Options/PassportApplicationPurposeOptions';
 import styles from '../styles';
@@ -27,19 +26,21 @@ const Step2PassportApplicationQuestionnaireSubStep6 = (
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+          })}
           onPress={() => {
             selectedPassportOption === 'already'
               ? setSubStep(5)
               : setSubStep(1);
-          }}
-          style={({pressed}) => [
-            styles.subStepButtonBackWrapper,
-            {
-              transform: [{scale: pressed ? 0.99 : 1}],
-            },
-          ]}>
-          <Icon name="chevron-left" size={24} />
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+          }}>
+          <Button
+            mode="contained"
+            icon="chevron-left"
+            textColor={Colors.neutral100.color}
+            style={styles.subStepButtonBackContainer}>
+            Kembali
+          </Button>
         </Pressable>
 
         <View style={styles.subStepQuestionnaireOptionContainer}>
diff --git a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep7.tsx b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep7.tsx
index 980ea44..54d3cb3 100644
--- a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep7.tsx
+++ b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep7.tsx
@@ -1,6 +1,5 @@
 import React, {useState} from 'react';
-import {ScrollView, View, Text, Pressable} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
+import {ScrollView, View, Pressable} from 'react-native';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
 import TextInputComponent from '../../../../components/TextInput';
@@ -23,22 +22,22 @@ const Step2PassportApplicationQuestionnaireSubStep7 = ({
   const [countryValue, setCountryValue] = useState<string | null>(null);
 
   const handleCountrySelect = (value: string | null) => {
-    setCountryValue(value); 
-    setSelectedDestinationCountryOption(''); 
+    setCountryValue(value);
+    setSelectedDestinationCountryOption('');
   };
 
   const handleRadioSelect = (value: string) => {
     if (value === 'destination_country_not_set') {
       setSelectedDestinationCountryOption(value);
-      setCountryValue(null); 
+      setCountryValue(null);
     } else {
-      setSelectedDestinationCountryOption(value); 
+      setSelectedDestinationCountryOption(value);
     }
   };
 
   const isRadioButtonSelected = (value: string) => {
     if (countryValue !== null) {
-      return ''; 
+      return '';
     }
     return selectedDestinationCountryOption === value ? value : '';
   };
@@ -47,18 +46,20 @@ const Step2PassportApplicationQuestionnaireSubStep7 = ({
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+          })}
           onPress={() => {
             setSubStep(6);
             setSelectedDestinationCountryOption('');
-          }}
-          style={({pressed}) => [
-            styles.subStepButtonBackWrapper,
-            {
-              transform: [{scale: pressed ? 0.99 : 1}],
-            },
-          ]}>
-          <Icon name="chevron-left" size={24} />
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+          }}>
+          <Button
+            mode="contained"
+            icon="chevron-left"
+            textColor={Colors.neutral100.color}
+            style={styles.subStepButtonBackContainer}>
+            Kembali
+          </Button>
         </Pressable>
 
         <View style={styles.subStepQuestionnaireOptionContainer}>
diff --git a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep8.tsx b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep8.tsx
index 38bb4f2..4af69e1 100644
--- a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep8.tsx
+++ b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep8.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import {ScrollView, View, Text, Pressable} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
+import {ScrollView, View, Pressable} from 'react-native';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
 import TextInputComponent from '../../../../components/TextInput';
@@ -17,15 +16,17 @@ const Step2PassportApplicationQuestionnaireSubStep8 = ({
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
-          onPress={() => setSubStep(7)}
-          style={({pressed}) => [
-            styles.subStepButtonBackWrapper,
-            {
-              transform: [{scale: pressed ? 0.99 : 1}],
-            },
-          ]}>
-          <Icon name="chevron-left" size={24} />
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+          })}
+          onPress={() => setSubStep(7)}>
+          <Button
+            mode="contained"
+            icon="chevron-left"
+            textColor={Colors.neutral100.color}
+            style={styles.subStepButtonBackContainer}>
+            Kembali
+          </Button>
         </Pressable>
 
         <View style={styles.subStepQuestionnaireOptionContainer}>
diff --git a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep9.tsx b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep9.tsx
index 1864ed3..64532d7 100644
--- a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep9.tsx
+++ b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep9.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {ScrollView, View, Text, Pressable} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
 import durationAbroadOptions from '../../../../data/Options/DurationAbroadOptions';
@@ -22,15 +21,17 @@ const Step2PassportApplicationQuestionnaireSubStep9 = ({
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
-          onPress={() => setSubStep(8)}
-          style={({pressed}) => [
-            styles.subStepButtonBackWrapper,
-            {
-              transform: [{scale: pressed ? 0.99 : 1}],
-            },
-          ]}>
-          <Icon name="chevron-left" size={24} />
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+          })}
+          onPress={() => setSubStep(8)}>
+          <Button
+            mode="contained"
+            icon="chevron-left"
+            textColor={Colors.neutral100.color}
+            style={styles.subStepButtonBackContainer}>
+            Kembali
+          </Button>
         </Pressable>
 
         <View style={styles.subStepQuestionnaireOptionContainer}>
diff --git a/src/screens/regularPassport/steps/Step3UploadDocuments/Step3UploadDocuments.tsx b/src/screens/regularPassport/steps/Step3UploadDocuments/Step3UploadDocuments.tsx
index b2d877d..af80533 100644
--- a/src/screens/regularPassport/steps/Step3UploadDocuments/Step3UploadDocuments.tsx
+++ b/src/screens/regularPassport/steps/Step3UploadDocuments/Step3UploadDocuments.tsx
@@ -31,16 +31,17 @@ const BackButton = (props: BackButtonProps) => {
   const {onPress} = props;
   return (
     <Pressable
-      onPress={onPress}
-      style={({pressed}) => [
-        styles.subStepButtonBackWrapper,
-        {
-          transform: [{scale: pressed ? 0.99 : 1}],
-          marginBottom: 8,
-        },
-      ]}>
-      <Icon name="chevron-left" size={24} />
-      <Text style={styles.subStepButtonBackText}>Kembali</Text>
+      style={({pressed}) => ({
+        transform: [{scale: pressed ? 0.99 : 1}],
+      })}
+      onPress={onPress}>
+      <Button
+        mode="contained"
+        icon="chevron-left"
+        textColor={Colors.neutral100.color}
+        style={styles.subStepButtonBackContainer}>
+        Kembali
+      </Button>
     </Pressable>
   );
 };
@@ -155,7 +156,7 @@ const Step3UploadDocuments = (props: Step3UploadDocumentsProps) => {
           }}
         />
 
-        <View style={{marginBottom: 16, gap: 4}}>
+        <View style={{marginTop: 12, marginBottom: 16, gap: 4}}>
           <Text style={styles.subStepDesc}>
             Layanan yang cocok untuk Anda adalah{' '}
             {selectedPassportOption !== 'already' ? (
@@ -258,7 +259,8 @@ const Step3UploadDocuments = (props: Step3UploadDocumentsProps) => {
         <Button
           mode="contained"
           onPress={() => {
-            setStep(4), setSubStep(1);
+            setStep(4);
+            setSubStep(1);
           }}
           style={styles.subStepButtonContained}
           textColor={Colors.neutral100.color}>
diff --git a/src/screens/regularPassport/steps/Step4ApplicantAdditionalData/Step4ApplicantAdditionalDataSubStep1.tsx b/src/screens/regularPassport/steps/Step4ApplicantAdditionalData/Step4ApplicantAdditionalDataSubStep1.tsx
index dde361f..ff1426a 100644
--- a/src/screens/regularPassport/steps/Step4ApplicantAdditionalData/Step4ApplicantAdditionalDataSubStep1.tsx
+++ b/src/screens/regularPassport/steps/Step4ApplicantAdditionalData/Step4ApplicantAdditionalDataSubStep1.tsx
@@ -24,15 +24,20 @@ const Step4ApplicantAdditionalDataSubStep1: React.FC<
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+            marginBottom: 12,
+          })}
           onPress={() => {
             setStep(3);
-          }}
-          style={({pressed}) => [
-            styles.subStepButtonBackWrapper,
-            {transform: [{scale: pressed ? 0.99 : 1}], marginBottom: 8},
-          ]}>
-          <Icon name="chevron-left" size={24} />
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+          }}>
+          <Button
+            mode="contained"
+            icon="chevron-left"
+            textColor={Colors.neutral100.color}
+            style={styles.subStepButtonBackContainer}>
+            Kembali
+          </Button>
         </Pressable>
 
         <Text style={styles.subStepDesc}>
diff --git a/src/screens/regularPassport/steps/Step4ApplicantAdditionalData/Step4ApplicantAdditionalDataSubStep2.tsx b/src/screens/regularPassport/steps/Step4ApplicantAdditionalData/Step4ApplicantAdditionalDataSubStep2.tsx
index 2266865..ea097a3 100644
--- a/src/screens/regularPassport/steps/Step4ApplicantAdditionalData/Step4ApplicantAdditionalDataSubStep2.tsx
+++ b/src/screens/regularPassport/steps/Step4ApplicantAdditionalData/Step4ApplicantAdditionalDataSubStep2.tsx
@@ -8,10 +8,7 @@ import Colors from '../../../../../assets/styles/Colors';
 import jobData from '../../../../data/DropdownData/JobData';
 import nationalityData from '../../../../data/DropdownData/NationalityData';
 import {PassportAppointment} from '../../../../navigation/type';
-import {
-  addData,
-  getData,
-} from '../../../../helper/asyncStorageHelper';
+import {addData, getData} from '../../../../helper/asyncStorageHelper';
 
 const Step4ApplicantAdditionalDataSubStep2 = ({
   setStep,
@@ -24,19 +21,21 @@ const Step4ApplicantAdditionalDataSubStep2 = ({
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+            marginBottom: 12,
+          })}
           onPress={() => {
             setStep(4);
             setSubStep(1);
-          }}
-          style={({pressed}) => [
-            styles.subStepButtonBackWrapper,
-            {
-              transform: [{scale: pressed ? 0.99 : 1}],
-              marginBottom: 8,
-            },
-          ]}>
-          <Icon name="chevron-left" size={24} />
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+          }}>
+          <Button
+            mode="contained"
+            icon="chevron-left"
+            textColor={Colors.neutral100.color}
+            style={styles.subStepButtonBackContainer}>
+            Kembali
+          </Button>
         </Pressable>
         <Text style={styles.subStepDesc}>
           Data di bawah ini harus sesuai dengan keterangan pada KTP pemohon.
diff --git a/src/screens/regularPassport/steps/Step5ApplicationTypeAndApplicantData/Step5ApplicationTypeAndApplicantData.tsx b/src/screens/regularPassport/steps/Step5ApplicationTypeAndApplicantData/Step5ApplicationTypeAndApplicantData.tsx
index 0ec920d..b604129 100644
--- a/src/screens/regularPassport/steps/Step5ApplicationTypeAndApplicantData/Step5ApplicationTypeAndApplicantData.tsx
+++ b/src/screens/regularPassport/steps/Step5ApplicationTypeAndApplicantData/Step5ApplicationTypeAndApplicantData.tsx
@@ -10,16 +10,13 @@ import {PassportAppointment} from '../../../../navigation/type';
 type Step5ApplicationTypeAndApplicantDataProps = {
   setStep: (step: number) => void;
   setSubStep: (subStep: number) => void;
-  passportAppointmentData: any[];
   showEditDataSheet: () => void;
 };
 
 const Step5Content = (props: Step5ApplicationTypeAndApplicantDataProps) => {
-  const {setStep, setSubStep, passportAppointmentData, showEditDataSheet} =
-    props;
+  const {setStep, setSubStep, showEditDataSheet} = props;
 
-  const [lastAppointment, setLastAppointment] =
-    useState<PassportAppointment>();
+  const [lastAppointment, setLastAppointment] = useState<PassportAppointment>();
 
   useEffect(() => {
     const fetchData = async () => {
@@ -127,7 +124,13 @@ const Step5Content = (props: Step5ApplicationTypeAndApplicantDataProps) => {
   );
 };
 
-const DetailRow = ({label, value}: {label: string; value: string | undefined}) => (
+const DetailRow = ({
+  label,
+  value,
+}: {
+  label: string;
+  value: string | undefined;
+}) => (
   <View style={styles.applicantDetailTextContentWrapper}>
     <Text style={styles.applicantDetailTextTitle}>{label}</Text>
     <Text style={styles.applicantDetailTextDesc}>{value}</Text>
diff --git a/src/screens/regularPassport/steps/styles.tsx b/src/screens/regularPassport/steps/styles.tsx
index 20f54d5..291dbbe 100644
--- a/src/screens/regularPassport/steps/styles.tsx
+++ b/src/screens/regularPassport/steps/styles.tsx
@@ -48,6 +48,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 4,
   },
+  subStepButtonBackContainer: {
+    alignSelf: 'flex-start',
+    backgroundColor: Colors.primary30.color,
+  },
   subStepButtonBackText: {
     ...FontFamily.notoSansRegular,
     includeFontPadding: false,