diff --git a/npm/ng-packs/packages/setting-management/config/src/components/email-setting-group/email-setting-group.component.html b/npm/ng-packs/packages/setting-management/config/src/components/email-setting-group/email-setting-group.component.html
new file mode 100644
index 0000000000..981de3496b
--- /dev/null
+++ b/npm/ng-packs/packages/setting-management/config/src/components/email-setting-group/email-setting-group.component.html
@@ -0,0 +1,68 @@
+<h2>{{ 'AbpSettingManagement::Menu:Emailing' | abpLocalization }}</h2>
+
+<hr class="my-3" />
+
+<form *ngIf="form" [formGroup]="form" (ngSubmit)="submit()" validateOnSubmit>
+  <div class="form-group">
+    <label>{{ 'AbpSettingManagement::DefaultFromDisplayName' | abpLocalization }}</label>
+    <input type="text" class="form-control" formControlName="defaultFromDisplayName" />
+  </div>
+  <div class="form-group">
+    <label>{{ 'AbpSettingManagement::DefaultFromAddress' | abpLocalization }}</label>
+    <input type="text" class="form-control" formControlName="defaultFromAddress" />
+  </div>
+  <div class="form-group">
+    <label>{{ 'AbpSettingManagement::SmtpHost' | abpLocalization }}</label>
+    <input type="text" class="form-control" formControlName="smtpHost" />
+  </div>
+  <div class="form-group">
+    <label>{{ 'AbpSettingManagement::SmtpPort' | abpLocalization }}</label>
+    <input type="number" class="form-control" formControlName="smtpPort" />
+  </div>
+
+  <div class="custom-checkbox custom-control mb-2">
+    <input
+      type="checkbox"
+      id="smtp-enable-ssl"
+      class="custom-control-input"
+      formControlName="smtpEnableSsl"
+    />
+    <label class="custom-control-label" for="smtp-enable-ssl">{{
+      'AbpSettingManagement::SmtpEnableSsl' | abpLocalization
+    }}</label>
+  </div>
+  <div class="custom-checkbox custom-control mb-2">
+    <input
+      type="checkbox"
+      id="smtp-use-default-credentials"
+      class="custom-control-input"
+      formControlName="smtpUseDefaultCredentials"
+    />
+    <label class="custom-control-label" for="smtp-use-default-credentials">{{
+      'AbpSettingManagement::SmtpUseDefaultCredentials' | abpLocalization
+    }}</label>
+  </div>
+
+  <div [@collapse]="form.get('smtpUseDefaultCredentials').value ? 'collapsed' : 'expanded'">
+    <div class="form-group">
+      <label>{{ 'AbpSettingManagement::SmtpDomain' | abpLocalization }}</label>
+      <input type="text" class="form-control" formControlName="smtpDomain" />
+    </div>
+
+    <div class="form-group">
+      <label>{{ 'AbpSettingManagement::SmtpUserName' | abpLocalization }}</label>
+      <input type="text" class="form-control" formControlName="smtpUserName" />
+    </div>
+
+    <div class="form-group">
+      <label>{{ 'AbpSettingManagement::SmtpPassword' | abpLocalization }}</label>
+      <input type="text" class="form-control" formControlName="smtpPassword" />
+    </div>
+  </div>
+
+  <hr />
+
+  <button type="submit" class="btn btn-primary">
+    {{ 'AbpSettingManagement::Save' | abpLocalization }}
+  </button>
+</form>
diff --git a/npm/ng-packs/packages/setting-management/config/src/components/email-setting-group/email-setting-group.component.ts b/npm/ng-packs/packages/setting-management/config/src/components/email-setting-group/email-setting-group.component.ts
new file mode 100644
index 0000000000..d756a93a53
--- /dev/null
+++ b/npm/ng-packs/packages/setting-management/config/src/components/email-setting-group/email-setting-group.component.ts
@@ -0,0 +1,60 @@
+import { collapse, ToasterService } from '@abp/ng.theme.shared';
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { finalize } from 'rxjs/operators';
+import { EmailSettingsService } from '../../proxy/email-settings.service';
+import { EmailSettingsDto } from '../../proxy/models';
+
+@Component({
+  selector: 'abp-email-setting-group',
+  templateUrl: 'email-setting-group.component.html',
+  animations: [collapse],
+})
+export class EmailSettingGroupComponent implements OnInit {
+  form: FormGroup;
+
+  saving = false;
+
+  constructor(
+    private emailSettingsService: EmailSettingsService,
+    private fb: FormBuilder,
+    private toasterService: ToasterService,
+  ) {}
+
+  ngOnInit() {
+    this.getData();
+  }
+
+  private getData() {
+    this.emailSettingsService.get().subscribe(res => {
+      this.buildForm(res);
+    });
+  }
+
+  private buildForm(emailSettings: EmailSettingsDto) {
+    this.form = this.fb.group({
+      defaultFromDisplayName: [emailSettings.defaultFromDisplayName, [Validators.required]],
+      defaultFromAddress: [emailSettings.defaultFromAddress, [Validators.required]],
+      smtpHost: [emailSettings.smtpHost],
+      smtpPort: [emailSettings.smtpPort, [Validators.required]],
+      smtpEnableSsl: [emailSettings.smtpEnableSsl],
+      smtpUseDefaultCredentials: [emailSettings.smtpUseDefaultCredentials],
+      smtpDomain: [emailSettings.smtpDomain],
+      smtpUserName: [emailSettings.smtpUserName],
+      smtpPassword: [emailSettings.smtpPassword],
+    });
+  }
+
+  submit() {
+    if (this.saving || this.form.invalid) return;
+
+    this.saving = true;
+    this.emailSettingsService
+      .update(this.form.value)
+      .pipe(finalize(() => (this.saving = false)))
+      .subscribe(() => {
+        this.toasterService.success('AbpSettingManagement::SuccessfullySaved');
+        this.getData();
+      });
+  }
+}
diff --git a/npm/ng-packs/packages/setting-management/config/src/enums/index.ts b/npm/ng-packs/packages/setting-management/config/src/enums/index.ts
index 3bda94b078..34fd5f8eb8 100644
--- a/npm/ng-packs/packages/setting-management/config/src/enums/index.ts
+++ b/npm/ng-packs/packages/setting-management/config/src/enums/index.ts
@@ -1 +1,2 @@
 export * from './route-names';
