diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 5e4325f..5934725 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -1,7 +1,7 @@
 import {Component, EventEmitter, HostListener, OnInit, Output} from '@angular/core';
 import {CommonModule} from "@angular/common";
 import {Router, RouterModule} from "@angular/router";
-import {DropdownDirective} from "../shared/dropdown.directive";
+import {DropdownDirective} from "../shared/directives/dropdown.directive";
 import {AuthService} from "../auth/auth.service";
 import {ScreenSizeService} from "../shared/screen-size.service";
 
diff --git a/src/app/shared/directives/background-fluid.directive.ts b/src/app/shared/directives/background-fluid.directive.ts
new file mode 100644
index 0000000..1cc5761
--- /dev/null
+++ b/src/app/shared/directives/background-fluid.directive.ts
@@ -0,0 +1,66 @@
+import { Directive, ElementRef, Renderer2, OnInit } from '@angular/core';
+
+@Directive({
+  standalone: true,
+  selector: '[appBackgroundFluid]'
+})
+// adds svg element to parent element creating the fluid background.
+export class BackgroundFluidDirective implements OnInit {
+
+  private readonly backgroundColor = '#89ecda';
+  private readonly colorOutTop = '#10898d';
+  private readonly colorInTop = '#89ecda';
+  private readonly colorOutBottom = '#046169';
+  private readonly colorInBottom = '#89ecda';
+
+  private readonly top = '7%';
+  private readonly width = '100%';
+  private readonly height = '93%';
+  private readonly zIndex = '-1';
+
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  ngOnInit() {
+    const svg = this.renderer.createElement('svg', 'svg');
+    this.renderer.setAttribute(svg, 'preserveAspectRatio', 'xMidYMid slice');
+    this.renderer.setAttribute(svg, 'viewBox', '10 10 80 80');
+    this.renderer.setStyle(svg, 'position', 'fixed');
+    this.renderer.setStyle(svg, 'left', '0');
+    this.renderer.setStyle(svg, 'top', this.top);
+    this.renderer.setStyle(svg, 'background-color', this.backgroundColor);
+    this.renderer.setStyle(svg, 'width', this.width);
+    this.renderer.setStyle(svg, 'height', this.height);
+    this.renderer.setStyle(svg, 'z-index', this.zIndex);
+
+    const style = this.renderer.createElement('style');
+    style.textContent = `
+      @keyframes rotate {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      .out-top { animation: rotate 20s linear infinite; transform-origin: 13px 25px; }
+      .in-top { animation: rotate 10s linear infinite; transform-origin: 13px 25px; }
+      .out-bottom { animation: rotate 25s linear infinite; transform-origin: 84px 93px; }
+      .in-bottom { animation: rotate 15s linear infinite; transform-origin: 84px 93px; }
+    `;
+    this.renderer.appendChild(svg, style);
+
+    const paths = [
+      { fill: this.colorOutTop, class: 'out-top', d: 'M37-5C25.1-14.7,5.7-19.1-9.2-10-28.5,1.8-32.7,31.1-19.8,49c15.5,21.5,52.6,22,67.2,2.3C59.4,35,53.7,8.5,37-5Z' },
+      { fill: this.colorInTop, class: 'in-top', d: 'M20.6,4.1C11.6,1.5-1.9,2.5-8,11.2-16.3,23.1-8.2,45.6,7.4,50S42.1,38.9,41,24.5C40.2,14.1,29.4,6.6,20.6,4.1Z' },
+      { fill: this.colorOutBottom, class: 'out-bottom', d: 'M105.9,48.6c-12.4-8.2-29.3-4.8-39.4.8-23.4,12.8-37.7,51.9-19.1,74.1s63.9,15.3,76-5.6c7.6-13.3,1.8-31.1-2.3-43.8C117.6,63.3,114.7,54.3,105.9,48.6Z' },
+      { fill: this.colorInBottom, class: 'in-bottom', d: 'M102,67.1c-9.6-6.1-22-3.1-29.5,2-15.4,10.7-19.6,37.5-7.6,47.8s35.9,3.9,44.5-12.5C115.5,92.6,113.9,74.6,102,67.1Z' }
+    ];
+
+    paths.forEach(pathData => {
+      const path = this.renderer.createElement('path', 'svg');
+      this.renderer.setAttribute(path, 'fill', pathData.fill);
+      this.renderer.setAttribute(path, 'class', pathData.class);
+      this.renderer.setAttribute(path, 'd', pathData.d);
+      this.renderer.appendChild(svg, path);
+    });
+
+    this.renderer.appendChild(this.el.nativeElement, svg);
+  }
+}
diff --git a/src/app/shared/dropdown.directive.ts b/src/app/shared/directives/dropdown.directive.ts
similarity index 100%
rename from src/app/shared/dropdown.directive.ts
rename to src/app/shared/directives/dropdown.directive.ts
diff --git a/src/app/user/log-in/log-in.component.css b/src/app/user/log-in/log-in.component.css
index 09b7af6..3790a83 100644
--- a/src/app/user/log-in/log-in.component.css
+++ b/src/app/user/log-in/log-in.component.css
@@ -51,35 +51,3 @@ button:disabled {
 }
 
 
