diff --git a/package-lock.json b/package-lock.json
index 6960559..349587f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "@react-navigation/native": "^6.1.7",
         "@react-navigation/native-stack": "^6.9.13",
         "@reduxjs/toolkit": "^1.9.5",
-        "@tanstack/react-query": "^4.29.19",
+        "@tanstack/react-query": "^4.29.25",
         "axios": "^1.4.0",
         "expo": "~48.0.18",
         "expo-intent-launcher": "~10.5.2",
diff --git a/package.json b/package.json
index bf7ee0c..60f4b66 100644
--- a/package.json
+++ b/package.json
@@ -14,11 +14,11 @@
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/native-stack": "^6.9.13",
     "@reduxjs/toolkit": "^1.9.5",
-    "@tanstack/react-query": "^4.29.19",
+    "@tanstack/react-query": "^4.29.25",
     "axios": "^1.4.0",
     "expo": "~48.0.18",
-    "expo-linking": "~4.0.1",
     "expo-intent-launcher": "~10.5.2",
+    "expo-linking": "~4.0.1",
     "expo-location": "~15.1.1",
     "expo-status-bar": "~1.4.4",
     "moti": "^0.25.3",
@@ -27,6 +27,7 @@
     "react-native-dropdown-picker": "^5.4.6",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-image-picker": "^5.6.0",
+    "react-native-maps": "1.3.2",
     "react-native-modal": "^13.0.1",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
@@ -35,8 +36,7 @@
     "react-native-svg": "13.4.0",
     "react-query": "^3.39.3",
     "react-redux": "^8.1.1",
-    "redux": "^4.2.1",
-    "react-native-maps": "1.3.2"
+    "redux": "^4.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/src/routes/UserInfo/UserInfo.tsx b/src/routes/UserInfo/UserInfo.tsx
index b0a5c27..856f817 100644
--- a/src/routes/UserInfo/UserInfo.tsx
+++ b/src/routes/UserInfo/UserInfo.tsx
@@ -17,6 +17,9 @@ import { TouchableOpacity, Image } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
 import SelectDropdown from "react-native-select-dropdown";
 import DropdownIcon from "../../icons/DropdownIcon/DropdownIcon";
+import { useQuery } from "react-query";
+import { UserInfo as GetUserInfo } from "../../components/Api/Api";
+import { err } from "react-native-svg/lib/typescript/xml";
 
 export default function UserInfo() {
   const navigation = useNavigation<RootDrawerParamList>();
@@ -35,173 +38,179 @@ export default function UserInfo() {
     semester: "",
     course: "",
   });
-  return (
-    <ScrollView style={styles.background}>
-      <AnimatedContainer>
-        <Text style={{ ...styles.text_white_medium, ...{ fontSize: 32 } }}>
-          Kurt Toledo
-        </Text>
-        <View>
-          <Image
-            source={require("./image/3135715.png")}
-            style={styles.profile}
+  const { data, isLoading, error } = useQuery("user", UserInfo, {
+    retry: 0,
+    onSuccess: (data) => console.log(data),
+  });
+  if (!isLoading && !error) {
+    return (
+      <ScrollView style={styles.background}>
+        <AnimatedContainer>
+          <Text style={{ ...styles.text_white_medium, ...{ fontSize: 32 } }}>
+            Kurt Toledo
+          </Text>
+          <View>
+            <Image
+              source={require("./image/3135715.png")}
+              style={styles.profile}
+            />
+            <TouchableOpacity onPress={toggleUserActive} style={styles.button}>
+              <Text
+                style={[
+                  styles.text,
+                  isActive ? styles.activeText : styles.inactiveText,
+                ]}
+              >
+                Student {isActive ? "Active" : "Inactive"}
+              </Text>
+            </TouchableOpacity>
+          </View>
+          <View
+            style={{
+              paddingVertical: 4,
+              marginBottom: 16,
+              marginTop: 8,
+              borderRadius: 4,
+              width: "90%",
+              backgroundColor: colors.head,
+            }}
           />
-          <TouchableOpacity onPress={toggleUserActive} style={styles.button}>
-            <Text
-              style={[
-                styles.text,
-                isActive ? styles.activeText : styles.inactiveText,
-              ]}
-            >
-              Student {isActive ? "Active" : "Inactive"}
+          <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={() => <DropdownIcon 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>
-        </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={() => <DropdownIcon 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>
-  );
+        </AnimatedContainer>
+      </ScrollView>
+    );
+  }
 }