diff --git a/npm/ng-packs/.vscode/settings.json b/npm/ng-packs/.vscode/settings.json
index 9c2678df08..a04bf7ca0c 100644
--- a/npm/ng-packs/.vscode/settings.json
+++ b/npm/ng-packs/.vscode/settings.json
@@ -18,7 +18,9 @@
     "titleBar.inactiveForeground": "#e7e7e799",
     "statusBar.background": "#1d70a2",
     "statusBarItem.hoverBackground": "#258ecd",
-    "statusBar.foreground": "#e7e7e7"
+    "statusBar.foreground": "#e7e7e7",
+    "statusBar.border": "#1d70a2",
+    "titleBar.border": "#1d70a2"
   },
   "peacock.color": "#1D70A2"
 }
diff --git a/npm/ng-packs/packages/account/src/lib/account-routing.module.ts b/npm/ng-packs/packages/account/src/lib/account-routing.module.ts
index db4147f2a0..2225e7c592 100644
--- a/npm/ng-packs/packages/account/src/lib/account-routing.module.ts
+++ b/npm/ng-packs/packages/account/src/lib/account-routing.module.ts
@@ -9,6 +9,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { LoginComponent } from './components/login/login.component';
 import { ManageProfileComponent } from './components/manage-profile/manage-profile.component';
 import { RegisterComponent } from './components/register/register.component';
