diff --git a/code/frontend/public/assets/images/OwlSignUp.png b/code/frontend/public/assets/images/OwlSignUp.png
new file mode 100644
index 0000000..112ac2d
Binary files /dev/null and b/code/frontend/public/assets/images/OwlSignUp.png differ
diff --git a/code/frontend/src/Login.css b/code/frontend/src/Login.css
index e042fc3..bca755c 100644
--- a/code/frontend/src/Login.css
+++ b/code/frontend/src/Login.css
@@ -126,6 +126,22 @@
     background-position: 75%;
 }
 
+.signup-image{
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 8px;
+    border: 5px solid var(--Rotkehlchen-gray-default);
+    background-image: url("../public/assets/images/OwlSignUp.png");
+    background-size: cover;
+    background-position: 75%;
+}
+
 .login-part{
     width: 45%;
     height: 90%;
@@ -160,4 +176,9 @@
     font-weight: 600;
     line-height: 17px;
     letter-spacing: 0.8px;
+}
+
+/* Desktop view*/
+@media only screen and (min-width: 768px) {
+  
 }
\ No newline at end of file
diff --git a/code/frontend/src/Login.tsx b/code/frontend/src/Login.tsx
index bd4e8e4..e957fda 100644
--- a/code/frontend/src/Login.tsx
+++ b/code/frontend/src/Login.tsx
@@ -2,31 +2,38 @@ import React, { use } from 'react';
 import "./Login.css";
 import { useState, useEffect } from 'react';
 import Header from './header';
+import { url } from 'inspector';
 
 
 function Login(){
+    const toggleLogin=(event:React.MouseEvent<HTMLElement>)=>{event.preventDefault(); setSignup(!signup)};
+    const [signup, setSignup]= useState(false);
     return(
         <div className='login-display'>
             <Header></Header>
             <div className="login-login">
                 <div className='login-part'>
-                    <div className='login-image'></div>
+                    <div className={signup? 'signup-image': 'login-image'}></div>
                 </div>
                 <div className='login-part' >
                     <div className='login-text'>
-                        Login
+                        {signup? "Sign Up": "Login"}
                     </div>
                     <div className='login-div-input'>
-                        <img className= 'login-icon' src='\assets\icons\username_orange.svg'></img>
+                        <img className= 'login-icon' src='/assets/icons/email_orange.svg'></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'></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'></img>
                         <input type='password' className='login-input'placeholder='Password'></input>
                     </div>
-                        <input type='button' className='login-button' value='Login'></input>
-                        <div className='login-signup'>Don't have an account yet? Click <a href='' className='login-link'>here</a> to sign up</div>
+                        <input type='button' className='login-button' value={signup? "Signup": "Login"}></input>
+                        <div className='login-signup'>{signup? "Already have an account?": "Don't have an account yet?"} Click <a href='' className='login-link' onClick={toggleLogin}>here</a> {signup? "login": "to sign up"}</div>
                 </div>
             </div>
         </div>