diff --git a/App.tsx b/App.tsx
index 8ab50a5..80e3d00 100644
--- a/App.tsx
+++ b/App.tsx
@@ -16,6 +16,7 @@ import Register from "./src/routes/Register/Register";
 import Onboarding from "./src/routes/Onboarding/Onboarding";
 import Revalidation from "./src/routes/Revalidation/Revalidation";
 import Activation from "./src/routes/Activation/Activation";
+import UserInfo from "./src/routes/UserInfo/UserInfo";
 import { useState, useEffect } from "react";
 
 const Drawer = createDrawerNavigator();
@@ -62,6 +63,7 @@ export default function App() {
           <Drawer.Screen name="Onboarding" component={Onboarding} />
           <Drawer.Screen name="Revalidation" component={Revalidation} />
           <Drawer.Screen name="Activation" component={Activation} />
+          <Drawer.Screen name="UserInfo" component={UserInfo} />
         </Drawer.Navigator>
       </NavigationContainer>
     </Provider>
diff --git a/package-lock.json b/package-lock.json
index bc946b2..342d471 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@react-navigation/drawer": "^6.6.3",
         "@react-navigation/native": "^6.1.7",
         "@react-navigation/native-stack": "^6.9.13",
+        "@redmin_delishaj/react-native-select": "^1.0.6",
         "@reduxjs/toolkit": "^1.9.5",
         "axios": "^1.4.0",
         "expo": "~48.0.18",
@@ -20,10 +21,14 @@
         "moti": "^0.25.3",
         "react": "18.2.0",
         "react-native": "0.71.8",
+        "react-native-dropdown-picker": "^5.4.6",
         "react-native-gesture-handler": "~2.9.0",
+        "react-native-image-picker": "^5.6.0",
+        "react-native-modal": "^13.0.1",
         "react-native-reanimated": "~2.14.4",
         "react-native-safe-area-context": "4.5.0",
         "react-native-screens": "~3.20.0",
+        "react-native-select-dropdown": "^3.3.4",
         "react-native-svg": "13.4.0",
         "react-redux": "^8.1.1",
         "redux": "^4.2.1"
@@ -5130,6 +5135,11 @@
         "nanoid": "^3.1.23"
       }
     },
+    "node_modules/@redmin_delishaj/react-native-select": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@redmin_delishaj/react-native-select/-/react-native-select-1.0.6.tgz",
+      "integrity": "sha512-YEpA8wEaOWTjkF5VkNXB7k+yuqxzlqQczlL8kaKtV30AS2uURV+0gk7ZPrKrSOEroc8xoWsTv5V4nJcYYiBfZw=="
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "1.9.5",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
@@ -12149,6 +12159,14 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-animatable": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.3.tgz",
+      "integrity": "sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "node_modules/react-native-codegen": {
       "version": "0.71.5",
       "resolved": "https://registry.npmjs.org/react-native-codegen/-/react-native-codegen-0.71.5.tgz",
@@ -12160,6 +12178,15 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "node_modules/react-native-dropdown-picker": {
+      "version": "5.4.6",
+      "resolved": "https://registry.npmjs.org/react-native-dropdown-picker/-/react-native-dropdown-picker-5.4.6.tgz",
+      "integrity": "sha512-T1XBHbE++M6aRU3wFYw3MvcOuabhWZ29RK/Ivdls2r1ZkZ62iEBZknLUPeVLMX3x6iUxj4Zgr3X2DGlEGXeHsA==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz",
@@ -12181,6 +12208,28 @@
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.19.tgz",
       "integrity": "sha512-1dVk9NwhoyKHCSxcrM6vY6cxmojeATsBobDicX0ZKr7DgUF2cBQRTKsimQFvzH8XhOVXyH8p4HyDSZNIFI8OlQ=="
     },
