diff --git a/frontend/src/app/components/auth/auth.component.scss b/frontend/src/app/components/auth/auth.component.scss
index c12e540..f8d8399 100644
--- a/frontend/src/app/components/auth/auth.component.scss
+++ b/frontend/src/app/components/auth/auth.component.scss
@@ -3,7 +3,7 @@
 @use "./../../../assets/style/auth-layout.scss" as *;
 
 section {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
+  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
     url(./../../../assets/img/backgrounds/home.png);
 }
 
diff --git a/frontend/src/app/components/auth/forgot-password/forgot-password.component.scss b/frontend/src/app/components/auth/forgot-password/forgot-password.component.scss
index 37fe9c3..5b6369d 100644
--- a/frontend/src/app/components/auth/forgot-password/forgot-password.component.scss
+++ b/frontend/src/app/components/auth/forgot-password/forgot-password.component.scss
@@ -2,6 +2,6 @@
 @use "./../../../../assets/style/auth-layout.scss" as *;
 
 section {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
+  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
     url(./../../../../assets/img/backgrounds/login.png);
 }
diff --git a/frontend/src/app/components/auth/login/login.component.scss b/frontend/src/app/components/auth/login/login.component.scss
index 5fa8034..e5269e5 100644
--- a/frontend/src/app/components/auth/login/login.component.scss
+++ b/frontend/src/app/components/auth/login/login.component.scss
@@ -4,7 +4,7 @@
 @use "./../../../../assets/style/checkbox.scss" as *;
 
 section {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
+  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
     url(./../../../../assets/img/backgrounds/login.png);
 }
 
