diff --git a/App.tsx b/App.tsx
index d1d9e46..66975af 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";
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 
@@ -66,6 +67,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>
       </QueryClientProvider>
diff --git a/package-lock.json b/package-lock.json
index 27e114a..6960559 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,11 +25,15 @@
         "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-maps": "1.3.2",
+        "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-query": "^3.39.3",
         "react-redux": "^8.1.1",
         "redux": "^4.2.1"
       },
@@ -5207,20 +5211,20 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "4.29.19",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.29.19.tgz",
-      "integrity": "sha512-uPe1DukeIpIHpQi6UzIgBcXsjjsDaLnc7hF+zLBKnaUlh7jFE/A+P8t4cU4VzKPMFB/C970n/9SxtpO5hmIRgw==",
+      "version": "4.29.25",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.29.25.tgz",
+      "integrity": "sha512-DI4y4VC6Uw4wlTpOocEXDky69xeOScME1ezLKsj+hOk7DguC9fkqXtp6Hn39BVb9y0b5IBrY67q6kIX623Zj4Q==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "4.29.19",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.29.19.tgz",
-      "integrity": "sha512-XiTIOHHQ5Cw1WUlHaD4fmVUMhoWjuNJlAeJGq7eM4BraI5z7y8WkZO+NR8PSuRnQGblpuVdjClQbDFtwxTtTUw==",
+      "version": "4.29.25",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.29.25.tgz",
+      "integrity": "sha512-c1+Ezu+XboYrdAMdusK2fTdRqXPMgPAnyoTrzHOZQqr8Hqz6PNvV9DSKl8agUo6nXX4np7fdWabIprt+838dLg==",
       "dependencies": {
-        "@tanstack/query-core": "4.29.19",
+        "@tanstack/query-core": "4.29.25",
         "use-sync-external-store": "^1.2.0"
       },
       "funding": {
@@ -5938,6 +5942,35 @@
         "node": ">=8"
       }
     },
+    "node_modules/broadcast-channel": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
+      "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "detect-node": "^2.1.0",
+        "js-sha3": "0.8.0",
+        "microseconds": "0.2.0",
+        "nano-time": "1.0.0",
+        "oblivious-set": "1.0.0",
+        "rimraf": "3.0.2",
+        "unload": "2.2.0"
+      }
+    },
+    "node_modules/broadcast-channel/node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.21.9",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.9.tgz",
@@ -6971,6 +7004,11 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -7991,19 +8029,6 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
-    "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -9402,6 +9427,11 @@
       "resolved": "https://registry.npmjs.org/join-component/-/join-component-1.1.0.tgz",
       "integrity": "sha512-bF7vcQxbODoGK1imE2P9GS9aw4zD0Sd+Hni68IMZLj7zRnquH7dXUmMw9hDI5S/Jzt7q+IyTXN0rSg2GI0IKhQ=="
     },
+    "node_modules/js-sha3": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
+      "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -9884,6 +9914,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/match-sorter": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz",
+      "integrity": "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "remove-accents": "0.4.2"
+      }
+    },
     "node_modules/md5": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
@@ -10903,6 +10942,11 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/microseconds": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz",
+      "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
+    },
     "node_modules/mime": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
@@ -11117,6 +11161,14 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/nano-time": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
+      "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==",
+      "dependencies": {
+        "big-integer": "^1.6.16"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -11430,6 +11482,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/oblivious-set": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz",
+      "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw=="
+    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -12210,6 +12267,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",
@@ -12251,6 +12316,15 @@
       "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-maps": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-1.3.2.tgz",
@@ -12269,6 +12343,19 @@
         }
       }
     },
+    "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",
@@ -12310,6 +12397,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",
@@ -12339,6 +12431,31 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "node_modules/react-query": {
+      "version": "3.39.3",
+      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
+      "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "broadcast-channel": "^3.4.1",
+        "match-sorter": "^6.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-redux": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.1.tgz",
@@ -12535,6 +12652,11 @@
         "jsesc": "bin/jsesc"
       }
     },
+    "node_modules/remove-accents": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
+      "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
+    },
     "node_modules/remove-trailing-slash": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/remove-trailing-slash/-/remove-trailing-slash-0.1.1.tgz",
@@ -14115,6 +14237,15 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/unload": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
+      "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2",
+        "detect-node": "^2.0.4"
+      }
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
diff --git a/package.json b/package.json
index 7279bf6..bf7ee0c 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,8 @@
     "@tanstack/react-query": "^4.29.19",
     "axios": "^1.4.0",
     "expo": "~48.0.18",
-    "expo-intent-launcher": "~10.5.2",
     "expo-linking": "~4.0.1",
+    "expo-intent-launcher": "~10.5.2",
     "expo-location": "~15.1.1",
     "expo-status-bar": "~1.4.4",
     "moti": "^0.25.3",
@@ -26,10 +26,14 @@
     "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-query": "^3.39.3",
     "react-redux": "^8.1.1",
     "redux": "^4.2.1",
     "react-native-maps": "1.3.2"