+    "node_modules/react-native-image-picker": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/react-native-image-picker/-/react-native-image-picker-5.6.0.tgz",
+      "integrity": "sha512-QHHb0qw3VXDedllrfS6SjxNG1SubnjUjIR2OH1HVbjv/IRVa3v4fI1MHbQaSNXlGopT9kL9jcnh7tbcX1z74Vg==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-modal": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-13.0.1.tgz",
+      "integrity": "sha512-UB+mjmUtf+miaG/sDhOikRfBOv0gJdBU2ZE1HtFWp6UixW9jCk/bhGdHUgmZljbPpp0RaO/6YiMmQSSK3kkMaw==",
+      "dependencies": {
+        "prop-types": "^15.6.2",
+        "react-native-animatable": "1.3.3"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": ">=0.65.0"
+      }
+    },
     "node_modules/react-native-reanimated": {
       "version": "2.14.4",
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.14.4.tgz",
@@ -12222,6 +12271,11 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-select-dropdown": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/react-native-select-dropdown/-/react-native-select-dropdown-3.3.4.tgz",
+      "integrity": "sha512-Ld6BGGgCnbiv7uORAP+KnvDQiqeuqdlasKk9woJH9XtFMD44rwjKwelGzsDxFUM9hIAwZdac4UAFmOmXRaMeRg=="
+    },
     "node_modules/react-native-svg": {
       "version": "13.4.0",
       "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.4.0.tgz",
diff --git a/package.json b/package.json
index 5c2ccd0..b7a8e76 100644
--- a/package.json
+++ b/package.json
@@ -13,21 +13,26 @@
     "@react-navigation/drawer": "^6.6.3",
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/native-stack": "^6.9.13",
+    "@redmin_delishaj/react-native-select": "^1.0.6",
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.4.0",
     "expo": "~48.0.18",
+    "expo-linking": "~4.0.1",
     "expo-status-bar": "~1.4.4",
     "moti": "^0.25.3",
     "react": "18.2.0",
     "react-native": "0.71.8",
+    "react-native-dropdown-picker": "^5.4.6",
     "react-native-gesture-handler": "~2.9.0",
+    "react-native-image-picker": "^5.6.0",
+    "react-native-modal": "^13.0.1",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
+    "react-native-select-dropdown": "^3.3.4",
     "react-native-svg": "13.4.0",
     "react-redux": "^8.1.1",
-    "redux": "^4.2.1",
-    "expo-linking": "~4.0.1"
+    "redux": "^4.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/src/components/DrawerSettings/CustomDrawerContent.tsx b/src/components/DrawerSettings/CustomDrawerContent.tsx
index 9ae1acc..dccc2cb 100644
--- a/src/components/DrawerSettings/CustomDrawerContent.tsx
+++ b/src/components/DrawerSettings/CustomDrawerContent.tsx
@@ -97,6 +97,15 @@ export default function CustomDrawerContent(props: {}) {
           <SignupIcon size={32} />
           <Text style={styles.text_white_medium}>Register</Text>
         </DrawerButton>
+        <DrawerButton
+          color={colors.blue_2}
+          onPress={() => {
+            navigation.navigate("UserInfo");
+          }}
+        >
+          <HomeIcon size={32} />
+          <Text style={styles.text_white_medium}>UserInfo</Text>
+        </DrawerButton>
         {/*
         Debug buttons for accessing revalidation and activation page
         <DrawerButton
diff --git a/src/routes/UserInfo/UserInfo.tsx b/src/routes/UserInfo/UserInfo.tsx
new file mode 100644
index 0000000..9fcdece
--- /dev/null
+++ b/src/routes/UserInfo/UserInfo.tsx
@@ -0,0 +1,193 @@
+import * as React from "react";
+import styles from "../../styles";
+import {
+  View,
+  Text,
+  TextInput,
+  NativeSyntheticEvent,
+  TextInputChangeEventData,
+} from "react-native";
+import { colors } from "../../styles";
+import { useState, useEffect } from "react";
+import Button from "../../components/Button/Button";
+import { useNavigation } from "@react-navigation/native";
+import { RootDrawerParamList } from "../../interfaces/Interfaces";
+import SignupIcon from "../../icons/SignupIcon/SignupIcon";
+import { UserRegister } from "../../components/Api/Api";
+import IsNumber from "../../components/IsNumber/IsNumber";
+import ParseError from "../../components/ParseError/ParseError";
+import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
+import {TouchableOpacity, Image} from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+import Select, { SelectConfig, SelectItem } from '@redmin_delishaj/react-native-select';
+import DropDownPicker from 'react-native-dropdown-picker'
+import SelectDropdown from 'react-native-select-dropdown'
+import ImagePicker from 'react-native-image-picker';
+
+export default function UserInfo() {
+  const navigation = useNavigation<RootDrawerParamList>();
+  const [isEditable, setIsEditable] = useState(false);
+  const options = ["Prog1", "Prog2", "Networking", "Database"];
+
+  //const dispatch = useDispatch();
+ // const creds = useSelector((state: RootState) => state.auth.creds);
+  const [user, setUser] = useState({
+    first_name: "",
+    last_name: "",
+    year_level: "",
+    semester: "",
+    course: "",
+ });
+  return (
+    <ScrollView style={styles.background}>
+      <AnimatedContainer>
+       <Text style={{...styles. text_white_medium, ...{fontSize: 32}}}></Text>
+      <View>  
+        <Text style ={styles. text_white_medium} >Kurt Toledo</Text>
+        <Text style ={styles. text_white_small} >Student</Text>
+        <Image source={require("./image/3135715.png")} style={styles.profile} />
+        </View>
+        <View
+          style={{
+            paddingVertical: 4,
+            marginBottom: 16,
+            marginTop: 8,
+            borderRadius: 4,
+            width: "90%",
+            backgroundColor: colors.head,
+          }}
+        />
+        <View style={styles.formGroup}>
+        <View style={{ width: 70 }}>
+          <Text style= {styles.text}>First Name</Text>
+        </View>
+        <View style={{ flex: 1 }}>
+          <TextInput style={[styles.input, !isEditable && styles.input]} 
+          editable={isEditable}
+          onChange= {(
+            e: NativeSyntheticEvent<TextInputChangeEventData>
+          ): void => {
+            setUser ({...user, first_name: e.nativeEvent.text});
+          }}
+            />
+        </View>
+      </View>
+      <View style={styles.formGroup}>
+        <View style={{ width: 70 }}>
+          <Text style= {styles.text}>Last Name</Text>
+        </View>
+        <View style={{ flex: 1 }}>
+          <TextInput style= {[styles.input, !isEditable && styles.input]} 
+          editable={isEditable}
+          onChange= {(
+            e: NativeSyntheticEvent<TextInputChangeEventData>
+          ): void => {
+            setUser ({...user, first_name: e.nativeEvent.text});
+          }}
+          />
+        </View>
+      </View>
+        <View
+          style={{
+            paddingVertical: 4,
+            marginBottom: 16,
+            marginTop: 8,
+            borderRadius: 4,
+            width: "90%",
+            backgroundColor: colors.head,
+          }}
+        />
+        <View style={styles.formGroup}>
+        <View style={{ width: 70 }}>
+          <Text style= {styles.text}>Year Level</Text>
+        </View>
+        <View style={{ flex: 1 }}>
+          <TextInput style= {[styles.input, !isEditable && styles.input]} 
+          editable={isEditable}
+          onChange= {(
+            e: NativeSyntheticEvent<TextInputChangeEventData>
+          ): void => {
+            setUser ({...user, first_name: e.nativeEvent.text});
+          }}
+          />
+        </View>
+      </View>
+      <View style={styles.formGroup}>
+        <View style={{ width: 70 }}>
+          <Text style= {styles.text}>Semester</Text>
+        </View>
+        <View style={{ flex: 1 }}>
+          <TextInput style={[styles.input, !isEditable && styles.input]} 
+          editable={isEditable}
+          onChange= {(
+            e: NativeSyntheticEvent<TextInputChangeEventData>
+          ): void => {
+            setUser ({...user, first_name: e.nativeEvent.text});
+          }}
+          />
+        </View>
+      </View>
+      <View style={styles.formGroup}>
+        <View style={{ width: 70 }}>
+          <Text style= {styles.text}>Course</Text>
+        </View>
+        <View style={{ flex: 1 }}>
+          <TextInput style={[styles.input, !isEditable && styles.input]} 
+          editable={isEditable}
+          onChange= {(
+            e: NativeSyntheticEvent<TextInputChangeEventData>
+          ): void => {
+            setUser ({...user, first_name: e.nativeEvent.text});
+          }}
+          />
+        </View>
+      </View>
+        <View
+          style={{
+            paddingVertical: 4,
+            marginBottom: 16,
+            marginTop: 8,
+            borderRadius: 4,
+            width: "90%",
+            backgroundColor: colors.head,
+          }}
+        />
+        <View style={styles.formGroup}>
+        <View style={{ width: 80 }}>
+          <Text style= {styles.text}>Subject</Text>
+        </View>
+        <View style={{ flex: 1 }}>
+        <SelectDropdown 
+        onSelect={(selectedItem, index) =>{
+          console.log(selectedItem, index)
+        }}
+        renderDropdownIcon={() =><SignupIcon size={32} />
+
+        }
+        buttonTextStyle={{
+          color: "white"
+        }}
+        dropdownStyle={{
+            backgroundColor: "#E3963E",
+        }}
+	data={options}
+  buttonStyle={{
+    width: "90%",
+    marginLeft: 10,
+    backgroundColor: "#E3963E",
+    borderRadius: 8
+  }}
+  
+/>
+        </View>
+      </View>
+        <TouchableOpacity
+          style={styles.button_template}
+          onPress={() => setIsEditable(!isEditable)}
+        >
+          <Text style={styles.text_white_small}>{isEditable ? "Save" : "Edit Profile"}</Text>
+        </TouchableOpacity> 
+     </AnimatedContainer>
+    </ScrollView>
+  );
+}
diff --git a/src/routes/UserInfo/image/3135715.png b/src/routes/UserInfo/image/3135715.png
new file mode 100644
index 0000000..1c927a4
Binary files /dev/null and b/src/routes/UserInfo/image/3135715.png differ
diff --git a/src/styles.tsx b/src/styles.tsx
index 81d876e..d8d7c67 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -1,3 +1,4 @@
+import { createErrorHandler } from "expo/build/errors/ExpoErrorManager";
 import { StyleSheet } from "react-native";
 
 export const colors = {
@@ -101,6 +102,35 @@ const styles = StyleSheet.create({
     padding: 10,
     borderRadius: 8,
   },
+  profile: {
+    height: 80,
+    width: 80, 
+    marginLeft: 10,
+  }, 
+  input: {
+    height: 40,
+    margin: 12,
+    marginRight: 30,
+    borderWidth: 1,
+    color: colors.text_default,
+    backgroundColor: colors.blue_1,
+    borderRadius: 8,
+    borderColor: '#FFAC1C',
+    padding: 8, 
+  },
+  formGroup: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  text: {
+    marginLeft: 5,
+    color: colors.text_default,
+    fontSize: font_sizes.small,
+    fontWeight: "bold", 
+  }, 
+ 
+
 });
 
 export default styles;