diff --git a/ui-ngx/src/app/core/http/admin.service.ts b/ui-ngx/src/app/core/http/admin.service.ts
index 1fb6f717c3..38a7c6e5e9 100644
--- a/ui-ngx/src/app/core/http/admin.service.ts
+++ b/ui-ngx/src/app/core/http/admin.service.ts
@@ -20,6 +20,7 @@ import { Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import {
   AdminSettings,
+  ClientProviderTemplated,
   MailServerSettings,
   OAuth2Settings,
   SecuritySettings,
@@ -63,8 +64,8 @@ export class AdminService {
     return this.http.get<OAuth2Settings>(`/api/oauth2/config`, defaultHttpOptionsFromConfig(config));
   }
 
-  public getOAuth2Template(config?: RequestConfig): Observable<any> {
-    return this.http.get<any>(`/api/oauth2/config/template`, defaultHttpOptionsFromConfig(config));
+  public getOAuth2Template(config?: RequestConfig): Observable<Array<ClientProviderTemplated>> {
+    return this.http.get<Array<ClientProviderTemplated>>(`/api/oauth2/config/template`, defaultHttpOptionsFromConfig(config));
   }
 
   public saveOAuth2Settings(OAuth2Setting: OAuth2Settings,
diff --git a/ui-ngx/src/app/core/services/menu.service.ts b/ui-ngx/src/app/core/services/menu.service.ts
index bb39cfa415..7d3503a613 100644
--- a/ui-ngx/src/app/core/services/menu.service.ts
+++ b/ui-ngx/src/app/core/services/menu.service.ts
@@ -120,9 +120,9 @@ export class MenuService {
             icon: 'security'
           },
           {
-            name: 'admin.oauth2.settings',
+            name: 'admin.oauth2.oauth2',
             type: 'link',
-            path: '/settings/oauth2-settings',
+            path: '/settings/oauth2',
             icon: 'security'
           }
         ]
@@ -246,13 +246,13 @@ export class MenuService {
         icon: 'settings',
         pages: [
           {
-            name: 'admin.oauth2.settings',
+            name: 'admin.oauth2.oauth2',
             type: 'link',
-            path: '/settings/oauth2-settings',
+            path: '/settings/oauth2',
             icon: 'security'
           }
         ]
-      })
+      });
     }
 
     return sections;
diff --git a/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts b/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
index a6b18cfd29..16635ef53f 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
@@ -81,14 +81,14 @@ const routes: Routes = [
         }
       },
       {
-        path: 'oauth2-settings',
+        path: 'oauth2',
         component: OAuth2SettingsComponent,
         canDeactivate: [ConfirmOnExitGuard],
         data: {
           auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN],
-          title: 'admin.oauth2.settings',
+          title: 'admin.oauth2.oauth2',
           breadcrumb: {
-            label: 'admin.oauth2.settings',
+            label: 'admin.oauth2.oauth2',
             icon: 'security'
           }
         }
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
index bb77210ba8..fce4f0339f 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
@@ -19,7 +19,7 @@
   <mat-card class="settings-card">
     <mat-card-title>
       <div fxLayout="row">
-        <span class="mat-headline" translate>admin.oauth2.settings</span>
+        <span class="mat-headline" translate>admin.oauth2.oauth2</span>
         <span fxFlex></span>
         <div tb-help="oauth2Settings"></div>
       </div>
@@ -91,7 +91,7 @@
                             <ng-template matExpansionPanelContent>
                               <section [formGroupName]="j">
                                 <mat-form-field fxFlex class="mat-block">
-                                  <mat-label translate>Login Provider</mat-label>
+                                  <mat-label translate>admin.oauth2.login-provider</mat-label>
                                   <mat-select formControlName="providerName">
                                     <mat-option *ngFor="let provider of templateProvider" [value]="provider">
                                       {{ provider | uppercase }}
@@ -117,223 +117,254 @@
                                   </mat-form-field>
                                 </div>
 
