diff --git a/frontend/package.json b/frontend/package.json
index 773b7d7..c4c71fe 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,6 +29,7 @@
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
     "@types/dompurify": "^3.0.5",
+    "chroma-js": "^2.4.2",
     "crypto-js": "^4.2.0",
     "dompurify": "^3.1.3",
     "primeicons": "^7.0.0",
@@ -46,6 +47,7 @@
     "@angular-eslint/template-parser": "17.2.1",
     "@angular/cli": "^17.3.0",
     "@angular/compiler-cli": "^17.3.0",
+    "@types/chroma-js": "^2.4.4",
     "@types/crypto-js": "^4.2.2",
     "@types/jest": "^29.5.12",
     "@typescript-eslint/eslint-plugin": "6.19.0",
@@ -64,6 +66,7 @@
     "postcss": "^8.4.38",
     "prettier": "3.2.5",
     "tailwindcss": "^3.4.4",
+    "tailwindcss-animated": "^1.1.2",
     "typescript": "~5.4.2",
     "wait-on": "^7.2.0"
   },
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index e92a955..0c54529 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -32,6 +32,9 @@ dependencies:
   '@types/dompurify':
     specifier: ^3.0.5
     version: 3.0.5
+  chroma-js:
+    specifier: ^2.4.2
+    version: 2.4.2
   crypto-js:
     specifier: ^4.2.0
     version: 4.2.0
@@ -79,6 +82,9 @@ devDependencies:
   '@angular/compiler-cli':
     specifier: ^17.3.0
     version: 17.3.0(@angular/compiler@17.3.0)(typescript@5.4.2)
+  '@types/chroma-js':
+    specifier: ^2.4.4
+    version: 2.4.4
   '@types/crypto-js':
     specifier: ^4.2.2
     version: 4.2.2
@@ -133,6 +139,9 @@ devDependencies:
   tailwindcss:
     specifier: ^3.4.4
     version: 3.4.4
+  tailwindcss-animated:
+    specifier: ^1.1.2
+    version: 1.1.2(tailwindcss@3.4.4)
   typescript:
     specifier: ~5.4.2
     version: 5.4.2
@@ -3155,6 +3164,10 @@ packages:
       '@types/node': 20.11.27
     dev: true
 
+  /@types/chroma-js@2.4.4:
+    resolution: {integrity: sha512-/DTccpHTaKomqussrn+ciEvfW4k6NAHzNzs/sts1TCqg333qNxOhy8TNIoQCmbGG3Tl8KdEhkGAssb1n3mTXiQ==}
+    dev: true
+
   /@types/connect-history-api-fallback@1.5.4:
     resolution: {integrity: sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==}
     dependencies:
@@ -4352,6 +4365,10 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /chroma-js@2.4.2:
+    resolution: {integrity: sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A==}
+    dev: false
+
   /chrome-trace-event@1.0.3:
     resolution: {integrity: sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==}
     engines: {node: '>=6.0'}
@@ -9543,6 +9560,14 @@ packages:
       tslib: 2.6.2
     dev: true
 
+  /tailwindcss-animated@1.1.2(tailwindcss@3.4.4):
+    resolution: {integrity: sha512-SI4owS5ojserhgEYIZA/uFVdNjU2GMB2P3sjtjmFA52VxoUi+Hht6oR5+RdT+CxrX9cNNYEa+vbTWHvN9zbj3w==}
+    peerDependencies:
+      tailwindcss: '>=3.1.0'
+    dependencies:
+      tailwindcss: 3.4.4
+    dev: true
+
   /tailwindcss@3.4.4:
     resolution: {integrity: sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==}
     engines: {node: '>=14.0.0'}
diff --git a/frontend/src/app/pages/register-root/register-root.component.html b/frontend/src/app/pages/register-root/register-root.component.html
index 1915a6a..e2695f8 100644
--- a/frontend/src/app/pages/register-root/register-root.component.html
+++ b/frontend/src/app/pages/register-root/register-root.component.html
@@ -108,89 +108,257 @@
     </div>
   }
 </div> -->
