diff --git a/frontend/src/app/components/auth/forgot-password/forgot-password.component.html b/frontend/src/app/components/auth/forgot-password/forgot-password.component.html
index a7a7ace..ac55434 100644
--- a/frontend/src/app/components/auth/forgot-password/forgot-password.component.html
+++ b/frontend/src/app/components/auth/forgot-password/forgot-password.component.html
@@ -1,4 +1,4 @@
-<section>
+<section class="login-background">
   <div class="content">
     <div class="headline">Forgot your password?</div>
     @if (!queryEmail && !sendMailSuccess && !queryEmailSuccess) {
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 d330175..2d0ac8a 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
@@ -1,7 +1,3 @@
+@use "./../../../../assets/style/backgrounds.scss" as *;
 @use "./../../../../assets/style/form.scss" as *;
 @use "./../../../../assets/style/auth-layout.scss" as *;
-
-section {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
-    url(./../../../../assets/img/backgrounds/login.jpeg);
-}
diff --git a/frontend/src/app/components/auth/landing-page/landing-page.component.html b/frontend/src/app/components/auth/landing-page/landing-page.component.html
index 9c165d7..8403cb3 100644
--- a/frontend/src/app/components/auth/landing-page/landing-page.component.html
+++ b/frontend/src/app/components/auth/landing-page/landing-page.component.html
@@ -1,4 +1,4 @@
-<section>
+<section class="home-background">
   <div class="headline">
     <p>Movies, TV shows, and more</p>
     <p>Watch whenever you want wherever you want</p>
diff --git a/frontend/src/app/components/auth/landing-page/landing-page.component.scss b/frontend/src/app/components/auth/landing-page/landing-page.component.scss
index d059e12..4e28842 100644
--- a/frontend/src/app/components/auth/landing-page/landing-page.component.scss
+++ b/frontend/src/app/components/auth/landing-page/landing-page.component.scss
@@ -1,12 +1,8 @@
+@use "./../../../../assets/style/backgrounds.scss" as *;
 @use "./../../../../assets/style/colors.scss" as *;
 @use "./../../../../assets/style/form.scss" as *;
 @use "./../../../../assets/style/auth-layout.scss" as *;
 
-section {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
-    url(./../../../../assets/img/backgrounds/home.jpeg);
-}
-
 .headline {
   p:nth-child(1) {
     font-size: 48px;
diff --git a/frontend/src/app/components/auth/login/login.component.html b/frontend/src/app/components/auth/login/login.component.html
index 506705d..45848c7 100644
--- a/frontend/src/app/components/auth/login/login.component.html
+++ b/frontend/src/app/components/auth/login/login.component.html
@@ -1,4 +1,4 @@
-<section>
+<section class="login-background">
   <div class="content">
     <div class="headline">Log in</div>
     <form
diff --git a/frontend/src/app/components/auth/login/login.component.scss b/frontend/src/app/components/auth/login/login.component.scss
index 2b98c4b..8190545 100644
--- a/frontend/src/app/components/auth/login/login.component.scss
+++ b/frontend/src/app/components/auth/login/login.component.scss
@@ -1,13 +1,9 @@
+@use "./../../../../assets/style/backgrounds.scss" as *;
 @use "./../../../../assets/style/colors.scss" as *;
 @use "./../../../../assets/style/form.scss" as *;
 @use "./../../../../assets/style/auth-layout.scss" as *;
 @use "./../../../../assets/style/checkbox.scss" as *;
 
-section {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
-    url(./../../../../assets/img/backgrounds/login.jpeg);
-}
-
 .content {
   position: relative;
 }
diff --git a/frontend/src/app/components/auth/register/register.component.html b/frontend/src/app/components/auth/register/register.component.html
index 0080e56..b077e87 100644
--- a/frontend/src/app/components/auth/register/register.component.html
+++ b/frontend/src/app/components/auth/register/register.component.html
@@ -1,4 +1,4 @@
-<section>
+<section class="register-background">
   <div class="content">
     <div class="headline">Sign Up</div>
     @if (registrationSuccess) {
diff --git a/frontend/src/app/components/auth/register/register.component.scss b/frontend/src/app/components/auth/register/register.component.scss
index 5fbca29..f261110 100644
--- a/frontend/src/app/components/auth/register/register.component.scss
+++ b/frontend/src/app/components/auth/register/register.component.scss
@@ -1,8 +1,4 @@
+@use "./../../../../assets/style/backgrounds.scss" as *;
 @use "./../../../../assets/style/form.scss" as *;
 @use "./../../../../assets/style/auth-layout.scss" as *;
 @use "./../../../../assets/style/checkbox.scss" as *;
-
-section {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
-    url(./../../../../assets/img/backgrounds/register.jpeg);
-}
diff --git a/frontend/src/app/components/auth/verify-email/verify-email.component.html b/frontend/src/app/components/auth/verify-email/verify-email.component.html
index 16ecf72..e17938b 100644
--- a/frontend/src/app/components/auth/verify-email/verify-email.component.html
+++ b/frontend/src/app/components/auth/verify-email/verify-email.component.html
@@ -1,4 +1,4 @@
-<section>
+<section class="login-background">
   <div class="content">
     <div class="headline">Verify Email</div>
     <div class="note">
diff --git a/frontend/src/app/components/auth/verify-email/verify-email.component.scss b/frontend/src/app/components/auth/verify-email/verify-email.component.scss
index 1c84a76..2d0ac8a 100644
--- a/frontend/src/app/components/auth/verify-email/verify-email.component.scss
+++ b/frontend/src/app/components/auth/verify-email/verify-email.component.scss
@@ -1,7 +1,3 @@
+@use "./../../../../assets/style/backgrounds.scss" as *;
 @use "./../../../../assets/style/form.scss" as *;
 @use "./../../../../assets/style/auth-layout.scss" as *;
-
-section {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
-    url(./../../../../assets/img/backgrounds/login.jpeg);
-}
diff --git a/frontend/src/assets/style/backgrounds.scss b/frontend/src/assets/style/backgrounds.scss
new file mode 100644
index 0000000..4462de4
--- /dev/null
+++ b/frontend/src/assets/style/backgrounds.scss
@@ -0,0 +1,19 @@
+@mixin background-image($path, $opacity) {
+  background-image: linear-gradient(
+      rgba(0, 0, 0, $opacity),
+      rgba(0, 0, 0, $opacity)
+    ),
+    url($path);
+}
+
+.login-background {
+  @include background-image("/assets/img/backgrounds/login.jpeg", 0.3);
+}
+
+.register-background {
+  @include background-image("/assets/img/backgrounds/register.jpeg", 0.3);
+}
+
+.home-background {
+  @include background-image("/assets/img/backgrounds/home.jpeg", 0.4);
+}