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..38e67db30d 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
@@ -9,6 +9,7 @@ import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgxsModule } from '@ngxs/store';
 import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -25,6 +26,7 @@ import { APP_ROUTE_PROVIDER } from './route.provider';
       sendNullsAsQueryParam: false,
       skipGetAppConfiguration: false,
     }),
+    NgxsModule.forRoot(),
     ThemeSharedModule.forRoot(),
     AccountConfigModule.forRoot(),
     IdentityConfigModule.forRoot(),
diff --git a/npm/ng-packs/package.json b/npm/ng-packs/package.json
index da4d291dcd..c9a5a15c70 100644
--- a/npm/ng-packs/package.json
+++ b/npm/ng-packs/package.json
@@ -70,6 +70,7 @@
     "@ng-bootstrap/ng-bootstrap": "^7.0.0",
     "@ngneat/spectator": "^8.0.3",
     "@ngx-validate/core": "^0.0.13",
+    "@ngxs/store": "^3.7.0",
     "@nrwl/angular": "12.6.5",
     "@nrwl/cli": "12.6.5",
     "@nrwl/cypress": "12.6.5",
@@ -102,6 +103,7 @@
     "lerna": "^4.0.0",
     "ng-packagr": "^12.2.0",
     "ng-zorro-antd": "^12.0.1",
+    "ngxs-schematic": "^1.1.9",
     "prettier": "^2.3.1",
     "protractor": "~7.0.0",
     "rxjs": "~6.6.0",
diff --git a/npm/ng-packs/packages/setting-management/src/lib/actions/index.ts b/npm/ng-packs/packages/setting-management/src/lib/actions/index.ts
deleted file mode 100644
index e51bb79bf8..0000000000
--- a/npm/ng-packs/packages/setting-management/src/lib/actions/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './setting-management.actions';
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
deleted file mode 100644
index 9fd4c48238..0000000000
--- a/npm/ng-packs/packages/setting-management/src/lib/actions/setting-management.actions.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ABP } from '@abp/ng.core';
-
-export class SetSelectedSettingTab {
-  static readonly type = '[SettingManagement] Set Selected Tab';
-  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 e8e94293e9..f72a222cdd 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,9 +1,6 @@
 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';
 
 @Component({
   selector: 'abp-setting-management',
@@ -13,18 +10,11 @@ export class SettingManagementComponent implements OnDestroy, OnInit {
   private subscription = new Subscription();
   settings: ABP.Tab[] = [];
 
-  set selected(value: ABP.Tab) {
-    this.store.dispatch(new SetSelectedSettingTab(value));
-  }
-  get selected(): ABP.Tab {
-    const value = this.store.selectSnapshot(SettingManagementState.getSelectedTab);
-
-    return value?.component ? value : this.settings[0] || ({} as ABP.Tab);
-  }
+  selected: ABP.Tab;
 
   trackByFn: TrackByFunction<ABP.Tab> = (_, item) => item.name;
 
-  constructor(private store: Store, private settingTabsService: SettingTabsService) {}
+  constructor(private settingTabsService: SettingTabsService) {}
 
   ngOnDestroy() {
     this.subscription.unsubscribe();
diff --git a/npm/ng-packs/packages/setting-management/src/lib/models/index.ts b/npm/ng-packs/packages/setting-management/src/lib/models/index.ts
deleted file mode 100644
index 16955ae40f..0000000000
--- a/npm/ng-packs/packages/setting-management/src/lib/models/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './setting-management';
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
deleted file mode 100644
index cb6f542cbc..0000000000
--- a/npm/ng-packs/packages/setting-management/src/lib/models/setting-management.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ABP } from '@abp/ng.core';
-
-export namespace SettingManagement {
-  export interface State {
-    selectedTab?: ABP.Tab;
-  }
-}
diff --git a/npm/ng-packs/packages/setting-management/src/lib/setting-management.module.ts b/npm/ng-packs/packages/setting-management/src/lib/setting-management.module.ts
index d27ae0b0a2..5e88b588cf 100644
--- a/npm/ng-packs/packages/setting-management/src/lib/setting-management.module.ts
+++ b/npm/ng-packs/packages/setting-management/src/lib/setting-management.module.ts
@@ -2,21 +2,13 @@ import { PageModule } from '@abp/ng.components/page';
 import { CoreModule, LazyModuleFactory } from '@abp/ng.core';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { ModuleWithProviders, NgModule, NgModuleFactory } from '@angular/core';
-import { NgxsModule } from '@ngxs/store';
 import { SettingManagementComponent } from './components/setting-management.component';
 import { SettingManagementRoutingModule } from './setting-management-routing.module';
-import { SettingManagementState } from './states/setting-management.state';
 
 @NgModule({
   declarations: [SettingManagementComponent],
   exports: [SettingManagementComponent],
-  imports: [
-    SettingManagementRoutingModule,
-    CoreModule,
-    ThemeSharedModule,
-    PageModule,
-    NgxsModule.forFeature([SettingManagementState]),
-  ],
+  imports: [SettingManagementRoutingModule, CoreModule, ThemeSharedModule, PageModule],
 })
 export class SettingManagementModule {
   static forChild(): ModuleWithProviders<SettingManagementModule> {
diff --git a/npm/ng-packs/packages/setting-management/src/lib/states/index.ts b/npm/ng-packs/packages/setting-management/src/lib/states/index.ts
deleted file mode 100644
index 23cda4c4d0..0000000000
--- a/npm/ng-packs/packages/setting-management/src/lib/states/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './setting-management.state';
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
deleted file mode 100644
index 19a6ba8835..0000000000
--- a/npm/ng-packs/packages/setting-management/src/lib/states/setting-management.state.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-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';
-
-@State<SettingManagement.State>({
-  name: 'SettingManagementState',
-  defaults: {},
-})
-@Injectable()
-export class SettingManagementState {
-  @Selector()
-  static getSelectedTab({ selectedTab }: SettingManagement.State) {
-    return selectedTab;
-  }
-
-  @Action(SetSelectedSettingTab)
-  settingManagementAction(
-    { patchState }: StateContext<SettingManagement.State>,
-    { payload }: SetSelectedSettingTab,
-  ) {
-    patchState({
-      selectedTab: payload,
-    });
-  }
-}