-
-
-
-
-
-
-svg {
-  position: fixed;
-  background-color: #89ecda;
-  top: 7%;
-  left: 0;
-  width: 100%;
-  height: 93%;
-  z-index: -1;
-}
-
-
-a {
-  text-decoration: none;
-  color: black;
-  margin-left: 1em;
-}
-a:hover {
-  text-decoration: underline;
-}
-a img.icon {
-  display: inline-block;
-  height: 1em;
-  margin: 0 0 -0.1em 0.3em;
-}
-
-
diff --git a/src/app/user/log-in/log-in.component.html b/src/app/user/log-in/log-in.component.html
index 1577692..8cd19f4 100644
--- a/src/app/user/log-in/log-in.component.html
+++ b/src/app/user/log-in/log-in.component.html
@@ -1,4 +1,4 @@
-<div style="display: flex; height: 70%; flex-direction: column; justify-content: center">
+<div style="display: flex; height: 100%; flex-direction: column; justify-content: center" appBackgroundFluid>
   <div class="login-container">
     <h2>Login</h2>
     <form (ngSubmit)="onSubmit()">
@@ -13,44 +13,6 @@ <h2>Login</h2>
       <button type="submit" [disabled]="!username || !password">Login</button>
     </form>
   </div>
-
-  <svg preserveAspectRatio="xMidYMid slice" viewBox="10 10 80 80">
-    <defs>
-      <style>
-        @keyframes rotate {
-          0% {
-            transform: rotate(0deg);
-          }
-          100% {
-            transform: rotate(360deg);
-          }
-        }
-        .out-top {
-          animation: rotate 20s linear infinite;
-          transform-origin: 13px 25px;
-        }
-        .in-top {
-          animation: rotate 10s linear infinite;
-          transform-origin: 13px 25px;
-        }
-        .out-bottom {
-          animation: rotate 25s linear infinite;
-          transform-origin: 84px 93px;
-        }
-        .in-bottom {
-          animation: rotate 15s linear infinite;
-          transform-origin: 84px 93px;
-        }
-      </style>
-    </defs>
-    <path fill="#10898d" class="out-top" d="M37-5C25.1-14.7,5.7-19.1-9.2-10-28.5,1.8-32.7,31.1-19.8,49c15.5,21.5,52.6,22,67.2,2.3C59.4,35,53.7,8.5,37-5Z"/>
-    <path fill="#89ecda" class="in-top" d="M20.6,4.1C11.6,1.5-1.9,2.5-8,11.2-16.3,23.1-8.2,45.6,7.4,50S42.1,38.9,41,24.5C40.2,14.1,29.4,6.6,20.6,4.1Z"/>
-    <path fill="#046169" class="out-bottom" d="M105.9,48.6c-12.4-8.2-29.3-4.8-39.4.8-23.4,12.8-37.7,51.9-19.1,74.1s63.9,15.3,76-5.6c7.6-13.3,1.8-31.1-2.3-43.8C117.6,63.3,114.7,54.3,105.9,48.6Z"/>
-    <path fill="#89ecda" class="in-bottom" d="M102,67.1c-9.6-6.1-22-3.1-29.5,2-15.4,10.7-19.6,37.5-7.6,47.8s35.9,3.9,44.5-12.5C115.5,92.6,113.9,74.6,102,67.1Z"/>
-  </svg>
-
-
-
 </div>
 
 
