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..c690c7b8d1
--- /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/proxy/README.md b/npm/ng-packs/packages/setting-management/config/src/proxy/README.md
new file mode 100644
index 0000000000..767dfd0f7c
--- /dev/null
+++ b/npm/ng-packs/packages/setting-management/config/src/proxy/README.md
@@ -0,0 +1,17 @@
+# Proxy Generation Output
+
+This directory includes the output of the latest proxy generation.
+The files and folders in it will be overwritten when proxy generation is run again.
+Therefore, please do not place your own content in this folder.
+
+In addition, `generate-proxy.json` works like a lock file.
+It includes information used by the proxy generator, so please do not delete or modify it.
+
+Finally, the name of the files and folders should not be changed for two reasons:
+- Proxy generator will keep creating them at those paths and you will have multiple copies of the same content.
+- ABP Suite generates files which include imports from this folder.
+
+> **Important Notice:** If you are building a module and are planning to publish to npm,
+> some of the generated proxies are likely to be exported from public-api.ts file. In such a case,
+> please make sure you export files directly and not from barrel exports. In other words,
+> do not include index.ts exports in your public-api.ts exports.
diff --git a/npm/ng-packs/packages/setting-management/config/src/proxy/email-settings.service.ts b/npm/ng-packs/packages/setting-management/config/src/proxy/email-settings.service.ts
new file mode 100644
index 0000000000..a9967ef6a4
--- /dev/null
+++ b/npm/ng-packs/packages/setting-management/config/src/proxy/email-settings.service.ts
@@ -0,0 +1,27 @@
+import type { EmailSettingsDto, UpdateEmailSettingsDto } from './models';
+import { RestService } from '@abp/ng.core';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class EmailSettingsService {
+ apiName = 'SettingManagement';
+
+ get = () =>
+ this.restService.request