diff --git a/src/TonalityApp.tsx b/src/TonalityApp.tsx
index 8f7ecbabbe42718d8cd7e9c1e34fb729a9ef82bd..18c5fcbc2a2be72b4ac630f3a0aa4087823ff423 100644
--- a/src/TonalityApp.tsx
+++ b/src/TonalityApp.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { RenderRoutes } from "@/routes/RenderRoutes.tsx";
 import { routes } from "@/routes/routes.ts";
 
-export type UserContext =  {token: string | null, onLogin: (accessToken: string) => void, onLogout: () => void}
+export type UserContext =  {token: string | null, username: string | null, onLogin: (accessToken: string, username: string) => void, onLogout: () => void}
 export const AuthContext = React.createContext<
   UserContext>(null as unknown as UserContext);
 
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index eaeca8eeaf400e1bb14fa5d524ad5f9c7c52257e..caaf61719da9f97b45da5b06a04dd4b5baff1ddd 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -16,38 +16,8 @@ import { Link } from "react-router-dom";
 import { StatusCodes } from "http-status-codes";
 import {useAuth} from "@/TonalityApp.tsx";
 import api from "@/api/api.ts";
+import {loginFormSchema} from "@/validations/login-validation.ts";
 
-const isUsernameInvalid = async (username: string): Promise<boolean> => {
-  const res = await api.post("username-availability", {
-    username: username,
-  });
-
-  const responseBody: { usernameAvailable: string } = res.data;
-
-  return responseBody.usernameAvailable === "false";
-};
-
-const loginFormSchema = z.object({
-  username: z
-    .string()
-    .min(2, {
-      message: "Username has a minimum length of 2.",
-    })
-    .max(50, {
-      message: "Username has a maximum length of 50.",
-    })
-    .refine(isUsernameInvalid, {
-      message: "User does not exist.",
-    }),
-  password: z
-    .string()
-    .min(8, {
-      message: "Password has a minimum length of 8.",
-    })
-    .max(255, {
-      message: "Password has a maximum length of 255.",
-    }),
-});
 
 const LoginPage = () => {
   // Define form
@@ -77,9 +47,7 @@ const LoginPage = () => {
         },
       );
 
-      console.log("res", res.data.accessToken)
-
-      onLogin(res.data.accessToken);
+      onLogin(res.data.accessToken, values.username);
     } catch (err) {
       if (
         axios.isAxiosError(err) &&
diff --git a/src/pages/SignUpPage.tsx b/src/pages/SignUpPage.tsx
index 94512e84f3d08162086cab6d5096e0f8a9ff584d..796bc1c36cc9ae9c9ddfe87b3f4c4eca939453f6 100644
--- a/src/pages/SignUpPage.tsx
+++ b/src/pages/SignUpPage.tsx
@@ -15,43 +15,10 @@ import { Input } from "@/components/ui/input.tsx";
 import { Button } from "@/components/ui/button.tsx";
 import { Link, useNavigate } from "react-router-dom";
 import { StatusCodes } from "http-status-codes";
-import axios from "axios";
 import { useToast } from "@/components/ui/use-toast.ts";
 import api from "@/api/api.ts";
+import {signUpFormSchema} from "@/validations/signup-validation.ts";
 
-const restApiUrl: string = import.meta.env.VITE_REST_API_URL;
-
-const isUsernameAvailable = async (username: string): Promise<boolean> => {
-  const res = await axios.post(restApiUrl + "username-availability", {
-    username: username,
-  });
-
-  const responseBody: { usernameAvailable: string } = res.data;
-
-  return responseBody.usernameAvailable === "true";
-};
-
-const signUpFormSchema = z.object({
-  username: z
-    .string()
-    .min(2, {
-      message: "Username must have a minimum length of 2.",
-    })
-    .max(50, {
-      message: "Username must have a maximum length of 50.",
-    })
-    .refine(isUsernameAvailable, {
-      message: "Username already exists.",
-    }),
-  password: z
-    .string()
-    .min(8, {
-      message: "Password must have a minimum length of 8.",
-    })
-    .max(255, {
-      message: "Password must have a maximum length of 255.",
-    }),
-});
 
 const SignUpPage = () => {
   const { toast } = useToast();
@@ -109,7 +76,7 @@ const SignUpPage = () => {
               <FormItem>
                 <FormLabel>Password</FormLabel>
                 <FormControl>
-                  <Input placeholder="" {...field} />
+                  <Input type="password" placeholder="" {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
diff --git a/src/validations/login-validation.ts b/src/validations/login-validation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3f92a97b26897fa1d58e89db91c7e036efd78bb5
--- /dev/null
+++ b/src/validations/login-validation.ts
@@ -0,0 +1,34 @@
+import api from "@/api/api.ts";
+import * as z from "zod";
+
+const isUsernameInvalid = async (username: string): Promise<boolean> => {
+  const res = await api.post("username-availability", {
+    username: username,
+  });
+
+  const responseBody: { usernameAvailable: string } = res.data;
+
+  return responseBody.usernameAvailable === "false";
+};
+
+export const loginFormSchema = z.object({
+  username: z
+    .string()
+    .min(2, {
+      message: "Username has a minimum length of 2.",
+    })
+    .max(50, {
+      message: "Username has a maximum length of 50.",
+    })
+    .refine(isUsernameInvalid, {
+      message: "User does not exist.",
+    }),
+  password: z
+    .string()
+    .min(8, {
+      message: "Password has a minimum length of 8.",
+    })
+    .max(255, {
+      message: "Password has a maximum length of 255.",
+    }),
+});
diff --git a/src/validations/signup-validation.ts b/src/validations/signup-validation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7ddd8d371c4e42426905ef4b5ca543bceab66c28
--- /dev/null
+++ b/src/validations/signup-validation.ts
@@ -0,0 +1,36 @@
+import * as z from "zod";
+import api from "@/api/api.ts";
+
+const isUsernameAvailable = async (username: string): Promise<boolean> => {
+  const res = await api.post(
+    "username-availability",
+    {
+      username: username,
+  });
+
+  const responseBody: { usernameAvailable: string } = res.data;
+
+  return responseBody.usernameAvailable === "true";
+};
+
+export const signUpFormSchema = z.object({
+  username: z
+    .string()
+    .min(2, {
+      message: "Username must have a minimum length of 2.",
+    })
+    .max(50, {
+      message: "Username must have a maximum length of 50.",
+    })
+    .refine(isUsernameAvailable, {
+      message: "Username already exists.",
+    }),
+  password: z
+    .string()
+    .min(8, {
+      message: "Password must have a minimum length of 8.",
+    })
+    .max(255, {
+      message: "Password must have a maximum length of 255.",
+    }),
+});