diff --git a/npm/ng-packs/apps/dev-app/src/app/app.module.ts b/npm/ng-packs/apps/dev-app/src/app/app.module.ts
index 9c89658357..cff75b7bfa 100644
--- a/npm/ng-packs/apps/dev-app/src/app/app.module.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/app.module.ts
@@ -13,6 +13,7 @@ import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { APP_ROUTE_PROVIDER } from './route.provider';
+import { FeatureManagementModule } from '@abp/ng.feature-management';
 
 @NgModule({
   imports: [
@@ -29,6 +30,7 @@ import { APP_ROUTE_PROVIDER } from './route.provider';
     AccountConfigModule.forRoot(),
     IdentityConfigModule.forRoot(),
     TenantManagementConfigModule.forRoot(),
+    FeatureManagementModule.forRoot(),
     SettingManagementConfigModule.forRoot(),
     ThemeBasicModule.forRoot(),
   ],
diff --git a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.html b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.html
new file mode 100644
index 0000000000..5ede3dba07
--- /dev/null
+++ b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.html
@@ -0,0 +1,19 @@
+<button class="btn btn-primary" type="button" (click)="openFeaturesModal()">
+  <i class="fa fa-cog"></i>
+  {{ 'Saas::ManageHostFeatures' | abpLocalization }}
+</button>
+<abp-feature-management
+  *abpReplaceableTemplate="{
+    inputs: {
+      providerName: { value: 'T' },
+      providerKey: { value: providerKey },
+      visible: { value: visibleFeatures, twoWay: true }
+    },
+    outputs: { visibleChange: onVisibleFeaturesChange },
+    componentKey: 'FeatureManagement.FeatureManagementComponent'
+  }"
+  [(visible)]="visibleFeatures"
+  providerName="T"
+  [providerKey]="providerKey"
+>
+</abp-feature-management>
diff --git a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.ts b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.ts
new file mode 100644
index 0000000000..3ac018478e
--- /dev/null
+++ b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'abp-feature-management-tab',
+  templateUrl: './feature-management-tab.component.html',
+})
+export class FeatureManagementTabComponent {
+  visibleFeatures = false;
+  providerKey: string;
+
+  openFeaturesModal() {
+    setTimeout(() => {
+      this.visibleFeatures = true;
+    }, 0);
+  }
+
+  onVisibleFeaturesChange = (value: boolean) => {
+    this.visibleFeatures = value;
+  };
+}
diff --git a/npm/ng-packs/packages/feature-management/src/lib/components/index.ts b/npm/ng-packs/packages/feature-management/src/lib/components/index.ts
index 64f8bd0fc5..50146e4f1a 100644
--- a/npm/ng-packs/packages/feature-management/src/lib/components/index.ts
+++ b/npm/ng-packs/packages/feature-management/src/lib/components/index.ts
@@ -1 +1,2 @@
 export * from './feature-management/feature-management.component';
+export * from './feature-management-tab/feature-management-tab.component';
diff --git a/npm/ng-packs/packages/feature-management/src/lib/enums/feature-management-tab-names.ts b/npm/ng-packs/packages/feature-management/src/lib/enums/feature-management-tab-names.ts
new file mode 100644
index 0000000000..46b04812a4
--- /dev/null
+++ b/npm/ng-packs/packages/feature-management/src/lib/enums/feature-management-tab-names.ts
@@ -0,0 +1,3 @@
+export const enum eFeatureManagementTabNames {
+  FeatureManagement = 'AbpFeatureManagement::Features',
+}
diff --git a/npm/ng-packs/packages/feature-management/src/lib/enums/index.ts b/npm/ng-packs/packages/feature-management/src/lib/enums/index.ts
new file mode 100644
index 0000000000..76e73d8e03
--- /dev/null
+++ b/npm/ng-packs/packages/feature-management/src/lib/enums/index.ts
@@ -0,0 +1,2 @@
+export * from './feature-management-tab-names';
+export * from './components';
diff --git a/npm/ng-packs/packages/feature-management/src/lib/feature-management.module.ts b/npm/ng-packs/packages/feature-management/src/lib/feature-management.module.ts
index 45fef5a64b..2de14108f1 100644
--- a/npm/ng-packs/packages/feature-management/src/lib/feature-management.module.ts
+++ b/npm/ng-packs/packages/feature-management/src/lib/feature-management.module.ts
@@ -1,15 +1,28 @@
 import { CoreModule } from '@abp/ng.core';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { FeatureManagementComponent } from './components/feature-management/feature-management.component';
 import { FreeTextInputDirective } from './directives/free-text-input.directive';