-<div class="flex h-screen w-screen">
-  <div class="hidden md:flex md:flex-col md:w-1/2 bg-primary">
-    <div class="flex-1 flex items-start pt-16 px-12">
-      <h1 class="text-3xl text-base-100">[LOGO] APP-NAME</h1>
+
+@if (!userSignupSuccess()) {
+  <div class="flex h-screen w-screen">
+    <div class="hidden md:flex md:flex-col md:w-1/2 bg-primary">
+      <div class="flex-1 flex items-start pt-16 px-12">
+        <h1 class="text-3xl text-base-100">[LOGO] APP-NAME</h1>
+      </div>
+      <div class="flex-1 flex flex-col justify-end pb-16 px-12">
+        <blockquote>
+          <p class="text-xl text-base-100 font-semibold">
+            “This library has saved me countless hours of work and helped me
+            deliver stunning designs to my clients faster than ever before.”
+          </p>
+          <small class="block text-sm font-light text-base-100 mt-4">
+            — Sofia Davis
+          </small>
+        </blockquote>
+      </div>
     </div>
-    <div class="flex-1 flex flex-col justify-end pb-16 px-12">
-      <blockquote>
-        <p class="text-xl text-base-100 font-semibold">
-          “This library has saved me countless hours of work and helped me
-          deliver stunning designs to my clients faster than ever before.”
-        </p>
-        <small class="block text-sm font-light text-base-100 mt-4">
-          — Sofia Davis
-        </small>
-      </blockquote>
+
+    <!-- Rechter Bereich, immer sichtbar -->
+    <div class="flex flex-col w-full md:w-1/2">
+      <div class="flex px-12 gap-3">
+        <div class="flex items-start justify-end pt-16">
+          <label class="swap swap-rotate">
+            <input
+              type="checkbox"
+              (change)="toggleTheme()"
+              [checked]="isDarkMode" />
+
+            <!-- sun icon -->
+            <svg
+              class="swap-on h-10 w-10 fill-current"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24">
+              <path
+                d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+            </svg>
+
+            <!-- moon icon -->
+            <svg
+              class="swap-off h-10 w-10 fill-current"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24">
+              <path
+                d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+            </svg>
+          </label>
+        </div>
+        <div class="flex-1 items-start flex justify-end pt-16">
+          @if (isSignupSignal()) {
+            <button
+              (click)="toggleAction('signin')"
+              class="btn btn-primary btn-outline no-animation">
+              Login
+            </button>
+          }
+          @if (isSigninSignal()) {
+            <button
+              (click)="toggleAction('signup')"
+              class="btn btn-primary btn-outline no-animation animate-shake animate-thrice animate-duration-[250ms] animate-delay-[5000ms] animate-ease-in-out animate-normal animate-fill-forwards">
+              New User? – Register Now!
+            </button>
+          }
+        </div>
+      </div>
+      @if (isSignupSignal()) {
+        <div
+          class="animate-fade-down animate-once animate-duration-1000 animate-ease-in-out flex-1 flex flex-col justify-center items-center px-12">
+          <h1 class="text-3xl font-semibold text-center">Create an Account</h1>
+          <p class="text-center">
+            Enter your email below to create your Account
+          </p>
+          <form
+            [formGroup]="form"
+            (ngSubmit)="onSubmit()"
+            class="flex gap-4 flex-col items-center py-6 w-full max-w-md">
+            <div class="form-control w-full">
+              <label
+                [ngClass]="{
+                  'w-full': true,
+                  'border-error focus:border-error':
+                    form.get('email')?.invalid &&
+                    (form.get('email')?.dirty || form.get('email')?.touched)
+                }"
+                class="input input-bordered flex items-center gap-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                  class="h-4 w-4 opacity-70">
+                  <path
+                    d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
+                  <path
+                    d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
+                </svg>
+                <input
+                  formControlName="email"
+                  type="text"
+                  class="grow"
+                  placeholder="name@example.com" />
+              </label>
+            </div>
+            <div class="form-control w-full">
+              <label
+                [ngClass]="{
+                  'w-full': true,
+                  'border-error focus:border-error':
+                    form.get('password')?.invalid &&
+                    (form.get('password')?.dirty ||
+                      form.get('password')?.touched)
+                }"
+                class="input input-bordered flex items-center gap-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                  class="h-4 w-4 opacity-70">
+                  <path
+                    fill-rule="evenodd"
+                    d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+                    clip-rule="evenodd" />
+                </svg>
+                <input
+                  formControlName="password"
+                  type="password"
+                  class="grow"
+                  value="" />
+              </label>
+            </div>
+            <button class="btn w-full btn-primary font-semibold">
+              Sign In with Email
+            </button>
+            <p class="text-xs w-full text-center">
+              By clicking continue, you agree to our
+              <u class="cursor-pointer">Terms of Service</u>
+              and
+              <u class="cursor-pointer">Privacy Policy</u>
+              .
+            </p>
+          </form>
+        </div>
+      }
+      @if (isSigninSignal()) {
+        <div
+          class="animate-fade-down animate-once animate-duration-1000 animate-ease-in-out flex-1 flex flex-col justify-center items-center px-12">
+          <h1 class="text-3xl font-semibold text-center">Login</h1>
+          <form
+            [formGroup]="form"
+            (ngSubmit)="onSubmit()"
+            class="flex gap-4 flex-col items-center py-6 w-full max-w-md">
+            <div class="form-control w-full">
+              <label
+                [ngClass]="{
+                  'w-full': true,
+                  'border-error focus:border-error':
+                    form.get('email')?.invalid &&
+                    (form.get('email')?.dirty || form.get('email')?.touched)
+                }"
+                class="input input-bordered flex items-center gap-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                  class="h-4 w-4 opacity-70">
+                  <path
+                    d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
+                  <path
+                    d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
+                </svg>
+                <input
+                  formControlName="email"
+                  type="text"
+                  placeholder="name@example.com" />
+              </label>
+            </div>
+            <div class="form-control w-full">
+              <label
+                [ngClass]="{
+                  'w-full': true,
+                  'border-error focus:border-error':
+                    form.get('password')?.invalid &&
+                    (form.get('password')?.dirty ||
+                      form.get('password')?.touched)
+                }"
+                class="input input-bordered flex items-center gap-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                  class="h-4 w-4 opacity-70">
+                  <path
+                    fill-rule="evenodd"
+                    d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+                    clip-rule="evenodd" />
+                </svg>
+                <input
+                  formControlName="password"
+                  type="password"
+                  class="grow"
+                  value="" />
+              </label>
+            </div>
+            <button class="btn w-full btn-primary font-semibold">
+              Sign In
+            </button>
+          </form>
+        </div>
+      }
+      <div class="flex flex-col items-center justify-center py-12">
+        <footer>
+          <p class="text-xs">Made with ♥️ in Germany</p>
+        </footer>
+      </div>
     </div>
   </div>
