diff --git a/code/frontend/src/pages/LoginAndSignUpPage.tsx b/code/frontend/src/pages/LoginAndSignUpPage.tsx
index 7bfab91..e714ead 100644
--- a/code/frontend/src/pages/LoginAndSignUpPage.tsx
+++ b/code/frontend/src/pages/LoginAndSignUpPage.tsx
@@ -8,7 +8,7 @@ function LoginAndSignUpPage() {
   };
   const [signup, setSignup] = useState(false);
   return (
-    <div className="login-display">
+    <div className="background">
       <div className="login-login">
         <div className="login-part">
           <div className={signup ? "signup-image" : "login-image"}></div>
diff --git a/code/frontend/src/pages/loginAndSignUpPage.css b/code/frontend/src/pages/loginAndSignUpPage.css
index 56460ed..b7c93c6 100644
--- a/code/frontend/src/pages/loginAndSignUpPage.css
+++ b/code/frontend/src/pages/loginAndSignUpPage.css
@@ -1,4 +1,4 @@
-.login-display{
+.background{
     display: flex;
     flex-direction: column;
     height: 100vh; /* Full viewport height */
@@ -6,7 +6,7 @@
     background: var(--gradient-blue-backround-mobile);
     align-items: center;
     justify-content: center;
-    
+    background-attachment: fixed;
 }
 
 .login-text{
diff --git a/code/frontend/src/styles/colors.css b/code/frontend/src/styles/colors.css
index fb1d5e8..ed581ba 100644
--- a/code/frontend/src/styles/colors.css
+++ b/code/frontend/src/styles/colors.css
@@ -1,10 +1,19 @@
 :root {
-    --Rotkehlchen-gray: #e7ecf2;
-    --Rotkehlchen-brown-light: #a28d7a;
-    --Rotkehlchen-brown-middle: #7F6D6D;
-    --Rotkehlchen-brown-dark: #4C4141;
-    --Rotkehlchen-yellow-default: #FED640;
-    --Rotkehlchen-yellow-hover: #EAC22A;
-    --Rotkehlchen-orange-default: #e79a0e;
-    --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;
-  }
\ No newline at end of file
+  --Rotkehlchen-gray: #e7ecf2;
+  --Rotkehlchen-brown-light: #a28d7a;
+  --Rotkehlchen-brown-middle: #7f6d6d;
+  --Rotkehlchen-brown-dark: #4c4141;
+  --Rotkehlchen-yellow-default: #fed640;
+  --Rotkehlchen-yellow-hover: #eac22a;
+  --Rotkehlchen-orange-default: #e79a0e;
+  --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.9) 68%
+    ),
+    url("../../public/assets/images/BirdsSky.jpg") lightgray 50% / cover
+      no-repeat;
+}