diff --git a/npm/ng-packs/packages/setting-management/src/lib/components/index.ts b/npm/ng-packs/packages/setting-management/src/lib/components/index.ts
deleted file mode 100644
index 4f59d5c056..0000000000
--- a/npm/ng-packs/packages/setting-management/src/lib/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './setting/setting.component';
diff --git a/npm/ng-packs/packages/setting-management/src/lib/components/services/initial.service.ts b/npm/ng-packs/packages/setting-management/src/lib/components/services/initial.service.ts
deleted file mode 100644
index 44f289a362..0000000000
--- a/npm/ng-packs/packages/setting-management/src/lib/components/services/initial.service.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { SettingTab } from '@abp/ng.theme.shared';
-import { Injectable, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import snq from 'snq';
-
-@Injectable()
-export class InitialService {
-  public settings: SettingTab[];
-
-  constructor(private router: Router) {
-    this.settings = this.router.config
-      .map(route => snq(() => route.data.routes.settings))
-      .filter(settings => settings && settings.length)
-      .reduce((acc, val) => [...acc, ...val], [])
-      .sort((a, b) => a.order - b.order);
-  }
-}
diff --git a/npm/ng-packs/packages/setting-management/src/lib/components/setting-layout.component.html b/npm/ng-packs/packages/setting-management/src/lib/components/setting-layout.component.html
new file mode 100644
index 0000000000..8465f75e65
--- /dev/null
+++ b/npm/ng-packs/packages/setting-management/src/lib/components/setting-layout.component.html
@@ -0,0 +1,59 @@
+<div class="row entry-row">
+  <div class="col-auto">
+    <h1 class="content-header-title">{{ 'AbpSettingManagement::Settings' | abpLocalization }}</h1>
+  </div>
+  <!-- <div id="breadcrumb" class="col-md-auto pl-md-0">
+    <abp-breadcrumb></abp-breadcrumb>
+  </div> -->
+  <div class="col">
+    <div class="text-lg-right pt-2" id="AbpContentToolbar"></div>
+  </div>
+</div>
+
+<div id="SettingManagementWrapper">
+  <div class="card">
+    <div class="card-body">
+      <div *ngIf="!settingManagementService.settings.length" class="text-center">
+        <i class="fa fa-spinner fa-spin"></i>
+      </div>
+      <div class="row">
+        <div class="col-3">
+          <ul class="nav flex-column nav-pills" id="nav-tab" role="tablist">
+            <li
+              *abpFor="
+                let setting of settingManagementService.settings;
+                trackBy: trackByFn;
+                orderBy: 'order';
+                orderDir: 'ASC'
+              "
+              (click)="settingManagementService.setSelected(setting)"
+              class="nav-item"
+              [abpPermission]="setting.requiredPolicy"
+            >
+              <a
+                class="nav-link"
+                [id]="setting.name + '-tab'"
+                role="tab"
+                [class.active]="setting.name === settingManagementService.selected.name"
+                >{{ setting.name | abpLocalization }}</a
+              >
+            </li>
+          </ul>
+        </div>
+        <div class="col-9">
+          <div *ngIf="settingManagementService.settings.length" class="tab-content">
+            <div
+              class="tab-pane fade show active"
+              [id]="settingManagementService.selected.name + '-tab'"
+              role="tabpanel"
+            >
+              <h2>{{ settingManagementService.selected.name | abpLocalization }}</h2>
+              <hr class="my-4" />
+              <router-outlet></router-outlet>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/npm/ng-packs/packages/setting-management/src/lib/components/setting-layout.component.ts b/npm/ng-packs/packages/setting-management/src/lib/components/setting-layout.component.ts
new file mode 100644
index 0000000000..3096a2104b
--- /dev/null
+++ b/npm/ng-packs/packages/setting-management/src/lib/components/setting-layout.component.ts
@@ -0,0 +1,37 @@
+import { eLayoutType } from '@abp/ng.core';
+import { SettingTab } from '@abp/ng.theme.shared';
+import { Component, TrackByFunction } from '@angular/core';
+import { Router } from '@angular/router';
+import { timer } from 'rxjs';
+import { SettingManagementService } from '../services/setting-management.service';
+
+@Component({
+  selector: 'abp-setting-layout',
+  templateUrl: './setting-layout.component.html',
+})
+export class SettingLayoutComponent {
+  // required for dynamic component
+  static type = eLayoutType.setting;
+
+  trackByFn: TrackByFunction<SettingTab> = (_, item) => item.name;
+
+  constructor(public settingManagementService: SettingManagementService, private router: Router) {
+    if (
+      settingManagementService.selected &&
+      this.router.url !== settingManagementService.selected.url &&
+      settingManagementService.settings.length
+    ) {
+      settingManagementService.setSelected(settingManagementService.settings[0]);
+    }
+  }
+
+  ngOnDestroy() {}
+
+  ngAfterViewInit() {
+    timer(250).subscribe(() => {
+      if (!this.settingManagementService.settings.length) {
+        this.settingManagementService.setSettings();
+      }
+    });
+  }
+}
diff --git a/npm/ng-packs/packages/setting-management/src/lib/components/setting/setting.component.html b/npm/ng-packs/packages/setting-management/src/lib/components/setting/setting.component.html
deleted file mode 100644
index 6397e17a1f..0000000000
--- a/npm/ng-packs/packages/setting-management/src/lib/components/setting/setting.component.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<div class="row entry-row">
-  <div class="col-auto">
-    <h1 class="content-header-title">{{ 'AbpSettingManagement::Settings' | abpLocalization }}</h1>
-  </div>
-  <div id="breadcrumb" class="col-md-auto pl-md-0">
-    <abp-breadcrumb></abp-breadcrumb>
-  </div>
-  <div class="col">
-    <div class="text-lg-right pt-2" id="AbpContentToolbar"></div>
-  </div>
-</div>
-
-<div id="SettingManagementWrapper">
-  <div class="card">
-    <div class="card-body">
-      <div class="row">
-        <div class="col-3">
-          <ul class="nav flex-column nav-pills" id="T515ccf3324254f41a4a9a6b34b0dae56" role="tablist">
-            <li
-              *ngFor="let setting of settings"
-              (click)="selected = setting"
-              class="nav-item"
-              [abpPermission]="setting.requiredPolicy"
-            >
-              <a
-                class="nav-link"
-                [id]="setting.name + '-tab'"
-                role="tab"
-                [class.active]="setting.name === selected.name"
-                >{{ setting.name | abpLocalization }}</a
-              >
-            </li>
-          </ul>
-        </div>
-        <div class="col-9">
-          <div class="tab-content">
-            <div class="tab-pane fade show active" [id]="selected.name + '-tab'" role="tabpanel">
-              <h2>{{ selected.name | abpLocalization }}</h2>
-              <hr class="my-4" />
-
-              <ng-container
-                *ngComponentOutlet="selected.component"
-                [abpPermission]="selected.requiredPolicy"
-              ></ng-container>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/npm/ng-packs/packages/setting-management/src/lib/components/setting/setting.component.ts b/npm/ng-packs/packages/setting-management/src/lib/components/setting/setting.component.ts
deleted file mode 100644
index 645f7e2c2c..0000000000
--- a/npm/ng-packs/packages/setting-management/src/lib/components/setting/setting.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { SettingTab, fade } from '@abp/ng.theme.shared';
-import { InitialService } from '../services/initial.service';
-
-@Component({
-  selector: 'abp-setting',
-  templateUrl: './setting.component.html',
-})
-export class SettingComponent implements OnInit {
-  settings: SettingTab[];
-
-  selected = {} as SettingTab;
-
-  constructor(private initialService: InitialService) {}
-
-  ngOnInit() {
-    this.settings = this.initialService.settings;
-    this.selected = this.settings[0];
-  }
-}
diff --git a/npm/ng-packs/packages/setting-management/src/lib/constants/routes.ts b/npm/ng-packs/packages/setting-management/src/lib/constants/routes.ts
index 067f8e9c02..3f47c95eb7 100644
--- a/npm/ng-packs/packages/setting-management/src/lib/constants/routes.ts
+++ b/npm/ng-packs/packages/setting-management/src/lib/constants/routes.ts
@@ -11,5 +11,4 @@ export const SETTING_MANAGEMENT_ROUTES = {
       iconClass: 'fa fa-cog',
     },
   ] as ABP.FullRoute[],