+} @else {
+  <div class="flex h-screen w-screen">
+    <div class="hidden md:flex md:flex-col md:w-full bg-primary"></div>
+  </div>
+}
+<div class="modal modal-open" *ngIf="isDialogOpen()">
+  <div
+    [ngStyle]="backgroundStyle"
+    class="modal-box w-11/12 h-3/6 max-w-5xl flex">
+    <div class="w-full flex flex-col justify-center items-center">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        class="size-36">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M21.75 9v.906a2.25 2.25 0 0 1-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 0 0 1.183 1.981l6.478 3.488m8.839 2.51-4.66-2.51m0 0-1.023-.55a2.25 2.25 0 0 0-2.134 0l-1.022.55m0 0-4.661 2.51m16.5 1.615a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V8.844a2.25 2.25 0 0 1 1.183-1.981l7.5-4.039a2.25 2.25 0 0 1 2.134 0l7.5 4.039a2.25 2.25 0 0 1 1.183 1.98V19.5Z" />
+      </svg>
 
-  <!-- Rechter Bereich, immer sichtbar -->
-  <div class="flex flex-col w-full md:w-1/2">
-    <div class="flex px-12 gap-3">
-      <div class="flex items-start justify-end pt-16">
-        <label class="swap swap-rotate">
-          <input
-            type="checkbox"
-            (change)="toggleTheme()"
-            [checked]="isDarkMode" />
-
-          <!-- sun icon -->
-          <svg
-            class="swap-on h-10 w-10 fill-current"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24">
-            <path
-              d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
-          </svg>
-
-          <!-- moon icon -->
-          <svg
-            class="swap-off h-10 w-10 fill-current"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24">
-            <path
-              d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
-          </svg>
-        </label>
-      </div>
-      <div class="flex-1 items-start flex justify-end pt-16">
-        <button class="btn btn-primary btn-outline no-animation">Login</button>
-      </div>
-    </div>
-    <!-- Zentrierter Inhalt für Account-Erstellung -->
-    <div class="flex-1 flex flex-col justify-center items-center px-12">
-      <h1 class="text-3xl font-semibold text-center">Create an Account</h1>
-      <p class="text-center">Enter your email below to create your Account</p>
-      <form class="flex gap-4 flex-col items-center py-6 w-full max-w-md">
-        <div class="form-control w-full">
-          <label class="input-group input-group-sm">
-            <input
-              type="text"
-              placeholder="name@example.com"
-              class="input input-bordered input w-full" />
-          </label>
-        </div>
-        <div class="form-control w-full">
-          <label class="input-group input-group-sm">
-            <input
-              type="password"
-              placeholder="password"
-              class="input input-bordered input w-full" />
-          </label>
-        </div>
-        <button class="btn w-full btn-primary font-semibold">
-          Sign In with Email
-        </button>
-        <p class="text-xs w-full text-center">
-          By clicking continue, you agree to our
-          <u class="cursor-pointer">Terms of Service</u>
-          and
-          <u class="cursor-pointer">Privacy Policy</u>
-          .
+      <h1 class="font-bold text-6xl pt-5">Check your E-Mail</h1>
+      <div class="flex flex-col items-center">
+        <p class="pt-8 text-xl font-semibold">
+          We sent an email link to complete your registration.
         </p>
