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 981d83d5be..d590a0ab3f 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
@@ -16,7 +16,7 @@
 
 -->
 <div class="tb-create-password-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
-  <mat-card appearance="outlined" fxFlex="initial" class="tb-create-password-card">
+  <mat-card appearance="raised" fxFlex="initial" class="tb-create-password-card">
     <mat-card-header>
       <mat-card-title class="layout-padding">
         <span translate class="mat-headline-5">login.create-password</span>
diff --git a/ui-ngx/src/app/modules/login/pages/login/login.component.html b/ui-ngx/src/app/modules/login/pages/login/login.component.html
index 3d04afffe9..f5797ae574 100644
--- a/ui-ngx/src/app/modules/login/pages/login/login.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/login.component.html
@@ -16,10 +16,10 @@
 
 -->
 <div class="tb-login-content mat-app-background tb-dark" fxFlex fxLayoutAlign="center center">
-  <mat-card appearance="outlined" style="max-height: 80vh; overflow-y: auto;">
+  <mat-card appearance="raised" style="max-height: 80vh; overflow-y: auto;">
     <mat-card-content>
       <form class="tb-login-form" [formGroup]="loginFormGroup" (ngSubmit)="login()">
-        <fieldset [disabled]="isLoading$ | async" fxLayout="column">
+        <fieldset fxLayout="column">
           <div fxLayout="column" fxLayoutAlign="start center" style="padding: 15px 0;">
             <tb-logo class="login-logo"></tb-logo>
           </div>
diff --git a/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html b/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
index 59841908ed..eb164ec07a 100644
--- a/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
@@ -17,7 +17,7 @@
 -->
 <div class="tb-request-password-reset-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center"
      style="width: 100%;">
-  <mat-card appearance="outlined" fxFlex="initial" class="tb-request-password-reset-card">
+  <mat-card appearance="raised" fxFlex="initial" class="tb-request-password-reset-card">
     <mat-card-header>
       <mat-card-title class="layout-padding">
         <span translate class="mat-headline-5">login.request-password-reset</span>
diff --git a/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html b/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
index 66f885af2d..a23d3a2d03 100644
--- a/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="tb-reset-password-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
-  <mat-card appearance="outlined" fxFlex="initial" class="tb-reset-password-card">
+  <mat-card appearance="raised" fxFlex="initial" class="tb-reset-password-card">
     <mat-card-header>
       <mat-card-title class="layout-padding tb-card-title">
         <span translate class="mat-headline-5 tb-card-title">login.password-reset</span>
diff --git a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
index c49ab90ec9..56565588cd 100644
--- a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
@@ -17,7 +17,7 @@
 -->
 <div class="tb-two-factor-auth-login-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center"
      style="width: 100%;">
-  <mat-card appearance="outlined" fxFlex="initial" class="tb-two-factor-auth-login-card" >
+  <mat-card appearance="raised" fxFlex="initial" class="tb-two-factor-auth-login-card" >
     <mat-card-header>
       <mat-card-title class="mat-headline-5" fxLayout="row" fxLayoutAlign="start center">
         <button mat-icon-button type="button" (click)="cancelLogin()">
diff --git a/ui-ngx/src/theme.scss b/ui-ngx/src/theme.scss
index 3e414b2c68..5086880f20 100644
--- a/ui-ngx/src/theme.scss
+++ b/ui-ngx/src/theme.scss
@@ -246,6 +246,7 @@ $tb-dark-theme: map_merge($tb-dark-theme, $color);
   @include mat.all-component-themes($tb-theme);
   @include mat-datetimepicker-theme($tb-theme);
   @include tb-components-theme($tb-theme);
+  @include mat.typography-hierarchy($tb-theme);
 }
 
 .tb-dark {