+import { eAccountComponents } from './enums/components';
 
 const routes: Routes = [
   { path: '', pathMatch: 'full', redirectTo: 'login' },
@@ -21,7 +22,7 @@ const routes: Routes = [
         component: ReplaceableRouteContainerComponent,
         data: {
           replaceableComponent: {
-            key: 'Account.LoginComponent',
+            key: eAccountComponents.Login,
             defaultComponent: LoginComponent,
           } as ReplaceableComponents.RouteData<LoginComponent>,
         },
@@ -31,7 +32,7 @@ const routes: Routes = [
         component: ReplaceableRouteContainerComponent,
         data: {
           replaceableComponent: {
-            key: 'Account.RegisterComponent',
+            key: eAccountComponents.Register,
             defaultComponent: RegisterComponent,
           } as ReplaceableComponents.RouteData<RegisterComponent>,
         },
@@ -42,7 +43,7 @@ const routes: Routes = [
         canActivate: [AuthGuard],
         data: {
           replaceableComponent: {
-            key: 'Account.ManageProfileComponent',
+            key: eAccountComponents.ManageProfile,
             defaultComponent: ManageProfileComponent,
           } as ReplaceableComponents.RouteData<ManageProfileComponent>,
         },
diff --git a/npm/ng-packs/packages/account/src/lib/components/auth-wrapper/auth-wrapper.component.html b/npm/ng-packs/packages/account/src/lib/components/auth-wrapper/auth-wrapper.component.html
index 6e732540d4..3377b74a88 100644
--- a/npm/ng-packs/packages/account/src/lib/components/auth-wrapper/auth-wrapper.component.html
+++ b/npm/ng-packs/packages/account/src/lib/components/auth-wrapper/auth-wrapper.component.html
@@ -1,9 +1,7 @@
 <div class="row">
   <div class="mx-auto col col-md-5">
     <ng-container *ngIf="isMultiTenancyEnabled$ | async">
-      <abp-tenant-box
-        *abpReplaceableTemplate="{ componentKey: 'Account.TenantBoxComponent' }"
-      ></abp-tenant-box>
+      <abp-tenant-box *abpReplaceableTemplate="{ componentKey: tenantBoxKey }"></abp-tenant-box>
     </ng-container>
 
     <div class="abp-account-container">
diff --git a/npm/ng-packs/packages/account/src/lib/components/auth-wrapper/auth-wrapper.component.ts b/npm/ng-packs/packages/account/src/lib/components/auth-wrapper/auth-wrapper.component.ts
index d5d82b7716..23130318b8 100644
--- a/npm/ng-packs/packages/account/src/lib/components/auth-wrapper/auth-wrapper.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/auth-wrapper/auth-wrapper.component.ts
@@ -3,6 +3,7 @@ import { Component, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core'
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { Account } from '../../models/account';
+import { eAccountComponents } from '../../enums/components';
 
 @Component({
   selector: 'abp-auth-wrapper',
@@ -26,6 +27,8 @@ export class AuthWrapperComponent
 
   enableLocalLogin = true;
 
+  tenantBoxKey = eAccountComponents.TenantBox;
+
   constructor(private store: Store) {}
 
   ngOnInit() {
diff --git a/npm/ng-packs/packages/account/src/lib/components/login/login.component.html b/npm/ng-packs/packages/account/src/lib/components/login/login.component.html
index 09e5d0314d..3f31c7edeb 100644
--- a/npm/ng-packs/packages/account/src/lib/components/login/login.component.html
+++ b/npm/ng-packs/packages/account/src/lib/components/login/login.component.html
@@ -1,6 +1,6 @@
 <abp-auth-wrapper
   *abpReplaceableTemplate="{
-    componentKey: 'Account.AuthWrapperComponent',
+    componentKey: authWrapperKey,
     inputs: {
       mainContentRef: { value: mainContentRef },
       cancelContentRef: { value: cancelContentRef }
diff --git a/npm/ng-packs/packages/account/src/lib/components/login/login.component.ts b/npm/ng-packs/packages/account/src/lib/components/login/login.component.ts
index 21a6ac31a2..21ba727692 100644
--- a/npm/ng-packs/packages/account/src/lib/components/login/login.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/login/login.component.ts
@@ -7,6 +7,7 @@ import { OAuthService } from 'angular-oauth2-oidc';
 import { throwError } from 'rxjs';
 import { catchError, finalize } from 'rxjs/operators';
 import snq from 'snq';
+import { eAccountComponents } from '../../enums/components';
 
 const { maxLength, minLength, required } = Validators;
 
@@ -21,6 +22,8 @@ export class LoginComponent implements OnInit {
 
   isSelfRegistrationEnabled = true;
 
+  authWrapperKey = eAccountComponents.AuthWrapper;
+
   constructor(
     private fb: FormBuilder,
     private oauthService: OAuthService,
diff --git a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html
index 20ddf69a06..16e0d66f42 100644
--- a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html
+++ b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html
@@ -33,7 +33,7 @@
               <hr />
             </h4>
             <abp-change-password-form
-              *abpReplaceableTemplate="{ componentKey: 'Account.ChangePasswordComponent' }"
+              *abpReplaceableTemplate="{ componentKey: changePasswordKey }"
             ></abp-change-password-form>
           </div>
         </div>
@@ -44,7 +44,7 @@
               <hr />
             </h4>
             <abp-personal-settings-form
-              *abpReplaceableTemplate="{ componentKey: 'Account.PersonalSettingsComponent' }"
+              *abpReplaceableTemplate="{ componentKey: personalSettingsKey }"
             ></abp-personal-settings-form>
           </div>
         </div>
diff --git a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
index d19a1dcd6a..f9ee2b8ff7 100644
--- a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
@@ -1,6 +1,7 @@
 import { fadeIn } from '@abp/ng.theme.shared';
 import { transition, trigger, useAnimation } from '@angular/animations';
 import { Component } from '@angular/core';
+import { eAccountComponents } from '../../enums/components';
 
 @Component({
   selector: 'abp-manage-profile',
@@ -9,4 +10,8 @@ import { Component } from '@angular/core';
 })
 export class ManageProfileComponent {
   selectedTab = 0;
+
+  changePasswordKey = eAccountComponents.ChangePassword;
+
+  personalSettingsKey = eAccountComponents.PersonalSettings;
 }
diff --git a/npm/ng-packs/packages/account/src/lib/components/register/register.component.html b/npm/ng-packs/packages/account/src/lib/components/register/register.component.html
index f803d473cd..58fafdf541 100644
--- a/npm/ng-packs/packages/account/src/lib/components/register/register.component.html
+++ b/npm/ng-packs/packages/account/src/lib/components/register/register.component.html
@@ -1,6 +1,6 @@
 <abp-auth-wrapper
   *abpReplaceableTemplate="{
-    componentKey: 'Account.AuthWrapperComponent',
+    componentKey: authWrapperKey,
     inputs: {
       mainContentRef: { value: mainContentRef }
     }
diff --git a/npm/ng-packs/packages/account/src/lib/components/register/register.component.ts b/npm/ng-packs/packages/account/src/lib/components/register/register.component.ts
index c9ff280792..32dc096748 100644
--- a/npm/ng-packs/packages/account/src/lib/components/register/register.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/register/register.component.ts
@@ -9,6 +9,7 @@ import { catchError, finalize, switchMap } from 'rxjs/operators';
 import snq from 'snq';
 import { RegisterRequest } from '../../models';
 import { AccountService } from '../../services/account.service';
+import { eAccountComponents } from '../../enums/components';
 const { maxLength, required, email } = Validators;
 
 @Component({
@@ -22,6 +23,8 @@ export class RegisterComponent implements OnInit {
 
   isSelfRegistrationEnabled = true;
 
+  authWrapperKey = eAccountComponents.AuthWrapper;
+
   constructor(
     private fb: FormBuilder,
     private accountService: AccountService,
diff --git a/npm/ng-packs/packages/account/src/lib/enums/components.ts b/npm/ng-packs/packages/account/src/lib/enums/components.ts
new file mode 100644
index 0000000000..b5c6ea8ff6
--- /dev/null
+++ b/npm/ng-packs/packages/account/src/lib/enums/components.ts
@@ -0,0 +1,9 @@
+export const enum eAccountComponents {
+  Login = 'Account.LoginComponent',
+  Register = 'Account.RegisterComponent',
+  ManageProfile = 'Account.ManageProfileComponent',
+  TenantBox = 'Account.TenantBoxComponent',
+  AuthWrapper = 'Account.AuthWrapperComponent',
+  ChangePassword = 'Account.ChangePasswordComponent',
+  PersonalSettings = 'Account.PersonalSettingsComponent',
+}
diff --git a/npm/ng-packs/packages/account/src/public-api.ts b/npm/ng-packs/packages/account/src/public-api.ts
index 173cb6ea89..63cb476f9b 100644
--- a/npm/ng-packs/packages/account/src/public-api.ts
+++ b/npm/ng-packs/packages/account/src/public-api.ts
@@ -1,5 +1,6 @@
 export * from './lib/account.module';
 export * from './lib/components';
+export * from './lib/enums/components';
 export * from './lib/tokens';
 export * from './lib/models';
 export * from './lib/services';
diff --git a/npm/ng-packs/packages/feature-management/package.json b/npm/ng-packs/packages/feature-management/package.json
index be7147d264..b21bfc03bf 100644
--- a/npm/ng-packs/packages/feature-management/package.json
+++ b/npm/ng-packs/packages/feature-management/package.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/abpframework/abp.git"
   },
   "dependencies": {
-    "@abp/ng.theme.shared": "^2.5.0"
+    "@abp/ng.theme.shared": "~2.5.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/npm/ng-packs/packages/feature-management/src/lib/enums/components.ts b/npm/ng-packs/packages/feature-management/src/lib/enums/components.ts
new file mode 100644
index 0000000000..10d0b564a0
--- /dev/null
+++ b/npm/ng-packs/packages/feature-management/src/lib/enums/components.ts
@@ -0,0 +1,3 @@
+export const enum eFeatureManagementComponents {
+  FeatureManagement = 'FeatureManagement.FeatureManagementComponent',
+}
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 047ac00914..382e9ed884 100644
--- a/npm/ng-packs/packages/feature-management/src/public-api.ts
+++ b/npm/ng-packs/packages/feature-management/src/public-api.ts
@@ -1,2 +1,3 @@
 export * from './lib/feature-management.module';
 export * from './lib/components';
+export * from './lib/enums/components';
diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
index f800c4a8e4..9962d8dbb4 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
@@ -166,7 +166,7 @@
         hideBadges: { value: true }
       },
       outputs: { visibleChange: onVisiblePermissionChange },
-      componentKey: 'PermissionManagement.PermissionManagementComponent'
+      componentKey: permissionManagementKey
     };
     let init = initTemplate
   "
diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
index 20b1114669..5e0f64e811 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
@@ -14,6 +14,7 @@ import {
 } from '../../actions/identity.actions';
 import { Identity } from '../../models/identity';
 import { IdentityState } from '../../states/identity.state';
+import { ePermissionManagementComponents } from '@abp/ng.permission-management';
 
 @Component({
   selector: 'abp-roles',
@@ -46,6 +47,8 @@ export class RolesComponent implements OnInit {
 
   sortKey = '';
 
+  permissionManagementKey = ePermissionManagementComponents.PermissionManagement;
+
   @ViewChild('formRef', { static: false, read: ElementRef })
   formRef: ElementRef<HTMLFormElement>;
 
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
index 38b22789e9..e00dbfe866 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
@@ -262,7 +262,7 @@
         visible: { value: visiblePermissions, twoWay: true }
       },
       outputs: { visibleChange: onVisiblePermissionChange },
-      componentKey: 'PermissionManagement.PermissionManagementComponent'
+      componentKey: permissionManagementKey
     };
     let init = initTemplate
   "
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
index 1e943a6be6..e208f9ffec 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
@@ -24,6 +24,7 @@ import {
 import { Identity } from '../../models/identity';
 import { IdentityService } from '../../services/identity.service';
 import { IdentityState } from '../../states/identity.state';
+import { ePermissionManagementComponents } from '@abp/ng.permission-management';
 @Component({
   selector: 'abp-users',
   templateUrl: './users.component.html',
@@ -62,6 +63,8 @@ export class UsersComponent implements OnInit {
 
   sortKey = '';
 
+  permissionManagementKey = ePermissionManagementComponents.PermissionManagement;
+
   trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
 
   onVisiblePermissionChange = event => {
diff --git a/npm/ng-packs/packages/identity/src/lib/enums/components.ts b/npm/ng-packs/packages/identity/src/lib/enums/components.ts
new file mode 100644
index 0000000000..abadd38955
--- /dev/null
+++ b/npm/ng-packs/packages/identity/src/lib/enums/components.ts
@@ -0,0 +1,4 @@
+export const enum eIdentityComponents {
+  Roles = 'Identity.RolesComponent',
+  Users = 'Identity.UsersComponent',
+}
diff --git a/npm/ng-packs/packages/identity/src/lib/identity-routing.module.ts b/npm/ng-packs/packages/identity/src/lib/identity-routing.module.ts
index eff6a7ce98..f7d5463fcd 100644
--- a/npm/ng-packs/packages/identity/src/lib/identity-routing.module.ts
+++ b/npm/ng-packs/packages/identity/src/lib/identity-routing.module.ts
@@ -10,6 +10,7 @@ import { NgModule, Type } from '@angular/core';
 import { RouterModule, Routes, Router, ActivatedRoute } from '@angular/router';
 import { RolesComponent } from './components/roles/roles.component';
 import { UsersComponent } from './components/users/users.component';
+import { eIdentityComponents } from './enums/components';
 
 const routes: Routes = [
   { path: '', redirectTo: 'roles', pathMatch: 'full' },
@@ -24,7 +25,7 @@ const routes: Routes = [
         data: {
           requiredPolicy: 'AbpIdentity.Roles',
           replaceableComponent: {
-            key: 'Identity.RolesComponent',
+            key: eIdentityComponents.Roles,
             defaultComponent: RolesComponent,
           } as ReplaceableComponents.RouteData<RolesComponent>,
         },
@@ -35,7 +36,7 @@ const routes: Routes = [
         data: {
           requiredPolicy: 'AbpIdentity.Users',
           replaceableComponent: {
-            key: 'Identity.UsersComponent',
+            key: eIdentityComponents.Users,
             defaultComponent: UsersComponent,
           } as ReplaceableComponents.RouteData<UsersComponent>,
         },
diff --git a/npm/ng-packs/packages/identity/src/public-api.ts b/npm/ng-packs/packages/identity/src/public-api.ts
index b401fed1c6..1a2b217931 100644
--- a/npm/ng-packs/packages/identity/src/public-api.ts
+++ b/npm/ng-packs/packages/identity/src/public-api.ts
@@ -4,6 +4,7 @@
 
 export * from './lib/identity.module';
 export * from './lib/actions/identity.actions';
+export * from './lib/enums/components';
 export * from './lib/components';
 export * from './lib/models/identity';
 export * from './lib/services';
diff --git a/npm/ng-packs/packages/permission-management/src/lib/enums/components.ts b/npm/ng-packs/packages/permission-management/src/lib/enums/components.ts
new file mode 100644
index 0000000000..175d39c999
--- /dev/null
+++ b/npm/ng-packs/packages/permission-management/src/lib/enums/components.ts
@@ -0,0 +1,3 @@
+export const enum ePermissionManagementComponents {
+  PermissionManagement = 'PermissionManagement.PermissionManagementComponent',
+}
diff --git a/npm/ng-packs/packages/permission-management/src/public-api.ts b/npm/ng-packs/packages/permission-management/src/public-api.ts
index 3182363f25..c9a8445ebd 100644
--- a/npm/ng-packs/packages/permission-management/src/public-api.ts
+++ b/npm/ng-packs/packages/permission-management/src/public-api.ts
@@ -5,6 +5,7 @@
 export * from './lib/permission-management.module';
 export * from './lib/actions';
 export * from './lib/components';
+export * from './lib/enums/components';
 export * from './lib/models';
 export * from './lib/services';
 export * from './lib/states';
diff --git a/npm/ng-packs/packages/setting-management/src/lib/enums/components.ts b/npm/ng-packs/packages/setting-management/src/lib/enums/components.ts
new file mode 100644
index 0000000000..7dafe76b7d
--- /dev/null
+++ b/npm/ng-packs/packages/setting-management/src/lib/enums/components.ts
@@ -0,0 +1,3 @@
+export const enum eSettingManagementComponents {
+  SettingManagement = 'SettingManagement.SettingManagementComponent',
+}
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 d9a50073e1..f394abc962 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
@@ -6,6 +6,7 @@ import {
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { SettingManagementComponent } from './components/setting-management.component';
+import { eSettingManagementComponents } from './enums/components';
 
 const routes: Routes = [
   {
@@ -18,7 +19,7 @@ const routes: Routes = [
         data: {
           requiredPolicy: 'AbpAccount.SettingManagement',
           replaceableComponent: {
-            key: 'SettingManagement.SettingManagementComponent',
+            key: eSettingManagementComponents.SettingManagement,
             defaultComponent: SettingManagementComponent,
           } as ReplaceableComponents.RouteData,
         },
diff --git a/npm/ng-packs/packages/setting-management/src/public-api.ts b/npm/ng-packs/packages/setting-management/src/public-api.ts
index 8027d769f9..ac030c3ccf 100644
--- a/npm/ng-packs/packages/setting-management/src/public-api.ts
+++ b/npm/ng-packs/packages/setting-management/src/public-api.ts
@@ -1,2 +1,3 @@
 export * from './lib/setting-management.module';
 export * from './lib/components/setting-management.component';
+export * from './lib/enums/components';
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
index 2b0276ede8..10761a3618 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
+++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
@@ -141,7 +141,9 @@
         <input type="text" id="name" class="form-control" formControlName="name" autofocus />
       </div>
       <div class="form-group" *ngIf="tenantForm.controls.adminEmailAddress">
-        <label for="name">{{ 'AbpTenantManagement::DisplayName:AdminEmailAddress' | abpLocalization }}</label>
+        <label for="name">{{
+          'AbpTenantManagement::DisplayName:AdminEmailAddress' | abpLocalization
+        }}</label>
         <input
           autocomplete="email"
           type="email"
@@ -151,7 +153,9 @@
         />
       </div>
       <div class="form-group" *ngIf="tenantForm.controls.adminPassword">
-        <label for="name">{{ 'AbpTenantManagement::DisplayName:AdminPassword' | abpLocalization }}</label>
+        <label for="name">{{
+          'AbpTenantManagement::DisplayName:AdminPassword' | abpLocalization
+        }}</label>
         <input
           autocomplete="new-password"
           type="password"
@@ -203,7 +207,7 @@
       visible: { value: visibleFeatures, twoWay: true }
     },
     outputs: { visibleChange: onVisibleFeaturesChange },
-    componentKey: 'FeatureManagement.FeatureManagementComponent'
+    componentKey: featureManagementKey
   }"
   [(visible)]="visibleFeatures"
   providerName="T"
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts
index 4aaac15f96..d04f384a79 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts
+++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts
@@ -14,6 +14,7 @@ import {
 } from '../../actions/tenant-management.actions';
 import { TenantManagementService } from '../../services/tenant-management.service';
 import { TenantManagementState } from '../../states/tenant-management.state';
+import { eFeatureManagementComponents } from '@abp/ng.feature-management';
 
 interface SelectedModalContent {
   type: 'saveConnStr' | 'saveTenant';
@@ -60,6 +61,8 @@ export class TenantsComponent implements OnInit {
 
   sortKey = '';
 
+  featureManagementKey = eFeatureManagementComponents.FeatureManagement;
+
   get hasSelectedTenant(): boolean {
     return Boolean(this.selected.id);
   }
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/enums/components.ts b/npm/ng-packs/packages/tenant-management/src/lib/enums/components.ts
new file mode 100644
index 0000000000..69004a800b
--- /dev/null
+++ b/npm/ng-packs/packages/tenant-management/src/lib/enums/components.ts
@@ -0,0 +1,3 @@
+export const enum eTenantManagementComponents {
+  Tenants = 'TenantManagement.TenantsComponent',
+}
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/tenant-management-routing.module.ts b/npm/ng-packs/packages/tenant-management/src/lib/tenant-management-routing.module.ts
index 16e547e269..a02f63b635 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/tenant-management-routing.module.ts
+++ b/npm/ng-packs/packages/tenant-management/src/lib/tenant-management-routing.module.ts
@@ -8,6 +8,7 @@ import {
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { TenantsComponent } from './components/tenants/tenants.component';
+import { eTenantManagementComponents } from './enums/components';
 
 const routes: Routes = [
   { path: '', redirectTo: 'tenants', pathMatch: 'full' },
@@ -22,7 +23,7 @@ const routes: Routes = [
         data: {
           requiredPolicy: 'AbpTenantManagement.Tenants',
           replaceableComponent: {
-            key: 'TenantManagement.TenantsComponent',
+            key: eTenantManagementComponents.Tenants,
             defaultComponent: TenantsComponent,
           } as ReplaceableComponents.RouteData<TenantsComponent>,
         },
diff --git a/npm/ng-packs/packages/tenant-management/src/public-api.ts b/npm/ng-packs/packages/tenant-management/src/public-api.ts
index 20cecd353f..003074b2c4 100644
--- a/npm/ng-packs/packages/tenant-management/src/public-api.ts
+++ b/npm/ng-packs/packages/tenant-management/src/public-api.ts
@@ -1,6 +1,7 @@
 export * from './lib/tenant-management.module';
 export * from './lib/actions';
 export * from './lib/components';
+export * from './lib/enums/components';
 export * from './lib/models';
 export * from './lib/services';
 export * from './lib/states';
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/enums/components.ts b/npm/ng-packs/packages/theme-basic/src/lib/enums/components.ts
new file mode 100644
index 0000000000..e773e17464
--- /dev/null
+++ b/npm/ng-packs/packages/theme-basic/src/lib/enums/components.ts
@@ -0,0 +1,5 @@
+export const enum eThemeBasicComponents {
+  ApplicationLayout = 'Theme.ApplicationLayoutComponent',
+  AccountLayout = 'Theme.AccountLayoutComponent',
+  EmptyLayout = 'Theme.EmptyLayoutComponent',
+}
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/services/initial.service.ts b/npm/ng-packs/packages/theme-basic/src/lib/services/initial.service.ts
index 2510b77a8d..c5bc93cbf0 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/services/initial.service.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/services/initial.service.ts
@@ -5,6 +5,7 @@ import styles from '../constants/styles';
 import { ApplicationLayoutComponent } from '../components/application-layout/application-layout.component';
 import { AccountLayoutComponent } from '../components/account-layout/account-layout.component';
 import { EmptyLayoutComponent } from '../components/empty-layout/empty-layout.component';
+import { eThemeBasicComponents } from '../enums/components';
 
 @Injectable({ providedIn: 'root' })
 export class InitialService {
@@ -13,15 +14,15 @@ export class InitialService {
 
     this.store.dispatch([
       new AddReplaceableComponent({
-        key: 'Theme.ApplicationLayoutComponent',
+        key: eThemeBasicComponents.ApplicationLayout,
         component: ApplicationLayoutComponent,
       }),
       new AddReplaceableComponent({
-        key: 'Theme.AccountLayoutComponent',
+        key: eThemeBasicComponents.AccountLayout,
         component: AccountLayoutComponent,
       }),
       new AddReplaceableComponent({
-        key: 'Theme.EmptyLayoutComponent',
+        key: eThemeBasicComponents.EmptyLayout,
         component: EmptyLayoutComponent,
       }),
     ]);
diff --git a/npm/ng-packs/packages/theme-basic/src/public-api.ts b/npm/ng-packs/packages/theme-basic/src/public-api.ts
index b1316143c0..ee01995829 100644
--- a/npm/ng-packs/packages/theme-basic/src/public-api.ts
+++ b/npm/ng-packs/packages/theme-basic/src/public-api.ts
@@ -5,5 +5,6 @@
 export * from './lib/theme-basic.module';
 export * from './lib/actions';
 export * from './lib/components';
+export * from './lib/enums/components';
 export * from './lib/models';
 export * from './lib/states';