-  settings: [],
 };
diff --git a/npm/ng-packs/packages/setting-management/src/lib/services/setting-management.service.ts b/npm/ng-packs/packages/setting-management/src/lib/services/setting-management.service.ts
new file mode 100644
index 0000000000..141ce3a03d
--- /dev/null
+++ b/npm/ng-packs/packages/setting-management/src/lib/services/setting-management.service.ts
@@ -0,0 +1,53 @@
+import { SettingTab } from '@abp/ng.theme.shared';
+import { Injectable } from '@angular/core';
+import { Router, RouteConfigLoadEnd, NavigationEnd } from '@angular/router';
+import { Navigate } from '@ngxs/router-plugin';
+import { Store } from '@ngxs/store';
+import { filter } from 'rxjs/operators';
+import { takeUntilDestroy } from '@abp/ng.core';
+import { Subscription, timer } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class SettingManagementService {
+  settings: SettingTab[] = [];
+
+  selected = {} as SettingTab;
+
+  constructor(private router: Router, private store: Store) {
+    let timeout: Subscription;
+    this.router.events
+      .pipe(
+        filter(event => event instanceof RouteConfigLoadEnd),
+        takeUntilDestroy(this),
+      )
+      .subscribe(event => {
+        if (timeout) timeout.unsubscribe();
+        timeout = timer(150).subscribe(() => {
+          this.setSettings();
+        });
+      });
+  }
+
+  ngOnDestroy() {}
+
+  setSettings() {
+    setTimeout(() => {
+      const route = this.router.config.find(r => r.path === 'setting-management');
+      this.settings = route.data.settings.sort((a, b) => a.order - b.order);
+      this.checkSelected();
+    }, 0);
+  }
+
+  checkSelected() {
+    this.selected = this.settings.find(setting => setting.url === this.router.url) || ({} as SettingTab);
+
+    if (!this.selected.name && this.settings.length) {
+      this.setSelected(this.settings[0]);
+    }
+  }
+
+  setSelected(selected: SettingTab) {
+    this.selected = selected;
+    this.store.dispatch(new Navigate([selected.url]));
+  }
+}
diff --git a/npm/ng-packs/packages/setting-management/src/lib/setting-management-routing.module.ts b/npm/ng-packs/packages/setting-management/src/lib/setting-management-routing.module.ts
index dcafc14f41..e401df16de 100644
--- a/npm/ng-packs/packages/setting-management/src/lib/setting-management-routing.module.ts
+++ b/npm/ng-packs/packages/setting-management/src/lib/setting-management-routing.module.ts
@@ -1,13 +1,15 @@
 import { DynamicLayoutComponent } from '@abp/ng.core';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { SettingComponent } from './components/setting/setting.component';