diff --git a/src/app/user/log-in/log-in.component.ts b/src/app/user/log-in/log-in.component.ts
index 4a977ac..c99b069 100644
--- a/src/app/user/log-in/log-in.component.ts
+++ b/src/app/user/log-in/log-in.component.ts
@@ -4,12 +4,14 @@ import {FormsModule} from "@angular/forms";
 import {AuthService} from "../../auth/auth.service";
 import {SnackbarService} from "../../shared/snackbar/snackbar.service";
 import {SnackbarType} from "../../shared/snackbar/snackbar-type";
+import {BackgroundFluidDirective} from "../../shared/directives/background-fluid.directive";
 
 @Component({
   selector: 'app-log-in',
   standalone: true,
   imports: [
-    FormsModule
+    FormsModule,
+    BackgroundFluidDirective
   ],
   templateUrl: './log-in.component.html',
   styleUrl: './log-in.component.css'
diff --git a/src/app/user/register/register.component.css b/src/app/user/register/register.component.css
index 6386244..fcfea71 100644
--- a/src/app/user/register/register.component.css
+++ b/src/app/user/register/register.component.css
@@ -5,6 +5,7 @@
   border: 1px solid #ccc;
   border-radius: 5px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  background-color: white;
 }
 
 h2 {
diff --git a/src/app/user/register/register.component.html b/src/app/user/register/register.component.html
index 34268ab..30fe123 100644
--- a/src/app/user/register/register.component.html
+++ b/src/app/user/register/register.component.html
@@ -1,22 +1,24 @@
-<div class="register-container">
-  <h2>Register</h2>
-  <form (ngSubmit)="onSubmit()">
-    <div class="form-group">
-      <label for="login">Login:</label>
-      <input type="text" id="login" [(ngModel)]="login" name="login" required>
-    </div>
-    <div class="form-group">
-      <label for="username">Username:</label>
-      <input type="text" id="username" [(ngModel)]="username" name="username" required>
-    </div>
-    <div class="form-group">
-      <label for="password">Password:</label>
-      <input type="password" id="password" [(ngModel)]="password" name="password" required>
-    </div>
-    <div class="form-group">
-      <label for="confirmPassword">Confirm Password:</label>
-      <input type="password" id="confirmPassword" [(ngModel)]="confirmPassword" name="confirmPassword" required>
-    </div>
-    <button type="submit" [disabled]="!login || !username || !password || !confirmPassword || password !== confirmPassword">Register</button>
-  </form>
+<div style="display: flex; height: 100%; flex-direction: column; justify-content: center" appBackgroundFluid>
+  <div class="register-container">
+    <h2>Register</h2>
+    <form (ngSubmit)="onSubmit()">
+      <div class="form-group">
+        <label for="login">Login:</label>
+        <input type="text" id="login" [(ngModel)]="login" name="login" required>
+      </div>
+      <div class="form-group">
+        <label for="username">Username:</label>
+        <input type="text" id="username" [(ngModel)]="username" name="username" required>
+      </div>
+      <div class="form-group">
+        <label for="password">Password:</label>
+        <input type="password" id="password" [(ngModel)]="password" name="password" required>
+      </div>
+      <div class="form-group">
+        <label for="confirmPassword">Confirm Password:</label>
+        <input type="password" id="confirmPassword" [(ngModel)]="confirmPassword" name="confirmPassword" required>
+      </div>
+      <button type="submit" [disabled]="!login || !username || !password || !confirmPassword || password !== confirmPassword">Register</button>
+    </form>
+  </div>
 </div>
diff --git a/src/app/user/register/register.component.ts b/src/app/user/register/register.component.ts
index 36d00b7..23c71d6 100644
--- a/src/app/user/register/register.component.ts
+++ b/src/app/user/register/register.component.ts
@@ -4,12 +4,14 @@ import {FormsModule} from "@angular/forms";
 import {AuthService} from "../../auth/auth.service";
 import {SnackbarService} from "../../shared/snackbar/snackbar.service";
 import {SnackbarType} from "../../shared/snackbar/snackbar-type";
+import {BackgroundFluidDirective} from "../../shared/directives/background-fluid.directive";
 
 @Component({
   selector: 'app-register',
   standalone: true,
   imports: [
-    FormsModule
+    FormsModule,
+    BackgroundFluidDirective
   ],
   templateUrl: './register.component.html',
   styleUrl: './register.component.css'