-      </form>
+
+        <p class="text-xs pt-20 pb-2">
+          <a class="cursor-pointer">
+            Didn´t recieve the email? Click here to send it again.
+          </a>
+        </p>
+      </div>
     </div>
   </div>
 </div>
diff --git a/frontend/src/app/pages/register-root/register-root.component.ts b/frontend/src/app/pages/register-root/register-root.component.ts
index 7569c2b..653ffb1 100644
--- a/frontend/src/app/pages/register-root/register-root.component.ts
+++ b/frontend/src/app/pages/register-root/register-root.component.ts
@@ -9,6 +9,7 @@ import {
   effect,
   InputSignal,
   input,
+  ElementRef,
 } from '@angular/core';
 import {
   FormBuilder,
@@ -34,6 +35,7 @@ import {
 import { ApiConfiguration } from '../../config/api-configuration';
 import {
   AuthService,
+  BackgroundPatternService,
   SessionStorageService,
   ThemeService,
 } from '../../shared/service';
@@ -42,7 +44,7 @@ import {
   customPasswordValidator,
 } from '../../shared/validator';
 
-type AuthAction = 'register' | 'signup';
+type AuthAction = 'signin' | 'signup';
 
 @Component({
   selector: 'app-register-root',
@@ -69,17 +71,19 @@ type AuthAction = 'register' | 'signup';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RegisterRootComponent implements OnInit {
+  public backgroundStyle: { 'background-image': string } | null = null;
   public verified: InputSignal<boolean> = input<boolean>(false);
   public login: InputSignal<boolean> = input<boolean>(false);
   public email: InputSignal<string> = input<string>('');
-  public form: FormGroup | undefined;
-  public isRegisterSignal: WritableSignal<boolean> = signal(false);
-  public isSignupSignal: WritableSignal<boolean> = signal(false);
-  public isDisplayButtons: WritableSignal<boolean> = signal(true);
+  public form!: FormGroup;
+  public isSigninSignal: WritableSignal<boolean> = signal(false);
+  public isSignupSignal: WritableSignal<boolean> = signal(true);
+  //public isDisplayButtons: WritableSignal<boolean> = signal(true);
   public emailInvalid: WritableSignal<string | null> = signal(null);
   public passwordInvalid: WritableSignal<string | null> = signal(null);
   public termsInvalid: WritableSignal<string | null> = signal(null);
   public userSignupSuccess: WritableSignal<boolean> = signal(false);
+  public isDialogOpen: WritableSignal<boolean> = signal(false);
   private removeQueryParams: WritableSignal<boolean> = signal(false);
 
   public get isDarkMode(): boolean {
@@ -91,11 +95,13 @@ export class RegisterRootComponent implements OnInit {
     private readonly authService: AuthService,
     private readonly router: Router,
     private readonly sessionStorageService: SessionStorageService,
-    private readonly themeService: ThemeService
+    private readonly themeService: ThemeService,
+    private readonly el: ElementRef,
+    private readonly backgroundPatternService: BackgroundPatternService
   ) {
     effect(() => {
       if (this.form) {
-        if (this.isRegisterSignal()) {
+        if (this.isSigninSignal()) {
           this.form.addControl(
             'terms',
             new FormControl(false, Validators.requiredTrue)
@@ -112,6 +118,7 @@ export class RegisterRootComponent implements OnInit {
   }
 
   public ngOnInit(): void {
+    this.setBackground();
     this.initializeForm();
     this.setupValueChanges();
     this.preselectForm();
@@ -122,6 +129,24 @@ export class RegisterRootComponent implements OnInit {
     }
   }
 
+  public setBackground(): void {
+    const color = getComputedStyle(this.el.nativeElement).getPropertyValue(
+      '--p'
+    );
+
+    const svgUrl = this.backgroundPatternService.getWigglePattern(color, 0.04);
+
+    this.backgroundStyle = { 'background-image': `url("${svgUrl}")` };
+  }
+
+  public openModal(): void {
+    this.isDialogOpen.set(true);
+  }
+
+  public closeModal(): void {
+    this.isDialogOpen.set(false);
+  }
+
   public toggleTheme(): void {
     this.themeService.toggleTheme();
   }
@@ -135,24 +160,24 @@ export class RegisterRootComponent implements OnInit {
   }
 
   public toggleAction(action: AuthAction): void {
-    if (action === 'register') {
-      this.isRegisterSignal.set(true);
+    if (action === 'signin') {
+      this.isSigninSignal.set(true);
       this.isSignupSignal.set(false);
     } else {
-      this.isRegisterSignal.set(false);
+      this.isSigninSignal.set(false);
       this.isSignupSignal.set(true);
     }
-    this.isDisplayButtons.set(false);
+    //this.isDisplayButtons.set(false);
   }
 
   public onSubmit(): void {
     this.markControlsAsTouchedAndDirty(['email', 'password', 'terms']);
 
     if (this.form?.valid) {
-      if (this.isRegisterSignal()) {
-        this.signup(this.form.value);
-      } else {
+      if (this.isSigninSignal()) {
         this.signin(this.form.value);
+      } else {
+        this.signup(this.form.value);
       }
     }
   }
@@ -162,10 +187,10 @@ export class RegisterRootComponent implements OnInit {
 
     if (this.isSignupSignal()) {
       this.isSignupSignal.set(false);
-      this.isRegisterSignal.set(true);
-    } else if (this.isRegisterSignal()) {
+      this.isSigninSignal.set(true);
+    } else if (this.isSigninSignal()) {
       this.isSignupSignal.set(true);
-      this.isRegisterSignal.set(false);
+      this.isSigninSignal.set(false);
     }
   }
 
@@ -188,8 +213,8 @@ export class RegisterRootComponent implements OnInit {
 
   private handleRedirect(): void {
     if (this.verified()) {
-      this.isDisplayButtons.set(false);
-      this.isRegisterSignal.set(false);
+      //this.isDisplayButtons.set(false);
+      this.isSigninSignal.set(false);
       this.isSignupSignal.set(true);
     }
     if (this.email()) {
@@ -198,8 +223,8 @@ export class RegisterRootComponent implements OnInit {
 
     if (this.login()) {
       this.isSignupSignal.set(true);
-      this.isDisplayButtons.set(false);
-      this.isRegisterSignal.set(false);
+      //this.isDisplayButtons.set(false);
+      this.isSigninSignal.set(false);
     }
   }
 
@@ -294,6 +319,7 @@ export class RegisterRootComponent implements OnInit {
       .signup(logiCredentials)
       .subscribe((response: SuccessDtoApiModel) => {
         if (response.success) {
+          this.openModal();
           this.userSignupSuccess.set(true);
         }
       });
diff --git a/frontend/src/app/shared/service/background-pattern.service.ts b/frontend/src/app/shared/service/background-pattern.service.ts
new file mode 100644
index 0000000..b6914db
--- /dev/null
+++ b/frontend/src/app/shared/service/background-pattern.service.ts
@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+
+import chroma from 'chroma-js';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class BackgroundPatternService {
+  public getWigglePattern(color: string, opacity: number = 0.08): string {
+    const colorHex = this.convertOklchStringToHex(color);
+    const encodedHex = encodeURIComponent(colorHex);
+    const pattern = `
+      data:image/svg+xml,
+      %3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E
+        %3Cg fill='none' fill-rule='evenodd'%3E
+          %3Cg fill='${encodedHex}' fill-opacity='${opacity}'%3E
+            %3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E
+          %3C/g%3E
+        %3C/g%3E
+      %3C/svg%3E`;
+
+    return pattern.replace(/[\n\r]+|[\s]{2,}/g, ' ').trim();
+  }
+
+  private convertOklchStringToHex(oklchString: string): string {
+    const parts = oklchString.split(' ');
+    const l = parseFloat(parts[0]);
+    const c = parseFloat(parts[1]);
+    const h = parseFloat(parts[2]);
+
+    return this.convertOklchToHex(l / 100, c, h);
+  }
+
+  private convertOklchToHex(l: number, c: number, h: number): string {
+    const rgb = chroma.oklch(l, c, h).rgb();
+
+    return chroma(rgb).hex();
+  }
+}
diff --git a/frontend/src/app/shared/service/index.ts b/frontend/src/app/shared/service/index.ts
index 3d097fd..02c9641 100644
--- a/frontend/src/app/shared/service/index.ts
+++ b/frontend/src/app/shared/service/index.ts
@@ -2,3 +2,4 @@ export * from './auth.service';
 export * from './local-storage.service';
 export * from './session-storage.service';
 export * from './theme.service';
+export * from './background-pattern.service';
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 195c258..272b1e9 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -6,7 +6,7 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [require('daisyui')],
+  plugins: [require('daisyui'), require('tailwindcss-animated')],
   daisyui: {
     themes: ["light", "dark"],
     darkMode: ['class', '[data-theme="dark"]']