@@ -24,7 +24,6 @@ section {
   a {
     font-size: 18px;
     font-weight: 700;
-    color: $blue;
     text-decoration: none;
     cursor: pointer;
     &:hover {
@@ -38,8 +37,7 @@ section {
     gap: 24px;
     p {
       font-size: 18px;
-      font-weight: 700;
-      color: $black;
+      font-weight: 400;
     }
   }
 }
diff --git a/frontend/src/app/components/auth/register/register.component.scss b/frontend/src/app/components/auth/register/register.component.scss
index df3cc77..53d553f 100644
--- a/frontend/src/app/components/auth/register/register.component.scss
+++ b/frontend/src/app/components/auth/register/register.component.scss
@@ -3,6 +3,6 @@
 @use "./../../../../assets/style/checkbox.scss" as *;
 
 section {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
+  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
     url(./../../../../assets/img/backgrounds/register.png);
 }
diff --git a/frontend/src/app/components/home/browse/browse.component.html b/frontend/src/app/components/home/browse/browse.component.html
index 3b84321..2d50e67 100644
--- a/frontend/src/app/components/home/browse/browse.component.html
+++ b/frontend/src/app/components/home/browse/browse.component.html
@@ -5,7 +5,7 @@
   @if (playMovie === "") {
   <app-header
     (moviesChange)="onMoviesChange($event)"
-    [browse]="true"
+    [showFullLogo]="false"
   ></app-header>
   <!-- Hero Banner -->
   <app-hero-banner
@@ -99,7 +99,7 @@
   </div>
   } } @if (!isLoading && movies.length === 0) {
   <!-- If the database is empty -->
-  <app-header [browse]="true"></app-header>
+  <app-header [showFullLogo]="false"></app-header>
   <div class="error">
     <h2>Unfortunately there are no films available in the database.</h2>
   </div>
diff --git a/frontend/src/app/components/home/home.component.scss b/frontend/src/app/components/home/home.component.scss
index 7697209..04e99a5 100644
--- a/frontend/src/app/components/home/home.component.scss
+++ b/frontend/src/app/components/home/home.component.scss
@@ -1,4 +1,4 @@
 section {
-  width: 100vw;
-  height: 100vh;
+  width: 100dvw;
+  height: 100dvh;
 }
diff --git a/frontend/src/app/shared/components/buttons/btn-large/btn-large.component.scss b/frontend/src/app/shared/components/buttons/btn-large/btn-large.component.scss
index 3c86a39..49cbba9 100644
--- a/frontend/src/app/shared/components/buttons/btn-large/btn-large.component.scss
+++ b/frontend/src/app/shared/components/buttons/btn-large/btn-large.component.scss
@@ -12,13 +12,13 @@
   transition: 300ms ease-in-out;
   cursor: pointer;
   p {
-    color: white;
+    color: $white;
     font-size: 18px;
     font-weight: 600;
     margin: 0 4px 0 0;
   }
   &:not(:disabled):hover {
-    background-color: white;
+    background-color: $white;
     border: 1px solid $pure-blue;
     p {
       transition: 300ms ease-in-out;
@@ -31,9 +31,9 @@
     }
   }
   &:disabled {
-    background-color: lightblue;
-    color: color-mix(in srgb, white 90%, black 10%);
-    border: 1px solid lightblue;
+    background-color: $dark-gray;
+    color: color-mix(in srgb, $white 90%, $black 10%);
+    border: 1px solid $dark-gray;
     cursor: default;
   }
   .icon {
diff --git a/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.scss b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.scss
index 55a0c6c..e0535b6 100644
--- a/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.scss
+++ b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.scss
@@ -13,7 +13,7 @@
   transition: 300ms ease-in-out;
   cursor: pointer;
   &:not(:disabled):hover {
-    background-color: white;
+    background-color: $white;
     border: 1px solid $pure-blue;
     .icon {
       transition: 300ms ease-in-out;
@@ -22,9 +22,9 @@
     }
   }
   &:disabled {
-    background-color: lightblue;
-    color: color-mix(in srgb, white 90%, black 10%);
-    border: 1px solid lightblue;
+    background-color: $dark-gray;
+    color: color-mix(in srgb, $white 90%, $black 10%);
+    border: 1px solid $dark-gray;
     cursor: default;
   }
   .icon {
diff --git a/frontend/src/app/shared/components/header/header.component.html b/frontend/src/app/shared/components/header/header.component.html
index 12f5967..acf9cbb 100644
--- a/frontend/src/app/shared/components/header/header.component.html
+++ b/frontend/src/app/shared/components/header/header.component.html
@@ -1,5 +1,15 @@
 <header>
-  @if (browse) {
+  @if (showFullLogo) {
+  <div class="logo-full" routerLink="/">
+    <img src="./../../../../assets/img/logo_full.svg" alt="" />
+  </div>
+  <div class="logo-mobile" routerLink="/">
+    <img src="./../../../../assets/img/logo_ci.svg" alt="" />
+  </div>
+  <div class="btn">
+    <app-btn-large [value]="'Log in'" routerLink="/login"></app-btn-large>
+  </div>
+  } @else {
   <div class="logo" (click)="backToOverview([])">
     <img src="./../../../../assets/img/logo_ci.svg" alt="" />
   </div>
@@ -10,15 +20,5 @@
       (click)="logout()"
     ></app-btn-large>
   </div>
-  } @else {
-  <div class="logo-full" routerLink="/">
-    <img src="./../../../../assets/img/logo_full.svg" alt="" />
-  </div>
-  <div class="logo-mobile" routerLink="/">
-    <img src="./../../../../assets/img/logo_ci.svg" alt="" />
-  </div>
-  <div class="btn">
-    <app-btn-large [value]="'Log in'" routerLink="/login"></app-btn-large>
-  </div>
   }
 </header>
diff --git a/frontend/src/app/shared/components/header/header.component.ts b/frontend/src/app/shared/components/header/header.component.ts
index 62f4765..7c1b71e 100644
--- a/frontend/src/app/shared/components/header/header.component.ts
+++ b/frontend/src/app/shared/components/header/header.component.ts
@@ -10,7 +10,7 @@ import { Router, RouterLink } from '@angular/router';
   styleUrl: './header.component.scss',
 })
 export class HeaderComponent {
-  @Input() browse: boolean = false;
+  @Input() showFullLogo: boolean = true;
   @Output() moviesChange = new EventEmitter<any[]>();
 
   constructor(private router: Router) {}
diff --git a/frontend/src/assets/style/auth-layout.scss b/frontend/src/assets/style/auth-layout.scss
index e78a7e7..41c843c 100644
--- a/frontend/src/assets/style/auth-layout.scss
+++ b/frontend/src/assets/style/auth-layout.scss
@@ -10,8 +10,8 @@ section {
   bottom: 0;
   left: 0;
   right: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100dvw;
+  height: 100dvh;
   text-align: center;
   background-size: cover;
   background-position: center;
@@ -21,20 +21,18 @@ section {
 .content {
   width: 520px;
   height: fit-content;
-  padding: 43px 56px;
+  padding: 32px;
   border-radius: 48px;
-  background-color: $white;
+  background-color: rgba(30, 28, 33, 0.85);
   .headline {
     font-size: 48px;
     font-weight: 700;
-    color: $blue;
     margin-bottom: 24px;
   }
 }
 
 .note {
   p {
-    color: $black;
     font-size: 18px;
     font-weight: 400;
     margin: 36px 0 24px 0;
@@ -42,7 +40,6 @@ section {
   a {
     font-size: 18px;
     font-weight: 700;
-    color: $blue;
     text-decoration: none;
     cursor: pointer;
     &:hover {
@@ -55,7 +52,7 @@ section {
 
 @media screen and (max-width: 660px) {
   .content {
-    padding: 43px 24px;
+    padding: 28px;
     .headline {
       font-size: 36px;
     }
@@ -70,6 +67,6 @@ section {
 
 @media screen and (max-width: 400px) {
   .content {
-    padding: 24px 18px;
+    padding: 24px;
   }
 }
diff --git a/frontend/src/assets/style/checkbox.scss b/frontend/src/assets/style/checkbox.scss
index 119dae3..59f305d 100644
--- a/frontend/src/assets/style/checkbox.scss
+++ b/frontend/src/assets/style/checkbox.scss
@@ -11,7 +11,6 @@
 }
 
 .container {
-  color: $black;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -19,8 +18,7 @@
   cursor: pointer;
   a {
     font-size: 16px;
-    font-weight: 400;
-    color: $blue;
+    font-weight: 700;
     text-decoration: none;
     cursor: pointer;
     &:hover {
@@ -43,14 +41,14 @@
   left: 0;
   height: 22px;
   width: 22px;
-  box-shadow: 1px 1px 3px rgba($black, 0.3);
-  background-color: rgba($black, 0.1);
+  box-shadow: 1px 1px 3px rgba($white, 0.3);
+  background-color: rgba($white, 0.1);
   transition: background-color 300ms ease-in-out;
 }
 
 .container:hover input ~ .checkmark {
-  box-shadow: 1px 1px 3px rgba($black, 0.5);
-  background-color: rgba($black, 0.3);
+  box-shadow: 1px 1px 3px rgba($white, 0.5);
+  background-color: rgba($white, 0.3);
 }
 
 .container input:checked ~ .checkmark {
diff --git a/frontend/src/assets/style/colors.scss b/frontend/src/assets/style/colors.scss
index 22662fd..ca97706 100644
--- a/frontend/src/assets/style/colors.scss
+++ b/frontend/src/assets/style/colors.scss
@@ -2,6 +2,7 @@
 $white: #fff;
 $black: #000;
 $gray: #ababab;
+$dark-gray: #5e5e5e;
 $blue: #2e3edf;
 $pure-blue: #0000ff;
 $light-blue: #969eef;
diff --git a/frontend/src/assets/style/form.scss b/frontend/src/assets/style/form.scss
index 73459e5..763ac0b 100644
--- a/frontend/src/assets/style/form.scss
+++ b/frontend/src/assets/style/form.scss
@@ -12,7 +12,6 @@ form {
     padding: 12px 18px;
     box-sizing: border-box;
     background: transparent;
-    color: $blue;
     border: 1px solid $blue;
     border-radius: 12px;
     font-size: 18px;
@@ -21,7 +20,7 @@ form {
     transition: background-color 250ms ease-in-out, color 250ms ease-in-out,
       border-color 250ms ease-in-out;
     &::placeholder {
-      color: rgba($blue, 0.6);
+      color: rgba($white, 0.6);
     }
     &:focus {
       outline: none;