diff --git a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
index ff10de6fc2..35ba6048c0 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
@@ -243,23 +243,11 @@
                       </mat-error>
                     </mat-form-field>
                   </div>
-                  <mat-form-field class="mat-block flex-1">
-                    <mat-label translate>admin.oauth2.scope</mat-label>
-                    <mat-chip-grid #scopeList>
-                      <mat-chip-row *ngFor="let scope of mailSettings.get('scope').value; let k = index; trackBy: trackByParams"
-                                    removable (removed)="removeScope(k)">
-                        {{scope}}
-                        <mat-icon matChipRemove>cancel</mat-icon>
-                      </mat-chip-row>
-                      <input [matChipInputFor]="scopeList"
-                             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                             matChipInputAddOnBlur
-                             (matChipInputTokenEnd)="addScope($event)">
-                    </mat-chip-grid>
-                    <mat-error *ngIf="mailSettings.get('scope').hasError('required')">
-                      {{ 'admin.oauth2.scope-required' | translate }}
-                    </mat-error>
-                  </mat-form-field>
+                  <tb-string-items-list
+                    formControlName="scope" required
+                    label="{{ 'admin.oauth2.scope' | translate }}"
+                    requiredText="{{ 'admin.oauth2.scope-required' | translate }}">
+                  </tb-string-items-list>
                 </ng-template>
               </mat-expansion-panel>
 
