diff --git a/frontend/src/app/feature/auth/login/login.component.html b/frontend/src/app/feature/auth/login/login.component.html
index c10b232..40fc3e6 100644
--- a/frontend/src/app/feature/auth/login/login.component.html
+++ b/frontend/src/app/feature/auth/login/login.component.html
@@ -2,9 +2,11 @@
   <div class="modal-card max-w-md w-full">
     <h2 class="modal-heading text-center">Anmelden</h2>
 
-    <div *ngIf="errorMessage" class="bg-accent-red text-white p-4 rounded mb-4">
-      {{ errorMessage }}
-    </div>
+    @if (errorMessage()) {
+      <div class="bg-accent-red text-white p-4 rounded mb-4">
+        {{ errorMessage() }}
+      </div>
+    }
 
     <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="space-y-4">
       <div>
@@ -19,14 +21,13 @@
           placeholder="Gib deinen Benutzernamen oder E-Mail ein"
         />
 
-        <div
-          *ngIf="form['usernameOrEmail'].touched && form['usernameOrEmail'].errors"
-          class="text-accent-red mt-1 text-sm"
-        >
-          <span *ngIf="form['usernameOrEmail'].errors?.['required']">
-            Benutzername oder E-Mail ist erforderlich
-          </span>
-        </div>
+        @if (form['usernameOrEmail'].touched && form['usernameOrEmail'].errors) {
+          <div class="text-accent-red mt-1 text-sm">
+            @if (form['usernameOrEmail'].errors['required']) {
+              <span>Benutzername oder E-Mail ist erforderlich</span>
+            }
+          </div>
+        }
       </div>
 
       <div>
@@ -41,21 +42,22 @@
           placeholder="Gib dein Passwort ein"
         />
 
-        <div
-          *ngIf="form['password'].touched && form['password'].errors"
-          class="text-accent-red mt-1 text-sm"
-        >
-          <span *ngIf="form['password'].errors?.['required']">Passwort ist erforderlich</span>
-        </div>
+        @if (form['password'].touched && form['password'].errors) {
+          <div class="text-accent-red mt-1 text-sm">
+            @if (form['password'].errors['required']) {
+              <span>Passwort ist erforderlich</span>
+            }
+          </div>
+        }
       </div>
 
       <div class="pt-2">
         <button
           type="submit"
-          [disabled]="loginForm.invalid || isLoading"
+          [disabled]="loginForm.invalid || isLoading()"
           class="button-primary w-full py-2.5 rounded"
         >
-          {{ isLoading ? 'Anmeldung läuft...' : 'Anmelden' }}
+          {{ isLoading() ? 'Anmeldung läuft...' : 'Anmelden' }}
         </button>
       </div>
     </form>
diff --git a/frontend/src/app/feature/auth/login/login.component.ts b/frontend/src/app/feature/auth/login/login.component.ts
index 1ed3537..8143e15 100644
--- a/frontend/src/app/feature/auth/login/login.component.ts
+++ b/frontend/src/app/feature/auth/login/login.component.ts
@@ -1,9 +1,9 @@
-import { Component } from '@angular/core';
-import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { Router, RouterLink } from '@angular/router';
-import { LoginRequest } from '../../../model/auth/LoginRequest';
-import { AuthService } from '../../../service/auth.service';
-import { CommonModule } from '@angular/common';
+import {Component, signal} from '@angular/core';
+import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {Router, RouterLink} from '@angular/router';
+import {LoginRequest} from '../../../model/auth/LoginRequest';
+import {AuthService} from '@service/auth.service';
+import {CommonModule} from '@angular/common';
 
 @Component({
   selector: 'app-login',
@@ -13,8 +13,8 @@ import { CommonModule } from '@angular/common';
 })
 export class LoginComponent {
   loginForm: FormGroup;
-  errorMessage = '';
-  isLoading = false;
+  errorMessage = signal('');
+  isLoading = signal(false);
 
   constructor(
     private fb: FormBuilder,
@@ -36,8 +36,8 @@ export class LoginComponent {
       return;
     }
 
-    this.isLoading = true;
-    this.errorMessage = '';
+    this.isLoading.set(true);
+    this.errorMessage.set('');
 
     const loginRequest: LoginRequest = {
       usernameOrEmail: this.form['usernameOrEmail'].value,
@@ -49,8 +49,8 @@ export class LoginComponent {
         this.router.navigate(['/home']);
       },
       error: (err) => {
-        this.isLoading = false;
-        this.errorMessage = err.error?.message || 'Failed to login. Please check your credentials.';
+        this.isLoading.set(false);
+        this.errorMessage.set(err.error?.message || 'Failed to login. Please check your credentials.');
       },
     });
   }