diff --git a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
index f3e850a8d7..8aff328999 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
@@ -33,7 +33,7 @@
           <ng-container>
             <fieldset class="fields-group">
               <legend class="group-title" translate>admin.2fa.verification-limitations</legend>
-              <div class="input-row" fxLayout="row" fxLayout.sm="column" fxLayoutGap="8px">
+              <div class="input-row" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
                 <mat-form-field fxFlex class="mat-block">
                   <mat-label translate>admin.2fa.total-allowed-time-for-verification</mat-label>
                   <input matInput required formControlName="totalAllowedTimeForVerification" type="number" step="1" min="1">
@@ -58,62 +58,137 @@
                   </mat-error>
                 </mat-form-field>
               </div>
-              <mat-slide-toggle class="rate-limit-toggle" formControlName="verificationCodeSendRateLimitEnable">
-                {{ 'admin.2fa.verification-code-send-rate-limit' | translate }}
-              </mat-slide-toggle>
-              <div class="input-row" fxLayout="row" fxLayout.sm="column" fxLayoutGap="8px"
-                   *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitEnable').value">
-                <mat-form-field fxFlex class="mat-block">
-                  <mat-label translate>admin.2fa.number-of-send-attempts</mat-label>
-                  <input matInput formControlName="verificationCodeSendRateLimitNumber" type="number" step="1" min="1" required>
-                  <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('required')">
-                    {{ 'admin.2fa.number-of-send-attempts-required' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('pattern')
+              <mat-expansion-panel class="provider">
+                <mat-expansion-panel-header>
+                  <mat-panel-title fxLayoutAlign="start center">
+                    <mat-slide-toggle
+                      (click)="toggleExtensionPanel($event, 0, twoFaFormGroup.get('verificationCodeSendRateLimitEnable').value)"
+                      formControlName="verificationCodeSendRateLimitEnable">
+                    </mat-slide-toggle>
+                    {{ 'admin.2fa.verification-code-send-rate-limit' | translate }}
+                  </mat-panel-title>
+                </mat-expansion-panel-header>
+                <ng-template matExpansionPanelContent>
+                  <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
+                    <mat-form-field fxFlex class="mat-block">
+                      <mat-label translate>admin.2fa.number-of-send-attempts</mat-label>
+                      <input matInput formControlName="verificationCodeSendRateLimitNumber" type="number" step="1" min="1" required>
+                      <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('required')">
+                        {{ 'admin.2fa.number-of-send-attempts-required' | translate }}
+                      </mat-error>
+                      <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('pattern')
                     || twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('min')">
-                    {{ 'admin.2fa.number-of-send-attempts-pattern' | translate }}
-                  </mat-error>
-                </mat-form-field>
-                <mat-form-field fxFlex class="mat-block">
-                  <mat-label translate>admin.2fa.within-time</mat-label>
-                  <input matInput formControlName="verificationCodeSendRateLimitTime" type="number" step="1" min="1" required>
-                  <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('required')">
-                    {{ 'admin.2fa.within-time-required' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('pattern')
+                        {{ 'admin.2fa.number-of-send-attempts-pattern' | translate }}
+                      </mat-error>
+                    </mat-form-field>
+                    <mat-form-field fxFlex class="mat-block">
+                      <mat-label translate>admin.2fa.within-time</mat-label>
+                      <input matInput formControlName="verificationCodeSendRateLimitTime" type="number" step="1" min="1" required>
+                      <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('required')">
+                        {{ 'admin.2fa.within-time-required' | translate }}
+                      </mat-error>
+                      <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('pattern')
                     || twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('min')">
-                    {{ 'admin.2fa.within-time-pattern' | translate }}
-                  </mat-error>
-                </mat-form-field>
-              </div>
-              <mat-slide-toggle class="rate-limit-toggle" formControlName="verificationCodeCheckRateLimitEnable">
-                {{ 'admin.2fa.verification-code-check-rate-limit' | translate }}
-              </mat-slide-toggle>
-              <div class="input-row" fxLayout="row" fxLayout.sm="column" fxLayoutGap="8px"
-                   *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitEnable').value">
-                <mat-form-field fxFlex class="mat-block">
-                  <mat-label translate>admin.2fa.number-of-checking-attempts</mat-label>
-                  <input matInput formControlName="verificationCodeCheckRateLimitNumber" required type="number" step="1" min="1">
-                  <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('required')">
-                    {{ 'admin.2fa.number-of-checking-attempts-required' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('pattern')
+                        {{ 'admin.2fa.within-time-pattern' | translate }}
+                      </mat-error>
+                    </mat-form-field>
+                  </div>
+                </ng-template>
+              </mat-expansion-panel>
+<!--              <mat-slide-toggle class="rate-limit-toggle" formControlName="verificationCodeSendRateLimitEnable">-->
+<!--                {{ 'admin.2fa.verification-code-send-rate-limit' | translate }}-->
+<!--              </mat-slide-toggle>-->
+<!--              <div class="input-row" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"-->
+<!--                   *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitEnable').value">-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                  <mat-label translate>admin.2fa.number-of-send-attempts</mat-label>-->
+<!--                  <input matInput formControlName="verificationCodeSendRateLimitNumber" type="number" step="1" min="1" required>-->
+<!--                  <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('required')">-->
+<!--                    {{ 'admin.2fa.number-of-send-attempts-required' | translate }}-->
+<!--                  </mat-error>-->
+<!--                  <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('pattern')-->
+<!--                    || twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('min')">-->
+<!--                    {{ 'admin.2fa.number-of-send-attempts-pattern' | translate }}-->
+<!--                  </mat-error>-->
+<!--                </mat-form-field>-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                  <mat-label translate>admin.2fa.within-time</mat-label>-->
+<!--                  <input matInput formControlName="verificationCodeSendRateLimitTime" type="number" step="1" min="1" required>-->
+<!--                  <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('required')">-->
+<!--                    {{ 'admin.2fa.within-time-required' | translate }}-->
+<!--                  </mat-error>-->
+<!--                  <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('pattern')-->
+<!--                    || twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('min')">-->
+<!--                    {{ 'admin.2fa.within-time-pattern' | translate }}-->
+<!--                  </mat-error>-->
+<!--                </mat-form-field>-->
+<!--              </div>-->
+              <mat-divider></mat-divider>
+              <mat-expansion-panel class="provider">
+                <mat-expansion-panel-header>
+                  <mat-panel-title fxLayoutAlign="start center">
+                    <mat-slide-toggle class="rate-limit-toggle"
+                                      (click)="toggleExtensionPanel($event, 1, twoFaFormGroup.get('verificationCodeCheckRateLimitEnable').value)"
+                                      formControlName="verificationCodeCheckRateLimitEnable">
+                    </mat-slide-toggle>
+                    {{ 'admin.2fa.verification-code-check-rate-limit' | translate }}
+                  </mat-panel-title>
+                </mat-expansion-panel-header>
+                <ng-template matExpansionPanelContent>
+                  <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
+                    <mat-form-field fxFlex class="mat-block">
+                      <mat-label translate>admin.2fa.number-of-checking-attempts</mat-label>
+                      <input matInput formControlName="verificationCodeCheckRateLimitNumber" required type="number" step="1" min="1">
+                      <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('required')">
+                        {{ 'admin.2fa.number-of-checking-attempts-required' | translate }}
+                      </mat-error>
+                      <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('pattern')
                     || twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('min')">
-                    {{ 'admin.2fa.number-of-checking-attempts-pattern' | translate }}
-                  </mat-error>
-                </mat-form-field>
-                <mat-form-field fxFlex class="mat-block">
-                  <mat-label translate>admin.2fa.within-time</mat-label>
-                  <input matInput formControlName="verificationCodeCheckRateLimitTime" required type="number" step="1" min="1">
-                  <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('required')">
-                    {{ 'admin.2fa.within-time-required' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('pattern')
+                        {{ 'admin.2fa.number-of-checking-attempts-pattern' | translate }}
+                      </mat-error>
+                    </mat-form-field>
+                    <mat-form-field fxFlex class="mat-block">
+                      <mat-label translate>admin.2fa.within-time</mat-label>
+                      <input matInput formControlName="verificationCodeCheckRateLimitTime" required type="number" step="1" min="1">
+                      <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('required')">
+                        {{ 'admin.2fa.within-time-required' | translate }}
+                      </mat-error>
+                      <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('pattern')
                     || twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('min')">
-                    {{ 'admin.2fa.within-time-pattern' | translate }}
-                  </mat-error>
-                </mat-form-field>
-              </div>
+                        {{ 'admin.2fa.within-time-pattern' | translate }}
+                      </mat-error>
+                    </mat-form-field>
+                  </div>
+                </ng-template>
+              </mat-expansion-panel>
+<!--              <mat-slide-toggle class="rate-limit-toggle" formControlName="verificationCodeCheckRateLimitEnable">-->
+<!--                {{ 'admin.2fa.verification-code-check-rate-limit' | translate }}-->
+<!--              </mat-slide-toggle>-->
+<!--              <div class="input-row" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"-->
+<!--                   *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitEnable').value">-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                  <mat-label translate>admin.2fa.number-of-checking-attempts</mat-label>-->
+<!--                  <input matInput formControlName="verificationCodeCheckRateLimitNumber" required type="number" step="1" min="1">-->
+<!--                  <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('required')">-->
+<!--                    {{ 'admin.2fa.number-of-checking-attempts-required' | translate }}-->
+<!--                  </mat-error>-->
+<!--                  <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('pattern')-->
+<!--                    || twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('min')">-->
+<!--                    {{ 'admin.2fa.number-of-checking-attempts-pattern' | translate }}-->
+<!--                  </mat-error>-->
+<!--                </mat-form-field>-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                  <mat-label translate>admin.2fa.within-time</mat-label>-->
+<!--                  <input matInput formControlName="verificationCodeCheckRateLimitTime" required type="number" step="1" min="1">-->
+<!--                  <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('required')">-->
+<!--                    {{ 'admin.2fa.within-time-required' | translate }}-->
+<!--                  </mat-error>-->
+<!--                  <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('pattern')-->
+<!--                    || twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('min')">-->
+<!--                    {{ 'admin.2fa.within-time-pattern' | translate }}-->
+<!--                  </mat-error>-->
+<!--                </mat-form-field>-->
+<!--              </div>-->
             </fieldset>
             <fieldset class="fields-group" formArrayName="providers">
               <legend class="group-title" translate>admin.2fa.available-providers</legend>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.scss b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.scss
index 2ae3981717..6a716e6c47 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.scss
@@ -26,17 +26,15 @@
     legend {
       color: rgba(0, 0, 0, .7);
       width: fit-content;
+      margin: 0 8px;
     }
 
-    &:not(:last-of-type) {
-      padding: 8px;
+    .input-row {
+      padding: 8px 8px 0;
     }
 
     &:last-of-type {
       margin-bottom: 24px;
-      legend {
-        margin: 0 8px;
-      }
     }
 
     .rate-limit-toggle {
diff --git a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts
index c866612049..10cc499118 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts
@@ -92,10 +92,14 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI
   }
 
   toggleProviders($event: Event, i: number): void {
+    this.toggleExtensionPanel($event, i + 2, this.providersForm.at(i).get('enable').value);
+  }
+
+  toggleExtensionPanel($event: Event, i: number, currentState: boolean) {
     if ($event) {
       $event.stopPropagation();
     }
-    if (this.providersForm.at(i).get('enable').value) {
+    if (currentState) {
       this.getByIndexPanel(i).close();
     } else {
       this.getByIndexPanel(i).open();
@@ -175,7 +179,7 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI
       const findIndex = allowProvidersConfig.indexOf(provider);
       if (findIndex > -1) {
         processFormValue.providers.push(Object.assign(settings.providers[findIndex], {enable: true}));
-        this.getByIndexPanel(index).open();
+        this.getByIndexPanel(index + 2).open();
       } else {
         processFormValue.providers.push({enable: false});
       }
diff --git a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.scss b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.scss
index 7403d7a27c..c29e4ae6d4 100644
--- a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.scss
+++ b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.scss
@@ -28,7 +28,7 @@
       }
 
       .mat-card-title{
-        font: 500 28px / 36px Roboto, "Helvetica Neue", sans-serif;
+        font: 400 28px / 36px Roboto, "Helvetica Neue", sans-serif;
       }
 
       .mat-card-content {
@@ -58,9 +58,15 @@
   ::ng-deep{
     button.provider {
       text-align: start;
+      font-weight: 400;
       &:not(.mat-button-disabled) {
         border-color: rgba(255, 255, 255, .8);
       }
+      .icon{
+        height: 18px;
+        width: 18px;
+        vertical-align: sub;
+      }
     }
   }
 }
diff --git a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.ts b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.ts
index c2d34856e6..0c47899651 100644
--- a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.ts
+++ b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.ts
@@ -36,6 +36,7 @@ import { TranslateService } from '@ngx-translate/core';
 export class TwoFactorAuthLoginComponent extends PageComponent implements OnInit {
 
   private providersInfo: TwoFaProviderInfo[];
+  private prevProvider: TwoFactorAuthProviderType;
 
   selectedProvider: TwoFactorAuthProviderType;
   twoFactorAuthProvider = TwoFactorAuthProviderType;
@@ -89,13 +90,16 @@ export class TwoFactorAuthLoginComponent extends PageComponent implements OnInit
   }
 
   selectProvider(type: TwoFactorAuthProviderType) {
+    this.prevProvider = type === null ? this.selectedProvider : null;
     this.selectedProvider = type;
-    const providerConfig = this.providersInfo.find(config => config.type === type);
-    this.providerDescription = this.translate.instant(this.providersData.get(providerConfig.type).description, {
-      contact: providerConfig.contact
-    });
-    if (type !== TwoFactorAuthProviderType.TOTP && type !== null) {
-      this.sendCode();
+    if (type !== null) {
+      const providerConfig = this.providersInfo.find(config => config.type === type);
+      this.providerDescription = this.translate.instant(this.providersData.get(providerConfig.type).description, {
+        contact: providerConfig.contact
+      });
+      if (type !== TwoFactorAuthProviderType.TOTP) {
+        this.sendCode();
+      }
     }
   }
 
@@ -104,6 +108,11 @@ export class TwoFactorAuthLoginComponent extends PageComponent implements OnInit
   }
 
   cancelLogin() {
-    this.authService.logout();
+    if (this.prevProvider) {
+      this.selectedProvider = this.prevProvider;
+      this.prevProvider = null;
+    } else {
+      this.authService.logout();
+    }
   }
 }