diff --git a/ui-ngx/src/app/modules/login/pages/login/create-password.component.html b/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
index 06056a984c..c2a84773c8 100644
--- a/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
@@ -21,9 +21,9 @@
       <mat-card-title class="text-xl font-normal" translate>login.create-password</mat-card-title>
     </mat-card-header>
     <div class="h-3 px-4"><div tb-toast></div></div>
-    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading">
+    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading || (isLoading$ | async)">
     </mat-progress-bar>
-    <span style="height: 4px;" *ngIf="!isLoading"></span>
+    <span style="height: 4px;" *ngIf="!isLoading && !(isLoading$ | async)"></span>
     <mat-card-content class="!p-6">
       <form [formGroup]="createPassword" (ngSubmit)="onCreatePassword()">
         <mat-form-field class="mat-block tb-autofilled" appearance="outline">
@@ -53,10 +53,10 @@
           </mat-error>
         </mat-form-field>
         <div class="flex flex-col items-center justify-start gap-4 gt-xs:flex-row gt-xs:items-start gt-xs:justify-center">
-          <button mat-flat-button color="accent" type="submit" [disabled]="isLoading">
+          <button mat-flat-button color="accent" type="submit" [disabled]="isLoading || (isLoading$ | async)">
             {{ 'login.create-password' | translate }}
           </button>
-          <button mat-button type="button" [disabled]="isLoading" routerLink="/login">
+          <button mat-button type="button" [disabled]="isLoading || (isLoading$ | async)" routerLink="/login">
             {{ 'action.cancel' | translate }}
           </button>
         </div>
diff --git a/ui-ngx/src/app/modules/login/pages/login/create-password.component.ts b/ui-ngx/src/app/modules/login/pages/login/create-password.component.ts
index f0a6bdd0ff..6e9be088c7 100644
--- a/ui-ngx/src/app/modules/login/pages/login/create-password.component.ts
+++ b/ui-ngx/src/app/modules/login/pages/login/create-password.component.ts
@@ -21,13 +21,14 @@ import { ActivatedRoute } from '@angular/router';
 import { UserPasswordPolicy } from '@shared/models/settings.models';
 import { passwordsMatchValidator, passwordStrengthValidator } from '@shared/models/password.models';
 import { finalize } from 'rxjs/operators';
+import { PageComponent } from '@shared/components/page.component';
 
 @Component({
   selector: 'tb-create-password',
   templateUrl: './create-password.component.html',
   styleUrls: ['./password.component.scss']
 })
-export class CreatePasswordComponent {
+export class CreatePasswordComponent extends PageComponent {
 
   passwordPolicy: UserPasswordPolicy;
   createPassword: FormGroup;
@@ -39,7 +40,7 @@ export class CreatePasswordComponent {
   constructor(private route: ActivatedRoute,
               private authService: AuthService,
               private fb: FormBuilder) {
-
+    super();
     this.activateToken = this.route.snapshot.queryParams['activateToken'] || '';
     this.passwordPolicy = this.route.snapshot.data['passwordPolicy'];