diff --git a/npm/ng-packs/packages/setting-management/src/lib/actions/setting-management.actions.ts b/npm/ng-packs/packages/setting-management/src/lib/actions/setting-management.actions.ts
index c3f082316c..9fd4c48238 100644
--- a/npm/ng-packs/packages/setting-management/src/lib/actions/setting-management.actions.ts
+++ b/npm/ng-packs/packages/setting-management/src/lib/actions/setting-management.actions.ts
@@ -1,6 +1,6 @@
-import { SettingTab } from '@abp/ng.theme.shared';
+import { ABP } from '@abp/ng.core';
 
 export class SetSelectedSettingTab {
   static readonly type = '[SettingManagement] Set Selected Tab';
-  constructor(public payload: SettingTab) {}
+  constructor(public payload: ABP.Tab) {}
 }
diff --git a/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.ts b/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.ts
index 7a7085e4e1..5b65c1f76d 100644
--- a/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.ts
+++ b/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.ts
@@ -1,7 +1,7 @@
-import { ConfigState } from '@abp/ng.core';
-import { getSettingTabs, SettingTab } from '@abp/ng.theme.shared';
-import { Component, OnInit, TrackByFunction } from '@angular/core';
+import { ABP, SettingTabsService } from '@abp/ng.core';
+import { Component, OnDestroy, OnInit, TrackByFunction } from '@angular/core';
 import { Store } from '@ngxs/store';
+import { Subscription } from 'rxjs';
 import { SetSelectedSettingTab } from '../actions/setting-management.actions';
 import { SettingManagementState } from '../states/setting-management.state';
 
@@ -9,35 +9,34 @@ import { SettingManagementState } from '../states/setting-management.state';
   selector: 'abp-setting-management',
   templateUrl: './setting-management.component.html',
 })
-export class SettingManagementComponent implements OnInit {
-  settings: SettingTab[] = [];
+export class SettingManagementComponent implements OnDestroy, OnInit {
+  private subscription = new Subscription();
+  settings: ABP.Tab[] = [];
 
-  set selected(value: SettingTab) {
+  set selected(value: ABP.Tab) {
     this.store.dispatch(new SetSelectedSettingTab(value));
   }
-  get selected(): SettingTab {
+  get selected(): ABP.Tab {
     const value = this.store.selectSnapshot(SettingManagementState.getSelectedTab);
 
-    if ((!value || !value.component) && this.settings.length) {
-      return this.settings[0];
-    }
-
-    return value;
+    return value?.component ? value : this.settings[0] || ({} as ABP.Tab);
   }
 
-  trackByFn: TrackByFunction<SettingTab> = (_, item) => item.name;
+  trackByFn: TrackByFunction<ABP.Tab> = (_, item) => item.name;
+
+  constructor(private store: Store, private settingTabs: SettingTabsService) {}
 
-  constructor(private store: Store) {}
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
 
   ngOnInit() {
-    this.settings = getSettingTabs()
-      .filter(setting =>
-        this.store.selectSnapshot(ConfigState.getGrantedPolicy(setting.requiredPolicy)),
-      )
-      .sort((a, b) => a.order - b.order);
-
-    if (!this.selected && this.settings.length) {
-      this.selected = this.settings[0];
-    }
+    this.subscription.add(
+      this.settingTabs.visible$.subscribe(settings => {
+        this.settings = settings;
+
+        if (!this.selected) this.selected = this.settings[0];
+      }),
+    );
   }
 }
diff --git a/npm/ng-packs/packages/setting-management/src/lib/models/setting-management.ts b/npm/ng-packs/packages/setting-management/src/lib/models/setting-management.ts
index b0aedd4373..cb6f542cbc 100644
--- a/npm/ng-packs/packages/setting-management/src/lib/models/setting-management.ts
+++ b/npm/ng-packs/packages/setting-management/src/lib/models/setting-management.ts
@@ -1,7 +1,7 @@
-import { SettingTab } from '@abp/ng.theme.shared';
+import { ABP } from '@abp/ng.core';
 
 export namespace SettingManagement {
   export interface State {
-    selectedTab: SettingTab;
+    selectedTab?: ABP.Tab;
   }
 }
diff --git a/npm/ng-packs/packages/setting-management/src/lib/states/setting-management.state.ts b/npm/ng-packs/packages/setting-management/src/lib/states/setting-management.state.ts
index 7490117b38..19a6ba8835 100644
--- a/npm/ng-packs/packages/setting-management/src/lib/states/setting-management.state.ts
+++ b/npm/ng-packs/packages/setting-management/src/lib/states/setting-management.state.ts
@@ -1,11 +1,11 @@
+import { Injectable } from '@angular/core';
 import { Action, Selector, State, StateContext } from '@ngxs/store';
 import { SetSelectedSettingTab } from '../actions/setting-management.actions';
 import { SettingManagement } from '../models/setting-management';
-import { Injectable } from '@angular/core';
 
 @State<SettingManagement.State>({
   name: 'SettingManagementState',
-  defaults: { selectedTab: {} } as SettingManagement.State,
+  defaults: {},
 })
 @Injectable()
 export class SettingManagementState {