diff --git a/src/components/Api/Api.tsx b/src/components/Api/Api.tsx
index 5056087..797499a 100644
--- a/src/components/Api/Api.tsx
+++ b/src/components/Api/Api.tsx
@@ -40,11 +40,13 @@ export function UserLogin(user: LoginParams) {
     .post("/api/v1/accounts/token/login/", user)
     .then(async (response) => {
       AsyncStorage.setItem("token", JSON.stringify(response.data.auth_token));
-      return true;
+      return [true];
     })
     .catch((error) => {
-      console.log("Login Failed: " + error);
-      return false;
+      console.log(
+        "Login Failed: " + error.response.status + " " + error.response.data
+      );
+      return [false, error.response.data];
     });
 }
 
diff --git a/src/components/ParseError/ParseError.tsx b/src/components/ParseError/ParseError.tsx
index 6a39e77..defb5fd 100644
--- a/src/components/ParseError/ParseError.tsx
+++ b/src/components/ParseError/ParseError.tsx
@@ -2,8 +2,17 @@ export default function ParseError(text: string) {
   return text
     .replaceAll(/[{}()"]/g, " ")
     .replaceAll(/,/g, "\n")
-    .replaceAll(":", "")
     .replaceAll("[", "")
     .replaceAll("]", "")
     .replaceAll(".", "");
 }
+
+export function ParseLoginError(text: string) {
+  return text
+    .replaceAll(/[{}()"]/g, " ")
+    .replaceAll(/,/g, "\n")
+    .replaceAll("[", "")
+    .replaceAll("]", "")
+    .replaceAll(".", "")
+    .replaceAll("non_field_errors", "");
+}
diff --git a/src/routes/Login/Login.tsx b/src/routes/Login/Login.tsx
index 0b5e4fe..4d4510e 100644
--- a/src/routes/Login/Login.tsx
+++ b/src/routes/Login/Login.tsx
@@ -19,13 +19,15 @@ import LoginIcon from "../../icons/LoginIcon/LoginIcon";
 import Button from "../../components/Button/Button";
 import { useNavigation } from "@react-navigation/native";
 import { RootDrawerParamList } from "../../interfaces/Interfaces";
+import { UserLogin } from "../../components/Api/Api";
+import { ParseLoginError } from "../../components/ParseError/ParseError";
 
 export default function Login() {
   const navigation = useNavigation<RootDrawerParamList>();
   // const dispatch = useDispatch();
   // const creds = useSelector((state: RootState) => state.auth.creds);
   const [user, setUser] = useState({
-    email: "",
+    username: "",
     password: "",
     error: "",
   });
@@ -49,13 +51,14 @@ export default function Login() {
         <View style={{ paddingVertical: 8 }} />
         <TextInput
           style={styles.text_input}
-          placeholder="Email"
+          placeholder="Username"
           placeholderTextColor="white"
-          value={user.email}
+          autoCapitalize="none"
+          value={user.username}
           onChange={(
             e: NativeSyntheticEvent<TextInputChangeEventData>
           ): void => {
-            setUser({ ...user, email: e.nativeEvent.text });
+            setUser({ ...user, username: e.nativeEvent.text });
           }}
         />
         <View style={{ paddingVertical: 4 }} />
@@ -71,8 +74,28 @@ export default function Login() {
             setUser({ ...user, password: e.nativeEvent.text });
           }}
         />
+        <View style={{ paddingVertical: 2 }} />
+        <Text style={styles.text_white_small}>{user.error}</Text>
         <View style={{ paddingVertical: 4 }} />
-        <Button onPress={() => console.log("heh")} color={colors.blue_3}>
+        <Button
+          onPress={async () => {
+            await UserLogin({
+              username: user.username,
+              password: user.password,
+            }).then((result) => {
+              if (result[0]) {
+                setUser({ ...user, username: "", password: "", error: "" });
+                navigation.navigate("Home");
+              } else {
+                setUser({
+                  ...user,
+                  error: ParseLoginError(JSON.stringify(result[1])),
+                });
+              }
+            });
+          }}
+          color={colors.blue_3}
+        >
           <Text style={styles.text_white_small}>Login</Text>
         </Button>
         <Button