diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4c00605..1ad3a4b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -7,7 +7,7 @@ import Game from './pages/Game';
 import About from './pages/About';
 import { AuthProvider } from './contexts/AuthContext';
 import Login from './pages/Login';
-import SignUp from './pages/SignUp'
+import SignUp from './pages/SignUp';
 
 const router = createBrowserRouter([
     {
@@ -25,8 +25,8 @@ const router = createBrowserRouter([
             },
             { path: '/about', element: <About /> },
             { path: '/error', element: <Error /> },
-            { path: '/login', element: <Login />},
-            { path: '/signup', element: <SignUp />}
+            { path: '/login', element: <Login /> },
+            { path: '/signup', element: <SignUp /> },
         ],
     },
 ]);
diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx
index 902f2ec..46bb356 100644
--- a/frontend/src/Navbar.tsx
+++ b/frontend/src/Navbar.tsx
@@ -41,22 +41,19 @@ const Navbar: React.FC<NavbarProps> = ({
                     </button>
                 </div>
                 {isLoggedIn ? (
-                            <>
-
-                            </>
-                        ) : (
-                            <>
-                                <div className="text-xl font-bold mt-2">
-                                    <Button
-                                    text="Sign In /Login"
-                                    buttonSize="w-56 h-11"
-                                    className="border-4"
-                                    rounded="rounded-2xl"
-                                    />
-                                </div>
-                            </>
-                        )}
-               
+                    <></>
+                ) : (
+                    <>
+                        <div className="text-xl font-bold mt-2">
+                            <Button
+                                text="Sign In /Login"
+                                buttonSize="w-56 h-11"
+                                className="border-4"
+                                rounded="rounded-2xl"
+                            />
+                        </div>
+                    </>
+                )}
             </div>
             {isOpen && (
                 <div className="fixed inset-0 flex z-20">
diff --git a/frontend/src/contexts/AuthContext.tsx b/frontend/src/contexts/AuthContext.tsx
index 4b34852..68bc566 100644
--- a/frontend/src/contexts/AuthContext.tsx
+++ b/frontend/src/contexts/AuthContext.tsx
@@ -30,14 +30,17 @@ export function useAuth() {
 }
 
 export function AuthProvider({ children }: { children: ReactElement }) {
-    const [user, setUser] = useState<User | null>(null);    
-
-    const login = useCallback((name: string, pass: string) => {
-        setUser({
-            name: name,
-            pass: pass,
-        });
-    }, [setUser]);
+    const [user, setUser] = useState<User | null>(null);
+
+    const login = useCallback(
+        (name: string, pass: string) => {
+            setUser({
+                name: name,
+                pass: pass,
+            });
+        },
+        [setUser]
+    );
 
     const logout = useCallback(() => {
         setUser(null);
diff --git a/frontend/src/library/button.tsx b/frontend/src/library/button.tsx
index af848eb..add3958 100644
--- a/frontend/src/library/button.tsx
+++ b/frontend/src/library/button.tsx
@@ -15,7 +15,7 @@ type ButtonProps = {
     fontSize?: string;
     rounded?: string;
     buttonSize?: string;
-    type?: "submit" | "reset" | "button"
+    type?: 'submit' | 'reset' | 'button';
     borderColor?: string;
     hoverColor?: string;
     hoverScale?: boolean;
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 3654fd4..115c2bc 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -12,7 +12,7 @@ const Login: React.FC = () => {
     const [isLoggedIn, setIsLoggedIn] = useState(false);
     const [username, setUsername] = useState('');
     const auth = useAuth();
-    
+
     const handleLogin = () => {
         setUsername('Username_7');
         setIsLoggedIn(true);
@@ -27,19 +27,20 @@ const Login: React.FC = () => {
         setName(event.target.value);
     };
 
-    const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const handlePasswordChange = (
+        event: React.ChangeEvent<HTMLInputElement>
+    ) => {
         setPassword(event.target.value);
     };
 
-
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
         console.log('Form submitted');
-        const user = auth.getUser();  
-        if(user?.name == name && user.pass == password){
-            console.log("Successful Login");
-        }else{
-            console.log("Failed Login");
+        const user = auth.getUser();
+        if (user?.name == name && user.pass == password) {
+            console.log('Successful Login');
+        } else {
+            console.log('Failed Login');
         }
     };
 
@@ -50,15 +51,15 @@ const Login: React.FC = () => {
 
     return (
         <>
-            <div className='min-h-screen bg-uno-bg bg-cover bg-center flex flex-col relative'>
+            <div className="min-h-screen bg-uno-bg bg-cover bg-center flex flex-col relative">
                 <Navbar
-                    isLoggedIn={true}                   //true here so that navbar does not render signin/login button
+                    isLoggedIn={true} //true here so that navbar does not render signin/login button
                     username={username}
                     onLogin={handleLogin}
                     onLogout={handleLogout}
                 />
-                <div className=' w-full flex justify-center items-center grow'>
-                    <div className='flex flex-col justify-center items-center'>
+                <div className=" w-full flex justify-center items-center grow">
+                    <div className="flex flex-col justify-center items-center">
                         {/* <div className='flex justify-center'>
                             <Button
                                 buttonSize="w-96 h-12"
@@ -73,44 +74,51 @@ const Login: React.FC = () => {
                         </div>
                         <div className='w-96 h-1 bg-neutral-300 my-3'></div> */}
                         <div>
-                            <form onSubmit={handleSubmit} className=''>
-                                <div className=''>
-                                    <div className=' my-3'>
+                            <form onSubmit={handleSubmit} className="">
+                                <div className="">
+                                    <div className=" my-3">
                                         <Input
                                             id="email"
                                             type="text"
                                             onChange={handleNameChange}
                                             placeholder="Enter Username"
-                                            width = "96"
-                                            height= "12"
+                                            width="96"
+                                            height="12"
                                         />
                                     </div>
-                                    <div className='my-3'>
+                                    <div className="my-3">
                                         <Input
                                             id="pass"
                                             type="password"
                                             onChange={handlePasswordChange}
                                             placeholder="Password"
-                                            width = "96"
-                                            height= "12"
+                                            width="96"
+                                            height="12"
                                         />
                                     </div>
-                                    <div className='flex justify-center'>
+                                    <div className="flex justify-center">
                                         <Button
                                             text="Login"
                                             textColor="text-white"
-                                            py='0'
+                                            py="0"
                                             buttonSize="w-32 h-10"
-                                            className='border-4 rounded-full'
-                                            fontSize='text-2xl'
-                                            type='submit'
+                                            className="border-4 rounded-full"
+                                            fontSize="text-2xl"
+                                            type="submit"
                                         />
                                     </div>
                                 </div>
                             </form>
                             <div>
-                                <div className='font-kavoon flex justify-center items-center my-3'>
-                                    Don't have an account? <Link to="/signup" className=' text-blue-700 '> Sign up</Link>
+                                <div className="font-kavoon flex justify-center items-center my-3">
+                                    Don't have an account?{' '}
+                                    <Link
+                                        to="/signup"
+                                        className=" text-blue-700 "
+                                    >
+                                        {' '}
+                                        Sign up
+                                    </Link>
                                 </div>
                             </div>
                         </div>
@@ -118,8 +126,7 @@ const Login: React.FC = () => {
                 </div>
             </div>
         </>
-        
     );
 };
 
-export default Login;
\ No newline at end of file
+export default Login;
diff --git a/frontend/src/pages/SignUp.tsx b/frontend/src/pages/SignUp.tsx
index 993931e..21e0d41 100644
--- a/frontend/src/pages/SignUp.tsx
+++ b/frontend/src/pages/SignUp.tsx
@@ -13,7 +13,7 @@ const SignUp: React.FC = () => {
     const [isLoggedIn, setIsLoggedIn] = useState(false);
     const [username, setUsername] = useState('');
     const auth = useAuth();
-    
+
     const handleLogin = () => {
         setUsername('Username_7');
         setIsLoggedIn(true);
@@ -24,7 +24,9 @@ const SignUp: React.FC = () => {
         setIsLoggedIn(false);
     };
 
-    const handelConfirmPassChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const handelConfirmPassChange = (
+        event: React.ChangeEvent<HTMLInputElement>
+    ) => {
         setConfirmPass(event.target.value);
     };
 
@@ -32,19 +34,20 @@ const SignUp: React.FC = () => {
         setName(event.target.value);
     };
 
-    const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const handlePasswordChange = (
+        event: React.ChangeEvent<HTMLInputElement>
+    ) => {
         setPassword(event.target.value);
     };
 
-
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
         console.log('Form submitted');
-        if(password === confirmPass){
-            auth.login(name, password)
-            console.log("successfull signup")
-        }else{
-            console.log("failed signup");
+        if (password === confirmPass) {
+            auth.login(name, password);
+            console.log('successfull signup');
+        } else {
+            console.log('failed signup');
         }
     };
 
@@ -57,16 +60,16 @@ const SignUp: React.FC = () => {
 
     return (
         <>
-            <div className='min-h-screen bg-uno-bg bg-cover bg-center flex flex-col relative'>
+            <div className="min-h-screen bg-uno-bg bg-cover bg-center flex flex-col relative">
                 <Navbar
-                    isLoggedIn={true}                   //true here so that navbar does not render signin/login button
+                    isLoggedIn={true} //true here so that navbar does not render signin/login button
                     username={username}
                     onLogin={handleLogin}
                     onLogout={handleLogout}
                 />
-                <div className=' w-full flex justify-center items-center grow'>
-                    <div className='flex flex-col justify-center items-center'>
-                    {/* <div className='flex justify-center'>
+                <div className=" w-full flex justify-center items-center grow">
+                    <div className="flex flex-col justify-center items-center">
+                        {/* <div className='flex justify-center'>
                         <Button
                             buttonSize="w-96 h-12"
                             py="py-0"
@@ -80,54 +83,61 @@ const SignUp: React.FC = () => {
                     </div>
                     <div className='w-96 h-1 bg-neutral-300 my-3'></div> */}
                         <div>
-                            <form onSubmit={handleSubmit} className=''>
-                                <div className=''>
-                                    <div className=' my-3'>
+                            <form onSubmit={handleSubmit} className="">
+                                <div className="">
+                                    <div className=" my-3">
                                         <Input
                                             id="email"
                                             type="text"
                                             onChange={handleNameChange}
                                             placeholder="Enter Username"
-                                            width = "96"
-                                            height= "12"
+                                            width="96"
+                                            height="12"
                                         />
                                     </div>
-                                    <div className='my-3'>
+                                    <div className="my-3">
                                         <Input
                                             id="pass"
                                             type="password"
                                             onChange={handlePasswordChange}
                                             placeholder="Password"
-                                            width = "96"
-                                            height= "12"
+                                            width="96"
+                                            height="12"
                                         />
                                     </div>
-                                    <div className='my-3'>
+                                    <div className="my-3">
                                         <Input
                                             id="confirmPass"
                                             type="password"
                                             onChange={handelConfirmPassChange}
                                             placeholder="Confirm Password"
-                                            width = "96"
-                                            height= "12"
+                                            width="96"
+                                            height="12"
                                         />
                                     </div>
-                                    <div className='flex justify-center'>
+                                    <div className="flex justify-center">
                                         <Button
                                             text="Sign Up"
                                             textColor="text-white"
-                                            py='0'
+                                            py="0"
                                             buttonSize="w-32 h-10"
-                                            className='border-4 rounded-full'
-                                            fontSize='text-2xl'
-                                            type='submit'
+                                            className="border-4 rounded-full"
+                                            fontSize="text-2xl"
+                                            type="submit"
                                         />
                                     </div>
                                 </div>
                             </form>
                             <div>
-                                <div className='font-kavoon flex justify-center items-center my-3'>
-                                    Already have an account? <Link to="/login" className=' text-blue-700 '> Login</Link>
+                                <div className="font-kavoon flex justify-center items-center my-3">
+                                    Already have an account?{' '}
+                                    <Link
+                                        to="/login"
+                                        className=" text-blue-700 "
+                                    >
+                                        {' '}
+                                        Login
+                                    </Link>
                                 </div>
                             </div>
                         </div>
@@ -135,8 +145,7 @@ const SignUp: React.FC = () => {
                 </div>
             </div>
         </>
-        
     );
 };
 
-export default SignUp;
\ No newline at end of file
+export default SignUp;