-                                <mat-tab-group dynamicHeight>
-                                  <mat-tab label="General">
-                                    <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" style="margin-top: 16px;">
-                                      <mat-form-field fxFlex class="mat-block">
-                                        <mat-label translate>admin.oauth2.access-token-uri</mat-label>
-                                        <input matInput formControlName="accessTokenUri" required>
-                                        <mat-error *ngIf="registration.get('accessTokenUri').hasError('required')">
-                                          {{ 'admin.oauth2.access-token-uri-required' | translate }}
-                                        </mat-error>
-                                        <mat-error *ngIf="registration.get('accessTokenUri').hasError('pattern')">
-                                          {{ 'admin.oauth2.uri-pattern-error' | translate }}
-                                        </mat-error>
-                                      </mat-form-field>
-
-                                      <mat-form-field fxFlex class="mat-block">
-                                        <mat-label translate>admin.oauth2.authorization-uri</mat-label>
-                                        <input matInput formControlName="authorizationUri" required>
-                                        <mat-error *ngIf="registration.get('authorizationUri').hasError('required')">
-                                          {{ 'admin.oauth2.authorization-uri-required' | translate }}
-                                        </mat-error>
-                                        <mat-error *ngIf="registration.get('authorizationUri').hasError('pattern')">
-                                          {{ 'admin.oauth2.uri-pattern-error' | translate }}
-                                        </mat-error>
-                                      </mat-form-field>
-                                    </div>
-
-                                    <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                                      <mat-form-field fxFlex class="mat-block">
-                                        <mat-label translate>admin.oauth2.jwk-set-uri</mat-label>
-                                        <input matInput formControlName="jwkSetUri" required>
-                                        <mat-error *ngIf="registration.get('jwkSetUri').hasError('required')">
-                                          {{ 'admin.oauth2.jwk-set-uri-required' | translate }}
-                                        </mat-error>
-                                        <mat-error *ngIf="registration.get('jwkSetUri').hasError('pattern')">
-                                          {{ 'admin.oauth2.uri-pattern-error' | translate }}
-                                        </mat-error>
-                                      </mat-form-field>
-
-                                      <mat-form-field fxFlex class="mat-block">
-                                        <mat-label translate>admin.oauth2.user-info-uri</mat-label>
-                                        <input matInput formControlName="userInfoUri" required>
-                                        <mat-error *ngIf="registration.get('userInfoUri').hasError('required')">
-                                          {{ 'admin.oauth2.user-info-uri-required' | translate }}
-                                        </mat-error>
-                                        <mat-error *ngIf="registration.get('userInfoUri').hasError('pattern')">
-                                          {{ 'admin.oauth2.uri-pattern-error' | translate }}
-                                        </mat-error>
-                                      </mat-form-field>
-                                    </div>
-
-                                    <mat-form-field fxFlex class="mat-block">
-                                      <mat-label translate>admin.oauth2.client-authentication-method</mat-label>
-                                      <mat-select formControlName="clientAuthenticationMethod">
-                                        <mat-option *ngFor="let clientAuthenticationMethod of clientAuthenticationMethods"
-                                                    [value]="clientAuthenticationMethod">
-                                          {{ clientAuthenticationMethod | uppercase }}
-                                        </mat-option>
-                                      </mat-select>
-                                    </mat-form-field>
-
-                                    <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" *ngIf="registration.get('providerName').value === 'Custom'">
-                                      <mat-form-field fxFlex class="mat-block">
-                                        <mat-label translate>admin.oauth2.login-button-label</mat-label>
-                                        <input matInput formControlName="loginButtonLabel" required>
-                                        <mat-error
-                                          *ngIf="registration.get('loginButtonLabel').hasError('required')">
-                                          {{ 'admin.oauth2.login-button-label-required' | translate }}
-                                        </mat-error>
-                                      </mat-form-field>
-
-                                      <mat-form-field fxFlex class="mat-block">
-                                        <mat-label translate>admin.oauth2.login-button-icon</mat-label>
-                                        <input matInput formControlName="loginButtonIcon">
-                                      </mat-form-field>
-                                    </div>
-
-                                    <mat-form-field fxFlex class="mat-block">
-                                      <mat-label translate>admin.oauth2.scope</mat-label>
-                                      <mat-chip-list #scopeList>
-                                        <mat-chip *ngFor="let scope of registration.get('scope').value; let k = index;"
-                                                  removable (removed)="removeScope(k, registration)">
-                                          {{scope}}
-                                          <mat-icon matChipRemove>cancel</mat-icon>
-                                        </mat-chip>
-                                        <input [matChipInputFor]="scopeList"
-                                               [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                                               matChipInputAddOnBlur
-                                               (matChipInputTokenEnd)="addScope($event, registration)">
-                                      </mat-chip-list>
-                                      <mat-error *ngIf="registration.get('scope').hasError('required')">
-                                        {{ 'admin.oauth2.jwk-set-uri-required' | translate }}
-                                      </mat-error>
-                                    </mat-form-field>
-
-                                  </mat-tab>
-                                  <mat-tab label="Mapper">
-                                    <mat-form-field class="mat-block" style="margin-top: 16px;">
-                                      <mat-label translate>admin.oauth2.user-name-attribute-name</mat-label>
-                                      <input matInput formControlName="userNameAttributeName" required>
-                                      <mat-error *ngIf="registration.get('userNameAttributeName').hasError('required')">
-                                        {{ 'admin.oauth2.user-name-attribute-name-required' | translate }}
-                                      </mat-error>
-                                    </mat-form-field>
-
-                                    <section formGroupName="mapperConfig">
-                                      <div fxLayout="column" fxLayoutGap="8px">
-                                        <mat-checkbox formControlName="allowUserCreation">
-                                          {{ 'admin.oauth2.allow-user-creation' | translate }}
-                                        </mat-checkbox>
-                                        <mat-checkbox formControlName="activateUser">
-                                          {{ 'admin.oauth2.activate-user' | translate }}
-                                        </mat-checkbox>
-                                      </div>
-
-                                      <mat-form-field fxFlex class="mat-block">
-                                        <mat-label translate>admin.oauth2.type</mat-label>
-                                        <mat-select formControlName="type">
-                                          <mat-option *ngFor="let converterTypeExternalUser of converterTypesExternalUser"
-                                                      [value]="converterTypeExternalUser">
-                                            {{ converterTypeExternalUser }}
-                                          </mat-option>
-                                        </mat-select>
-                                      </mat-form-field>
-
-                                      <section formGroupName="basic"
-                                               *ngIf="registration.get('mapperConfig.type').value === 'BASIC'">
-                                        <mat-form-field class="mat-block">
-                                          <mat-label translate>admin.oauth2.email-attribute-key</mat-label>
-                                          <input matInput formControlName="emailAttributeKey" required>
-                                          <mat-error
-                                            *ngIf="registration.get('mapperConfig.basic.emailAttributeKey').hasError('required')">
-                                            {{ 'admin.oauth2.email-attribute-key-required' | translate }}
-                                          </mat-error>
-                                        </mat-form-field>
-
-                                        <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
+                                <mat-expansion-panel class="mat-elevation-z0 custom-settings"
+                                                     [disabled]="registration.get('providerName').value === 'Custom'"
+                                                     [expanded]="registration.get('providerName').value === 'Custom'">
+                                  <mat-expansion-panel-header [fxHide]="registration.get('providerName').value === 'Custom'">
+                                    <mat-panel-description fxLayoutAlign="end center">
+                                      {{ 'admin.oauth2.custom-setting' | translate }}
+                                    </mat-panel-description>
+                                  </mat-expansion-panel-header>
+                                  <ng-template matExpansionPanelContent>
+                                    <mat-tab-group dynamicHeight>
+                                      <mat-tab label="{{ 'admin.oauth2.general' | translate }}">
+                                        <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" style="margin-top: 16px;">
                                           <mat-form-field fxFlex class="mat-block">
-                                            <mat-label translate>admin.oauth2.first-name-attribute-key</mat-label>
-                                            <input matInput formControlName="firstNameAttributeKey">
+                                            <mat-label translate>admin.oauth2.access-token-uri</mat-label>
+                                            <input matInput formControlName="accessTokenUri" required>
+                                            <button mat-icon-button matSuffix
+                                                    type="button"
+                                                    (click)="toggleEditMode(registration, 'accessTokenUri')"
+                                                    *ngIf="registration.get('providerName').value !== 'Custom'">
+                                              <mat-icon class="material-icons">create</mat-icon>
+                                            </button>
+                                            <mat-error *ngIf="registration.get('accessTokenUri').hasError('required')">
+                                              {{ 'admin.oauth2.access-token-uri-required' | translate }}
+                                            </mat-error>
+                                            <mat-error *ngIf="registration.get('accessTokenUri').hasError('pattern')">
+                                              {{ 'admin.oauth2.uri-pattern-error' | translate }}
+                                            </mat-error>
                                           </mat-form-field>
 
                                           <mat-form-field fxFlex class="mat-block">
-                                            <mat-label translate>admin.oauth2.last-name-attribute-key</mat-label>
-                                            <input matInput formControlName="lastNameAttributeKey">
+                                            <mat-label translate>admin.oauth2.authorization-uri</mat-label>
+                                            <input matInput formControlName="authorizationUri" required>
+                                            <button mat-icon-button matSuffix
+                                                    type="button"
+                                                    (click)="toggleEditMode(registration, 'authorizationUri')"
+                                                    *ngIf="registration.get('providerName').value !== 'Custom'">
+                                              <mat-icon class="material-icons">create</mat-icon>
+                                            </button>
+                                            <mat-error *ngIf="registration.get('authorizationUri').hasError('required')">
+                                              {{ 'admin.oauth2.authorization-uri-required' | translate }}
+                                            </mat-error>
+                                            <mat-error *ngIf="registration.get('authorizationUri').hasError('pattern')">
+                                              {{ 'admin.oauth2.uri-pattern-error' | translate }}
+                                            </mat-error>
                                           </mat-form-field>
                                         </div>
 
                                         <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                                          <mat-form-field fxFlex class="mat-block">
-                                            <mat-label translate>admin.oauth2.tenant-name-strategy</mat-label>
-                                            <mat-select formControlName="tenantNameStrategy">
-                                              <mat-option *ngFor="let tenantNameStrategy of tenantNameStrategies"
-                                                          [value]="tenantNameStrategy">
-                                                {{ tenantNameStrategy }}
-                                              </mat-option>
-                                            </mat-select>
+                                          <mat-form-field fxFlex class="mat-block" appearance="legacy">
+                                            <mat-label translate>admin.oauth2.jwk-set-uri</mat-label>
+                                            <input matInput formControlName="jwkSetUri">
+                                            <button mat-icon-button matSuffix
+                                                    type="button" aria-label="Clear"
+                                                    (click)="toggleEditMode(registration, 'jwkSetUri')"
+                                                    *ngIf="registration.get('providerName').value !== 'Custom'">
+                                              <mat-icon class="material-icons">create</mat-icon>
+                                            </button>
+                                            <mat-error *ngIf="registration.get('jwkSetUri').hasError('pattern')">
+                                              {{ 'admin.oauth2.uri-pattern-error' | translate }}
+                                            </mat-error>
                                           </mat-form-field>
 
-                                          <mat-form-field fxFlex class="mat-block" *ngIf="registration.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'">
-                                            <mat-label translate>admin.oauth2.tenant-name-pattern</mat-label>
-                                            <input matInput
-                                                   formControlName="tenantNamePattern"
-                                                   [required]="registration.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'">
-                                            <mat-error
-                                              *ngIf="registration.get('mapperConfig.basic.tenantNamePattern').hasError('required')">
-                                              {{ 'admin.oauth2.tenant-name-pattern-required' | translate }}
+                                          <mat-form-field fxFlex class="mat-block">
+                                            <mat-label translate>admin.oauth2.user-info-uri</mat-label>
+                                            <input matInput formControlName="userInfoUri" required>
+                                            <button mat-icon-button matSuffix
+                                                    type="button"
+                                                    (click)="toggleEditMode(registration, 'userInfoUri')"
+                                                    *ngIf="registration.get('providerName').value !== 'Custom'">
+                                              <mat-icon class="material-icons">create</mat-icon>
+                                            </button>
+                                            <mat-error *ngIf="registration.get('userInfoUri').hasError('required')">
+                                              {{ 'admin.oauth2.user-info-uri-required' | translate }}
+                                            </mat-error>
+                                            <mat-error *ngIf="registration.get('userInfoUri').hasError('pattern')">
+                                              {{ 'admin.oauth2.uri-pattern-error' | translate }}
                                             </mat-error>
                                           </mat-form-field>
                                         </div>
 
                                         <mat-form-field fxFlex class="mat-block">
-                                          <mat-label translate>admin.oauth2.customer-name-pattern</mat-label>
-                                          <input matInput formControlName="customerNamePattern">
+                                          <mat-label translate>admin.oauth2.client-authentication-method</mat-label>
+                                          <mat-select formControlName="clientAuthenticationMethod">
+                                            <mat-option *ngFor="let clientAuthenticationMethod of clientAuthenticationMethods"
+                                                        [value]="clientAuthenticationMethod">
+                                              {{ clientAuthenticationMethod | uppercase }}
+                                            </mat-option>
+                                          </mat-select>
                                         </mat-form-field>
 
-                                        <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
+                                        <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" *ngIf="registration.get('providerName').value === 'Custom'">
                                           <mat-form-field fxFlex class="mat-block">
-                                            <mat-label translate>admin.oauth2.default-dashboard-name</mat-label>
-                                            <input matInput formControlName="defaultDashboardName">
+                                            <mat-label translate>admin.oauth2.login-button-label</mat-label>
+                                            <input matInput formControlName="loginButtonLabel" required>
+                                            <mat-error
+                                              *ngIf="registration.get('loginButtonLabel').hasError('required')">
+                                              {{ 'admin.oauth2.login-button-label-required' | translate }}
+                                            </mat-error>
                                           </mat-form-field>
 
-                                          <mat-checkbox fxFlex formControlName="alwaysFullScreen" class="checkbox-row">
-                                            {{ 'admin.oauth2.always-fullscreen' | translate}}
-                                          </mat-checkbox>
+                                          <mat-form-field fxFlex class="mat-block">
+                                            <mat-label translate>admin.oauth2.login-button-icon</mat-label>
+                                            <input matInput formControlName="loginButtonIcon">
+                                          </mat-form-field>
                                         </div>
-                                      </section>
-
-                                      <section formGroupName="custom"
-                                               *ngIf="registration.get('mapperConfig.type').value === 'CUSTOM'">
-                                        <mat-form-field class="mat-block">
-                                          <mat-label translate>admin.oauth2.url</mat-label>
-                                          <input matInput formControlName="url" required>
-                                          <mat-error
-                                            *ngIf="registration.get('mapperConfig.custom.url').hasError('required')">
-                                            {{ 'admin.oauth2.url-required' | translate }}
-                                          </mat-error>
-                                          <mat-error
-                                            *ngIf="registration.get('mapperConfig.custom.url').hasError('pattern')">
-                                            {{ 'admin.oauth2.url-pattern' | translate }}
+
+                                        <section formGroupName="mapperConfig">
+                                          <div fxLayout="column" fxLayoutGap="8px" style="margin-bottom: 8px;">
+                                            <mat-checkbox formControlName="allowUserCreation">
+                                              {{ 'admin.oauth2.allow-user-creation' | translate }}
+                                            </mat-checkbox>
+                                            <mat-checkbox formControlName="activateUser">
+                                              {{ 'admin.oauth2.activate-user' | translate }}
+                                            </mat-checkbox>
+                                          </div>
+                                        </section>
+
+                                        <mat-form-field fxFlex class="mat-block">
+                                          <mat-label translate>admin.oauth2.scope</mat-label>
+                                          <mat-chip-list #scopeList>
+                                            <mat-chip *ngFor="let scope of registration.get('scope').value; let k = index;"
+                                                      removable (removed)="removeScope(k, registration)">
+                                              {{scope}}
+                                              <mat-icon matChipRemove>cancel</mat-icon>
+                                            </mat-chip>
+                                            <input [matChipInputFor]="scopeList"
+                                                   [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                                                   matChipInputAddOnBlur
+                                                   (matChipInputTokenEnd)="addScope($event, registration)">
+                                          </mat-chip-list>
+                                        </mat-form-field>
+
+                                      </mat-tab>
+                                      <mat-tab label="{{ 'admin.oauth2.mapper' | translate }}">
+                                        <mat-form-field class="mat-block" style="margin-top: 16px;">
+                                          <mat-label translate>admin.oauth2.user-name-attribute-name</mat-label>
+                                          <input matInput formControlName="userNameAttributeName" required>
+                                          <mat-error *ngIf="registration.get('userNameAttributeName').hasError('required')">
+                                            {{ 'admin.oauth2.user-name-attribute-name-required' | translate }}
                                           </mat-error>
                                         </mat-form-field>
 
-                                        <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
+                                        <section formGroupName="mapperConfig">
                                           <mat-form-field fxFlex class="mat-block">
-                                            <mat-label translate>common.username</mat-label>
-                                            <input matInput formControlName="username" autocomplete="new-username">
+                                            <mat-label translate>admin.oauth2.type</mat-label>
+                                            <mat-select formControlName="type">
+                                              <mat-option *ngFor="let converterTypeExternalUser of converterTypesExternalUser"
+                                                          [value]="converterTypeExternalUser">
+                                                {{ converterTypeExternalUser }}
+                                              </mat-option>
+                                            </mat-select>
                                           </mat-form-field>
 
-                                          <mat-form-field fxFlex class="mat-block">
-                                            <mat-label translate>common.password</mat-label>
-                                            <input matInput type="password" formControlName="password" autocomplete="new-password">
-                                          </mat-form-field>
-                                        </div>
-                                      </section>
-                                    </section>
-                                  </mat-tab>
-                                </mat-tab-group>
+                                          <section formGroupName="basic"
+                                                   *ngIf="registration.get('mapperConfig.type').value === 'BASIC'">
+                                            <mat-form-field class="mat-block">
+                                              <mat-label translate>admin.oauth2.email-attribute-key</mat-label>
+                                              <input matInput formControlName="emailAttributeKey" required>
+                                              <mat-error
+                                                *ngIf="registration.get('mapperConfig.basic.emailAttributeKey').hasError('required')">
+                                                {{ 'admin.oauth2.email-attribute-key-required' | translate }}
+                                              </mat-error>
+                                            </mat-form-field>
+
+                                            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
+                                              <mat-form-field fxFlex class="mat-block">
+                                                <mat-label translate>admin.oauth2.first-name-attribute-key</mat-label>
+                                                <input matInput formControlName="firstNameAttributeKey">
+                                              </mat-form-field>
+
+                                              <mat-form-field fxFlex class="mat-block">
+                                                <mat-label translate>admin.oauth2.last-name-attribute-key</mat-label>
+                                                <input matInput formControlName="lastNameAttributeKey">
+                                              </mat-form-field>
+                                            </div>
+
+                                            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
+                                              <mat-form-field fxFlex class="mat-block">
+                                                <mat-label translate>admin.oauth2.tenant-name-strategy</mat-label>
+                                                <mat-select formControlName="tenantNameStrategy">
+                                                  <mat-option *ngFor="let tenantNameStrategy of tenantNameStrategies"
+                                                              [value]="tenantNameStrategy">
+                                                    {{ tenantNameStrategy }}
+                                                  </mat-option>
+                                                </mat-select>
+                                              </mat-form-field>
+
+                                              <mat-form-field fxFlex class="mat-block" *ngIf="registration.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'">
+                                                <mat-label translate>admin.oauth2.tenant-name-pattern</mat-label>
+                                                <input matInput
+                                                       formControlName="tenantNamePattern"
+                                                       [required]="registration.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'">
+                                                <mat-error
+                                                  *ngIf="registration.get('mapperConfig.basic.tenantNamePattern').hasError('required')">
+                                                  {{ 'admin.oauth2.tenant-name-pattern-required' | translate }}
+                                                </mat-error>
+                                              </mat-form-field>
+                                            </div>
+
+                                            <mat-form-field fxFlex class="mat-block">
+                                              <mat-label translate>admin.oauth2.customer-name-pattern</mat-label>
+                                              <input matInput formControlName="customerNamePattern">
+                                            </mat-form-field>
+
+                                            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
+                                              <mat-form-field fxFlex class="mat-block">
+                                                <mat-label translate>admin.oauth2.default-dashboard-name</mat-label>
+                                                <input matInput formControlName="defaultDashboardName">
+                                              </mat-form-field>
+
+                                              <mat-checkbox fxFlex formControlName="alwaysFullScreen" class="checkbox-row">
+                                                {{ 'admin.oauth2.always-fullscreen' | translate}}
+                                              </mat-checkbox>
+                                            </div>
+                                          </section>
+
+                                          <section formGroupName="custom"
+                                                   *ngIf="registration.get('mapperConfig.type').value === 'CUSTOM'">
+                                            <mat-form-field class="mat-block">
+                                              <mat-label translate>admin.oauth2.url</mat-label>
+                                              <input matInput formControlName="url" required>
+                                              <mat-error
+                                                *ngIf="registration.get('mapperConfig.custom.url').hasError('required')">
+                                                {{ 'admin.oauth2.url-required' | translate }}
+                                              </mat-error>
+                                              <mat-error
+                                                *ngIf="registration.get('mapperConfig.custom.url').hasError('pattern')">
+                                                {{ 'admin.oauth2.url-pattern' | translate }}
+                                              </mat-error>
+                                            </mat-form-field>
+
+                                            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
+                                              <mat-form-field fxFlex class="mat-block">
+                                                <mat-label translate>common.username</mat-label>
+                                                <input matInput formControlName="username" autocomplete="new-username">
+                                              </mat-form-field>
+
+                                              <mat-form-field fxFlex class="mat-block">
+                                                <mat-label translate>common.password</mat-label>
+                                                <input matInput type="password" formControlName="password" autocomplete="new-password">
+                                              </mat-form-field>
+                                            </div>
+                                          </section>
+                                        </section>
+                                      </mat-tab>
+                                    </mat-tab-group>
+                                  </ng-template>
+                                </mat-expansion-panel>
 
                               </section>
                             </ng-template>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.scss b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.scss
index d174ba2dcf..ae7e94a5ac 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.scss
@@ -21,9 +21,32 @@
   .registration-card{
     margin-bottom: 8px;
     border: 1px solid rgba(0, 0, 0, 0.2);
+
+    .custom-settings{
+      font-size: 16px;
+      .mat-expansion-panel-header{
+        padding: 0 2px;
+      }
+    }
   }
 
   .container{
     margin-bottom: 16px;
   }
 }
+
+:host ::ng-deep{
+  .registration-card{
+    .custom-settings{
+      .mat-expansion-panel-body{
+        padding: 0 2px 16px;
+      }
+      .mat-tab-label{
+        text-transform: none;
+      }
+      .mat-form-field-suffix .mat-icon-button .mat-icon{
+        font-size: 18px;
+      }
+    }
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.ts b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.ts
index 0459213ee9..074236c006 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.ts
@@ -18,6 +18,7 @@ import { ChangeDetectorRef, Component, Inject, OnDestroy, OnInit, ViewContainerR
 import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import {
   ClientAuthenticationMethod,
+  ClientProviderTemplated,
   ClientRegistration,
   DomainParams,
   MapperConfigType,
@@ -50,9 +51,24 @@ import {
 })
 export class OAuth2SettingsComponent extends PageComponent implements OnInit, HasConfirmForm, OnDestroy {
 
-  private URL_REGEXP = /^[A-Za-z][A-Za-z\d.+-]*:\/*(?:\w+(?::\w+)?@)?[^\s/]+(?::\d+)?(?:\/[\w#!:.?+=&%@\-/]*)?$/;
+  private URL_REGEXP = /^[A-Za-z][A-Za-z\d.+-]*:\/*(?:\w+(?::\w+)?@)?[^\s/]+(?::\d+)?(?:\/[\w#!:.,?+=&%@\-/]*)?$/;
   private subscriptions: Subscription[] = [];
-  private templates = [];
+  private templates = new Map<string, ClientProviderTemplated>();
+  private defaultProvider = {
+    providerName: 'Custom',
+    clientAuthenticationMethod: 'Post',
+    userNameAttributeName: 'email',
+    mapperConfig: {
+      allowUserCreation: true,
+      activateUser: false,
+      type: 'BASIC',
+      basic: {
+        emailAttributeKey: 'email',
+        tenantNameStrategy: 'DOMAIN',
+        alwaysFullScreen: false
+      }
+    }
+  };
 
   readonly separatorKeysCodes: number[] = [ENTER, COMMA];
 
@@ -99,9 +115,9 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
     });
   }
 
-  private initTemplates(templates: any): void {
-    this.templates = templates;
-    templates.map(provider => this.templateProvider.push(provider.name));
+  private initTemplates(templates: ClientProviderTemplated[]): void {
+    templates.map(provider => this.templates.set(provider.name, provider));
+    this.templateProvider.push(...Array.from(this.templates.keys()));
     this.templateProvider.sort();
   }
 
@@ -118,7 +134,7 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
       tenantNamePattern: [null],
       customerNamePattern: [null],
       defaultDashboardName: [null],
-      alwaysFullScreen: [false],
+      alwaysFullScreen: [false]
     });
 
     this.subscriptions.push(basicGroup.get('tenantNameStrategy').valueChanges.subscribe((domain) => {
@@ -209,7 +225,7 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
       accessTokenUri: ['', [Validators.required, Validators.pattern(this.URL_REGEXP)]],
       authorizationUri: ['', [Validators.required, Validators.pattern(this.URL_REGEXP)]],
       scope: this.fb.array([], [Validators.required]),
-      jwkSetUri: ['', [Validators.required, Validators.pattern(this.URL_REGEXP)]],
+      jwkSetUri: ['', [Validators.pattern(this.URL_REGEXP)]],
       userInfoUri: ['', [Validators.required, Validators.pattern(this.URL_REGEXP)]],
       clientAuthenticationMethod: ['POST', [Validators.required]],
       userNameAttributeName: ['email', [Validators.required]],
@@ -233,6 +249,27 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
       }
     }));
 
+    this.subscriptions.push(clientRegistration.get('providerName').valueChanges.subscribe((provider) => {
+      (clientRegistration.get('scope') as FormArray).clear();
+      if (provider === 'Custom') {
+        clientRegistration.reset(this.defaultProvider, {emitEvent: false});
+        clientRegistration.get('accessTokenUri').enable();
+        clientRegistration.get('authorizationUri').enable();
+        clientRegistration.get('jwkSetUri').enable();
+        clientRegistration.get('userInfoUri').enable();
+      } else {
+        const template = this.templates.get(provider);
+        template.scope.forEach(() => {
+          (clientRegistration.get('scope') as FormArray).push(this.fb.control(''));
+        });
+        clientRegistration.get('accessTokenUri').disable();
+        clientRegistration.get('authorizationUri').disable();
+        clientRegistration.get('jwkSetUri').disable();
+        clientRegistration.get('userInfoUri').disable();
+        clientRegistration.patchValue(this.templates.get(provider), {emitEvent: false});
+      }
+    }));
+
     if (registrationData) {
       registrationData.scope.forEach(() => {
         (clientRegistration.get('scope') as FormArray).push(this.fb.control(''));
@@ -366,4 +403,8 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
       }
     });
   }
+
+  toggleEditMode(control: AbstractControl, path: string) {
+    control.get(path).disabled ? control.get(path).enable() : control.get(path).disable();
+  }
 }
diff --git a/ui-ngx/src/app/shared/models/settings.models.ts b/ui-ngx/src/app/shared/models/settings.models.ts
index 2016a309c6..8fe83aee09 100644
--- a/ui-ngx/src/app/shared/models/settings.models.ts
+++ b/ui-ngx/src/app/shared/models/settings.models.ts
@@ -14,6 +14,9 @@
 /// limitations under the License.
 ///
 
+import { EntityId } from '@shared/models/id/entity-id';
+import { TenantId } from '@shared/models/id/tenant-id';
+
 export const smtpPortPattern: RegExp = /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/;
 
 export interface AdminSettings<T> {
@@ -75,6 +78,17 @@ export interface DomainParams {
   clientRegistrations: ClientRegistration[];
 }
 
+export interface ClientProviderTemplated extends ClientRegistration{
+  additionalInfo: string;
+  comment: string;
+  createdTime: number;
+  helpLink: string;
+  id: EntityId;
+  name: string;
+  providerId: string;
+  tenantId: TenantId;
+}
+
 export interface ClientRegistration {
   loginButtonLabel: string;
   loginButtonIcon: string;
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index aea8c1cfe4..802575c0ff 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -128,7 +128,7 @@
         "add-provider": "Add provider",
         "settings": "Settings",
         "oauth2": {
-          "settings": "OAuth2 Settings",
+          "oauth2": "OAuth2",
           "registration-id": "Registration ID",
           "registration-id-required": "Registration ID is required.",
           "registration-id-unique": "Registration ID need to unique for the system.",
@@ -145,7 +145,6 @@
           "redirect-uri-template": "Redirect URI template",
           "redirect-uri-template-required": "Redirect URI template is required.",
           "jwk-set-uri": "JSON Web Key URI",
-          "jwk-set-uri-required": "JSON Web Key URI is required.",
           "user-info-uri": "User info URI",
           "user-info-uri-required": "User info URI is required.",
           "client-authentication-method": "Client authentication method",
@@ -173,7 +172,11 @@
           "delete-domain-title": "Are you sure you want to delete the domain '{{domainName}}'?",
           "delete-domain-text": "Be careful, after the confirmation a domain and all registration data will be unavailable.",
           "delete-registration-title": "Are you sure you want to delete the registration '{{name}}'?",
-          "delete-registration-text": "Be careful, after the confirmation a registration data will be unavailable."
+          "delete-registration-text": "Be careful, after the confirmation a registration data will be unavailable.",
+          "login-provider": "Login provider",
+          "custom-setting": "Custom settings",
+          "general": "General",
+          "mapper": "Mapper"
         }
       },
     "alarm": {