diff --git a/src/components/DrawerSettings/CustomDrawerContent.tsx b/src/components/DrawerSettings/CustomDrawerContent.tsx
index 74d5a4f..845d732 100644
--- a/src/components/DrawerSettings/CustomDrawerContent.tsx
+++ b/src/components/DrawerSettings/CustomDrawerContent.tsx
@@ -16,6 +16,7 @@ import { RootState } from "../../features/redux/Store/Store";
 import LogoutIcon from "../../icons/LogoutIcon/LogoutIcon";
 import { logout } from "../../features/redux/slices/StatusSlice/StatusSlice";
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import UserIcon from "../../icons/UserIcon/UserIcon";
 
 export default function CustomDrawerContent(props: {}) {
   const navigation = useNavigation<RootDrawerParamList>();
@@ -60,7 +61,7 @@ export default function CustomDrawerContent(props: {}) {
           <Text style={styles.text_white_medium}>Stud-E</Text>
         </View>
         <DrawerButton
-          color={colors.blue_2}
+          color={colors.blue_3}
           onPress={() => {
             navigation.navigate("Home");
           }}
@@ -68,6 +69,15 @@ export default function CustomDrawerContent(props: {}) {
           <HomeIcon size={32} />
           <Text style={styles.text_white_medium}>Home</Text>
         </DrawerButton>
+        <DrawerButton
+          color={colors.blue_2}
+          onPress={() => {
+            navigation.navigate("UserInfo");
+          }}
+        >
+          <UserIcon size={32} />
+          <Text style={styles.text_white_medium}>UserInfo</Text>
+        </DrawerButton>
         <DrawerButton
           color={colors.blue_2}
           onPress={async () => {
@@ -111,6 +121,7 @@ export default function CustomDrawerContent(props: {}) {
           <SignupIcon size={32} />
           <Text style={styles.text_white_medium}>Register</Text>
         </DrawerButton>
+
         {/*
         Debug buttons for accessing revalidation and activation page
         <DrawerButton
diff --git a/src/components/DrawerSettings/DrawerScreenSettings.tsx b/src/components/DrawerSettings/DrawerScreenSettings.tsx
index e71292c..2a3ec73 100644
--- a/src/components/DrawerSettings/DrawerScreenSettings.tsx
+++ b/src/components/DrawerSettings/DrawerScreenSettings.tsx
@@ -10,14 +10,14 @@ const DrawerScreenSettings: DrawerNavigationOptions = {
     fontSize: font_sizes.medium,
   },
   unmountOnBlur: true,
-  headerStyle: { backgroundColor: colors.blue_3 },
+  headerStyle: { backgroundColor: colors.login_color},
   headerTintColor: colors.text_default,
   drawerType: "slide",
   drawerLabelStyle: {
     color: colors.text_default,
   },
   drawerStyle: {
-    backgroundColor: colors.blue_3,
+    backgroundColor: colors.login_color,
     width: 260,
   },
   headerRight: () => (
diff --git a/src/icons/DropdownIcon/DropdownIcon.tsx b/src/icons/DropdownIcon/DropdownIcon.tsx
new file mode 100644
index 0000000..224919e
--- /dev/null
+++ b/src/icons/DropdownIcon/DropdownIcon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "../../interfaces/Interfaces";
+
+import { Svg, Path } from "react-native-svg";
+import { colors } from "../../styles";
+import finalPropsSelectorFactory from "react-redux/es/connect/selectorFactory";
+
+export default function DropdownIcon(props: IconProps) {
+  return (
+    <>
+      <Svg
+        height={props.size + "px"}
+        width={props.size + "px"}
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke={colors.icon_color}
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
+        <Path d="M6 10l6 6l6 -6h-12"></Path>
+      </Svg>
+    </>
+  );
+}
diff --git a/src/icons/UserInfoIcon/UserInfoIcon.tsx b/src/icons/UserInfoIcon/UserInfoIcon.tsx
new file mode 100644
index 0000000..a36ef10
--- /dev/null
+++ b/src/icons/UserInfoIcon/UserInfoIcon.tsx
@@ -0,0 +1,34 @@
+import * as React from "react";
+import { IconProps } from "../../interfaces/Interfaces";
+
+import { Svg, Path } from "react-native-svg";
+import { colors } from "../../styles";
+import finalPropsSelectorFactory from "react-redux/es/connect/selectorFactory";
+
+export default function UserInfoIcon(props: IconProps) {
+  return (
+    <>
+      <Svg
+        height={props.size + "px"}
+        width={props.size + "px"}
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke={colors.icon_color}
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
+        <Path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></Path>
+        <Path d="M6 21v-2a4 4 0 0 1 4 -4h2.5"></Path>
+        <Path d="M19.001 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></Path>
+        <Path d="M19.001 15.5v1.5"></Path>
+        <Path d="M19.001 21v1.5"></Path>
+        <Path d="M22.032 17.25l-1.299 .75"></Path>
+        <Path d="M17.27 20l-1.3 .75"></Path>
+        <Path d="M15.97 17.25l1.3 .75"></Path>
+        <Path d="M20.733 20l1.3 .75"></Path>
+      </Svg>
+    </>
+  );
+}
diff --git a/src/routes/Login/Login.tsx b/src/routes/Login/Login.tsx
index 8de2585..a4283cd 100644
--- a/src/routes/Login/Login.tsx
+++ b/src/routes/Login/Login.tsx
@@ -35,21 +35,20 @@ export default function Login() {
   return (
     <View style={styles.background}>
       <AnimatedContainer>
+      <View style={styles.flex_row}>
+          <LoginIcon size={32} />
+          <Text style={styles.text_white_large}>Student Login</Text>
+        </View>
+        <View style={{ paddingVertical: 8 }} />
         <View
           style={{
             paddingVertical: 4,
             marginBottom: 16,
             borderRadius: 4,
             width: "90%",
-            backgroundColor: colors.blue_1,
+            backgroundColor: colors.head,
           }}
         />
-        <View style={styles.flex_row}>
-          <LoginIcon size={32} />
-          <Text style={styles.text_white_large}>Student Login</Text>
-        </View>
-
-        <View style={{ paddingVertical: 8 }} />
         <TextInput
           style={styles.text_input}
           placeholder="Username"
@@ -110,13 +109,13 @@ export default function Login() {
               }
             });
           }}
-          color={colors.blue_3}
+          color={colors.login_color}
         >
           <Text style={styles.text_white_small}>Login</Text>
         </Button>
         <Button
           onPress={() => navigation.navigate("Register")}
-          color={colors.blue_3}
+          color={colors.reg_color}
         >
           <Text style={styles.text_white_small}>Register</Text>
         </Button>
diff --git a/src/routes/Register/Register.tsx b/src/routes/Register/Register.tsx
index ea2b90f..97c1b8c 100644
--- a/src/routes/Register/Register.tsx
+++ b/src/routes/Register/Register.tsx
@@ -34,20 +34,21 @@ export default function Register() {
   return (
     <View style={styles.background}>
       <AnimatedContainer>
+      <View style={styles.flex_row}>
+          <SignupIcon size={32} />
+          <Text style={styles.text_white_large}>Student Signup</Text>
+          <View style={{ paddingVertical: 8, }} />
+        </View>
         <View
           style={{
             paddingVertical: 4,
             marginBottom: 16,
+            marginTop: 8,
             borderRadius: 4,
             width: "90%",
-            backgroundColor: colors.blue_1,
+            backgroundColor: colors.head,
           }}
         />
-        <View style={styles.flex_row}>
-          <SignupIcon size={32} />
-          <Text style={styles.text_white_large}>Student Signup</Text>
-          <View style={{ paddingVertical: 8 }} />
-        </View>
         <TextInput
           style={styles.text_input}
           placeholder="First Name"
@@ -166,7 +167,7 @@ export default function Register() {
             {
             }
           }}
-          color={colors.blue_3}
+          color={colors.reg_color}
         >
           <Text style={styles.text_white_small}>Register</Text>
         </Button>
diff --git a/src/routes/UserInfo/UserInfo.tsx b/src/routes/UserInfo/UserInfo.tsx
new file mode 100644
index 0000000..b0a5c27
--- /dev/null
+++ b/src/routes/UserInfo/UserInfo.tsx
@@ -0,0 +1,207 @@
+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 AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
+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";
+
+export default function UserInfo() {
+  const navigation = useNavigation<RootDrawerParamList>();
+  const [isEditable, setIsEditable] = useState(false);
+  const options = ["", "", "", ""];
+  const [isActive, setIsActive] = useState(false);
+  const toggleUserActive = () => {
+    setIsActive(!isActive);
+  };
+  //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 } }}>
+          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,
+          }}
+        />
+        <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>
+  );
+}
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 e0a654d..88d451e 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -7,16 +7,19 @@ const containerWidth = width - width * 0.08;
 const containerHeight = height - height * 0.01;
 
 export const colors = {
-  orange_1: "#FFBC72",
+  orange_1: "#FFDEAD",
   orange_2: "#FFE2C1",
   orange_3: "#C07624",
-  blue_1: "#4C87A1",
-  blue_2: "#77ACC3",
-  blue_3: "#1B5D79",
+  blue_1: "#E3963E",
+  blue_2: "#FFAC1C",
+  blue_3: "#FFAC1C",
   text_default: "white",
   text_error: "#e32d1e",
   text_success: "green",
   icon_color: "white",
+  login_color: "#0047AB",
+  reg_color: "#0096FF",
+  head: "white",
   blue_disabled: "#C07624",
 };
 
@@ -115,6 +118,43 @@ const styles = StyleSheet.create({
     width: containerWidth,
     alignSelf: "center",
   },
+  profile: {
+    height: 80,
+    width: 80, 
+    alignSelf: 'center',
+  }, 
+  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", 
+  }, 
+  button: {
+    padding: 10,
+    backgroundColor: colors.blue_2,
+    borderRadius: 5,
+  },
+  activeText: {
+    color: 'green',
+  },
+  inactiveText: {
+    color: 'white',
+  },
 });
-
 export default styles;