+export * from './setting-tab-names';
diff --git a/npm/ng-packs/packages/setting-management/config/src/enums/setting-tab-names.ts b/npm/ng-packs/packages/setting-management/config/src/enums/setting-tab-names.ts
new file mode 100644
index 0000000000..15eff851ac
--- /dev/null
+++ b/npm/ng-packs/packages/setting-management/config/src/enums/setting-tab-names.ts
@@ -0,0 +1,3 @@
+export const enum eSettingManamagementSettingTabNames {
+  EmailSettingGroup = 'AbpSettingManagement::Menu:Emailing',
+}
diff --git a/npm/ng-packs/packages/setting-management/config/src/providers/index.ts b/npm/ng-packs/packages/setting-management/config/src/providers/index.ts
index fe08efba8c..a1e873bacc 100644
--- a/npm/ng-packs/packages/setting-management/config/src/providers/index.ts
+++ b/npm/ng-packs/packages/setting-management/config/src/providers/index.ts
@@ -1 +1,2 @@
 export * from './route.provider';
+export * from './setting-tab.provider';
diff --git a/npm/ng-packs/packages/setting-management/config/src/providers/setting-tab.provider.ts b/npm/ng-packs/packages/setting-management/config/src/providers/setting-tab.provider.ts
new file mode 100644
index 0000000000..b4d15cf94c
--- /dev/null
+++ b/npm/ng-packs/packages/setting-management/config/src/providers/setting-tab.provider.ts
@@ -0,0 +1,26 @@
+import { SettingTabsService } from '@abp/ng.core';
+import { APP_INITIALIZER } from '@angular/core';
+import { EmailSettingGroupComponent } from '../components/email-setting-group/email-setting-group.component';
+import { eSettingManamagementSettingTabNames } from '../enums/setting-tab-names';
+
+export const SETTING_MANAGEMENT_SETTING_TAB_PROVIDERS = [
+  {
+    provide: APP_INITIALIZER,
+    useFactory: configureSettingTabs,
+    deps: [SettingTabsService],
+    multi: true,
+  },
+];
+
+export function configureSettingTabs(settingtabs: SettingTabsService) {
+  return () => {
+    settingtabs.add([
+      {
+        name: eSettingManamagementSettingTabNames.EmailSettingGroup,
+        order: 1,
+        requiredPolicy: 'SettingManagement.Emailing',
+        component: EmailSettingGroupComponent,
+      },
+    ]);
+  };
+}
diff --git a/npm/ng-packs/packages/setting-management/config/src/public-api.ts b/npm/ng-packs/packages/setting-management/config/src/public-api.ts
index dae3d291c2..c33f10d4d2 100644
--- a/npm/ng-packs/packages/setting-management/config/src/public-api.ts
+++ b/npm/ng-packs/packages/setting-management/config/src/public-api.ts
@@ -1,3 +1,5 @@
 export * from './enums';
 export * from './providers';
 export * from './setting-management-config.module';
+export * from './proxy';
+export * from './components/email-setting-group/email-setting-group.component';
diff --git a/npm/ng-packs/packages/setting-management/config/src/setting-management-config.module.ts b/npm/ng-packs/packages/setting-management/config/src/setting-management-config.module.ts
index 139166d487..38c04c68a0 100644
--- a/npm/ng-packs/packages/setting-management/config/src/setting-management-config.module.ts
+++ b/npm/ng-packs/packages/setting-management/config/src/setting-management-config.module.ts
@@ -1,12 +1,20 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
+import { CoreModule } from '@abp/ng.core';
+import { EmailSettingGroupComponent } from './components/email-setting-group/email-setting-group.component';
 import { SETTING_MANAGEMENT_ROUTE_PROVIDERS } from './providers/route.provider';
+import { SETTING_MANAGEMENT_SETTING_TAB_PROVIDERS } from './providers/setting-tab.provider';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
 
-@NgModule()
+@NgModule({
+  imports: [CoreModule, NgxValidateCoreModule],
+  declarations: [EmailSettingGroupComponent],
+  exports: [EmailSettingGroupComponent],
+})
 export class SettingManagementConfigModule {
   static forRoot(): ModuleWithProviders<SettingManagementConfigModule> {
     return {
       ngModule: SettingManagementConfigModule,
-      providers: [SETTING_MANAGEMENT_ROUTE_PROVIDERS],
+      providers: [SETTING_MANAGEMENT_ROUTE_PROVIDERS, SETTING_MANAGEMENT_SETTING_TAB_PROVIDERS],
     };
   }
 }