diff --git a/code/frontend/src/LoginAndSignUpPage.tsx b/code/frontend/src/LoginAndSignUpPage.tsx
index 98ae2de..7bfab91 100644
--- a/code/frontend/src/LoginAndSignUpPage.tsx
+++ b/code/frontend/src/LoginAndSignUpPage.tsx
@@ -1,38 +1,80 @@
 import "./loginAndSignUpPage.css";
-import { useState } from 'react';
+import { useState } from "react";
 
-
-function LoginAndSignUpPage(){
-    const toggleLogin=(event:React.MouseEvent<HTMLElement>)=>{event.preventDefault(); setSignup(!signup)};
-    const [signup, setSignup]= useState(false);
-    return(
-        <div className='login-display'>
-            <div className="login-login">
-                <div className='login-part'>
-                    <div className={signup? 'signup-image': 'login-image'}></div>
-                </div>
-                <div className='login-part' >
-                    <div className='login-text small-title'>
-                        {signup? "Sign Up": "Login"}
-                    </div>
-                    <div className='login-div-input'>
-                        <img className= 'login-icon' src='/assets/icons/email_orange.svg' alt="icon username"></img>
-                        <input type='text' className='login-input' placeholder='Username'></input>
-                    </div>
-                    {signup? <div className='login-div-input'>
-                        <img className= 'login-icon' src='\assets\icons\username_orange.svg' alt="icon email"></img>
-                        <input type='email' className='login-input' placeholder='Email'></input>
-                    </div> : ""}
-                    
-                    <div className='login-div-input'>
-                        <img className= 'login-icon' src='\assets\icons\password_orange.svg' alt="icon password"></img>
-                        <input type='password' className='login-input'placeholder='Password'></input>
-                    </div>
-                        <input type='button' className='login-button body-m' value={signup? "Sign up": "Login"}></input>
-                        <div className='login-signup body-m' onClick={toggleLogin}>{signup? "Already have an account?": "Don't have an account yet?"} Click <span className='login-here body-m'>here</span> {signup? "login.": "to sign up."}</div>
-                </div>
-            </div>
+function LoginAndSignUpPage() {
+  const toggleLogin = (event: React.MouseEvent<HTMLElement>) => {
+    event.preventDefault();
+    setSignup(!signup);
+  };
+  const [signup, setSignup] = useState(false);
+  return (
+    <div className="login-display">
+      <div className="login-login">
+        <div className="login-part">
+          <div className={signup ? "signup-image" : "login-image"}></div>
         </div>
-    );
+        <div className="login-part">
+          <div className="login-text small-title">
+            {signup ? "Sign Up" : "Login"}
+          </div>
+
+          <div className="input-fields">
+            <div className="login-div-input">
+              <img
+                className="login-icon"
+                src="/assets/icons/email_orange.svg"
+                alt="icon username"
+              ></img>
+              <input
+                type="text"
+                className="login-input"
+                placeholder="Username"
+              ></input>
+            </div>
+            {signup ? (
+              <div className="login-div-input">
+                <img
+                  className="login-icon"
+                  src="\assets\icons\username_orange.svg"
+                  alt="icon email"
+                ></img>
+                <input
+                  type="email"
+                  className="login-input"
+                  placeholder="Email"
+                ></input>
+              </div>
+            ) : (
+              ""
+            )}
+
+            <div className="login-div-input">
+              <img
+                className="login-icon"
+                src="\assets\icons\password_orange.svg"
+                alt="icon password"
+              ></img>
+              <input
+                type="password"
+                className="login-input"
+                placeholder="Password"
+              ></input>
+            </div>
+          </div>
+
+          <input
+            type="button"
+            className="login-button body-m"
+            value={signup ? "Sign up" : "Login"}
+          ></input>
+          <div className="login-signup body-m" onClick={toggleLogin}>
+            {signup ? "Already have an account?" : "Don't have an account yet?"}{" "}
+            Click <span className="login-here body-m">here</span>{" "}
+            {signup ? "to login." : "to sign up."}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }
-export default LoginAndSignUpPage
\ No newline at end of file
+export default LoginAndSignUpPage;
diff --git a/code/frontend/src/loginAndSignUpPage.css b/code/frontend/src/loginAndSignUpPage.css
index ca9498a..c78ecc0 100644
--- a/code/frontend/src/loginAndSignUpPage.css
+++ b/code/frontend/src/loginAndSignUpPage.css
@@ -11,7 +11,7 @@
 
 .login-text{
     display: flex;
-    padding: 8px 40px 40px 40px;
+    padding: 40px;
     flex-direction: column;
     justify-content: center;
     align-items: center;
@@ -99,7 +99,7 @@
     display: flex;
     padding: 8px 40px 40px 40px;
     flex-direction: column;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
     gap: 24px;
 }
@@ -162,8 +162,16 @@
         padding:3%;
         display: flex;
         flex-direction: column;
-        justify-content: center;
+        justify-content: space-between;
         align-items: center;
         gap: 24px;
-    }    
+    }   
+    
+    .input-fields {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        justify-content: center;
+        gap: 16px;
+    }
 }
\ No newline at end of file