diff --git a/code/frontend/src/App.tsx b/code/frontend/src/App.tsx
index 50d99bf..bb4ba15 100644
--- a/code/frontend/src/App.tsx
+++ b/code/frontend/src/App.tsx
@@ -1,11 +1,9 @@
-import React, { use } from 'react';
-import Login from './Login';
-import Header from './header';
+import LoginSignUpPage from './LoginAndSignUpPage';
 
 
 function App() {
   return (
-      <Login/>
+      <LoginSignUpPage/>
   );
 }
 
diff --git a/code/frontend/src/Login.tsx b/code/frontend/src/LoginAndSignUpPage.tsx
similarity index 93%
rename from code/frontend/src/Login.tsx
rename to code/frontend/src/LoginAndSignUpPage.tsx
index 7d13caa..2e9bc95 100644
--- a/code/frontend/src/Login.tsx
+++ b/code/frontend/src/LoginAndSignUpPage.tsx
@@ -1,11 +1,11 @@
 //import React, { use } from 'react';
-import "./Login.css";
+import "./loginAndSignUpPage.css";
 import { useState } from 'react'; //, useEffect
 import Header from './header';
 //import { url } from 'inspector';
 
 
-function Login(){
+function LoginAndSignUpPage(){
     const toggleLogin=(event:React.MouseEvent<HTMLElement>)=>{event.preventDefault(); setSignup(!signup)};
     const [signup, setSignup]= useState(false);
     return(
@@ -32,11 +32,11 @@ function Login(){
                         <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' value={signup? "Signup": "Login"}></input>
+                        <input type='button' className='login-button' value={signup? "Sign up": "Login"}></input>
                         <div className='login-signup'>{signup? "Already have an account?": "Don't have an account yet?"} Click <input type="button" className='login-link' onClick={toggleLogin} value={'here'}></input> {signup? "login": "to sign up"}</div>
                 </div>
             </div>
         </div>
     );
 }
-export default Login
\ No newline at end of file
+export default LoginAndSignUpPage
\ No newline at end of file
diff --git a/code/frontend/src/Login.css b/code/frontend/src/loginAndSignUpPage.css
similarity index 88%
rename from code/frontend/src/Login.css
rename to code/frontend/src/loginAndSignUpPage.css
index d377631..71c2374 100644
--- a/code/frontend/src/Login.css
+++ b/code/frontend/src/loginAndSignUpPage.css
@@ -1,11 +1,12 @@
 :root {
   --Rotkehlchen-gray: #e7ecf2;
-  --Rotkehlchen-brown1: #a28d7a;
+  --Rotkehlchen-brown-light: #a28d7a;
   --Rotkehlchen-orange-default: #e79a0e;
   --Rotkehlchen-gray-default: #E7ECF2;
   --Rotkehlchen-brown-middle: #7F6D6D;
   --Rotkehlchen-yellow-default: #FED640;
   --Rotkehlchen-yellow-hover: #EAC22A;
+  --Rotkehlchen-brown-dark: #4C4141;
 }
 
 .login-display{
@@ -75,19 +76,28 @@
     display: flex;
     flex-direction: row;
     border-radius: 4px;
-    border: 2px solid var(--Rotkehlchen-brown-middle);
+    border: 3px solid var(--Rotkehlchen-brown-dark);
     background: #FFF;
     width:100%;
-    height: 32px;
+    height: 44px;
     align-items: center;
     justify-content: flex-start;
 }
 
+.login-div-input:hover{
+    border: 3px solid var(--Rotkehlchen-brown-middle);
+}
+
+.login-div-input:focus-within{
+    border: 3px solid var(--Rotkehlchen-orange-default)
+}
+
 .login-input{
     width: 100%;
-    height: 28px;
+    height: 40px;
     border: none;
     color: var(--Rotkehlchen-brown-middle);
+    outline: 0 !important;
 
     /* M3/body/large */
     font-family: var(--Static-Body-Large-Font, Roboto);
@@ -130,7 +140,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 18px;
+    gap: 24px;
 }
 
 /* Desktop view*/
@@ -160,7 +170,7 @@
 
         border-radius: 8px;
         border: 5px solid var(--Rotkehlchen-gray-default);
-        background-image: url("../public/assets/images/BirdLogin.jpg");
+        background-image: url("../public/assets/images/IceBirdLogin.jpg");
         background-size: cover;
         background-position: 75%;
     }
@@ -176,9 +186,9 @@
 
         border-radius: 8px;
         border: 5px solid var(--Rotkehlchen-gray-default);
-        background-image: url("../public/assets/images/OwlSignUp.png");
+        background-image: url("../public/assets/images/SummerOwlSignup.jpg");
         background-size: cover;
-        background-position: 75%;
+        /*background-position: 75%;*/
     }
 
     .login-part{
@@ -189,7 +199,7 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        gap: 1%;
+        gap: 24px;
     }