diff --git a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.ts b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.ts
index 3db82626fe..9cf14e8c49 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.ts
@@ -18,8 +18,7 @@ import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { PageComponent } from '@shared/components/page.component';
-import { FormBuilder, FormGroup, UntypedFormArray, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import {
   AdminSettings,
   MailConfigTemplate,
@@ -37,9 +36,6 @@ import { forkJoin, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { DomainSchema, domainSchemaTranslations, } from '@shared/models/oauth2.models';
 import { WINDOW } from '@core/services/window.service';
-import { AuthService } from '@core/auth/auth.service';
-import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { MatChipInputEvent } from '@angular/material/chips';
 
 @Component({
   selector: 'tb-mail-server',
@@ -51,7 +47,7 @@ export class MailServerComponent extends PageComponent implements OnInit, OnDest
   smtpProtocols = Object.values(SmtpProtocol);
   showChangePassword = false;
 
-  protocols = Object.values(DomainSchema).filter(value => value !== DomainSchema.MIXED);
+  protocols: DomainSchema[] = Object.values(DomainSchema).filter(value => value !== DomainSchema.MIXED);
   domainSchemaTranslations = domainSchemaTranslations;
 
   mailServerOauth2Provider = MailServerOauth2Provider;
@@ -64,8 +60,6 @@ export class MailServerComponent extends PageComponent implements OnInit, OnDest
 
   templateProvider = ['CUSTOM'];
 
-  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
-
   private destroy$ = new Subject<void>();
   private DOMAIN_AND_PORT_REGEXP = /^(?:\w+(?::\w+)?@)?[^\s/]+(?::\d+)?$/;
   private URL_REGEXP = /^[A-Za-z][A-Za-z\d.+-]*:\/*(?:\w+(?::\w+)?@)?[^\s/]+(?::\d+)?(?:\/[\w#!:.,?+=&%@\-/]*)?$/;
@@ -98,7 +92,7 @@ export class MailServerComponent extends PageComponent implements OnInit, OnDest
     providerTenantId: [{value: '', disabled: true}, [Validators.required]],
     authUri: [{value: '', disabled: true}, [Validators.required, Validators.pattern(this.URL_REGEXP)]],
     tokenUri: [{value: '', disabled: true}, [Validators.required, Validators.pattern(this.URL_REGEXP)]],
-    scope: [],
+    scope: this.fb.control<Array<string>>({value: [], disabled: true}, Validators.required),
     redirectUri: [{ value:'', disabled: true}]
   });
 
@@ -134,10 +128,7 @@ export class MailServerComponent extends PageComponent implements OnInit, OnDest
   });
 
   constructor(protected store: Store<AppState>,
-              private router: Router,
-              private route: ActivatedRoute,
               private adminService: AdminService,
-              private authService: AuthService,
               private translate: TranslateService,
               public fb: FormBuilder,
               @Inject(WINDOW) private window: Window) {
@@ -148,14 +139,14 @@ export class MailServerComponent extends PageComponent implements OnInit, OnDest
     this.mailServerSettingsForm();
     this.domainFormConfiguration();
 
-    forkJoin([
-      this.adminService.getLoginProcessingUrl(),
-      this.adminService.getMailConfigTemplate(),
-      this.adminService.getAdminSettings<MailServerSettings>('mail')
-    ]).subscribe(([loginProcessingUrl, mailConfigTemplate, adminSettings]) => {
-      this.loginProcessingUrl = loginProcessingUrl;
-      this.initTemplates(mailConfigTemplate);
-      this.adminSettings = adminSettings;
+    forkJoin({
+      loginProcessingUrl: this.adminService.getLoginProcessingUrl(),
+      mailConfigTemplate: this.adminService.getMailConfigTemplate(),
+      adminSettings: this.adminService.getAdminSettings<MailServerSettings>('mail')
+    }).subscribe((data) => {
+      this.loginProcessingUrl = data.loginProcessingUrl;
+      this.initTemplates(data.mailConfigTemplate);
+      this.adminSettings = data.adminSettings;
       if (this.adminSettings.jsonValue && isString(this.adminSettings.jsonValue.enableTls)) {
         this.adminSettings.jsonValue.enableTls = (this.adminSettings.jsonValue.enableTls as any) === 'true';
       }
@@ -187,7 +178,7 @@ export class MailServerComponent extends PageComponent implements OnInit, OnDest
     super.ngOnDestroy();
   }
 
-  private initTemplates(templates): void {
+  private initTemplates(templates: Array<MailConfigTemplate>): void {
     templates.map(provider => {
       delete provider.additionalInfo;
       this.templates.set(provider.providerId, provider);
@@ -294,6 +285,7 @@ export class MailServerComponent extends PageComponent implements OnInit, OnDest
       this.mailSettings.get('clientId').enable({emitEvent: false});
       this.mailSettings.get('clientSecret').enable({emitEvent: false});
       this.mailSettings.get('redirectUri').enable({emitEvent: false});
+      this.mailSettings.get('scope').enable({emitEvent: false});
       if (this.mailSettings.get('providerId').value === this.mailServerOauth2Provider.CUSTOM) {
         this.mailSettings.get('authUri').enable({emitEvent: false});
         this.mailSettings.get('tokenUri').enable({emitEvent: false});
@@ -307,6 +299,7 @@ export class MailServerComponent extends PageComponent implements OnInit, OnDest
       this.mailSettings.get('redirectUri').disable({emitEvent: false});
       this.mailSettings.get('authUri').disable({emitEvent: false});
       this.mailSettings.get('tokenUri').disable({emitEvent: false});
+      this.mailSettings.get('scope').disable({emitEvent: false});
     }
   }
 
@@ -422,31 +415,6 @@ export class MailServerComponent extends PageComponent implements OnInit, OnDest
     return formValue;
   }
 
-  trackByParams(index: number): number {
-    return index;
-  }
-
-  removeScope(i: number): void {
-    const controller = this.mailSettings.get('scope') as UntypedFormArray;
-    controller.removeAt(i);
-    controller.markAsTouched();
-    controller.markAsDirty();
-  }
-
-  addScope(event: MatChipInputEvent): void {
-    const input = event.chipInput.inputElement;
-    const value = event.value;
-    const controller = this.mailSettings.get('scope') as UntypedFormArray;
-    if ((value.trim() !== '')) {
-      controller.push(this.fb.control(value.trim()));
-      controller.markAsDirty();
-    }
-
-    if (input) {
-      input.value = '';
-    }
-  }
-
   toggleEditMode(path: string): void {
     this.mailSettings.get(path).disabled ? this.mailSettings.get(path).enable() : this.mailSettings.get(path).disable();
   }