+import { FEATURE_MANAGEMENT_SETTINGS_PROVIDERS } from './providers';
+import { FeatureManagementTabComponent } from './components';
 
-const exported = [FeatureManagementComponent, FreeTextInputDirective];
+const exported = [
+  FeatureManagementComponent,
+  FreeTextInputDirective,
+  FeatureManagementTabComponent,
+];
 
 @NgModule({
   declarations: [...exported],
   imports: [CoreModule, ThemeSharedModule, NgbNavModule],
   exports: [...exported],
 })
-export class FeatureManagementModule {}
+export class FeatureManagementModule {
+  static forRoot(): ModuleWithProviders<FeatureManagementModule> {
+    return {
+      ngModule: FeatureManagementModule,
+      providers: [FEATURE_MANAGEMENT_SETTINGS_PROVIDERS],
+    };
+  }
+}
diff --git a/npm/ng-packs/packages/feature-management/src/lib/providers/feature-management-settings.provider.ts b/npm/ng-packs/packages/feature-management/src/lib/providers/feature-management-settings.provider.ts
new file mode 100644
index 0000000000..2d7664bb46
--- /dev/null
+++ b/npm/ng-packs/packages/feature-management/src/lib/providers/feature-management-settings.provider.ts
@@ -0,0 +1,26 @@
+import { SettingTabsService } from '@abp/ng.setting-management/config';
+import { APP_INITIALIZER } from '@angular/core';
+import { eFeatureManagementTabNames } from '../enums/feature-management-tab-names';
+import { FeatureManagementTabComponent } from '../components';
+
+export const FEATURE_MANAGEMENT_SETTINGS_PROVIDERS = [
+  {
+    provide: APP_INITIALIZER,
+    useFactory: configureSettingTabs,
+    deps: [SettingTabsService],
+    multi: true,
+  },
+];
+
+export function configureSettingTabs(settingtabs: SettingTabsService) {
+  return () => {
+    settingtabs.add([
+      {
+        name: eFeatureManagementTabNames.FeatureManagement,
+        order: 104,
+        requiredPolicy: 'FeatureManagement.ManageHostFeatures',
+        component: FeatureManagementTabComponent,
+      },
+    ]);
+  };
+}
diff --git a/npm/ng-packs/packages/feature-management/src/lib/providers/index.ts b/npm/ng-packs/packages/feature-management/src/lib/providers/index.ts
new file mode 100644
index 0000000000..34f4a30f78
--- /dev/null
+++ b/npm/ng-packs/packages/feature-management/src/lib/providers/index.ts
@@ -0,0 +1 @@
+export * from './feature-management-settings.provider';
diff --git a/npm/ng-packs/packages/feature-management/src/public-api.ts b/npm/ng-packs/packages/feature-management/src/public-api.ts
index b9073df803..ee7c276e92 100644
--- a/npm/ng-packs/packages/feature-management/src/public-api.ts
+++ b/npm/ng-packs/packages/feature-management/src/public-api.ts
@@ -1,5 +1,6 @@
 export * from './lib/components';
 export * from './lib/directives';
+export * from './lib/providers';
 export * from './lib/enums/components';
 export * from './lib/feature-management.module';
-export * from './lib/models';
\ No newline at end of file
+export * from './lib/models';