diff --git a/code/frontend/src/App.tsx b/code/frontend/src/App.tsx
index bb4ba15..917c5d6 100644
--- a/code/frontend/src/App.tsx
+++ b/code/frontend/src/App.tsx
@@ -1,9 +1,16 @@
-import LoginSignUpPage from './LoginAndSignUpPage';
-
+import React, { use } from 'react';
+import logo from './logo.svg';
+import './App.css';
+import { useState, useEffect } from 'react';
+import Footer from './Footer';
+import Header from './header';
+import LoginAndSignUpPage from './LoginAndSignUpPage';
 
 function App() {
   return (
-      <LoginSignUpPage/>
+    <div className="App">
+      <LoginAndSignUpPage></LoginAndSignUpPage>
+    </div>
   );
 }
 
diff --git a/code/frontend/src/LoginAndSignUpPage.tsx b/code/frontend/src/LoginAndSignUpPage.tsx
index 2e9bc95..1c2902b 100644
--- a/code/frontend/src/LoginAndSignUpPage.tsx
+++ b/code/frontend/src/LoginAndSignUpPage.tsx
@@ -10,7 +10,7 @@ function LoginAndSignUpPage(){
     const [signup, setSignup]= useState(false);
     return(
         <div className='login-display'>
-            <Header></Header>
+            <Header/>
             <div className="login-login">
                 <div className='login-part'>
                     <div className={signup? 'signup-image': 'login-image'}></div>
@@ -33,7 +33,7 @@ function LoginAndSignUpPage(){
                         <input type='password' className='login-input'placeholder='Password'></input>
                     </div>
                         <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 className='login-signup' onClick={toggleLogin}>{signup? "Already have an account?": "Don't have an account yet?"} Click <span className='login-here'>here</span> {signup? "login": "to sign up"}</div>
                 </div>
             </div>
         </div>
diff --git a/code/frontend/src/loginAndSignUpPage.css b/code/frontend/src/loginAndSignUpPage.css
index 71c2374..e9790af 100644
--- a/code/frontend/src/loginAndSignUpPage.css
+++ b/code/frontend/src/loginAndSignUpPage.css
@@ -18,8 +18,7 @@
     background: var(--gradient-blue-backround-mobile, linear-gradient(270deg, rgba(20, 15, 86, 0.27) 0%, rgba(20, 15, 86, 0.58) 24%, rgba(20, 15, 86, 0.74) 43%, rgba(17, 13, 71, 0.82) 56%, rgba(13, 10, 56, 0.90) 68%), url('../public/assets/images/BirdsSky.jpg') lightgray 50% / cover no-repeat);
     align-items: center;
     justify-content: center;
-    min-width: 300px;
-    min-height: 400px;
+    
 }
 
 .login-text{
@@ -55,6 +54,7 @@
     gap: 10px;
     width: 150px;
     height: 32px;
+    cursor: pointer;
 
     border-radius: 10px;
     border: 2px solid var(--Rotkehlchen-orange-default);
@@ -107,11 +107,12 @@
     line-height: var(--Static-Body-Large-Line-Height, 24px); /* 150% */
     letter-spacing: var(--Static-Body-Large-Tracking, 0.5px);
 }
-.login-link{
+.login-here{
     color: var(--Rotkehlchen-orange-default, #E79A0E);
     background-color: transparent;
     border: none;
     text-decoration: underline;
+    cursor: pointer;
     /* Body-M */
     font-family: Inter;
     font-size: 16px;
@@ -124,6 +125,7 @@
 .login-signup{
     color: #FFF;
     text-align: center;
+    cursor: pointer;
 
     /* Body-M */
     font-family: Inter;
@@ -145,6 +147,10 @@
 
 /* Desktop view*/
 @media only screen and (min-width: 768px) {
+    .login-display{
+        min-width: 850px;
+        min-height: 800px;
+    }
     .login-login{
         display: flex;
         flex-direction: row;
@@ -155,8 +161,8 @@
         justify-content: start;
         width: 50vw;
         height: 60vh;
-        min-height: 300px;
-        min-width: 400px;
+        min-height: 400px;
+        min-width: 500px;
     }
     
     .login-image{