+import { SETTING_MANAGEMENT_ROUTES } from './constants/routes';
+import { SettingLayoutComponent } from './components/setting-layout.component';
 
 const routes: Routes = [
   {
-    path: '',
+    path: 'setting-management',
     component: DynamicLayoutComponent,
-    children: [{ path: '', component: SettingComponent }],
+    children: [{ path: '', component: SettingLayoutComponent }],
+    data: { routes: SETTING_MANAGEMENT_ROUTES, settings: [] },
   },
 ];
 
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 6c0918788c..b3959e6650 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
@@ -1,15 +1,14 @@
-import { CoreModule, noop } from '@abp/ng.core';
-import { NgModule, ModuleWithProviders, APP_INITIALIZER, Self } from '@angular/core';
-import { SettingComponent } from './components/setting/setting.component';
-import { SettingManagementRoutingModule } from './setting-management-routing.module';
+import { CoreModule } from '@abp/ng.core';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { InitialService } from './components/services/initial.service';
+import { NgModule } from '@angular/core';
+import { SettingLayoutComponent } from './components/setting-layout.component';
+import { SettingManagementRoutingModule } from './setting-management-routing.module';
+
+export const SETTING_LAYOUT = SettingLayoutComponent;
 
 @NgModule({
-  declarations: [SettingComponent],
+  declarations: [SETTING_LAYOUT],
   imports: [SettingManagementRoutingModule, CoreModule, ThemeSharedModule],
-  providers: [InitialService],
+  entryComponents: [SETTING_LAYOUT],
 })
-export class SettingManagementModule {
-  constructor(@Self() initialService: InitialService) {}
-}
+export class SettingManagementModule {}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/models/setting-management.ts b/npm/ng-packs/packages/theme-shared/src/lib/models/setting-management.ts
index 68bd0335a5..1b8c36412e 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/models/setting-management.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/models/setting-management.ts
@@ -1,8 +1,6 @@
-import { Type } from '@angular/core';
-
 export interface SettingTab {
   name: string;
   order: number;
-  component: Type<any>;
   requiredPolicy?: string;
+  url?: string;
 }
diff --git a/npm/ng-packs/tsconfig.json b/npm/ng-packs/tsconfig.json
index 9c996dd271..d503c81439 100644
--- a/npm/ng-packs/tsconfig.json
+++ b/npm/ng-packs/tsconfig.json
@@ -11,8 +11,13 @@
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2015",
-    "typeRoots": ["node_modules/@types"],
-    "lib": ["es2018", "dom"],
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2018",
+      "dom"
+    ],
     "paths": {}
   },
   "angularCompilerOptions": {