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 08176bb..821d932 100644
--- a/frontend/src/Navbar.tsx
+++ b/frontend/src/Navbar.tsx
@@ -34,8 +34,8 @@ const Navbar: React.FC<NavbarProps> = ({
     };
 
     const goToLogin = () => {
-        navigate('/login')
-    }
+        navigate('/login');
+    };
 
     return (
         <div>
@@ -50,31 +50,29 @@ const Navbar: React.FC<NavbarProps> = ({
                     </button>
                 </div>
                 {auth.isLoggedIn() ? (
-                            <>
-                                <div className="text-xl font-bold mt-2">
-                                    <Button
-                                        text={user? user.name : "Noname"}
-                                        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"
-                                    onClick={goToLogin}
-                                    />
-                                </div>
-                            </>
-                        )}
-               
+                    <>
+                        <div className="text-xl font-bold mt-2">
+                            <Button
+                                text={user ? user.name : 'Noname'}
+                                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"
+                                onClick={goToLogin}
+                            />
+                        </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 a0d2e52..6a51c94 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -14,8 +14,8 @@ const Login: React.FC = () => {
     const [username, setUsername] = useState('');
     const navigate = useNavigate();
     const auth = useAuth();
-    const user = auth.getUser();  
-    
+    const user = auth.getUser();
+
     const handleLogin = () => {
         setUsername(username);
         console.log(auth.isLoggedIn());
@@ -30,38 +30,39 @@ 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');
-        if(user?.name == name && user.pass == password){
-            console.log("Successful Login");
+        if (user?.name == name && user.pass == password) {
+            console.log('Successful Login');
             navigate('/home');
-        }else{
-            console.log("Failed Login");
+        } else {
+            console.log('Failed Login');
         }
     };
 
     useEffect(() => {
         setIsLoggedIn(auth.isLoggedIn());
         console.log(isLoggedIn);
-    }, [auth, auth.getUser(), auth.isLoggedIn()]);
+    }, [auth, auth.getUser(), isLoggedIn]);
 
     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={auth.isLoggedIn()}                   //true here so that navbar does not render signin/login button
+                    isLoggedIn={auth.isLoggedIn()} //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"
@@ -76,44 +77,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>
@@ -121,7 +129,6 @@ const Login: React.FC = () => {
                 </div>
             </div>
         </>
-        
     );
 };
 
diff --git a/frontend/src/pages/SignUp.tsx b/frontend/src/pages/SignUp.tsx
index f32598a..09d8970 100644
--- a/frontend/src/pages/SignUp.tsx
+++ b/frontend/src/pages/SignUp.tsx
@@ -15,7 +15,7 @@ const SignUp: React.FC = () => {
     const [username, setUsername] = useState('');
     const navigate = useNavigate();
     const auth = useAuth();
-    
+
     const handleLogin = () => {
         setUsername('Username_7');
         setIsLoggedIn(true);
@@ -26,7 +26,9 @@ const SignUp: React.FC = () => {
         setIsLoggedIn(false);
     };
 
-    const handelConfirmPassChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const handelConfirmPassChange = (
+        event: React.ChangeEvent<HTMLInputElement>
+    ) => {
         setConfirmPass(event.target.value);
     };
 
@@ -34,20 +36,21 @@ 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")
-            navigate('/')
-        }else{
-            console.log("failed signup");
+        if (password === confirmPass) {
+            auth.login(name, password);
+            console.log('successfull signup');
+            navigate('/');
+        } else {
+            console.log('failed signup');
         }
     };
 
@@ -56,20 +59,20 @@ const SignUp: React.FC = () => {
         console.log(user);
         setIsLoggedIn(auth.isLoggedIn());
         console.log(isLoggedIn);
-    }, [auth, auth.getUser(), auth.isLoggedIn()]);
+    }, [auth, auth.getUser(), isLoggedIn]);
 
     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"
@@ -83,54 +86,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>
@@ -138,7 +148,6 @@ const SignUp: React.FC = () => {
                 </div>
             </div>
         </>
-        
     );
 };